diff --git a/src/app/fork/page.tsx b/src/app/fork/page.tsx
index b1f9af5..6575d6c 100644
--- a/src/app/fork/page.tsx
+++ b/src/app/fork/page.tsx
@@ -13,7 +13,7 @@ export default function ForkPage() {
       <div style={{ 
         maxWidth: '1200px', 
         margin: '0 auto 5rem',
-        padding: '0 2rem'
+        padding: '0 var(--page-edge)'
       }}>
         <div 
           className="card fork-hero-card"
@@ -42,7 +42,7 @@ export default function ForkPage() {
       <div style={{ 
         maxWidth: '1200px', 
         margin: '0 auto 6rem',
-        padding: '0 2rem'
+        padding: '0 var(--page-edge)'
       }}>
         <h2 style={{ 
           marginBottom: '3rem', 
@@ -116,7 +116,7 @@ export default function ForkPage() {
       <div style={{ 
         maxWidth: '1200px', 
         margin: '0 auto 6rem',
-        padding: '0 2rem'
+        padding: '0 var(--page-edge)'
       }}>
         <div className="fork-quick-start-grid" style={{
           display: 'grid',
@@ -231,7 +231,7 @@ npm run dev`}</pre>
       <div style={{ 
         maxWidth: '1200px', 
         margin: '0 auto 6rem',
-        padding: '0 2rem'
+        padding: '0 var(--page-edge)'
       }}>
         <div className="fork-config-grid" style={{
           display: 'grid',
@@ -287,7 +287,7 @@ NEXT_PUBLIC_REPO_URL=https://github.com/you/your-fork`}</pre>
       <div style={{ 
         maxWidth: '1200px', 
         margin: '0 auto 6rem',
-        padding: '0 2rem'
+        padding: '0 var(--page-edge)'
       }} id="manual-setup">
         <h2 style={{ 
           marginBottom: '3rem', 
@@ -417,7 +417,7 @@ vercel
       <div style={{ 
         maxWidth: '1200px', 
         margin: '0 auto 6rem',
-        padding: '0 2rem'
+        padding: '0 var(--page-edge)'
       }}>
         <div 
           className="card" 
@@ -457,7 +457,7 @@ vercel
       <div style={{ 
         maxWidth: '1200px', 
         margin: '0 auto 6rem',
-        padding: '0 2rem'
+        padding: '0 var(--page-edge)'
       }}>
         <div className="fork-resources-grid" style={{
           display: 'grid',
@@ -545,7 +545,7 @@ vercel
       <div style={{ 
         maxWidth: '1200px', 
         margin: '0 auto 4rem',
-        padding: '0 2rem'
+        padding: '0 var(--page-edge)'
       }}>
         <div 
           className="card" 
diff --git a/src/app/globals.css b/src/app/globals.css
index 87e3464..dfac099 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -116,6 +116,12 @@
   --font-serif: 'Crimson Pro', serif;
   --font-mono: 'IBM Plex Mono', monospace;
 
+  /* Horizontal gutter at the page edges. Trimmed on phones (see the
+     max-width: 768px block) and consumed both by the .container classes
+     and by inline `padding: '0 var(--page-edge) …'` on the home + fork
+     page section wrappers that don't use those classes. */
+  --page-edge: 2rem;
+
   color-scheme: dark;
 }
 
@@ -2294,11 +2300,38 @@ html {
     font-size: 16px !important;
   }
 
+  :root {
+    /* Tighter edge gutter on phones. Drives both the container override
+       below and the inline var(--page-edge) wrappers on home + fork. */
+    --page-edge: 0.875rem;
+  }
+
   .container,
   .container-narrow {
-    padding: 0 1rem;
+    /* Longhand + !important so this also wins over the inline
+       `padding: '0 2rem …'` most page wrappers set on these containers —
+       an inline shorthand otherwise beat the old `padding: 0 1rem` rule,
+       leaving 2rem edges on mobile. Only the horizontal gutter is forced;
+       each wrapper keeps its own inline top/bottom spacing. */
+    padding-left: var(--page-edge) !important;
+    padding-right: var(--page-edge) !important;
   }
-  
+
+  /* Sticky compact nav — trim the desktop-sized padding so the nav card
+     hugs the top and screen edges on phones. Its horizontal edges already
+     come from the .container-narrow override above (the card shares that
+     class); here we only tighten the top gap, inner row, and the space
+     below the header. */
+  .compact-header {
+    margin-bottom: 1.25rem !important;
+  }
+  .compact-header-inner {
+    padding-top: 1rem !important;
+  }
+  .compact-header-row {
+    padding: 0.625rem 0.75rem !important;
+  }
+
   h1 {
     font-size: 2rem;
   }
@@ -2780,7 +2813,8 @@ html {
   .home-product-strip {
     grid-template-columns: minmax(0, 1fr);
     gap: 1.75rem;
-    padding: 2.5rem 1.5rem;
+    /* Match the reduced page-edge gutter used elsewhere on mobile. */
+    padding: 2.5rem 0.875rem;
   }
   /* On mobile, demo always above copy regardless of flip. */
   .home-product-strip[data-flip] .home-product-strip-demo {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d87f700..6bc2216 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -36,7 +36,7 @@ export default function HomePage() {
         style={{
           maxWidth: '1400px',
           margin: '0 auto',
-          padding: '0 2rem 4rem',
+          padding: '0 var(--page-edge) 4rem',
         }}
       >
         <FadeIn delay={0.1}>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 58755c5..1c6026e 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -64,6 +64,7 @@ export default function Header({ simple = false, compact = false }: HeaderProps)
     return (
       <header
         ref={headerRef}
+        className="compact-header"
         style={{
           position: 'sticky',
           top: 0,
@@ -72,7 +73,7 @@ export default function Header({ simple = false, compact = false }: HeaderProps)
         }}
       >
         <div
-          className="container-narrow"
+          className="container-narrow compact-header-inner"
           style={{
             padding: '2rem 2rem 0.75rem',
           }}
@@ -94,6 +95,7 @@ export default function Header({ simple = false, compact = false }: HeaderProps)
           }}
         >
           <div
+            className="compact-header-row"
             style={{
               display: 'flex',
               alignItems: 'center',
diff --git a/src/components/HomeHero.tsx b/src/components/HomeHero.tsx
index 058c4ac..ac623d7 100644
--- a/src/components/HomeHero.tsx
+++ b/src/components/HomeHero.tsx
@@ -25,7 +25,7 @@ export default function HomeHero() {
       style={{
         maxWidth: '760px',
         margin: '2.5rem auto 3rem',
-        padding: '0 2rem',
+        padding: '0 var(--page-edge)',
         textAlign: 'center',
       }}
     >