From 4b356a6b5b0b929d954cda7f5edc3996a5695164 Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Thu, 2 Apr 2026 11:26:43 -0700
Subject: [PATCH] Improve mobile experience across all sections

Hero: reorder visual above text on mobile, shorter tagline, tighter spacing.
Antidote: horizontal scroll tabs, proper touch targets on gallery nav.
Commands: cleaner pill styles matching pattern tabs, flat demo area.
Get Started: constrain cards to viewport width (min-width: 0 fix),
wrap terminal commands, stack "best together" callout vertically.
FAQ/Changelog: mobile breakpoints with touch-friendly sizing.
Footer: tighter gaps and centered links on mobile.
General: bump minimum font sizes, fix section nav at 400px.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 public/css/main.css     | 172 ++++++++++++++++++++++++++++++++++++----
 public/css/styles.css   | 168 +++++++++++++++++++++++++++++++++++----
 public/css/workflow.css |  32 ++++++++
 public/index.html       |   5 +-
 4 files changed, 341 insertions(+), 36 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index 1814c4ddb..eb5511903 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -219,8 +219,12 @@ button, input, textarea, select {
 }
 
 @media (max-width: 400px) {
-  .section-nav {
-    display: none;
+  .section-nav-item {
+    padding: 8px;
+  }
+
+  .section-nav-num {
+    font-size: 0.625rem;
   }
 }
 
@@ -442,6 +446,28 @@ code {
   }
 }
 
+@media (max-width: 768px) {
+  .hero-combined-right {
+    order: -1;
+    padding-top: var(--spacing-xl);
+  }
+
+  .hero-combined-container {
+    gap: var(--spacing-md);
+  }
+
+  .hero-combined-left {
+    gap: var(--spacing-sm);
+    padding-top: var(--spacing-md);
+  }
+
+  .hero-hook-text,
+  .hero-included-box,
+  .hero-cta-group {
+    margin-top: var(--spacing-xs);
+  }
+}
+
 .hero-combined-left {
   display: flex;
   flex-direction: column;
@@ -483,6 +509,20 @@ code {
   margin: 0;
 }
 
+.hero-hook-text--short {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .hero-hook-text--full {
+    display: none;
+  }
+
+  .hero-hook-text--short {
+    display: block;
+  }
+}
+
 /* Hero Included Box - Subtle "What's included" */
 .hero-included-box {
   display: flex;
@@ -909,6 +949,18 @@ code {
   color: var(--color-ash);
 }
 
+@media (max-width: 768px) {
+  .split-comparison {
+    padding: 8px;
+    margin-top: -8px;
+    margin-bottom: -8px;
+  }
+
+  .split-labels {
+    display: none;
+  }
+}
+
 .split-label-dot {
   width: 8px;
   height: 8px;
@@ -1227,31 +1279,26 @@ code {
   font-family: var(--font-mono);
   font-size: 0.8125rem;
   font-weight: 500;
-  color: var(--color-ash);
-  background: var(--color-cream);
-  border: 1px solid var(--color-mist);
+  color: var(--color-charcoal);
+  background: none;
+  border: none;
   border-radius: 100px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background 0.2s ease, color 0.2s ease;
   white-space: nowrap;
 }
 
 .mobile-cmd-pill:hover {
-  color: var(--color-charcoal);
-  border-color: var(--color-charcoal);
+  background: var(--color-mist);
 }
 
 .mobile-cmd-pill.active {
   color: var(--color-paper);
   background: var(--color-ink);
-  border-color: var(--color-ink);
 }
 
 .mobile-demo-area {
-  background: var(--color-cream);
-  border: 1px solid var(--color-mist);
-  border-radius: 8px;
-  padding: var(--spacing-sm);
+  padding: 0;
 }
 
 .mobile-demo-area .demo-split-comparison {
@@ -1547,9 +1594,20 @@ code {
 }
 
 @media (max-width: 768px) {
+  .site-footer {
+    padding: var(--spacing-lg) var(--spacing-md);
+  }
+
   .footer-content {
     flex-direction: column;
     text-align: center;
+    gap: var(--spacing-md);
+  }
+
+  .footer-links {
+    gap: var(--spacing-sm) var(--spacing-md);
+    justify-content: center;
+    font-size: 0.8125rem;
   }
 }
 
@@ -2001,6 +2059,14 @@ code {
   color: var(--color-charcoal);
   flex-shrink: 0;
   transition: border-color var(--duration-fast), background var(--duration-fast);
+  position: relative;
+}
+
+/* Invisible 44px touch target */
+.gallery-stack-btn::after {
+  content: '';
+  position: absolute;
+  inset: -10px;
 }
 
 .gallery-stack-btn:hover {
@@ -2042,7 +2108,7 @@ code {
 
 .gallery-stack-label {
   padding: 6px 10px;
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   font-weight: 600;
   color: var(--color-charcoal);
   flex-shrink: 0;
@@ -2119,9 +2185,26 @@ code {
   margin-bottom: var(--spacing-md);
 }
 
+@media (max-width: 768px) {
+  .patterns-tabs {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    margin-left: calc(-1 * var(--spacing-lg));
+    margin-right: calc(-1 * var(--spacing-lg));
+    padding-left: var(--spacing-lg);
+    padding-right: var(--spacing-lg);
+  }
+
+  .patterns-tabs::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 .patterns-tab {
   font-family: var(--font-body);
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--color-charcoal);
   background: none;
@@ -2129,6 +2212,7 @@ code {
   border-radius: 100px;
   padding: 6px 12px;
   cursor: pointer;
+  white-space: nowrap;
   transition: background 0.2s ease, color 0.2s ease;
 }
 
@@ -2204,13 +2288,13 @@ code {
 
 .detection-badge {
   font-family: var(--font-mono);
-  font-size: 0.625rem;
+  font-size: 0.6875rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--color-accent);
   border: 1px solid var(--color-accent);
-  padding: 2px 10px;
+  padding: 3px 10px;
   border-radius: 99px;
   flex-shrink: 0;
 }
@@ -2375,6 +2459,7 @@ code {
 .install-path {
   display: flex;
   flex-direction: column;
+  min-width: 0;
 }
 
 .install-path-primary {
@@ -2651,10 +2736,63 @@ a.install-updated-ref:hover {
   .install-paths {
     grid-template-columns: 1fr;
     gap: var(--spacing-xl);
+    max-width: calc(100vw - var(--spacing-md) * 2);
   }
 
   .install-path-primary {
     margin-bottom: var(--spacing-sm);
+    padding: var(--spacing-md);
+  }
+
+  .install-path-title {
+    font-size: 1.25rem;
+  }
+
+  .install-path-desc {
+    font-size: 0.875rem;
+    overflow-wrap: break-word;
+  }
+
+  .install-together-inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
+  }
+
+  .install-updated-subscribe iframe {
+    height: 130px;
+  }
+
+  .install-terminal-cmd code {
+    font-size: 0.75rem;
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+
+  .install-alt-method {
+    padding: var(--spacing-sm);
+  }
+
+  .install-alt-method .install-terminal-cmd code {
+    font-size: 0.6875rem;
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+
+  .install-alt-method .install-terminal-cmd .copy-btn {
+    display: none;
+  }
+
+  .install-path-terminal .glass-terminal {
+    box-shadow: none;
+  }
+
+  .install-terminal {
+    max-width: 100%;
+  }
+
+  .install-alternatives {
+    max-width: 100%;
   }
 }
 
diff --git a/public/css/styles.css b/public/css/styles.css
index f4c0cc7fc..e47d5ebde 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1164,6 +1164,31 @@
 .faq-answer a:hover {
   border-bottom-color: var(--color-accent);
 }
+@media (max-width: 600px) {
+  .faq-question {
+    font-size: 1rem;
+    padding: var(--spacing-md) 0;
+    min-height: 44px;
+    gap: var(--spacing-sm);
+  }
+  .faq-answer {
+    font-size: 0.875rem;
+  }
+  .changelog-version {
+    font-size: 1rem;
+  }
+  .changelog-version-header {
+    flex-wrap: wrap;
+    gap: var(--spacing-xs);
+  }
+  .changelog-items {
+    padding-left: var(--spacing-sm);
+    font-size: 0.875rem;
+  }
+  .changelog-older-toggle {
+    min-height: 44px;
+  }
+}
 @keyframes faqFadeIn {
   from {
     opacity: 0;
@@ -2499,8 +2524,11 @@ button, input, textarea, select {
   }
 }
 @media (max-width: 400px) {
-  .section-nav {
-    display: none;
+  .section-nav-item {
+    padding: 8px;
+  }
+  .section-nav-num {
+    font-size: 0.625rem;
   }
 }
 html {
@@ -2671,6 +2699,22 @@ code {
     text-align: center;
   }
 }
+@media (max-width: 768px) {
+  .hero-combined-right {
+    order: -1;
+    padding-top: var(--spacing-xl);
+  }
+  .hero-combined-container {
+    gap: var(--spacing-md);
+  }
+  .hero-combined-left {
+    gap: var(--spacing-sm);
+    padding-top: var(--spacing-md);
+  }
+  .hero-hook-text, .hero-included-box, .hero-cta-group {
+    margin-top: var(--spacing-xs);
+  }
+}
 .hero-combined-left {
   display: flex;
   flex-direction: column;
@@ -2707,6 +2751,17 @@ code {
   max-width: 45ch;
   margin: 0;
 }
+.hero-hook-text--short {
+  display: none;
+}
+@media (max-width: 768px) {
+  .hero-hook-text--full {
+    display: none;
+  }
+  .hero-hook-text--short {
+    display: block;
+  }
+}
 .hero-included-box {
   display: flex;
   flex-direction: column;
@@ -3086,6 +3141,16 @@ code {
   font-size: 0.8125rem;
   color: var(--color-ash);
 }
+@media (max-width: 768px) {
+  .split-comparison {
+    padding: 8px;
+    margin-top: -8px;
+    margin-bottom: -8px;
+  }
+  .split-labels {
+    display: none;
+  }
+}
 .split-label-dot {
   width: 8px;
   height: 8px;
@@ -3344,28 +3409,23 @@ code {
   font-family: var(--font-mono);
   font-size: 0.8125rem;
   font-weight: 500;
-  color: var(--color-ash);
-  background: var(--color-cream);
-  border: 1px solid var(--color-mist);
+  color: var(--color-charcoal);
+  background: none;
+  border: none;
   border-radius: 100px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background 0.2s ease, color 0.2s ease;
   white-space: nowrap;
 }
 .mobile-cmd-pill:hover {
-  color: var(--color-charcoal);
-  border-color: var(--color-charcoal);
+  background: var(--color-mist);
 }
 .mobile-cmd-pill.active {
   color: var(--color-paper);
   background: var(--color-ink);
-  border-color: var(--color-ink);
 }
 .mobile-demo-area {
-  background: var(--color-cream);
-  border: 1px solid var(--color-mist);
-  border-radius: 8px;
-  padding: var(--spacing-sm);
+  padding: 0;
 }
 .mobile-demo-area .demo-split-comparison {
   width: 100%;
@@ -3605,9 +3665,18 @@ code {
   gap: var(--spacing-lg);
 }
 @media (max-width: 768px) {
+  .site-footer {
+    padding: var(--spacing-lg) var(--spacing-md);
+  }
   .footer-content {
     flex-direction: column;
     text-align: center;
+    gap: var(--spacing-md);
+  }
+  .footer-links {
+    gap: var(--spacing-sm) var(--spacing-md);
+    justify-content: center;
+    font-size: 0.8125rem;
   }
 }
 .footer-brand {
@@ -3973,6 +4042,12 @@ code {
   color: var(--color-charcoal);
   flex-shrink: 0;
   transition: border-color var(--duration-fast), background var(--duration-fast);
+  position: relative;
+}
+.gallery-stack-btn::after {
+  content: '';
+  position: absolute;
+  inset: -10px;
 }
 .gallery-stack-btn:hover {
   border-color: var(--color-charcoal);
@@ -4008,7 +4083,7 @@ code {
 }
 .gallery-stack-label {
   padding: 6px 10px;
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   font-weight: 600;
   color: var(--color-charcoal);
   flex-shrink: 0;
@@ -4071,9 +4146,24 @@ code {
   gap: 6px;
   margin-bottom: var(--spacing-md);
 }
+@media (max-width: 768px) {
+  .patterns-tabs {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    margin-left: calc(-1 * var(--spacing-lg));
+    margin-right: calc(-1 * var(--spacing-lg));
+    padding-left: var(--spacing-lg);
+    padding-right: var(--spacing-lg);
+  }
+  .patterns-tabs::-webkit-scrollbar {
+    display: none;
+  }
+}
 .patterns-tab {
   font-family: var(--font-body);
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--color-charcoal);
   background: none;
@@ -4081,6 +4171,7 @@ code {
   border-radius: 100px;
   padding: 6px 12px;
   cursor: pointer;
+  white-space: nowrap;
   transition: background 0.2s ease, color 0.2s ease;
 }
 .patterns-tab:hover {
@@ -4143,13 +4234,13 @@ code {
 }
 .detection-badge {
   font-family: var(--font-mono);
-  font-size: 0.625rem;
+  font-size: 0.6875rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--color-accent);
   border: 1px solid var(--color-accent);
-  padding: 2px 10px;
+  padding: 3px 10px;
   border-radius: 99px;
   flex-shrink: 0;
 }
@@ -4279,6 +4370,7 @@ code {
 .install-path {
   display: flex;
   flex-direction: column;
+  min-width: 0;
 }
 .install-path-primary {
   background: white;
@@ -4511,9 +4603,51 @@ a.install-updated-ref:hover {
   .install-paths {
     grid-template-columns: 1fr;
     gap: var(--spacing-xl);
+    max-width: calc(100vw - var(--spacing-md) * 2);
   }
   .install-path-primary {
     margin-bottom: var(--spacing-sm);
+    padding: var(--spacing-md);
+  }
+  .install-path-title {
+    font-size: 1.25rem;
+  }
+  .install-path-desc {
+    font-size: 0.875rem;
+    overflow-wrap: break-word;
+  }
+  .install-together-inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
+  }
+  .install-updated-subscribe iframe {
+    height: 130px;
+  }
+  .install-terminal-cmd code {
+    font-size: 0.75rem;
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+  .install-alt-method {
+    padding: var(--spacing-sm);
+  }
+  .install-alt-method .install-terminal-cmd code {
+    font-size: 0.6875rem;
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+  .install-alt-method .install-terminal-cmd .copy-btn {
+    display: none;
+  }
+  .install-path-terminal .glass-terminal {
+    box-shadow: none;
+  }
+  .install-terminal {
+    max-width: 100%;
+  }
+  .install-alternatives {
+    max-width: 100%;
   }
 }
 .install-terminal {
diff --git a/public/css/workflow.css b/public/css/workflow.css
index 312fbb7f4..ffe55f257 100644
--- a/public/css/workflow.css
+++ b/public/css/workflow.css
@@ -1270,6 +1270,38 @@
   border-bottom-color: var(--color-accent);
 }
 
+/* Mobile: FAQ + Changelog */
+@media (max-width: 600px) {
+  .faq-question {
+    font-size: 1rem;
+    padding: var(--spacing-md) 0;
+    min-height: 44px;
+    gap: var(--spacing-sm);
+  }
+
+  .faq-answer {
+    font-size: 0.875rem;
+  }
+
+  .changelog-version {
+    font-size: 1rem;
+  }
+
+  .changelog-version-header {
+    flex-wrap: wrap;
+    gap: var(--spacing-xs);
+  }
+
+  .changelog-items {
+    padding-left: var(--spacing-sm);
+    font-size: 0.875rem;
+  }
+
+  .changelog-older-toggle {
+    min-height: 44px;
+  }
+}
+
 @keyframes faqFadeIn {
   from {
     opacity: 0;
diff --git a/public/index.html b/public/index.html
index 8f87bd451..b2550be94 100644
--- a/public/index.html
+++ b/public/index.html
@@ -69,7 +69,8 @@
         <h1 class="hero-title-combined">Impeccable</h1>
         <p class="hero-tagline-combined">Design fluency for AI harnesses</p>
 
-        <p class="hero-hook-text">Great design prompts require design vocabulary. Most people don't have it. You can't ask for "more vertical rhythm" if you've never used those words. Impeccable gives you commands that put designer language in your hands.</p>
+        <p class="hero-hook-text hero-hook-text--full">Great design prompts require design vocabulary. Most people don't have it. You can't ask for "more vertical rhythm" if you've never used those words. Impeccable gives you commands that put designer language in your hands.</p>
+        <p class="hero-hook-text hero-hook-text--short">Great design prompts require design vocabulary. Impeccable gives you commands that put designer language in your hands.</p>
 
         <div class="hero-included-box">
           <span class="hero-included-title">What's included</span>
@@ -120,7 +121,7 @@
               </div>
               <!-- Callout labels pointing to issues -->
               <div class="slop-callouts">
-                <span class="slop-callout" data-point="font">Inter font (again)</span>
+                <span class="slop-callout" data-point="font">Inter font</span>
                 <span class="slop-callout" data-point="gradient">Purple gradient</span>
                 <span class="slop-callout" data-point="copy">Generic copy</span>
                 <span class="slop-callout" data-point="rounded">Cards on cards</span>