From 239b75ddad9b7a572cf792b66997967b109d1adf Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Wed, 22 Apr 2026 12:38:56 -0700
Subject: [PATCH] chore(site): post-carbonize cleanup for Why panel 04

Per reference/live.md's carbonize instructions (which I should have
followed immediately after the accept event):
- Moved the inline @scope CSS into public/css/workflow.css, rewritten
  to use the real .why-visual--v2 class instead of
  [data-impeccable-variant="2"].
- Removed the <style data-impeccable-css="afb9794d"> block from index.html.
- Removed both impeccable-carbonize-start / -end marker comments.
- Unwrapped the <div data-impeccable-variant="2" style="display: contents">
  wrapper around the accepted variant content.
- Dropped the dead @scope rules for variants 1, 3, 4 entirely.

Only load-bearing element classes remain (why-visual--v2, v2-side,
v2-label, v2-canvas-*, v2-new-*) and they're all styled via the
central stylesheet now.
---
 public/css/workflow.css | 163 ++++++++++++++++++++++++++++++++++++++++
 public/index.html       |  54 ++++++-------
 public/privacy.html     |   3 +
 3 files changed, 193 insertions(+), 27 deletions(-)

diff --git a/public/css/workflow.css b/public/css/workflow.css
index 6d50e2a53..a3d362ec6 100644
--- a/public/css/workflow.css
+++ b/public/css/workflow.css
@@ -2508,3 +2508,166 @@
   .why-dm-tile--color { grid-row: 1 / 3; }
   .why-flow-step { font-size: 11px; padding: 4px 8px; }
 }
+
+/* ============================================
+   WHY panel 04 — split diagonal (canvas vs. agent+browser)
+   Carbonized from live session afb9794d.
+   ============================================ */
+
+.why-visual--v2 {
+  padding: 0;
+  gap: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  overflow: hidden;
+}
+.why-visual--v2 .v2-side {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+.why-visual--v2 .v2-side--old {
+  background: oklch(94% 0 0);
+  position: relative;
+}
+.why-visual--v2 .v2-side--old::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(0deg, transparent 0 24px, oklch(0% 0 0 / 0.04) 24px 25px);
+  pointer-events: none;
+}
+.why-visual--v2 .v2-side--new {
+  background: var(--color-cream);
+  border-left: 1px solid var(--color-mist);
+}
+.why-visual--v2 .v2-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--color-ash);
+  z-index: 1;
+}
+.why-visual--v2 .v2-side--new .v2-label { color: var(--color-accent); }
+.why-visual--v2 .v2-canvas-chrome {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding-bottom: 8px;
+  border-bottom: 1px solid oklch(86% 0 0);
+  z-index: 1;
+}
+.why-visual--v2 .v2-canvas-tool {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: oklch(45% 0 0);
+  background: var(--color-paper);
+  padding: 3px 7px;
+  border-radius: 3px;
+  border: 1px solid oklch(86% 0 0);
+}
+.why-visual--v2 .v2-canvas-art {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  z-index: 1;
+}
+.why-visual--v2 .v2-canvas-file {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: oklch(40% 0 0);
+}
+.why-visual--v2 .v2-canvas-mock {
+  width: 100%;
+  max-width: 120px;
+  height: 60px;
+  background: var(--color-paper);
+  border: 1px solid oklch(82% 0 0);
+  border-radius: 4px;
+  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.08);
+}
+.why-visual--v2 .v2-canvas-stamp {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 11px;
+  color: oklch(50% 0 0);
+}
+.why-visual--v2 .v2-new-surface {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+}
+.why-visual--v2 .v2-new-line {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--color-ink);
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
+  padding: 8px 12px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.why-visual--v2 .v2-new-line::before {
+  content: "/";
+  color: var(--color-accent);
+  font-weight: 500;
+}
+.why-visual--v2 .v2-new-browser {
+  flex: 1;
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 60px;
+}
+.why-visual--v2 .v2-new-browser-dots {
+  display: flex;
+  gap: 4px;
+  padding: 6px 8px;
+  background: var(--color-mist);
+}
+.why-visual--v2 .v2-new-browser-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: oklch(78% 0 0);
+}
+.why-visual--v2 .v2-new-browser-frame {
+  flex: 1;
+  background: linear-gradient(0deg, var(--color-cream) 0, transparent 40%), var(--color-paper);
+  position: relative;
+}
+.why-visual--v2 .v2-new-browser-frame::after {
+  content: "";
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  width: 40%;
+  height: 8px;
+  border: 1.5px solid var(--color-accent);
+  border-radius: 3px;
+}
+.why-visual--v2 .v2-new-bar {
+  align-self: center;
+  background: var(--color-ink);
+  color: var(--color-paper);
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  margin-top: -2px;
+}
diff --git a/public/index.html b/public/index.html
index 6d0a23098..4e3fa63f7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -393,37 +393,34 @@
             </article>
 
             <article class="why-panel" id="why-panel-3" role="tabpanel" data-index="3" hidden>
-              <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 class="why-visual why-visual--v2">
+                <div class="v2-side v2-side--old">
+                  <span class="v2-label">The old way</span>
+                  <div class="v2-canvas-chrome">
+                    <span class="v2-canvas-tool">Move</span>
+                    <span class="v2-canvas-tool">Frame</span>
+                    <span class="v2-canvas-tool">Comment</span>
+                  </div>
+                  <div class="v2-canvas-art">
+                    <span class="v2-canvas-file">Checkout v7 (final) final FINAL.fig</span>
+                    <div class="v2-canvas-mock"></div>
+                    <span class="v2-canvas-stamp">shipped Q3 2024</span>
                   </div>
                 </div>
-                <div class="why-flow-row why-flow-row--new">
-                  <span class="why-flow-label">With Impeccable</span>
-                  <div class="why-flow-pair">
-                    <div class="why-flow-tile why-flow-tile--agent">
-                      <span class="why-flow-tile-kicker">Your AI agent</span>
-                      <span class="why-flow-tile-title">/impeccable craft</span>
-                      <span class="why-flow-tile-meta">Reads your codebase. Writes the change.</span>
-                    </div>
-                    <span class="why-flow-plus" aria-hidden="true">+</span>
-                    <div class="why-flow-tile why-flow-tile--browser">
-                      <span class="why-flow-tile-kicker">Your browser</span>
-                      <span class="why-flow-tile-title">Live Mode</span>
-                      <span class="why-flow-tile-meta">Pick, iterate, accept. On the real page.</span>
+                <div class="v2-side v2-side--new">
+                  <span class="v2-label">With Impeccable</span>
+                  <div class="v2-new-surface">
+                    <div class="v2-new-line">impeccable craft checkout</div>
+                    <div class="v2-new-browser">
+                      <div class="v2-new-browser-dots">
+                        <span class="v2-new-browser-dot"></span>
+                        <span class="v2-new-browser-dot"></span>
+                        <span class="v2-new-browser-dot"></span>
+                      </div>
+                      <div class="v2-new-browser-frame"></div>
                     </div>
+                    <span class="v2-new-bar">pick · prompt · accept</span>
                   </div>
-                  <span class="why-flow-surface-foot">Two surfaces you already have open. Zero handoff.</span>
                 </div>
               </div>
               <h3 class="why-panel-title">Design where the work actually happens.</h3>
@@ -1047,5 +1044,8 @@
 
   <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 3a41097f0..4139e711e 100644
--- a/public/privacy.html
+++ b/public/privacy.html
@@ -77,5 +77,8 @@
   <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>