diff --git a/README.md b/README.md
index 12f3a7a1e..fa1226d65 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="https://youtu.be/F0jYkBHJluI">
-    <img src="docs/assets/joltrin-demo.gif" alt="Joltrin demo. Click to watch the video." width="760" />
+  <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>
 </p>
 
diff --git a/demo/index.html b/demo/index.html
index 8b8330c5f..cf58b420a 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>
 
-        <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>
+        <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>
-          <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>
+          <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>
       </div>
     </section>
 
@@ -1763,12 +1763,39 @@ <h4 class="font-mono text-xs uppercase font-bold text-white mb-3">Open Source &a
   <script>
     let selectedBenchOps = 5000;
 
-    // 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;
-    });
+    // 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);
+      });
+    })();
 
     // Initialize Lucide Icons
     document.addEventListener("DOMContentLoaded", () => {
diff --git a/docs/assets/joltrin-barrier-720.mp4 b/docs/assets/joltrin-barrier-720.mp4
new file mode 100644
index 000000000..ebddd79fb
Binary files /dev/null and b/docs/assets/joltrin-barrier-720.mp4 differ
diff --git a/docs/assets/joltrin-barrier-poster-540.jpg b/docs/assets/joltrin-barrier-poster-540.jpg
new file mode 100644
index 000000000..1684fd299
Binary files /dev/null and b/docs/assets/joltrin-barrier-poster-540.jpg differ
diff --git a/docs/assets/joltrin-barrier-poster.jpg b/docs/assets/joltrin-barrier-poster.jpg
new file mode 100644
index 000000000..8bf894815
Binary files /dev/null and b/docs/assets/joltrin-barrier-poster.jpg differ
diff --git a/docs/assets/joltrin-barrier.mp4 b/docs/assets/joltrin-barrier.mp4
new file mode 100644
index 000000000..02c3a3959
Binary files /dev/null and b/docs/assets/joltrin-barrier.mp4 differ
diff --git a/scripts/promo/build.sh b/scripts/promo/build.sh
new file mode 100755
index 000000000..818e5572a
--- /dev/null
+++ b/scripts/promo/build.sh
@@ -0,0 +1,44 @@
+#!/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
new file mode 100644
index 000000000..ae4056b66
--- /dev/null
+++ b/scripts/promo/capture.mjs
@@ -0,0 +1,51 @@
+// 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
new file mode 100644
index 000000000..e6688f00f
--- /dev/null
+++ b/scripts/promo/render.mjs
@@ -0,0 +1,34 @@
+// 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
new file mode 100644
index 000000000..79c0bbee2
--- /dev/null
+++ b/scripts/promo/scene.html
@@ -0,0 +1,223 @@
+<!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 279c7e8a3..e9fde4321 100644
--- a/tests/homepage.spec.ts
+++ b/tests/homepage.spec.ts
@@ -26,9 +26,8 @@ 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 missing');
-    await expect(ex).toContainText('backup_taken missing');
-    await expect(ex.getByText('BLOCKED')).toHaveCount(2);
+    await expect(ex).toContainText('backup_validated');
+    await expect(ex.getByText('BLOCKED')).toHaveCount(1);
     await expect(ex.getByText('ALLOWED')).toHaveCount(3);
   });
 
@@ -59,13 +58,68 @@ test.describe('Homepage', () => {
     }
   });
 
-  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('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('header has a Watch demo button that jumps to the video', async ({ page }) => {
@@ -73,7 +127,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 iframe')).toHaveCount(1);
+    await expect(page.locator('#demo-video video')).toHaveCount(1);
   });
 
   test('explains how to test the barrier with your own AI agent', async ({ page }) => {