refine(site): rework Why visuals for panels 01, 03, 04, 05

Addressing feedback that the first round didn't sell the differentiation:

01 Intentional design: scrap the "generic AI card vs warm card" comparison
(the slop card actually looked good, which undermined the point). Show
PRODUCT.md as a real file with fields filled in (Users, Register,
Brand voice, Anti-references) and a pulse-dot footer signaling it's
loaded on every command. The point is that Impeccable knows specific
things about the product before it designs anything.

03 Production codebases: expand the terminal from a single "reading
DESIGN.md" line to a full codebase walk. Tokens from tokens.css,
merged tailwind theme, 34 components listed with variants inferred,
DESIGN.md as one of many inputs. DESIGN.md is shallow; the real work
is traversing source.

04 Where you code: scrap the card grid. Replaced with a two-row
waterfall-vs-unified flow. Old way (greyed, strikethrough): Figma →
Handoff → Ticket → Engineer → QA drift. New way: a single surface
with Design / Code / Ship chips inside a fake IDE chrome. Pulls the
real argument instead of just showing logos.

05 DESIGN.md: picker-sidebar-style rich tiles. Accent color with
8-step tonal ramp, Aa specimens for display + body, component chips +
input preview. Stitch spec badge up top. Matches the visual vocabulary
of the live-mode DESIGN.md sidebar.

Panels 02, 06, 07 unchanged per feedback that they were working.

public/css/workflow.css

@@ -2157,3 +2157,357 @@
   .why-harness-grid { grid-template-columns: repeat(3, 1fr); }
   .why-compare-card, .why-register { gap: 8px; }
 }
+
+/* ============================================
+   WHY — updated visuals (panels 1, 3, 4, 5)
+   ============================================ */
+
+/* ─ Panel 01: PRODUCT.md file view ─ */
+.why-visual--productmd {
+  padding: 0;
+  background: var(--color-paper);
+}
+.why-productmd-file {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.why-productmd-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--color-mist);
+  background: var(--color-cream);
+  border-radius: 7px 7px 0 0;
+}
+.why-productmd-filename {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--color-ink);
+}
+.why-productmd-status {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+}
+.why-productmd-body {
+  padding: 6px 14px;
+  display: flex;
+  flex-direction: column;
+}
+.why-productmd-field {
+  display: grid;
+  grid-template-columns: 110px 1fr;
+  gap: 16px;
+  align-items: baseline;
+  padding: 9px 0;
+  border-bottom: 1px dashed var(--color-mist);
+}
+.why-productmd-field:last-child { border-bottom: 0; }
+.why-productmd-k {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-ash);
+}
+.why-productmd-v {
+  font-family: var(--font-body);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--color-ink);
+}
+.why-productmd-footer {
+  padding: 10px 14px;
+  border-top: 1px solid var(--color-mist);
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--color-charcoal);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--color-cream);
+  border-radius: 0 0 7px 7px;
+}
+.why-productmd-footer-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  animation: whyPulse 2.4s ease-out infinite;
+  flex-shrink: 0;
+}
+@keyframes whyPulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(0.6); opacity: 0.5; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .why-productmd-footer-dot { animation: none; }
+}
+
+/* ─ Panel 03: path + meta additions ─ */
+.why-terminal-path {
+  color: oklch(88% 0.05 220);
+}
+.why-terminal-meta {
+  color: oklch(58% 0 0);
+  font-size: 0.9em;
+}
+
+/* ─ Panel 04: waterfall vs unified surface ─ */
+.why-visual--flow {
+  flex-direction: column;
+  gap: 14px;
+  padding: 16px;
+}
+.why-flow-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+  min-height: 0;
+}
+.why-flow-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--color-ash);
+}
+.why-flow-row--old .why-flow-label { color: var(--color-ash); }
+.why-flow-row--new .why-flow-label { color: var(--color-accent); }
+
+.why-flow-steps {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  opacity: 0.5;
+}
+.why-flow-step {
+  font-family: var(--font-body);
+  font-size: 12px;
+  color: var(--color-charcoal);
+  padding: 4px 10px;
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
+  border-radius: 3px;
+  text-decoration: line-through;
+  text-decoration-color: var(--color-ash);
+}
+.why-flow-arrow {
+  color: var(--color-ash);
+  font-size: 12px;
+}
+.why-flow-new {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.why-flow-surface {
+  background: var(--color-paper);
+  border: 1px solid var(--color-ink);
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.08);
+}
+.why-flow-surface-head {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 8px 12px;
+  background: var(--color-cream);
+  border-bottom: 1px solid var(--color-mist);
+}
+.why-flow-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-mist);
+}
+.why-flow-surface-title {
+  margin-left: 8px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--color-charcoal);
+}
+.why-flow-surface-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+}
+.why-flow-chip {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 6px 12px;
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border-radius: 4px;
+}
+.why-flow-chip:nth-child(2) { background: var(--color-accent); }
+.why-flow-surface-foot {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 13px;
+  color: var(--color-charcoal);
+  padding: 0 4px;
+}
+
+/* ─ Panel 05: rich DESIGN.md tiles ─ */
+.why-visual--designmd-v2 {
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  background: var(--color-cream);
+}
+.why-dm-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 2px;
+}
+.why-dm-filename {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--color-ink);
+}
+.why-dm-badge {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  background: var(--color-accent-dim);
+  border: 1px solid var(--color-accent-soft);
+  padding: 3px 8px;
+  border-radius: 999px;
+}
+.why-dm-grid {
+  display: grid;
+  grid-template-columns: 1.1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 8px;
+  flex: 1;
+  min-height: 0;
+}
+.why-dm-tile {
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
+  border-radius: 6px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  overflow: hidden;
+}
+.why-dm-tile-meta {
+  display: flex;
+  justify-content: space-between;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-ash);
+}
+.why-dm-tile-meta span:first-child { color: var(--color-ink); }
+
+.why-dm-tile--color { grid-row: 1 / 3; }
+.why-dm-color-hero {
+  flex: 1;
+  background: var(--c);
+  border-radius: 4px;
+  min-height: 40px;
+}
+.why-dm-color-ramp {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 2px;
+  height: 16px;
+}
+.why-dm-color-ramp span {
+  border-radius: 2px;
+}
+
+.why-dm-tile--type {
+  align-items: flex-start;
+}
+.why-dm-type-specimen {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 48px;
+  line-height: 0.9;
+  color: var(--color-ink);
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.why-dm-type-specimen--sans {
+  font-family: var(--font-body);
+  font-style: normal;
+  font-weight: 400;
+}
+.why-dm-type-family {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--color-charcoal);
+}
+
+.why-dm-tile--components {
+  justify-content: space-between;
+}
+.why-dm-comp-row {
+  display: flex;
+  gap: 6px;
+}
+.why-dm-comp-chip {
+  font-family: var(--font-body);
+  font-size: 10px;
+  font-weight: 500;
+  padding: 5px 10px;
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
+  border-radius: 3px;
+  color: var(--color-ink);
+}
+.why-dm-comp-chip--primary {
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border-color: var(--color-ink);
+}
+.why-dm-comp-input {
+  font-family: var(--font-body);
+  font-size: 11px;
+  padding: 6px 10px;
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
+  border-radius: 4px;
+  color: var(--color-ash);
+}
+
+.why-dm-foot {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 13px;
+  color: var(--color-charcoal);
+  padding: 0 2px;
+}
+
+@media (max-width: 700px) {
+  .why-dm-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+  .why-dm-tile--color { grid-row: 1 / 3; }
+  .why-flow-step { font-size: 11px; padding: 4px 8px; }
+}

public/index.html

@@ -307,25 +307,33 @@
 
           <div class="why-panels">
             <article class="why-panel is-active" id="why-panel-0" role="tabpanel" data-index="0">
-              <div class="why-visual why-visual--compare">
-                <div class="why-compare-card why-compare-card--slop">
-                  <span class="why-compare-label">Generic AI output</span>
-                  <div class="why-slop-card">
-                    <div class="why-slop-pill">PRO</div>
-                    <div class="why-slop-title">Boost your workflow</div>
-                    <div class="why-slop-line"></div>
-                    <div class="why-slop-line why-slop-line--short"></div>
-                    <div class="why-slop-cta">Get Started &rarr;</div>
+              <div class="why-visual why-visual--productmd">
+                <div class="why-productmd-file">
+                  <div class="why-productmd-header">
+                    <span class="why-productmd-filename">PRODUCT.md</span>
+                    <span class="why-productmd-status">Loaded on every command</span>
                   </div>
-                </div>
-                <div class="why-compare-card why-compare-card--impeccable">
-                  <span class="why-compare-label">With PRODUCT.md loaded</span>
-                  <div class="why-impeccable-card">
-                    <span class="why-impeccable-kicker">Vol. 03</span>
-                    <div class="why-impeccable-title">Design with <em>intent.</em></div>
-                    <div class="why-impeccable-line"></div>
-                    <div class="why-impeccable-line why-impeccable-line--short"></div>
-                    <div class="why-impeccable-cta">Read the brief &rarr;</div>
+                  <div class="why-productmd-body">
+                    <div class="why-productmd-field">
+                      <span class="why-productmd-k">Users</span>
+                      <span class="why-productmd-v">SREs on call, reading fast, often in the dark.</span>
+                    </div>
+                    <div class="why-productmd-field">
+                      <span class="why-productmd-k">Register</span>
+                      <span class="why-productmd-v">Product. Design serves the task.</span>
+                    </div>
+                    <div class="why-productmd-field">
+                      <span class="why-productmd-k">Brand voice</span>
+                      <span class="why-productmd-v">Calm, clinical, no hype.</span>
+                    </div>
+                    <div class="why-productmd-field">
+                      <span class="why-productmd-k">Anti-references</span>
+                      <span class="why-productmd-v">Purple gradients. Glassmorphism. "Boost your productivity."</span>
+                    </div>
+                  </div>
+                  <div class="why-productmd-footer">
+                    <span class="why-productmd-footer-dot"></span>
+                    Every command reads this before writing a line of code.
                   </div>
                 </div>
               </div>
@@ -364,14 +372,18 @@
                     <span class="why-terminal-dot"></span>
                     <span class="why-terminal-dot"></span>
                     <span class="why-terminal-dot"></span>
-                    <span class="why-terminal-title">/impeccable polish src/Checkout.tsx</span>
+                    <span class="why-terminal-title">/impeccable polish : scanning codebase</span>
                   </div>
                   <div class="why-terminal-body">
-                    <div class="why-terminal-line why-terminal-line--prompt"><span class="why-terminal-prompt">&rsaquo;</span> Reading DESIGN.md…</div>
-                    <div class="why-terminal-line">  <span class="why-terminal-ok">&check;</span> 14 color tokens loaded</div>
-                    <div class="why-terminal-line">  <span class="why-terminal-ok">&check;</span> Respecting Card + Button APIs</div>
-                    <div class="why-terminal-line">  <span class="why-terminal-ok">&check;</span> Matching 1.6 line-height rule</div>
-                    <div class="why-terminal-line why-terminal-line--hint"><span class="why-terminal-arrow">&rarr;</span> 3 proposals: tighter rhythm, clearer hierarchy, remove nested card</div>
+                    <div class="why-terminal-line why-terminal-line--prompt"><span class="why-terminal-prompt">&rsaquo;</span> Walking src/…</div>
+                    <div class="why-terminal-line">  <span class="why-terminal-ok">&check;</span> <span class="why-terminal-path">src/styles/tokens.css</span> &nbsp;<span class="why-terminal-meta">14 colors, 6 font sizes, 7 spacing steps</span></div>
+                    <div class="why-terminal-line">  <span class="why-terminal-ok">&check;</span> <span class="why-terminal-path">tailwind.config.ts</span> &nbsp;<span class="why-terminal-meta">theme.extend merged</span></div>
+                    <div class="why-terminal-line">  <span class="why-terminal-ok">&check;</span> <span class="why-terminal-path">src/components/</span> &nbsp;<span class="why-terminal-meta">34 components</span></div>
+                    <div class="why-terminal-line">&nbsp;&nbsp;&nbsp;&nbsp;<span class="why-terminal-meta">&middot; Button: primary, secondary, ghost, destructive</span></div>
+                    <div class="why-terminal-line">&nbsp;&nbsp;&nbsp;&nbsp;<span class="why-terminal-meta">&middot; Card: 3 variants, 8px / 16px radii</span></div>
+                    <div class="why-terminal-line">&nbsp;&nbsp;&nbsp;&nbsp;<span class="why-terminal-meta">&middot; Input, Select, Dialog, Toast, Table&hellip;</span></div>
+                    <div class="why-terminal-line">  <span class="why-terminal-ok">&check;</span> <span class="why-terminal-path">DESIGN.md</span> &nbsp;<span class="why-terminal-meta">brand rules loaded</span></div>
+                    <div class="why-terminal-line why-terminal-line--hint"><span class="why-terminal-arrow">&rarr;</span> Matching your system. Not inventing one.</div>
                   </div>
                 </div>
               </div>
@@ -381,21 +393,35 @@
             </article>
 
             <article class="why-panel" id="why-panel-3" role="tabpanel" data-index="3" hidden>
-              <div class="why-visual why-visual--harnesses">
-                <div class="why-prompt-bar">
-                  <span class="why-prompt-slash">/</span>
-                  <span class="why-prompt-text">impeccable craft&nbsp;hero&nbsp;section</span>
-                  <span class="why-prompt-caret"></span>
+              <div class="why-visual why-visual--flow">
+                <div class="why-flow-row why-flow-row--old">
+                  <span class="why-flow-label">The old way</span>
+                  <div class="why-flow-steps">
+                    <span class="why-flow-step">Figma mock</span>
+                    <span class="why-flow-arrow" aria-hidden="true">&rarr;</span>
+                    <span class="why-flow-step">Handoff</span>
+                    <span class="why-flow-arrow" aria-hidden="true">&rarr;</span>
+                    <span class="why-flow-step">Ticket</span>
+                    <span class="why-flow-arrow" aria-hidden="true">&rarr;</span>
+                    <span class="why-flow-step">Engineer</span>
+                    <span class="why-flow-arrow" aria-hidden="true">&rarr;</span>
+                    <span class="why-flow-step">QA drift</span>
+                  </div>
                 </div>
-                <div class="why-harness-grid">
-                  <div class="why-harness"><img src="assets/claude-logo.png" alt="Claude Code" width="32" height="32" loading="lazy"><span>Claude Code</span></div>
-                  <div class="why-harness"><img src="assets/cursor-logo.png" alt="Cursor" width="32" height="32" loading="lazy"><span>Cursor</span></div>
-                  <div class="why-harness"><img src="assets/openai-logo.png" alt="Codex" width="32" height="32" loading="lazy"><span>Codex</span></div>
-                  <div class="why-harness"><img src="assets/gemini-logo.png" alt="Gemini CLI" width="32" height="32" loading="lazy"><span>Gemini</span></div>
-                  <div class="why-harness"><img src="assets/github-logo.png" alt="VS Code Copilot" width="32" height="32" loading="lazy"><span>Copilot</span></div>
-                  <div class="why-harness"><img src="assets/antigravity-logo.png" alt="Antigravity" width="32" height="32" loading="lazy"><span>Antigravity</span></div>
-                  <div class="why-harness"><img src="assets/kiro-logo.png" alt="Kiro" width="32" height="32" loading="lazy"><span>Kiro</span></div>
-                  <div class="why-harness"><img src="assets/opencode-logo.png" alt="OpenCode" width="32" height="32" loading="lazy"><span>OpenCode</span></div>
+                <div class="why-flow-row why-flow-row--new">
+                  <span class="why-flow-label">With Impeccable</span>
+                  <div class="why-flow-new">
+                    <div class="why-flow-surface">
+                      <div class="why-flow-surface-head">
+                        <span class="why-flow-dot"></span>
+                        <span class="why-flow-dot"></span>
+                        <span class="why-flow-dot"></span>
+                        <span class="why-flow-surface-title">your IDE + AI agent</span>
+                      </div>
+                      <div class="why-flow-surface-row"><span class="why-flow-chip">Design</span><span class="why-flow-chip">Code</span><span class="why-flow-chip">Ship</span></div>
+                    </div>
+                    <span class="why-flow-surface-foot">One surface. One agent. Zero handoff.</span>
+                  </div>
                 </div>
               </div>
               <h3 class="why-panel-title">Design where the work actually happens.</h3>
@@ -404,22 +430,46 @@
             </article>
 
             <article class="why-panel" id="why-panel-4" role="tabpanel" data-index="4" hidden>
-              <div class="why-visual why-visual--designmd">
-                <div class="why-designmd-file">
-                  <div class="why-designmd-header">
-                    <span class="why-designmd-filename">DESIGN.md</span>
-                    <span class="why-designmd-badge">Stitch spec</span>
-                  </div>
-                  <ol class="why-designmd-sections">
-                    <li><span class="why-designmd-num">##</span> 1. Overview</li>
-                    <li><span class="why-designmd-num">##</span> 2. Colors</li>
-                    <li><span class="why-designmd-num">##</span> 3. Typography</li>
-                    <li><span class="why-designmd-num">##</span> 4. Elevation</li>
-                    <li><span class="why-designmd-num">##</span> 5. Components</li>
-                    <li><span class="why-designmd-num">##</span> 6. Do's and Don'ts</li>
-                  </ol>
-                  <div class="why-designmd-footer">Readable by every DESIGN.md-aware tool.</div>
+              <div class="why-visual why-visual--designmd-v2">
+                <div class="why-dm-header">
+                  <span class="why-dm-filename">DESIGN.md</span>
+                  <span class="why-dm-badge">Google Stitch spec</span>
                 </div>
+                <div class="why-dm-grid">
+                  <div class="why-dm-tile why-dm-tile--color" style="--c: oklch(60% 0.25 350);">
+                    <div class="why-dm-tile-meta"><span>Accent</span><span>oklch(60% .25 350)</span></div>
+                    <div class="why-dm-color-hero"></div>
+                    <div class="why-dm-color-ramp">
+                      <span style="background: oklch(20% .25 350)"></span>
+                      <span style="background: oklch(32% .25 350)"></span>
+                      <span style="background: oklch(44% .25 350)"></span>
+                      <span style="background: oklch(56% .25 350)"></span>
+                      <span style="background: oklch(68% .22 350)"></span>
+                      <span style="background: oklch(80% .15 350)"></span>
+                      <span style="background: oklch(90% .08 350)"></span>
+                      <span style="background: oklch(96% .02 350)"></span>
+                    </div>
+                  </div>
+                  <div class="why-dm-tile why-dm-tile--type">
+                    <div class="why-dm-tile-meta"><span>Display</span><span>Italic 400</span></div>
+                    <div class="why-dm-type-specimen">Aa</div>
+                    <div class="why-dm-type-family">Cormorant Garamond</div>
+                  </div>
+                  <div class="why-dm-tile why-dm-tile--type">
+                    <div class="why-dm-tile-meta"><span>Body</span><span>Regular 400</span></div>
+                    <div class="why-dm-type-specimen why-dm-type-specimen--sans">Aa</div>
+                    <div class="why-dm-type-family">Instrument Sans</div>
+                  </div>
+                  <div class="why-dm-tile why-dm-tile--components">
+                    <div class="why-dm-tile-meta"><span>Components</span><span>34</span></div>
+                    <div class="why-dm-comp-row">
+                      <span class="why-dm-comp-chip why-dm-comp-chip--primary">Primary</span>
+                      <span class="why-dm-comp-chip">Ghost</span>
+                    </div>
+                    <div class="why-dm-comp-input">Email address</div>
+                  </div>
+                </div>
+                <div class="why-dm-foot">Readable by every DESIGN.md-aware tool.</div>
               </div>
               <h3 class="why-panel-title">Your design system in a portable file.</h3>
               <p class="why-panel-body"><code>/impeccable document</code> scans your codebase and writes a <code>DESIGN.md</code> that follows the <a href="https://stitch.withgoogle.com/docs/design-md/format/" target="_blank" rel="noopener">Google Stitch DESIGN.md format</a>, the emerging standard. Six fixed sections in a fixed order, parseable by every other DESIGN.md-aware tool. Your visual system travels. Impeccable also consumes DESIGN.md on every command, so it stays on brand without being told twice.</p>