diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index fc687ac94..e03411867 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -672,6 +672,34 @@ jobs:
           GROWTH_FORM_POLICY: growth_v1
           WEBSITE_E2E_MODE: production
         run: npx nx e2e website --skip-nx-cache --grep "public copy boundary|canonical policy surface"
+      # Spec §8: scroll-craft's own harness walks the homepage's pinned stage
+      # act and fails on dead scroll outside the declared hold and on cues that
+      # never peak. The Nx build lands in dist/apps/website with a rewritten
+      # next.config, which only `nx serve --configuration=production` can
+      # start, and the serve's own build dependency is the one build here:
+      # it runs with --skip-nx-cache (the earlier e2e builds wrote no cache
+      # entry either) so it emits dist rather than restoring it. The content
+      # symlink, which mirrors playwright.config.ts's production mode, is
+      # added only after the server answers, so it lands on the dist the
+      # build has finished writing rather than on one it is about to replace.
+      - name: Stage scroll verification (scroll-craft harness)
+        env:
+          GROWTH_FORM_POLICY: growth_v1
+          SCROLLCRAFT_CHROME: /usr/bin/google-chrome
+        run: |
+          command -v ffmpeg > /dev/null || (sudo apt-get update && sudo apt-get install -y ffmpeg)
+          (npx nx serve website --configuration=production --port=4308 --skip-nx-cache > /tmp/next-start.log 2>&1 &)
+          for i in $(seq 1 60); do curl -sf http://127.0.0.1:4308/ > /dev/null && break; sleep 2; done
+          curl -sf http://127.0.0.1:4308/ > /dev/null || { cat /tmp/next-start.log; exit 1; }
+          ln -sfn ../../../apps/website/content dist/apps/website/content
+          node apps/website/e2e/scroll-craft/verify-home.mjs --url http://127.0.0.1:4308 --out dist/stage-shots
+      - name: Upload stage contact sheets
+        if: always()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: stage-shots
+          path: dist/stage-shots/**/sheet.png
+          if-no-files-found: ignore
       # The production-smoke spec is testIgnore'd outside PRODUCTION_SMOKE mode,
       # so a module-load error in it is invisible until the post-merge Production
       # smoke job runs against main — too late to gate a PR. Collect it here:
diff --git a/apps/website/e2e/home-stage.spec.ts b/apps/website/e2e/home-stage.spec.ts
new file mode 100644
index 000000000..173481335
--- /dev/null
+++ b/apps/website/e2e/home-stage.spec.ts
@@ -0,0 +1,149 @@
+import { test, expect, type Page } from '@playwright/test';
+
+/** Drives the pinned act: the section is 6 viewports tall; scroll to a fraction of its travel. */
+async function scrollAct(page: Page, p: number) {
+  await page.evaluate((frac) => {
+    const el = document.querySelector('[data-stage-act]') as HTMLElement;
+    const top = el.getBoundingClientRect().top + window.scrollY;
+    window.scrollTo({
+      top: top + (el.offsetHeight - window.innerHeight) * frac,
+      behavior: 'instant',
+    });
+  }, p);
+  // The engine writes `--sc-p` and the cue opacities from `scrollY` on ONE
+  // requestAnimationFrame after the scroll event (the 0.18/frame lerp applies
+  // to <video> playheads only; this page has none). The scroll event lands in
+  // the frame after scrollTo, so two nested frames are past the engine's write.
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve) =>
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+      )
+  );
+}
+const progress = (page: Page) =>
+  page.evaluate(() =>
+    parseFloat(
+      (
+        document.querySelector('[data-stage-act]') as HTMLElement
+      ).style.getPropertyValue('--sc-p')
+    )
+  );
+
+test.describe('homepage stage', () => {
+  test('stills render first and the act upgrades on desktop', async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await page.goto('/');
+    const act = page.locator('[data-stage-act]');
+    await expect(act).toHaveAttribute('data-sc-span', '6');
+    await expect(act.locator('iframe')).toHaveAttribute(
+      'src',
+      'https://demo.threadplane.ai/stage?t=0'
+    );
+    await expect(act.locator('.stage-pin')).toHaveCSS('position', 'sticky');
+    await expect(page.getByTestId('stage-still-beat')).toHaveCount(0);
+    // This runs well inside StageAct's 8 s READY_TIMEOUT_MS (after which the
+    // act is swapped for the stills and [data-stage-act] disappears).
+    // The engine's layout() sets the act's inline height to span × 100vh.
+    await expect(page.locator('html')).toHaveClass(/sc-ready/);
+    const heights = await page.evaluate(() => ({
+      act: (document.querySelector('[data-stage-act]') as HTMLElement)
+        .offsetHeight,
+      viewport: window.innerHeight,
+    }));
+    expect(Math.abs(heights.act - 6 * heights.viewport)).toBeLessThanOrEqual(4);
+  });
+
+  test('scroll drives the act: progress, cues, and the declared hold', async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await page.goto('/');
+    // With the rAF settle this takes ~1-2 s, well inside StageAct's 8 s
+    // READY_TIMEOUT_MS after which the act is swapped for the stills.
+    await expect(page.locator('html')).toHaveClass(/sc-ready/);
+    await scrollAct(page, 0.05);
+    expect(await progress(page)).toBeGreaterThan(0);
+    const stream = page
+      .getByTestId('stage-rail-beat')
+      .and(page.locator('[data-beat="stream"]'));
+    await expect(stream).toHaveCSS('opacity', '1');
+    // Inside the approve hold: approve spans 0.4167..0.8167 of the act and the
+    // hold is 35–70% of it (0.5567..0.6967). 0.68 also sits on the last hold
+    // line's plateau (its cue opens at 0.65, full from ~0.678).
+    await scrollAct(page, 0.68);
+    await expect(page.locator('[data-stage-act]')).toHaveAttribute(
+      'data-sc-verify-hold',
+      'true'
+    );
+    await expect(page.getByTestId('stage-rail-hold').last()).toHaveCSS(
+      'opacity',
+      /^(0\.[5-9]\d*|1)$/
+    );
+    await scrollAct(page, 0.8);
+    await expect(page.locator('[data-stage-act]')).not.toHaveAttribute(
+      'data-sc-verify-hold',
+      'true'
+    );
+    await scrollAct(page, 1);
+    await expect(
+      page
+        .getByTestId('stage-rail-beat')
+        .and(page.locator('[data-beat="render"]'))
+    ).toHaveCSS('opacity', '1');
+  });
+
+  test('the frame answers and the verify state changes between positions', async ({
+    page,
+  }) => {
+    test.skip(
+      process.env['STAGE_LIVE_FRAME'] !== 'true',
+      'needs the deployed demo /stage (set STAGE_LIVE_FRAME=true after #1030 promotes)'
+    );
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await page.goto('/');
+    const act = page.locator('[data-stage-act]');
+    // After READY_TIMEOUT_MS (8 s) StageAct swaps the act for the stills and
+    // [data-stage-act] is gone, so a `ready` that never arrives fails here,
+    // on the state attribute, rather than later on a vanished locator.
+    await expect(act).toHaveAttribute('data-state', 'ready', {
+      timeout: 8_000,
+    });
+    // `data-state="ready"` only proves the iframe answered; the engine's
+    // layout (html.sc-ready) is what makes the act 6 viewports tall.
+    await expect(page.locator('html')).toHaveClass(/sc-ready/);
+    // Once ready arrived the fallback timer is cleared, so the waits below
+    // only cover the live frame's own latency.
+    await scrollAct(page, 0.1);
+    await expect(act).toHaveAttribute('data-sc-verify-state', /^stream:\d+$/, {
+      timeout: 10_000,
+    });
+    const a = await act.getAttribute('data-sc-verify-state');
+    // Inside the approve hold: approve spans 0.4167..0.8167 of the act and the
+    // hold is 35–70% of it (0.5567..0.6967). 0.68 also sits on the last hold
+    // line's plateau (its cue opens at 0.65, full from ~0.678).
+    await scrollAct(page, 0.68);
+    await expect(act).toHaveAttribute('data-sc-verify-state', /^pause:\d+$/, {
+      timeout: 10_000,
+    });
+    expect(await act.getAttribute('data-sc-verify-state')).not.toBe(a);
+    await scrollAct(page, 1);
+    await expect(act).toHaveAttribute('data-sc-verify-state', /^render:\d+$/, {
+      timeout: 10_000,
+    });
+  });
+
+  test('phones and reduced motion get the stills', async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto('/');
+    await expect(page.getByTestId('stage-still-beat')).toHaveCount(4);
+    await expect(page.locator('[data-stage-act]')).toHaveCount(0);
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await page.emulateMedia({ reducedMotion: 'reduce' });
+    await page.goto('/');
+    await expect(page.getByTestId('stage-still-beat')).toHaveCount(4);
+    await expect(page.locator('[data-stage-act]')).toHaveCount(0);
+  });
+});
diff --git a/apps/website/e2e/scroll-craft/README.md b/apps/website/e2e/scroll-craft/README.md
new file mode 100644
index 000000000..4d784df60
--- /dev/null
+++ b/apps/website/e2e/scroll-craft/README.md
@@ -0,0 +1,87 @@
+# scroll-craft verification of the homepage stage
+
+The homepage carries one pinned scroll act (`[data-stage-act]`, spec §8 of
+`docs/superpowers/specs/2026-09-05-homepage-live-stage-design.md`). This
+directory runs scroll-craft's own harness against a production build of the
+site and fails CI on what the harness reports as defects.
+
+## What it verifies
+
+`shoot.mjs` walks the page's scroll in eight positions per act, screenshots
+each, and reports:
+
+- **DEAD SCROLL** between two sample positions whose visible state signature
+  did not change. The stage publishes its state in `data-sc-verify-state` and
+  declares its authored hold with `data-sc-verify-hold="true"`, so the pinned
+  interrupt inside the Approve beat is exempt and everything else is not.
+- **CUES THAT NEVER PEAK**: a `[data-sc-cue]` line that never reaches full
+  opacity anywhere on the page.
+- **Contrast** of every cue line at its worst frame (fail below 3:1, thin
+  between 3:1 and 4.5:1). Contrast is reported, not gated.
+
+`verify-home.mjs` runs the harness per mode and exits 1 on a non-zero harness
+exit, on a `DEAD SCROLL between:` line, or on a `CUES THAT NEVER PEAK:` line.
+The modes are desktop 1440×900, phone 390×844, and reduced motion; the default
+(`--modes desktop`) runs the desktop pass only, see below.
+
+The harness sees the declared hold only while the frame answers: it reads
+`data-sc-verify-hold` from the elements that carry `data-sc-verify-state`, and
+the publisher writes that state from the frame's `{ applied, phase }` reply.
+Before the frame is ready the act shows the poster and the check runs on the
+rail cues alone, which still move through the hold (the hold lines fade in),
+so a poster-only run is a weaker check, not a false failure.
+
+### The phone and reduced-motion passes
+
+Below 1024px and under reduced motion the page renders the four stacked
+stills — no pinned act, no engine. The vendored harness waits for the engine's
+`html.sc-ready` signal before it samples, so on the stills page those passes
+time out (`waiting for locator('html.sc-ready')`) rather than report. And a
+page with no `[data-sc-act]` gives the harness one sample at 100%, so even a
+page that raised the signal would produce a one-frame sheet and no cue or
+contrast lines. The two modes stay defined for a page that changes either of
+those facts; run them with `--modes desktop,phone,reduced`.
+
+## Running it locally
+
+Build and serve the production site on a free port, then verify:
+
+```bash
+(npx nx serve website --configuration=production --port=4308 --skip-nx-cache &)
+until curl -sf http://127.0.0.1:4308/ > /dev/null; do sleep 2; done
+ln -sfn ../../../apps/website/content dist/apps/website/content
+node apps/website/e2e/scroll-craft/verify-home.mjs --url http://127.0.0.1:4308 --out dist/stage-shots
+```
+
+The serve's own build dependency emits `dist/apps/website`; there is no
+separate build step. It skips the Nx cache on purpose so that build is a real
+one rather than a cache restore, and the `content` symlink is added only once
+the server answers, so it lands on the directory the build has finished
+writing rather than on one the build is still about to replace. Kill the
+backgrounded serve when you are done (`lsof -iTCP:4308 -sTCP:LISTEN -n` names
+the process).
+
+The Nx build lands in `dist/apps/website` with a rewritten `next.config`, so a
+bare `next start` cannot serve it; `nx serve --configuration=production` can.
+The `content` symlink mirrors `playwright.config.ts`'s production mode.
+
+Each mode writes numbered frames, `report.json`, and a tiled `sheet.png` to
+`<out>/<mode>/` (`dist/stage-shots/desktop/sheet.png` and so on). The contact
+sheet needs `ffmpeg` on the PATH; without it the frames and the report are
+still written and the harness prints `contact sheet skipped`.
+
+The harness uses an installed Chrome (`SCROLLCRAFT_CHROME` overrides the
+auto-detected path) and resolves `playwright-core` from the repository root's
+`package.json`, so run it from the repository root.
+
+In CI the `website-e2e` job runs the desktop pass against the production
+build and uploads every `sheet.png` as the `stage-shots` artifact.
+
+## Provenance
+
+`shoot.mjs` is vendored unmodified from scroll-craft at commit `0b81622`
+(`plugins/nateherk-design/skills/scroll-craft/scripts/shoot.mjs`), the same
+pinned commit as the engine in `apps/website/src/vendor/scrollcraft/`. It is
+MIT licensed; the licence is `apps/website/src/vendor/scrollcraft/LICENSE`. It
+is excluded from lint (root `eslint.config.mjs`, next to the engine) and must
+not be reformatted, so that a byte comparison against upstream stays possible.
diff --git a/apps/website/e2e/scroll-craft/shoot.mjs b/apps/website/e2e/scroll-craft/shoot.mjs
new file mode 100644
index 000000000..b291d75b7
--- /dev/null
+++ b/apps/website/e2e/scroll-craft/shoot.mjs
@@ -0,0 +1,655 @@
+#!/usr/bin/env node
+/**
+ * scrollcraft verification harness: shoot the page's own scroll.
+ *
+ * Walks the page in N evenly spaced scroll positions, waits for the scrub video
+ * to actually settle at each one, screenshots it, and reports what the engine
+ * thinks is on screen. Then tiles the frames into one contact sheet, because a
+ * dead middle only shows up in contiguous frames: any single screenshot is a
+ * frame the transition may not survive.
+ *
+ *   node shoot.mjs --url http://localhost:4500 --out lab/shots --steps 12
+ *   node shoot.mjs --url ... --width 375 --height 812 --out lab/mobile
+ *   node shoot.mjs --url ... --reduced-motion --out lab/reduced
+ *
+ * Uses the INSTALLED Chrome, not bundled Chromium: Chromium ships without the
+ * h264 decoder, so every scrub clip would silently fail to paint and the run
+ * would "pass" against posters.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { createRequire } from "node:module";
+
+// The skill lives outside the project it is building, so resolve playwright
+// from the BUILD project's node_modules (cwd), not from next to this file.
+// Run `npm i playwright-core` in the build project once.
+let chromium;
+try {
+  ({ chromium } = createRequire(path.join(process.cwd(), "package.json"))("playwright-core"));
+} catch {
+  console.error("playwright-core not found. Run this in the build project after:\n  npm i playwright-core");
+  process.exit(1);
+}
+
+const argv = process.argv.slice(2);
+const arg = (n, d) => { const i = argv.indexOf(n); return i > -1 && argv[i + 1] ? argv[i + 1] : d; };
+const has = (n) => argv.includes(n);
+
+const URL = arg("--url", "http://localhost:4500");
+const OUT = path.resolve(arg("--out", "lab/shots"));
+const STEPS = parseInt(arg("--per-act", arg("--steps", "6")), 10);  // samples PER ACT
+const W = parseInt(arg("--width", "1440"), 10);
+const H = parseInt(arg("--height", "900"), 10);
+const REDUCED = has("--reduced-motion");
+
+const CHROME = [
+  process.env.SCROLLCRAFT_CHROME,
+  // Windows
+  "C:/Program Files/Google/Chrome/Application/chrome.exe",
+  "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
+  "C:/Program Files/Microsoft/Edge/Application/msedge.exe",
+  // macOS
+  "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+  "/Applications/Chromium.app/Contents/MacOS/Chromium",
+  "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
+  // Linux
+  "/usr/bin/google-chrome",
+  "/usr/bin/google-chrome-stable",
+  "/usr/bin/chromium",
+  "/usr/bin/chromium-browser",
+  "/snap/bin/chromium",
+].find((p) => p && fs.existsSync(p));
+
+if (!CHROME) {
+  console.error("No installed Chrome found. Set SCROLLCRAFT_CHROME to its path.");
+  process.exit(1);
+}
+
+fs.mkdirSync(OUT, { recursive: true });
+
+const browser = await chromium.launch({ executablePath: CHROME, headless: true });
+const page = await browser.newPage({
+  viewport: { width: W, height: H },
+  deviceScaleFactor: 2,
+  reducedMotion: REDUCED ? "reduce" : "no-preference",
+});
+
+// Headless Chrome can still reach desktop-wide cursor APIs on Windows.
+// Install before navigation; synthetic in-page movement needs no native lock.
+await page.addInitScript(() => {
+  Element.prototype.requestPointerLock = function () {
+    return Promise.reject(new Error("Native pointer lock disabled during verification"));
+  };
+  Element.prototype.setPointerCapture = function () {};
+  Element.prototype.releasePointerCapture = function () {};
+  Document.prototype.exitPointerLock = function () {};
+});
+
+const consoleErrors = [];
+page.on("console", (m) => { if (m.type() === "error") consoleErrors.push(m.text()); });
+page.on("pageerror", (e) => consoleErrors.push(String(e)));
+const failed = [];
+page.on("requestfailed", (r) => failed.push(`${r.failure()?.errorText} ${r.url()}`));
+
+// Not networkidle: the engine keeps clips in flight as you scroll, and a
+// webfont connection can stay open, so idle may never arrive. Wait for the
+// engine's own ready signal and for the faces to land, since line splitting
+// measures real line boxes and is wrong before the real face is applied.
+await page.goto(URL, { waitUntil: "domcontentloaded" });
+await page.waitForSelector("html.sc-ready", { timeout: 15000 });
+await page.evaluate(() => document.fonts.ready);
+await page.waitForTimeout(700);
+
+const doc = await page.evaluate(() => {
+  const world = document.querySelector('[data-sc-mode="worldflight"]');
+  return {
+    height: document.body.scrollHeight,
+    vh: innerHeight,
+    acts: [...document.querySelectorAll("[data-sc-act]")].map((a) => a.dataset.scAct),
+    world: world
+      ? {
+          seam: parseFloat(world.dataset.scSeam) || 0.12,
+          segs: [...world.querySelectorAll("[data-sc-segment]")].map((s) => ({
+            w: parseFloat(s.dataset.scW) || 1.3,
+            linger: parseFloat(s.dataset.scLinger) || 0,
+            label: s.dataset.scWaypoint || "",
+          })),
+        }
+      : null,
+  };
+});
+const WORLD = doc.world;
+const maxScroll = doc.height - doc.vh;
+
+if (WORLD) {
+  const total = WORLD.segs.reduce((s, g) => s + g.w, 0);
+  console.log(`page: worldflight, ${WORLD.segs.length} legs over ${total.toFixed(2)}vh ` +
+    `(track ${(doc.height / doc.vh).toFixed(1)} viewport-heights), seam ${WORLD.seam}vh`);
+  console.log(`  legs: ${WORLD.segs.map((g, i) => `${i}:${g.label || "-"}@${g.w}vh`).join("  ")}`);
+} else {
+  console.log(`page: ${(doc.height / doc.vh).toFixed(1)} viewport-heights, acts: ${doc.acts.join(" > ")}`);
+}
+
+// Wait for the playhead to ARRIVE, not merely to stop seeking. The engine lerps
+// currentTime toward a target on its own rAF loop, so after any scroll jump
+// there is a stretch of ~15 frames during which every clip on the page is
+// somewhere it will never be again. Screenshot in that window and the sheet is a
+// set of frames the reader is never shown, the dead-scroll comparison runs on
+// mid-lerp noise, and the whole run is unrepeatable.
+async function settle(timeout = 4000) {
+  const t0 = Date.now();
+  let last = null;
+  for (;;) {
+    const now = await page.evaluate(() => {
+      const insts = (window.ScrollCraft && window.ScrollCraft.instances) || [];
+      const clips = [].concat(...insts.map((i) => i.clips || [])).filter((c) => c.ready);
+      // Pages on an older engine expose no instances; fall back to watching
+      // currentTime go quiet, which reaches the same state more slowly.
+      if (clips.length) {
+        const arrived = clips.every((c) => Math.abs(c.cur - c.target) < 0.002 && !c.el.seeking);
+        return arrived ? "arrived" : "moving";
+      }
+      return [...document.querySelectorAll("video[data-sc-scrub]")]
+        .map((v) => (v.seeking ? "seeking" : v.currentTime.toFixed(3))).join("|");
+    });
+    if (now === "arrived") return true;
+    if (now !== "moving" && now === last && !now.includes("seeking")) return true;
+    if (Date.now() - t0 > timeout) return false;
+    last = now;
+    await page.waitForTimeout(60);
+  }
+}
+
+// Sample WITHIN each act, not uniformly down the document. Uniform sampling
+// distributes positions by page length, so a short act gets one sample that
+// lands wherever it lands, and adding a section elsewhere silently moves every
+// sample. That produces "this cue never reaches full opacity" reports that come
+// and go with unrelated edits. Per-act sampling hits the same fractions of
+// every act every run, so the findings mean something.
+//
+// A worldflight has no acts to sample within; its unit is the leg, and its
+// geometry lives entirely in the weights, so positions are computed from the
+// track rather than measured off the DOM. Both sides of every seam are added on
+// top: the crossfade is the frame this mode is judged on, and it occupies about
+// a tenth of a viewport, so uniform sampling steps straight over it.
+const positions = WORLD ? await page.evaluate((perSeg) => {
+  const root = document.querySelector('[data-sc-mode="worldflight"]');
+  const segs = [...root.querySelectorAll("[data-sc-segment]")];
+  const top = root.getBoundingClientRect().top + scrollY;
+  const seam = parseFloat(root.dataset.scSeam) || 0.12;
+  const fracs = Array.from({ length: perSeg }, (_, i) => (perSeg === 1 ? 0.5 : i / (perSeg - 1)));
+  const out = [];
+  let c = 0;
+  segs.forEach((s, i) => {
+    const w = parseFloat(s.dataset.scW) || 1.3;
+    fracs.forEach((f) => {
+      const p = 0.02 + f * 0.96;
+      out.push(Math.round(top + (c + w * p) * innerHeight));
+    });
+    c += w;
+    if (i < segs.length - 1) {
+      [-0.5, -0.2, 0.2, 0.5].forEach((k) => out.push(Math.round(top + (c + k * seam) * innerHeight)));
+    }
+  });
+  const max = document.body.scrollHeight - innerHeight;
+  out.push(0, max);
+  return [...new Set(out.map((y) => Math.max(0, Math.min(max, y))))].sort((a, b) => a - b);
+}, Math.max(2, Math.round(STEPS))) : await page.evaluate((perAct) => {
+  const out = [];
+  const fracs = Array.from({ length: perAct }, (_, i) => (perAct === 1 ? 0.5 : i / (perAct - 1)));
+  document.querySelectorAll("[data-sc-act]").forEach((el) => {
+    const top = el.getBoundingClientRect().top + scrollY;
+    const h = el.offsetHeight;
+    const pinned = ["scrub", "pin", "pan"].includes(el.dataset.scAct);
+    fracs.forEach((f) => {
+      // Nudge off the exact endpoints: p=0 and p=1 sit on the seam between two
+      // acts, where which one you are "in" is ambiguous.
+      const p = 0.02 + f * 0.96;
+      out.push(Math.round(pinned ? top + (h - innerHeight) * p : top - innerHeight + (h + innerHeight) * p));
+    });
+    // A pinned stage is on screen for a viewport BEFORE its pinned travel begins
+    // and a viewport AFTER it ends, and the loop above samples only inside the
+    // travel. Those two slides are exactly where a clip mapped to pinned
+    // progress sits frozen on its first or last frame, so not sampling them is
+    // why a frozen clip could pass this harness. Sample them.
+    if (el.dataset.scAct === "scrub") {
+      // `v` is the fraction of the viewport the stage covers at that position.
+      // Sample the part of each slide where the stage is still MOSTLY on screen,
+      // because that is where a frozen frame is conspicuous, and because the
+      // frozen-clip check needs consecutive samples that are both well past its
+      // visibility gate before it will call anything.
+      [0.6, 0.75, 0.9].forEach((v) => {
+        out.push(Math.round(top - innerHeight * (1 - v)));  // sliding in
+        out.push(Math.round(top + h - innerHeight * v));    // sliding out
+      });
+    }
+  });
+  const max = document.body.scrollHeight - innerHeight;
+  out.push(max);
+  return [...new Set(out.map((y) => Math.max(0, Math.min(max, y))))].sort((a, b) => a - b);
+}, Math.max(2, Math.round(STEPS)));
+
+const report = [];
+for (let i = 0; i < positions.length; i++) {
+  const y = positions[i];
+  const p = maxScroll ? y / maxScroll : 0;
+  await page.evaluate((y) => scrollTo({ top: y, behavior: "instant" }), y);
+  await page.waitForTimeout(180);
+  const settled = await settle();
+
+  const state = await page.evaluate(() => {
+    // A kinetic heading carries its real opacity on the split line units; the
+    // engine forces the element itself to 1. Reading the element therefore
+    // reports every kinetic headline as fully present, including on frames
+    // where every one of its lines is at 0. Take the strongest line instead:
+    // the heading is "peaked" when at least one unit has arrived.
+    const cueOpacity = (el) => {
+      const o = parseFloat(getComputedStyle(el).opacity) || 0;
+      const units = el.querySelectorAll(".sc-split__i");
+      if (!units.length) return o;
+      let m = 0;
+      units.forEach((u) => { m = Math.max(m, parseFloat(getComputedStyle(u).opacity) || 0); });
+      return o * m;
+    };
+    const vis = [];
+    // A worldflight's copy blocks are windowed against the whole track rather
+    // than an act's progress, but they are the same thing to a reader: type that
+    // has to arrive, hold, and leave. Grade them identically.
+    document.querySelectorAll("[data-sc-cue],[data-sc-copy]").forEach((el) => {
+      const o = cueOpacity(el);
+      if (o <= 0.02) return;
+      // On screen, not merely non-transparent. An element parked off-viewport
+      // at opacity 1 is not a visible cue, and counting it produces phantom
+      // findings that send you chasing a bug the reader never sees.
+      const r = el.getBoundingClientRect();
+      if (r.bottom < 0 || r.top > innerHeight || r.right < 0 || r.left > innerWidth) return;
+      vis.push({ t: (el.textContent || "").trim().replace(/\s+/g, " ").slice(0, 46), o: +o.toFixed(2) });
+    });
+    const clips = [...document.querySelectorAll("video[data-sc-scrub]")].map((v) => ({
+      // A continuous world legitimately keeps its clip chain outside the act
+      // stack, driven by the page's own scroll value rather than by an act's
+      // progress. Falling back to the clip's own class keeps that case
+      // reporting instead of taking the whole run down before it writes
+      // anything.
+      painted: (v.closest("[data-sc-act]") ?? v).classList.contains("sc-has-clip"),
+      t: +(v.currentTime || 0).toFixed(2),
+      dur: +(v.duration || 0).toFixed(2),
+      // How much of the viewport this clip's stage actually covers. A frozen
+      // playhead only matters while the reader can see the stage.
+      vis: (() => {
+        const st = v.closest("[data-sc-stage]") || v.parentElement;
+        if (!st) return 0;
+        const b = st.getBoundingClientRect();
+        return +(Math.max(0, Math.min(b.bottom, innerHeight) - Math.max(b.top, 0)) / innerHeight).toFixed(3);
+      })(),
+    }));
+    // Rails and wipes move without changing any cue or clip time, so without
+    // these a panning section reads as dead scroll.
+    const rails = [...document.querySelectorAll("[data-sc-pan]")]
+      .map((r) => Math.round(new DOMMatrixReadOnly(getComputedStyle(r).transform).m41));
+    const wipes = [...document.querySelectorAll("[data-sc-reveal]")]
+      .map((r) => getComputedStyle(r).clipPath);
+    // Which act owns the middle of the viewport right now.
+    let act = "-";
+    document.querySelectorAll("[data-sc-act]").forEach((a) => {
+      const r = a.getBoundingClientRect();
+      if (r.top <= innerHeight / 2 && r.bottom >= innerHeight / 2) act = a.dataset.scAct;
+    });
+    // Where each pinned stage physically sits. Before an act reaches its pin
+    // point the stage slides up the screen while its progress is still clamped
+    // to 0, so the clip and cues are frozen and yet the view is very much
+    // moving. Without this the run-up to every pinned act reads as dead scroll.
+    const stages = [...document.querySelectorAll("[data-sc-stage]")]
+      .map((s) => Math.round(s.getBoundingClientRect().top));
+    // Worldflight legs. Opacity IS the crossfade, so it is state, not styling:
+    // two samples with the same clip times but different leg opacities are a
+    // dissolve in progress, not dead scroll.
+    const segs = [...document.querySelectorAll("[data-sc-segment]")].map((el, i) => {
+      const v = el.querySelector("video");
+      return {
+        i, label: el.dataset.scWaypoint || "",
+        op: +(parseFloat(getComputedStyle(el).opacity) || 0).toFixed(3),
+        painted: el.classList.contains("sc-has-clip"),
+        t: v ? +(v.currentTime || 0).toFixed(3) : null,
+      };
+    });
+    const world = document.querySelector('[data-sc-mode="worldflight"]');
+    // Bespoke fixed stages can use flow markers for document travel while all
+    // visible motion happens outside the engine's pin/scrub devices. Those
+    // pages publish a compact representation of their actual visual state so
+    // dead-scroll verification does not silently skip the whole experience.
+    const customEls = [...document.querySelectorAll("[data-sc-verify-state]")];
+    const custom = customEls.map((el) => el.getAttribute("data-sc-verify-state") || "");
+    const customHold = customEls.some((el) => el.getAttribute("data-sc-verify-hold") === "true");
+    return {
+      cues: vis, clips, rails, wipes, act, stages, segs, custom, customHold,
+      seg: world ? +(world.style.getPropertyValue("--sc-seg") || -1) : null,
+      segp: world ? +(world.style.getPropertyValue("--sc-segp") || 0) : null,
+      bg: getComputedStyle(document.documentElement).getPropertyValue("--sc-canvas").trim(),
+    };
+  });
+
+  // Flat NN.png so ffmpeg can read the set as a numbered sequence for the
+  // contact sheet. The scroll offset lives in report.json, not the filename.
+  const name = `${String(i).padStart(2, "0")}.png`;
+  await page.screenshot({ path: path.join(OUT, name) });
+
+  // Contrast, measured on the COMPOSITED page rather than on the source media.
+  // Sampling the video directly ignores every scrim, gradient and blend on top
+  // of it, so a page can read as failing while looking fine, or the reverse.
+  // Hide the text, shoot the same frame, hand the pixels back to the page, and
+  // sample the real background under each line. Text over a scrubbing clip is
+  // the one contrast case a static audit cannot cover: the frame beneath a
+  // headline changes as you scroll, so it can pass on the poster and fail three
+  // hundred pixels later. The direction is picked per line: light type fails on
+  // the brightest patch, dark type on the darkest one.
+  //
+  // Fixed chrome is hidden along with the text. A fixed bar paints in FRONT of
+  // whatever scrolls under it, so its own mark is not the background behind a
+  // headline passing beneath it, and leaving it in reports a spurious failure
+  // on an act that is fine.
+  await page.evaluate(() => {
+    document.querySelectorAll("body *").forEach((el) => {
+      if (getComputedStyle(el).position !== "fixed") return;
+      // A worldflight's stage and copy layer are fixed too, and they are the
+      // exact opposite case: the stage IS the background behind every line, and
+      // the copy layer carries the scrim that makes the line legible. Hiding
+      // them samples the page ground instead of the film and reports the whole
+      // page as failing while it looks fine.
+      if (el.closest("[data-sc-world],[data-sc-world-copy]")) return;
+      el.setAttribute("data-sc-shot-fixed", "");
+    });
+  });
+  await page.addStyleTag({
+    content: "[data-sc-cue],[data-sc-cue] *,[data-sc-copy],[data-sc-copy] *," +
+             "[data-sc-shot-fixed]{visibility:hidden!important}",
+  });
+  const bare = (await page.screenshot({ type: "jpeg", quality: 80 })).toString("base64");
+  const contrast = await page.evaluate(async ({ b64, dpr }) => {
+    const img = new Image();
+    img.src = "data:image/jpeg;base64," + b64;
+    await img.decode();
+    const c = document.createElement("canvas");
+    const g = c.getContext("2d", { willReadFrequently: true });
+    const lum = (r, gr, b) => {
+      const f = (v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); };
+      return 0.2126 * f(r) + 0.7152 * f(gr) + 0.0722 * f(b);
+    };
+    const ratio = (a, b) => (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+    const cueOpacity = (el) => {
+      const o = parseFloat(getComputedStyle(el).opacity) || 0;
+      const units = el.querySelectorAll(".sc-split__i");
+      if (!units.length) return o;
+      let m = 0;
+      units.forEach((u) => { m = Math.max(m, parseFloat(getComputedStyle(u).opacity) || 0); });
+      return o * m;
+    };
+    const out = [];
+    document.querySelectorAll("[data-sc-cue],[data-sc-copy]").forEach((el) => {
+      if (cueOpacity(el) < 0.85) return;
+      if (!(el.textContent || "").trim()) return;
+      const r = el.getBoundingClientRect();
+      if (r.width < 8 || r.height < 8 || r.bottom < 0 || r.top > innerHeight) return;
+      // Clamp the sampled rect to the viewport. The part of a pinned act's copy
+      // that has scrolled above the fold is not on screen, so whatever sits in
+      // those pixels is not the background behind anything the reader can see.
+      const vl = Math.max(0, r.left), vt = Math.max(0, r.top);
+      const vr = Math.min(innerWidth, r.right), vb = Math.min(innerHeight, r.bottom);
+      if (vr - vl < 8 || vb - vt < 8) return;
+      const x = vl * dpr, y2 = vt * dpr;
+      const w = Math.min((vr - vl) * dpr, img.width - x), h = Math.min((vb - vt) * dpr, img.height - y2);
+      if (w < 2 || h < 2) return;
+      c.width = 32; c.height = 16;
+      g.drawImage(img, x, y2, w, h, 0, 0, 32, 16);
+      const d = g.getImageData(0, 0, 32, 16).data;
+      let maxL = 0, minL = 1, sum = 0, n = 0;
+      for (let k = 0; k < d.length; k += 4) {
+        const L = lum(d[k], d[k + 1], d[k + 2]);
+        if (L > maxL) maxL = L;
+        if (L < minL) minL = L;
+        sum += L; n++;
+      }
+      const cs = getComputedStyle(el);
+      const fg = cs.color.match(/[\d.]+/g).map(Number);
+      const fl = lum(fg[0], fg[1], fg[2]);
+      // An element that paints its own opaque background (a button, a chip) is
+      // an ordinary static contrast case: grade its text against that fill, not
+      // against whatever the page happens to show behind it. Hiding the element
+      // to sample the backdrop necessarily hides its background too, so without
+      // this every solid CTA reports a spurious failure.
+      const bg = (cs.backgroundColor.match(/[\d.]+/g) || []).map(Number);
+      const opaqueBg = bg.length >= 3 && (bg.length < 4 || bg[3] > 0.5);
+      if (opaqueBg) {
+        const bl = lum(bg[0], bg[1], bg[2]);
+        out.push({
+          t: (el.textContent || "").trim().replace(/\s+/g, " ").slice(0, 40),
+          dir: "own-fill",
+          worst: +ratio(fl, bl).toFixed(2), mean: +ratio(fl, bl).toFixed(2),
+        });
+        return;
+      }
+      // Pick the direction from the foreground. Light type on a dark page fails
+      // on the brightest patch under it; dark type on a light page (a high-key
+      // world, ink over media) fails on the DARKEST patch, and grading that
+      // against maxL is the most lenient reading available, so a page can report
+      // clean over text that is failing. Compare the ink to the mean background
+      // and grade against whichever extreme is on the ink's own side.
+      const meanL = sum / n;
+      const dark = fl < meanL;
+      out.push({
+        t: (el.textContent || "").trim().replace(/\s+/g, " ").slice(0, 40),
+        dir: dark ? "dark-on-light" : "light-on-dark",
+        worst: +ratio(fl, dark ? minL : maxL).toFixed(2),
+        mean: +ratio(fl, meanL).toFixed(2),
+      });
+    });
+    return out;
+  }, { b64: bare, dpr: 2 });
+  await page.evaluate(() => {
+    const t = [...document.querySelectorAll("style")].pop();
+    if (t && t.textContent.includes("data-sc-cue")) t.remove();
+    document.querySelectorAll("[data-sc-shot-fixed]").forEach((el) => el.removeAttribute("data-sc-shot-fixed"));
+  });
+
+  report.push({ i, y, pct: +(p * 100).toFixed(0), settled, contrast, ...state });
+  if (WORLD) {
+    console.log(`  ${name}  settled=${settled}  copy=${state.cues.length}  leg=${state.seg}@${state.segp}  ` +
+      `legs=${state.segs.map((g) => `${g.op > 0.002 ? (g.painted ? g.t : "poster") : "-"}${g.op > 0.002 && g.op < 0.998 ? "*" + g.op : ""}`).join(",")}`);
+  } else {
+    console.log(`  ${name}  settled=${settled}  cues=${state.cues.length}  clips=${state.clips.map((c) => (c.painted ? c.t : "poster")).join(",")}`);
+  }
+}
+
+fs.writeFileSync(path.join(OUT, "report.json"), JSON.stringify({ doc, report, consoleErrors, failed }, null, 2));
+
+if (consoleErrors.length) console.log("\nCONSOLE ERRORS:\n  " + consoleErrors.join("\n  "));
+if (failed.length) console.log("\nFAILED REQUESTS:\n  " + failed.join("\n  "));
+
+// Dead-scroll detector: consecutive positions where nothing visibly changed.
+// This is the failure the eye misses and the reason to shoot contiguously.
+// Opacity counts as change: a cue mid-fade is motion, and comparing only which
+// cues exist would call a crossfade dead.
+const sig = (s) => JSON.stringify([
+  s.cues.map((c) => c.t + ":" + c.o),
+  s.clips.map((c) => c.t),
+  s.rails,
+  s.wipes,
+  s.stages,
+  s.custom || [],
+]);
+// Only inside pinned acts. A flow section or a footer that holds still across
+// two sample positions is a page behaving correctly, not dead scroll, and
+// flagging it trains you to ignore the signal.
+const PINNED = new Set(["scrub", "pin", "pan"]);
+const dead = [];
+if (WORLD) {
+  // Every pixel of a worldflight track is pinned by construction, so there is
+  // no "correctly still" region to exclude and the whole page is fair game.
+  // Three independent things can carry the motion: the film advancing, a leg
+  // dissolving into the next, and a copy window opening or closing. Dead scroll
+  // is all three holding at once.
+  const wsig = (s) => JSON.stringify([
+    s.segs.map((g) => g.t),
+    s.segs.map((g) => g.op),
+    s.cues.map((c) => c.t + ":" + c.o),
+  ]);
+  // Not under reduced motion. There the film is deliberately never fetched, so
+  // the middle of a leg holds a single still frame and every pair of samples in
+  // it is identical BY DESIGN. Flagging that reports the accessibility path as
+  // broken every single run, which is how a real finding gets ignored. What
+  // matters here is whether the story still reads, and the copy-window and
+  // contrast passes below answer that.
+  for (let i = 1; !REDUCED && i < report.length; i++) {
+    const a = report[i - 1], b = report[i];
+    // Tighter than the act gate: a leg is about one viewport of scroll, so a
+    // quarter-viewport window would only ever compare four points per leg.
+    if (b.y - a.y < doc.vh * 0.12) continue;
+    if (wsig(a) === wsig(b)) {
+      dead.push(`${a.pct}% -> ${b.pct}% (leg ${a.seg} > ${b.seg})`);
+    }
+  }
+} else {
+  for (let i = 1; i < report.length; i++) {
+    const a = report[i - 1], b = report[i];
+    const hasCustomState = (a.custom?.length || 0) > 0 || (b.custom?.length || 0) > 0;
+    if (!PINNED.has(a.act) && !PINNED.has(b.act) && !hasCustomState) continue;
+    // A page may explicitly declare an authored hold, such as a resolved close
+    // or the stable accessibility frame under reduced motion. It has to be
+    // declared by the visible stage; ordinary flow content stays exempt as it
+    // was before this custom-state path existed.
+    if (a.customHold && b.customHold) continue;
+    // Two samples a few dozen pixels apart SHOULD look the same. Only flag a gap
+    // wide enough that a reader would notice nothing happening in it.
+    if (b.y - a.y < doc.vh * 0.25) continue;
+    if (sig(a) === sig(b)) dead.push(`${a.pct}% -> ${b.pct}% (${a.act} > ${b.act})`);
+  }
+}
+console.log(dead.length ? `\nDEAD SCROLL between: ${dead.join(", ")}`
+  : WORLD && REDUCED ? "\ndead-scroll check skipped: reduced motion holds each leg on one still frame by design"
+  : "\nno dead scroll detected");
+
+// FROZEN CLIP. The reader is scrolling, a scrub stage is on screen, and its
+// playhead is not moving: a still photograph sliding up the page. Dead scroll
+// cannot see this, because the stage IS moving, which is the whole problem.
+//
+// A hold on the first or last frame is always a defect. A hold in the middle
+// can be an intentional `dwell` settle, so it only counts once it outlasts one.
+// Skipped under reduced motion, where no clip is ever fetched on purpose.
+if (!REDUCED) {
+  const nClips = report[0]?.clips?.length || 0;
+  const VIS = 0.55, EPS = 0.012, MIN = doc.vh * 0.15;
+  const frozen = [];
+  for (let c = 0; c < nClips; c++) {
+    let run = null;
+    const flush = () => {
+      if (!run) return;
+      const kind = run.t < 0.05 ? "entry" : (run.dur && run.t > run.dur - 0.08 ? "exit" : "mid");
+      const need = kind === "mid" ? doc.vh * 0.5 : MIN;
+      if (run.to - run.from >= need) frozen.push({ c, kind, ...run });
+      run = null;
+    };
+    for (let i = 1; i < report.length; i++) {
+      const a = report[i - 1].clips?.[c], b = report[i].clips?.[c];
+      if (!a || !b) { flush(); continue; }
+      const seen = a.vis >= VIS && b.vis >= VIS;
+      const stuck = Math.abs(b.t - a.t) < EPS;
+      if (seen && stuck && b.painted) {
+        if (!run) run = { from: report[i - 1].y, to: report[i].y, t: b.t, dur: b.dur };
+        else run.to = report[i].y;
+      } else flush();
+    }
+    flush();
+  }
+  if (frozen.length) {
+    console.log("\nFROZEN CLIP (still image while the page moves):\n  " + frozen.map((f) => {
+      const px = f.to - f.from;
+      const where = f.kind === "entry" ? "held on its FIRST frame while the stage slides in"
+        : f.kind === "exit" ? "held on its LAST frame while the stage slides out"
+        : `held mid-clip at ${f.t.toFixed(2)}s, longer than a dwell settle`;
+      return `clip ${f.c}: ${px}px (${(px / doc.vh).toFixed(2)} viewports) ${where}`;
+    }).join("\n  ") + "\n  Fix: let the clip map across the stage's whole visible life. That is the\n  engine default; data-sc-clip-map=\"travel\" turns it off. See devices.md.");
+  } else if (nClips) {
+    console.log(`all ${nClips} scrub clip(s) keep moving whenever they are on screen`);
+  }
+}
+
+// Worldflight findings. A leg that never reaches full opacity is a weight or a
+// seam that is wrong: the reader is shown a permanent dissolve between two
+// clips and never the leg itself. A leg stuck on its poster is a clip that
+// never loaded or never decoded, and it passes every other check on this page
+// because a poster looks exactly like a paused film.
+if (WORLD) {
+  const segPeak = {};
+  report.forEach((s) => (s.segs || []).forEach((g) => {
+    const k = `${g.i}${g.label ? ' "' + g.label + '"' : ""}`;
+    segPeak[k] = segPeak[k] || { op: 0, painted: false, hasClip: g.t !== null };
+    segPeak[k].op = Math.max(segPeak[k].op, g.op);
+    segPeak[k].painted = segPeak[k].painted || g.painted;
+  }));
+  const faint = Object.entries(segPeak).filter(([, v]) => v.op < 0.99);
+  // Under reduced motion no clip is ever fetched, on purpose. Every leg is
+  // legitimately on its poster, and reporting that as a fault buries the one
+  // finding this pass exists for: whether the story still reads without motion.
+  const posters = REDUCED ? [] : Object.entries(segPeak).filter(([, v]) => v.hasClip && !v.painted);
+  if (faint.length) console.log("\nLEGS THAT NEVER REACH FULL OPACITY:\n  " +
+    faint.map(([k, v]) => `${v.op.toFixed(2)} leg ${k}`).join("\n  "));
+  if (posters.length) console.log("\nLEGS STUCK ON POSTER (clip never painted):\n  " +
+    posters.map(([k]) => `leg ${k}`).join("\n  "));
+  if (!faint.length && !posters.length)
+    console.log(`all ${Object.keys(segPeak).length} legs reach full opacity` +
+      (REDUCED ? " (posters only, as reduced motion requires)" : " and paint a real frame"));
+}
+
+// Cues that never reach full strength anywhere on the page. A headline peaking
+// at 0.6 is a mis-set cue window, and it is invisible as a bug because the
+// element IS there, just never quite arriving.
+const peak = {};
+report.forEach((s) => s.cues.forEach((c) => { peak[c.t] = Math.max(peak[c.t] || 0, c.o); }));
+const weak = Object.entries(peak).filter(([, o]) => o < 0.8);
+if (weak.length) console.log("\nCUES THAT NEVER PEAK:\n  " + weak.map(([t, o]) => `${o} "${t}"`).join("\n  "));
+
+// Contrast over media, graded at the worst frame each line is ever shown on.
+const worstBy = {};
+report.forEach((s) => (s.contrast || []).forEach((c) => {
+  if (!worstBy[c.t] || c.worst < worstBy[c.t].worst) worstBy[c.t] = c;
+}));
+const fails = Object.values(worstBy).filter((c) => c.worst < 3);
+const thin = Object.values(worstBy).filter((c) => c.worst >= 3 && c.worst < 4.5);
+if (fails.length) console.log("\nCONTRAST FAIL (worst frame < 3:1):\n  " +
+  fails.map((c) => `${c.worst}:1 (mean ${c.mean}) "${c.t}"`).join("\n  "));
+if (thin.length) console.log("\nCONTRAST THIN (3:1 to 4.5:1, ok for large display type only):\n  " +
+  thin.map((c) => `${c.worst}:1 "${c.t}"`).join("\n  "));
+if (!fails.length && !thin.length && Object.keys(worstBy).length)
+  console.log("\ncontrast over media: all cues clear 4.5:1 at their worst frame");
+
+await browser.close();
+
+// Contact sheet. The point of shooting contiguously is to look at the frames
+// side by side; a folder of 20 PNGs does not get looked at that way.
+const FFMPEG = [
+  process.env.SCROLLCRAFT_FFMPEG,
+  ...(fs.existsSync(path.join(process.env.HOME || "", "AppData/Local/Microsoft/WinGet/Packages"))
+    ? fs.readdirSync(path.join(process.env.HOME, "AppData/Local/Microsoft/WinGet/Packages"))
+        .filter((d) => d.startsWith("Gyan.FFmpeg"))
+        .flatMap((d) => {
+          const base = path.join(process.env.HOME, "AppData/Local/Microsoft/WinGet/Packages", d);
+          return fs.readdirSync(base).map((v) => path.join(base, v, "bin/ffmpeg.exe"));
+        })
+    : []),
+  "/usr/local/bin/ffmpeg", "/opt/homebrew/bin/ffmpeg", "ffmpeg",
+].find((p) => p && (p === "ffmpeg" || fs.existsSync(p)));
+
+if (FFMPEG) {
+  const cols = Math.min(5, report.length);
+  const rows = Math.ceil(report.length / cols);
+  const { spawnSync } = await import("node:child_process");
+  const r = spawnSync(FFMPEG, [
+    "-y", "-v", "error", "-i", path.join(OUT, "%02d.png"),
+    "-vf", `scale=520:-1,tile=${cols}x${rows}`, "-frames:v", "1",
+    path.join(OUT, "sheet.png"),
+  ]);
+  if (r.status === 0) console.log(`contact sheet: ${path.join(OUT, "sheet.png")}`);
+  else console.log("contact sheet skipped (needs a full ffmpeg build; scale/tile are missing from stripped ones)");
+}
+
+console.log(`\nshots + report.json in ${OUT}`);
diff --git a/apps/website/e2e/scroll-craft/verify-home.mjs b/apps/website/e2e/scroll-craft/verify-home.mjs
new file mode 100644
index 000000000..945f6ff46
--- /dev/null
+++ b/apps/website/e2e/scroll-craft/verify-home.mjs
@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+/**
+ * Runs scroll-craft's shoot.mjs against a running website (spec §8) and fails
+ * on what the harness reports as defects: DEAD SCROLL outside the declared
+ * hold (`data-sc-verify-hold="true"`), and cues that never peak.
+ *
+ *   node apps/website/e2e/scroll-craft/verify-home.mjs --url http://127.0.0.1:4308 --out <dir> [--modes desktop,phone,reduced]
+ *
+ * Each mode writes its frames, report.json and sheet.png under <out>/<mode>.
+ *
+ * The default is the desktop pass only. Below 1024px and under reduced motion
+ * the page renders the stills (no pinned act, no engine), and the vendored
+ * harness waits for the engine's `html.sc-ready` signal before it samples, so
+ * the phone and reduced-motion passes time out on the stills page as it is
+ * today. They stay defined here for a page that does raise that signal; pass
+ * `--modes desktop,phone,reduced` to run them.
+ */
+import { spawnSync } from 'node:child_process';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const argv = process.argv.slice(2);
+const arg = (name, fallback) => {
+  const i = argv.indexOf(name);
+  return i > -1 && argv[i + 1] ? argv[i + 1] : fallback;
+};
+const URL = arg('--url', 'http://127.0.0.1:4308');
+const OUT = path.resolve(arg('--out', 'dist/stage-shots'));
+const shoot = path.join(
+  path.dirname(fileURLToPath(import.meta.url)),
+  'shoot.mjs'
+);
+
+const MODES = {
+  desktop: ['--width', '1440', '--height', '900'],
+  phone: ['--width', '390', '--height', '844'],
+  reduced: ['--reduced-motion'],
+};
+const modes = arg('--modes', 'desktop')
+  .split(',')
+  .map((m) => m.trim())
+  .filter(Boolean);
+const unknown = modes.filter((m) => !(m in MODES));
+if (unknown.length) {
+  console.error(
+    `unknown mode(s): ${unknown.join(', ')} (known: ${Object.keys(MODES).join(
+      ', '
+    )})`
+  );
+  process.exit(2);
+}
+
+// Verbatim summary lines from shoot.mjs. Anchored to line starts so prose in
+// the harness's own commentary can never trip them.
+const DEAD_SCROLL = /^DEAD SCROLL between:/m;
+const CUES_NEVER_PEAK = /^CUES THAT NEVER PEAK:/m;
+
+let failed = false;
+for (const mode of modes) {
+  const result = spawnSync(
+    process.execPath,
+    [
+      shoot,
+      '--url',
+      URL,
+      '--out',
+      path.join(OUT, mode),
+      '--per-act',
+      '8',
+      ...MODES[mode],
+    ],
+    { encoding: 'utf8' }
+  );
+  const out = `${result.stdout ?? ''}\n${result.stderr ?? ''}`;
+  console.log(`\n=== ${mode} ===\n${out}`);
+  const reasons = [];
+  if (result.status !== 0) reasons.push(`exit status ${result.status}`);
+  if (DEAD_SCROLL.test(out)) reasons.push('dead scroll');
+  if (CUES_NEVER_PEAK.test(out)) reasons.push('cues that never peak');
+  if (reasons.length) {
+    failed = true;
+    console.log(`=== ${mode}: FAILED (${reasons.join(', ')})`);
+  } else {
+    console.log(`=== ${mode}: ok`);
+  }
+}
+process.exit(failed ? 1 : 0);
diff --git a/apps/website/e2e/website.spec.ts b/apps/website/e2e/website.spec.ts
index bdb593dc5..02e9b937a 100644
--- a/apps/website/e2e/website.spec.ts
+++ b/apps/website/e2e/website.spec.ts
@@ -38,10 +38,7 @@ test('landing page renders the spine in order (live-stage spec §3)', async ({ p
     'hero-heading',
     'proof-heading',
     'why-heading',
-    'stream-heading',
-    'persist-heading',
-    'approve-heading',
-    'render-heading',
+    'stage-heading',
     'final-cta-heading',
     'pilot-heading',
     'faq-heading',
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index 2405665c5..bb8569bd0 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -1,10 +1,7 @@
 import { Hero } from '../components/landing/Hero';
 import { Reliability } from '../components/landing/Reliability';
 import { ScopeTable } from '../components/landing/ScopeTable';
-import { FeatureBlock } from '../components/landing/FeatureBlock';
-import { MediumSwitcher } from '../components/landing/MediumSwitcher';
-import { SECTION_MEDIA } from '../lib/section-media';
-import { buildPanes } from '../lib/build-panes';
+import { Stage } from '../components/landing/Stage';
 import { TeamsBlock } from '../components/landing/TeamsBlock';
 import { HomeFAQ } from '../components/landing/HomeFAQ';
 import { FinalCTA } from '../components/landing/FinalCTA';
@@ -26,13 +23,8 @@ export const metadata = createPageMetadata({
   type: 'website',
 });
 
-export default async function HomePage() {
+export default function HomePage() {
   const formPolicy = getFormPolicy();
-  const [streamPanes, persistPanes, approvePanes, renderPanes] = await Promise.all(
-    (['stream', 'persist', 'approve', 'render'] as const).map((key) =>
-      buildPanes(SECTION_MEDIA[key], SECTION_MEDIA[key].video?.url ?? ''),
-    ),
-  );
 
   return (
     <>
@@ -40,80 +32,10 @@ export default async function HomePage() {
       <Reliability />
       <ScopeTable />
 
-      {/* The four capability acts stay as FeatureBlocks until plan 3 replaces
-          them with the live stage (spec §4). */}
-      {/* Stream */}
-      <FeatureBlock
-        id="stream"
-        eyebrow="Stream"
-        headline="The UI stays reactive through tokens, tools, errors, and state changes."
-        body={
-          <>
-            <code className="home-code">injectAgent()</code> hands back signals: messages(), status(), error(),
-            isLoading(), and tool progress. Nothing to subscribe to, nothing to tear down.
-          </>
-        }
-        rows={[
-          { claim: 'Signals, not promises', api: 'injectAgent()' },
-          { claim: 'Tool progress as it happens', api: 'toolProgress()' },
-          { claim: 'Same contract on LangGraph and AG-UI', api: 'Agent' },
-        ]}
-        cta={{ label: 'Read the streaming guide', href: '/docs/langgraph/guides/streaming' }}
-        visual={<MediumSwitcher sectionId="stream" panes={streamPanes} />}
-      />
-
-      {/* Persist */}
-      <FeatureBlock
-        id="persist"
-        eyebrow="Persist"
-        headline="A user can leave, return, inspect history, and continue."
-        body="Thread selection, history, branch and replay UI in the Angular app. Durability itself comes from the runtime and persistence layer you connect — Threadplane exposes it, it does not fake it."
-        rows={[
-          { claim: 'Conversations restore across sessions', api: 'threadId + checkpoints' },
-          { claim: 'Branch or replay from any point', api: 'branch / replay' },
-          { claim: 'error() / status() / reload() on every agent', api: 'boundary signals' },
-        ]}
-        cta={{ label: 'Persistence patterns', href: '/docs/langgraph/guides/persistence' }}
-        visualLeft
-        visual={<MediumSwitcher sectionId="persist" panes={persistPanes} />}
-      />
-
-      {/* Approve */}
-      <FeatureBlock
-        id="approve"
-        eyebrow="Approve"
-        headline="Irreversible work pauses for a human decision."
-        body={
-          <>
-            <code className="home-code">interrupt()</code> freezes the run inside the checkpoint. Your UI renders the
-            proposal; <code className="home-code">submit({'{ resume }'})</code> continues with the decision on the
-            record.
-          </>
-        }
-        rows={[
-          { claim: 'The pause is a checkpoint, not a modal', api: 'interrupt()' },
-          { claim: 'The proposal renders in your UI', api: '<chat-interrupt-panel>' },
-          { claim: 'The decision lands beside the action it gated', api: 'submit({ resume })' },
-        ]}
-        cta={{ label: 'Interrupt patterns', href: '/docs/langgraph/guides/interrupts' }}
-        visual={<MediumSwitcher sectionId="approve" panes={approvePanes} />}
-      />
-
-      {/* Render */}
-      <FeatureBlock
-        id="render"
-        eyebrow="Render"
-        headline="Agent output becomes components from your design system."
-        body="The agent emits constrained structured output. Angular renders registered components — json-render and A2UI both speak it — with per-component fallback and a readiness gate. No generated code runs."
-        rows={[
-          { claim: 'Your design system, not a chat widget', api: '@threadplane/render' },
-          { claim: 'Unknown specs degrade per component', api: 'fallback + readiness gate' },
-          { claim: 'Schema on the server, trust in the client', api: 'validated specs' },
-        ]}
-        cta={{ label: 'See @threadplane/render', href: '/render' }}
-        visualLeft
-        visual={<MediumSwitcher sectionId="render" panes={renderPanes} />}
-      />
+      {/* The four capability beats (stream, persist, approve, render): stills
+          by default, the pinned live act on wide, motion-tolerant viewports
+          (live-stage spec §3, §8). Copy lives in STAGE_RAIL (positioning.ts). */}
+      <Stage />
 
       <FinalCTA
         variant="dark"
diff --git a/apps/website/src/components/landing/Stage.spec.tsx b/apps/website/src/components/landing/Stage.spec.tsx
new file mode 100644
index 000000000..d1e423894
--- /dev/null
+++ b/apps/website/src/components/landing/Stage.spec.tsx
@@ -0,0 +1,132 @@
+// @vitest-environment jsdom
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Stage } from './Stage';
+import { engineRoot } from './StageAct';
+
+// The engine is an IIFE that reads matchMedia at load and measures layout on
+// mount; neither is meaningful in jsdom. The act only needs the global.
+vi.mock('../../vendor/scrollcraft/scrollcraft.js', () => ({}));
+vi.mock('../../lib/analytics/client', () => ({
+  trackStageProgress: vi.fn(),
+  track: vi.fn(),
+}));
+vi.mock('../ui/BrowserFrame', () => ({
+  BrowserFrame: ({ children }: { children: React.ReactNode }) => (
+    <div data-frame>{children}</div>
+  ),
+}));
+
+function mockViewport(width: number, reducedMotion: boolean) {
+  Object.defineProperty(window, 'innerWidth', {
+    configurable: true,
+    value: width,
+  });
+  window.matchMedia = vi.fn().mockImplementation((q: string) => ({
+    matches: q.includes('reduce') ? reducedMotion : false,
+    media: q,
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })) as unknown as typeof window.matchMedia;
+}
+
+/** Let the mode-switch effect and the engine's dynamic import settle. */
+const flush = () => act(() => Promise.resolve());
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  delete window.ScrollCraft;
+});
+
+describe('engineRoot', () => {
+  it('returns a root whose querySelectorAll finds the act', () => {
+    const parent = document.createElement('div');
+    const act = document.createElement('section');
+    act.setAttribute('data-sc-act', 'pin');
+    parent.appendChild(act);
+    const root = engineRoot(act);
+    expect(root).not.toBe(act);
+    expect(Array.from(root.querySelectorAll('[data-sc-act]'))).toContain(act);
+  });
+
+  it('falls back to document for a detached act', () => {
+    const act = document.createElement('section');
+    expect(engineRoot(act)).toBe(document);
+  });
+});
+
+describe('Stage', () => {
+  it('renders the stills on the server and keeps them on a narrow viewport', async () => {
+    mockViewport(390, false);
+    render(<Stage />);
+    await flush();
+    expect(screen.getAllByTestId('stage-still-beat')).toHaveLength(4);
+    expect(document.querySelector('[data-stage-act]')).toBeNull();
+  });
+
+  it('keeps the stills under reduced motion on a wide viewport', async () => {
+    mockViewport(1440, true);
+    render(<Stage />);
+    await flush();
+    expect(screen.getAllByTestId('stage-still-beat')).toHaveLength(4);
+    expect(document.querySelector('[data-stage-act]')).toBeNull();
+  });
+
+  it('upgrades to the pinned act on a wide, motion-tolerant viewport and mounts the engine on it', async () => {
+    mockViewport(1440, false);
+    vi.stubGlobal(
+      'IntersectionObserver',
+      class {
+        observe() {
+          /* no-op */
+        }
+        disconnect() {
+          /* no-op */
+        }
+      }
+    );
+    const mount = vi.fn();
+    window.ScrollCraft = { mount, reduce: false, instances: [] } as never;
+    render(<Stage />);
+    await flush();
+    const actEl = document.querySelector('[data-stage-act]');
+    expect(actEl).not.toBeNull();
+    expect(actEl?.getAttribute('data-sc-act')).toBe('pin');
+    expect(actEl?.getAttribute('data-sc-span')).toBe('6');
+    expect(actEl?.getAttribute('data-state')).toBe('mounting');
+    expect(actEl?.querySelector('[data-sc-stage]')).not.toBeNull();
+    // 4 beats + 3 hold lines
+    expect(
+      actEl?.querySelectorAll('[data-sc-cue]').length
+    ).toBeGreaterThanOrEqual(7);
+    expect(actEl?.querySelectorAll('.stage-rail-beat')).toHaveLength(4);
+    expect(screen.queryAllByTestId('stage-still-beat')).toHaveLength(0);
+    // The engine collects acts with root.querySelectorAll('[data-sc-act]'),
+    // which matches descendants only — so the mount root must contain the act
+    // rather than be it.
+    expect(mount).toHaveBeenCalledTimes(1);
+    const root = mount.mock.calls[0][0] as Element | Document;
+    expect(root).not.toBe(actEl);
+    expect(root === document || root.contains(actEl)).toBe(true);
+    expect(root.querySelectorAll('[data-sc-act]')).toContain(actEl);
+    // Keyboard path: the pin is skippable, and the opacity-hidden rail CTAs
+    // are out of the tab order.
+    const skip = actEl?.querySelector('a.stage-skip');
+    expect(skip?.getAttribute('href')).toBe('#stage-end');
+    expect(document.getElementById('stage-end')).not.toBeNull();
+    const ctas = actEl?.querySelectorAll('.stage-rail-beat .feature-block-cta');
+    expect(ctas).toHaveLength(4);
+    ctas?.forEach((a) => expect(a.getAttribute('tabindex')).toBe('-1'));
+    const iframe = actEl?.querySelector('iframe');
+    expect(iframe?.getAttribute('src')).toBe(
+      'https://demo.threadplane.ai/stage?t=0'
+    );
+    expect(iframe?.getAttribute('tabindex')).toBe('-1');
+  });
+});
diff --git a/apps/website/src/components/landing/Stage.tsx b/apps/website/src/components/landing/Stage.tsx
new file mode 100644
index 000000000..44fe38718
--- /dev/null
+++ b/apps/website/src/components/landing/Stage.tsx
@@ -0,0 +1,39 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { StageStills } from './StageStills';
+import { StageAct } from './StageAct';
+
+export const STAGE_MIN_WIDTH = 1024;
+type Mode = 'stills' | 'act';
+
+function actAllowed(): boolean {
+  if (typeof window === 'undefined') return false;
+  if (window.innerWidth < STAGE_MIN_WIDTH) return false;
+  return !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+/**
+ * Spec §8: the stills are the default (no JS, narrow, reduced motion, frame
+ * failure); the pinned act is an upgrade decided after hydration so the server
+ * and the first client render agree.
+ *
+ * The mode is decided once per page load and is not re-evaluated on resize
+ * (§8 gates on the viewport at load). The stills → act upgrade changes the
+ * page height by about five viewports (the act spans `STAGE_SPAN` × 100vh);
+ * that is safe because it happens in a post-hydration effect, before the
+ * visitor has scrolled far. `#stage-end` is the skip-link target rendered in
+ * act mode only: the stills have no hidden focusables to skip.
+ */
+export function Stage() {
+  const [mode, setMode] = useState<Mode>('stills');
+  useEffect(() => {
+    if (actAllowed()) setMode('act');
+  }, []);
+  if (mode === 'stills') return <StageStills />;
+  return (
+    <>
+      <StageAct onFallback={() => setMode('stills')} />
+      <span id="stage-end" tabIndex={-1} className="sr-only" />
+    </>
+  );
+}
diff --git a/apps/website/src/components/landing/StageAct.tsx b/apps/website/src/components/landing/StageAct.tsx
new file mode 100644
index 000000000..ef6690824
--- /dev/null
+++ b/apps/website/src/components/landing/StageAct.tsx
@@ -0,0 +1,219 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import { BrowserFrame } from '../ui/BrowserFrame';
+import { Container } from '../ui/Container';
+import { Eyebrow } from '../ui/Eyebrow';
+import { STAGE_HOLD_LINES, STAGE_RAIL } from '../../lib/positioning';
+import {
+  STAGE_SPAN,
+  cueFor,
+  holdLineCues,
+  type StageBeat,
+} from '../../lib/stage-beats';
+import { trackStageProgress } from '../../lib/analytics/client';
+import {
+  STAGE_DEMO_ORIGIN,
+  STAGE_DEMO_URL,
+  useStagePublisher,
+  type StageMilestone,
+} from './use-stage-publisher';
+
+const READY_TIMEOUT_MS = 8000;
+const POSTER = '/screenshots/stage-stream.webp';
+
+/**
+ * Where the engine mounts. `ScrollCraft.mount(root)` collects acts with
+ * `root.querySelectorAll('[data-sc-act]')`, which matches descendants only —
+ * mounting on the section itself (which IS the act) finds zero acts. So the
+ * engine mounts on the act's parent; `document` when it has none.
+ */
+export const engineRoot = (act: HTMLElement): Element | Document =>
+  act.parentElement ?? document;
+
+/**
+ * Roots the engine has already been mounted on. The engine has no unmount
+ * API: once mounted, its rAF loop and scroll/resize listeners run for the
+ * life of the page, even after `onFallback` swaps the section out for the
+ * stills (they then tick against a detached act — benign, but every extra
+ * mount adds another loop, unbounded). Today only one mount happens anyway:
+ * StrictMode runs effect → cleanup → effect synchronously, and the `cancelled`
+ * flag drops the first effect's import continuation before it reaches
+ * `mount`. This WeakSet is the guard that does not depend on that ordering.
+ */
+const mountedRoots = new WeakSet<Element | Document>();
+
+interface Props {
+  onFallback: () => void;
+}
+
+/**
+ * The pinned act (spec §4.1, §6, §7). The engine owns scroll and `--sc-p`;
+ * the publisher turns it into `t`; the iframe is the real `/stage`. Nothing in
+ * here sets React state per frame.
+ */
+export function StageAct({ onFallback }: Props) {
+  const sectionRef = useRef<HTMLElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  /**
+   * True once the iframe's `load` event has fired, i.e. its window has
+   * navigated to the demo origin. A fresh iframe's `contentWindow` is still
+   * `about:blank`, and a post to it with the demo's target origin is dropped
+   * with a console error per post, so the publisher gets null until then.
+   * A ref, not state: nothing renders off it, and the publisher reads it on
+   * every tick.
+   */
+  const frameLoadedRef = useRef(false);
+  const [ready, setReady] = useState(false);
+  const onFallbackRef = useRef(onFallback);
+  onFallbackRef.current = onFallback;
+
+  // Mount the engine once the act is in the DOM. The engine is an IIFE that
+  // touches window at load, so it is imported on the client only.
+  useEffect(() => {
+    let cancelled = false;
+    void import('../../vendor/scrollcraft/scrollcraft.js').then(() => {
+      if (cancelled || !sectionRef.current || !window.ScrollCraft) return;
+      const root = engineRoot(sectionRef.current);
+      if (mountedRoots.has(root)) return;
+      mountedRoots.add(root);
+      window.ScrollCraft.mount(root);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Ready timeout → the stills. A `ready` message that fails the publisher's
+  // shape check (an older `/stage` build without `hold`/`reloadEndMs`) is
+  // ignored, so this timeout drops to the stills — the intended degradation
+  // while the demo and the website deploy minutes apart.
+  useEffect(() => {
+    if (ready) return;
+    const t = setTimeout(() => onFallbackRef.current(), READY_TIMEOUT_MS);
+    return () => clearTimeout(t);
+  }, [ready]);
+
+  const track = useCallback(
+    (m: StageMilestone, beat?: StageBeat) => trackStageProgress(m, beat),
+    []
+  );
+  const frameWindow = useCallback(
+    () =>
+      frameLoadedRef.current ? iframeRef.current?.contentWindow ?? null : null,
+    []
+  );
+  const onReady = useCallback(() => setReady(true), []);
+  useStagePublisher(sectionRef, true, { frameWindow, track, onReady });
+
+  const holdCues = holdLineCues(STAGE_HOLD_LINES.length);
+
+  return (
+    <section
+      ref={sectionRef}
+      id="stage"
+      className="stage-act"
+      data-stage-act
+      data-sc-act="pin"
+      data-sc-span={STAGE_SPAN}
+      data-state={ready ? 'ready' : 'mounting'}
+      aria-labelledby="stage-heading"
+    >
+      {/* The rail cues are hidden by opacity only, so their CTAs are taken
+          out of the tab order (below) and the pin is skippable as a whole. */}
+      <a className="stage-skip" href="#stage-end">
+        Skip the stage
+      </a>
+      <div className="stage-pin" data-sc-stage>
+        <Container className="stage-pin-inner">
+          <div className="stage-frame">
+            <BrowserFrame url="demo.threadplane.ai/stage" elevation="lg">
+              <div className="stage-frame-stage">
+                <img
+                  src={POSTER}
+                  width={1200}
+                  height={720}
+                  alt=""
+                  aria-hidden="true"
+                  className="stage-frame-poster"
+                  decoding="async"
+                />
+                <iframe
+                  ref={iframeRef}
+                  src={STAGE_DEMO_URL}
+                  title="Threadplane stage: a recorded LangGraph run, scrubbed by scroll"
+                  className="stage-frame-iframe"
+                  tabIndex={-1}
+                  onLoad={() => {
+                    frameLoadedRef.current = true;
+                  }}
+                />
+              </div>
+            </BrowserFrame>
+            <a
+              className="stage-frame-open"
+              href={STAGE_DEMO_ORIGIN}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Open the live demo →
+            </a>
+          </div>
+          <div className="stage-rail">
+            <h2 id="stage-heading" className="sr-only">
+              One real run: stream, persist, approve, render
+            </h2>
+            {STAGE_RAIL.map((b) => (
+              <div
+                className="stage-rail-beat"
+                data-testid="stage-rail-beat"
+                data-beat={b.beat}
+                data-sc-cue={cueFor(b.beat)}
+                key={b.beat}
+              >
+                <div className="feature-block-rail">
+                  <Eyebrow tone="accent" className="feature-block-eyebrow">
+                    {b.eyebrow}
+                  </Eyebrow>
+                  <span
+                    className="feature-block-rail-line"
+                    aria-hidden="true"
+                  />
+                </div>
+                <h3 className="feature-block-heading">{b.headline}</h3>
+                <p className="feature-block-body">{b.body}</p>
+                <div className="feature-block-rows">
+                  {b.rows.map((row) => (
+                    <div className="feature-block-row" key={row.claim}>
+                      <span className="feature-block-row-claim">
+                        {row.claim}
+                      </span>
+                      <span className="feature-block-row-api">{row.api}</span>
+                    </div>
+                  ))}
+                </div>
+                <Link
+                  href={b.cta.href}
+                  className="feature-block-cta"
+                  tabIndex={-1}
+                >
+                  {b.cta.label} →
+                </Link>
+              </div>
+            ))}
+            {STAGE_HOLD_LINES.map((line, i) => (
+              <p
+                className="stage-rail-hold"
+                data-testid="stage-rail-hold"
+                data-sc-cue={holdCues[i]}
+                key={line}
+              >
+                {line}
+              </p>
+            ))}
+          </div>
+        </Container>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/website/src/components/landing/StageStills.spec.tsx b/apps/website/src/components/landing/StageStills.spec.tsx
new file mode 100644
index 000000000..28acbe1fe
--- /dev/null
+++ b/apps/website/src/components/landing/StageStills.spec.tsx
@@ -0,0 +1,41 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { StageStills } from './StageStills';
+import { STAGE_RAIL } from '../../lib/positioning';
+
+describe('StageStills', () => {
+  it('renders four beats in order, each with its still, phone source, copy rows and cta', () => {
+    render(<StageStills />);
+    const beats = screen.getAllByTestId('stage-still-beat');
+    expect(beats.map((b) => b.getAttribute('data-beat'))).toEqual([
+      'stream',
+      'persist',
+      'approve',
+      'render',
+    ]);
+    for (const [i, b] of beats.entries()) {
+      const img = b.querySelector('img')!;
+      expect(img.getAttribute('src')).toBe(
+        `/screenshots/stage-${STAGE_RAIL[i].beat}.webp`
+      );
+      expect(img.getAttribute('alt')).toBe(STAGE_RAIL[i].stillAlt);
+      expect(img.getAttribute('loading')).toBe('lazy');
+      expect(b.querySelector('source')!.getAttribute('srcset')).toBe(
+        `/screenshots/stage-${STAGE_RAIL[i].beat}-mobile.webp`
+      );
+      expect(b.querySelectorAll('.feature-block-row')).toHaveLength(3);
+      expect(b.querySelector('a.feature-block-cta')!.getAttribute('href')).toBe(
+        STAGE_RAIL[i].cta.href
+      );
+    }
+  });
+  it('is the section the act replaces, with its anchors', () => {
+    render(<StageStills />);
+    expect(document.querySelector('section#stage')).not.toBeNull();
+    expect(
+      screen.getByRole('heading', { level: 3, name: STAGE_RAIL[2].headline })
+    ).toBeTruthy();
+  });
+});
diff --git a/apps/website/src/components/landing/StageStills.tsx b/apps/website/src/components/landing/StageStills.tsx
new file mode 100644
index 000000000..48feb97f1
--- /dev/null
+++ b/apps/website/src/components/landing/StageStills.tsx
@@ -0,0 +1,84 @@
+import Link from 'next/link';
+import { Container } from '../ui/Container';
+import { Section } from '../ui/Section';
+import { Eyebrow } from '../ui/Eyebrow';
+import { STAGE_RAIL } from '../../lib/positioning';
+
+export const STAGE_STILL_MOBILE_MEDIA = '(max-width: 767px)';
+const STILL_W = 1200;
+const STILL_H = 720;
+const STILL_MOBILE_W = 585;
+const STILL_MOBILE_H = 975;
+
+/**
+ * The stage's non-pinned form (spec §8): the same four beats as four stacked
+ * stills from `/stage`, each with its rail copy. Server-rendered by default;
+ * `Stage` swaps in the pinned act on wide, motion-tolerant viewports.
+ */
+export function StageStills() {
+  return (
+    <Section id="stage" surface="canvas" ariaLabelledBy="stage-heading">
+      <Container>
+        <h2 id="stage-heading" className="sr-only">
+          One real run: stream, persist, approve, render
+        </h2>
+        <div className="stage-stills">
+          {STAGE_RAIL.map((b) => (
+            <article
+              className="stage-still"
+              data-testid="stage-still-beat"
+              data-beat={b.beat}
+              key={b.beat}
+            >
+              <div className="stage-still-visual">
+                <picture>
+                  <source
+                    media={STAGE_STILL_MOBILE_MEDIA}
+                    srcSet={`/screenshots/stage-${b.beat}-mobile.webp`}
+                    width={STILL_MOBILE_W}
+                    height={STILL_MOBILE_H}
+                  />
+                  <img
+                    src={`/screenshots/stage-${b.beat}.webp`}
+                    width={STILL_W}
+                    height={STILL_H}
+                    alt={b.stillAlt}
+                    loading="lazy"
+                    decoding="async"
+                    className="stage-still-img"
+                  />
+                </picture>
+              </div>
+              <div className="feature-block-text">
+                <div className="feature-block-rail">
+                  <Eyebrow tone="accent" className="feature-block-eyebrow">
+                    {b.eyebrow}
+                  </Eyebrow>
+                  <span
+                    className="feature-block-rail-line"
+                    aria-hidden="true"
+                  />
+                </div>
+                <h3 className="feature-block-heading">{b.headline}</h3>
+                <p className="feature-block-body">{b.body}</p>
+                <div className="feature-block-rows">
+                  {b.rows.map((row) => (
+                    <div className="feature-block-row" key={row.claim}>
+                      <span className="feature-block-row-claim">
+                        {row.claim}
+                      </span>
+                      <span className="feature-block-row-api">{row.api}</span>
+                    </div>
+                  ))}
+                </div>
+                <Link href={b.cta.href} className="feature-block-cta">
+                  {b.cta.label} →
+                </Link>
+              </div>
+            </article>
+          ))}
+        </div>
+      </Container>
+    </Section>
+  );
+}
diff --git a/apps/website/src/components/landing/use-stage-publisher.spec.ts b/apps/website/src/components/landing/use-stage-publisher.spec.ts
new file mode 100644
index 000000000..e8a760784
--- /dev/null
+++ b/apps/website/src/components/landing/use-stage-publisher.spec.ts
@@ -0,0 +1,405 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { act, renderHook } from '@testing-library/react';
+import { useRef } from 'react';
+import {
+  createStagePublisher,
+  STAGE_DEMO_ORIGIN,
+  STAGE_HELLO_INTERVAL_MS,
+  STAGE_MESSAGE_TYPE,
+  useStagePublisher,
+  type StagePublisher,
+} from './use-stage-publisher';
+import { APPROVE_HOLD, beatWindows, timeAt } from '../../lib/stage-beats';
+
+const READY = {
+  type: STAGE_MESSAGE_TYPE,
+  ready: true,
+  totalMs: 40_000,
+  beats: [
+    { beat: 'stream', startMs: 0, endMs: 12_000 },
+    { beat: 'persist', startMs: 12_000, endMs: 20_000 },
+    { beat: 'approve', startMs: 20_000, endMs: 32_000 },
+    { beat: 'render', startMs: 32_000, endMs: 40_000 },
+  ],
+  hold: { startMs: 27_000, endMs: 30_000 },
+  reloadEndMs: 12_600,
+} as const;
+
+/** The publisher under test; `afterEach` disposes it so a failing case cannot leak a listener. */
+let current: StagePublisher | null = null;
+
+function fromDemo(data: unknown) {
+  window.dispatchEvent(
+    new MessageEvent('message', { origin: STAGE_DEMO_ORIGIN, data })
+  );
+}
+
+function setup(
+  opts: { frameWindow?: () => Window | null; ready?: boolean } = {}
+) {
+  const section = document.createElement('section');
+  document.body.appendChild(section);
+  const posted: { m: unknown; origin: string }[] = [];
+  const frame = {
+    postMessage: (m: unknown, origin: string) => posted.push({ m, origin }),
+  } as unknown as Window;
+  const track = vi.fn();
+  const onReady = vi.fn();
+  const pub = createStagePublisher({
+    section,
+    frameWindow: opts.frameWindow ?? (() => frame),
+    track,
+    onReady,
+  });
+  current = pub;
+  // Simulate the frame's ready message
+  if (opts.ready !== false) fromDemo(READY);
+  return { section, posted, track, onReady, pub, frame };
+}
+
+afterEach(() => {
+  current?.dispose();
+  current = null;
+  document.body.innerHTML = '';
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+
+describe('stage publisher', () => {
+  it('posts t only when it changes, to the demo origin', () => {
+    const { section, posted, pub } = setup();
+    section.style.setProperty('--sc-p', '0.1');
+    pub.tick();
+    pub.tick();
+    expect(posted).toHaveLength(1);
+    expect(posted[0]).toEqual({
+      origin: STAGE_DEMO_ORIGIN,
+      m: { type: STAGE_MESSAGE_TYPE, t: timeAt(0.1, READY) },
+    });
+    section.style.setProperty('--sc-p', '0.2');
+    pub.tick();
+    expect(posted).toHaveLength(2);
+    expect(posted[1]).toEqual({
+      origin: STAGE_DEMO_ORIGIN,
+      m: { type: STAGE_MESSAGE_TYPE, t: timeAt(0.2, READY) },
+    });
+  });
+
+  it('posts no seek before ready, only a throttled hello so the frame learns the origin', () => {
+    let now = 1000;
+    vi.spyOn(performance, 'now').mockImplementation(() => now);
+    const { section, posted, pub } = setup({ ready: false });
+    section.style.setProperty('--sc-p', '0.3');
+    pub.tick();
+    now += 100;
+    pub.tick();
+    // Two ticks inside the interval: exactly one hello.
+    expect(posted).toEqual([
+      { origin: STAGE_DEMO_ORIGIN, m: { type: STAGE_MESSAGE_TYPE, t: 0 } },
+    ]);
+    now += STAGE_HELLO_INTERVAL_MS;
+    pub.tick();
+    expect(posted).toHaveLength(2);
+    expect(posted[1]).toEqual({
+      origin: STAGE_DEMO_ORIGIN,
+      m: { type: STAGE_MESSAGE_TYPE, t: 0 },
+    });
+    // Once ready arrives the hello stops and the real seek is posted.
+    fromDemo(READY);
+    now += STAGE_HELLO_INTERVAL_MS * 4;
+    pub.tick();
+    pub.tick();
+    expect(posted).toHaveLength(3);
+    expect(posted[2]).toEqual({
+      origin: STAGE_DEMO_ORIGIN,
+      m: { type: STAGE_MESSAGE_TYPE, t: timeAt(0.3, READY) },
+    });
+  });
+
+  it('says no hello while the frame window is not there yet', () => {
+    const { section, posted, pub } = setup({
+      ready: false,
+      frameWindow: () => null,
+    });
+    section.style.setProperty('--sc-p', '0.3');
+    pub.tick();
+    expect(posted).toHaveLength(0);
+  });
+
+  it('ignores messages from other origins', () => {
+    const { section } = setup();
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        origin: 'https://evil.example',
+        data: { type: STAGE_MESSAGE_TYPE, applied: 9, phase: 'render', t: 1 },
+      })
+    );
+    expect(section.getAttribute('data-sc-verify-state')).toBeNull();
+  });
+
+  it("mirrors the frame's applied state into data-sc-verify-state and the hold into data-sc-verify-hold", () => {
+    const { section, pub } = setup();
+    fromDemo({
+      type: STAGE_MESSAGE_TYPE,
+      applied: 42,
+      phase: 'stream',
+      t: 900,
+    });
+    expect(section.getAttribute('data-sc-verify-state')).toBe('stream:42');
+    const a = beatWindows()[2];
+    section.style.setProperty('--sc-p', String(a.from + (a.to - a.from) * 0.5));
+    pub.tick();
+    expect(section.getAttribute('data-sc-verify-hold')).toBe('true');
+    section.style.setProperty('--sc-p', String(a.from + (a.to - a.from) * 0.9));
+    pub.tick();
+    expect(section.getAttribute('data-sc-verify-hold')).toBeNull();
+  });
+
+  it('tracks enter once, each beat once, the threshold once, complete once', () => {
+    const { section, track, pub } = setup();
+    const a = beatWindows()[2];
+    const th = a.from + (a.to - a.from) * APPROVE_HOLD.to;
+    for (const p of [
+      0.01,
+      0.02,
+      beatWindows()[1].from + 0.01,
+      th - 0.01,
+      th + 0.01,
+      th + 0.02,
+      0.999,
+      1,
+    ]) {
+      section.style.setProperty('--sc-p', String(p));
+      pub.tick();
+    }
+    const events = track.mock.calls.map(
+      (c) => `${c[0]}${c[1] ? ':' + c[1] : ''}`
+    );
+    expect(events).toEqual([
+      'enter',
+      'beat:stream',
+      'beat:persist',
+      'beat:approve',
+      'threshold',
+      'beat:render',
+      'complete',
+    ]);
+  });
+
+  it('dispose removes the listener and stops posting', () => {
+    const { section, posted, pub } = setup();
+    pub.dispose();
+    section.style.setProperty('--sc-p', '0.5');
+    pub.tick();
+    expect(posted).toHaveLength(0);
+    // The listener is gone: a state message from the demo origin no longer lands.
+    fromDemo({ type: STAGE_MESSAGE_TYPE, applied: 7, phase: 'render', t: 1 });
+    expect(section.getAttribute('data-sc-verify-state')).toBeNull();
+  });
+
+  it('a second ready re-posts the current t, and onReady fires only once', () => {
+    const { section, posted, onReady, pub } = setup();
+    expect(onReady).toHaveBeenCalledTimes(1);
+    section.style.setProperty('--sc-p', '0.1');
+    pub.tick();
+    pub.tick();
+    expect(posted).toHaveLength(1);
+    fromDemo(READY);
+    pub.tick();
+    expect(posted).toHaveLength(2);
+    expect(posted[1]).toEqual({
+      origin: STAGE_DEMO_ORIGIN,
+      m: { type: STAGE_MESSAGE_TYPE, t: timeAt(0.1, READY) },
+    });
+    expect(onReady).toHaveBeenCalledTimes(1);
+  });
+
+  it('holds the post until frameWindow returns a window, then posts the same t', () => {
+    let w: Window | null = null;
+    const { section, posted, frame, pub } = setup({ frameWindow: () => w });
+    section.style.setProperty('--sc-p', '0.1');
+    pub.tick();
+    pub.tick();
+    expect(posted).toHaveLength(0);
+    w = frame;
+    pub.tick();
+    expect(posted).toHaveLength(1);
+    expect(posted[0]).toEqual({
+      origin: STAGE_DEMO_ORIGIN,
+      m: { type: STAGE_MESSAGE_TYPE, t: timeAt(0.1, READY) },
+    });
+    pub.tick();
+    expect(posted).toHaveLength(1);
+  });
+
+  it('ignores a malformed ready: no hold, or a beat with a non-numeric time', () => {
+    const { section, posted, onReady, pub } = setup({ ready: false });
+    // A malformed ready leaves the publisher un-ready, so the only thing it
+    // may post is the hello (t: 0), never a seek.
+    const seeks = () => posted.filter((p) => (p.m as { t: number }).t !== 0);
+    const { hold: _hold, ...noHold } = READY;
+    void _hold;
+    fromDemo(noHold);
+    section.style.setProperty('--sc-p', '0.1');
+    expect(() => pub.tick()).not.toThrow();
+    expect(seeks()).toHaveLength(0);
+    expect(onReady).not.toHaveBeenCalled();
+
+    fromDemo({
+      ...READY,
+      beats: [
+        { beat: 'stream', startMs: 'x', endMs: 12_000 },
+        ...READY.beats.slice(1),
+      ],
+    });
+    section.style.setProperty('--sc-p', '0.11');
+    expect(() => pub.tick()).not.toThrow();
+    pub.tick();
+    expect(seeks()).toHaveLength(0);
+    expect(onReady).not.toHaveBeenCalled();
+
+    // A well-formed ready afterwards still works.
+    fromDemo(READY);
+    pub.tick();
+    expect(seeks()).toEqual([
+      {
+        origin: STAGE_DEMO_ORIGIN,
+        m: { type: STAGE_MESSAGE_TYPE, t: timeAt(0.11, READY) },
+      },
+    ]);
+    expect(onReady).toHaveBeenCalledTimes(1);
+  });
+
+  /**
+   * The act's `frameWindow` returns null until the iframe's `load` event and
+   * the real window after it. The loop subscribes once, so it must read the
+   * latest deps on every tick rather than the closure it was created with —
+   * otherwise the first `t` is never posted.
+   */
+  it('the hook reads the latest deps on every tick, not the ones it mounted with', () => {
+    type IOCallback = (entries: { isIntersecting: boolean }[]) => void;
+    let ioCallback: IOCallback | null = null;
+    class IO {
+      constructor(cb: IOCallback) {
+        ioCallback = cb;
+      }
+      observe() {
+        /* the test drives the callback directly */
+      }
+      disconnect() {
+        /* no-op */
+      }
+    }
+    vi.stubGlobal('IntersectionObserver', IO);
+    // One tick per request, and only when the test pumps it.
+    const pending: FrameRequestCallback[] = [];
+    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+      pending.push(cb);
+      return pending.length;
+    });
+    vi.stubGlobal('cancelAnimationFrame', () => undefined);
+    const pump = () => {
+      const cbs = pending.splice(0);
+      cbs.forEach((cb) => cb(0));
+    };
+
+    const section = document.createElement('section');
+    document.body.appendChild(section);
+    const posted: unknown[] = [];
+    const frame = {
+      postMessage: (m: unknown, origin: string) => posted.push({ m, origin }),
+    } as unknown as Window;
+    const track = vi.fn();
+    const onReady = vi.fn();
+
+    const { rerender, unmount } = renderHook(
+      ({ frameWindow }: { frameWindow: () => Window | null }) => {
+        const ref = useRef<HTMLElement | null>(section);
+        useStagePublisher(ref, true, { frameWindow, track, onReady });
+      },
+      { initialProps: { frameWindow: () => null } }
+    );
+    act(() => {
+      fromDemo(READY);
+      ioCallback?.([{ isIntersecting: true }]);
+    });
+    expect(onReady).toHaveBeenCalledTimes(1);
+    section.style.setProperty('--sc-p', '0.25');
+    act(() => pump());
+    expect(posted).toHaveLength(0); // the frame has not loaded
+
+    rerender({ frameWindow: () => frame });
+    act(() => pump());
+    expect(posted).toHaveLength(1);
+    expect(track.mock.calls[0]?.[0]).toBe('enter');
+    unmount();
+  });
+
+  it('a throwing tick does not stop the rAF loop', () => {
+    type IOCallback = (entries: { isIntersecting: boolean }[]) => void;
+    let ioCallback: IOCallback | null = null;
+    class IO {
+      constructor(cb: IOCallback) {
+        ioCallback = cb;
+      }
+      observe() {
+        /* driven by the test */
+      }
+      disconnect() {
+        /* no-op */
+      }
+    }
+    vi.stubGlobal('IntersectionObserver', IO);
+    // Synchronous rAF, bounded so a re-arming loop cannot recurse forever.
+    const MAX_FRAMES = 6;
+    let frames = 0;
+    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+      frames += 1;
+      if (frames <= MAX_FRAMES) cb(0);
+      return frames;
+    });
+    vi.stubGlobal('cancelAnimationFrame', () => undefined);
+    const error = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined);
+
+    const section = document.createElement('section');
+    document.body.appendChild(section);
+    section.style.setProperty('--sc-p', '0.1');
+    const posted: unknown[] = [];
+    const frame = {
+      postMessage: (m: unknown, origin: string) => posted.push({ m, origin }),
+    } as unknown as Window;
+    let thrown = 0;
+    const track = vi.fn(() => {
+      if (thrown === 0) {
+        thrown += 1;
+        throw new Error('analytics down');
+      }
+    });
+
+    const { unmount } = renderHook(() => {
+      const ref = useRef<HTMLElement | null>(section);
+      useStagePublisher(ref, true, { frameWindow: () => frame, track });
+    });
+    act(() => {
+      fromDemo(READY);
+      ioCallback?.([{ isIntersecting: true }]);
+    });
+    // The first tick threw inside track('enter') before the seek; the loop
+    // re-armed and a later tick posted t.
+    expect(thrown).toBe(1);
+    expect(frames).toBeGreaterThan(1);
+    expect(posted).toHaveLength(1);
+    expect(posted[0]).toEqual({
+      origin: STAGE_DEMO_ORIGIN,
+      m: { type: STAGE_MESSAGE_TYPE, t: timeAt(0.1, READY) },
+    });
+    expect(error).toHaveBeenCalledWith(
+      '[stage] tick failed',
+      expect.any(Error)
+    );
+    unmount();
+  });
+});
diff --git a/apps/website/src/components/landing/use-stage-publisher.ts b/apps/website/src/components/landing/use-stage-publisher.ts
new file mode 100644
index 000000000..124c626b0
--- /dev/null
+++ b/apps/website/src/components/landing/use-stage-publisher.ts
@@ -0,0 +1,224 @@
+import { useEffect, useRef } from 'react';
+import {
+  beatAt,
+  crossedThreshold,
+  inHold,
+  timeAt,
+  type StageBeat,
+  type StageMilestone,
+  type StageReadyMessage,
+} from '../../lib/stage-beats';
+
+export type { StageMilestone } from '../../lib/stage-beats';
+
+export const STAGE_DEMO_ORIGIN = 'https://demo.threadplane.ai';
+export const STAGE_DEMO_URL = `${STAGE_DEMO_ORIGIN}/stage?t=0`;
+export const STAGE_MESSAGE_TYPE = 'tplane-stage';
+
+/** How often the publisher says hello to a frame that has not answered yet. */
+export const STAGE_HELLO_INTERVAL_MS = 500;
+
+export interface StagePublisherDeps {
+  section: HTMLElement;
+  /** The iframe's window, or null while it is not mounted / not navigated. */
+  frameWindow: () => Window | null;
+  track: (milestone: StageMilestone, beat?: StageBeat) => void;
+  /** Called with the frame's first `ready`; the act uses it to crossfade the poster. */
+  onReady?: () => void;
+}
+
+export interface StagePublisher {
+  /** One frame: read --sc-p, post t if it changed, update verify attributes and milestones. */
+  tick(): void;
+  dispose(): void;
+}
+
+function readProgress(el: HTMLElement): number {
+  const v = parseFloat(el.style.getPropertyValue('--sc-p'));
+  return Number.isFinite(v) ? v : 0;
+}
+
+const isFiniteNumber = (v: unknown): v is number =>
+  typeof v === 'number' && Number.isFinite(v);
+
+const isRange = (v: unknown): v is { startMs: number; endMs: number } =>
+  typeof v === 'object' &&
+  v !== null &&
+  isFiniteNumber((v as Record<string, unknown>)['startMs']) &&
+  isFiniteNumber((v as Record<string, unknown>)['endMs']);
+
+/**
+ * A `ready` message the seek math can trust. `timeAt` reads `hold.startMs`
+ * and each beat's times unguarded, and a non-numeric time yields `t = NaN`,
+ * which never equals `lastT`, so a malformed message would make the
+ * publisher post every frame. Anything failing this guard is ignored.
+ */
+function isReady(
+  d: Record<string, unknown>
+): d is Record<string, unknown> & StageReadyMessage & { ready: true } {
+  if (d['ready'] !== true) return false;
+  if (!isFiniteNumber(d['totalMs'])) return false;
+  const beats = d['beats'];
+  if (!Array.isArray(beats)) return false;
+  if (
+    !beats.every(
+      (b: unknown) =>
+        isRange(b) && typeof (b as Record<string, unknown>)['beat'] === 'string'
+    )
+  )
+    return false;
+  if (!isRange(d['hold'])) return false;
+  const reloadEndMs = d['reloadEndMs'];
+  return reloadEndMs === null || isFiniteNumber(reloadEndMs);
+}
+
+export function createStagePublisher(deps: StagePublisherDeps): StagePublisher {
+  let ready: StageReadyMessage | null = null;
+  let lastT = -1;
+  let lastP = -1;
+  let hold = false;
+  let entered = false;
+  let completed = false;
+  let thresholdSeen = false;
+  const beatsSeen = new Set<StageBeat>();
+  let disposed = false;
+  let lastHello = -Infinity;
+
+  const onMessage = (e: MessageEvent) => {
+    if (e.origin !== STAGE_DEMO_ORIGIN) return;
+    const d = e.data as Record<string, unknown> | null;
+    if (!d || typeof d !== 'object' || d['type'] !== STAGE_MESSAGE_TYPE) return;
+    if (d['ready'] === true) {
+      if (!isReady(d)) return;
+      const first = ready === null;
+      ready = d;
+      lastT = -1; // re-post the current t after a (re)ready
+      if (first) deps.onReady?.();
+      return;
+    }
+    if (typeof d['applied'] === 'number' && typeof d['phase'] === 'string') {
+      deps.section.setAttribute(
+        'data-sc-verify-state',
+        `${d['phase']}:${d['applied']}`
+      );
+    }
+  };
+  window.addEventListener('message', onMessage);
+
+  return {
+    tick() {
+      if (disposed) return;
+      const p = readProgress(deps.section);
+      // Verify hold, from scroll alone: the harness must see the authored hold even before the frame answers.
+      const h = inHold(p);
+      if (h !== hold) {
+        hold = h;
+        if (h) deps.section.setAttribute('data-sc-verify-hold', 'true');
+        else deps.section.removeAttribute('data-sc-verify-hold');
+      }
+      // Milestones.
+      if (!entered && p > 0) {
+        entered = true;
+        deps.track('enter');
+      }
+      const beat = beatAt(p);
+      if (p > 0 && !beatsSeen.has(beat)) {
+        beatsSeen.add(beat);
+        deps.track('beat', beat);
+      }
+      if (lastP >= 0 && !thresholdSeen && crossedThreshold(lastP, p)) {
+        thresholdSeen = true;
+        deps.track('threshold');
+      }
+      if (!completed && p >= 0.999) {
+        completed = true;
+        deps.track('complete');
+      }
+      lastP = p;
+      // Hello. Under a strict Referrer-Policy the frame arrives with no
+      // referrer and posts nothing (it has nowhere to answer) until it hears
+      // from an allowlisted parent; the frame learns the origin from this
+      // message and answers with `ready`. Throttled so a scroll that idles
+      // before the frame boots does not flood it.
+      if (!ready) {
+        const now = performance.now();
+        if (now - lastHello < STAGE_HELLO_INTERVAL_MS) return;
+        const w = deps.frameWindow();
+        if (!w) return;
+        w.postMessage({ type: STAGE_MESSAGE_TYPE, t: 0 }, STAGE_DEMO_ORIGIN);
+        lastHello = now;
+        return;
+      }
+      // Seek.
+      const t = timeAt(p, ready);
+      if (t === lastT) return;
+      const w = deps.frameWindow();
+      if (!w) return;
+      w.postMessage({ type: STAGE_MESSAGE_TYPE, t }, STAGE_DEMO_ORIGIN);
+      lastT = t;
+    },
+    dispose() {
+      disposed = true;
+      window.removeEventListener('message', onMessage);
+    },
+  };
+}
+
+/**
+ * Runs the publisher on animation frames while `active`, and only while the
+ * section intersects the viewport (a pinned act six viewports tall is on screen
+ * for a while; nothing is posted before it arrives or after it leaves).
+ *
+ * The publisher is created once per (sectionRef, active) mount. `deps` are
+ * kept in a ref that is refreshed on every render and read on every tick, so
+ * the act may pass unstable callbacks (a `frameWindow` that only starts
+ * returning the iframe's window after its `load` event, an inline `track`)
+ * without the loop re-subscribing or seeing stale closures.
+ *
+ * A throw inside a tick is logged and swallowed so the loop always re-arms;
+ * one bad frame must not silence the stage for the rest of the scroll.
+ */
+export function useStagePublisher(
+  sectionRef: React.RefObject<HTMLElement | null>,
+  active: boolean,
+  deps: Omit<StagePublisherDeps, 'section'>
+): void {
+  const depsRef = useRef(deps);
+  depsRef.current = deps;
+  useEffect(() => {
+    const section = sectionRef.current;
+    if (!active || !section) return;
+    const pub = createStagePublisher({
+      section,
+      frameWindow: () => depsRef.current.frameWindow(),
+      track: (m, b) => depsRef.current.track(m, b),
+      onReady: () => depsRef.current.onReady?.(),
+    });
+    let onScreen = false;
+    let frame = 0;
+    const logged = new Set<string>();
+    const loop = () => {
+      try {
+        pub.tick();
+      } catch (err) {
+        const key = err instanceof Error ? err.message : String(err);
+        if (!logged.has(key)) {
+          logged.add(key);
+          console.error('[stage] tick failed', err);
+        }
+      }
+      frame = onScreen ? requestAnimationFrame(loop) : 0;
+    };
+    const io = new IntersectionObserver((entries) => {
+      onScreen = entries.some((e) => e.isIntersecting);
+      if (onScreen && frame === 0) frame = requestAnimationFrame(loop);
+    });
+    io.observe(section);
+    return () => {
+      io.disconnect();
+      onScreen = false;
+      if (frame) cancelAnimationFrame(frame);
+      pub.dispose();
+    };
+  }, [sectionRef, active]);
+}
diff --git a/apps/website/src/lib/analytics/client.spec.ts b/apps/website/src/lib/analytics/client.spec.ts
new file mode 100644
index 000000000..44dd6494d
--- /dev/null
+++ b/apps/website/src/lib/analytics/client.spec.ts
@@ -0,0 +1,41 @@
+// @vitest-environment jsdom
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const captureSpy = vi.hoisted(() => vi.fn());
+vi.mock('posthog-js', () => ({ default: { capture: captureSpy } }));
+
+import { trackCtaClick, trackStageProgress } from './client';
+
+beforeEach(() => {
+  captureSpy.mockClear();
+});
+
+describe('analytics client', () => {
+  it('trackCtaClick captures marketing:cta_click with the source page', () => {
+    trackCtaClick({ cta_id: 'hero_install', surface: 'home' });
+    expect(captureSpy).toHaveBeenCalledWith(
+      'marketing:cta_click',
+      expect.objectContaining({ cta_id: 'hero_install', surface: 'home' })
+    );
+    expect(captureSpy.mock.calls[0][1]).toHaveProperty('source_page');
+  });
+
+  it('trackStageProgress captures marketing:stage_progress with the milestone and beat', () => {
+    trackStageProgress('beat', 'approve');
+    expect(captureSpy).toHaveBeenCalledWith(
+      'marketing:stage_progress',
+      expect.objectContaining({
+        surface: 'home_stage',
+        stage_event: 'beat',
+        beat: 'approve',
+      })
+    );
+  });
+
+  it('trackStageProgress omits the beat key when there is no beat', () => {
+    trackStageProgress('enter');
+    const props = captureSpy.mock.calls[0][1];
+    expect(props.stage_event).toBe('enter');
+    expect('beat' in props).toBe(false);
+  });
+});
diff --git a/apps/website/src/lib/analytics/client.ts b/apps/website/src/lib/analytics/client.ts
index e4ca644bf..89e9f636d 100644
--- a/apps/website/src/lib/analytics/client.ts
+++ b/apps/website/src/lib/analytics/client.ts
@@ -39,3 +39,14 @@ export function trackWhitepaperDownloadClick(paper: AnalyticsProperties['paper']
     ...properties,
   });
 }
+
+export function trackStageProgress(
+  stage_event: AnalyticsProperties['stage_event'],
+  beat?: AnalyticsProperties['beat']
+) {
+  track(analyticsEvents.marketingStageProgress, {
+    surface: 'home_stage',
+    stage_event,
+    ...(beat ? { beat } : {}),
+  });
+}
diff --git a/apps/website/src/lib/analytics/events.ts b/apps/website/src/lib/analytics/events.ts
index eedecbff7..f1fe19b5d 100644
--- a/apps/website/src/lib/analytics/events.ts
+++ b/apps/website/src/lib/analytics/events.ts
@@ -1,3 +1,5 @@
+import type { StageBeat, StageMilestone } from '../stage-beats';
+
 export const analyticsEvents = {
   marketingCtaClick: 'marketing:cta_click',
   marketingExternalLinkClick: 'marketing:external_link_click',
@@ -26,6 +28,7 @@ export const analyticsEvents = {
   blogCopyCodeClick: 'blog:copy_code_click',
   marketingAiCrawlerVisit: 'marketing:ai_crawler_visit',
   marketingAiReferralVisit: 'marketing:ai_referral_visit',
+  marketingStageProgress: 'marketing:stage_progress',
 } as const;
 
 export type AnalyticsEventName = (typeof analyticsEvents)[keyof typeof analyticsEvents];
@@ -38,6 +41,7 @@ export type AnalyticsSurface =
   | 'home_demo'
   | 'home_whitepaper'
   | 'home_medium_switcher'
+  | 'home_stage'
   | 'pricing'
   | 'docs'
   | 'blog'
@@ -139,5 +143,8 @@ export type AnalyticsProperties = {
   ai_crawler?: string;
   ai_source?: string;
   user_agent?: string;
+  /** Homepage stage milestones (`marketing:stage_progress`). */
+  stage_event?: StageMilestone;
+  beat?: StageBeat;
   [key: string]: string | number | boolean | undefined;
 };
diff --git a/apps/website/src/lib/positioning.spec.ts b/apps/website/src/lib/positioning.spec.ts
index 2931e03b4..504d75940 100644
--- a/apps/website/src/lib/positioning.spec.ts
+++ b/apps/website/src/lib/positioning.spec.ts
@@ -19,7 +19,10 @@ import {
   HOME_DESCRIPTION,
   HOME_TITLE,
   INSTALL_OPTIONS,
+  STAGE_HOLD_LINES,
+  STAGE_RAIL,
 } from './positioning';
+import { STAGE_BEATS } from './stage-beats';
 import { WEBSITE_SUPPORTED_ANGULAR_MAJORS } from '../components/pricing/angular-support.mjs';
 import { resolveWebsiteDir } from './website-dir';
 
@@ -190,3 +193,30 @@ describe('homepage restructure copy (live-stage spec §3)', () => {
     ]);
   });
 });
+
+describe('STAGE_RAIL', () => {
+  it('has one entry per beat in the beat map\'s order, three rows each, a cta, and still alt text', () => {
+    expect(STAGE_RAIL.map((b) => b.beat)).toEqual([...STAGE_BEATS]);
+    for (const b of STAGE_RAIL) {
+      // The eyebrow is the beat's name; copy swapped between entries would break this.
+      expect(b.eyebrow.toLowerCase()).toBe(b.beat);
+      expect(b.headline.length).toBeGreaterThan(20);
+      expect(b.body.length).toBeGreaterThan(40);
+      expect(b.rows).toHaveLength(3);
+      for (const row of b.rows) {
+        expect(row.claim).not.toBe('');
+        expect(row.api).not.toBe('');
+      }
+      expect(b.cta.label).not.toBe('');
+      expect(b.cta.href).toMatch(/^\//);
+      expect(b.stillAlt.length).toBeGreaterThan(40);
+    }
+  });
+  it('carries the three hold lines from the spec, ending on the threshold instruction', () => {
+    expect(STAGE_HOLD_LINES).toEqual([
+      'The pause is a checkpoint, not a modal',
+      'The run is frozen in durable state. Scroll all you like; nothing happens until someone decides',
+      'Keep scrolling to approve',
+    ]);
+  });
+});
diff --git a/apps/website/src/lib/positioning.ts b/apps/website/src/lib/positioning.ts
index 8ad47ca37..6de59344f 100644
--- a/apps/website/src/lib/positioning.ts
+++ b/apps/website/src/lib/positioning.ts
@@ -1,5 +1,6 @@
 // ── Homepage copy (spec 2026-09-02-homepage-rebuild-design.md §4.1) ──────────
 import { WEBSITE_SUPPORTED_ANGULAR_MAJORS } from '../components/pricing/angular-support.mjs';
+import type { StageBeat } from './stage-beats';
 
 export const HERO_EYEBROW = 'Open-source · Angular · LangGraph & AG-UI';
 export const HERO_H1 = 'The AI agent UI framework for Angular.';
@@ -84,6 +85,88 @@ export const PROVE_IT_ROWS = [
   { claim: 'Same UI code in test and production', api: 'Agent' },
 ] as const;
 
+// ── The stage rail (live-stage spec §4–6): the copy that stacks beside the
+// pinned demo. Strings are verbatim from the four capability acts; the still
+// alt text describes public/screenshots/stage-<beat>.webp at the beat's settle.
+/** The beat map (`stage-beats.ts`) owns the beat names; the rail copy keys off it so the two cannot drift. */
+export type StageBeatKey = StageBeat;
+export interface StageRailBeat {
+  readonly beat: StageBeatKey;
+  readonly eyebrow: string;
+  readonly headline: string;
+  readonly body: string;
+  readonly rows: readonly { readonly claim: string; readonly api: string }[];
+  readonly cta: { readonly label: string; readonly href: string };
+  /** Alt text for the fallback still: what the frame shows at this beat's settle. */
+  readonly stillAlt: string;
+}
+
+export const STAGE_RAIL: readonly StageRailBeat[] = [
+  {
+    beat: 'stream',
+    eyebrow: 'Stream',
+    headline: 'The UI stays reactive through tokens, tools, errors, and state changes.',
+    body: 'injectAgent() hands back signals: messages(), status(), error(), isLoading(), and tool progress. Nothing to subscribe to, nothing to tear down.',
+    rows: [
+      { claim: 'Signals, not promises', api: 'injectAgent()' },
+      { claim: 'Tool progress as it happens', api: 'toolProgress()' },
+      { claim: 'Same contract on LangGraph and AG-UI', api: 'Agent' },
+    ],
+    cta: { label: 'Read the streaming guide', href: '/docs/langgraph/guides/streaming' },
+    stillAlt:
+      'Threadplane chat beside its devtools: a streamed answer about Angular signals with a Sources row of three citations, and the devtools Timeline listing seven checkpoints',
+  },
+  {
+    beat: 'persist',
+    eyebrow: 'Persist',
+    headline: 'A user can leave, return, inspect history, and continue.',
+    body: 'Thread selection, history, branch and replay UI in the Angular app. Durability itself comes from the runtime and persistence layer you connect — Threadplane exposes it, it does not fake it.',
+    rows: [
+      { claim: 'Conversations restore across sessions', api: 'threadId + checkpoints' },
+      { claim: 'Branch or replay from any point', api: 'branch / replay' },
+      { claim: 'error() / status() / reload() on every agent', api: 'boundary signals' },
+    ],
+    cta: { label: 'Persistence patterns', href: '/docs/langgraph/guides/persistence' },
+    stillAlt:
+      'The thread restored after a reload and forked from an earlier checkpoint: a "Make it a haiku instead." turn with its three-line haiku reply, the cleanup prompt just sent beneath it, and the devtools Timeline showing ten checkpoints across two steps',
+  },
+  {
+    beat: 'approve',
+    eyebrow: 'Approve',
+    headline: 'Irreversible work pauses for a human decision.',
+    body: 'interrupt() freezes the run inside the checkpoint. Your UI renders the proposal; submit({ resume }) continues with the decision on the record.',
+    rows: [
+      { claim: 'The pause is a checkpoint, not a modal', api: 'interrupt()' },
+      { claim: 'The proposal renders in your UI', api: '<chat-interrupt-panel>' },
+      { claim: 'The decision lands beside the action it gated', api: 'submit({ resume })' },
+    ],
+    cta: { label: 'Interrupt patterns', href: '/docs/langgraph/guides/interrupts' },
+    stillAlt:
+      'The agent paused inside delete_backups: an "Agent paused — review needed" panel with Accept, Edit, Respond and Ignore above a five-row table of backups, two marked retain, and the devtools Timeline holding at ten checkpoints',
+  },
+  {
+    beat: 'render',
+    eyebrow: 'Render',
+    headline: 'Agent output becomes components from your design system.',
+    body: 'The agent emits constrained structured output. Angular renders registered components — json-render and A2UI both speak it — with per-component fallback and a readiness gate. No generated code runs.',
+    rows: [
+      { claim: 'Your design system, not a chat widget', api: '@threadplane/render' },
+      { claim: 'Unknown specs degrade per component', api: 'fallback + readiness gate' },
+      { claim: 'Schema on the server, trust in the client', api: 'validated specs' },
+    ],
+    cta: { label: 'See @threadplane/render', href: '/render' },
+    stillAlt:
+      "A generated contact form — Name, Email address, Subject, Message and a Send button — rendered from the agent's A2UI output inside the chat, with the render_a2ui_surface tool call above it",
+  },
+];
+
+/** Spec §6: the copy that advances while recorded time is pinned at the interrupt. */
+export const STAGE_HOLD_LINES: readonly string[] = [
+  'The pause is a checkpoint, not a modal',
+  'The run is frozen in durable state. Scroll all you like; nothing happens until someone decides',
+  'Keep scrolling to approve',
+];
+
 // ── Install variants: the ONE place install commands live on the website ─────
 export type InstallVariant = 'fake' | 'langgraph' | 'ag_ui';
 
diff --git a/apps/website/src/lib/section-media.spec.ts b/apps/website/src/lib/section-media.spec.ts
index a25543946..ac8a65d6e 100644
--- a/apps/website/src/lib/section-media.spec.ts
+++ b/apps/website/src/lib/section-media.spec.ts
@@ -51,13 +51,6 @@ describe('SECTION_MEDIA', () => {
     }
   });
 
-  it('gives persist a video, code, and live tab like ship', () => {
-    const { persist } = SECTION_MEDIA;
-    expect(persist.video).toBeTruthy();
-    expect(persist.code?.length).toBeGreaterThan(0);
-    expect(persist.live).toBeTruthy();
-  });
-
   it('gives test a code-only proof block', () => {
     const { test } = SECTION_MEDIA;
     expect(test.video).toBeUndefined();
diff --git a/apps/website/src/lib/section-media.ts b/apps/website/src/lib/section-media.ts
index 3d63e659e..faa5ee029 100644
--- a/apps/website/src/lib/section-media.ts
+++ b/apps/website/src/lib/section-media.ts
@@ -1,4 +1,4 @@
-import { AG_UI_CLIP, HITL_CLIP, LANGGRAPH_CLIP, RENDER_CLIP, SHIP_CLIP, type DemoClip } from './demo-media';
+import { AG_UI_CLIP, LANGGRAPH_CLIP, RENDER_CLIP, SHIP_CLIP, type DemoClip } from './demo-media';
 import type { SolutionCodeBlocks } from './solutions-data';
 
 /**
@@ -23,61 +23,14 @@ export interface SectionMedia {
 }
 
 export const SECTION_MEDIA: Record<
-  | 'stream'
-  | 'render'
   | 'ship'
-  | 'persist'
   | 'test'
-  | 'approve'
   | 'libLanggraph'
   | 'libChat'
   | 'libAgUi'
   | 'libRender',
   SectionMedia
 > = {
-  stream: {
-    video: LANGGRAPH_CLIP,
-    live: { featured: 'tell-me-about-coral' },
-    code: [
-      {
-        label: 'chat.component.ts — headless streaming',
-        language: 'typescript',
-        source: `export class ChatPageComponent {
-  protected readonly agent = injectAgent();
-
-  // Signals, not callbacks: the template re-renders as tokens arrive.
-  readonly messages = computed(() => this.agent.messages());
-  readonly isLoading = computed(() => this.agent.isLoading());
-
-  send(message: string) {
-    this.agent.submit({ message });
-  }
-}`,
-      },
-    ],
-  },
-  render: {
-    video: RENDER_CLIP,
-    live: { featured: 'generative-ui-contact-form' },
-    code: [
-      {
-        label: 'dashboard.component.ts — the view catalog',
-        language: 'typescript',
-        source: `import { ChatComponent, views } from '@threadplane/chat';
-
-// Your components, keyed by the name the agent uses in its spec.
-const catalog = views({
-  contact_form: ContactFormComponent,
-  bar_chart: BarChartComponent,
-  kpi_card: KpiCardComponent,
-});
-
-// <chat [agent]="agent" [views]="catalog" />
-// ChatComponent detects a JSON spec in the AI message and renders it through
-// the catalog, mounting partial specs as they stream.`,
-      },
-    ],
-  },
   ship: {
     video: SHIP_CLIP,
     live: { featured: 'tell-me-about-coral' },
@@ -91,23 +44,6 @@ const catalog = views({
   // your own records) and the conversation survives a reload, a new tab,
   // or a different device — the messages live in the checkpoint, not here.
   threadId: signal(threadIdFromUrl()),
-});`,
-      },
-    ],
-  },
-  persist: {
-    video: SHIP_CLIP,
-    live: { featured: 'tell-me-about-coral' },
-    code: [
-      {
-        label: 'app.config.ts — durable threads',
-        language: 'typescript',
-        source: `provideAgent(DEMO_AGENT, {
-  apiUrl: 'https://your-deployment.langgraph.app',
-  // The thread id is the durability boundary. Persist it (URL, storage,
-  // your own records) and the conversation survives a reload, a new tab,
-  // or a different device — the messages live in the checkpoint, not here.
-  threadId: signal(threadIdFromUrl()),
 });`,
       },
     ],
@@ -145,30 +81,6 @@ it('renders the streamed reply', async () => {
       },
     ],
   },
-  approve: {
-    video: HITL_CLIP,
-    live: { featured: 'approve-before-a-destructive' },
-    code: [
-      {
-        label: 'approval.component.ts — the gate',
-        language: 'typescript',
-        source: `export class ApprovalComponent {
-  protected readonly agent = injectAgent(APPROVAL_AGENT);
-
-  // Non-null only while the graph is paused on an interrupt.
-  readonly pendingApproval = computed(() => this.agent.interrupt());
-
-  approve() {
-    this.agent.submit({ resume: { approved: true } });
-  }
-
-  reject(reason: string) {
-    this.agent.submit({ resume: { approved: false, reason } });
-  }
-}`,
-      },
-    ],
-  },
 
   // The four library pages (/langgraph, /chat, /ag-ui, /render) reuse this
   // table for their first FeatureBlock's medium switcher — except /ag-ui,
diff --git a/apps/website/src/lib/stage-beats.spec.ts b/apps/website/src/lib/stage-beats.spec.ts
new file mode 100644
index 000000000..47e4e84e6
--- /dev/null
+++ b/apps/website/src/lib/stage-beats.spec.ts
@@ -0,0 +1,177 @@
+import { describe, expect, it } from 'vitest';
+import {
+  APPROVE_HOLD,
+  APPROVE_THRESHOLD_P,
+  STAGE_BEATS,
+  STAGE_SPAN,
+  beatAt,
+  beatWindows,
+  crossedThreshold,
+  cueFor,
+  holdLineCues,
+  inHold,
+  timeAt,
+  type StageReadyMessage,
+} from './stage-beats';
+
+const READY: StageReadyMessage = {
+  totalMs: 40_000,
+  beats: [
+    { beat: 'stream', startMs: 0, endMs: 12_000 },
+    { beat: 'persist', startMs: 12_000, endMs: 20_000 },
+    { beat: 'approve', startMs: 20_000, endMs: 32_000 },
+    { beat: 'render', startMs: 32_000, endMs: 40_000 },
+  ],
+  hold: { startMs: 27_000, endMs: 30_000 },
+  reloadEndMs: 12_600,
+};
+
+describe('beatWindows', () => {
+  it('partitions the act by the shares, in beat order, summing to the span', () => {
+    const w = beatWindows();
+    expect(w.map((x) => x.beat)).toEqual([...STAGE_BEATS]);
+    expect(w[0].from).toBe(0);
+    expect(w[w.length - 1].to).toBe(1);
+    w.slice(1).forEach((x, i) => expect(x.from).toBe(w[i].to));
+    expect(STAGE_SPAN).toBe(6);
+  });
+  it('returns one frozen table', () => {
+    const w = beatWindows();
+    expect(beatWindows()).toBe(w);
+    expect(Object.isFrozen(w)).toBe(true);
+    w.forEach((x) => expect(Object.isFrozen(x)).toBe(true));
+  });
+  it('places the approve threshold at the end of the hold', () => {
+    const a = beatWindows()[2];
+    expect(APPROVE_THRESHOLD_P).toBe(
+      a.from + (a.to - a.from) * APPROVE_HOLD.to
+    );
+  });
+});
+
+describe('timeAt', () => {
+  it('is monotonic non-decreasing across the whole act, seams included', () => {
+    const a = beatWindows()[2];
+    const seams = beatWindows().flatMap((w) => [w.from, w.to]);
+    seams.push(a.from + (a.to - a.from) * APPROVE_HOLD.from);
+    seams.push(APPROVE_THRESHOLD_P);
+    const grid = Array.from({ length: 2001 }, (_, i) => i / 2000);
+    const samples = [...grid, ...seams].sort((x, y) => x - y);
+    let last = -1;
+    for (const p of samples) {
+      const t = timeAt(p, READY);
+      expect(t).toBeGreaterThanOrEqual(last);
+      last = t;
+    }
+  });
+  it('lands each beat boundary on the recording boundary', () => {
+    const w = beatWindows();
+    w.forEach((x, i) =>
+      expect(timeAt(x.from, READY)).toBe(READY.beats[i].startMs)
+    );
+    expect(timeAt(1, READY)).toBe(READY.totalMs);
+  });
+  it('settles the reload at the persist midpoint', () => {
+    const persist = beatWindows()[1];
+    expect(timeAt((persist.from + persist.to) / 2, READY)).toBe(
+      READY.reloadEndMs
+    );
+  });
+  it('pins time at the interrupt through the hold and resumes past the threshold', () => {
+    const a = beatWindows()[2];
+    const at = (f: number) => timeAt(a.from + (a.to - a.from) * f, READY);
+    expect(at(APPROVE_HOLD.from)).toBe(READY.hold.startMs);
+    expect(at(0.5)).toBe(READY.hold.startMs);
+    expect(at(APPROVE_HOLD.to - 1e-6)).toBe(READY.hold.startMs);
+    expect(at(APPROVE_HOLD.to)).toBe(READY.hold.endMs);
+    expect(at(1)).toBe(READY.beats[2].endMs);
+  });
+  it('holds the mounted form through the render tail', () => {
+    const r = beatWindows()[3];
+    expect(timeAt(r.from + (r.to - r.from) * 0.9, READY)).toBe(READY.totalMs);
+  });
+  it('clamps outside 0..1 and falls back to linear persist without a reload', () => {
+    expect(timeAt(-1, READY)).toBe(0);
+    expect(timeAt(2, READY)).toBe(READY.totalMs);
+    const noReload = { ...READY, reloadEndMs: null };
+    const persist = beatWindows()[1];
+    expect(timeAt((persist.from + persist.to) / 2, noReload)).toBe(16_000);
+  });
+  it('degrades forward to the end of the recording when a beat is missing', () => {
+    const missing = {
+      ...READY,
+      beats: READY.beats.filter((b) => b.beat !== 'persist'),
+    };
+    const persist = beatWindows()[1];
+    expect(timeAt((persist.from + persist.to) / 2, missing)).toBe(
+      READY.totalMs
+    );
+    expect(timeAt(persist.from, missing)).not.toBe(0);
+  });
+});
+
+describe('inHold / beatAt / crossedThreshold', () => {
+  it('reports the hold only inside the approve hold range', () => {
+    const a = beatWindows()[2];
+    const at = (f: number) => a.from + (a.to - a.from) * f;
+    expect(inHold(at(0.5))).toBe(true);
+    expect(inHold(at(APPROVE_HOLD.from - 0.01))).toBe(false);
+    expect(inHold(at(0.2))).toBe(false);
+    expect(inHold(a.from)).toBe(false);
+    expect(inHold(APPROVE_THRESHOLD_P)).toBe(false);
+  });
+  it('names the beat at a progress', () => {
+    expect(beatAt(0)).toBe('stream');
+    expect(beatAt(0.999)).toBe('render');
+    expect(beatAt(1)).toBe('render');
+  });
+  it('fires only on a forward crossing', () => {
+    const a = beatWindows()[2];
+    const th = a.from + (a.to - a.from) * APPROVE_HOLD.to;
+    expect(crossedThreshold(th - 0.01, th + 0.01)).toBe(true);
+    expect(crossedThreshold(th - 0.01, th)).toBe(true);
+    expect(crossedThreshold(th + 0.01, th - 0.01)).toBe(false);
+    expect(crossedThreshold(th + 0.01, th + 0.02)).toBe(false);
+    expect(crossedThreshold(th - 0.02, th - 0.01)).toBe(false);
+  });
+  it('fires again after a rewind back below the threshold', () => {
+    const a = beatWindows()[2];
+    const th = a.from + (a.to - a.from) * APPROVE_HOLD.to;
+    expect(crossedThreshold(th - 0.01, th + 0.01)).toBe(true);
+    expect(crossedThreshold(th + 0.01, th - 0.01)).toBe(false);
+    expect(crossedThreshold(th - 0.01, th + 0.01)).toBe(true);
+  });
+});
+
+describe('cueFor', () => {
+  it('greets on the first beat, holds on the last, and fades the middle ones', () => {
+    const fmt = (n: number) => String(+n.toFixed(4));
+    const [stream, persist, , render] = beatWindows();
+    expect(cueFor('stream')).toBe(`0 ${fmt(stream.to)} 0 0.3`);
+    expect(cueFor('stream')).toMatch(/^0 0\.21\d+ 0 0\.3$/);
+    expect(cueFor('render')).toBe(`${fmt(render.from)} 1 0.3 0`);
+    expect(cueFor('persist')).toBe(`${fmt(persist.from)} ${fmt(persist.to)}`);
+  });
+});
+
+describe('holdLineCues', () => {
+  it('spreads the hold lines across the approve hold, strictly forward, inside the act', () => {
+    const a = beatWindows()[2];
+    const cues = holdLineCues(3);
+    expect(cues).toHaveLength(3);
+    const parsed = cues.map((c) => c.split(' ').map(Number));
+    parsed.forEach(([from, to]) => {
+      expect(from).toBeGreaterThanOrEqual(a.from);
+      expect(to).toBeLessThanOrEqual(1);
+      expect(to).toBeGreaterThan(from);
+    });
+    parsed
+      .slice(1)
+      .forEach(([from], i) => expect(from).toBeGreaterThan(parsed[i][0]));
+  });
+  it('lets the last cue linger past the threshold by 12% of the approve span', () => {
+    const a = beatWindows()[2];
+    const [, to] = holdLineCues(3)[2].split(' ').map(Number);
+    expect(to).toBeCloseTo(APPROVE_THRESHOLD_P + (a.to - a.from) * 0.12, 4);
+  });
+});
diff --git a/apps/website/src/lib/stage-beats.ts b/apps/website/src/lib/stage-beats.ts
new file mode 100644
index 000000000..7afeaa852
--- /dev/null
+++ b/apps/website/src/lib/stage-beats.ts
@@ -0,0 +1,168 @@
+/**
+ * Scroll → recorded time for the homepage stage (spec §5.2, §6).
+ *
+ * The shares are authored; the times come from the frame's `ready` message,
+ * so the rail's cue windows (derived from the shares) and the seek targets
+ * (derived from the recording) are two views of one table.
+ */
+export const STAGE_BEATS = ['stream', 'persist', 'approve', 'render'] as const;
+export type StageBeat = (typeof STAGE_BEATS)[number];
+
+/** The scroll milestones the publisher reports (`marketing:stage_progress`). */
+export type StageMilestone = 'enter' | 'beat' | 'threshold' | 'complete';
+
+/** Viewport-heights of scroll each beat owns. Approve is the peak by a visible margin. */
+export const STAGE_SHARES: Readonly<Record<StageBeat, number>> = {
+  stream: 1.3,
+  persist: 1.2,
+  approve: 2.4,
+  render: 1.1,
+};
+export const STAGE_SPAN = Object.values(STAGE_SHARES).reduce(
+  (a, b) => a + b,
+  0
+);
+/** Fractions of the approve beat: linear → hold → threshold and resume. */
+export const APPROVE_HOLD = { from: 0.35, to: 0.7 } as const;
+/** The last slice of the render beat holds on the mounted form. */
+export const RENDER_TAIL = 0.15;
+
+export interface StageReadyMessage {
+  totalMs: number;
+  beats: readonly { beat: StageBeat; startMs: number; endMs: number }[];
+  hold: { startMs: number; endMs: number };
+  reloadEndMs: number | null;
+}
+
+export interface BeatWindow {
+  beat: StageBeat;
+  from: number;
+  to: number;
+}
+
+/** The act partitioned by the shares, built once: every helper below reads it per frame. */
+const WINDOWS: readonly Readonly<BeatWindow>[] = Object.freeze(
+  (() => {
+    let acc = 0;
+    return STAGE_BEATS.map((beat) => {
+      const from = acc / STAGE_SPAN;
+      acc += STAGE_SHARES[beat];
+      return Object.freeze({ beat, from, to: acc / STAGE_SPAN });
+    });
+  })()
+);
+const APPROVE_WINDOW = WINDOWS[STAGE_BEATS.indexOf('approve')];
+const LAST_WINDOW = WINDOWS[WINDOWS.length - 1];
+
+/** Act progress at which the approve hold ends and the recording resumes. */
+export const APPROVE_THRESHOLD_P =
+  APPROVE_WINDOW.from +
+  (APPROVE_WINDOW.to - APPROVE_WINDOW.from) * APPROVE_HOLD.to;
+
+export function beatWindows(): readonly Readonly<BeatWindow>[] {
+  return WINDOWS;
+}
+
+const clamp01 = (x: number) => (x < 0 ? 0 : x > 1 ? 1 : x);
+const lerp = (a: number, b: number, f: number) => a + (b - a) * f;
+
+function windowAt(q: number): Readonly<BeatWindow> {
+  return WINDOWS.find((x) => q < x.to) ?? LAST_WINDOW;
+}
+
+export function beatAt(p: number): StageBeat {
+  return windowAt(clamp01(p)).beat;
+}
+
+/** Progress within the beat that owns `p`, 0..1. */
+function local(p: number): { beat: StageBeat; f: number } {
+  const q = clamp01(p);
+  const w = windowAt(q);
+  return { beat: w.beat, f: clamp01((q - w.from) / (w.to - w.from)) };
+}
+
+export function inHold(p: number): boolean {
+  const { beat, f } = local(p);
+  return beat === 'approve' && f >= APPROVE_HOLD.from && f < APPROVE_HOLD.to;
+}
+
+/** True when scroll moved forward across the approve threshold between two frames. */
+export function crossedThreshold(prevP: number, nextP: number): boolean {
+  return prevP < APPROVE_THRESHOLD_P && nextP >= APPROVE_THRESHOLD_P;
+}
+
+/**
+ * Piecewise monotonic: recorded milliseconds at act progress `p`.
+ * A beat the recording does not know degrades forward to the end of the
+ * recording rather than rewinding to the start.
+ */
+export function timeAt(p: number, ready: StageReadyMessage): number {
+  if (p >= 1) return ready.totalMs;
+  const { beat, f } = local(p);
+  const b = ready.beats.find((x) => x.beat === beat);
+  if (!b) return ready.totalMs;
+  switch (beat) {
+    case 'persist': {
+      const mid = ready.reloadEndMs;
+      if (mid === null) return Math.round(lerp(b.startMs, b.endMs, f));
+      return f < 0.5
+        ? Math.round(lerp(b.startMs, mid, f / 0.5))
+        : Math.round(lerp(mid, b.endMs, (f - 0.5) / 0.5));
+    }
+    case 'approve': {
+      if (f < APPROVE_HOLD.from)
+        return Math.round(
+          lerp(b.startMs, ready.hold.startMs, f / APPROVE_HOLD.from)
+        );
+      if (f < APPROVE_HOLD.to) return ready.hold.startMs;
+      return Math.round(
+        lerp(
+          ready.hold.endMs,
+          b.endMs,
+          (f - APPROVE_HOLD.to) / (1 - APPROVE_HOLD.to)
+        )
+      );
+    }
+    case 'render': {
+      const live = 1 - RENDER_TAIL;
+      return f >= live
+        ? ready.totalMs
+        : Math.round(lerp(b.startMs, ready.totalMs, f / live));
+    }
+    default:
+      return Math.round(lerp(b.startMs, b.endMs, f));
+  }
+}
+
+/**
+ * `data-sc-cue` for a beat's rail block: "from to rampIn rampOut" as fractions
+ * of act progress. The first beat greets (full at p = 0), the last holds to
+ * the end (no leave ramp), the middle ones fade in and out inside their window.
+ */
+export function cueFor(beat: StageBeat): string {
+  const w = WINDOWS[STAGE_BEATS.indexOf(beat)];
+  const fmt = (n: number) => String(+n.toFixed(4));
+  if (beat === STAGE_BEATS[0]) return `0 ${fmt(w.to)} 0 0.3`;
+  if (beat === STAGE_BEATS[STAGE_BEATS.length - 1])
+    return `${fmt(w.from)} 1 0.3 0`;
+  return `${fmt(w.from)} ${fmt(w.to)}`;
+}
+
+/**
+ * Cue windows for the hold lines inside the approve beat, spread across the
+ * hold range. The last cue overshoots the hold by 12% of the approve span so
+ * "Keep scrolling to approve" lingers past the threshold and the instruction
+ * is still readable as the resume begins.
+ */
+export function holdLineCues(count: number): string[] {
+  const a = APPROVE_WINDOW;
+  const span = a.to - a.from;
+  const start = a.from + span * APPROVE_HOLD.from;
+  const end = APPROVE_THRESHOLD_P;
+  const slot = (end - start) / count;
+  return Array.from({ length: count }, (_, i) => {
+    const from = start + slot * i;
+    const to = i === count - 1 ? end + span * 0.12 : from + slot * 1.15;
+    return `${+from.toFixed(4)} ${+Math.min(to, 1).toFixed(4)}`;
+  });
+}
diff --git a/apps/website/src/styles/landing.css b/apps/website/src/styles/landing.css
index efbfdce90..aa5baf8bc 100644
--- a/apps/website/src/styles/landing.css
+++ b/apps/website/src/styles/landing.css
@@ -1284,6 +1284,166 @@
   }
 }
 
+/* Stage — components/landing/Stage.tsx, StageStills.tsx, StageAct.tsx
+ * The stills are the section's default form; the pinned act replaces them on
+ * wide, motion-tolerant viewports after hydration. The stills reuse the
+ * feature-block row grammar so the two forms read as one section. */
+.stage-stills {
+  display: grid;
+  gap: 96px;
+}
+.stage-still {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  gap: 48px;
+  align-items: center;
+}
+/* Even beats mirror: the still moves right AND keeps the wide track —
+   `order` alone re-sequences placement without swapping track sizes. */
+.stage-still:nth-child(even) {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+}
+.stage-still:nth-child(even) .stage-still-visual {
+  order: 2;
+}
+.stage-still-visual {
+  border-radius: 12px;
+  overflow: hidden;
+  background: #0f1116;
+}
+.stage-still-visual picture {
+  display: block;
+}
+.stage-still-img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+@media (max-width: 900px) {
+  .stage-still,
+  .stage-still:nth-child(even) {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+  .stage-still:nth-child(even) .stage-still-visual {
+    order: 0;
+  }
+  .stage-stills {
+    gap: 64px;
+  }
+}
+
+/* The pinned act — StageAct.tsx. The engine sets the act's height inline
+ * (span × 100vh) and requires the stage to be sticky; it only warns when it
+ * is not, so the style-contract spec pins this rule. */
+.stage-act {
+  position: relative;
+}
+.stage-pin {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  height: 100svh;
+  overflow: clip;
+  display: flex;
+  align-items: center;
+}
+.stage-pin-inner {
+  display: grid;
+  grid-template-columns: 3fr 2fr;
+  gap: 48px;
+  align-items: center;
+  width: 100%;
+}
+.stage-frame {
+  display: grid;
+  gap: 12px;
+}
+.stage-frame-stage {
+  position: relative;
+  aspect-ratio: 1200 / 720;
+  background: #0f1116;
+}
+.stage-frame-poster {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  transition: opacity 300ms ease;
+}
+/* The stage is a display: the frame's interrupt panel is already inert inside
+ * /stage, and the "Open the live demo" link is the way in. */
+.stage-frame-iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  opacity: 0;
+  transition: opacity 300ms ease;
+  pointer-events: none;
+}
+.stage-act[data-state='ready'] .stage-frame-iframe {
+  opacity: 1;
+}
+.stage-act[data-state='ready'] .stage-frame-poster {
+  opacity: 0;
+}
+.stage-frame-open {
+  font-size: 13px;
+  justify-self: end;
+}
+/* The rail beats stack in one grid cell so cues crossfade in place; the hold
+ * lines share a second cell beneath. */
+.stage-rail {
+  display: grid;
+  grid-template-rows: auto auto;
+  align-content: center;
+  min-height: 60vh;
+}
+.stage-rail-beat {
+  grid-area: 1 / 1;
+}
+.stage-rail-hold {
+  grid-area: 2 / 1;
+  margin: 24px 0 0;
+  font-size: 15px;
+  line-height: 1.5;
+}
+/* Cues start hidden; the engine drives opacity and transform per frame. */
+.stage-act [data-sc-cue] {
+  opacity: 0;
+  will-change: opacity, transform;
+}
+/* Keyboard path: the pin holds ~six viewports of scroll with nothing to tab
+ * through, so the first focusable in the act skips past it. Hidden until
+ * focused, then pinned to the top-left of the act. */
+.stage-skip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  z-index: 2;
+}
+.stage-skip:focus {
+  width: auto;
+  height: auto;
+  overflow: visible;
+  clip: auto;
+  clip-path: none;
+  padding: 10px 14px;
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
 /* Shared rail for the three CodeShowcase intros — the last centered kicker
  * grammar, unified with the sitewide rail anatomy. */
 .show-intro-rail {
diff --git a/apps/website/src/styles/style-contracts.spec.ts b/apps/website/src/styles/style-contracts.spec.ts
index d47b243ab..6689d31fa 100644
--- a/apps/website/src/styles/style-contracts.spec.ts
+++ b/apps/website/src/styles/style-contracts.spec.ts
@@ -469,4 +469,20 @@ describe('style contracts', () => {
       expect(phone).toContain('.hero-demo-stage');
     });
   });
+
+  describe('landing.css stage act', () => {
+    const css = loadStylesheet('landing.css');
+
+    /**
+     * The engine sets the act's inline height and sticks `[data-sc-stage]`
+     * only if the stylesheet already makes it sticky; when it is not, the
+     * engine warns to the console and the act scrolls straight through.
+     * Cues start hidden so the engine's per-frame opacity is the only thing
+     * that reveals a rail block.
+     */
+    it('the stage pin is sticky — the engine only warns when it is not', () => {
+      expect(declarationsFor(css, '.stage-pin')).toMatch(/position:\s*sticky/);
+      expect(declarationsFor(css, '.stage-act [data-sc-cue]')).toMatch(/opacity:\s*0/);
+    });
+  });
 });
diff --git a/apps/website/src/vendor/scrollcraft/LICENSE b/apps/website/src/vendor/scrollcraft/LICENSE
new file mode 100644
index 000000000..d24ab4350
--- /dev/null
+++ b/apps/website/src/vendor/scrollcraft/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nate Herk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/apps/website/src/vendor/scrollcraft/README.md b/apps/website/src/vendor/scrollcraft/README.md
new file mode 100644
index 000000000..f1076ea7e
--- /dev/null
+++ b/apps/website/src/vendor/scrollcraft/README.md
@@ -0,0 +1,8 @@
+# scroll-craft engine (vendored)
+
+Source: https://github.com/nateherkai/scroll-craft — `plugins/nateherk-design/skills/scroll-craft/engine/scrollcraft.js`
+Commit: 0b81622 (2026-09-04). Licence: MIT (LICENSE beside this file).
+
+`scrollcraft.js` is byte-identical to upstream and MUST stay that way — `scrollcraft.spec.ts` pins its SHA-256. Upstream's CSS is deliberately not vendored: the few rules the homepage needs (the pinned `[data-sc-stage]` element sticky — the engine only warns when it is not — and `[data-sc-cue]` starting at opacity 0) are re-authored under the website's own style contract in `src/styles/landing.css` by the act that mounts the engine (`components/landing/StageAct.tsx`).
+
+To update: copy the new file, re-run `shasum -a 256`, update the hash in the spec and the commit here.
diff --git a/apps/website/src/vendor/scrollcraft/scrollcraft.d.ts b/apps/website/src/vendor/scrollcraft/scrollcraft.d.ts
new file mode 100644
index 000000000..da0a7f3bb
--- /dev/null
+++ b/apps/website/src/vendor/scrollcraft/scrollcraft.d.ts
@@ -0,0 +1,24 @@
+/** The globals `scrollcraft.js` installs. Only what the homepage uses. */
+export interface ScrollCraftAct {
+  el: HTMLElement;
+  device: 'scrub' | 'pin' | 'pan' | 'flow';
+  p: number;
+}
+export interface ScrollCraftInstance {
+  layout(): void;
+  acts: ScrollCraftAct[];
+  lerp: number;
+}
+export interface ScrollCraftGlobal {
+  mount(
+    root?: Element | Document | string,
+    opts?: { lerp?: number }
+  ): ScrollCraftInstance;
+  reduce: boolean;
+  instances: ScrollCraftInstance[];
+}
+declare global {
+  interface Window {
+    ScrollCraft?: ScrollCraftGlobal;
+  }
+}
diff --git a/apps/website/src/vendor/scrollcraft/scrollcraft.js b/apps/website/src/vendor/scrollcraft/scrollcraft.js
new file mode 100644
index 000000000..8b41ccff4
--- /dev/null
+++ b/apps/website/src/vendor/scrollcraft/scrollcraft.js
@@ -0,0 +1,1211 @@
+/* ============================================================================
+   scrollcraft: a scroll-driven interaction runtime
+   ----------------------------------------------------------------------------
+   Vanilla JS. Zero dependencies. Zero DOM generation.
+
+   The engine does NOT build your page. You author real, semantic HTML and mark
+   it up with data-sc-* attributes; the engine reads them and drives them from a
+   single scroll value on a single rAF loop. That is deliberate: a runtime that
+   generates its own DOM from a config object makes every site it touches look
+   identical, which is the failure mode this replaces.
+
+   ---------------------------------------------------------------------------
+   ACTS: the unit of scroll time
+   ---------------------------------------------------------------------------
+     <section data-sc-act="pin" data-sc-span="2.5"> ... </section>
+
+     data-sc-act   scrub | pin | pan | flow   (default: flow)
+     data-sc-clip-map="travel" opts a pinned act OUT of full-life clip mapping.
+                   By DEFAULT a scrub clip is mapped across the stage's entire
+                   on-screen life, not across its pinned travel, because a pinned
+                   stage is visible for a viewport BEFORE the pin begins (sliding
+                   up into view) and a viewport AFTER it ends (sliding off the
+                   top). Mapped to pinned travel, the clip sits on its first
+                   frame through the whole entry and its last frame through the
+                   whole exit: the reader watches a still photograph while the
+                   page moves. Pair it with data-sc-dwell, which moves quickly at
+                   the edges and settles in the middle, so the fast motion lands
+                   on the two slides and the settle lands inside the pin where
+                   the copy is. data-sc-runout is accepted and ignored; it named
+                   the old opt-in for the exit half of this.
+     data-sc-span  viewport-heights of scroll this act owns. Pinned devices only
+                   (scrub/pin/pan). Default 1.5. The engine sets the outer
+                   height and sticks the first .sc-stage / [data-sc-stage] child.
+
+     Every act exposes a normalized progress p (0..1):
+       pinned  p = (y - top) / (height - vh)
+       flow    p = (y + vh - top) / (height + vh)
+     and publishes it as --sc-p on the act element, so CSS can read it too.
+
+   ---------------------------------------------------------------------------
+   DEVICES: what p drives
+   ---------------------------------------------------------------------------
+     data-sc-scrub            on <video>. p scrubs currentTime. Blob-loaded, so
+                              it seeks without needing HTTP range support.
+     data-sc-sequence="a/{i}.webp:120:1"
+                              on <canvas>. p scrubs an image sequence
+                              (path template : frameCount : startIndex).
+     data-sc-pan="0.6"        on a wide rail inside data-sc-act="pan". p drives
+                              horizontal travel. Value = extra travel multiplier.
+     data-sc-parallax="-0.2"  translateY by rate * act-progress * viewport.
+                              Negative = moves up faster than scroll (recedes).
+     data-sc-cue="0.1 0.5"    opacity/rise keyed to p. One value = enter+hold.
+                              Two = enter..leave. Add a third for the hold point.
+     data-sc-kinetic="lines"  lines | words | chars. Splits the element and
+                              staggers its reveal across the cue window.
+     data-sc-reveal="up"      up | down | left | right | iris. clip-path wipe.
+     data-sc-count="0 4200"   number bloom across the cue window. Outside any
+                              act it ticks up once on entry instead, over
+                              data-sc-count-ms (default 1400).
+     data-sc-in               flow-section reveal, fires once on entry via
+                              IntersectionObserver (cheaper, and content that
+                              re-hides on scroll-up is a defect, not an effect).
+                              data-sc-stagger="60" on the parent staggers kids.
+     data-sc-drift="#07090c"  page background interpolates toward this colour
+                              while the act is on screen.
+
+   ---------------------------------------------------------------------------
+   WORLDFLIGHT: the page mode for one continuous flight
+   ---------------------------------------------------------------------------
+     <div data-sc-mode="worldflight" data-sc-seam="0.12">
+       <div data-sc-world>
+         <div data-sc-segment data-sc-w="1.4" data-sc-linger="0.3"
+              data-sc-waypoint="Approach">
+           <img class="sc-world__poster" src="p1.webp" alt="">
+           <video data-sc-src="leg1.mp4" data-sc-src-mobile="leg1-m.mp4"></video>
+         </div>
+         ... more segments, in flight order ...
+       </div>
+       <div data-sc-world-copy>
+         <div class="sc-world__scrim sc-scrim sc-scrim--band"></div>
+         <div data-sc-copy data-sc-window="hero"> ... </div>
+         <div data-sc-copy data-sc-window="0.34 0.56"> ... </div>
+         <div data-sc-copy data-sc-window="finale"> ... </div>
+       </div>
+       <div data-sc-spacer aria-hidden="true"></div>
+     </div>
+
+   Acts cut the page into pinned blocks, which is the right shape for a page of
+   chapters and the wrong shape for one continuous camera move: the reader hits
+   the end of an act, the stage unsticks, a static page slides past, and the next
+   act starts the whole thing again. Worldflight removes the seams by removing
+   the blocks. There is ONE fixed stage for the entire page. The only element in
+   document flow is a spacer, whose height the engine sets to the sum of the
+   segment weights plus one viewport so the last flight can finish. Scroll drives
+   the film timeline and the overlay opacity. Nothing else moves.
+
+     data-sc-w        viewport-heights this segment owns. Default 1.3.
+     data-sc-linger   dwell remap for this leg only (see lingerEase). Max 0.6.
+     data-sc-seam     crossfade band, in viewport-heights of scroll. Default 0.12.
+     data-sc-waypoint label published on --sc-seg / the sc:waypoint event, so a
+                      page can draw its own route rail. The engine draws none.
+     data-sc-window   on a copy block: "hero" | "finale" | "from to [in [out]]"
+                      as fractions of the WHOLE track.
+
+   Every clip stays mounted for the life of the page. Segments crossfade by
+   opacity over the seam band; nothing ever swaps a src, because a src swap is a
+   black frame and a black frame is the cut this mode exists to avoid.
+
+   ---------------------------------------------------------------------------
+   POINTER: interactivity that isn't scroll
+   ---------------------------------------------------------------------------
+     data-sc-tilt="8"         3D tilt toward the pointer, spring-damped, degrees.
+     data-sc-magnet="0.35"    element drifts toward the pointer inside its bounds.
+     data-sc-spotlight        publishes --sc-mx/--sc-my (0..1) for a light that
+                              follows the pointer across the surface.
+   All three are gated to (hover: hover) and (pointer: fine) and disabled under
+   prefers-reduced-motion. Touch never fires them.
+
+   ---------------------------------------------------------------------------
+   REDUCED MOTION
+   ---------------------------------------------------------------------------
+   Fewer and gentler, not zero. Cues still fade (comprehension survives), but
+   translation collapses, video clips are never fetched (the poster holds), and
+   pointer devices are inert. A worldflight still tells its whole story: the
+   posters cross-dissolve through the same seams and the same copy windows.
+
+   ---------------------------------------------------------------------------
+   THE PLAYHEAD
+   ---------------------------------------------------------------------------
+   Every scrub clip on the page, act or worldflight, is driven by one smoothed
+   playhead. Scroll only ever writes a TARGET; a standalone rAF loop walks the
+   current time toward it at a fixed fraction per frame (data-sc-lerp, default
+   0.18; 1.0 under reduced motion, which is no smoothing at all). Writes are
+   gated by a deadband and skipped while the decoder is still seeking. Without
+   the smoothing a trackpad flick reads as a stutter, because wheel events do
+   not arrive at a constant rate and a 1:1 write reproduces every gap in them.
+   ========================================================================== */
+
+(function (global) {
+  'use strict';
+
+  var reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+  var fineMQ = matchMedia('(hover: hover) and (pointer: fine)');
+  var smallMQ = matchMedia('(max-width: 860px)');
+  var coarse = matchMedia('(hover: none) and (pointer: coarse)').matches;
+  var isMobile = function () { return coarse || smallMQ.matches; };
+
+  var clamp = function (x, a, b) { return x < a ? a : x > b ? b : x; };
+  var clamp01 = function (x) { return clamp(x, 0, 1); };
+  var smooth = function (x) { x = clamp01(x); return x * x * (3 - 2 * x); };
+  var lerp = function (a, b, t) { return a + (b - a) * t; };
+
+  // Monotone dwell remap. Settles the camera mid-act (where the copy peaks) and
+  // moves quicker at the edges. f(0)=0 and f(1)=1 always, so seam frames between
+  // consecutive clips are untouched and the chain stays invisible.
+  function dwell(x, L) {
+    if (!L) return x;
+    L = clamp01(L);
+    var c = x - 0.5;
+    return (1 - L) * x + L * (4 * c * c * c + 0.5);
+  }
+
+  // Same curve, capped harder, and used per worldflight segment. Above ~0.6 the
+  // derivative at the midpoint gets low enough that the camera visibly stops
+  // dead mid-leg, which reads as a stall rather than a hold. The endpoints are
+  // fixed by construction: f(0)=0, f(1)=1, so the first and last frames of every
+  // leg are still exactly the frames the seam law matched, and the chain between
+  // legs stays invisible no matter how much dwell a leg asks for.
+  function lingerEase(x, L) {
+    if (!L) return x;
+    L = clamp(L, 0, 0.6);
+    var c = x - 0.5;
+    return (1 - L) * x + L * (4 * c * c * c + 0.5);
+  }
+
+  // The lerp is a mechanism, not a taste knob. It is exposed so a page whose
+  // clips are unusually short (where 0.18 lags behind the pointer) can tighten
+  // it, and it is never read as 0: a 0 lerp is a playhead that never moves.
+  function lerpRate(el) {
+    var v = parseFloat(el && el.getAttribute && el.getAttribute('data-sc-lerp'));
+    return isNaN(v) || v <= 0 ? 0 : clamp(v, 0.02, 1);
+  }
+
+  // ---- colour -------------------------------------------------------------
+  function parseColor(str) {
+    str = (str || '').trim();
+    var m = str.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+    if (m) {
+      var h = m[1];
+      if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+      return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+    }
+    m = str.match(/rgba?\(([^)]+)\)/i);
+    if (m) {
+      var p = m[1].split(/[,\s/]+/).filter(Boolean).map(parseFloat);
+      return [p[0], p[1], p[2]];
+    }
+    return null;
+  }
+  function mixColor(a, b, t) {
+    return 'rgb(' + Math.round(lerp(a[0], b[0], t)) + ',' +
+                    Math.round(lerp(a[1], b[1], t)) + ',' +
+                    Math.round(lerp(a[2], b[2], t)) + ')';
+  }
+
+  // ---- text splitting -----------------------------------------------------
+  // Wraps each unit in a masked span so the reveal can slide from behind a clean
+  // edge instead of just fading. Lines are measured after layout, so this must
+  // run once fonts are ready or the line boxes are wrong.
+  function splitText(el, mode) {
+    if (el.__scSplit) return el.__scSplit;
+    var text = el.textContent;
+    var units = [];
+
+    if (mode === 'chars' || mode === 'words') {
+      var parts = mode === 'chars' ? Array.from(text) : text.split(/(\s+)/);
+      el.textContent = '';
+      parts.forEach(function (t) {
+        if (/^\s+$/.test(t)) { el.appendChild(document.createTextNode(t)); return; }
+        var mask = document.createElement('span');
+        mask.className = 'sc-split';
+        var inner = document.createElement('span');
+        inner.className = 'sc-split__i';
+        inner.textContent = t;
+        mask.appendChild(inner);
+        el.appendChild(mask);
+        units.push(inner);
+      });
+    } else {
+      // lines: wrap every word, measure offsetTop, regroup words into line spans
+      var words = text.split(/\s+/).filter(Boolean);
+      el.textContent = '';
+      var probes = words.map(function (w, i) {
+        var s = document.createElement('span');
+        s.textContent = w;
+        el.appendChild(s);
+        if (i < words.length - 1) el.appendChild(document.createTextNode(' '));
+        return s;
+      });
+      var lines = [], cur = null, lastTop = null;
+      probes.forEach(function (s) {
+        var top = s.offsetTop;
+        if (lastTop === null || Math.abs(top - lastTop) > 1) { cur = []; lines.push(cur); lastTop = top; }
+        cur.push(s.textContent);
+      });
+      el.textContent = '';
+      lines.forEach(function (words, li) {
+        var mask = document.createElement('span');
+        mask.className = 'sc-split sc-split--line';
+        var inner = document.createElement('span');
+        inner.className = 'sc-split__i';
+        inner.textContent = words.join(' ');
+        mask.appendChild(inner);
+        el.appendChild(mask);
+        // Whitespace between the line spans. Without it the line boxes abut in
+        // the text layer, so selecting and copying the heading yields
+        // "even whenbreakfast" and a screen reader hears the same.
+        if (li < lines.length - 1) el.appendChild(document.createTextNode(' '));
+        units.push(inner);
+      });
+    }
+    el.classList.add('sc-is-split');
+    el.__scSplit = units;
+    return units;
+  }
+
+  // ---- number formatting --------------------------------------------------
+  function formatNum(v, template) {
+    var decimals = 0;
+    var dot = template.indexOf('.');
+    if (dot > -1) decimals = template.length - dot - 1;
+    var s = v.toFixed(decimals);
+    if (/,/.test(template) || Math.abs(v) >= 10000) {
+      var bits = s.split('.');
+      bits[0] = bits[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+      s = bits.join('.');
+    }
+    return s;
+  }
+
+  // =========================================================================
+  function mount(root, opts) {
+    root = typeof root === 'string' ? document.querySelector(root) : (root || document);
+    opts = opts || {};
+
+    var acts = [];
+    var worlds = [];
+    var drifts = [];
+    var playheads = [];
+    var scrollEls = [];
+    var vh = innerHeight, vw = innerWidth;
+    var y = 0, needsLayout = true;
+    var progressBar = root.querySelector('[data-sc-progress]');
+    var docEl = document.documentElement;
+
+    // One rate for the page, overridable per clip. Read from the mount root, the
+    // document element, or the option bag, in that order.
+    var LERP = lerpRate(root.nodeType === 1 ? root : null) ||
+               lerpRate(docEl) ||
+               (opts.lerp > 0 ? clamp(opts.lerp, 0.02, 1) : 0) ||
+               0.18;
+
+    // Every scrub clip on the page lives here, whatever drives it. tick() walks
+    // this one list, so an act clip and a worldflight leg get the same playhead.
+    function makeClip(v, host) {
+      var rec = {
+        el: v, host: host || v,
+        ready: false, loading: false, painted: false,
+        cur: 0, target: 0, live: false, stuckAt: 0,
+        lerp: lerpRate(v) || LERP
+      };
+      v.muted = true; v.playsInline = true; v.preload = 'none';
+      v.setAttribute('muted', ''); v.setAttribute('playsinline', '');
+      playheads.push(rec);
+      return rec;
+    }
+
+    // ---- collect acts -----------------------------------------------------
+    Array.prototype.forEach.call(root.querySelectorAll('[data-sc-act]'), function (el) {
+      var device = el.getAttribute('data-sc-act') || 'flow';
+      var pinned = device === 'scrub' || device === 'pin' || device === 'pan';
+      var act = {
+        el: el,
+        device: device,
+        pinned: pinned,
+        span: parseFloat(el.getAttribute('data-sc-span')) || (pinned ? 1.5 : 0),
+        dwell: parseFloat(el.getAttribute('data-sc-dwell')) || 0,
+        clipTravel: pinned && el.getAttribute('data-sc-clip-map') === 'travel',
+        p: 0, raw: 0, top: 0, height: 0, live: false,
+        cues: [], parallax: [], reveals: [], counts: [],
+        video: null, seq: null, rail: null
+      };
+
+      if (pinned) {
+        act.stage = el.querySelector('[data-sc-stage]') || el.querySelector('.sc-stage');
+        if (act.stage) act.stage.classList.add('sc-stage');
+        el.classList.add('sc-act--pinned');
+      }
+
+      // scrub video
+      var v = el.querySelector('video[data-sc-scrub]');
+      if (v) act.video = makeClip(v, el);
+
+      // image sequence
+      var cv = el.querySelector('canvas[data-sc-sequence]');
+      if (cv) {
+        var spec = cv.getAttribute('data-sc-sequence').split(':');
+        act.seq = {
+          el: cv, ctx: cv.getContext('2d', { alpha: false }),
+          tpl: spec[0], count: parseInt(spec[1], 10) || 1, start: parseInt(spec[2], 10) || 0,
+          frames: [], loaded: 0, drawn: -1
+        };
+      }
+
+      // horizontal rail
+      act.rail = el.querySelector('[data-sc-pan]');
+      if (act.rail) act.railExtra = parseFloat(act.rail.getAttribute('data-sc-pan')) || 0;
+
+      // cues
+      Array.prototype.forEach.call(el.querySelectorAll('[data-sc-cue]'), function (c) {
+        var nums = (c.getAttribute('data-sc-cue') || '').trim().split(/\s+/).map(parseFloat);
+        // from [to [rampIn [rampOut]]]
+        // rampIn/rampOut are fractions OF THE WINDOW, defaulting to 0.3 each.
+        // That leaves a ~40% plateau at full opacity in the middle. Without a
+        // plateau a cue is a triangle: it touches opacity 1 for a single
+        // instant, so the reader has to stop on exactly the right pixel to see
+        // the line at full strength, and every heading reads as slightly faded.
+        var cue = {
+          el: c,
+          from: isNaN(nums[0]) ? 0 : nums[0],
+          to: nums.length > 1 && !isNaN(nums[1]) ? nums[1] : null,
+          rIn: nums.length > 2 && !isNaN(nums[2]) ? clamp01(nums[2]) : 0.3,
+          rOut: nums.length > 3 && !isNaN(nums[3]) ? clamp01(nums[3]) : null,
+          rise: parseFloat(c.getAttribute('data-sc-rise')),
+          kinetic: c.getAttribute('data-sc-kinetic'),
+          units: null, state: -1
+        };
+        if (cue.rOut === null) cue.rOut = (nums.length > 2 && !isNaN(nums[2])) ? 0.3 : 0.3;
+        if (isNaN(cue.rise)) cue.rise = 1;
+        act.cues.push(cue);
+      });
+
+      // parallax
+      Array.prototype.forEach.call(el.querySelectorAll('[data-sc-parallax]'), function (c) {
+        act.parallax.push({ el: c, rate: parseFloat(c.getAttribute('data-sc-parallax')) || 0 });
+      });
+
+      // reveals
+      Array.prototype.forEach.call(el.querySelectorAll('[data-sc-reveal]'), function (c) {
+        var nums = (c.getAttribute('data-sc-reveal-at') || '0 0.5').trim().split(/\s+/).map(parseFloat);
+        act.reveals.push({ el: c, dir: c.getAttribute('data-sc-reveal') || 'up', from: nums[0] || 0, to: nums[1] || 0.5 });
+      });
+
+      // counters
+      Array.prototype.forEach.call(el.querySelectorAll('[data-sc-count]'), function (c) {
+        var nums = (c.getAttribute('data-sc-count') || '').trim().split(/\s+/);
+        var at = (c.getAttribute('data-sc-count-at') || '0.1 0.55').trim().split(/\s+/).map(parseFloat);
+        // Strip separators before parsing so the author can write the target
+        // exactly as it should render. Without this, "0 3,500" parses the target
+        // as 3 (the comma stops parseFloat) and "0 3500" renders "3500", because
+        // formatNum only adds separators above 10,000. So any real figure between
+        // 1,000 and 9,999 could not be shown the way it is written everywhere
+        // else on the page. The template still drives the formatting.
+        var num = function (s) { return parseFloat(String(s).replace(/,/g, '')) || 0; };
+        act.counts.push({
+          el: c, a: num(nums[0]), b: num(nums[1]),
+          tpl: nums[1] || '0', from: at[0], to: at[1], last: null
+        });
+      });
+
+      acts.push(act);
+
+      var d = el.getAttribute('data-sc-drift');
+      if (d) { var rgb = parseColor(d); if (rgb) drifts.push({ act: act, rgb: rgb }); }
+    });
+
+    // ---- collect worldflights --------------------------------------------
+    Array.prototype.forEach.call(root.querySelectorAll('[data-sc-mode="worldflight"]'), function (el) {
+      var W = {
+        el: el,
+        stage: el.querySelector('[data-sc-world]') || el.querySelector('.sc-world'),
+        copyLayer: el.querySelector('[data-sc-world-copy]') || el.querySelector('.sc-world__copy'),
+        spacer: el.querySelector('[data-sc-spacer]') || el.querySelector('.sc-world__spacer'),
+        seam: 0, segs: [], copies: [], total: 0, top: 0, index: -1, checked: false
+      };
+      var seam = parseFloat(el.getAttribute('data-sc-seam'));
+      // A seam wider than the shortest leg would have three clips dissolving at
+      // once and no leg ever fully present. Cap it well under that.
+      W.seam = isNaN(seam) || seam <= 0 ? 0.12 : clamp(seam, 0.02, 0.4);
+      if (W.stage) W.stage.classList.add('sc-world');
+      if (W.copyLayer) W.copyLayer.classList.add('sc-world__copy');
+      if (W.spacer) W.spacer.classList.add('sc-world__spacer');
+
+      Array.prototype.forEach.call(el.querySelectorAll('[data-sc-segment]'), function (s) {
+        var seg = {
+          el: s,
+          w: parseFloat(s.getAttribute('data-sc-w')) || 1.3,
+          linger: clamp(parseFloat(s.getAttribute('data-sc-linger')) || 0, 0, 0.6),
+          label: s.getAttribute('data-sc-waypoint') || '',
+          poster: s.querySelector('[data-sc-poster]') || s.querySelector('.sc-world__poster') || s.querySelector('img'),
+          c0: 0, c1: 0, local: 0, op: -1, z: -1, clip: null
+        };
+        s.classList.add('sc-world__seg');
+        if (seg.poster) seg.poster.classList.add('sc-world__poster');
+        var v = s.querySelector('video');
+        if (v) {
+          // Mark it as a scrub clip whether or not the author did. Everything
+          // downstream, the stylesheet and the verification harness included,
+          // finds scrub media by this attribute.
+          v.setAttribute('data-sc-scrub', '');
+          seg.clip = makeClip(v, s);
+        }
+        W.segs.push(seg);
+      });
+
+      var run = 0;
+      W.segs.forEach(function (s) { s.c0 = run; run += Math.max(s.w, 0.1); s.c1 = run; });
+      W.total = Math.max(run, 0.001);
+
+      Array.prototype.forEach.call(el.querySelectorAll('[data-sc-copy]'), function (cEl) {
+        var spec = (cEl.getAttribute('data-sc-window') || '').trim();
+        var q = { el: cEl, from: 0, to: 1, rIn: 0.3, rOut: 0.3, state: -1 };
+        var first = W.segs[0], last = W.segs[W.segs.length - 1];
+        if (spec === 'hero') {
+          // Present the instant the reader lands. A hero that fades IN has to
+          // fade in from nothing over an empty first screen, which is the one
+          // moment on the page where there is nothing else to look at.
+          q.from = 0;
+          q.to = first ? (0.62 * first.w) / W.total : 0.3;
+          q.rIn = 0; q.rOut = 0.65;
+        } else if (spec === 'finale') {
+          q.from = last ? (last.c0 + 0.4 * last.w) / W.total : 0.7;
+          q.to = 1; q.rIn = 0.55; q.rOut = 0;
+        } else {
+          var n = spec.split(/\s+/).map(parseFloat);
+          q.from = isNaN(n[0]) ? 0 : clamp01(n[0]);
+          q.to = (n.length > 1 && !isNaN(n[1])) ? clamp01(n[1]) : clamp01(q.from + 0.18);
+          if (n.length > 2 && !isNaN(n[2])) q.rIn = clamp01(n[2]);
+          if (n.length > 3 && !isNaN(n[3])) q.rOut = clamp01(n[3]);
+        }
+        if (q.to <= q.from) q.to = clamp01(q.from + 0.05);
+        W.copies.push(q);
+      });
+
+      worlds.push(W);
+    });
+
+    // ---- flow reveals (fire once) ----------------------------------------
+    var io = null;
+    if ('IntersectionObserver' in window) {
+      io = new IntersectionObserver(function (entries) {
+        entries.forEach(function (e) {
+          if (!e.isIntersecting) return;
+          var el = e.target;
+          el.classList.add('sc-in');
+          var stagger = parseFloat(el.getAttribute('data-sc-stagger'));
+          if (!isNaN(stagger)) {
+            Array.prototype.forEach.call(el.children, function (kid, i) {
+              kid.style.transitionDelay = (i * stagger) + 'ms';
+              kid.classList.add('sc-in');
+            });
+          }
+          io.unobserve(el);
+        });
+      }, { rootMargin: '0px 0px -12% 0px', threshold: 0.01 });
+      Array.prototype.forEach.call(root.querySelectorAll('[data-sc-in]'), function (el) { io.observe(el); });
+    } else {
+      Array.prototype.forEach.call(root.querySelectorAll('[data-sc-in]'), function (el) { el.classList.add('sc-in'); });
+    }
+
+    // ---- entry counters (fire once) --------------------------------------
+    // A [data-sc-count] outside any pinned act is not scrubbed by scroll; it
+    // ticks up once when it enters view, over data-sc-count-ms (default 1400).
+    // Same formatting rules as the act counter: write the target as it should
+    // render. Reduced motion writes the final value and never animates.
+    (function () {
+      var ease = function (t) { return 1 - Math.pow(1 - t, 3); };
+      var num = function (s) { return parseFloat(String(s).replace(/,/g, '')) || 0; };
+      var spec = function (c) { return (c.getAttribute('data-sc-count') || '').trim().split(/\s+/); };
+      var els = Array.prototype.filter.call(root.querySelectorAll('[data-sc-count]'), function (c) {
+        return !c.closest('[data-sc-act]');
+      });
+      if (!els.length) return;
+      function run(c) {
+        var nums = spec(c);
+        var a = num(nums[0]), b = num(nums[1]), tpl = nums[1] || '0';
+        var ms = parseFloat(c.getAttribute('data-sc-count-ms')) || 1400;
+        if (reduce || ms <= 0) { c.textContent = formatNum(b, tpl); return; }
+        var t0 = null, last = null;
+        function frame(now) {
+          if (t0 === null) t0 = now;
+          var t = Math.min((now - t0) / ms, 1);
+          var out = formatNum(a + (b - a) * ease(t), tpl);
+          if (out !== last) { c.textContent = out; last = out; }
+          if (t < 1) requestAnimationFrame(frame);
+        }
+        requestAnimationFrame(frame);
+      }
+      els.forEach(function (c) { var n = spec(c); c.textContent = formatNum(num(n[0]), n[1] || '0'); });
+      if ('IntersectionObserver' in window) {
+        var cio = new IntersectionObserver(function (entries) {
+          entries.forEach(function (e) {
+            if (!e.isIntersecting) return;
+            run(e.target); cio.unobserve(e.target);
+          });
+        }, { rootMargin: '0px 0px -10% 0px', threshold: 0.5 });
+        els.forEach(function (c) { cio.observe(c); });
+      } else {
+        els.forEach(run);
+      }
+    })();
+
+    // ---- layout -----------------------------------------------------------
+    function layout() {
+      vh = innerHeight; vw = innerWidth;
+      acts.forEach(function (a) {
+        if (a.pinned) a.el.style.height = (a.span * 100) + 'vh';
+      });
+      // The spacer is the whole document flow of a worldflight. Its height is
+      // the sum of the leg weights plus one viewport: without that extra screen
+      // the track runs out at the moment the last leg reaches p=1, so the last
+      // leg's final second is a place the reader can never actually stop.
+      // Set in pixels, not vh, because .sc-world is sized in svh on phones and a
+      // vh/svh mismatch would put the track and the stage on different rulers.
+      worlds.forEach(function (W) {
+        if (W.spacer) W.spacer.style.height = Math.round((W.total + 1) * vh) + 'px';
+      });
+      acts.forEach(function (a) {
+        var r = a.el.getBoundingClientRect();
+        a.top = r.top + scrollY;
+        a.height = r.height;
+      });
+      if (acts.length) {
+        acts.forEach(function (a) {
+          if (a.seq && a.seq.el) {
+            var box = a.seq.el.getBoundingClientRect();
+            var dpr = Math.min(devicePixelRatio || 1, 2);
+            a.seq.el.width = Math.round(box.width * dpr);
+            a.seq.el.height = Math.round(box.height * dpr);
+            a.seq.drawn = -1;
+          }
+        });
+      }
+      // A pinned act whose stage is not actually sticky fails silently: the
+      // stage just scrolls by, the copy cues correctly against a frame nobody
+      // can see, and every automated check passes. Any author rule that sets
+      // `position` on the stage causes it. Say so.
+      acts.forEach(function (a) {
+        if (!a.pinned || !a.stage || a.stageChecked) return;
+        a.stageChecked = true;
+        var pos = getComputedStyle(a.stage).position;
+        if (pos !== 'sticky' && pos !== '-webkit-sticky') {
+          console.warn('[scrollcraft] act "' + (a.el.id || a.device) + '" will not pin: its stage computes ' +
+            'position:' + pos + ', not sticky. Something is overriding .sc-stage.', a.stage);
+        }
+      });
+
+      worlds.forEach(function (W) {
+        W.top = W.el.getBoundingClientRect().top + scrollY;
+        if (W.checked) return;
+        W.checked = true;
+        if (!W.stage) {
+          console.warn('[scrollcraft] worldflight has no [data-sc-world] stage; nothing will fly.', W.el);
+          return;
+        }
+        if (!W.spacer) {
+          console.warn('[scrollcraft] worldflight has no [data-sc-spacer]; the page has no scroll track.', W.el);
+        }
+        // The same silent failure as an unpinned act, one level worse: a stage
+        // that is not fixed scrolls away and takes the whole page with it, while
+        // every progress number still reads correctly.
+        var wp = getComputedStyle(W.stage).position;
+        if (wp !== 'fixed') {
+          console.warn('[scrollcraft] worldflight stage computes position:' + wp + ', not fixed. ' +
+            'Something is overriding .sc-world, and the flight will scroll off screen.', W.stage);
+        }
+      });
+
+      needsLayout = false;
+      read();
+    }
+
+    // ---- video ------------------------------------------------------------
+    function loadVideo(a) { loadClip(a.video); }
+    function loadClip(V) {
+      // Under reduced motion the clip is never fetched. The poster holds the
+      // frame and the copy still cues, so the page reads without the decode.
+      if (reduce || !V || V.loading) return;
+      var src = V.el.getAttribute('data-sc-src') ||
+                (isMobile() && V.el.getAttribute('data-sc-src-mobile')) ||
+                V.el.currentSrc || V.el.src;
+      if (isMobile() && V.el.getAttribute('data-sc-src-mobile')) src = V.el.getAttribute('data-sc-src-mobile');
+      if (!src) return;
+      V.loading = true;
+      fetch(src).then(function (r) { if (!r.ok) throw new Error(r.status); return r.blob(); })
+        .then(function (blob) {
+          // Listeners and preload BEFORE src. Assigning src starts the load, so
+          // attaching afterwards and then calling load() restarts it and aborts
+          // the first request (visible as ERR_ABORTED on the blob URL).
+          V.el.addEventListener('loadedmetadata', function () {
+            V.ready = true;
+            // Force one seek even when the target is already 0. The reveal is
+            // gated on a 'seeked' event, and the raf loop only seeks when the
+            // time actually needs to change, so a clip sitting at the very top
+            // of its act would never seek, never fire 'seeked', and never
+            // replace its poster until the reader scrolled it off zero.
+            try { V.el.currentTime = Math.max(V.target * (V.el.duration || 1), 0.001); } catch (e) {}
+            read();
+            // Prime the decoder the moment the clip can be primed, without
+            // waiting for a gesture. A muted inline play() is allowed with no
+            // user activation on every platform except a restricted one (Low
+            // Power Mode, data saver), and there the rejection is harmless: the
+            // gesture listeners below retry on the next real touch.
+            primeClip(V);
+          });
+          // Reveal only once a real frame has painted. iOS keeps a seeked-but-
+          // never-played muted video blank, so hiding the poster on metadata
+          // alone flashes an empty stage.
+          var reveal = function () {
+            if (V.painted) return;
+            V.painted = true;
+            V.host.classList.add('sc-has-clip');
+            V.el.classList.add('sc-has-clip');
+          };
+          V.el.addEventListener('seeked', reveal, { once: true });
+          // Never let visibility depend only on an event that may not arrive.
+          // On iOS a clip that has not been played can accept a seek and never
+          // fire 'seeked', which leaves the element at opacity 0 for the life of
+          // the page: the poster stays up, the act looks frozen, and every later
+          // act is fine because by then the reader has touched the screen and
+          // the decoder is live. Reveal on a timer as well. A stage that is
+          // briefly blank is a smaller fault than one that never shows its clip.
+          setTimeout(reveal, 2500);
+          V.el.preload = 'auto';
+          V.el.muted = true;            // as a property, not only an attribute
+          V.el.playsInline = true;
+          V.el.src = URL.createObjectURL(blob);
+        })
+        .catch(function () { V.loading = false; });
+    }
+
+    // ---- image sequence ---------------------------------------------------
+    function loadSeq(a) {
+      var S = a.seq;
+      if (!S || S.frames.length) return;
+      for (var i = 0; i < S.count; i++) {
+        (function (i) {
+          var img = new Image();
+          img.decoding = 'async';
+          img.src = S.tpl.replace('{i}', String(S.start + i))
+                         .replace('{ii}', String(S.start + i).padStart(2, '0'))
+                         .replace('{iii}', String(S.start + i).padStart(3, '0'))
+                         .replace('{iiii}', String(S.start + i).padStart(4, '0'));
+          img.onload = function () { S.loaded++; if (S.loaded === 1) S.drawn = -1; };
+          S.frames[i] = img;
+        })(i);
+      }
+    }
+    function drawSeq(a) {
+      var S = a.seq;
+      if (!S || !S.frames.length) return;
+      var idx = clamp(Math.round(a.p * (S.count - 1)), 0, S.count - 1);
+      if (idx === S.drawn) return;
+      var img = S.frames[idx];
+      if (!img || !img.complete || !img.naturalWidth) return;
+      var cw = S.el.width, ch = S.el.height;
+      // cover fit
+      var scale = Math.max(cw / img.naturalWidth, ch / img.naturalHeight);
+      var w = img.naturalWidth * scale, h = img.naturalHeight * scale;
+      S.ctx.drawImage(img, (cw - w) / 2, (ch - h) / 2, w, h);
+      S.drawn = idx;
+    }
+
+    // ---- worldflight ------------------------------------------------------
+    // t is the position along the flight, measured in viewport-heights of
+    // scroll, so every number here is in the same unit the author wrote the
+    // weights in. There is no per-segment geometry to read: the stage never
+    // moves, so nothing needs measuring on scroll.
+    function readWorld(W) {
+      if (!W.segs.length) return;
+      var S = W.seam;
+      var t = clamp((y - W.top) / Math.max(vh, 1), 0, W.total);
+      var pr = t / W.total;
+      var i, s;
+
+      // The current leg is the last one whose crossfade has begun.
+      var k = 0;
+      for (i = 0; i < W.segs.length; i++) if (t >= W.segs[i].c0 - S / 2) k = i;
+
+      for (i = 0; i < W.segs.length; i++) {
+        s = W.segs[i];
+        var local = clamp01((t - s.c0) / Math.max(s.w, 0.001));
+        s.local = local;
+
+        // Fetch a leg only while it is within reach. Loading the whole flight up
+        // front is tens of megabytes before the first frame paints; loading it
+        // on arrival means arriving at a poster.
+        if (s.clip && t > s.c0 - 1.6 && t < s.c1 + 1.6) loadClip(s.clip);
+
+        // Opacity. The incoming leg fades UP over the outgoing one, which holds
+        // at full strength underneath until it is completely covered. Fading
+        // both halves of a crossfade is what puts the page ground through the
+        // middle of the seam and reads as a flash.
+        var op;
+        if (i > k) op = 0;
+        else if (i === k) op = i === 0 ? 1 : smooth((t - (s.c0 - S / 2)) / S);
+        else op = t < s.c1 + S / 2 ? 1 : 0;
+
+        var z = i === k ? 120 : Math.round(100 + op * 10);
+        if (op !== s.op) {
+          s.el.style.opacity = op.toFixed(3);
+          // A leg at zero must stop compositing entirely. Six full-bleed video
+          // layers all painting at opacity 0 costs the same as painting them.
+          s.el.style.visibility = op > 0.002 ? 'visible' : 'hidden';
+          s.op = op;
+        }
+        if (z !== s.z) { s.el.style.zIndex = String(z); s.z = z; }
+
+        if (s.clip) {
+          s.clip.live = op > 0.002;
+          s.clip.target = lingerEase(local, s.linger);
+        }
+        // Until a real frame has painted, the poster carries the move. A still
+        // that sits perfectly still while the page scrolls announces itself as a
+        // placeholder; a slow push in reads as the camera already flying.
+        if (s.poster && !reduce && !(s.clip && s.clip.painted) && op > 0.002) {
+          s.poster.style.transform = 'scale(' + (1.03 + local * 0.14).toFixed(4) + ')';
+        }
+      }
+
+      for (var c = 0; c < W.copies.length; c++) {
+        var q = W.copies[c];
+        var win = Math.max(q.to - q.from, 0.001);
+        var inEnd = q.from + win * q.rIn;
+        var outStart = q.to - win * q.rOut;
+        var vis;
+        // A hero declares rIn 0, so inEnd sits exactly on `from` and the ramp
+        // branch is skipped: the block is simply present from the first pixel.
+        if (pr < q.from) vis = 0;
+        else if (pr < inEnd) vis = smooth((pr - q.from) / Math.max(inEnd - q.from, 0.001));
+        else if (pr <= outStart) vis = 1;
+        else vis = smooth(1 - (pr - outStart) / Math.max(q.to - outStart, 0.001));
+        vis = clamp01(vis);
+
+        // The ONLY transform on the copy side, and it is capped at 4vh across
+        // the whole window. Anything larger stops reading as a parallax layer
+        // over a moving world and starts reading as a second page scrolling at a
+        // different speed, which is the exact cheapness this mode replaces.
+        var wp = clamp01((pr - q.from) / win);
+        q.el.style.opacity = vis.toFixed(3);
+        q.el.style.transform = reduce ? 'none'
+          : 'translate3d(0,' + ((0.5 - wp) * 4).toFixed(2) + 'vh,0)';
+        var on = vis > 0.5;
+        if (on !== (q.state === 1)) { q.state = on ? 1 : 0; q.el.style.pointerEvents = on ? 'auto' : 'none'; }
+      }
+
+      // Publish the route, draw none of it. A gauge, a map, a leg counter and a
+      // set of chapter dots are all the same two numbers, and a runtime that
+      // ships one of them ships it to every page that uses this mode.
+      var cur = W.segs[k];
+      W.el.style.setProperty('--sc-seg', String(k));
+      W.el.style.setProperty('--sc-segp', cur.local.toFixed(4));
+      docEl.style.setProperty('--sc-seg', String(k));
+      docEl.style.setProperty('--sc-segp', cur.local.toFixed(4));
+      if (k !== W.index) {
+        W.index = k;
+        try {
+          W.el.dispatchEvent(new CustomEvent('sc:waypoint', {
+            bubbles: true,
+            detail: { index: k, count: W.segs.length, label: cur.label, el: cur.el, progress: pr }
+          }));
+        } catch (e) {}
+      }
+    }
+
+    // ---- per-frame scroll read -------------------------------------------
+    function read() {
+      y = scrollY || pageYOffset;
+      var driftA = null, driftB = null, driftT = 0;
+      var maxY = Math.max((document.documentElement.scrollHeight || 0) - vh, 1);
+
+      for (var i = 0; i < acts.length; i++) {
+        var a = acts[i];
+        var raw;
+        if (a.pinned) {
+          var travel = Math.max(a.height - vh, 1);
+          raw = clamp01((y - a.top) / travel);
+        } else {
+          raw = clamp01((y + vh - a.top) / (a.height + vh));
+        }
+        a.raw = raw;
+        a.p = a.dwell ? dwell(raw, a.dwell) : raw;
+
+        // Clip time is NOT cue time. Cues belong to the pin, so they keep using
+        // `p`. The clip belongs to the stage, and the stage is on screen for one
+        // viewport before the pin starts and one after it ends. Driving the clip
+        // from `p` therefore parks it on frame one for the whole entry slide and
+        // on its last frame for the whole exit slide, which is a still
+        // photograph moving up the screen under the reader's hand.
+        //
+        // So map the clip across the stage's entire visible life instead. Both
+        // ends are clamped to scroll that actually exists: an act at the top of
+        // the document has no entry slide and must still start on frame one, and
+        // an act near the bottom must still reach its last frame while the page
+        // can still scroll.
+        a.vp = a.p;
+        if (a.pinned && !a.clipTravel) {
+          var startY = a.top - Math.min(vh, a.top);
+          var endY = Math.min(a.top + a.height, maxY);
+          var vraw = clamp01((y - startY) / Math.max(endY - startY, 1));
+          a.vp = a.dwell ? dwell(vraw, a.dwell) : vraw;
+        }
+        a.live = (y > a.top - vh * 1.25) && (y < a.top + a.height + vh * 1.25);
+        a.el.style.setProperty('--sc-p', a.p.toFixed(4));
+
+        // Fetch earlier than we drive. A 1080p clip is megabytes, and a reader
+        // who scrolls briskly will otherwise arrive at a stage that is still
+        // downloading and see a poster where the camera move should be.
+        var warm = (y > a.top - vh * 3) && (y < a.top + a.height + vh * 1.5);
+        if (warm) {
+          if (a.video) loadVideo(a);
+          if (a.seq) loadSeq(a);
+        }
+        if (a.live && a.seq) drawSeq(a);
+        if (a.video) { a.video.live = a.live; if (a.video.ready) a.video.target = a.vp; }
+
+        // horizontal rail
+        if (a.rail) {
+          var over = a.rail.scrollWidth - vw;
+          if (over > 0) {
+            var extra = over * (a.railExtra || 0);
+            a.rail.style.transform = 'translate3d(' + (-(over + extra) * a.p).toFixed(2) + 'px,0,0)';
+          }
+        }
+
+        if (!a.live) {
+          // An act that scrolls out of range must release its cues rather than
+          // freezing them at whatever they last were. A "hold" cue left at
+          // opacity 1 keeps its element hit-testable and paintable long after
+          // its act is gone, which shows up as a stray headline over a later
+          // section. Zero once, then leave it alone.
+          if (a.parked !== true) {
+            for (var z = 0; z < a.cues.length; z++) {
+              var pq = a.cues[z];
+              pq.el.style.opacity = '0';
+              pq.el.style.pointerEvents = 'none';
+              pq.state = 0;
+              if (pq.units) for (var zu = 0; zu < pq.units.length; zu++) pq.units[zu].style.opacity = '0';
+            }
+            a.parked = true;
+          }
+          continue;
+        }
+        a.parked = false;
+
+        // cues
+        for (var c = 0; c < a.cues.length; c++) {
+          var q = a.cues[c];
+          var vis;
+          if (q.to === null) {
+            vis = smooth((a.p - q.from) / 0.18);
+          } else {
+            var win = Math.max(q.to - q.from, 0.001);
+            var inEnd = q.from + win * q.rIn;        // full opacity from here
+            var outStart = q.to - win * q.rOut;      // starts leaving here
+            if (a.p < inEnd) vis = smooth((a.p - q.from) / Math.max(inEnd - q.from, 0.001));
+            else if (a.p <= outStart) vis = 1;       // the plateau
+            else vis = smooth(1 - (a.p - outStart) / Math.max(q.to - outStart, 0.001));
+          }
+          vis = clamp01(vis);
+
+          if (q.kinetic) {
+            if (!q.units) q.units = splitText(q.el, q.kinetic);
+            var n = q.units.length;
+            // Stagger across the reveal window. 0.62 spread leaves the tail of
+            // the window for the last unit to finish, so the line lands together
+            // rather than trickling.
+            for (var u = 0; u < n; u++) {
+              var uStart = (u / Math.max(n, 1)) * 0.62;
+              var uv = clamp01((vis - uStart) / (1 - 0.62 + 0.001));
+              uv = smooth(uv);
+              q.units[u].style.opacity = uv.toFixed(3);
+              q.units[u].style.transform = reduce ? 'none'
+                : 'translate3d(0,' + ((1 - uv) * 100).toFixed(2) + '%,0)';
+            }
+            q.el.style.opacity = '1';
+          } else {
+            q.el.style.opacity = vis.toFixed(3);
+            q.el.style.transform = reduce ? 'none'
+              : 'translate3d(0,' + ((1 - vis) * 2.4 * q.rise).toFixed(2) + 'vh,0)';
+          }
+          var on = vis > 0.5;
+          if (on !== (q.state === 1)) { q.state = on ? 1 : 0; q.el.style.pointerEvents = on ? 'auto' : 'none'; }
+        }
+
+        // parallax
+        if (!reduce) {
+          for (var pz = 0; pz < a.parallax.length; pz++) {
+            var pp = a.parallax[pz];
+            pp.el.style.transform = 'translate3d(0,' + (pp.rate * (a.p - 0.5) * 100).toFixed(2) + 'px,0)';
+          }
+        }
+
+        // reveals
+        for (var rv = 0; rv < a.reveals.length; rv++) {
+          var R = a.reveals[rv];
+          var t = smooth((a.p - R.from) / Math.max(R.to - R.from, 0.001));
+          var pct = ((1 - t) * 100).toFixed(2);
+          R.el.style.clipPath =
+            R.dir === 'down' ? 'inset(' + pct + '% 0 0 0)' :
+            R.dir === 'left' ? 'inset(0 ' + pct + '% 0 0)' :
+            R.dir === 'right' ? 'inset(0 0 0 ' + pct + '%)' :
+            R.dir === 'iris' ? 'circle(' + (t * 78).toFixed(2) + '% at 50% 50%)' :
+                               'inset(0 0 ' + pct + '% 0)';
+        }
+
+        // counters
+        for (var ct = 0; ct < a.counts.length; ct++) {
+          var K = a.counts[ct];
+          var kt = smooth((a.p - K.from) / Math.max(K.to - K.from, 0.001));
+          var val = lerp(K.a, K.b, kt);
+          var out = formatNum(val, K.tpl);
+          if (out !== K.last) { K.el.textContent = out; K.last = out; }
+        }
+      }
+
+      for (var w = 0; w < worlds.length; w++) readWorld(worlds[w]);
+
+      // background drift
+      for (var d = 0; d < drifts.length; d++) {
+        var D = drifts[d];
+        if (D.act.raw > 0 && D.act.raw < 1) {
+          driftA = D; driftT = smooth(D.act.raw / 0.35);
+          driftB = drifts[d - 1] || D;
+          break;
+        }
+        if (D.act.raw >= 1) { driftA = D; driftB = D; driftT = 1; }
+      }
+      if (driftA) {
+        docEl.style.setProperty('--sc-canvas', mixColor(driftB.rgb, driftA.rgb, driftT));
+      }
+
+      if (progressBar) {
+        var max = Math.max(document.body.scrollHeight - vh, 1);
+        progressBar.style.transform = 'scaleX(' + clamp01(y / max).toFixed(4) + ')';
+      }
+    }
+
+    // ---- video seek loop --------------------------------------------------
+    // Split from read() on purpose: seeking is asynchronous and rate-limited by
+    // the decoder, while read() must stay cheap enough to run on every scroll
+    // event. The lerp here is also what turns a jittery wheel into a glide.
+    function tick() {
+      // Deadband. A phone decoder cannot service a seek every frame, so asking
+      // for one costs more than it shows; 20ms of clip is under a frame of
+      // footage anyway.
+      var eps = isMobile() ? 0.02 : 0.008;
+      for (var i = 0; i < playheads.length; i++) {
+        var V = playheads[i];
+        if (!V.ready) continue;
+        // Never queue a seek while the decoder is still resolving the last one.
+        // On a phone a fast flick otherwise piles seeks up and freezes the clip.
+        // But a seek that never completes would freeze the clip for the life of
+        // the page through this very guard, so a seek stuck past 700ms is
+        // re-issued rather than waited on forever.
+        if (V.el.seeking) {
+          var nw = performance.now();
+          if (!V.stuckAt) V.stuckAt = nw;
+          else if (nw - V.stuckAt > 700) {
+            V.stuckAt = nw;
+            try { V.el.currentTime = V.el.currentTime + 0.001; } catch (e) {}
+          }
+          continue;
+        }
+        V.stuckAt = 0;
+        // An offscreen clip that has already arrived stops costing anything.
+        if (!V.live && Math.abs(V.cur - V.target) < 0.002) continue;
+        V.cur += (V.target - V.cur) * (reduce ? 1 : V.lerp);
+        var dur = V.el.duration || 1;
+        var t = clamp(V.cur, 0, 0.999) * dur;
+        if (Math.abs(V.el.currentTime - t) > eps) { try { V.el.currentTime = t; } catch (e) {} }
+      }
+      requestAnimationFrame(tick);
+    }
+
+    // iOS will not paint a muted video that has never been handed a user
+    // gesture, so a clip can be loaded, seeked and still show nothing.
+    //
+    // This used to fire once, on the first touch, across every playhead. That
+    // loses a race it cannot win. The first act's clip is still being fetched
+    // when the reader's first touch arrives (they touch the screen in order to
+    // scroll, and the clip is megabytes) so play() is called on a video with
+    // no source, does nothing, and the one shot is spent. Every later act loads
+    // long after that touch, with user activation already granted, and works
+    // without ever needing this. That is the exact shape of the bug: the hero
+    // frozen, everything below it fine.
+    //
+    // So: keep listening, prime each clip once it actually has a source, and
+    // stop only when they are all done. And force a seek afterwards, because a
+    // primed decoder still shows the stale frame until something asks it for a
+    // different time, and the deadband in tick() will not ask if the playhead is
+    // already where it should be.
+    var primedCount = 0;
+    function primeClip(V) {
+      // priming guards the retry: play() is a promise, and calling it again
+      // while the last one is unsettled produces "interrupted by pause" and can
+      // leave the element playing.
+      if (V.primed || V.priming || !V.el.src) return;
+      V.priming = true;
+      var done = function () {
+        V.priming = false;
+        if (!V.primed) { V.primed = true; primedCount++; }
+        try { V.el.pause(); } catch (e) {}
+        // repaint: nudge past the deadband so the next tick writes for real
+        try {
+          var dur = V.el.duration || 1;
+          V.cur = clamp(V.cur, 0, 0.999);
+          V.el.currentTime = clamp(V.cur * dur + 0.05, 0, dur * 0.999);
+        } catch (e) {}
+      };
+      var fail = function () { V.priming = false; };
+      // A play() promise is allowed to stay pending forever (iOS does this to a
+      // video it has decided not to start). If that happened here, `priming`
+      // would jam and no gesture could ever retry, so the flag is released on a
+      // timer as well. A late resolution after the release still lands in
+      // done(), which is idempotent.
+      setTimeout(function () { if (V.priming) fail(); }, 2000);
+      var pr;
+      try { pr = V.el.play(); } catch (e) { fail(); return; }
+      if (pr && pr.then) pr.then(done, fail);
+      else done();
+    }
+    function prime() {
+      for (var i = 0; i < playheads.length; i++) primeClip(playheads[i]);
+      if (playheads.length && primedCount >= playheads.length) {
+        removeEventListener('touchstart', prime);
+        removeEventListener('touchend', prime);
+        removeEventListener('pointerdown', prime);
+        removeEventListener('click', prime);
+        removeEventListener('scroll', prime);
+      }
+    }
+    // touchend and click are here because the HTML spec's list of activation-
+    // triggering events includes touchend but NOT touchstart. A restricted
+    // device (Low Power Mode) that rejects the touchstart prime for lacking
+    // activation gets a second, valid chance the moment the finger lifts.
+    addEventListener('touchstart', prime, { passive: true });
+    addEventListener('touchend', prime, { passive: true });
+    addEventListener('pointerdown', prime, { passive: true });
+    addEventListener('click', prime, { passive: true });
+    addEventListener('scroll', prime, { passive: true });
+
+    // ---- pointer devices --------------------------------------------------
+    var tilts = [], magnets = [], spots = [];
+    function initPointer() {
+      if (reduce || !fineMQ.matches) return;
+      Array.prototype.forEach.call(root.querySelectorAll('[data-sc-tilt]'), function (el) {
+        tilts.push({ el: el, max: parseFloat(el.getAttribute('data-sc-tilt')) || 6, x: 0, ty: 0, tx: 0, y: 0 });
+      });
+      Array.prototype.forEach.call(root.querySelectorAll('[data-sc-magnet]'), function (el) {
+        magnets.push({ el: el, k: parseFloat(el.getAttribute('data-sc-magnet')) || 0.3, x: 0, y: 0, tx: 0, ty: 0 });
+      });
+      Array.prototype.forEach.call(root.querySelectorAll('[data-sc-spotlight]'), function (el) {
+        spots.push(el);
+      });
+      if (!tilts.length && !magnets.length && !spots.length) return;
+
+      addEventListener('pointermove', function (e) {
+        if (e.pointerType !== 'mouse') return;
+        for (var i = 0; i < tilts.length; i++) {
+          var T = tilts[i], r = T.el.getBoundingClientRect();
+          if (r.bottom < -200 || r.top > vh + 200) { T.tx = 0; T.ty = 0; continue; }
+          var nx = (e.clientX - (r.left + r.width / 2)) / (r.width / 2);
+          var ny = (e.clientY - (r.top + r.height / 2)) / (r.height / 2);
+          var inside = Math.abs(nx) < 1.6 && Math.abs(ny) < 1.6;
+          T.tx = inside ? clamp(ny, -1, 1) * -T.max : 0;
+          T.ty = inside ? clamp(nx, -1, 1) * T.max : 0;
+        }
+        for (var m = 0; m < magnets.length; m++) {
+          var M = magnets[m], mr = M.el.getBoundingClientRect();
+          var dx = e.clientX - (mr.left + mr.width / 2);
+          var dy = e.clientY - (mr.top + mr.height / 2);
+          var near = Math.abs(dx) < mr.width && Math.abs(dy) < mr.height * 2.5;
+          M.tx = near ? dx * M.k : 0;
+          M.ty = near ? dy * M.k : 0;
+        }
+        for (var s = 0; s < spots.length; s++) {
+          var sr = spots[s].getBoundingClientRect();
+          spots[s].style.setProperty('--sc-mx', clamp01((e.clientX - sr.left) / sr.width).toFixed(3));
+          spots[s].style.setProperty('--sc-my', clamp01((e.clientY - sr.top) / sr.height).toFixed(3));
+        }
+      }, { passive: true });
+
+      (function pointerTick() {
+        // Interpolate toward the target rather than tracking the pointer
+        // directly. Direct tracking reads as artificial because it carries no
+        // momentum; the lerp gives it weight.
+        for (var i = 0; i < tilts.length; i++) {
+          var T = tilts[i];
+          T.x += (T.tx - T.x) * 0.09; T.y += (T.ty - T.y) * 0.09;
+          if (Math.abs(T.x) > 0.001 || Math.abs(T.y) > 0.001) {
+            T.el.style.transform = 'perspective(1100px) rotateX(' + T.x.toFixed(3) + 'deg) rotateY(' + T.y.toFixed(3) + 'deg)';
+          }
+        }
+        for (var m = 0; m < magnets.length; m++) {
+          var M = magnets[m];
+          M.x += (M.tx - M.x) * 0.12; M.y += (M.ty - M.y) * 0.12;
+          M.el.style.transform = 'translate3d(' + M.x.toFixed(2) + 'px,' + M.y.toFixed(2) + 'px,0)';
+        }
+        requestAnimationFrame(pointerTick);
+      })();
+    }
+
+    // ---- wiring -----------------------------------------------------------
+    var ticking = false;
+    addEventListener('scroll', function () {
+      if (!ticking) { ticking = true; requestAnimationFrame(function () { read(); ticking = false; }); }
+    }, { passive: true });
+
+    // Keyboard focus on a pinned or panning act. The browser's own
+    // scroll-into-view parks the focused element barely on screen, which is
+    // exactly the scroll position at which its cue has not opened yet, so focus
+    // lands on a control nobody can see and every automated opacity check still
+    // passes. Centring the act instead is a position where the cue is lit by
+    // definition. behavior:'instant' on purpose: scrollcraft.css sets
+    // scroll-behavior:smooth, so the default animates the jump and focus sits
+    // off screen for the whole of a multi-screen glide.
+    addEventListener('focusin', function (e) {
+      var el = e.target;
+      if (!el || !el.closest) return;
+      var act = el.closest('[data-sc-act]');
+      if (!act || !root.contains(act)) return;
+      var cue = el.closest('[data-sc-cue]');
+      if (!cue) return;
+      if (parseFloat(getComputedStyle(cue).opacity || '1') > 0.85) return;
+      el.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
+    });
+
+    var lastW = innerWidth;
+    addEventListener('resize', function () {
+      // Ignore URL-bar-only height changes on phones. Relaying out on those
+      // makes the page jump under the reader's thumb for no reason.
+      if (innerWidth === lastW && isMobile()) { vh = innerHeight; return; }
+      lastW = innerWidth;
+      layout();
+    }, { passive: true });
+
+    if (document.fonts && document.fonts.ready) {
+      // Line splitting measures line boxes, so it has to wait for the real face.
+      document.fonts.ready.then(function () {
+        acts.forEach(function (a) { a.cues.forEach(function (q) { if (q.kinetic && q.units) { q.el.__scSplit = null; q.units = null; } }); });
+        layout();
+      });
+    }
+
+    layout();
+    initPointer();
+    requestAnimationFrame(tick);
+    document.documentElement.classList.add('sc-ready');
+
+    var api = { layout: layout, read: read, acts: acts, worlds: worlds, clips: playheads, lerp: LERP };
+    global.ScrollCraft.instances.push(api);
+    return api;
+  }
+
+  // The instance list is not an API for the page. It is how the verification
+  // harness reads the real playhead records: a screenshot taken mid-lerp is a
+  // frame the page never actually holds, so the harness has to be able to ask
+  // whether the playhead has arrived rather than guess with a timeout.
+  global.ScrollCraft = { mount: mount, reduce: reduce, instances: [] };
+})(window);
diff --git a/apps/website/src/vendor/scrollcraft/scrollcraft.spec.ts b/apps/website/src/vendor/scrollcraft/scrollcraft.spec.ts
new file mode 100644
index 000000000..d7b2376a1
--- /dev/null
+++ b/apps/website/src/vendor/scrollcraft/scrollcraft.spec.ts
@@ -0,0 +1,20 @@
+import { createHash } from 'node:crypto';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+/** Upstream commit 0b81622. See README.md beside this file before changing. */
+const PINNED_SHA256 =
+  '9246fbe4e240a63cdaf33111edd724ee66118da87dc44af86039b0d1619164a1';
+
+describe('vendored scroll-craft engine', () => {
+  it('is byte-identical to the pinned upstream file', () => {
+    const src = readFileSync(join(__dirname, 'scrollcraft.js'));
+    expect(createHash('sha256').update(src).digest('hex')).toBe(PINNED_SHA256);
+  });
+  it('exposes mount and never auto-mounts', () => {
+    const src = readFileSync(join(__dirname, 'scrollcraft.js'), 'utf8');
+    expect(src).toMatch(/global\.ScrollCraft = \{ mount: mount/);
+    expect(src).not.toMatch(/DOMContentLoaded/);
+  });
+});
diff --git a/docs/superpowers/plans/2026-09-06-stage-homepage.md b/docs/superpowers/plans/2026-09-06-stage-homepage.md
new file mode 100644
index 000000000..29e42506c
--- /dev/null
+++ b/docs/superpowers/plans/2026-09-06-stage-homepage.md
@@ -0,0 +1,1426 @@
+# Stage on the Homepage 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 the homepage's four capability `FeatureBlock`s with one pinned, scroll-scrubbed act that drives the demo app's `/stage` route (plan 2, PR #1030) through the `tplane-stage` protocol, with stacked stills as the fallback, the scroll-craft verification harness in e2e, and the stage analytics events.
+
+**Architecture:** The website vendors scroll-craft's engine unmodified and mounts it on one `<section data-sc-act="pin" data-sc-span="6">`. Each frame, a publisher reads the act's `--sc-p`, maps it to recorded milliseconds through a pure beat map (`stage-beats.ts`), and posts `{ type: 'tplane-stage', t }` to the iframe; the iframe answers `ready` (timeline numbers) and `{ applied, phase, t }`, which the publisher writes into `data-sc-verify-state` so the harness can see a bespoke stage. The rail's cue windows are derived from the same beat shares, so copy and time cannot drift. Below 1024px, under reduced motion, without JavaScript, or when the frame never reports ready, the section renders four stacked stills with the same copy.
+
+**Tech Stack:** Next.js (apps/website, React 19, Vitest, Playwright), scroll-craft engine (MIT, commit `0b81622`), the demo app's `/stage` route (Angular, `examples/chat/angular`), posthog-js analytics.
+
+**Spec:** `docs/superpowers/specs/2026-09-05-homepage-live-stage-design.md` §4.1, §4.3, §5.2, §6, §7, §8, §9, §10. Plan 2 delivered §4.2, §4.4, §4.5, §5.1 and the stills recorder.
+
+---
+
+## Conventions
+
+- Branch: `blove/stage-homepage`, created from `blove/stage-route` (this plan needs plan 2's code). Rebase onto `origin/main` once #1030 merges; never `git stash` (shared stack).
+- Run every command from the repo root unless a step says otherwise. Website unit tests: `npx nx test website` (must run from the root, see memory). Only `npx nx build website` catches website type errors; run it before claiming green.
+- Public copy: the rail copy lands in `positioning.ts` and is scanned by `src/lib/public-copy.spec.ts` (unit) and crawled by `e2e/public-copy.spec.ts` in production mode. Never write the banned phrasings in `src/lib/public-copy-contract.ts` (`BANNED_CLAIMS`), and no competitor names.
+- Voice: `docs/gtm/voice.md`. Rail copy is taken verbatim from the existing FeatureBlocks in `app/page.tsx` and the spec §6; do not rewrite it.
+- The demo origin is `https://demo.threadplane.ai`; the website's origins are already allowlisted in `examples/chat/angular/src/app/hero/hero-bridge.ts` (`HERO_PARENT_ORIGINS`, plus Vercel previews). The website e2e server is `http://127.0.0.1:4308`, which is in that list.
+- The `/stage` route on the deployed demo exists only after #1030 merges AND the canonical demo deploy promotes. Tasks 1–8 need no network. Task 9's live-frame assertions are gated by an env variable so CI stays green before the deploy; run them locally against production afterwards.
+
+## File structure
+
+**Demo app (`examples/chat/angular/src/app/stage/`)**
+- Modify `stage-bridge.ts` — `StageReady` gains `hold` and `reloadEndMs` (the parent needs the hold's numbers for the approve mapping and the reload boundary for the persist midpoint).
+- Modify `stage-mode.component.ts` — posts the two new fields.
+- Modify `stage-bridge.spec.ts`, `stage-mode.component.spec.ts` — assert the new payload.
+
+**Website (`apps/website/src/`)**
+- Create `vendor/scrollcraft/scrollcraft.js` — the engine, byte-identical to the pinned upstream file; `vendor/scrollcraft/LICENSE`; `vendor/scrollcraft/README.md`; `vendor/scrollcraft/scrollcraft.d.ts` (the `window.ScrollCraft` shape); `vendor/scrollcraft/scrollcraft.spec.ts` (hash pin).
+- Create `lib/stage-beats.ts` + `lib/stage-beats.spec.ts` — shares, windows, the piecewise monotonic time map, the hold range, the threshold, cue strings.
+- Modify `lib/positioning.ts` + `lib/positioning.spec.ts` — `STAGE_RAIL` (per-beat eyebrow, headline, body, rows, cta, still alt text) and `STAGE_HOLD_LINES`.
+- Modify `lib/analytics/events.ts`, `lib/analytics/client.ts` + spec — `marketing:stage_progress`, surface `home_stage`, `trackStageProgress`.
+- Create `components/landing/StageStills.tsx` + spec — the server-rendered fallback (four stills + copy).
+- Create `components/landing/StageAct.tsx` — the pinned act: frame + rail + publisher (client).
+- Create `components/landing/Stage.tsx` + spec — the mode switch (stills by default, act when allowed).
+- Create `components/landing/use-stage-publisher.ts` + spec — the rAF publisher and message handler, DOM-only, no React state per frame.
+- Modify `app/page.tsx` — `<Stage />` replaces the four `FeatureBlock`s.
+- Modify `styles/landing.css` + `styles/style-contracts.spec.ts` — `.stage-*` rules; the sticky contract.
+- Modify `eslint.config.mjs` (website) — ignore the vendored engine.
+
+**Website e2e (`apps/website/e2e/`)**
+- Create `home-stage.spec.ts`.
+- Create `scroll-craft/shoot.mjs` (vendored harness, unmodified), `scroll-craft/verify-home.mjs` (runs the three modes against a running server and fails on dead scroll / cues that never peak), `scroll-craft/README.md`.
+- Modify `.github/workflows/ci.yml` — one step in `website-e2e` that builds, starts `next start`, runs `verify-home.mjs`, uploads the contact sheets.
+
+---
+
+### Task 1: The frame tells the parent where the hold and the reload are
+
+**Files:**
+- Modify: `examples/chat/angular/src/app/stage/stage-bridge.ts`
+- Modify: `examples/chat/angular/src/app/stage/stage-mode.component.ts` (the `postReady` call, ~line 368)
+- Test: `examples/chat/angular/src/app/stage/stage-bridge.spec.ts`, `stage-mode.component.spec.ts`
+
+- [ ] **Step 1: Failing test — the bridge posts `hold` and `reloadEndMs`**
+
+Add to `stage-bridge.spec.ts`, next to the existing `postReady` case:
+
+```ts
+it('postReady carries the hold and the reload boundary the parent maps scroll through', () => {
+  const posted: unknown[] = [];
+  const parent = { postMessage: (m: unknown) => posted.push(m) } as unknown as Window;
+  const self = { addEventListener: () => undefined, removeEventListener: () => undefined } as unknown as Window;
+  const bridge = createStageBridge({ referrer: 'https://threadplane.ai/', parent, self });
+  bridge.postReady({
+    totalMs: 9000,
+    beats: [{ beat: 'stream', startMs: 0, endMs: 1000 }],
+    hold: { startMs: 5000, endMs: 8000 },
+    reloadEndMs: 1600,
+  });
+  expect(posted[0]).toMatchObject({ type: STAGE_MESSAGE_TYPE, ready: true, hold: { startMs: 5000, endMs: 8000 }, reloadEndMs: 1600 });
+});
+```
+
+- [ ] **Step 2: Run** `cd examples/chat/angular && npx vitest run src/app/stage/stage-bridge` — FAIL (type error / missing fields).
+
+- [ ] **Step 3: Implement**
+
+In `stage-bridge.ts`:
+
+```ts
+export interface StageReady {
+  totalMs: number;
+  beats: readonly TimelineBeat[];
+  /** The authored hold at the interrupt (timeline ms). */
+  hold: { readonly startMs: number; readonly endMs: number };
+  /** End of the persist beat's reload run, or null when the recording has none. */
+  reloadEndMs: number | null;
+}
+```
+and in `postReady`: `post({ ready: true, totalMs: ready.totalMs, beats: ready.beats, hold: ready.hold, reloadEndMs: ready.reloadEndMs });`
+
+In `stage-mode.component.ts`, where `postReady` is called:
+
+```ts
+const reload = tl.runs.find((r) => r.run.action.kind === 'reload');
+this.bridge.postReady({
+  totalMs: tl.totalMs,
+  beats: tl.beats,
+  hold: tl.hold,
+  reloadEndMs: reload ? reload.endMs : null,
+});
+```
+
+- [ ] **Step 4: Component spec** — find the existing `postReady` assertion in `stage-mode.component.spec.ts` and extend it: `expect(ready.hold).toEqual(timeline.hold)` and `expect(ready.reloadEndMs).toBe(timeline.runs[1].endMs)` (the fixture's run 1 is the reload; check `stage-recording.fixtures.ts`'s `MINIMAL`).
+
+- [ ] **Step 5: Run** `npx vitest run src/app/stage` — PASS. `npx eslint examples/chat/angular/src/app/stage` — clean.
+
+- [ ] **Step 6: Commit** `feat(examples/chat): stage ready message carries the hold and the reload boundary`
+
+---
+
+### Task 2: Vendor the engine
+
+**Files:**
+- Create: `apps/website/src/vendor/scrollcraft/scrollcraft.js`, `LICENSE`, `README.md`, `scrollcraft.d.ts`, `scrollcraft.spec.ts`
+- Modify: `apps/website/eslint.config.mjs`
+
+- [ ] **Step 1: Copy the pinned files**
+
+```bash
+git clone --quiet https://github.com/nateherkai/scroll-craft /tmp/scroll-craft-pin && git -C /tmp/scroll-craft-pin checkout --quiet 0b81622
+mkdir -p apps/website/src/vendor/scrollcraft
+cp /tmp/scroll-craft-pin/plugins/nateherk-design/skills/scroll-craft/engine/scrollcraft.js apps/website/src/vendor/scrollcraft/scrollcraft.js
+cp /tmp/scroll-craft-pin/LICENSE apps/website/src/vendor/scrollcraft/LICENSE
+shasum -a 256 apps/website/src/vendor/scrollcraft/scrollcraft.js
+```
+(Use the scratchpad directory instead of `/tmp` when one is listed in your environment.) Record the printed hash; it goes into the spec below.
+
+- [ ] **Step 2: README**
+
+`apps/website/src/vendor/scrollcraft/README.md`:
+
+```md
+# scroll-craft engine (vendored)
+
+Source: https://github.com/nateherkai/scroll-craft — `plugins/nateherk-design/skills/scroll-craft/engine/scrollcraft.js`
+Commit: 0b81622 (2026-09-04). Licence: MIT (LICENSE beside this file).
+
+`scrollcraft.js` is byte-identical to upstream and MUST stay that way — `scrollcraft.spec.ts` pins its SHA-256. Upstream's CSS is deliberately not vendored: the few rules the homepage needs (`.stage-pin` sticky, `[data-sc-cue]` initial opacity) live in `src/styles/landing.css` under the website's own style contract.
+
+To update: copy the new file, re-run `shasum -a 256`, update the hash in the spec and the commit here.
+```
+
+- [ ] **Step 3: Type declaration** `scrollcraft.d.ts`:
+
+```ts
+/** The globals `scrollcraft.js` installs. Only what the homepage uses. */
+export interface ScrollCraftAct {
+  el: HTMLElement;
+  device: 'scrub' | 'pin' | 'pan' | 'flow';
+  p: number;
+}
+export interface ScrollCraftInstance {
+  layout(): void;
+  acts: ScrollCraftAct[];
+  lerp: number;
+}
+export interface ScrollCraftGlobal {
+  mount(root?: Element | Document | string, opts?: { lerp?: number }): ScrollCraftInstance;
+  reduce: boolean;
+  instances: ScrollCraftInstance[];
+}
+declare global {
+  interface Window { ScrollCraft?: ScrollCraftGlobal }
+}
+```
+
+- [ ] **Step 4: Hash pin spec** `scrollcraft.spec.ts`:
+
+```ts
+import { createHash } from 'node:crypto';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+/** Upstream commit 0b81622. See README.md beside this file before changing. */
+const PINNED_SHA256 = '<hash from Step 1>';
+
+describe('vendored scroll-craft engine', () => {
+  it('is byte-identical to the pinned upstream file', () => {
+    const src = readFileSync(join(__dirname, 'scrollcraft.js'));
+    expect(createHash('sha256').update(src).digest('hex')).toBe(PINNED_SHA256);
+  });
+  it('exposes mount and never auto-mounts', () => {
+    const src = readFileSync(join(__dirname, 'scrollcraft.js'), 'utf8');
+    expect(src).toMatch(/global\.ScrollCraft = \{ mount: mount/);
+    expect(src).not.toMatch(/DOMContentLoaded/);
+  });
+});
+```
+
+- [ ] **Step 5: ESLint ignore** — in `apps/website/eslint.config.mjs` add `'src/vendor/scrollcraft/scrollcraft.js'` to the `ignores` array (create the `{ ignores: [...] }` entry if the config has none). Confirm with `npx eslint apps/website/src/vendor/scrollcraft` → no output.
+
+- [ ] **Step 6: Run** `npx nx test website -- src/vendor/scrollcraft` — PASS (check the Vitest include glob in `apps/website/vitest.config.*` covers `src/**/*.spec.ts`; it does for `src/lib` and `src/components`; if `src/vendor` is excluded, add it).
+
+- [ ] **Step 7: Commit** `chore(website): vendor the scroll-craft engine, pinned at 0b81622`
+
+---
+
+### Task 3: The beat map
+
+**Files:**
+- Create: `apps/website/src/lib/stage-beats.ts`, `apps/website/src/lib/stage-beats.spec.ts`
+
+- [ ] **Step 1: Failing tests**
+
+```ts
+// apps/website/src/lib/stage-beats.spec.ts
+import { describe, expect, it } from 'vitest';
+import {
+  APPROVE_HOLD, STAGE_BEATS, STAGE_SPAN, beatAt, beatWindows, crossedThreshold, cueFor, inHold, timeAt,
+  type StageReadyMessage,
+} from './stage-beats';
+
+const READY: StageReadyMessage = {
+  totalMs: 40_000,
+  beats: [
+    { beat: 'stream', startMs: 0, endMs: 12_000 },
+    { beat: 'persist', startMs: 12_000, endMs: 20_000 },
+    { beat: 'approve', startMs: 20_000, endMs: 32_000 },
+    { beat: 'render', startMs: 32_000, endMs: 40_000 },
+  ],
+  hold: { startMs: 27_000, endMs: 30_000 },
+  reloadEndMs: 12_600,
+};
+
+describe('beatWindows', () => {
+  it('partitions the act by the shares, in beat order, summing to the span', () => {
+    const w = beatWindows();
+    expect(w.map((x) => x.beat)).toEqual([...STAGE_BEATS]);
+    expect(w[0].from).toBe(0);
+    expect(w[w.length - 1].to).toBe(1);
+    w.slice(1).forEach((x, i) => expect(x.from).toBe(w[i].to));
+    expect(STAGE_SPAN).toBe(6);
+  });
+});
+
+describe('timeAt', () => {
+  it('is monotonic non-decreasing across the whole act', () => {
+    let last = -1;
+    for (let i = 0; i <= 2000; i++) {
+      const t = timeAt(i / 2000, READY);
+      expect(t).toBeGreaterThanOrEqual(last);
+      last = t;
+    }
+  });
+  it('lands each beat boundary on the recording boundary', () => {
+    const w = beatWindows();
+    w.forEach((x, i) => expect(timeAt(x.from, READY)).toBe(READY.beats[i].startMs));
+    expect(timeAt(1, READY)).toBe(READY.totalMs);
+  });
+  it('settles the reload at the persist midpoint', () => {
+    const persist = beatWindows()[1];
+    expect(timeAt((persist.from + persist.to) / 2, READY)).toBe(READY.reloadEndMs);
+  });
+  it('pins time at the interrupt through the hold and resumes past the threshold', () => {
+    const a = beatWindows()[2];
+    const at = (f: number) => timeAt(a.from + (a.to - a.from) * f, READY);
+    expect(at(APPROVE_HOLD.from)).toBe(READY.hold.startMs);
+    expect(at(0.5)).toBe(READY.hold.startMs);
+    expect(at(APPROVE_HOLD.to - 1e-6)).toBe(READY.hold.startMs);
+    expect(at(APPROVE_HOLD.to)).toBe(READY.hold.endMs);
+    expect(at(1)).toBe(READY.beats[2].endMs);
+  });
+  it('holds the mounted form through the render tail', () => {
+    const r = beatWindows()[3];
+    expect(timeAt(r.from + (r.to - r.from) * 0.9, READY)).toBe(READY.totalMs);
+  });
+  it('clamps outside 0..1 and falls back to linear persist without a reload', () => {
+    expect(timeAt(-1, READY)).toBe(0);
+    expect(timeAt(2, READY)).toBe(READY.totalMs);
+    const noReload = { ...READY, reloadEndMs: null };
+    const persist = beatWindows()[1];
+    expect(timeAt((persist.from + persist.to) / 2, noReload)).toBe(16_000);
+  });
+});
+
+describe('inHold / beatAt / crossedThreshold', () => {
+  it('reports the hold only inside the approve hold range', () => {
+    const a = beatWindows()[2];
+    expect(inHold(a.from + (a.to - a.from) * 0.5)).toBe(true);
+    expect(inHold(a.from + (a.to - a.from) * 0.2)).toBe(false);
+    expect(inHold(0)).toBe(false);
+  });
+  it('names the beat at a progress', () => {
+    expect(beatAt(0)).toBe('stream');
+    expect(beatAt(0.999)).toBe('render');
+  });
+  it('fires the threshold exactly once per crossing, forwards only', () => {
+    const a = beatWindows()[2];
+    const th = a.from + (a.to - a.from) * APPROVE_HOLD.to;
+    expect(crossedThreshold(th - 0.01, th + 0.01)).toBe(true);
+    expect(crossedThreshold(th + 0.01, th - 0.01)).toBe(false);
+    expect(crossedThreshold(th + 0.01, th + 0.02)).toBe(false);
+  });
+});
+
+describe('cueFor', () => {
+  it('greets on the first beat, holds on the last, and fades the middle ones', () => {
+    expect(cueFor('stream')).toMatch(/^0 0\.21\d+ 0 0\.3$/);
+    expect(cueFor('render')).toMatch(/ 1 0\.3 0$/);
+    expect(cueFor('persist').split(' ')).toHaveLength(2);
+  });
+});
+```
+
+- [ ] **Step 2: Run** `npx nx test website -- src/lib/stage-beats` — FAIL (module missing).
+
+- [ ] **Step 3: Implement**
+
+```ts
+// apps/website/src/lib/stage-beats.ts
+/**
+ * Scroll → recorded time for the homepage stage (spec §5.2, §6).
+ *
+ * The shares are authored; the times come from the frame's `ready` message,
+ * so the rail's cue windows (derived from the shares) and the seek targets
+ * (derived from the recording) are two views of one table.
+ */
+export const STAGE_BEATS = ['stream', 'persist', 'approve', 'render'] as const;
+export type StageBeat = (typeof STAGE_BEATS)[number];
+
+/** Viewport-heights of scroll each beat owns. Approve is the peak by a visible margin. */
+export const STAGE_SHARES: Readonly<Record<StageBeat, number>> = { stream: 1.3, persist: 1.2, approve: 2.4, render: 1.1 };
+export const STAGE_SPAN = Object.values(STAGE_SHARES).reduce((a, b) => a + b, 0);
+/** Fractions of the approve beat: linear → hold → threshold and resume. */
+export const APPROVE_HOLD = { from: 0.35, to: 0.7 } as const;
+/** The last slice of the render beat holds on the mounted form. */
+export const RENDER_TAIL = 0.15;
+
+export interface StageReadyMessage {
+  totalMs: number;
+  beats: readonly { beat: StageBeat; startMs: number; endMs: number }[];
+  hold: { startMs: number; endMs: number };
+  reloadEndMs: number | null;
+}
+
+export interface BeatWindow { beat: StageBeat; from: number; to: number }
+
+export function beatWindows(): BeatWindow[] {
+  let acc = 0;
+  return STAGE_BEATS.map((beat) => {
+    const from = acc / STAGE_SPAN;
+    acc += STAGE_SHARES[beat];
+    return { beat, from, to: acc / STAGE_SPAN };
+  });
+}
+
+const clamp01 = (x: number) => (x < 0 ? 0 : x > 1 ? 1 : x);
+const lerp = (a: number, b: number, f: number) => a + (b - a) * f;
+
+export function beatAt(p: number): StageBeat {
+  const q = clamp01(p);
+  const w = beatWindows().find((x) => q < x.to) ?? beatWindows()[STAGE_BEATS.length - 1];
+  return w.beat;
+}
+
+/** Progress within the beat that owns `p`, 0..1. */
+function local(p: number): { beat: StageBeat; f: number } {
+  const q = clamp01(p);
+  const w = beatWindows().find((x) => q < x.to) ?? beatWindows()[STAGE_BEATS.length - 1];
+  return { beat: w.beat, f: clamp01((q - w.from) / (w.to - w.from)) };
+}
+
+export function inHold(p: number): boolean {
+  const { beat, f } = local(p);
+  return beat === 'approve' && f >= APPROVE_HOLD.from && f < APPROVE_HOLD.to;
+}
+
+/** True when scroll moved forward across the approve threshold between two frames. */
+export function crossedThreshold(prevP: number, nextP: number): boolean {
+  const a = beatWindows()[2];
+  const th = a.from + (a.to - a.from) * APPROVE_HOLD.to;
+  return prevP < th && nextP >= th;
+}
+
+/** Piecewise monotonic: recorded milliseconds at act progress `p`. */
+export function timeAt(p: number, ready: StageReadyMessage): number {
+  if (p >= 1) return ready.totalMs;
+  const { beat, f } = local(p);
+  const b = ready.beats.find((x) => x.beat === beat);
+  if (!b) return 0;
+  switch (beat) {
+    case 'persist': {
+      const mid = ready.reloadEndMs;
+      if (mid === null) return Math.round(lerp(b.startMs, b.endMs, f));
+      return f < 0.5 ? Math.round(lerp(b.startMs, mid, f / 0.5)) : Math.round(lerp(mid, b.endMs, (f - 0.5) / 0.5));
+    }
+    case 'approve': {
+      if (f < APPROVE_HOLD.from) return Math.round(lerp(b.startMs, ready.hold.startMs, f / APPROVE_HOLD.from));
+      if (f < APPROVE_HOLD.to) return ready.hold.startMs;
+      return Math.round(lerp(ready.hold.endMs, b.endMs, (f - APPROVE_HOLD.to) / (1 - APPROVE_HOLD.to)));
+    }
+    case 'render': {
+      const live = 1 - RENDER_TAIL;
+      return f >= live ? ready.totalMs : Math.round(lerp(b.startMs, ready.totalMs, f / live));
+    }
+    default:
+      return Math.round(lerp(b.startMs, b.endMs, f));
+  }
+}
+
+/**
+ * `data-sc-cue` for a beat's rail block: "from to rampIn rampOut" as fractions
+ * of act progress. The first beat greets (full at p = 0), the last holds to
+ * the end (no leave ramp), the middle ones fade in and out inside their window.
+ */
+export function cueFor(beat: StageBeat): string {
+  const w = beatWindows().find((x) => x.beat === beat)!;
+  const fmt = (n: number) => String(+n.toFixed(4));
+  if (beat === STAGE_BEATS[0]) return `0 ${fmt(w.to)} 0 0.3`;
+  if (beat === STAGE_BEATS[STAGE_BEATS.length - 1]) return `${fmt(w.from)} 1 0.3 0`;
+  return `${fmt(w.from)} ${fmt(w.to)}`;
+}
+
+/** Cue windows for the three hold lines inside the approve beat, spread across the hold range. */
+export function holdLineCues(count: number): string[] {
+  const a = beatWindows()[2];
+  const span = a.to - a.from;
+  const start = a.from + span * APPROVE_HOLD.from;
+  const end = a.from + span * APPROVE_HOLD.to;
+  const slot = (end - start) / count;
+  return Array.from({ length: count }, (_, i) => {
+    const from = start + slot * i;
+    const to = i === count - 1 ? end + span * 0.12 : from + slot * 1.15;
+    return `${+from.toFixed(4)} ${+Math.min(to, 1).toFixed(4)}`;
+  });
+}
+```
+
+Note on `timeAt` inside the approve hold: the recording's timeline has a 3,000 ms authored hold (`HOLD_MS`) between the approve run and the resume run; the parent pins `t` at `hold.startMs` for the whole 35–70% range and jumps to `hold.endMs` at 70%. The frame's `phaseAt` reports `pause` for any `t` inside `[hold.startMs, hold.endMs)`, so the devtools show the interrupt through the hold, and `resume` from the threshold.
+
+- [ ] **Step 4: Run** the spec — PASS. Add a `holdLineCues` case: three cues, each `from` strictly increasing, all inside `[approve.from, 1]`.
+
+- [ ] **Step 5: Commit** `feat(website): stage beat map — shares, the hold, the threshold, cue windows`
+
+---
+
+### Task 4: Rail copy in positioning.ts
+
+**Files:**
+- Modify: `apps/website/src/lib/positioning.ts`, `apps/website/src/lib/positioning.spec.ts`
+
+- [ ] **Step 1: Failing test**
+
+```ts
+describe('STAGE_RAIL', () => {
+  it('has one entry per beat in beat order, three rows each, a cta, and still alt text', () => {
+    expect(STAGE_RAIL.map((b) => b.beat)).toEqual(['stream', 'persist', 'approve', 'render']);
+    for (const b of STAGE_RAIL) {
+      expect(b.rows).toHaveLength(3);
+      expect(b.cta.href).toMatch(/^\//);
+      expect(b.stillAlt.length).toBeGreaterThan(40);
+    }
+  });
+  it('carries the three hold lines from the spec, ending on the threshold instruction', () => {
+    expect(STAGE_HOLD_LINES).toHaveLength(3);
+    expect(STAGE_HOLD_LINES[2]).toBe('Keep scrolling to approve');
+  });
+});
+```
+
+- [ ] **Step 2: Implement** — add to `positioning.ts` (copy the strings verbatim from the four `FeatureBlock`s in `app/page.tsx`; the `body` strings that contain `<code>` become plain text with the API names inline):
+
+```ts
+export type StageBeatKey = 'stream' | 'persist' | 'approve' | 'render';
+export interface StageRailBeat {
+  beat: StageBeatKey;
+  eyebrow: string;
+  headline: string;
+  body: string;
+  rows: readonly { claim: string; api: string }[];
+  cta: { label: string; href: string };
+  /** Alt text for the fallback still: what the frame shows at this beat's settle. */
+  stillAlt: string;
+}
+
+export const STAGE_RAIL: readonly StageRailBeat[] = [
+  {
+    beat: 'stream',
+    eyebrow: 'Stream',
+    headline: 'The UI stays reactive through tokens, tools, errors, and state changes.',
+    body: 'injectAgent() hands back signals: messages(), status(), error(), isLoading(), and tool progress. Nothing to subscribe to, nothing to tear down.',
+    rows: [
+      { claim: 'Signals, not promises', api: 'injectAgent()' },
+      { claim: 'Tool progress as it happens', api: 'toolProgress()' },
+      { claim: 'Same contract on LangGraph and AG-UI', api: 'Agent' },
+    ],
+    cta: { label: 'Read the streaming guide', href: '/docs/langgraph/guides/streaming' },
+    stillAlt: 'Threadplane chat beside its devtools: a streamed answer about Angular signals with a Sources row of citations, and the devtools Timeline listing seven checkpoints',
+  },
+  {
+    beat: 'persist',
+    eyebrow: 'Persist',
+    headline: 'A user can leave, return, inspect history, and continue.',
+    body: 'Thread selection, history, branch and replay UI in the Angular app. Durability itself comes from the runtime and persistence layer you connect — Threadplane exposes it, it does not fake it.',
+    rows: [
+      { claim: 'Conversations restore across sessions', api: 'threadId + checkpoints' },
+      { claim: 'Branch or replay from any point', api: 'branch / replay' },
+      { claim: 'error() / status() / reload() on every agent', api: 'boundary signals' },
+    ],
+    cta: { label: 'Persistence patterns', href: '/docs/langgraph/guides/persistence' },
+    stillAlt: 'The thread restored after a reload and forked from an earlier checkpoint: a "Make it a haiku instead." turn, with the devtools Timeline showing ten checkpoints and the fork',
+  },
+  {
+    beat: 'approve',
+    eyebrow: 'Approve',
+    headline: 'Irreversible work pauses for a human decision.',
+    body: 'interrupt() freezes the run inside the checkpoint. Your UI renders the proposal; submit({ resume }) continues with the decision on the record.',
+    rows: [
+      { claim: 'The pause is a checkpoint, not a modal', api: 'interrupt()' },
+      { claim: 'The proposal renders in your UI', api: '<chat-interrupt-panel>' },
+      { claim: 'The decision lands beside the action it gated', api: 'submit({ resume })' },
+    ],
+    cta: { label: 'Interrupt patterns', href: '/docs/langgraph/guides/interrupts' },
+    stillAlt: 'The agent paused inside delete_backups: the interrupt panel with Accept, Edit, Respond and Ignore above a five-row table of the backups it would delete, and the devtools State tab showing the interrupt',
+  },
+  {
+    beat: 'render',
+    eyebrow: 'Render',
+    headline: 'Agent output becomes components from your design system.',
+    body: 'The agent emits constrained structured output. Angular renders registered components — json-render and A2UI both speak it — with per-component fallback and a readiness gate. No generated code runs.',
+    rows: [
+      { claim: 'Your design system, not a chat widget', api: '@threadplane/render' },
+      { claim: 'Unknown specs degrade per component', api: 'fallback + readiness gate' },
+      { claim: 'Schema on the server, trust in the client', api: 'validated specs' },
+    ],
+    cta: { label: 'See @threadplane/render', href: '/render' },
+    stillAlt: 'A generated contact form — Name, Email, Subject, Message and a Send button — rendered from the agent\'s A2UI output inside the chat, with the render_a2ui_surface tool call above it',
+  },
+];
+
+/** Spec §6: the copy that advances while recorded time is pinned at the interrupt. */
+export const STAGE_HOLD_LINES: readonly string[] = [
+  'The pause is a checkpoint, not a modal',
+  'The run is frozen in durable state. Scroll all you like; nothing happens until someone decides',
+  'Keep scrolling to approve',
+];
+```
+
+- [ ] **Step 3: Run** `npx nx test website -- src/lib/positioning src/lib/public-copy` — PASS (the public-copy unit scan must stay green with the new strings).
+
+- [ ] **Step 4: Commit** `feat(website): stage rail copy single-sourced in positioning.ts`
+
+---
+
+### Task 5: The stills fallback
+
+**Files:**
+- Create: `apps/website/src/components/landing/StageStills.tsx`, `StageStills.spec.tsx`
+- Modify: `apps/website/src/styles/landing.css`
+
+- [ ] **Step 1: Failing test**
+
+```tsx
+// StageStills.spec.tsx
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { StageStills } from './StageStills';
+import { STAGE_RAIL } from '../../lib/positioning';
+
+describe('StageStills', () => {
+  it('renders four beats in order, each with its still, phone source, copy rows and cta', () => {
+    render(<StageStills />);
+    const beats = screen.getAllByTestId('stage-still-beat');
+    expect(beats.map((b) => b.getAttribute('data-beat'))).toEqual(['stream', 'persist', 'approve', 'render']);
+    for (const [i, b] of beats.entries()) {
+      const img = b.querySelector('img')!;
+      expect(img.getAttribute('src')).toBe(`/screenshots/stage-${STAGE_RAIL[i].beat}.webp`);
+      expect(img.getAttribute('alt')).toBe(STAGE_RAIL[i].stillAlt);
+      expect(img.getAttribute('loading')).toBe('lazy');
+      expect(b.querySelector('source')!.getAttribute('srcset')).toBe(`/screenshots/stage-${STAGE_RAIL[i].beat}-mobile.webp`);
+      expect(b.querySelectorAll('.feature-block-row')).toHaveLength(3);
+      expect(b.querySelector('a.feature-block-cta')!.getAttribute('href')).toBe(STAGE_RAIL[i].cta.href);
+    }
+  });
+  it('is the section the act replaces, with its anchors', () => {
+    render(<StageStills />);
+    expect(document.querySelector('section#stage')).not.toBeNull();
+    expect(screen.getByRole('heading', { level: 2, name: STAGE_RAIL[2].headline })).toBeInTheDocument();
+  });
+});
+```
+
+- [ ] **Step 2: Implement**
+
+```tsx
+// StageStills.tsx  (server component — no 'use client')
+import Link from 'next/link';
+import { Container } from '../ui/Container';
+import { Section } from '../ui/Section';
+import { Eyebrow } from '../ui/Eyebrow';
+import { STAGE_RAIL } from '../../lib/positioning';
+
+export const STAGE_STILL_MOBILE_MEDIA = '(max-width: 767px)';
+const STILL_W = 1200, STILL_H = 720, STILL_MOBILE_W = 585, STILL_MOBILE_H = 975;
+
+/**
+ * The stage's non-pinned form (spec §8): the same four beats as four stacked
+ * stills from `/stage`, each with its rail copy. Server-rendered by default;
+ * `Stage` swaps in the pinned act on wide, motion-tolerant viewports.
+ */
+export function StageStills() {
+  return (
+    <Section id="stage" surface="canvas" ariaLabelledBy="stage-heading">
+      <Container>
+        <h2 id="stage-heading" className="sr-only">One real run: stream, persist, approve, render</h2>
+        <div className="stage-stills">
+          {STAGE_RAIL.map((b) => (
+            <article className="stage-still" data-testid="stage-still-beat" data-beat={b.beat} key={b.beat}>
+              <div className="stage-still-visual">
+                <picture>
+                  <source media={STAGE_STILL_MOBILE_MEDIA} srcSet={`/screenshots/stage-${b.beat}-mobile.webp`} width={STILL_MOBILE_W} height={STILL_MOBILE_H} />
+                  <img src={`/screenshots/stage-${b.beat}.webp`} width={STILL_W} height={STILL_H} alt={b.stillAlt} loading="lazy" decoding="async" className="stage-still-img" />
+                </picture>
+              </div>
+              <div className="feature-block-text">
+                <div className="feature-block-rail">
+                  <Eyebrow tone="accent" className="feature-block-eyebrow">{b.eyebrow}</Eyebrow>
+                  <span className="feature-block-rail-line" aria-hidden="true" />
+                </div>
+                <h3 className="feature-block-heading">{b.headline}</h3>
+                <p className="feature-block-body">{b.body}</p>
+                <div className="feature-block-rows">
+                  {b.rows.map((row) => (
+                    <div className="feature-block-row" key={row.claim}>
+                      <span className="feature-block-row-claim">{row.claim}</span>
+                      <span className="feature-block-row-api">{row.api}</span>
+                    </div>
+                  ))}
+                </div>
+                <Link href={b.cta.href} className="feature-block-cta">{b.cta.label} →</Link>
+              </div>
+            </article>
+          ))}
+        </div>
+      </Container>
+    </Section>
+  );
+}
+```
+
+The second spec case uses `getByRole('heading', { level: 2 ...})` — change it to level 3 to match the markup above (the h2 is the visually hidden section heading; check the site has an `.sr-only` utility in `ui.css`; if not, use the existing visually-hidden class the header uses, found with `grep -rn "clip: rect" apps/website/src/styles`).
+
+- [ ] **Step 3: CSS** — append to `landing.css`, after the `.reliability-*` block:
+
+```css
+/* Stage — components/landing/Stage.tsx, StageStills.tsx, StageAct.tsx
+ * The stills are the section's default form; the pinned act replaces them on
+ * wide, motion-tolerant viewports after hydration. The stills reuse the
+ * feature-block row grammar so the two forms read as one section. */
+.stage-stills { display: grid; gap: 96px; }
+.stage-still { display: grid; grid-template-columns: 3fr 2fr; gap: 48px; align-items: center; }
+.stage-still:nth-child(even) .stage-still-visual { order: 2; }
+.stage-still-visual { border-radius: 12px; overflow: hidden; background: #0f1116; }
+.stage-still-visual picture { display: block; }
+.stage-still-img { display: block; width: 100%; height: auto; }
+@media (max-width: 900px) {
+  .stage-still { grid-template-columns: 1fr; gap: 24px; }
+  .stage-still:nth-child(even) .stage-still-visual { order: 0; }
+  .stage-stills { gap: 64px; }
+}
+```
+
+- [ ] **Step 4: Run** `npx nx test website -- StageStills` — PASS. `npx eslint apps/website/src/components/landing/StageStills.tsx` — clean.
+
+- [ ] **Step 5: Commit** `feat(website): stage stills — the section's server-rendered form`
+
+---
+
+### Task 6: The publisher
+
+**Files:**
+- Create: `apps/website/src/components/landing/use-stage-publisher.ts`, `use-stage-publisher.spec.ts`
+
+The publisher is DOM-only: it never sets React state per frame. It owns the rAF loop, the `--sc-p` read, the beat map, the postMessage, the verify attributes, and the analytics milestones.
+
+- [ ] **Step 1: Failing tests**
+
+```ts
+// use-stage-publisher.spec.ts
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createStagePublisher, STAGE_DEMO_ORIGIN, STAGE_MESSAGE_TYPE } from './use-stage-publisher';
+import { beatWindows, APPROVE_HOLD } from '../../lib/stage-beats';
+
+const READY = {
+  type: STAGE_MESSAGE_TYPE, ready: true, totalMs: 40_000,
+  beats: [
+    { beat: 'stream', startMs: 0, endMs: 12_000 }, { beat: 'persist', startMs: 12_000, endMs: 20_000 },
+    { beat: 'approve', startMs: 20_000, endMs: 32_000 }, { beat: 'render', startMs: 32_000, endMs: 40_000 },
+  ],
+  hold: { startMs: 27_000, endMs: 30_000 }, reloadEndMs: 12_600,
+};
+
+function setup() {
+  const section = document.createElement('section');
+  document.body.appendChild(section);
+  const posted: unknown[] = [];
+  const frame = { postMessage: (m: unknown, origin: string) => posted.push({ m, origin }) } as unknown as Window;
+  const track = vi.fn();
+  const pub = createStagePublisher({ section, frameWindow: () => frame, track });
+  // Simulate the frame's ready message
+  window.dispatchEvent(new MessageEvent('message', { origin: STAGE_DEMO_ORIGIN, data: READY }));
+  return { section, posted, track, pub };
+}
+
+beforeEach(() => { vi.useFakeTimers(); });
+afterEach(() => { vi.useRealTimers(); document.body.innerHTML = ''; });
+
+describe('stage publisher', () => {
+  it('posts t only when it changes, to the demo origin', () => {
+    const { section, posted, pub } = setup();
+    section.style.setProperty('--sc-p', '0.1');
+    pub.tick(); pub.tick();
+    expect(posted).toHaveLength(1);
+    expect(posted[0]).toMatchObject({ origin: STAGE_DEMO_ORIGIN, m: { type: STAGE_MESSAGE_TYPE, t: expect.any(Number) } });
+    section.style.setProperty('--sc-p', '0.2');
+    pub.tick();
+    expect(posted).toHaveLength(2);
+  });
+  it('posts nothing before ready', () => {
+    const section = document.createElement('section');
+    const posted: unknown[] = [];
+    const pub = createStagePublisher({ section, frameWindow: () => ({ postMessage: (m: unknown) => posted.push(m) } as unknown as Window), track: vi.fn() });
+    section.style.setProperty('--sc-p', '0.3');
+    pub.tick();
+    expect(posted).toHaveLength(0);
+  });
+  it('ignores messages from other origins', () => {
+    const { section, pub } = setup();
+    window.dispatchEvent(new MessageEvent('message', { origin: 'https://evil.example', data: { type: STAGE_MESSAGE_TYPE, applied: 9, phase: 'render', t: 1 } }));
+    expect(section.getAttribute('data-sc-verify-state')).toBeNull();
+    pub.dispose();
+  });
+  it('mirrors the frame\'s applied state into data-sc-verify-state and the hold into data-sc-verify-hold', () => {
+    const { section, pub } = setup();
+    window.dispatchEvent(new MessageEvent('message', { origin: STAGE_DEMO_ORIGIN, data: { type: STAGE_MESSAGE_TYPE, applied: 42, phase: 'stream', t: 900 } }));
+    expect(section.getAttribute('data-sc-verify-state')).toBe('stream:42');
+    const a = beatWindows()[2];
+    section.style.setProperty('--sc-p', String(a.from + (a.to - a.from) * 0.5));
+    pub.tick();
+    expect(section.getAttribute('data-sc-verify-hold')).toBe('true');
+    section.style.setProperty('--sc-p', String(a.from + (a.to - a.from) * 0.9));
+    pub.tick();
+    expect(section.getAttribute('data-sc-verify-hold')).toBeNull();
+  });
+  it('tracks enter once, each beat once, the threshold once, complete once', () => {
+    const { section, track, pub } = setup();
+    const a = beatWindows()[2];
+    const th = a.from + (a.to - a.from) * APPROVE_HOLD.to;
+    for (const p of [0.01, 0.02, beatWindows()[1].from + 0.01, th - 0.01, th + 0.01, th + 0.02, 0.999, 1]) {
+      section.style.setProperty('--sc-p', String(p));
+      pub.tick();
+    }
+    const events = track.mock.calls.map((c) => `${c[0]}${c[1] ? ':' + c[1] : ''}`);
+    expect(events).toEqual(['enter', 'beat:stream', 'beat:persist', 'beat:approve', 'threshold', 'beat:render', 'complete']);
+  });
+  it('dispose removes the listener and stops posting', () => {
+    const { section, posted, pub } = setup();
+    pub.dispose();
+    section.style.setProperty('--sc-p', '0.5');
+    pub.tick();
+    expect(posted).toHaveLength(0);
+  });
+});
+```
+
+- [ ] **Step 2: Run** — FAIL (module missing).
+
+- [ ] **Step 3: Implement**
+
+```ts
+// use-stage-publisher.ts
+import { useEffect } from 'react';
+import { beatAt, crossedThreshold, inHold, timeAt, type StageBeat, type StageReadyMessage } from '../../lib/stage-beats';
+
+export const STAGE_DEMO_ORIGIN = 'https://demo.threadplane.ai';
+export const STAGE_DEMO_URL = `${STAGE_DEMO_ORIGIN}/stage?t=0`;
+export const STAGE_MESSAGE_TYPE = 'tplane-stage';
+
+export type StageMilestone = 'enter' | 'beat' | 'threshold' | 'complete';
+
+export interface StagePublisherDeps {
+  section: HTMLElement;
+  /** The iframe's window, or null while it is not mounted / not navigated. */
+  frameWindow: () => Window | null;
+  track: (milestone: StageMilestone, beat?: StageBeat) => void;
+  /** Called with the frame's first `ready`; the act uses it to crossfade the poster. */
+  onReady?: () => void;
+}
+
+export interface StagePublisher {
+  /** One frame: read --sc-p, post t if it changed, update verify attributes and milestones. */
+  tick(): void;
+  dispose(): void;
+}
+
+function readProgress(el: HTMLElement): number {
+  const v = parseFloat(el.style.getPropertyValue('--sc-p'));
+  return Number.isFinite(v) ? v : 0;
+}
+
+export function createStagePublisher(deps: StagePublisherDeps): StagePublisher {
+  let ready: StageReadyMessage | null = null;
+  let lastT = -1;
+  let lastP = -1;
+  let hold = false;
+  let entered = false;
+  let completed = false;
+  let thresholdSeen = false;
+  const beatsSeen = new Set<StageBeat>();
+  let disposed = false;
+
+  const onMessage = (e: MessageEvent) => {
+    if (e.origin !== STAGE_DEMO_ORIGIN) return;
+    const d = e.data as Record<string, unknown> | null;
+    if (!d || d['type'] !== STAGE_MESSAGE_TYPE) return;
+    if (d['ready'] === true && Array.isArray(d['beats']) && typeof d['totalMs'] === 'number') {
+      const first = ready === null;
+      ready = d as unknown as StageReadyMessage;
+      lastT = -1; // re-post the current t after a (re)ready
+      if (first) deps.onReady?.();
+      return;
+    }
+    if (typeof d['applied'] === 'number' && typeof d['phase'] === 'string') {
+      deps.section.setAttribute('data-sc-verify-state', `${d['phase']}:${d['applied']}`);
+    }
+  };
+  window.addEventListener('message', onMessage);
+
+  return {
+    tick() {
+      if (disposed) return;
+      const p = readProgress(deps.section);
+      // Verify hold, from scroll alone: the harness must see the authored hold even before the frame answers.
+      const h = inHold(p);
+      if (h !== hold) {
+        hold = h;
+        if (h) deps.section.setAttribute('data-sc-verify-hold', 'true');
+        else deps.section.removeAttribute('data-sc-verify-hold');
+      }
+      // Milestones.
+      if (!entered && p > 0) { entered = true; deps.track('enter'); }
+      const beat = beatAt(p);
+      if (p > 0 && !beatsSeen.has(beat)) { beatsSeen.add(beat); deps.track('beat', beat); }
+      if (lastP >= 0 && !thresholdSeen && crossedThreshold(lastP, p)) { thresholdSeen = true; deps.track('threshold'); }
+      if (!completed && p >= 0.999) { completed = true; deps.track('complete'); }
+      lastP = p;
+      // Seek.
+      if (!ready) return;
+      const t = timeAt(p, ready);
+      if (t === lastT) return;
+      const w = deps.frameWindow();
+      if (!w) return;
+      w.postMessage({ type: STAGE_MESSAGE_TYPE, t }, STAGE_DEMO_ORIGIN);
+      lastT = t;
+    },
+    dispose() {
+      disposed = true;
+      window.removeEventListener('message', onMessage);
+    },
+  };
+}
+
+/**
+ * Runs the publisher on animation frames while `active`, and only while the
+ * section intersects the viewport (a pinned act six viewports tall is on screen
+ * for a while; nothing is posted before it arrives or after it leaves).
+ */
+export function useStagePublisher(
+  sectionRef: React.RefObject<HTMLElement | null>,
+  active: boolean,
+  deps: Omit<StagePublisherDeps, 'section'>,
+): void {
+  useEffect(() => {
+    const section = sectionRef.current;
+    if (!active || !section) return;
+    const pub = createStagePublisher({ section, ...deps });
+    let onScreen = false;
+    let frame = 0;
+    const loop = () => {
+      pub.tick();
+      frame = onScreen ? requestAnimationFrame(loop) : 0;
+    };
+    const io = new IntersectionObserver((entries) => {
+      onScreen = entries.some((e) => e.isIntersecting);
+      if (onScreen && frame === 0) frame = requestAnimationFrame(loop);
+    });
+    io.observe(section);
+    return () => {
+      io.disconnect();
+      onScreen = false;
+      if (frame) cancelAnimationFrame(frame);
+      pub.dispose();
+    };
+    // deps are stable callbacks from the act; see StageAct.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sectionRef, active]);
+}
+```
+
+- [ ] **Step 4: Run** the spec — PASS. Mutation check: comment out `lastT = t;` → the first case fails (posts twice). Restore.
+
+- [ ] **Step 5: Commit** `feat(website): stage publisher — scroll to recorded time, verify attributes, milestones`
+
+---
+
+### Task 7: The act, the frame, the mode switch
+
+**Files:**
+- Create: `apps/website/src/components/landing/StageAct.tsx`, `Stage.tsx`, `Stage.spec.tsx`
+- Modify: `apps/website/src/styles/landing.css`, `apps/website/src/styles/style-contracts.spec.ts`
+- Modify: `apps/website/src/lib/analytics/events.ts`, `client.ts`, `client.spec.ts` (or `server.spec.ts`'s sibling — put the new case where `trackCtaClick` is tested)
+
+- [ ] **Step 1: Analytics (failing test first)**
+
+In the analytics spec that covers `trackCtaClick`, add:
+
+```ts
+it('trackStageProgress captures marketing:stage_progress with the milestone and beat', () => {
+  trackStageProgress('beat', 'approve');
+  expect(captureSpy).toHaveBeenCalledWith('marketing:stage_progress', expect.objectContaining({ surface: 'home_stage', stage_event: 'beat', beat: 'approve' }));
+});
+```
+(Use whatever posthog capture spy the file already sets up.) Then in `events.ts`: add `marketingStageProgress: 'marketing:stage_progress'` to `analyticsEvents`, `'home_stage'` to `AnalyticsSurface`, and to `AnalyticsProperties`: `stage_event?: 'enter' | 'beat' | 'threshold' | 'complete'; beat?: 'stream' | 'persist' | 'approve' | 'render';`. In `client.ts`:
+
+```ts
+export function trackStageProgress(stage_event: AnalyticsProperties['stage_event'], beat?: AnalyticsProperties['beat']) {
+  track(analyticsEvents.marketingStageProgress, { surface: 'home_stage', stage_event, ...(beat ? { beat } : {}) });
+}
+```
+
+- [ ] **Step 2: Failing tests for Stage**
+
+```tsx
+// Stage.spec.tsx
+import { act, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Stage } from './Stage';
+
+function mockViewport(width: number, reducedMotion: boolean) {
+  Object.defineProperty(window, 'innerWidth', { configurable: true, value: width });
+  window.matchMedia = vi.fn().mockImplementation((q: string) => ({
+    matches: q.includes('reduce') ? reducedMotion : false, media: q, addEventListener: vi.fn(), removeEventListener: vi.fn(),
+  })) as unknown as typeof window.matchMedia;
+}
+afterEach(() => { vi.restoreAllMocks(); });
+
+describe('Stage', () => {
+  it('renders the stills on the server and keeps them on a narrow viewport', async () => {
+    mockViewport(390, false);
+    render(<Stage />);
+    expect(screen.getAllByTestId('stage-still-beat')).toHaveLength(4);
+    expect(document.querySelector('[data-stage-act]')).toBeNull();
+  });
+  it('keeps the stills under reduced motion on a wide viewport', () => {
+    mockViewport(1440, true);
+    render(<Stage />);
+    expect(document.querySelector('[data-stage-act]')).toBeNull();
+  });
+  it('upgrades to the pinned act on a wide, motion-tolerant viewport', async () => {
+    mockViewport(1440, false);
+    (globalThis as { IntersectionObserver?: unknown }).IntersectionObserver = class { observe() {} disconnect() {} } as never;
+    render(<Stage />);
+    await act(async () => {});
+    const actEl = document.querySelector('[data-stage-act]')!;
+    expect(actEl.getAttribute('data-sc-act')).toBe('pin');
+    expect(actEl.getAttribute('data-sc-span')).toBe('6');
+    expect(actEl.querySelector('[data-sc-stage]')).not.toBeNull();
+    expect(actEl.querySelectorAll('[data-sc-cue]').length).toBeGreaterThanOrEqual(7); // 4 beats + 3 hold lines
+    expect(screen.queryAllByTestId('stage-still-beat')).toHaveLength(0);
+  });
+});
+```
+
+- [ ] **Step 3: Implement `Stage.tsx`**
+
+```tsx
+'use client';
+import { useEffect, useState } from 'react';
+import { StageStills } from './StageStills';
+import { StageAct } from './StageAct';
+
+export const STAGE_MIN_WIDTH = 1024;
+type Mode = 'stills' | 'act';
+
+function actAllowed(): boolean {
+  if (typeof window === 'undefined') return false;
+  if (window.innerWidth < STAGE_MIN_WIDTH) return false;
+  return !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+/**
+ * Spec §8: the stills are the default (no JS, narrow, reduced motion, frame
+ * failure); the pinned act is an upgrade decided after hydration so the server
+ * and the first client render agree.
+ */
+export function Stage() {
+  const [mode, setMode] = useState<Mode>('stills');
+  useEffect(() => { if (actAllowed()) setMode('act'); }, []);
+  if (mode === 'stills') return <StageStills />;
+  return <StageAct onFallback={() => setMode('stills')} />;
+}
+```
+
+- [ ] **Step 4: Implement `StageAct.tsx`**
+
+```tsx
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import { BrowserFrame } from '../ui/BrowserFrame';
+import { Container } from '../ui/Container';
+import { Eyebrow } from '../ui/Eyebrow';
+import { STAGE_HOLD_LINES, STAGE_RAIL } from '../../lib/positioning';
+import { STAGE_SPAN, cueFor, holdLineCues } from '../../lib/stage-beats';
+import { trackStageProgress } from '../../lib/analytics/client';
+import { STAGE_DEMO_URL, STAGE_MESSAGE_TYPE, STAGE_DEMO_ORIGIN, useStagePublisher, type StageMilestone } from './use-stage-publisher';
+import type { StageBeat } from '../../lib/stage-beats';
+
+const READY_TIMEOUT_MS = 8000;
+const POSTER = '/screenshots/stage-stream.webp';
+
+interface Props { onFallback: () => void }
+
+/**
+ * The pinned act (spec §4.1, §6, §7). The engine owns scroll and `--sc-p`;
+ * the publisher turns it into `t`; the iframe is the real `/stage`. Nothing in
+ * here sets React state per frame.
+ */
+export function StageAct({ onFallback }: Props) {
+  const sectionRef = useRef<HTMLElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [frameLoaded, setFrameLoaded] = useState(false);
+  const [ready, setReady] = useState(false);
+
+  // Mount the engine once the act is in the DOM. The engine is an IIFE that
+  // touches window at load, so it is imported on the client only.
+  useEffect(() => {
+    let cancelled = false;
+    void import('../../vendor/scrollcraft/scrollcraft.js').then(() => {
+      if (cancelled || !sectionRef.current || !window.ScrollCraft) return;
+      // Mount on the act's PARENT: the engine collects acts with
+      // root.querySelectorAll('[data-sc-act]'), which matches descendants only.
+      window.ScrollCraft.mount(engineRoot(sectionRef.current));
+    });
+    return () => { cancelled = true; };
+  }, []);
+
+  // Ready timeout → the stills.
+  useEffect(() => {
+    if (ready) return;
+    const t = setTimeout(onFallback, READY_TIMEOUT_MS);
+    return () => clearTimeout(t);
+  }, [ready, onFallback]);
+
+  const track = useCallback((m: StageMilestone, beat?: StageBeat) => trackStageProgress(m, beat), []);
+  const frameWindow = useCallback(() => (frameLoaded ? iframeRef.current?.contentWindow ?? null : null), [frameLoaded]);
+  const onReady = useCallback(() => setReady(true), []);
+  useStagePublisher(sectionRef, true, { frameWindow, track, onReady });
+
+  const holdCues = holdLineCues(STAGE_HOLD_LINES.length);
+
+  return (
+    <section
+      ref={sectionRef}
+      id="stage"
+      className="stage-act"
+      data-stage-act
+      data-sc-act="pin"
+      data-sc-span={STAGE_SPAN}
+      data-state={ready ? 'ready' : 'mounting'}
+      aria-labelledby="stage-heading"
+    >
+      <div className="stage-pin" data-sc-stage>
+        <Container className="stage-pin-inner">
+          <div className="stage-frame">
+            <BrowserFrame url="demo.threadplane.ai/stage" elevation="lg" className="stage-frame-chrome">
+              <div className="stage-frame-stage">
+                <img src={POSTER} width={1200} height={720} alt="" aria-hidden="true" className="stage-frame-poster" decoding="async" />
+                <iframe
+                  ref={iframeRef}
+                  src={STAGE_DEMO_URL}
+                  title="Threadplane stage: a recorded LangGraph run, scrubbed by scroll"
+                  className="stage-frame-iframe"
+                  tabIndex={-1}
+                  onLoad={() => setFrameLoaded(true)}
+                />
+              </div>
+            </BrowserFrame>
+            <a className="stage-frame-open" href={STAGE_DEMO_ORIGIN} target="_blank" rel="noopener noreferrer">Open the live demo →</a>
+          </div>
+          <div className="stage-rail">
+            <h2 id="stage-heading" className="sr-only">One real run: stream, persist, approve, render</h2>
+            {STAGE_RAIL.map((b) => (
+              <div className="stage-rail-beat" data-beat={b.beat} data-sc-cue={cueFor(b.beat)} key={b.beat}>
+                <div className="feature-block-rail">
+                  <Eyebrow tone="accent" className="feature-block-eyebrow">{b.eyebrow}</Eyebrow>
+                  <span className="feature-block-rail-line" aria-hidden="true" />
+                </div>
+                <h3 className="feature-block-heading stage-rail-heading">{b.headline}</h3>
+                <p className="feature-block-body">{b.body}</p>
+                <div className="feature-block-rows">
+                  {b.rows.map((row) => (
+                    <div className="feature-block-row" key={row.claim}>
+                      <span className="feature-block-row-claim">{row.claim}</span>
+                      <span className="feature-block-row-api">{row.api}</span>
+                    </div>
+                  ))}
+                </div>
+                <Link href={b.cta.href} className="feature-block-cta">{b.cta.label} →</Link>
+              </div>
+            ))}
+            {STAGE_HOLD_LINES.map((line, i) => (
+              <p className="stage-rail-hold" data-sc-cue={holdCues[i]} key={line}>{line}</p>
+            ))}
+          </div>
+        </Container>
+      </div>
+    </section>
+  );
+}
+```
+
+Notes for the implementer:
+- The rail beats stack in the same grid cell (`grid-area: 1 / 1`) so cues crossfade in place; the hold lines sit in a second cell beneath. See the CSS.
+- The engine sets the section's inline height to `span * 100vh` and sticks `[data-sc-stage]`; the CSS below provides the sticky rule the engine checks for (it warns "not sticky" otherwise).
+- The section's `id="stage"` is shared by `StageStills`; only one renders at a time.
+- `frameWindow` is memoized on `frameLoaded`; the publisher hook re-subscribes when `active` or the ref changes only, and reads `deps` through the closure created at subscribe time — so pass `frameLoaded` through a ref inside the hook instead if the first `ready` arrives before `frameLoaded` flips (it cannot: `ready` is posted by the frame after it has navigated, which is after `load`). Keep the simple version unless the e2e shows a missed first post.
+
+- [ ] **Step 5: CSS** — append to `landing.css`:
+
+```css
+/* The pinned act. The engine sets the act's height inline (span × 100vh) and
+ * requires the stage to be sticky; it only warns when it is not, so the
+ * style-contract spec pins this rule. */
+.stage-act { position: relative; }
+.stage-pin {
+  position: sticky; top: 0;
+  height: 100vh; height: 100svh;
+  overflow: clip;
+  display: flex; align-items: center;
+}
+.stage-pin-inner { display: grid; grid-template-columns: 3fr 2fr; gap: 48px; align-items: center; width: 100%; }
+.stage-frame { display: grid; gap: 12px; }
+.stage-frame-stage { position: relative; aspect-ratio: 1200 / 720; background: #0f1116; }
+.stage-frame-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity 300ms ease; }
+.stage-frame-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 300ms ease; pointer-events: none; }
+.stage-act[data-state='ready'] .stage-frame-iframe { opacity: 1; }
+.stage-act[data-state='ready'] .stage-frame-poster { opacity: 0; }
+.stage-frame-open { font-size: 13px; justify-self: end; }
+.stage-rail { display: grid; grid-template-rows: auto auto; align-content: center; min-height: 60vh; }
+.stage-rail-beat { grid-area: 1 / 1; }
+.stage-rail-hold { grid-area: 2 / 1; margin: 24px 0 0; font-size: 15px; line-height: 1.5; }
+/* Cues start hidden; the engine drives opacity and transform per frame. */
+.stage-act [data-sc-cue] { opacity: 0; will-change: opacity, transform; }
+```
+
+`pointer-events: none` on the iframe: the stage is a display, and the frame's interrupt panel is already inert inside `/stage`; the "Open the live demo" link is the way in. Verify BrowserFrame's chrome height leaves the 1200/720 frame inside a 900px-tall viewport at 1440 wide (about 700 × 420 plus chrome); if it overflows, cap `.stage-frame` with `max-height: calc(100vh - 160px)` and let the aspect box shrink.
+
+- [ ] **Step 6: Style contract** — in `style-contracts.spec.ts` add, following the file's existing pattern (`loadStylesheet('landing.css')`, `declarationsFor`):
+
+```ts
+it('the stage pin is sticky — the engine only warns when it is not', () => {
+  const css = loadStylesheet('landing.css');
+  expect(declarationsFor(css, '.stage-pin')).toMatch(/position:\s*sticky/);
+  expect(declarationsFor(css, '.stage-act [data-sc-cue]')).toMatch(/opacity:\s*0/);
+});
+```
+
+- [ ] **Step 7: Run** `npx nx test website -- Stage style-contracts analytics` — PASS. `npx eslint apps/website/src/components/landing apps/website/src/lib/analytics` — clean.
+
+- [ ] **Step 8: Commit** `feat(website): the pinned stage act — engine mount, frame, rail cues, analytics`
+
+---
+
+### Task 8: Put it on the page
+
+**Files:**
+- Modify: `apps/website/src/app/page.tsx`
+- Possibly modify: `apps/website/src/lib/section-media.ts` + spec, `apps/website/src/lib/build-panes.tsx`
+
+- [ ] **Step 1: Replace the four FeatureBlocks** with `<Stage />` (import from `'../components/landing/Stage'`), between `<ScopeTable />` and `<FinalCTA ... />`. Remove the now-unused imports (`FeatureBlock`, `MediumSwitcher`, `SECTION_MEDIA`, `buildPanes`) and the `Promise.all` that built the panes. Keep `HomePage` async only if something else awaits.
+
+- [ ] **Step 2: Dead data** — `grep -rn "SECTION_MEDIA\|buildPanes" apps/website/src --include='*.ts' --include='*.tsx' -l`. If the solutions pages still use them, leave `section-media.ts` alone. If nothing but its own spec uses `SECTION_MEDIA.stream/persist/approve/render`, delete those four entries and their spec cases, keeping the library and solution keys. Do not delete `DemoModal.tsx` or `MediumSwitcher.tsx` (solutions pages).
+
+- [ ] **Step 3: Verify**
+
+```bash
+npx nx test website
+npx nx lint website 2>&1 | sed 's/\x1b\[[0-9;]*m//g' | grep -E "problems|error  "
+npx nx build website 2>&1 | grep -E "error|Compiled|✓|Failed" | head
+```
+All green; the build is the only type check.
+
+- [ ] **Step 4: Preview** — `npx nx serve website` (or `preview_start`), open `/`, scroll: the act pins, the rail crossfades, the frame shows the poster then the live frame (the iframe points at production `/stage`, which exists only after #1030 deploys; before that the poster holds and the 8 s timeout drops to the stills — expected). At 390px and under `prefers-reduced-motion` the stills render. Take a screenshot at the hold.
+
+- [ ] **Step 5: Commit** `feat(website): the stage replaces the four capability blocks on the homepage`
+
+---
+
+### Task 9: Website e2e for the stage
+
+**Files:**
+- Create: `apps/website/e2e/home-stage.spec.ts`
+
+- [ ] **Step 1: The spec**
+
+```ts
+import { test, expect, type Page } from '@playwright/test';
+
+/** Drives the pinned act: the section is 6 viewports tall; scroll to a fraction of its travel. */
+async function scrollAct(page: Page, p: number) {
+  await page.evaluate((frac) => {
+    const el = document.querySelector('[data-stage-act]') as HTMLElement;
+    const top = el.getBoundingClientRect().top + window.scrollY;
+    window.scrollTo({ top: top + (el.offsetHeight - window.innerHeight) * frac, behavior: 'instant' });
+  }, p);
+  await page.waitForTimeout(350); // the engine lerps 0.18/frame; ~20 frames to settle
+}
+const progress = (page: Page) =>
+  page.evaluate(() => parseFloat((document.querySelector('[data-stage-act]') as HTMLElement).style.getPropertyValue('--sc-p')));
+
+test.describe('homepage stage', () => {
+  test('stills render first and the act upgrades on desktop', async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await page.goto('/');
+    const act = page.locator('[data-stage-act]');
+    await expect(act).toHaveAttribute('data-sc-span', '6');
+    await expect(act.locator('iframe')).toHaveAttribute('src', 'https://demo.threadplane.ai/stage?t=0');
+    await expect(act.locator('.stage-pin')).toHaveCSS('position', 'sticky');
+    await expect(page.getByTestId('stage-still-beat')).toHaveCount(0);
+  });
+
+  test('scroll drives the act: progress, cues, and the declared hold', async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await page.goto('/');
+    await expect(page.locator('html')).toHaveClass(/sc-ready/);
+    await scrollAct(page, 0.05);
+    expect(await progress(page)).toBeGreaterThan(0);
+    const stream = page.locator('.stage-rail-beat[data-beat="stream"]');
+    await expect(stream).toHaveCSS('opacity', '1');
+    await scrollAct(page, 0.55); // inside the approve hold (approve spans 0.4167..0.8333; hold 35–70% of it)
+    await expect(page.locator('[data-stage-act]')).toHaveAttribute('data-sc-verify-hold', 'true');
+    await expect(page.locator('.stage-rail-hold').last()).toHaveCSS('opacity', /^(0\.[5-9]\d*|1)$/);
+    await scrollAct(page, 0.8);
+    await expect(page.locator('[data-stage-act]')).not.toHaveAttribute('data-sc-verify-hold', 'true');
+    await scrollAct(page, 1);
+    await expect(page.locator('.stage-rail-beat[data-beat="render"]')).toHaveCSS('opacity', '1');
+  });
+
+  test('the frame answers and the verify state changes between positions', async ({ page }) => {
+    test.skip(process.env['STAGE_LIVE_FRAME'] !== 'true', 'needs the deployed demo /stage (set STAGE_LIVE_FRAME=true after #1030 promotes)');
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await page.goto('/');
+    const act = page.locator('[data-stage-act]');
+    await expect(act).toHaveAttribute('data-state', 'ready', { timeout: 20_000 });
+    await scrollAct(page, 0.1);
+    await expect(act).toHaveAttribute('data-sc-verify-state', /^stream:\d+$/, { timeout: 15_000 });
+    const a = await act.getAttribute('data-sc-verify-state');
+    await scrollAct(page, 0.55);
+    await expect(act).toHaveAttribute('data-sc-verify-state', /^pause:\d+$/, { timeout: 15_000 });
+    expect(await act.getAttribute('data-sc-verify-state')).not.toBe(a);
+    await scrollAct(page, 1);
+    await expect(act).toHaveAttribute('data-sc-verify-state', /^render:\d+$/, { timeout: 20_000 });
+  });
+
+  test('phones and reduced motion get the stills', async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto('/');
+    await expect(page.getByTestId('stage-still-beat')).toHaveCount(4);
+    await expect(page.locator('[data-stage-act]')).toHaveCount(0);
+    await page.setViewportSize({ width: 1440, height: 900 });
+    await page.emulateMedia({ reducedMotion: 'reduce' });
+    await page.goto('/');
+    await expect(page.getByTestId('stage-still-beat')).toHaveCount(4);
+    await expect(page.locator('[data-stage-act]')).toHaveCount(0);
+  });
+});
+```
+
+- [ ] **Step 2: Run** `npx nx e2e website -- --grep "homepage stage"` — 3 pass, 1 skipped. Fix the component, never the assertions' intent. If the `stream` cue is not at opacity 1 at p = 0.05, check `cueFor('stream')` gives ramp-in 0 (greet).
+
+- [ ] **Step 3: Commit** `test(website): homepage stage e2e — upgrade, scroll-driven cues, the hold, the stills`
+
+---
+
+### Task 10: The scroll-craft harness in e2e
+
+**Files:**
+- Create: `apps/website/e2e/scroll-craft/shoot.mjs` (vendored, unmodified, from the same pinned commit: `plugins/nateherk-design/skills/scroll-craft/scripts/shoot.mjs`), `apps/website/e2e/scroll-craft/verify-home.mjs`, `apps/website/e2e/scroll-craft/README.md`
+- Modify: `.github/workflows/ci.yml` (`website-e2e` job), `apps/website/eslint.config.mjs` (ignore `e2e/scroll-craft/shoot.mjs`)
+
+`shoot.mjs` resolves `playwright-core` from the cwd's `package.json` (present at the repo root) and needs installed Chrome (`SCROLLCRAFT_CHROME` overrides; GitHub's ubuntu runners ship `/usr/bin/google-chrome`). It needs `ffmpeg` for the contact sheet; check whether it degrades without it (read the file's sheet section) and install it in CI with `sudo apt-get install -y ffmpeg` if it does not.
+
+- [ ] **Step 1: `verify-home.mjs`**
+
+```js
+#!/usr/bin/env node
+/**
+ * Runs scroll-craft's shoot.mjs against a running website (spec §8) in the
+ * three modes and fails on what the harness reports as defects:
+ * DEAD SCROLL outside the declared hold, and cues that never peak.
+ *   node apps/website/e2e/scroll-craft/verify-home.mjs --url http://127.0.0.1:4308 --out <dir>
+ */
+import { spawnSync } from 'node:child_process';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const argv = process.argv.slice(2);
+const arg = (n, d) => { const i = argv.indexOf(n); return i > -1 && argv[i + 1] ? argv[i + 1] : d; };
+const URL = arg('--url', 'http://127.0.0.1:4308');
+const OUT = path.resolve(arg('--out', 'dist/stage-shots'));
+const shoot = path.join(path.dirname(fileURLToPath(import.meta.url)), 'shoot.mjs');
+
+const modes = [
+  { name: 'desktop', args: ['--width', '1440', '--height', '900'] },
+  { name: 'phone', args: ['--width', '390', '--height', '844'] },
+  { name: 'reduced', args: ['--reduced-motion'] },
+];
+let failed = false;
+for (const m of modes) {
+  const r = spawnSync(process.execPath, [shoot, '--url', URL, '--out', path.join(OUT, m.name), '--per-act', '8', ...m.args], { encoding: 'utf8' });
+  const out = `${r.stdout}\n${r.stderr}`;
+  console.log(`\n=== ${m.name} ===\n${out}`);
+  if (r.status !== 0) failed = true;
+  if (/DEAD SCROLL between/.test(out)) failed = true;
+  if (/never (?:reach|peak)/i.test(out)) failed = true;
+}
+process.exit(failed ? 1 : 0);
+```
+Read `shoot.mjs`'s summary lines once and align the two regexes with its exact wording ("DEAD SCROLL between:" is verbatim; find the cue-peak line).
+
+- [ ] **Step 2: README** — what it verifies, the two commands (build + `next start`, then verify), where the contact sheets land, and that the phone and reduced-motion passes see the stills (no pinned act), so their dead-scroll check is trivially clean and their value is the contact sheet and the contrast pass.
+
+- [ ] **Step 3: Local run**
+
+```bash
+npx nx build website
+(cd apps/website && npx next start -p 4308 &) ; sleep 5
+node apps/website/e2e/scroll-craft/verify-home.mjs --url http://127.0.0.1:4308 --out /path/to/scratchpad/stage-shots
+```
+Read `desktop/sheet.png` (Read tool) and check the act frames: poster or frame, rail cues at full opacity somewhere in each beat, the hold lines during the hold. Fix any DEAD SCROLL by adjusting cue windows in `stage-beats.ts` (not by publishing raw progress). Kill the server.
+
+- [ ] **Step 4: CI** — in `.github/workflows/ci.yml`, `website-e2e` job, after the "Public copy boundary (production build)" step:
+
+```yaml
+      - name: Stage scroll verification (scroll-craft harness)
+        env:
+          GROWTH_FORM_POLICY: growth_v1
+        run: |
+          npx nx build website
+          (cd apps/website && npx next start -p 4308 > /tmp/next-start.log 2>&1 &)
+          for i in $(seq 1 30); do curl -sf http://127.0.0.1:4308/ > /dev/null && break; sleep 1; done
+          node apps/website/e2e/scroll-craft/verify-home.mjs --url http://127.0.0.1:4308 --out dist/stage-shots
+      - name: Upload stage contact sheets
+        if: always()
+        uses: actions/upload-artifact@<pinned sha the workflow already uses for upload-artifact; copy from another step>
+        with:
+          name: stage-shots
+          path: dist/stage-shots/**/sheet.png
+          if-no-files-found: ignore
+```
+Check whether the production public-copy step already builds (`WEBSITE_E2E_MODE=production` serves "the already completed Nx production build" — read `playwright.config.ts`'s `webServer` for that mode and reuse its build if it is cached by Nx; `npx nx build website` is a cache hit then).
+
+- [ ] **Step 5: Commit** `test(website): scroll-craft verification of the homepage stage in CI`
+
+---
+
+### Task 11: Verification and PR
+
+- [ ] **Step 1: Everything**
+
+```bash
+npx nx test website
+npx nx lint website 2>&1 | sed 's/\x1b\[[0-9;]*m//g' | grep -E "problems|error  "
+npx nx build website 2>&1 | grep -iE "error|compiled|failed" | head
+npx nx e2e website -- --grep "homepage stage|homepage hero|public copy"
+cd examples/chat/angular && npx vitest run src/app/stage && cd ../../..
+npx nx build examples-chat-angular --configuration=production 2>&1 | grep -E "Initial total|exceeded|Successfully"
+```
+All green. Then, if #1030 has promoted to `demo.threadplane.ai` (check `curl -s https://demo.threadplane.ai/stage | head -c 200` returns the app shell): `STAGE_LIVE_FRAME=true npx nx e2e website -- --grep "the frame answers"` — pass, and paste the three `data-sc-verify-state` values into the PR.
+
+- [ ] **Step 2: Rebase** onto `origin/main` (after #1030 merges), re-run the unit suites, push, PR:
+
+```bash
+git push -u origin blove/stage-homepage
+gh pr create --title "feat(website): the stage on the homepage — one real run, scrubbed by scroll (live-stage plan 3 of 3)" --body-file - <<'EOF'
+## Why
+
+Plan 3 of the homepage live stage (`docs/superpowers/specs/2026-09-05-homepage-live-stage-design.md` §4.1, §4.3, §5.2, §6–§10). Plan 1 restructured the page (#1024); plan 2 built the seekable `/stage` route in the demo app (#1030). This PR puts it on the homepage.
+
+## What
+
+- One pinned act (`data-sc-act="pin" data-sc-span="6"`) driven by scroll-craft's engine, vendored unmodified and hash-pinned at `0b81622` (MIT). Its CSS is not vendored; the sticky and cue rules live under the website's style contract.
+- `stage-beats.ts`: shares (1.3 / 1.2 / 2.4 / 1.1 vh), the piecewise monotonic scroll → time map, the 35–70% hold inside Approve where recorded time is pinned at the interrupt, the threshold at 70% that dispatches the resume, the render tail on the mounted form, and the rail's cue windows — one table, two views.
+- A DOM-only publisher posts `{ type: 'tplane-stage', t }` to the iframe when `t` changes and the act is on screen; the frame's `{ applied, phase }` lands in `data-sc-verify-state`, the hold in `data-sc-verify-hold`, so the harness sees the bespoke stage.
+- Fallback: four stacked stills with the same copy — the server-rendered default, kept below 1024px, under reduced motion, without JS, or when the frame never reports ready.
+- Analytics: `marketing:stage_progress` with `enter | beat | threshold | complete`.
+- The four capability `FeatureBlock`s leave the homepage (they stay for the solutions pages).
+- scroll-craft's `shoot.mjs` runs in CI against `next start` at desktop, phone and reduced motion; fails on dead scroll outside the declared hold and on cues that never peak; contact sheets are an artifact.
+
+## Tests
+
+Beat map (monotonic, boundaries, hold, threshold, tail, cues), publisher (posts on change only, origin check, verify attributes, milestones once each), Stage mode switch, stills, style contract, analytics, positioning; e2e for the upgrade, scroll-driven cues and the hold, the stills, and (env-gated) the live frame's verify state.
+
+🤖 Generated with [Claude Code](https://claude.com/claude-code)
+EOF
+gh pr merge --auto --squash
+```
+
+---
+
+## Self-review
+
+**Spec coverage:** §4.1 layout (Task 7: two columns, `data-sc-cue` rail, greet form on the first beat via `cueFor`, closing hold on the last, the poster as the ground before progress leaves zero); §4.3 protocol (Task 1 extends `ready`; Task 6 posts `t` per changed frame while on screen and writes `data-sc-verify-state`, origin-checked both ways); §5.2 beat map (Task 3, data in one file; cue windows derived from the shares; recording numbers from `ready`); §6 peak (Task 3's three ranges, `data-sc-verify-hold` in Task 6, the threshold as a scroll position, scrolling back above 70% rewinds because `timeAt` is pure in `p` and the frame rewinds on a backward seek); §7 smoothness (one playhead — the engine's lerp; the parent writes nothing but one attribute and one message per frame; batching and the rewind budget are plan 2's); §8 fallbacks (Task 5, Task 7's `Stage` gate at 1024px / reduced motion / no JS / ready timeout; harness in Task 10; rail is real markup; iframe has a title and `tabIndex=-1`, stills have alt text); §9 analytics (Task 7 Step 1 + Task 6 milestones); §10 tests (each listed test has a task: monotonic map, publisher posts on change only while on screen, stills render four beats, public-copy scan, e2e verify-state change and the harness).
+
+**Deviations stated:** §8's harness runs in CI at desktop only: the vendored `shoot.mjs` waits for `html.sc-ready`, which only a pinned act sets, and below 1024px or under reduced motion the page is the stills with no engine, so the phone and reduced-motion passes are opt-in (`--modes`) and exist for the contact sheet and the contrast pass. It samples eight positions per act, not the spec's six. `next start` cannot serve the Nx build (the emitted next.config is rewritten), so the harness runs against `nx serve --configuration=production`. §7's "snapshot checkpoints every 200 events" was deferred in plan 2 and is not revisited here. §8's phone stills carry no devtools (the stage docks none below 768px, plan 2's decision); the rail copy carries the checkpoint claim. §9's "win condition" is a reporting task, not code. The "Open the live demo" link goes to the demo root, not `/stage`, because `/stage` has no live mode. The iframe is `pointer-events: none` on the homepage (the spec makes the panel inert inside `/stage`; the parent additionally makes the whole frame a display, which keeps wheel events on the page so the scrubber never fights the frame's own scroll).
+
+**Placeholder scan:** the hash in Task 2 and the `upload-artifact` SHA in Task 10 are read from the environment at execution time and the steps say how. No TBDs.
+
+**Type consistency:** `StageReadyMessage` (Task 3) matches the fields Task 1 posts (`totalMs`, `beats`, `hold`, `reloadEndMs`); `StageBeat` in `stage-beats.ts` and `StageBeatKey` in `positioning.ts` are the same union (the spec test in Task 4 asserts the order); `createStagePublisher` (Task 6) is consumed by `StageAct` (Task 7) through `useStagePublisher` with `frameWindow`, `track`, `onReady`; `trackStageProgress(stage_event, beat)` (Task 7 Step 1) matches the `track` callback's `(milestone, beat)` shape; `cueFor`/`holdLineCues` (Task 3) feed the `data-sc-cue` attributes the e2e (Task 9) asserts through opacity.
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 25c3a9cb4..4e36359f5 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -14,6 +14,9 @@ export default [
       '**/.vercel/**',
       '**/next-env.d.ts',
       '**/.install-collector/**',
+      // Vendored byte-identical from upstream; its hash is pinned by a spec.
+      'apps/website/src/vendor/scrollcraft/scrollcraft.js',
+      'apps/website/e2e/scroll-craft/shoot.mjs',
     ],
   },
   {
diff --git a/examples/chat/angular/src/app/stage/stage-bridge.spec.ts b/examples/chat/angular/src/app/stage/stage-bridge.spec.ts
index 678b39a23..a942de070 100644
--- a/examples/chat/angular/src/app/stage/stage-bridge.spec.ts
+++ b/examples/chat/angular/src/app/stage/stage-bridge.spec.ts
@@ -33,14 +33,72 @@ describe('createStageBridge', () => {
   it('posts ready and applied state to the parent only', () => {
     const e = env();
     const bridge = createStageBridge({ referrer: e.referrer, parent: e.parent, self: e.self });
-    bridge.postReady({ totalMs: 9000, beats: [{ beat: 'stream', startMs: 0, endMs: 1000 }] });
+    bridge.postReady({
+      totalMs: 9000,
+      beats: [{ beat: 'stream', startMs: 0, endMs: 1000 }],
+      hold: { startMs: 5000, endMs: 8000 },
+      reloadEndMs: 1600,
+    });
     bridge.postState({ applied: 3, phase: 'stream', t: 120 });
     expect((e.parent.postMessage as ReturnType<typeof vi.fn>).mock.calls.map((c) => c[0])).toEqual([
-      { type: STAGE_MESSAGE_TYPE, ready: true, totalMs: 9000, beats: [{ beat: 'stream', startMs: 0, endMs: 1000 }] },
+      {
+        type: STAGE_MESSAGE_TYPE,
+        ready: true,
+        totalMs: 9000,
+        beats: [{ beat: 'stream', startMs: 0, endMs: 1000 }],
+        hold: { startMs: 5000, endMs: 8000 },
+        reloadEndMs: 1600,
+      },
       { type: STAGE_MESSAGE_TYPE, applied: 3, phase: 'stream', t: 120 },
     ]);
   });
 
+  it('postReady carries the hold and the reload boundary the parent maps scroll through', () => {
+    const posted: unknown[] = [];
+    const parent = { postMessage: (m: unknown) => posted.push(m) } as unknown as Window;
+    const self = { addEventListener: () => undefined, removeEventListener: () => undefined } as unknown as Window;
+    const bridge = createStageBridge({ referrer: 'https://threadplane.ai/', parent, self });
+    bridge.postReady({
+      totalMs: 9000,
+      beats: [{ beat: 'stream', startMs: 0, endMs: 1000 }],
+      hold: { startMs: 5000, endMs: 8000 },
+      reloadEndMs: 1600,
+    });
+    expect(posted[0]).toMatchObject({
+      type: STAGE_MESSAGE_TYPE,
+      ready: true,
+      hold: { startMs: 5000, endMs: 8000 },
+      reloadEndMs: 1600,
+    });
+  });
+
+  it('re-posts ready once an empty-referrer frame learns the parent origin from a seek', () => {
+    const e = env('');
+    const bridge = createStageBridge({ referrer: e.referrer, parent: e.parent, self: e.self });
+    const seen: number[] = [];
+    bridge.onSeek((t) => seen.push(t));
+    const ready = {
+      totalMs: 9000,
+      beats: [{ beat: 'stream' as const, startMs: 0, endMs: 1000 }],
+      hold: { startMs: 5000, endMs: 8000 },
+      reloadEndMs: 1600,
+    };
+    bridge.postReady(ready);
+    // Nothing yet: the frame has nowhere to answer.
+    expect(e.parent.postMessage).not.toHaveBeenCalled();
+    e.fire({ type: STAGE_MESSAGE_TYPE, t: 5 }, 'https://evil.example');
+    expect(e.parent.postMessage).not.toHaveBeenCalled();
+    e.fire({ type: STAGE_MESSAGE_TYPE, t: 0 });
+    expect(seen).toEqual([0]);
+    const calls = (e.parent.postMessage as ReturnType<typeof vi.fn>).mock.calls;
+    expect(calls).toHaveLength(1);
+    expect(calls[0][0]).toEqual({ type: STAGE_MESSAGE_TYPE, ready: true, ...ready });
+    expect(calls[0][1]).toBe('https://threadplane.ai');
+    // A second seek does not repeat the handshake.
+    e.fire({ type: STAGE_MESSAGE_TYPE, t: 100 });
+    expect(calls).toHaveLength(1);
+  });
+
   it('posts nothing when not embedded', () => {
     const e = env();
     const bridge = createStageBridge({ referrer: '', parent: e.self, self: e.self });
diff --git a/examples/chat/angular/src/app/stage/stage-bridge.ts b/examples/chat/angular/src/app/stage/stage-bridge.ts
index 7aadc92b5..46119a16e 100644
--- a/examples/chat/angular/src/app/stage/stage-bridge.ts
+++ b/examples/chat/angular/src/app/stage/stage-bridge.ts
@@ -6,6 +6,10 @@ export const STAGE_MESSAGE_TYPE = 'tplane-stage';
 export interface StageReady {
   totalMs: number;
   beats: readonly TimelineBeat[];
+  /** The authored hold at the interrupt (timeline ms). */
+  hold: { readonly startMs: number; readonly endMs: number };
+  /** End of the reload run (the persist beat's, in the authored recording), or null when the recording has none. */
+  reloadEndMs: number | null;
 }
 
 export interface StageState {
@@ -44,6 +48,10 @@ export function createStageBridge(env: BridgeEnv): StageBridge {
   let parentOrigin: string | null =
     fromReferrer !== null && isAllowedParentOrigin(fromReferrer) ? fromReferrer : null;
   const embedded = env.parent !== env.self;
+  // The last `ready` posted (or held back while the parent origin was still
+  // unknown): re-posted the moment the origin is learned, so a parent that
+  // arrived with an empty referrer still receives the handshake.
+  let lastReady: Record<string, unknown> | null = null;
   const post = (msg: Record<string, unknown>) => {
     if (!embedded || parentOrigin === null) return;
     env.parent.postMessage({ type: STAGE_MESSAGE_TYPE, ...msg }, parentOrigin);
@@ -57,14 +65,24 @@ export function createStageBridge(env: BridgeEnv): StageBridge {
         if (!d || d.type !== STAGE_MESSAGE_TYPE || typeof d.t !== 'number' || !Number.isFinite(d.t)) return;
         // Under a strict Referrer-Policy the referrer is empty, so the first
         // allowlisted message is how the frame learns where to answer.
-        if (parentOrigin === null) parentOrigin = e.origin;
+        if (parentOrigin === null) {
+          parentOrigin = e.origin;
+          if (lastReady !== null) post(lastReady);
+        }
         cb(d.t);
       };
       env.self.addEventListener('message', handler);
       return () => env.self.removeEventListener('message', handler);
     },
     postReady(ready) {
-      post({ ready: true, totalMs: ready.totalMs, beats: ready.beats });
+      lastReady = {
+        ready: true,
+        totalMs: ready.totalMs,
+        beats: ready.beats,
+        hold: ready.hold,
+        reloadEndMs: ready.reloadEndMs,
+      };
+      post(lastReady);
     },
     postState(state) {
       post({ applied: state.applied, phase: state.phase, t: state.t });
diff --git a/examples/chat/angular/src/app/stage/stage-mode.component.spec.ts b/examples/chat/angular/src/app/stage/stage-mode.component.spec.ts
index e49ddc99a..48d7d904b 100644
--- a/examples/chat/angular/src/app/stage/stage-mode.component.spec.ts
+++ b/examples/chat/angular/src/app/stage/stage-mode.component.spec.ts
@@ -4,6 +4,7 @@ import { provideRouter } from '@angular/router';
 import { StageMode } from './stage-mode.component';
 import { StageReplayTransport } from './stage-replay.transport';
 import { MINIMAL } from './stage-recording.fixtures';
+import { buildTimeline } from './stage-timeline';
 
 describe('StageMode', () => {
   let fx: ComponentFixture<StageMode>;
@@ -160,7 +161,16 @@ describe('StageMode', () => {
     };
     await fx.componentInstance.boot(new URLSearchParams('t=0'));
     fx.detectChanges();
-    expect(posted[0]).toMatchObject({ totalMs: expect.any(Number) });
+    const tl = buildTimeline(MINIMAL);
+    // MINIMAL's run 1 is the reload; anchor to it so the assertion cannot
+    // collapse to null === null if the fixture ever loses its reload run.
+    const reload = tl.runs[1];
+    expect(reload.run.action.kind).toBe('reload');
+    expect(posted[0]).toMatchObject({
+      totalMs: expect.any(Number),
+      hold: tl.hold,
+      reloadEndMs: reload.endMs,
+    });
     expect(posted.some((p) => (p as { phase?: string }).phase === 'stream')).toBe(true);
   });
 
diff --git a/examples/chat/angular/src/app/stage/stage-mode.component.ts b/examples/chat/angular/src/app/stage/stage-mode.component.ts
index 5277e30de..7e1427c57 100644
--- a/examples/chat/angular/src/app/stage/stage-mode.component.ts
+++ b/examples/chat/angular/src/app/stage/stage-mode.component.ts
@@ -365,9 +365,19 @@ export class StageMode {
         await this.replayTransport.recordingData(),
       );
       this.controller.set(controller);
-      this.bridge.postReady({ totalMs: tl.totalMs, beats: tl.beats });
+      // Seeks are subscribed before `ready` is posted: with an empty referrer
+      // the bridge learns the parent origin from the parent's first message
+      // and re-posts `ready` from inside that handler, so the listener must
+      // already exist. The controller is set above, so an early seek applies.
       const off = this.bridge.onSeek((t) => this.requestSeek(t));
       this.destroyRef.onDestroy(off);
+      const reload = tl.runs.find((r) => r.run.action.kind === 'reload');
+      this.bridge.postReady({
+        totalMs: tl.totalMs,
+        beats: tl.beats,
+        hold: tl.hold,
+        reloadEndMs: reload ? reload.endMs : null,
+      });
       await controller.seek(Number(params.get('t')) || 0);
       // Published here as well as from the effect: `await boot()` must imply
       // the applied state is observable, without waiting on a render pass.