diff --git a/apps/website/public/screenshots/canonical-demo-conversation.webp b/apps/website/public/screenshots/canonical-demo-conversation.webp
new file mode 100644
index 000000000..08e284b1d
Binary files /dev/null and b/apps/website/public/screenshots/canonical-demo-conversation.webp differ
diff --git a/apps/website/public/screenshots/canonical-demo-welcome.webp b/apps/website/public/screenshots/canonical-demo-welcome.webp
new file mode 100644
index 000000000..e3f674db3
Binary files /dev/null and b/apps/website/public/screenshots/canonical-demo-welcome.webp differ
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index 19cc74939..74782a6dd 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -3,7 +3,7 @@ import { ProofStrip } from '../components/landing/ProofStrip';
 import { Differentiator } from '../components/landing/Differentiator';
 import { FeatureBlock } from '../components/landing/FeatureBlock';
 import { BrowserFrame } from '../components/ui/BrowserFrame';
-import { LiveCockpitFrame } from '../components/landing/LiveCockpitFrame';
+import { LiveDemoFrame } from '../components/landing/LiveDemoFrame';
 import { PilotBlock } from '../components/landing/PilotBlock';
 import { WhitePaperBlock } from '../components/landing/WhitePaperBlock';
 import { Promises } from '../components/landing/Promises';
@@ -103,7 +103,7 @@ export default async function HomePage() {
           { title: 'thread persistence', description: 'Restore conversations across sessions.' },
         ]}
         cta={{ label: 'Production patterns', href: '/docs/agent/guides/production' }}
-        visual={<LiveCockpitFrame />}
+        visual={<LiveDemoFrame />}
       />
 
       <PilotBlock />
diff --git a/apps/website/src/components/landing/FinalCTA.tsx b/apps/website/src/components/landing/FinalCTA.tsx
index abb11d7fa..84d8bdc07 100644
--- a/apps/website/src/components/landing/FinalCTA.tsx
+++ b/apps/website/src/components/landing/FinalCTA.tsx
@@ -8,16 +8,16 @@ interface FinalCTAProps {
   headline?: string;
   /** Sub-headline. Defaults to the homepage closer. */
   subtext?: string;
-  /** Primary CTA. Defaults to "Get started" → /docs. */
-  primary?: { label: string; href: string };
-  /** Optional secondary CTA. Defaults to "See it live →" → cockpit. */
+  /** Primary CTA. Defaults to "Try the demo →" → demo.cacheplane.ai. */
+  primary?: { label: string; href: string; external?: boolean };
+  /** Optional secondary CTA. Defaults to "See each feature in action →" → cockpit. */
   secondary?: { label: string; href: string; external?: boolean } | null;
   /** Optional trailing caption. Defaults to MIT line. Pass null to hide. */
   caption?: string | null;
 }
 
-const DEFAULT_PRIMARY = { label: 'Get started', href: '/docs' };
-const DEFAULT_SECONDARY = { label: 'See it live →', href: 'https://cockpit.cacheplane.ai', external: true };
+const DEFAULT_PRIMARY = { label: 'Try the demo →', href: 'https://demo.cacheplane.ai', external: true };
+const DEFAULT_SECONDARY = { label: 'See each feature in action →', href: 'https://cockpit.cacheplane.ai', external: true };
 
 export function FinalCTA({
   headline = 'Stop stalling on agentic Angular.',
@@ -67,7 +67,12 @@ export function FinalCTA({
               marginBottom: 16,
             }}
           >
-            <Button variant="primary" size="lg" href={primary.href}>
+            <Button
+              variant="primary"
+              size="lg"
+              href={primary.href}
+              {...((primary as { external?: boolean }).external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+            >
               {primary.label}
             </Button>
             {secondary ? (
diff --git a/apps/website/src/components/landing/Hero.tsx b/apps/website/src/components/landing/Hero.tsx
index 1ad420c14..a1b63c3b4 100644
--- a/apps/website/src/components/landing/Hero.tsx
+++ b/apps/website/src/components/landing/Hero.tsx
@@ -59,11 +59,11 @@ export function Hero() {
               <Button
                 variant="ghost"
                 size="lg"
-                href="https://cockpit.cacheplane.ai"
+                href="https://demo.cacheplane.ai"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                See it live →
+                Try the demo →
               </Button>
             </div>
             <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
@@ -76,14 +76,14 @@ export function Hero() {
           {/* Right column — layered collage */}
           <div style={{ position: 'relative', minHeight: 420 }} aria-hidden="true">
             <BrowserFrame
-              url="cockpit.cacheplane.ai"
+              url="demo.cacheplane.ai"
               rotate={-3}
               elevation="lg"
               style={{ position: 'absolute', top: 0, left: 0, width: '92%' }}
             >
               <img
-                src="/screenshots/cockpit-code.webp"
-                alt="Cockpit reference app showing the Angular streaming component source"
+                src="/screenshots/canonical-demo-conversation.webp"
+                alt="Canonical demo — streaming chat rendering a markdown response with code block and table"
                 style={{ display: 'block', width: '100%', height: 'auto' }}
                 loading="lazy"
                 decoding="async"
diff --git a/apps/website/src/components/landing/LiveCockpitFrame.tsx b/apps/website/src/components/landing/LiveDemoFrame.tsx
similarity index 84%
rename from apps/website/src/components/landing/LiveCockpitFrame.tsx
rename to apps/website/src/components/landing/LiveDemoFrame.tsx
index 69e5846d5..a2a09676a 100644
--- a/apps/website/src/components/landing/LiveCockpitFrame.tsx
+++ b/apps/website/src/components/landing/LiveDemoFrame.tsx
@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 import { tokens } from '@ngaf/design-tokens';
 import { BrowserFrame } from '../ui/BrowserFrame';
 
-export function LiveCockpitFrame() {
+export function LiveDemoFrame() {
   const ref = useRef<HTMLDivElement>(null);
   const [shouldLoad, setShouldLoad] = useState(false);
 
@@ -28,11 +28,11 @@ export function LiveCockpitFrame() {
 
   return (
     <div ref={ref}>
-      <BrowserFrame url="cockpit.cacheplane.ai" elevation="lg">
+      <BrowserFrame url="demo.cacheplane.ai" elevation="lg">
         {shouldLoad ? (
           <iframe
-            src="https://cockpit.cacheplane.ai"
-            title="Cockpit — Angular Agent Framework reference app"
+            src="https://demo.cacheplane.ai"
+            title="Canonical demo — @ngaf/chat running against the shared LangGraph backend"
             loading="lazy"
             style={{
               width: '100%',
@@ -54,7 +54,7 @@ export function LiveCockpitFrame() {
               fontSize: 13,
             }}
           >
-            Loading live demo…
+            Loading demo…
           </div>
         )}
       </BrowserFrame>
diff --git a/apps/website/src/components/landing/ProofStrip.tsx b/apps/website/src/components/landing/ProofStrip.tsx
index 6a9ef262a..9160d101f 100644
--- a/apps/website/src/components/landing/ProofStrip.tsx
+++ b/apps/website/src/components/landing/ProofStrip.tsx
@@ -23,9 +23,9 @@ const SIGNALS: Signal[] = [
     href: null,
   },
   {
-    label: 'Reference app',
-    value: 'cockpit.cacheplane.ai',
-    href: 'https://cockpit.cacheplane.ai',
+    label: 'Try it live',
+    value: 'demo.cacheplane.ai',
+    href: 'https://demo.cacheplane.ai',
   },
   {
     label: 'On npm',
diff --git a/apps/website/src/components/shared/Footer.tsx b/apps/website/src/components/shared/Footer.tsx
index e68301148..d9c6d8dd4 100644
--- a/apps/website/src/components/shared/Footer.tsx
+++ b/apps/website/src/components/shared/Footer.tsx
@@ -175,6 +175,16 @@ export function Footer() {
               onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
               API Reference
             </Link>
+            <a href="https://demo.cacheplane.ai" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+              onClick={() => trackExternalLinkClick('https://demo.cacheplane.ai', {
+                surface: 'footer',
+                cta_id: 'footer_demo',
+                cta_text: 'Demo',
+              })}
+              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              Demo
+            </a>
             <a href="https://cockpit.cacheplane.ai" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
               onClick={() => trackExternalLinkClick('https://cockpit.cacheplane.ai', {
                 surface: 'footer',
diff --git a/apps/website/src/components/shared/Nav.tsx b/apps/website/src/components/shared/Nav.tsx
index 8c565ed83..b0cec7c2a 100644
--- a/apps/website/src/components/shared/Nav.tsx
+++ b/apps/website/src/components/shared/Nav.tsx
@@ -13,6 +13,7 @@ const links = [
   { label: 'Docs', href: '/docs', external: false },
   { label: 'Solutions', href: '/solutions', external: false },
   { label: 'API', href: '/docs/agent/api/agent', external: false },
+  { label: 'Demo', href: 'https://demo.cacheplane.ai', external: true },
   { label: 'Examples', href: 'https://cockpit.cacheplane.ai', external: true },
   { label: 'Pricing', href: '/pricing', external: false },
 ];
diff --git a/docs/superpowers/plans/2026-05-15-canonical-demo-marketing-rewire.md b/docs/superpowers/plans/2026-05-15-canonical-demo-marketing-rewire.md
new file mode 100644
index 000000000..95c7e1bab
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-15-canonical-demo-marketing-rewire.md
@@ -0,0 +1,752 @@
+# Phase 5 — Marketing Rewire Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace "See it live" CTAs on the marketing site with "Try the demo →" pointing at `demo.cacheplane.ai`, and capture two new canonical-demo screenshots for the Hero collage. Keep "See each feature in action" CTAs pointed at the cockpit.
+
+**Architecture:** Edits to seven files in `apps/website/src/` plus two new WebP assets in `apps/website/public/screenshots/`. The screenshots are captured live from `https://demo.cacheplane.ai` via the existing Chrome MCP tool, converted to WebP at quality 85, and saved before the file edits begin. The component edits are independent of each other and can be reviewed individually.
+
+**Tech Stack:** Next.js, React, TypeScript, Chrome MCP (for screenshot capture), `sharp` or `cwebp` (for PNG→WebP conversion).
+
+**Reference spec:** `docs/superpowers/specs/2026-05-15-canonical-demo-marketing-rewire-design.md`
+
+---
+
+## Background for the implementer
+
+This phase is purely a marketing-site refresh — no backend changes, no runtime behavior changes. The proxy + rate-limit + CORS + body-cap shipped in Phases 1–4 already protect `demo.cacheplane.ai`; this phase just routes traffic to it.
+
+The plan's first task (screenshot capture) is **operator-driven** — it uses Chrome MCP tools that aren't available inside a subagent invocation. The controller (the human or top-level Claude session) captures the screenshots before dispatching the implementer for tasks 2–8.
+
+**Funnel decision documented for the implementer:**
+
+The existing `FinalCTA` component renders a primary "Get started" → `/docs` and a secondary "See it live" → cockpit. After this phase, the defaults become primary "Try the demo →" → demo and secondary "See each feature in action →" → cockpit. The "Get started" docs CTA still appears prominently in `Hero.tsx` (line ~57), so the docs path stays visible — just not at the bottom-of-page closer.
+
+---
+
+### Task 1: Capture canonical-demo screenshots (OPERATOR-DRIVEN, not a subagent task)
+
+**Files:**
+- Create: `apps/website/public/screenshots/canonical-demo-welcome.webp`
+- Create: `apps/website/public/screenshots/canonical-demo-conversation.webp`
+
+**Context:** Chrome MCP tools (`mcp__Claude_in_Chrome__*`) aren't accessible from inside a subagent. The controller runs this task interactively, then commits the two new WebP files and hands the rest of the plan to the implementer.
+
+The conversation screenshot uses a prompt that produces a heading + fenced code block + table (markdown showcase): `Write a short markdown response that includes a heading, a fenced code block in javascript with a console.log, and a 2-row table.`
+
+---
+
+- [ ] **Step 1: Resize Chrome window**
+
+```
+mcp__Claude_in_Chrome__resize_window { width: 1600, height: 1000, tabId: <demo tab> }
+```
+
+- [ ] **Step 2: Navigate to the demo**
+
+```
+mcp__Claude_in_Chrome__navigate { url: "https://demo.cacheplane.ai", tabId: <demo tab> }
+```
+
+Then `computer { action: 'wait', duration: 3, tabId }` to let the welcome state settle.
+
+- [ ] **Step 3: Screenshot welcome state**
+
+```
+mcp__Claude_in_Chrome__computer {
+  action: 'screenshot',
+  save_to_disk: true,
+  tabId: <demo tab>
+}
+```
+
+Note the returned `path` field — that's the temp PNG location.
+
+- [ ] **Step 4: Send the markdown prompt**
+
+Type the prompt into the input field (find it via `find` tool, then `left_click` + `type`):
+
+```
+Write a short markdown response that includes a heading, a fenced code block in javascript with a console.log, and a 2-row table.
+```
+
+Click the send button. Wait 10 seconds for the response to fully render.
+
+- [ ] **Step 5: Screenshot mid-conversation**
+
+```
+mcp__Claude_in_Chrome__computer {
+  action: 'screenshot',
+  save_to_disk: true,
+  tabId: <demo tab>
+}
+```
+
+- [ ] **Step 6: Convert both PNGs to WebP**
+
+Pick whichever is available:
+
+```
+# If cwebp is installed (often via libwebp):
+cwebp -q 85 <welcome-temp.png> -o apps/website/public/screenshots/canonical-demo-welcome.webp
+cwebp -q 85 <conversation-temp.png> -o apps/website/public/screenshots/canonical-demo-conversation.webp
+
+# Or via sharp + a one-shot node script if cwebp isn't on the path:
+npx -y sharp-cli@^4 --input <welcome-temp.png> --output apps/website/public/screenshots/canonical-demo-welcome.webp --quality 85
+npx -y sharp-cli@^4 --input <conversation-temp.png> --output apps/website/public/screenshots/canonical-demo-conversation.webp --quality 85
+```
+
+- [ ] **Step 7: Verify sizes**
+
+```
+ls -lh apps/website/public/screenshots/canonical-demo-{welcome,conversation}.webp
+```
+
+Each should be ≤ 200 KB. If either is larger, drop quality to 80 and reconvert.
+
+- [ ] **Step 8: Commit screenshots**
+
+```bash
+git add apps/website/public/screenshots/canonical-demo-welcome.webp \
+        apps/website/public/screenshots/canonical-demo-conversation.webp
+git commit -m "feat(website): capture canonical-demo screenshots (welcome + conversation)
+
+For the Phase 5 marketing rewire. Welcome shot shows the empty-state
+landing UI; conversation shot showcases markdown rendering (heading,
+fenced code block, table). Both 1600x1000, WebP quality 85.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+### Task 2: Hero.tsx — swap primary CTA + collage screenshot
+
+**Files:**
+- Modify: `apps/website/src/components/landing/Hero.tsx`
+
+**Context:** Three changes in one file. The primary CTA href, the BrowserFrame URL label, and the collage screenshot's `src` + `alt` text. Lines 62, 79, and 85 in the current file.
+
+---
+
+- [ ] **Step 1: Update primary CTA href + label**
+
+Find the block in `apps/website/src/components/landing/Hero.tsx` (around lines 57–67) that reads:
+
+```tsx
+              <Button
+                variant="ghost"
+                size="lg"
+                href="https://cockpit.cacheplane.ai"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                See it live →
+              </Button>
+```
+
+Replace `href` and inner text:
+
+```tsx
+              <Button
+                variant="ghost"
+                size="lg"
+                href="https://demo.cacheplane.ai"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Try the demo →
+              </Button>
+```
+
+- [ ] **Step 2: Update BrowserFrame URL label**
+
+Find the block (around lines 78–89):
+
+```tsx
+            <BrowserFrame
+              url="cockpit.cacheplane.ai"
+              rotate={-3}
+              elevation="lg"
+              style={{ position: 'absolute', top: 0, left: 0, width: '92%' }}
+            >
+              <img
+                src="/screenshots/cockpit-code.webp"
+                alt="Cockpit reference app showing the Angular streaming component source"
+                style={{ display: 'block', width: '100%', height: 'auto' }}
+                loading="lazy"
+                decoding="async"
+              />
+            </BrowserFrame>
+```
+
+Replace `url`, `src`, and `alt`:
+
+```tsx
+            <BrowserFrame
+              url="demo.cacheplane.ai"
+              rotate={-3}
+              elevation="lg"
+              style={{ position: 'absolute', top: 0, left: 0, width: '92%' }}
+            >
+              <img
+                src="/screenshots/canonical-demo-conversation.webp"
+                alt="Canonical demo — streaming chat rendering a markdown response with code block and table"
+                style={{ display: 'block', width: '100%', height: 'auto' }}
+                loading="lazy"
+                decoding="async"
+              />
+            </BrowserFrame>
+```
+
+- [ ] **Step 3: Sanity check the rest of the file**
+
+```
+grep -n "cockpit\.cacheplane\.ai" apps/website/src/components/landing/Hero.tsx
+```
+
+Expected: zero matches.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/website/src/components/landing/Hero.tsx
+git commit -m "feat(website): Hero CTA + browser-frame routes to canonical demo
+
+Primary 'See it live' button becomes 'Try the demo →' pointing at
+demo.cacheplane.ai. The layered-collage BrowserFrame swaps its URL
+label to demo.cacheplane.ai and its screenshot to the new
+canonical-demo-conversation.webp (markdown response with code +
+table). The other two collage images are unaffected.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+### Task 3: FinalCTA.tsx — swap defaults
+
+**Files:**
+- Modify: `apps/website/src/components/landing/FinalCTA.tsx`
+
+**Context:** Two `const` defaults need updating (lines 19–20 in the current file). The component shape (`<FinalCTA />` consumers, primary/secondary props) is unchanged — only the default values.
+
+---
+
+- [ ] **Step 1: Update the DEFAULT_PRIMARY and DEFAULT_SECONDARY**
+
+In `apps/website/src/components/landing/FinalCTA.tsx`, find lines 19–20:
+
+```tsx
+const DEFAULT_PRIMARY = { label: 'Get started', href: '/docs' };
+const DEFAULT_SECONDARY = { label: 'See it live →', href: 'https://cockpit.cacheplane.ai', external: true };
+```
+
+Replace with:
+
+```tsx
+const DEFAULT_PRIMARY = { label: 'Try the demo →', href: 'https://demo.cacheplane.ai', external: true };
+const DEFAULT_SECONDARY = { label: 'See each feature in action →', href: 'https://cockpit.cacheplane.ai', external: true };
+```
+
+Then update the `primary` prop type in the interface (line 12) to allow the optional `external` flag:
+
+```tsx
+  primary?: { label: string; href: string; external?: boolean };
+```
+
+And update the render to honor it (around line 70). Find:
+
+```tsx
+            <Button variant="primary" size="lg" href={primary.href}>
+              {primary.label}
+            </Button>
+```
+
+Replace with:
+
+```tsx
+            <Button
+              variant="primary"
+              size="lg"
+              href={primary.href}
+              {...((primary as { external?: boolean }).external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+            >
+              {primary.label}
+            </Button>
+```
+
+Also update the JSDoc comment on the `primary?` prop (around line 11):
+
+```tsx
+  /** Primary CTA. Defaults to "Try the demo →" → demo.cacheplane.ai. */
+```
+
+And `secondary?` (around line 13):
+
+```tsx
+  /** Optional secondary CTA. Defaults to "See each feature in action →" → cockpit. */
+```
+
+- [ ] **Step 2: Sanity check**
+
+```
+grep -n "cockpit\|demo\.cacheplane" apps/website/src/components/landing/FinalCTA.tsx
+```
+
+Expected: 1 cockpit reference (the DEFAULT_SECONDARY) and 1 demo reference (the DEFAULT_PRIMARY). Plus JSDoc mentions.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/components/landing/FinalCTA.tsx
+git commit -m "feat(website): FinalCTA defaults reroute to canonical demo + cockpit deep dive
+
+Primary CTA becomes 'Try the demo →' (demo.cacheplane.ai).
+Secondary CTA becomes 'See each feature in action →' (cockpit.cacheplane.ai).
+
+The existing 'Get started' → /docs CTA stays prominent in the Hero
+(top of the page); the FinalCTA's bottom-of-page closer now drives
+the two external surfaces that prove the framework works.
+
+Adds optional 'external' flag support to the primary prop so
+external defaults can open in a new tab.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+### Task 4: ProofStrip.tsx — update the "Reference app" entry
+
+**Files:**
+- Modify: `apps/website/src/components/landing/ProofStrip.tsx`
+
+**Context:** Two-line change to the SIGNALS array entry (lines 25–29).
+
+---
+
+- [ ] **Step 1: Update the signal**
+
+In `apps/website/src/components/landing/ProofStrip.tsx`, find the `Reference app` entry (around lines 25–29):
+
+```tsx
+  {
+    label: 'Reference app',
+    value: 'cockpit.cacheplane.ai',
+    href: 'https://cockpit.cacheplane.ai',
+  },
+```
+
+Replace with:
+
+```tsx
+  {
+    label: 'Try it live',
+    value: 'demo.cacheplane.ai',
+    href: 'https://demo.cacheplane.ai',
+  },
+```
+
+The label change ("Reference app" → "Try it live") is intentional — "Reference app" implied cockpit's role; "Try it live" speaks to the canonical demo's role.
+
+- [ ] **Step 2: Sanity check**
+
+```
+grep -n "cockpit\.cacheplane\.ai" apps/website/src/components/landing/ProofStrip.tsx
+```
+
+Expected: zero matches.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/components/landing/ProofStrip.tsx
+git commit -m "feat(website): ProofStrip swaps 'Reference app' to 'Try it live' (demo)
+
+Updates the signal label + value + href to point at
+demo.cacheplane.ai. Cockpit stays referenced elsewhere (Nav,
+Footer, deep-dive pages); the ProofStrip's job is to surface
+proof-of-life — the canonical demo IS the live proof.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+### Task 5: LiveCockpitFrame → LiveDemoFrame rename
+
+**Files:**
+- Rename: `apps/website/src/components/landing/LiveCockpitFrame.tsx` → `LiveDemoFrame.tsx`
+- Modify: renamed file (iframe src, BrowserFrame url, title, function name, internal labels)
+- Modify: `apps/website/src/app/page.tsx` (import + JSX usage)
+
+**Context:** The component is `'use client'`, uses an IntersectionObserver for lazy-loading the iframe, and currently iframes cockpit.cacheplane.ai. Two consumers in the repo: the file itself and `page.tsx` (only used in the "Ship" feature block as the visual). Use `git mv` to preserve history.
+
+---
+
+- [ ] **Step 1: Rename the file with git mv**
+
+```bash
+git mv apps/website/src/components/landing/LiveCockpitFrame.tsx \
+       apps/website/src/components/landing/LiveDemoFrame.tsx
+```
+
+- [ ] **Step 2: Update the renamed file**
+
+Replace the contents of `apps/website/src/components/landing/LiveDemoFrame.tsx` with:
+
+```tsx
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import { tokens } from '@ngaf/design-tokens';
+import { BrowserFrame } from '../ui/BrowserFrame';
+
+export function LiveDemoFrame() {
+  const ref = useRef<HTMLDivElement>(null);
+  const [shouldLoad, setShouldLoad] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current || shouldLoad) return;
+    const el = ref.current;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          if (e.isIntersecting) {
+            setShouldLoad(true);
+            observer.disconnect();
+            return;
+          }
+        }
+      },
+      { rootMargin: '200px' },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [shouldLoad]);
+
+  return (
+    <div ref={ref}>
+      <BrowserFrame url="demo.cacheplane.ai" elevation="lg">
+        {shouldLoad ? (
+          <iframe
+            src="https://demo.cacheplane.ai"
+            title="Canonical demo — @ngaf/chat running against the shared LangGraph backend"
+            loading="lazy"
+            style={{
+              width: '100%',
+              height: 480,
+              border: 'none',
+              display: 'block',
+            }}
+          />
+        ) : (
+          <div
+            style={{
+              height: 480,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: tokens.surfaces.surfaceTinted,
+              color: tokens.colors.textMuted,
+              fontFamily: tokens.typography.fontMono,
+              fontSize: 13,
+            }}
+          >
+            Loading demo…
+          </div>
+        )}
+      </BrowserFrame>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 3: Update the import + usage in page.tsx**
+
+In `apps/website/src/app/page.tsx`, find line 6:
+
+```tsx
+import { LiveCockpitFrame } from '../components/landing/LiveCockpitFrame';
+```
+
+Replace with:
+
+```tsx
+import { LiveDemoFrame } from '../components/landing/LiveDemoFrame';
+```
+
+Then find line 106:
+
+```tsx
+        visual={<LiveCockpitFrame />}
+```
+
+Replace with:
+
+```tsx
+        visual={<LiveDemoFrame />}
+```
+
+- [ ] **Step 4: Sanity check there are no stragglers**
+
+```
+grep -rn "LiveCockpitFrame" apps/website/src/
+```
+
+Expected: zero matches.
+
+```
+grep -n "cockpit\.cacheplane\.ai" apps/website/src/components/landing/LiveDemoFrame.tsx
+```
+
+Expected: zero matches.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/website/src/components/landing/LiveDemoFrame.tsx \
+        apps/website/src/app/page.tsx
+git commit -m "feat(website): rename LiveCockpitFrame → LiveDemoFrame, iframe canonical demo
+
+The 'Ship' feature block's visual previously iframed
+cockpit.cacheplane.ai (which renders the cockpit docs shell — not
+visually compelling). Switch to demo.cacheplane.ai, which renders
+the actual chat surface. Same lazy-load IntersectionObserver
+pattern; only the iframe src + BrowserFrame label + title text
+change.
+
+Renames the file + symbol with git mv so history is preserved.
+Updates the single consumer in app/page.tsx.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+### Task 6: Nav.tsx — add Demo link
+
+**Files:**
+- Modify: `apps/website/src/components/shared/Nav.tsx`
+
+**Context:** The `links` array (currently lines 11–18 in the file based on the spec) holds the top-nav entries. Insert a "Demo" entry before "Examples" so the demo is the first external destination users see.
+
+---
+
+- [ ] **Step 1: Insert the Demo entry**
+
+In `apps/website/src/components/shared/Nav.tsx`, find the `links` array:
+
+```tsx
+const links = [
+  { label: 'Pilot to Prod', href: '/pilot-to-prod', external: false },
+  { label: 'Docs', href: '/docs', external: false },
+  { label: 'Solutions', href: '/solutions', external: false },
+  { label: 'API', href: '/docs/agent/api/agent', external: false },
+  { label: 'Examples', href: 'https://cockpit.cacheplane.ai', external: true },
+  { label: 'Pricing', href: '/pricing', external: false },
+];
+```
+
+Insert a Demo entry immediately before the Examples entry:
+
+```tsx
+const links = [
+  { label: 'Pilot to Prod', href: '/pilot-to-prod', external: false },
+  { label: 'Docs', href: '/docs', external: false },
+  { label: 'Solutions', href: '/solutions', external: false },
+  { label: 'API', href: '/docs/agent/api/agent', external: false },
+  { label: 'Demo', href: 'https://demo.cacheplane.ai', external: true },
+  { label: 'Examples', href: 'https://cockpit.cacheplane.ai', external: true },
+  { label: 'Pricing', href: '/pricing', external: false },
+];
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/shared/Nav.tsx
+git commit -m "feat(website): Nav adds 'Demo' link before 'Examples'
+
+Demo (demo.cacheplane.ai) is the primary 'try it' entry point;
+Examples (cockpit.cacheplane.ai) is the 'see each feature in
+action' deep dive. Both links are external.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+### Task 7: Footer.tsx — add Demo link
+
+**Files:**
+- Modify: `apps/website/src/components/shared/Footer.tsx`
+
+**Context:** The Resources column has an existing `<a href="https://cockpit.cacheplane.ai">Examples</a>` (around line 178). Insert a parallel Demo anchor immediately before it. Use the same `trackExternalLinkClick` analytics pattern.
+
+---
+
+- [ ] **Step 1: Insert the Demo anchor**
+
+In `apps/website/src/components/shared/Footer.tsx`, find the Examples anchor block (lines 178–187):
+
+```tsx
+            <a href="https://cockpit.cacheplane.ai" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+              onClick={() => trackExternalLinkClick('https://cockpit.cacheplane.ai', {
+                surface: 'footer',
+                cta_id: 'footer_examples',
+                cta_text: 'Examples',
+              })}
+              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              Examples
+            </a>
+```
+
+Insert a parallel Demo anchor immediately before it:
+
+```tsx
+            <a href="https://demo.cacheplane.ai" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+              onClick={() => trackExternalLinkClick('https://demo.cacheplane.ai', {
+                surface: 'footer',
+                cta_id: 'footer_demo',
+                cta_text: 'Demo',
+              })}
+              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              Demo
+            </a>
+            <a href="https://cockpit.cacheplane.ai" className="transition-colors" style={{ color: tokens.colors.textSecondary }}
+              onClick={() => trackExternalLinkClick('https://cockpit.cacheplane.ai', {
+                surface: 'footer',
+                cta_id: 'footer_examples',
+                cta_text: 'Examples',
+              })}
+              onMouseEnter={(e) => (e.currentTarget.style.color = tokens.colors.accent)}
+              onMouseLeave={(e) => (e.currentTarget.style.color = tokens.colors.textSecondary)}>
+              Examples
+            </a>
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/shared/Footer.tsx
+git commit -m "feat(website): Footer adds 'Demo' link before 'Examples'
+
+Mirrors the Nav addition. Same external-link analytics pattern
+(trackExternalLinkClick) with a new footer_demo cta_id.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+### Task 8: Build verification + PR
+
+**Files:** None modified.
+
+**Context:** Production build of the website catches any broken imports after the rename. Run before pushing the PR.
+
+---
+
+- [ ] **Step 1: Run the production build**
+
+```
+npx nx build website --configuration=production
+```
+
+Expected: succeeds. Any leftover `LiveCockpitFrame` import surfaces here as a build error.
+
+- [ ] **Step 2: Final grep sanity**
+
+```
+grep -rn "cockpit\.cacheplane\.ai" apps/website/src/ | grep -v "FinalCTA\|HomeFAQ\|chat/page\|pilot-to-prod/page\|dev/primitives\|page\.tsx" | head -20
+```
+
+Expected: zero matches in the touched components. The intentional remaining refs (chat/page.tsx, pilot-to-prod/page.tsx, dev/primitives/page.tsx, HomeFAQ.tsx, page.tsx:44 + page.tsx:76, FinalCTA's secondary) won't appear because they're filtered.
+
+```
+grep -rn "LiveCockpitFrame" apps/website/src/
+```
+
+Expected: zero matches.
+
+```
+ls -lh apps/website/public/screenshots/canonical-demo-{welcome,conversation}.webp
+```
+
+Expected: both files exist, each ≤ 200 KB.
+
+- [ ] **Step 3: Push + open PR**
+
+```bash
+git push -u origin claude/canonical-demo-marketing-rewire
+gh pr create --title "feat(website): Phase 5 — marketing rewire to canonical demo" --body "$(cat <<'EOF'
+## Summary
+
+Routes marketing-site visitors to the canonical demo at \`demo.cacheplane.ai\`. Full sweep of the homepage CTAs + nav + footer. Keeps "See each feature in action" deep dives pointed at \`cockpit.cacheplane.ai\`.
+
+## Changes
+
+- **Hero**: "See it live →" → "Try the demo →" (demo). Browser-frame collage image swaps to a new canonical-demo screenshot showing markdown rendering.
+- **FinalCTA**: primary default becomes "Try the demo →" (demo); secondary default becomes "See each feature in action →" (cockpit). The "Get started" docs CTA stays in the Hero.
+- **ProofStrip**: "Reference app" signal becomes "Try it live" pointing at demo.
+- **LiveCockpitFrame → LiveDemoFrame**: file renamed with \`git mv\`; iframe now loads demo.cacheplane.ai (the actual chat surface, more visually compelling than the cockpit docs shell).
+- **Nav + Footer**: new "Demo" link added before the existing "Examples" link.
+- **Screenshots**: two new WebP captures of demo.cacheplane.ai (welcome + mid-conversation with markdown response). Welcome shot captured for completeness; conversation shot replaces the cockpit-code shot in the Hero collage.
+
+## Spec & Plan
+
+- \`docs/superpowers/specs/2026-05-15-canonical-demo-marketing-rewire-design.md\`
+- \`docs/superpowers/plans/2026-05-15-canonical-demo-marketing-rewire.md\`
+
+## Test plan
+
+- [x] Production build of website succeeds
+- [x] grep confirms no remaining cockpit refs in touched files
+- [x] grep confirms no LiveCockpitFrame stragglers
+- [x] Both WebP files committed, ≤ 200 KB each
+- [ ] Post-merge browser smoke at cacheplane.ai:
+  - Hero "Try the demo →" navigates to demo.cacheplane.ai
+  - Hero collage shows the new canonical-demo screenshot
+  - FinalCTA renders both CTAs with primary → demo, secondary → cockpit
+  - ProofStrip "Try it live" entry visible + clickable
+  - Production-patterns iframe (Ship section) renders the chat surface
+  - Nav + Footer both show new "Demo" link
+
+🤖 Generated with [Claude Code](https://claude.com/claude-code)
+EOF
+)"
+```
+
+- [ ] **Step 4: Wait for CI green, merge**
+
+Once all checks pass (Library, Website, Cockpit jobs):
+
+```bash
+gh pr merge <PR_NUMBER> --squash
+```
+
+The Vercel deploy of `apps/website` updates `cacheplane.ai` within ~3 min.
+
+- [ ] **Step 5: Post-merge browser smoke**
+
+After Vercel deploys, open `https://cacheplane.ai` and walk through the test plan items from the PR body.
+
+- [ ] **Step 6: Clean up worktree + branch**
+
+```bash
+git worktree remove .claude/worktrees/canonical-demo-marketing-rewire --force
+git branch -D claude/canonical-demo-marketing-rewire
+```
+
+---
+
+## Self-review notes
+
+- **Spec coverage:** every spec section maps to a task. Hero (line 62 + 79 + 85) → Task 2. FinalCTA → Task 3. ProofStrip → Task 4. LiveCockpitFrame rename → Task 5. Nav → Task 6. Footer → Task 7. Screenshots → Task 1. Build verification + PR + verify → Task 8.
+- **No placeholders:** every code block is final content the implementer pastes verbatim.
+- **Type consistency:** `LiveDemoFrame` symbol used identically across the renamed file and its single consumer in `page.tsx`. `canonical-demo-welcome.webp` and `canonical-demo-conversation.webp` file paths consistent across Task 1 and Task 2.
+- **Task 1 is operator-driven, not subagent-dispatchable.** Subagents can't use Chrome MCP. The controller (top-level Claude) runs Task 1 interactively, commits, then dispatches the implementer for Tasks 2–7. Task 8 (PR + verify) is controller work too.
+- **Funnel impact flagged:** Task 3's commit message and the plan's Background section call out that the FinalCTA defaults change displaces the "Get started" → /docs default. The Hero still has "Get started" prominently.
diff --git a/docs/superpowers/specs/2026-05-15-canonical-demo-marketing-rewire-design.md b/docs/superpowers/specs/2026-05-15-canonical-demo-marketing-rewire-design.md
new file mode 100644
index 000000000..8293be16b
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-15-canonical-demo-marketing-rewire-design.md
@@ -0,0 +1,152 @@
+# Phase 5 — Marketing Rewire — Design
+
+**Status:** Approved
+**Date:** 2026-05-15
+**Goal:** Route marketing-site visitors who want to "try it" to the canonical demo at `demo.cacheplane.ai`, replacing the current "See it live" CTAs that point at `cockpit.cacheplane.ai`. Capture two new canonical-demo screenshots and place them in the Hero collage. Keep "See each feature in action" pointed at the cockpit.
+
+## Why now
+
+Phases 1–4 made `demo.cacheplane.ai` reachable, wallet-safe (rate-limit + body cap + CORS allowlist), and verified live. This phase drives the actual marketing traffic that justifies the deployment work.
+
+## Decisions locked during brainstorming
+
+| Decision | Choice |
+|---|---|
+| Scope | Full sweep — Hero + FinalCTA + ProofStrip + LiveDemoFrame (renamed from LiveCockpitFrame) + Nav "Demo" link + Footer "Demo" link |
+| Distinguishing copy | "Try the demo →" → demo; "See each feature in action →" → cockpit |
+| Screenshots to capture | Two — welcome state + mid-conversation with markdown response |
+| Hero collage layering | Two of three slots become canonical-demo shots; third remains (genui-surface or code-editor) |
+| `chat/page.tsx`, `pilot-to-prod/page.tsx`, `dev/primitives/page.tsx`, `HomeFAQ.tsx`, `page.tsx:44/76` cockpit refs | OUT of scope — these are deep-dive contexts; stay cockpit |
+| New `/demo` route on marketing site | OUT of scope; demo lives at its own subdomain |
+
+## Architecture
+
+Three categories of `apps/website/src/` edits plus two new image assets.
+
+### 1. Primary "Try the demo" surfaces
+
+Replace `https://cockpit.cacheplane.ai` with `https://demo.cacheplane.ai` and update label + browser-frame URL in three components:
+
+- **`apps/website/src/components/landing/Hero.tsx`** (lines 62 + 79 + 85)
+  - Primary CTA href → demo
+  - `BrowserFrame url` label → `demo.cacheplane.ai`
+  - Collage screenshot `src` → `/screenshots/canonical-demo-conversation.webp` (the markdown-rich shot)
+- **`apps/website/src/components/landing/FinalCTA.tsx`** (line 20)
+  - `DEFAULT_SECONDARY = { label: 'See each feature in action →', href: 'https://cockpit.cacheplane.ai', external: true }` stays
+  - Add `DEFAULT_PRIMARY = { label: 'Try the demo →', href: 'https://demo.cacheplane.ai', external: true }` as the new primary CTA
+  - Update the FinalCTA component to render both with distinct visual weights
+- **`apps/website/src/components/landing/ProofStrip.tsx`** (lines 27–28)
+  - "Live" proof: `value: 'demo.cacheplane.ai'`, `href: 'https://demo.cacheplane.ai'`
+
+### 2. Production-patterns iframe — rename component
+
+- **`apps/website/src/components/landing/LiveCockpitFrame.tsx`** → `LiveDemoFrame.tsx`
+  - Update `<iframe src>` to `https://demo.cacheplane.ai`
+  - Update `<BrowserFrame url>` to `demo.cacheplane.ai`
+  - Update internal alt text and aria-label
+  - Update file's own header comment + JSDoc
+- **`apps/website/src/app/page.tsx`** (line 6 + 106)
+  - Import name `LiveCockpitFrame` → `LiveDemoFrame`
+  - Component usage `<LiveCockpitFrame />` → `<LiveDemoFrame />`
+
+The old `LiveCockpitFrame.tsx` file is renamed (git mv), not duplicated. There are no other consumers.
+
+### 3. Nav + Footer "Demo" link
+
+- **`apps/website/src/components/shared/Nav.tsx`** (line 16, the `LINKS` array)
+  - Insert `{ label: 'Demo', href: 'https://demo.cacheplane.ai', external: true }` BEFORE the existing "Examples" entry. Demo is the primary entry point — earlier in reading order.
+- **`apps/website/src/components/shared/Footer.tsx`** (around line 178)
+  - Add a parallel "Demo" anchor near the existing "Examples" anchor in the Resources/Product column. Same analytics-tracking pattern.
+
+## Screenshot capture pipeline
+
+Captured via the existing Chrome MCP integration. Sequence:
+
+1. `mcp__Claude_in_Chrome__resize_window` to 1600×1000 (typical Hero collage proportions).
+2. `mcp__Claude_in_Chrome__navigate` to `https://demo.cacheplane.ai`.
+3. Wait ~3 seconds for sidenav + welcome to render.
+4. `mcp__Claude_in_Chrome__computer { action: 'screenshot', save_to_disk: true }` → temp PNG, capture path from response.
+5. Type the markdown prompt into the input, click send.
+6. Wait ~10 seconds for the response (heading + fenced code block + table) to fully render.
+7. Screenshot again → second temp PNG.
+8. Convert both PNG → WebP at quality 85 via `cwebp` or `sharp` CLI (whichever is available; if neither is, install `sharp` as a dev dep).
+9. Move converted files to:
+   - `apps/website/public/screenshots/canonical-demo-welcome.webp`
+   - `apps/website/public/screenshots/canonical-demo-conversation.webp`
+10. Target file size: ≤ 200 KB each. WebP quality 85 typically lands at 80–150 KB for 1600px images.
+
+The existing `cockpit-code.webp` stays on disk — there are still references elsewhere (e.g., `dev/primitives/page.tsx`, `pilot-to-prod/page.tsx`) we don't touch in this phase.
+
+## Hero collage swap detail
+
+`Hero.tsx` currently renders three layered images in a collage:
+- `cockpit-code.webp` (line 85) — replaced with `canonical-demo-conversation.webp` (richest single shot)
+
+The other two images in the collage stay (genui-surface, code-editor-snippet) — they're not cockpit-specific.
+
+The `canonical-demo-welcome.webp` is captured AND saved to public/screenshots, but used elsewhere — primarily in the `LiveDemoFrame` fallback (if the iframe fails to load) and as a reference asset. We're not adding a fourth image to the Hero collage; the design constraint was "swap one, keep the collage shape."
+
+## Data flow
+
+No runtime changes — every edit is build-time content. The Next.js build picks up the new images at static-asset paths, the renamed component is re-imported, and the rewired CTAs point at the new subdomain.
+
+## Error handling
+
+No new runtime branches. CORS, body cap, and rate-limit (already shipped in Phases 3–4) handle traffic the new CTAs send. If `demo.cacheplane.ai` is unreachable, the CTAs return browser-default network errors — not our concern here.
+
+## Testing
+
+### Pre-merge
+
+1. **Grep verification.** After all edits:
+   ```
+   grep -rn "cockpit\.cacheplane\.ai" apps/website/src/ | wc -l
+   ```
+   Should return roughly 7 — only the intentional remaining refs (chat page, pilot-to-prod, dev/primitives, FAQ text, page.tsx:44, page.tsx:76, plus FinalCTA's "See each feature in action").
+
+2. **No leftover `LiveCockpitFrame` symbol:**
+   ```
+   grep -rn "LiveCockpitFrame" apps/website/src/
+   ```
+   Should return zero matches.
+
+3. **Production build:** `npx nx build website` succeeds. Catches broken imports after rename.
+
+4. **WebP files exist and are reasonable size:**
+   ```
+   ls -lh apps/website/public/screenshots/canonical-demo-{welcome,conversation}.webp
+   ```
+   Each ≤ 200 KB.
+
+### Post-merge (manual, after Vercel deploys to cacheplane.ai)
+
+- Hero "Try the demo →" CTA navigates to `demo.cacheplane.ai`.
+- Hero collage shows the new screenshot.
+- FinalCTA has both CTAs visible; primary points to demo, secondary to cockpit.
+- ProofStrip "demo.cacheplane.ai" entry is clickable.
+- Production-patterns section iframe renders the chat surface (not cockpit shell).
+- Nav has both "Demo" and "Examples" entries.
+- Footer has both links.
+- The `cockpit-code.webp` reference in `dev/primitives/page.tsx` etc. still works (file still on disk).
+
+## Out of scope
+
+- Replacing the second + third Hero collage images.
+- New `/demo` route on the marketing site.
+- A/B testing the CTA copy.
+- Analytics event renaming (existing `trackExternalLinkClick` calls keep firing; they parameterize the URL).
+- Removing `cockpit-code.webp` from disk.
+- The `cockpit.cacheplane.ai` references in deep-dive pages (`chat/page.tsx`, `pilot-to-prod/page.tsx`, etc.) — keep cockpit there.
+
+## References
+
+- Phase 4 PR #324 (shipped CORS allowlist + body cap)
+- Master canonical-demo spec: `docs/superpowers/specs/2026-05-13-canonical-demo-deploy-design.md` — Phase 5 section
+- `apps/website/src/components/ui/BrowserFrame.tsx` — the URL-bar component used in Hero + collage frames
+- `apps/website/src/components/landing/Hero.tsx` lines 62, 79, 85 — current cockpit refs
+- `apps/website/src/components/landing/FinalCTA.tsx` line 20 — current `DEFAULT_SECONDARY`
+- `apps/website/src/components/landing/ProofStrip.tsx` lines 27–28 — current proof
+- `apps/website/src/components/landing/LiveCockpitFrame.tsx` — entire file
+- `apps/website/src/app/page.tsx` lines 6, 106 — import + usage
+- `apps/website/src/components/shared/Nav.tsx` line 16 — LINKS array
+- `apps/website/src/components/shared/Footer.tsx` line 178 — existing cockpit link