diff --git a/README.md b/README.md
index fa1226d65..12f3a7a1e 100644
--- a/README.md
+++ b/README.md
@@ -24,8 +24,8 @@ Joltrin (formerly SOP) is an open-source Go library that checks an AI agent's ac
 **What Joltrin does.** The agent emits intent. Joltrin checks the intent against the trace and the runbook's rules, outside the agent's context window. The check and the commit are one call, so a step is recorded only if it passed. A step whose required state is missing is refused. A claim that something happened is not evidence that it happened.
 
 <p align="center">
-  <a href="docs/assets/joltrin-barrier.mp4">
-    <img src="docs/assets/joltrin-barrier-poster.jpg" alt="A 43 second silent demo: an agent proposes dropping a production database, Joltrin blocks it, the agent runs the missing steps, and the same action is then allowed. Click to play." width="420" />
+  <a href="https://youtu.be/F0jYkBHJluI">
+    <img src="docs/assets/joltrin-demo.gif" alt="Joltrin demo. Click to watch the video." width="760" />
   </a>
 </p>
 
diff --git a/demo/index.html b/demo/index.html
index cf58b420a..8b8330c5f 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -477,29 +477,29 @@ <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-t
           </div>
         </div>
 
-        <figure id="demo-video" class="min-w-0 scroll-mt-20 w-full max-w-[34rem] mx-auto lg:mx-0 lg:ml-auto">
-          <div class="relative rounded-2xl overflow-hidden border border-dark-700 bg-dark-950 shadow-2xl shadow-black/50" style="aspect-ratio:1/1">
-            <video id="demo-video-el" class="absolute inset-0 w-full h-full" width="1080" height="1080" muted loop playsinline preload="none"
-                   poster="./assets/joltrin-barrier-poster-540.jpg"
-                   aria-label="A 43 second demo: an agent proposes dropping a production database, Joltrin blocks it, the agent runs the missing steps, and the same action is then allowed."></video>
-            <button id="demo-video-toggle" type="button" aria-label="Play the demo video"
-                    class="absolute right-3 bottom-3 inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-dark-950/85 border border-dark-700 text-xs font-mono text-slate-200 hover:text-white hover:border-brand-500/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400">
-              <span id="demo-video-icon" aria-hidden="true">&#9654;</span><span id="demo-video-label">Play</span>
-            </button>
+        <div id="hero-example" class="min-w-0 rounded-xl bg-dark-950 border border-dark-700 p-4 font-mono text-xs sm:text-sm" aria-label="A blocked, then allowed, sequence">
+          <div class="text-[11px] text-slate-500 uppercase tracking-wider mb-3">// db-maintenance runbook</div>
+          <div class="space-y-1.5 overflow-x-auto">
+            <div class="sm:whitespace-nowrap"><span class="text-white">drop_prod_db</span>     <span class="text-rose-400 font-bold">BLOCKED</span> <span class="text-slate-400">backup_validated missing</span></div>
+            <div class="sm:whitespace-nowrap"><span class="text-white">validate_backup</span>  <span class="text-rose-400 font-bold">BLOCKED</span> <span class="text-slate-400">backup_taken missing</span></div>
+            <div class="sm:whitespace-nowrap"><span class="text-white">take_backup</span>      <span class="text-brand-400 font-bold">ALLOWED</span></div>
+            <div class="sm:whitespace-nowrap"><span class="text-white">validate_backup</span>  <span class="text-brand-400 font-bold">ALLOWED</span></div>
+            <div class="sm:whitespace-nowrap"><span class="text-white">drop_prod_db</span>     <span class="text-brand-400 font-bold">ALLOWED</span></div>
           </div>
-          <figcaption class="mt-3 text-xs text-slate-400 leading-relaxed">
-            43 seconds, silent, real output from <code class="text-slate-200">sop-mcp-server demo</code>.
-            <details class="mt-2">
-              <summary class="cursor-pointer text-slate-300 hover:text-white">Text version</summary>
-              <ol id="hero-example" class="mt-2 space-y-1 font-mono text-[12px] text-slate-300 list-decimal list-inside">
-                <li><span class="text-white">drop_prod_db</span> <span class="text-rose-400 font-bold">BLOCKED</span>, <code>backup_validated</code> is missing from the trace</li>
-                <li><span class="text-white">take_backup</span> <span class="text-brand-400 font-bold">ALLOWED</span></li>
-                <li><span class="text-white">validate_backup</span> <span class="text-brand-400 font-bold">ALLOWED</span></li>
-                <li><span class="text-white">drop_prod_db</span> <span class="text-brand-400 font-bold">ALLOWED</span>, the evidence now exists</li>
-              </ol>
-            </details>
-          </figcaption>
-        </figure>
+          <p class="text-[11px] text-slate-500 mt-3 leading-relaxed font-sans">The order is enforced by the barrier, whatever the agent says it already did.</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Intro video (muted so browsers allow autoplay) -->
+    <section id="demo-video" aria-label="Joltrin intro video" class="scroll-mt-20 mb-8 rounded-2xl overflow-hidden border border-dark-700/80 bg-dark-900">
+      <div class="relative w-full" style="aspect-ratio:16/9">
+        <iframe class="absolute inset-0 w-full h-full"
+          data-src="https://www.youtube-nocookie.com/embed/F0jYkBHJluI?autoplay=1&mute=1&loop=1&playlist=F0jYkBHJluI&playsinline=1&rel=0"
+          title="Joltrin intro video"
+          allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
+          allowfullscreen
+          referrerpolicy="strict-origin-when-cross-origin"></iframe>
       </div>
     </section>
 
@@ -1763,39 +1763,12 @@ <h4 class="font-mono text-xs uppercase font-bold text-white mb-3">Open Source &a
   <script>
     let selectedBenchOps = 5000;
 
-    // Demo video. It stays unloaded until the page has finished loading, plays
-    // only while it is on screen, and does not autoplay for people who prefer
-    // reduced motion, who get the poster and a Play button instead. A phone gets
-    // the smaller file.
-    (function () {
-      const v = document.getElementById('demo-video-el');
-      const btn = document.getElementById('demo-video-toggle');
-      if (!v || !btn) return;
-      const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-      const conn = navigator.connection || {};
-      const small = window.innerWidth <= 700 || conn.saveData;
-      const src = small ? './assets/joltrin-barrier-720.mp4' : './assets/joltrin-barrier.mp4';
-      let userPaused = false;
-      const label = (playing) => {
-        document.getElementById('demo-video-label').textContent = playing ? 'Pause' : 'Play';
-        document.getElementById('demo-video-icon').innerHTML = playing ? '&#10074;&#10074;' : '&#9654;';
-        btn.setAttribute('aria-label', playing ? 'Pause the demo video' : 'Play the demo video');
-      };
-      const play = () => { if (!v.getAttribute('src')) v.src = src; return v.play().catch(() => {}); };
-      v.addEventListener('play', () => label(true));
-      v.addEventListener('pause', () => label(false));
-      btn.addEventListener('click', () => {
-        if (v.paused) { userPaused = false; play(); } else { userPaused = true; v.pause(); }
-      });
-      if (reduce || !('IntersectionObserver' in window)) return;
-      window.addEventListener('load', () => {
-        new IntersectionObserver((entries) => {
-          entries.forEach((e) => {
-            if (e.isIntersecting) { if (!userPaused) play(); } else { v.pause(); }
-          });
-        }, { threshold: 0.4 }).observe(v);
-      });
-    })();
+    // The intro video player is about 5 MB of scripts. It starts after the page
+    // has loaded, so it never delays the first paint or the load event.
+    window.addEventListener("load", () => {
+      const frame = document.querySelector('#demo-video iframe[data-src]');
+      if (frame) frame.src = frame.dataset.src;
+    });
 
     // Initialize Lucide Icons
     document.addEventListener("DOMContentLoaded", () => {
diff --git a/docs/assets/joltrin-barrier-720.mp4 b/docs/assets/joltrin-barrier-720.mp4
deleted file mode 100644
index ebddd79fb..000000000
Binary files a/docs/assets/joltrin-barrier-720.mp4 and /dev/null differ
diff --git a/docs/assets/joltrin-barrier-poster-540.jpg b/docs/assets/joltrin-barrier-poster-540.jpg
deleted file mode 100644
index 1684fd299..000000000
Binary files a/docs/assets/joltrin-barrier-poster-540.jpg and /dev/null differ
diff --git a/docs/assets/joltrin-barrier-poster.jpg b/docs/assets/joltrin-barrier-poster.jpg
deleted file mode 100644
index 8bf894815..000000000
Binary files a/docs/assets/joltrin-barrier-poster.jpg and /dev/null differ
diff --git a/docs/assets/joltrin-barrier.mp4 b/docs/assets/joltrin-barrier.mp4
deleted file mode 100644
index 02c3a3959..000000000
Binary files a/docs/assets/joltrin-barrier.mp4 and /dev/null differ
diff --git a/scripts/promo/build.sh b/scripts/promo/build.sh
deleted file mode 100755
index 818e5572a..000000000
--- a/scripts/promo/build.sh
+++ /dev/null
@@ -1,44 +0,0 @@
-#!/usr/bin/env bash
-# Builds the homepage demo video from the real binary.
-#
-#   scripts/promo/build.sh [out-dir]      (default: docs/assets)
-#
-# It builds sop-mcp-server, records what it prints (capture.mjs), draws the
-# scene at 30 fps (render.mjs), and encodes an MP4 at 1080 px and 720 px and two poster sizes. Needs
-# Go, Node with @playwright/test and its Chromium, and ffmpeg.
-set -euo pipefail
-
-root="$(cd "$(dirname "${BASH_SOURCE[0]}")/../.." && pwd)"
-out="${1:-$root/docs/assets}"
-work="$(mktemp -d)"
-trap 'rm -rf "$work"' EXIT
-mkdir -p "$out"
-
-echo "==> build the real binary"
-(cd "$root" && go build -o "$work/sop-mcp-server" ./cmd/sop-mcp-server)
-
-echo "==> capture its real output"
-node "$root/scripts/promo/capture.mjs" "$work/sop-mcp-server" "$work/scene-data.json"
-
-echo "==> draw the frames"
-node "$root/scripts/promo/render.mjs" "$work/scene-data.json" "$work"
-
-echo "==> encode"
-frames="$work/frames/f%05d.jpg"
-# H.264 for every browser and for LinkedIn. yuv420p and faststart so it plays
-# at once on a phone.
-ffmpeg -y -loglevel error -framerate 30 -i "$frames" \
-  -c:v libx264 -preset slow -crf 25 -pix_fmt yuv420p -movflags +faststart -an \
-  "$out/joltrin-barrier.mp4"
-# A 720 px copy for phones, which is about half the size.
-ffmpeg -y -loglevel error -framerate 30 -i "$frames" -vf scale=720:720:flags=lanczos \
-  -c:v libx264 -preset slow -crf 26 -pix_fmt yuv420p -movflags +faststart -an \
-  "$out/joltrin-barrier-720.mp4"
-# Poster: the moment the barrier blocks the action.
-ffmpeg -y -loglevel error -i "$work/frames/f00525.jpg" -vf scale=1080:1080 -q:v 4 "$out/joltrin-barrier-poster.jpg"
-ffmpeg -y -loglevel error -i "$work/frames/f00525.jpg" -vf scale=540:540 -q:v 5 "$out/joltrin-barrier-poster-540.jpg"
-
-for f in joltrin-barrier.mp4 joltrin-barrier-720.mp4 joltrin-barrier-poster.jpg joltrin-barrier-poster-540.jpg; do
-  printf '%-30s %s\n' "$f" "$(du -h "$out/$f" | cut -f1)"
-done
-printf 'duration: %s s\n' "$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$out/joltrin-barrier.mp4")"
diff --git a/scripts/promo/capture.mjs b/scripts/promo/capture.mjs
deleted file mode 100644
index ae4056b66..000000000
--- a/scripts/promo/capture.mjs
+++ /dev/null
@@ -1,51 +0,0 @@
-// Runs the real sop-mcp-server and records what it prints, so the video shows
-// real output and nothing typed in by hand.
-//
-//   node scripts/promo/capture.mjs <path-to-sop-mcp-server> <out.json>
-import { spawn, execFileSync } from 'node:child_process';
-import { writeFileSync } from 'node:fs';
-
-const [bin, out] = process.argv.slice(2);
-if (!bin || !out) {
-  console.error('usage: node scripts/promo/capture.mjs <sop-mcp-server> <out.json>');
-  process.exit(2);
-}
-
-const demoText = execFileSync(bin, ['demo'], { encoding: 'utf8' });
-const demoJSON = JSON.parse(execFileSync(bin, ['demo', '--json'], { encoding: 'utf8' }));
-const version = execFileSync(bin, ['version'], { encoding: 'utf8' }).trim();
-
-// One real execute_step over MCP stdio: the call the agent makes, and the
-// structured block it gets back.
-const blocked = await new Promise((resolve, reject) => {
-  const p = spawn(bin, [], { stdio: ['pipe', 'pipe', 'ignore'] });
-  let buf = '';
-  const waiting = new Map();
-  p.stdout.on('data', (d) => {
-    buf += d;
-    let i;
-    while ((i = buf.indexOf('\n')) >= 0) {
-      const line = buf.slice(0, i);
-      buf = buf.slice(i + 1);
-      if (!line.trim()) continue;
-      const m = JSON.parse(line);
-      if (m.id !== undefined && waiting.has(m.id)) waiting.get(m.id)(m);
-    }
-  });
-  const rpc = (id, method, params) =>
-    new Promise((res) => {
-      waiting.set(id, res);
-      p.stdin.write(JSON.stringify({ jsonrpc: '2.0', id, method, params }) + '\n');
-    });
-  (async () => {
-    await rpc(1, 'initialize', { protocolVersion: '2024-11-05', capabilities: {}, clientInfo: { name: 'promo', version: '0' } });
-    p.stdin.write(JSON.stringify({ jsonrpc: '2.0', method: 'notifications/initialized' }) + '\n');
-    const call = { workflow: 'db-maintenance', trace_id: 'promo-1', step: 'drop_prod_db' };
-    const r = await rpc(2, 'tools/call', { name: 'execute_step', arguments: call });
-    p.kill();
-    resolve({ call, result: r.result.structuredContent });
-  })().catch(reject);
-});
-
-writeFileSync(out, JSON.stringify({ version, demoText, demo: demoJSON, mcp: blocked }, null, 2));
-console.log('captured', version, 'to', out);
diff --git a/scripts/promo/render.mjs b/scripts/promo/render.mjs
deleted file mode 100644
index e6688f00f..000000000
--- a/scripts/promo/render.mjs
+++ /dev/null
@@ -1,34 +0,0 @@
-// Draws the scene at 30 frames per second and encodes it, so the video is the
-// same every time it is built from the same output.
-//
-//   node scripts/promo/render.mjs <scene-data.json> <out-dir> [seconds]
-import { chromium } from '@playwright/test';
-import { readFileSync, mkdirSync, rmSync } from 'node:fs';
-import { execFileSync } from 'node:child_process';
-import { pathToFileURL, fileURLToPath } from 'node:url';
-import path from 'node:path';
-
-const [dataPath, outDir, secs] = process.argv.slice(2);
-if (!dataPath || !outDir) {
-  console.error('usage: node scripts/promo/render.mjs <scene-data.json> <out-dir> [seconds]');
-  process.exit(2);
-}
-const FPS = 30;
-const DURATION = Number(secs || 43);
-const here = path.dirname(fileURLToPath(import.meta.url));
-const frames = path.join(outDir, 'frames');
-rmSync(frames, { recursive: true, force: true });
-mkdirSync(frames, { recursive: true });
-
-const browser = await chromium.launch();
-const page = await browser.newPage({ viewport: { width: 1080, height: 1080 }, deviceScaleFactor: 1 });
-await page.goto(pathToFileURL(path.join(here, 'scene.html')).href);
-await page.evaluate((d) => window.setData(d), JSON.parse(readFileSync(dataPath, 'utf8')));
-const n = Math.round(DURATION * FPS);
-for (let i = 0; i < n; i++) {
-  await page.evaluate((t) => window.render(t), i / FPS);
-  await page.screenshot({ path: path.join(frames, `f${String(i).padStart(5, '0')}.jpg`), type: 'jpeg', quality: 94 });
-  if (i % 150 === 0) process.stdout.write(`frame ${i}/${n}\n`);
-}
-await browser.close();
-console.log('frames done:', n);
diff --git a/scripts/promo/scene.html b/scripts/promo/scene.html
deleted file mode 100644
index 79c0bbee2..000000000
--- a/scripts/promo/scene.html
+++ /dev/null
@@ -1,223 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<title>Joltrin demo scene</title>
-<style>
-  :root {
-    --bg: #07090e; --card: #0b0f17; --line: #22304e; --text: #e2e8f0; --mute: #94a3b8; --dim: #64748b;
-    --green: #34d399; --red: #fb7185; --cyan: #22d3ee; --violet: #a78bfa;
-    --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-    --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
-  }
-  * { box-sizing: border-box; margin: 0; padding: 0; }
-  html, body { width: 1080px; height: 1080px; background: var(--bg); overflow: hidden; }
-  #stage { position: relative; width: 1080px; height: 1080px; font-family: var(--sans); color: var(--text);
-    background:
-      radial-gradient(900px 600px at 85% -10%, rgba(16,185,129,.16), transparent 60%),
-      radial-gradient(700px 500px at -10% 110%, rgba(139,92,246,.12), transparent 60%),
-      var(--bg); }
-  .layer { position: absolute; opacity: 0; will-change: opacity; }
-
-  /* hook */
-  #hook { inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 90px; }
-  #hook h1 { font-size: 84px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; }
-  #hook h2 { margin-top: 56px; font-size: 64px; line-height: 1.12; font-weight: 700; color: var(--mute); letter-spacing: -.01em; }
-  #hook em { font-style: normal; color: var(--red); }
-
-  /* brand */
-  #brand { left: 60px; top: 44px; display: flex; align-items: center; gap: 16px; font-weight: 800; font-size: 40px; letter-spacing: -.01em; }
-  #brand img { width: 48px; height: 48px; }
-  #brand span.tag { font-weight: 600; font-size: 24px; color: var(--mute); margin-left: 8px; }
-
-  /* terminal */
-  #term { left: 60px; top: 130px; width: 960px; height: 600px; background: var(--card); border: 2px solid var(--line);
-    border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
-  #term .bar { height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 22px; border-bottom: 2px solid var(--line); background: #0e1422; }
-  #term .dot { width: 14px; height: 14px; border-radius: 50%; background: #334155; }
-  #term .title { margin-left: 12px; font: 600 22px var(--mono); color: var(--dim); }
-  #lines { position: absolute; left: 0; right: 0; top: 54px; bottom: 76px; padding: 20px 28px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
-    font: 500 29px/1.4 var(--mono); }
-  #lines .ln { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.4em; }
-  .c-agent { color: var(--cyan); } .c-step { color: #f8fafc; } .c-red { color: var(--red); font-weight: 800; }
-  .c-green { color: var(--green); font-weight: 800; } .c-mute { color: var(--mute); } .c-dim { color: var(--dim); }
-  #tracebar { position: absolute; left: 0; right: 0; bottom: 0; height: 76px; border-top: 2px solid var(--line); background: #0e1422; display: flex; align-items: center; gap: 14px; padding: 0 28px; font: 600 24px var(--mono); color: var(--dim); }
-  #tracebar .chip { padding: 6px 14px; border-radius: 10px; border: 2px solid rgba(52,211,153,.55); color: var(--green); background: rgba(52,211,153,.1); font-size: 23px; }
-  #tracebar .empty { color: var(--dim); font-weight: 500; }
-
-  /* json panel */
-  #json { left: 60px; top: 130px; width: 960px; height: 600px; background: #0a0e18; border: 2px solid rgba(251,113,133,.55); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
-  #json .bar { height: 54px; display: flex; align-items: center; padding: 0 24px; border-bottom: 2px solid rgba(251,113,133,.35); background: #130d14; font: 700 23px var(--mono); color: var(--red); }
-  #json pre { position: absolute; left: 0; right: 0; top: 54px; bottom: 0; padding: 14px 28px; font: 500 29px/1.42 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--mute); }
-  #json .row { opacity: 0; }
-  #json .key { color: var(--violet); } #json .hl { background: rgba(251,113,133,.14); border-radius: 6px; padding: 0 6px; margin: 0 -6px; color: #fff; }
-  #json .hlg { background: rgba(52,211,153,.14); border-radius: 6px; padding: 0 6px; margin: 0 -6px; color: #fff; }
-  #json .faint { opacity: .5; }
-
-  /* captions */
-  #cap { left: 60px; right: 60px; top: 770px; height: 230px; }
-  .cap { position: absolute; inset: 0; opacity: 0; font-size: 50px; line-height: 1.16; font-weight: 800; letter-spacing: -.015em; }
-  .cap em { font-style: normal; color: var(--green); } .cap em.r { color: var(--red); }
-  #foot, #foot2 { left: 60px; bottom: 28px; font: 500 22px var(--mono); color: var(--dim); }
-
-  /* end card */
-  #end { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 80px; }
-  #end img { width: 120px; height: 120px; }
-  #end .name { margin-top: 24px; font-size: 96px; font-weight: 800; letter-spacing: -.03em; }
-  #end .tagline { margin-top: 36px; font-size: 54px; line-height: 1.16; font-weight: 700; color: var(--text); max-width: 900px; }
-  #end .tagline em { font-style: normal; color: var(--green); }
-  #end .url { margin-top: 56px; font: 800 52px var(--mono); color: var(--green); }
-  #end .try { margin-top: 26px; font: 500 28px var(--mono); color: var(--mute); }
-</style>
-</head>
-<body>
-<div id="stage">
-  <div id="hook" class="layer">
-    <h1 id="h1">AI agents can take<br>real actions.</h1>
-    <h2 id="h2">What happens when<br>the action is <em>wrong</em>?</h2>
-  </div>
-
-  <div id="brand" class="layer"><img src="../../demo/logo-mark.png" alt=""><span>Joltrin</span></div>
-
-  <div id="term" class="layer">
-    <div class="bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="title">agent session</span></div>
-    <div id="lines"></div>
-    <div id="tracebar"><span>trace</span><span id="chips"></span></div>
-  </div>
-
-  <div id="json" class="layer">
-    <div class="bar">execute_step returned: blocked</div>
-    <pre id="jsonbody"></pre>
-  </div>
-
-  <div id="cap" class="layer" style="opacity:1">
-    <div class="cap" id="c1">An agent says the backup is fine and <em class="r">proposes dropping production.</em></div>
-    <div class="cap" id="c2">Joltrin checks the action against the <em>recorded trace</em>, not the agent's claim.</div>
-    <div class="cap" id="c3"><em class="r">Blocked</em> before it commits.</div>
-    <div class="cap" id="c4">The agent gets structured feedback: <em>what is missing</em> and <em>which step establishes it</em>.</div>
-    <div class="cap" id="c5">It runs those steps. Each one is checked, then <em>recorded</em>.</div>
-    <div class="cap" id="c6">Same action. Now <em>allowed</em>, because the evidence exists.</div>
-  </div>
-  <div id="foot" class="layer">Real output from <b>sop-mcp-server demo</b></div>
-  <div id="foot2" class="layer">Real MCP response from <b>sop-mcp-server</b> (message field omitted)</div>
-
-  <div id="end" class="layer">
-    <img src="../../demo/logo-mark.png" alt="">
-    <div class="name">Joltrin</div>
-    <div class="tagline">Put a <em>safety barrier</em> between AI agents and irreversible actions.</div>
-    <div class="url">joltrinhq.com</div>
-    <div class="try">$ sop-mcp-server demo</div>
-  </div>
-</div>
-
-<script>
-  // Everything on screen is a pure function of time, so a frame can be drawn for
-  // any t. The text comes from window.DATA, which scripts/promo/capture.mjs
-  // fills from the real binary.
-  var DATA = null, DURATION = 43;
-  var $ = function (id) { return document.getElementById(id); };
-  var clamp = function (x) { return Math.max(0, Math.min(1, x)); };
-  var fade = function (t, a, b, f) { f = f || 0.3; return clamp((t - a) / f) * clamp((b - t) / f); };
-
-  // [segments], start time, characters per second
-  var EVENTS = [];
-  function buildEvents() {
-    var steps = DATA.demo.steps, trace = DATA.demo.trace;
-    var pad = function (s) { return ('  ' + s + '                 ').slice(0, 2 + 17); };
-    var blocked = steps[0], take = steps[1], validate = steps[2], drop = steps[3];
-    EVENTS = [
-      { segs: [['agent: "backup looks fine, dropping prod now"', 'c-agent']], at: 4.2, cps: 38 },
-      { segs: [['joltrin: checking the recorded trace...', 'c-agent']], at: 9.0, cps: 60, until: 13.2, pulse: true },
-      { segs: [[pad(blocked.step), 'c-step'], ['BLOCKED', 'c-red'], ['  ' + blocked.reason, 'c-mute']], at: 13.3, cps: 80, chips: 0 },
-      { blank: true, at: 27.7 },
-      { segs: [[take.Say || 'agent: takes a real backup first, then validates it', 'c-agent']], at: 27.8, cps: 45 },
-      { segs: [[pad(take.step), 'c-step'], ['ALLOWED', 'c-green']], at: 29.3, cps: 60, chips: 1 },
-      { segs: [[pad(validate.step), 'c-step'], ['ALLOWED', 'c-green']], at: 31.2, cps: 60, chips: 2 },
-      { blank: true, at: 33.7 },
-      { segs: [[drop.Say || 'agent: backup is validated, retrying the drop', 'c-agent']], at: 33.8, cps: 45 },
-      { segs: [[pad(drop.step), 'c-step'], ['ALLOWED', 'c-green']], at: 35.7, cps: 60, chips: 3 },
-      { blank: true, at: 36.9 },
-      { segs: [['trace: [' + trace.join(' ') + ']', 'c-dim']], at: 37.0, cps: 70 }
-    ];
-    // The agent lines are the program's own narration. They are in the real text
-    // output, so read them from there rather than repeating them here.
-    var says = DATA.demoText.split('\n').filter(function (l) { return l.indexOf('agent: ') === 0; });
-    EVENTS[0].segs[0][0] = says[0]; EVENTS[4].segs[0][0] = says[1]; EVENTS[8].segs[0][0] = says[2];
-    // JSON rows
-    var b = DATA.mcp.result.blocked, rows = [];
-    var q = function (v) { return JSON.stringify(v); };
-    var line = function (k, v, cls) { return '<span class="row ' + (cls || '') + '">  <span class="key">"' + k + '"</span>: ' + v + ',\n</span>'; };
-    rows.push('<span class="row">{\n</span>');
-    rows.push(line('blocked_by', q(b.blocked_by), 'hl'));
-    rows.push(line('missing_state', q(b.missing_state), 'hl'));
-    rows.push(line('established_by_steps', q(b.established_by_steps), 'hlg'));
-    rows.push(line('next', q(b.next), 'hlg'));
-    rows.push(line('attempts', q(b.attempts), ''));
-    rows.push(line('why', q(b.why), 'faint'));
-    rows.push('<span class="row">}</span>');
-    $('jsonbody').innerHTML = rows.join('');
-  }
-
-  function renderSegs(el, segs, n) {
-    var html = '', left = n;
-    segs.forEach(function (s) {
-      if (left <= 0) return;
-      var txt = s[0].slice(0, left); left -= s[0].length;
-      var esc = txt.replace(/&/g, '&amp;').replace(/</g, '&lt;');
-      html += '<span class="' + s[1] + '">' + esc + '</span>';
-    });
-    el.innerHTML = html;
-  }
-
-  var built = false;
-  window.setData = function (d) { DATA = d; buildEvents(); built = false; };
-
-  window.render = function (t) {
-    if (!DATA) return;
-    var showMain = t >= 3.5 && t < 38.9;
-    var op = function (el, v) { el.style.opacity = v.toFixed(3); };
-
-    op($('hook'), fade(t, 0.15, 3.4, 0.35));
-    $('h2').style.opacity = clamp((t - 1.3) / 0.45);
-    $('h1').style.transform = 'translateY(' + (1 - clamp(t / 0.6)) * 14 + 'px)';
-
-    var mainOp = fade(t, 3.5, 38.9, 0.4);
-    var jOp = fade(t, 19.2, 27.4, 0.35);
-    op($('brand'), mainOp); op($('foot'), mainOp * (1 - jOp)); op($('foot2'), mainOp * jOp);
-    op($('term'), mainOp);
-    op($('json'), jOp);
-
-    // terminal lines
-    var host = $('lines');
-    if (!built) { host.innerHTML = ''; EVENTS.forEach(function () { var d = document.createElement('div'); d.className = 'ln'; host.appendChild(d); }); built = true; }
-    var chips = 0;
-    EVENTS.forEach(function (e, i) {
-      var el = host.children[i];
-      if (t < e.at || (e.until && t >= e.until)) { el.style.display = 'none'; return; }
-      el.style.display = '';
-      if (e.blank) { el.innerHTML = '&nbsp;'; return; }
-      var total = e.segs.reduce(function (a, s) { return a + s[0].length; }, 0);
-      var n = Math.min(total, Math.floor((t - e.at) * e.cps));
-      renderSegs(el, e.segs, n);
-      if (e.pulse) el.style.opacity = (0.65 + 0.35 * Math.sin(t * 8)).toFixed(3);
-      if (n >= total && e.chips !== undefined) chips = Math.max(chips, e.chips);
-    });
-    // trace chips
-    var steps = DATA.demo.trace, ch = $('chips');
-    ch.innerHTML = chips === 0 ? '<span class="empty">[ empty ]</span>' : steps.slice(0, chips).map(function (s) { return '<span class="chip">' + s + '</span>'; }).join(' ');
-
-
-    // json rows appear one by one
-    var rows = $('jsonbody').children;
-    for (var i = 0; i < rows.length; i++) rows[i].style.opacity = clamp((t - (19.7 + i * 0.55)) / 0.2).toFixed(3);
-
-    // captions
-    var CAPS = [['c1', 3.6, 8.7], ['c2', 8.8, 13.0], ['c3', 13.1, 19.1], ['c4', 19.3, 27.5], ['c5', 27.6, 33.6], ['c6', 33.7, 38.8]];
-    CAPS.forEach(function (c) { op($(c[0]), fade(t, c[1], c[2], 0.25)); });
-
-    op($('end'), fade(t, 39.1, DURATION + 1, 0.5));
-    $('end').querySelector('.tagline').style.transform = 'translateY(' + (1 - clamp((t - 39.3) / 0.6)) * 16 + 'px)';
-  };
-</script>
-</body>
-</html>
diff --git a/tests/homepage.spec.ts b/tests/homepage.spec.ts
index e9fde4321..279c7e8a3 100644
--- a/tests/homepage.spec.ts
+++ b/tests/homepage.spec.ts
@@ -26,8 +26,9 @@ test.describe('Homepage', () => {
   test('hero shows the blocked then allowed sequence', async ({ page }) => {
     await page.goto('/', { waitUntil: 'domcontentloaded' });
     const ex = page.locator('#hero-example');
-    await expect(ex).toContainText('backup_validated');
-    await expect(ex.getByText('BLOCKED')).toHaveCount(1);
+    await expect(ex).toContainText('backup_validated missing');
+    await expect(ex).toContainText('backup_taken missing');
+    await expect(ex.getByText('BLOCKED')).toHaveCount(2);
     await expect(ex.getByText('ALLOWED')).toHaveCount(3);
   });
 
@@ -58,68 +59,13 @@ test.describe('Homepage', () => {
     }
   });
 
-  test('the demo video is in the hero, silent, with a poster, and loads nothing until the page has', async ({ page }) => {
-    // Record what the video element looks like when the document has parsed,
-    // which is before the page's load event.
-    await page.addInitScript(() => {
-      document.addEventListener('DOMContentLoaded', () => {
-        const v = document.getElementById('demo-video-el');
-        (window as any).__videoAtParse = { src: v?.getAttribute('src'), preload: v?.getAttribute('preload') };
-      });
-    });
-    await page.goto('/', { waitUntil: 'load' });
-    const video = page.locator('#demo-video video');
-    await expect(video).toHaveCount(1);
-    await expect(video).toHaveJSProperty('muted', true);
-    await expect(video).toHaveAttribute('playsinline', '');
-    await expect(video).toHaveAttribute('preload', 'none');
-    await expect(video).toHaveAttribute('poster', /joltrin-barrier-poster-540\.jpg/);
-    await expect(video).toHaveAttribute('aria-label', /43 second demo/);
-    const atParse = await page.evaluate(() => (window as any).__videoAtParse);
-    expect(atParse, 'the video must not have a source when the document is parsed').toEqual({ src: null, preload: 'none' });
-    // It is part of the hero: above the first content section, not buried below it.
-    const videoY = (await video.boundingBox())!.y;
-    const barrierY = (await page.locator('#verification-barrier').boundingBox())!.y;
-    expect(videoY).toBeLessThan(barrierY);
-  });
-
-  test('the demo video plays when it is on screen and has a working Pause and Play button', async ({ page }) => {
-    await page.goto('/', { waitUntil: 'load' });
-    const video = page.locator('#demo-video-el');
-    const toggle = page.locator('#demo-video-toggle');
-    // On a phone the video sits below the headline, so it starts once scrolled to.
-    await video.scrollIntoViewIfNeeded();
-    await expect.poll(() => video.evaluate((v: HTMLVideoElement) => !v.paused), { timeout: 15000 }).toBe(true);
-    await expect(toggle).toContainText('Pause');
-    await toggle.click();
-    await expect.poll(() => video.evaluate((v: HTMLVideoElement) => v.paused)).toBe(true);
-    await expect(toggle).toContainText('Play');
-    await expect(toggle).toHaveAttribute('aria-label', /Play the demo video/);
-  });
-
-  test('a visitor who prefers reduced motion gets the poster and no autoplay', async ({ page }) => {
-    await page.emulateMedia({ reducedMotion: 'reduce' });
-    await page.goto('/', { waitUntil: 'load' });
-    await page.waitForTimeout(1500);
-    const video = page.locator('#demo-video-el');
-    await expect(video).toHaveJSProperty('paused', true);
-    expect(await video.getAttribute('src')).toBeNull();
-    // They can still start it.
-    await page.locator('#demo-video-toggle').click();
-    await expect.poll(() => video.evaluate((v: HTMLVideoElement) => !v.paused), { timeout: 15000 }).toBe(true);
-  });
-
-  test('the video files and posters the page names all exist and are small', async ({ request }) => {
-    const sizes: Record<string, number> = {
-      '/assets/joltrin-barrier.mp4': 2_500_000,
-      '/assets/joltrin-barrier-720.mp4': 1_500_000,
-      '/assets/joltrin-barrier-poster-540.jpg': 80_000,
-    };
-    for (const [url, max] of Object.entries(sizes)) {
-      const res = await request.get(url);
-      expect(res.status(), url).toBe(200);
-      expect((await res.body()).length, `${url} should stay under ${max} bytes`).toBeLessThan(max);
-    }
+  test('intro video sits below the hero and autoplays muted', async ({ page }) => {
+    await page.goto('/', { waitUntil: 'domcontentloaded' });
+    const frame = page.locator('iframe[title="Joltrin intro video"]');
+    await expect(frame).toHaveAttribute('src', /youtube-nocookie\.com\/embed\/F0jYkBHJluI\?.*autoplay=1.*mute=1/);
+    const frameY = (await frame.boundingBox())!.y;
+    const heroY = (await page.getByRole('heading', { level: 1 }).boundingBox())!.y;
+    expect(frameY).toBeGreaterThan(heroY);
   });
 
   test('header has a Watch demo button that jumps to the video', async ({ page }) => {
@@ -127,7 +73,7 @@ test.describe('Homepage', () => {
     const btn = page.locator('#watch-demo-btn');
     await expect(btn).toBeVisible();
     await expect(btn).toHaveAttribute('href', '#demo-video');
-    await expect(page.locator('#demo-video video')).toHaveCount(1);
+    await expect(page.locator('#demo-video iframe')).toHaveCount(1);
   });
 
   test('explains how to test the barrier with your own AI agent', async ({ page }) => {