diff --git a/public/css/workflow.css b/public/css/workflow.css
index ef8de1304..e28a0a92c 100644
--- a/public/css/workflow.css
+++ b/public/css/workflow.css
@@ -3978,3 +3978,32 @@
     gap: var(--spacing-sm);
   }
 }
+
+/* ============================================
+   WHY — Anti-patterns, caught (tab 08 visual)
+   ============================================ */
+
+.why-visual--antidote {
+  padding: 0;
+  background: transparent;
+  border: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+}
+
+.why-visual--antidote .patterns-tabbed {
+  margin: 0;
+  min-width: 0;
+}
+
+.why-visual--antidote .gallery-stack-container {
+  flex: none;
+  width: 100%;
+}
+
+@media (max-width: 860px) {
+  .why-visual--antidote { grid-template-columns: 1fr; }
+}
diff --git a/public/index.html b/public/index.html
index 727e8ed85..70cbd67f6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -74,12 +74,11 @@
   <nav class="section-nav" id="section-nav" aria-label="Page sections">
     <a href="#foundation" class="section-nav-item" data-section="foundation"><span class="section-nav-num">01</span><span class="section-nav-label">Foundation</span></a>
     <a href="#language" class="section-nav-item" data-section="language"><span class="section-nav-num">02</span><span class="section-nav-label">Language</span></a>
-    <a href="#antidote" class="section-nav-item" data-section="antidote"><span class="section-nav-num">03</span><span class="section-nav-label">Antidote</span></a>
-    <a href="#why" class="section-nav-item" data-section="why"><span class="section-nav-num">04</span><span class="section-nav-label">Case</span></a>
-    <a href="#live-mode" class="section-nav-item" data-section="live-mode"><span class="section-nav-num">05</span><span class="section-nav-label">Live</span></a>
-    <a href="#downloads" class="section-nav-item" data-section="downloads"><span class="section-nav-num">06</span><span class="section-nav-label">Install</span></a>
-    <a href="#changelog" class="section-nav-item" data-section="changelog"><span class="section-nav-num">07</span><span class="section-nav-label">New</span></a>
-    <a href="#faq" class="section-nav-item" data-section="faq"><span class="section-nav-num">08</span><span class="section-nav-label">FAQ</span></a>
+    <a href="#why" class="section-nav-item" data-section="why"><span class="section-nav-num">03</span><span class="section-nav-label">Case</span></a>
+    <a href="#live-mode" class="section-nav-item" data-section="live-mode"><span class="section-nav-num">04</span><span class="section-nav-label">Live</span></a>
+    <a href="#downloads" class="section-nav-item" data-section="downloads"><span class="section-nav-num">05</span><span class="section-nav-label">Install</span></a>
+    <a href="#changelog" class="section-nav-item" data-section="changelog"><span class="section-nav-num">06</span><span class="section-nav-label">New</span></a>
+    <a href="#faq" class="section-nav-item" data-section="faq"><span class="section-nav-num">07</span><span class="section-nav-label">FAQ</span></a>
   </nav>
 
   <!-- 1. HERO - Combined with Problem Section -->
@@ -237,93 +236,13 @@
       </div>
     </section>
 
-    <!-- 03. THE ANTIDOTE - Anti-patterns -->
-    <section class="antidote-section" id="antidote">
-      <div class="section-header" data-reveal>
-        <span class="section-number">03</span>
-        <h2 class="section-title">The Antidote</h2>
-      </div>
-      <div class="antidote-content">
-        <p class="section-lead" data-reveal>25 named anti-patterns, detected on your code and in your browser. Before, and what Impeccable steers toward instead.</p>
-
-        <div class="antidote-wall" data-reveal>
-          <!-- 01: Gradient text → solid italic headline -->
-          <a href="/anti-patterns#gradient-text" class="antidote-pair">
-            <figure class="antidote-pair-figure antidote-pair-figure--before">
-              <div class="ab-slot">
-                <div style="font-family: system-ui, sans-serif;"><div style="font-size: 26px; font-weight: 700; background: linear-gradient(135deg, oklch(65% 0.25 320), oklch(60% 0.25 265)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1;">Build the Future</div><div style="font-size: 11px; color: #888; margin-top: 6px;">Gradient text kills scannability.</div></div>
-              </div>
-              <figcaption>Before</figcaption>
-            </figure>
-            <figure class="antidote-pair-figure antidote-pair-figure--after">
-              <div class="ab-slot">
-                <div style="font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.02; color: var(--color-ink); letter-spacing: -0.01em;">Build the <em style="font-style: italic; color: var(--color-accent);">future</em>.</div>
-                <div style="font-family: var(--font-body); font-size: 11px; color: var(--color-charcoal); margin-top: 8px;">One weight, one voice, perfect scannability.</div>
-              </div>
-              <figcaption>After</figcaption>
-            </figure>
-            <div class="antidote-pair-caption">
-              <span class="antidote-pair-num">01</span>
-              <span class="antidote-pair-name">Gradient Text</span>
-            </div>
-          </a>
-
-          <!-- 02: Side-tab card → hairline card -->
-          <a href="/anti-patterns#side-tab" class="antidote-pair">
-            <figure class="antidote-pair-figure antidote-pair-figure--before">
-              <div class="ab-slot">
-                <div style="background: #fff; border: 1px solid #e8e4df; border-left: 4px solid oklch(60% 0.22 265); border-radius: 6px; padding: 14px 16px; width: 100%; max-width: 240px; font-family: system-ui, sans-serif; font-size: 13px; color: #111;"><div style="font-weight: 600; margin-bottom: 4px;">Alert title</div><div style="color: #666; font-size: 12px;">Thick colored stripe on one side.</div></div>
-              </div>
-              <figcaption>Before</figcaption>
-            </figure>
-            <figure class="antidote-pair-figure antidote-pair-figure--after">
-              <div class="ab-slot">
-                <div style="background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 8px; padding: 14px 16px; width: 100%; max-width: 240px; font-family: var(--font-body); font-size: 13px; color: var(--color-ink);"><div style="font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 6px;">Alert</div><div style="font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.2; color: var(--color-ink); margin-bottom: 3px;">Alert title.</div><div style="color: var(--color-charcoal); font-size: 12px; line-height: 1.45;">Full border, mono kicker, no side stripe.</div></div>
-              </div>
-              <figcaption>After</figcaption>
-            </figure>
-            <div class="antidote-pair-caption">
-              <span class="antidote-pair-num">02</span>
-              <span class="antidote-pair-name">Side-Tab Cards</span>
-            </div>
-          </a>
-
-          <!-- 03: Hero-metric layout → one honest insight -->
-          <a href="/anti-patterns#hero-metric-layout" class="antidote-pair">
-            <figure class="antidote-pair-figure antidote-pair-figure--before">
-              <div class="ab-slot">
-                <div style="font-family: system-ui, sans-serif; text-align: left;"><div style="font-size: 44px; font-weight: 800; background: linear-gradient(135deg, oklch(65% 0.25 265), oklch(65% 0.25 340)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1;">10M+</div><div style="font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px;">Active users</div><div style="display: flex; gap: 16px; margin-top: 12px; font-size: 10px; color: #555;"><span><strong>99.9%</strong> uptime</span><span><strong>200ms</strong> p50</span></div></div>
-              </div>
-              <figcaption>Before</figcaption>
-            </figure>
-            <figure class="antidote-pair-figure antidote-pair-figure--after">
-              <div class="ab-slot">
-                <div style="font-family: var(--font-body);"><div style="font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-ash); margin-bottom: 6px;">This week</div><div style="font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 46px; line-height: 0.95; color: var(--color-ink); letter-spacing: -0.03em;">+18.4<span style="font-style: normal; font-size: 0.5em; color: var(--color-accent); margin-left: 1px; vertical-align: top;">%</span></div><div style="font-size: 11px; line-height: 1.4; color: var(--color-charcoal); margin-top: 6px; max-width: 22ch;">Conversion lift, from <em style="font-style: italic; color: var(--color-ink);">checkout fixes</em>.</div></div>
-              </div>
-              <figcaption>After</figcaption>
-            </figure>
-            <div class="antidote-pair-caption">
-              <span class="antidote-pair-num">03</span>
-              <span class="antidote-pair-name">Hero-Metric Template</span>
-            </div>
-          </a>
-        </div>
-
-        <div class="antidote-foot" data-reveal>
-          <a href="/anti-patterns" class="antidote-catalog-link">Browse all 25 anti-patterns &rarr;</a>
-          <span class="antidote-foot-meta">Detected by deterministic rules, flagged by the LLM layer, visualized in your browser.</span>
-          <a href="https://github.com/pbakaus/impeccable/issues/new?labels=pattern&title=Pattern%20suggestion%3A%20" class="antidote-suggest-link">Suggest a pattern &rarr;</a>
-        </div>
-      </div>
-    </section>
-
     <!-- 04. WHY IMPECCABLE - Feature loop -->
     <section class="why-section" id="why">
       <div class="why-content" data-reveal>
         <div class="why-layout">
           <div class="why-left">
             <div class="section-header">
-              <span class="section-number">04</span>
+              <span class="section-number">03</span>
               <h2 class="section-title">The Case</h2>
             </div>
             <ol class="why-tabs" role="tablist" aria-label="Reasons Impeccable is different">
@@ -334,6 +253,7 @@
             <li><button role="tab" class="why-tab" data-index="4" aria-selected="false" aria-controls="why-panel-4"><span class="why-tab-num">05</span><span class="why-tab-label">DESIGN.md, spec-compliant</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
             <li><button role="tab" class="why-tab" data-index="5" aria-selected="false" aria-controls="why-panel-5"><span class="why-tab-num">06</span><span class="why-tab-label">CI/CD-ready</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
             <li><button role="tab" class="why-tab" data-index="6" aria-selected="false" aria-controls="why-panel-6"><span class="why-tab-num">07</span><span class="why-tab-label">Chrome extension</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
+            <li><button role="tab" class="why-tab" data-index="7" aria-selected="false" aria-controls="why-panel-7"><span class="why-tab-num">08</span><span class="why-tab-label">Anti-patterns, caught</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
             </ol>
           </div>
 
@@ -554,6 +474,50 @@
               <p class="why-panel-body">The Impeccable Chrome extension runs the same 25-rule detector on every page you visit, in-browser, with zero setup. Audit your own staging. Audit the design your PM showed in Slack. Audit your competitor on a Tuesday. The overlay highlights each issue in place so you never have to map a JSON report back to a DOM node.</p>
               <p class="why-panel-meta"><a href="https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf" target="_blank" rel="noopener">Install from the Chrome Web Store &rarr;</a></p>
             </article>
+
+            <article class="why-panel" id="why-panel-7" role="tabpanel" data-index="7" hidden>
+              <div class="why-visual why-visual--antidote">
+                <div class="patterns-tabbed" id="patterns-categories">
+                  <!-- Rendered by app.js from /api/patterns -->
+                </div>
+                <div class="gallery-stack-container">
+                  <div class="gallery-stack-header">
+                    <h4 class="gallery-stack-title">Gallery of Shame</h4>
+                    <button class="gallery-stack-btn gallery-stack-prev" aria-label="Previous">&larr;</button>
+                    <button class="gallery-stack-btn gallery-stack-next" aria-label="Next">&rarr;</button>
+                  </div>
+                  <div class="gallery-stack" id="gallery-stack">
+                    <a href="/antipattern-examples/purple-gradients.html" class="gallery-stack-card">
+                      <img src="antipattern-images/purple-gradients.png" alt="Purple gradient UI" loading="lazy">
+                      <span class="gallery-stack-label">Purple Gradients</span>
+                    </a>
+                    <a href="/antipattern-examples/thick-border-cards.html" class="gallery-stack-card">
+                      <img src="antipattern-images/thick-border-cards.png" alt="Thick border accent cards" loading="lazy">
+                      <span class="gallery-stack-label">Side-Tab Cards</span>
+                    </a>
+                    <a href="/antipattern-examples/cardocalypse.html" class="gallery-stack-card">
+                      <img src="antipattern-images/cardocalypse.png" alt="Cards nested inside cards" loading="lazy">
+                      <span class="gallery-stack-label">Cardocalypse</span>
+                    </a>
+                    <a href="/antipattern-examples/inter-everywhere.html" class="gallery-stack-card">
+                      <img src="antipattern-images/inter-everywhere.png" alt="Inter font everywhere" loading="lazy">
+                      <span class="gallery-stack-label">Inter Everywhere</span>
+                    </a>
+                    <a href="/antipattern-examples/layout-templates.html" class="gallery-stack-card">
+                      <img src="antipattern-images/layout-templates.png" alt="Generic layout templates" loading="lazy">
+                      <span class="gallery-stack-label">Template Layouts</span>
+                    </a>
+                    <a href="/antipattern-examples/bad-contrast.html" class="gallery-stack-card">
+                      <img src="antipattern-images/bad-contrast.png" alt="Low contrast text" loading="lazy">
+                      <span class="gallery-stack-label">Bad Contrast</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <h3 class="why-panel-title">Every AI model learned from the same templates.</h3>
+              <p class="why-panel-body">Without intervention, they all produce the same predictable mistakes. Impeccable names 25 of them, actively detects them on your code and in your browser, and teaches the AI to avoid them.</p>
+              <p class="why-panel-meta"><a href="/anti-patterns">Browse the full catalog &rarr;</a></p>
+            </article>
           </div>
         </div>
       </div>
@@ -562,7 +526,7 @@
     <!-- 05. LIVE MODE - Interactive demo -->
     <section class="live-section" id="live-mode">
       <div class="section-header" data-reveal>
-        <span class="section-number">05</span>
+        <span class="section-number">04</span>
         <h2 class="section-title">Live Mode</h2>
       </div>
       <div class="live-content" data-reveal>
@@ -724,7 +688,7 @@
     <!-- 05. GET STARTED -->
     <section class="platforms-section" id="downloads">
       <div class="section-header" data-reveal>
-        <span class="section-number">06</span>
+        <span class="section-number">05</span>
         <h2 class="section-title">Get Started</h2>
       </div>
 
@@ -899,7 +863,7 @@
     <!-- 5. CHANGELOG -->
     <section class="changelog-section" id="changelog">
       <div class="section-header" data-reveal>
-        <span class="section-number">07</span>
+        <span class="section-number">06</span>
         <h2 class="section-title">What's New</h2>
       </div>
 
@@ -1047,7 +1011,7 @@
     <!-- 8. FAQ -->
     <section class="faq-section" id="faq">
       <div class="section-header" data-reveal>
-        <span class="section-number">08</span>
+        <span class="section-number">07</span>
         <h2 class="section-title">Frequently Asked Questions</h2>
       </div>
 
@@ -1197,8 +1161,5 @@
 
   <script type="module" src="./app.js"></script>
 
-<!-- impeccable-live-start -->
-<script src="http://localhost:8400/live.js"></script>
-<!-- impeccable-live-end -->
 </body>
 </html>
diff --git a/public/privacy.html b/public/privacy.html
index 4139e711e..3a41097f0 100644
--- a/public/privacy.html
+++ b/public/privacy.html
@@ -77,8 +77,5 @@
   <h2>Contact</h2>
   <p>Questions about this policy? Open an issue on <a href="https://github.com/pbakaus/impeccable">GitHub</a> or reach out to <a href="https://x.com/pbakaus">@pbakaus</a>.</p>
   </main>
-<!-- impeccable-live-start -->
-<script src="http://localhost:8400/live.js"></script>
-<!-- impeccable-live-end -->
 </body>
 </html>