From 32b81aebcd24b6e070047221f0c8e1ba4526aa84 Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Wed, 22 Apr 2026 14:12:52 -0700
Subject: [PATCH] refine(site): live mode support list copy pass + drop phase
 caption + border
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Drop the black rule above the support list (it read as a hard hat
  over the column).
- Drop the phase-caption strip below the frame (the demo already
  carries its own state visually; the narrated loop underneath was
  noise).
- Rewrite the four support cells with stronger POV:
  - Start: the actual commands, /impeccable live and stop.
  - Your agent, your code: emphasises that it's the same AI you've
    been working with, reading your real project context, generating
    real edits.
  - Accept = write: canvas-like iteration, production output. The
    point almost no other AI design tool can claim.
  - Skill-native: no external tools or IDE extensions, works across
    every harness the skill targets.
- Drop CSP-patch bullet (edge case, not worth homepage real estate).
- Drop the "Accepts into ... via HMR" framing — accepts work because
  of the skill loop, not because of HMR per se.
---
 public/css/workflow.css           | 10 ++++++++--
 public/index.html                 | 20 ++++++++------------
 public/js/components/live-demo.js |  2 +-
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/public/css/workflow.css b/public/css/workflow.css
index 2fc925afc..99024b502 100644
--- a/public/css/workflow.css
+++ b/public/css/workflow.css
@@ -3219,8 +3219,6 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
-  padding: var(--spacing-md) 0 0;
-  border-top: 1px solid var(--color-ink);
   align-self: stretch;
 }
 .live-demo-support-cell {
@@ -3247,6 +3245,14 @@
   line-height: 1.55;
   color: var(--color-ink);
 }
+.live-demo-support-v code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background: var(--color-mist);
+  padding: 1px 6px;
+  border-radius: 3px;
+  color: var(--color-ink);
+}
 
 @media (max-width: 760px) {
   .live-demo-frame { aspect-ratio: 4 / 5; }
diff --git a/public/index.html b/public/index.html
index d44a74f0d..99b4324e7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -686,29 +686,25 @@
             </div>
           </div>
 
-          <!-- Phase label below the frame -->
-          <div class="live-demo-caption" data-demo-caption>
-            <span class="live-demo-caption-label" data-demo-caption-label>Hover an element to pick.</span>
-          </div>
           </div>
 
           <!-- Supporting list sits to the right of the frame on desktop -->
           <div class="live-demo-support">
             <div class="live-demo-support-cell">
-              <span class="live-demo-support-k">Works on</span>
-              <span class="live-demo-support-v">Vite, Next.js, SvelteKit, Astro, Nuxt.</span>
+              <span class="live-demo-support-k">Start</span>
+              <span class="live-demo-support-v"><code>/impeccable live</code> to open, <code>/impeccable live stop</code> to close. That's the whole invocation.</span>
             </div>
             <div class="live-demo-support-cell">
-              <span class="live-demo-support-k">Accepts into</span>
-              <span class="live-demo-support-v">Your real source file, via HMR.</span>
+              <span class="live-demo-support-k">Your agent, your code</span>
+              <span class="live-demo-support-v">The same AI you've been working with, reading your real project context. Variants are generated as actual edits, not mocks.</span>
             </div>
             <div class="live-demo-support-cell">
-              <span class="live-demo-support-k">CSP-strict apps</span>
-              <span class="live-demo-support-v">One-time dev-only patch, with your consent.</span>
+              <span class="live-demo-support-k">Accept = write</span>
+              <span class="live-demo-support-v">An accepted variant lands in your source file. Canvas-like iteration, production output.</span>
             </div>
             <div class="live-demo-support-cell">
-              <span class="live-demo-support-k">Overlay toggle</span>
-              <span class="live-demo-support-v">The anti-pattern detector runs inside Live, one click away.</span>
+              <span class="live-demo-support-k">Skill-native</span>
+              <span class="live-demo-support-v">No external tools or IDE extensions. Works across Claude Code, Cursor, Codex, Gemini, and every harness the skill targets.</span>
             </div>
           </div>
         </div>
diff --git a/public/js/components/live-demo.js b/public/js/components/live-demo.js
index 0a352d72b..2961c26ec 100644
--- a/public/js/components/live-demo.js
+++ b/public/js/components/live-demo.js
@@ -119,7 +119,7 @@ export function initLiveDemo() {
 	};
 
 	const setCaption = (text) => {
-		if (text) captionLabel.textContent = text;
+		if (text && captionLabel) captionLabel.textContent = text;
 	};
 
 	const typeText = (text, duration) => new Promise((resolve) => {