diff --git a/.gitignore b/.gitignore
index 12b222d..eb3dc2c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,7 @@ backups/
 # deployment mounts from the host — a release artefact, not source.
 media/
 /media
+
+# Render working directory for scripts/learn-film.mjs. The finished mp4 and its
+# poster are copied into the media directory, which is itself untracked.
+.film/
diff --git a/apps/web/src/components/motion/StageRail.tsx b/apps/web/src/components/motion/StageRail.tsx
index 9ace0ed..4940285 100644
--- a/apps/web/src/components/motion/StageRail.tsx
+++ b/apps/web/src/components/motion/StageRail.tsx
@@ -56,7 +56,17 @@ export function StageRail({
 
           const body = (
             <>
-              <span className="truncate text-xs font-medium uppercase tracking-wide text-muted">
+              {/*
+                * Wraps rather than truncates. The stage names are a fixed
+                * vocabulary of eight words we control, and truncation was
+                * silently rendering "QUALIFICATIO" and "PROCUREMEN" — losing a
+                * letter is worse than taking a second line. Two attempts to fix
+                * this by widening the card (8.5rem, then 10, then 11) each
+                * looked right in a DOM measurement and still clipped on the
+                * rendered frame, which is the argument for not depending on a
+                * magic width at all.
+                */}
+              <span className="text-xs font-medium uppercase leading-tight tracking-wide text-muted">
                 {DEMAND_STAGE_LABELS[stage]}
               </span>
               <span className={cn('nums text-2xl font-semibold leading-none', count === 0 && 'text-muted')}>
@@ -74,12 +84,22 @@ export function StageRail({
           );
 
           const shape = cn(
-            'tap flex w-[8.5rem] shrink-0 flex-col justify-between gap-2 rounded-xl border p-3 text-left',
+            // 10rem, not 8.5, so the common labels sit on one line; the two
+            // longest wrap to two rather than losing a letter.
+            'tap flex w-40 shrink-0 flex-col justify-between gap-2 rounded-xl border p-3 text-left',
             active ? 'border-brand bg-surface-2' : 'border-border bg-surface',
           );
 
           return (
-            <li key={stage} className="flex min-w-0">
+            /*
+             * `shrink-0` belongs on the LI, not only on the card inside it.
+             * Without it the list item shrank to its flex share — 88px against
+             * the card's 160 — and every card was overpainted by the next one,
+             * so the labels lost their last letters with no ellipsis to show
+             * for it. Three attempts to fix that by widening the card did
+             * nothing, because the card was never the thing being measured.
+             */
+            <li key={stage} className="flex shrink-0">
               {onSelect ? (
                 <button
                   type="button"
diff --git a/docs/learn-films/motion-the-repeatable-motion.json b/docs/learn-films/motion-the-repeatable-motion.json
new file mode 100644
index 0000000..fc89878
--- /dev/null
+++ b/docs/learn-films/motion-the-repeatable-motion.json
@@ -0,0 +1,63 @@
+{
+  "slug": "motion-the-repeatable-motion",
+  "title": "Motion: The Repeatable Go-To-Market",
+  "summary": "A tour of Motion — the library of what we know how to do, bound to the stages of a real deal, getting better every time we run it.",
+  "shots": [
+    {
+      "anchor": "hero",
+      "theme": "dark",
+      "line": "Hey team, check out the motion feature on our platform,",
+      "caption": "Motion Has Shipped",
+      "zoom": "in"
+    },
+    {
+      "anchor": "stats",
+      "theme": "dark",
+      "line": "PIG knew the ledger, what we bought and what we sold. This is the practice.",
+      "caption": "What PIG Missed",
+      "zoom": "out"
+    },
+    {
+      "anchor": "library-list",
+      "theme": "dark",
+      "line": "Motion is the library of what we know how to do. Twelve templates.",
+      "caption": "Current Versions Only",
+      "zoom": "in"
+    },
+    {
+      "anchor": "template-head",
+      "theme": "dark",
+      "line": "Each names its kind, its stage, its version and usage count.",
+      "caption": "One Template, Four Facts",
+      "zoom": "hold"
+    },
+    {
+      "anchor": "template-use",
+      "theme": "light",
+      "line": "Use it: it instantiates into a live engagement as a working artefact.",
+      "caption": "From Library To Deal",
+      "zoom": "in"
+    },
+    {
+      "anchor": "template-body",
+      "theme": "light",
+      "line": "A used template cannot be edited in place; live work must not shift underneath it.",
+      "caption": "Versions, Never Edits",
+      "zoom": "hold"
+    },
+    {
+      "anchor": "stage-rail",
+      "theme": "light",
+      "line": "Bound to the eight pipeline stages every real deal walks through.",
+      "caption": "Eight Stages Covered",
+      "zoom": "out"
+    },
+    {
+      "anchor": "promotions",
+      "theme": "light",
+      "line": "The artefact that closed the deal returns as version two. The next deal starts ahead. thanks for watching!",
+      "caption": "The Loop Closes",
+      "zoom": "in"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/learn-films/the-sales-motion.json b/docs/learn-films/the-sales-motion.json
new file mode 100644
index 0000000..3c4ff77
--- /dev/null
+++ b/docs/learn-films/the-sales-motion.json
@@ -0,0 +1,70 @@
+{
+  "slug": "the-sales-motion",
+  "title": "How a deal moves through Motion",
+  "summary": "The practitioner's path: open an engagement on a live deal, score it, pull the template for your stage, fill it with the customer's facts, and watch the score move both ways.",
+  "shots": [
+    {
+      "anchor": "eng-list",
+      "theme": "dark",
+      "line": "Right, you've got a live deal that needs to move.",
+      "caption": "Seven Open, One Won",
+      "zoom": "in"
+    },
+    {
+      "anchor": "eng-head",
+      "theme": "dark",
+      "line": "You open an engagement on the deal you're already working.",
+      "caption": "Bound To A Deal",
+      "zoom": "hold"
+    },
+    {
+      "anchor": "eng-qualification",
+      "theme": "dark",
+      "line": "Score it against the trainability framework: twelve weighted dimensions, the band names an action.",
+      "caption": "Decline To Build",
+      "zoom": "in"
+    },
+    {
+      "anchor": "library-list",
+      "theme": "dark",
+      "line": "Pick the template for the stage the deal is standing in.",
+      "caption": "Pick By Stage",
+      "zoom": "out"
+    },
+    {
+      "anchor": "eng-stages",
+      "theme": "light",
+      "line": "Instantiate, and the artefact lands on the engagement under its stage.",
+      "caption": "It Lands In Place",
+      "zoom": "hold"
+    },
+    {
+      "anchor": "eng-artefacts",
+      "theme": "light",
+      "line": "Fill it in with the customer's own numbers, draft to final.",
+      "caption": "Draft, Review, Final",
+      "zoom": "in"
+    },
+    {
+      "anchor": "eng-qualification",
+      "theme": "light",
+      "line": "Rescore. Halcyon went fifty-two point eight to fifty-seven point three to eighty-two point eight.",
+      "caption": "Up Thirty Points",
+      "zoom": "in"
+    },
+    {
+      "anchor": "eng-head",
+      "theme": "light",
+      "line": "Verifier measured, baseline measured, budget got a committee date.",
+      "caption": "What Actually Moved",
+      "zoom": "hold"
+    },
+    {
+      "anchor": "eng-qualification",
+      "theme": "light",
+      "line": "Two dimensions fell there too, so it isn't a ratchet. thanks for watching!",
+      "caption": "Sponsor And Definability",
+      "zoom": "out"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/db/src/seed/demo/learn.ts b/packages/db/src/seed/demo/learn.ts
index afb6f2f..4b59060 100644
--- a/packages/db/src/seed/demo/learn.ts
+++ b/packages/db/src/seed/demo/learn.ts
@@ -239,6 +239,33 @@ export const HOSTED_LEARN_MANIFEST: readonly HostedLearnEntry[] = [
     durationSeconds: 28,
     sortOrder: 5,
   },
+  /*
+   * Six and seven are the first vertical (9:16) films in the set. The five
+   * above are landscape captures of the desktop app; these are cut for a phone,
+   * because the way this material actually gets watched is somebody opening the
+   * link on the way to a meeting. `scripts/learn-film.mjs` renders them and is
+   * the pipeline the first five never had.
+   */
+  {
+    slug: 'motion-the-repeatable-motion',
+    title: 'Motion: the repeatable go-to-market',
+    summary:
+      'A tour of Motion — the library of what we know how to do, bound to the stages of a real deal, getting better every time we run it.',
+    track: 'platform',
+    visibility: 'code',
+    durationSeconds: 32,
+    sortOrder: 6,
+  },
+  {
+    slug: 'the-sales-motion',
+    title: 'How a deal moves through Motion',
+    summary:
+      "The practitioner's path: open an engagement on a live deal, score it, pull the template for your stage, fill it with the customer's facts, and watch the score move both ways.",
+    track: 'platform',
+    visibility: 'code',
+    durationSeconds: 34,
+    sortOrder: 7,
+  },
 ];
 
 /**
diff --git a/scripts/learn-film.mjs b/scripts/learn-film.mjs
new file mode 100644
index 0000000..0ef3cad
--- /dev/null
+++ b/scripts/learn-film.mjs
@@ -0,0 +1,356 @@
+/*
+ * Build a vertical /learn video from a script file.
+ *
+ *   node scripts/learn-film.mjs docs/learn-films/<slug>.json
+ *
+ * The five existing platform videos were cut by an ad-hoc pipeline that was
+ * never committed, so the first time the UI changed nobody could re-shoot them.
+ * This is that pipeline, written down. `scripts/screenshots.mjs` exists for the
+ * same reason and this file deliberately reuses its two hard-won lessons: the
+ * appearance preference is stored SERVER-side and adopted after hydration, so
+ * seeding localStorage is not enough and the profile response has to be
+ * rewritten; and per-device layout state (`pig.sidebarOpen`, `pig.piggyDockOpen`)
+ * has to be forced or the framing is whatever a human last left behind.
+ *
+ * ORDER IS LOAD-BEARING. The narration is rendered FIRST and its measured
+ * duration drives every shot length. A shot list timed by guess leaves the
+ * narrator talking over a frozen frame, or gets cut mid-sentence — which is how
+ * the previous set was found to be wrong.
+ *
+ * Typography is composed in the browser, not in ffmpeg: the product's typeface
+ * is Manrope Variable and ffmpeg's drawtext would have to fall back to DejaVu,
+ * which is visibly not the same product. So Playwright renders a transparent
+ * chrome layer per shot and ffmpeg only moves pixels.
+ *
+ * Requires: a running API + web (see PIG_WEB_URL), Chatterbox reachable, ffmpeg.
+ */
+import { chromium } from 'playwright';
+import { execFile } from 'node:child_process';
+import { mkdir, readFile, rm, writeFile } from 'node:fs/promises';
+import { createHash } from 'node:crypto';
+import { promisify } from 'node:util';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const run = promisify(execFile);
+const HERE = dirname(fileURLToPath(import.meta.url));
+const REPO = resolve(HERE, '..');
+
+const WEB = process.env.PIG_WEB_URL ?? 'http://localhost:5179';
+const TTS = process.env.PIG_TTS_URL ?? 'http://100.127.247.67:8095';
+const VOICE = process.env.PIG_TTS_VOICE ?? 'karti';
+/* 1.20x is the rate the /learn scripts are written to; see docs/learn-scripts.md. */
+const TEMPO = Number(process.env.PIG_TTS_TEMPO ?? 1.2);
+const MUSIC = process.env.PIG_FILM_MUSIC ?? join(REPO, 'apps/web/public/audio/pig-ambient.mp3');
+
+const FRAME_W = 1080;
+const FRAME_H = 1920;
+/* The app is captured at 1120 wide and lands at 1080, so it is very nearly 1:1
+ * and the product's own type sizes stay legible on a phone. Any narrower and the
+ * sidebar drops to the mobile tab bar (NAV_BREAKPOINT is 1024). */
+const SHOT_W = 1120;
+const SHOT_H = 1560;
+const APP_W = FRAME_W;
+const APP_H = Math.round((SHOT_H * FRAME_W) / SHOT_W);
+const APP_Y = 250;
+const FPS = 30;
+
+/** Every anchor a script may name, and how to frame it. */
+/*
+ * `focus` is `full` (the whole viewport) or `column` (the content column only).
+ *
+ * A vertical video is watched on a phone, and the whole 1120px viewport scaled
+ * into 1080 leaves the product's own 12px labels at about 11px on the finished
+ * frame — technically visible, actually unreadable. So a detail shot drops the
+ * sidebar and keeps the content column, which is about 1.4x closer.
+ *
+ * The crop is driven by the column's WIDTH rather than by the height of the
+ * thing being talked about, which was the first attempt: a crop sized to the
+ * target element is narrower than the column, so it sliced the cards either
+ * side of centre and the frame read as broken rather than as close. Width
+ * first, height derived from the aspect, vertical position centred on the
+ * target — that way nothing is ever cut off horizontally.
+ */
+const ANCHORS = {
+  hero: { route: '/motion', scroll: 'top', focus: 'full' },
+  stats: { route: '/motion', scroll: 'top', focus: 'column' },
+  'stage-rail': { route: '/motion', text: 'The motion, stage by stage', focus: 'column' },
+  kinds: { route: '/motion', text: 'Library cover, by kind', focus: 'column' },
+  promotions: { route: '/motion', text: 'What got easier', focus: 'column' },
+  'open-engagements': { route: '/motion', text: 'Open engagements', focus: 'column' },
+  'library-list': { route: '/motion/library', scroll: 'top', focus: 'full' },
+  'template-head': { route: '/motion/library/PLAYBOOK', scroll: 'top', focus: 'column' },
+  'template-use': { route: '/motion/library/PLAYBOOK', text: 'Use this template', focus: 'column' },
+  'template-body': { route: '/motion/library/PLAYBOOK', text: 'The document', focus: 'column' },
+  'eng-list': { route: '/motion/engagements', scroll: 'top', focus: 'full' },
+  'eng-head': { route: '/motion/engagements/POC', scroll: 'top', focus: 'column' },
+  'eng-stages': { route: '/motion/engagements/POC', text: 'Where the work sits', focus: 'column' },
+  'eng-qualification': { route: '/motion/engagements/POC', text: 'Qualification', focus: 'column' },
+  'eng-artefacts': { route: '/motion/engagements/POC', text: 'Artefacts', focus: 'column' },
+};
+
+async function ffprobeDuration(path) {
+  const { stdout } = await run('ffprobe', [
+    '-v', 'error', '-show_entries', 'format=duration', '-of', 'csv=p=0', path,
+  ]);
+  return Number(stdout.trim());
+}
+
+async function narrate(text, out) {
+  const response = await fetch(`${TTS}/generate`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ text, voice: VOICE }),
+  });
+  if (!response.ok) throw new Error(`Chatterbox ${response.status}: ${await response.text()}`);
+  const wav = Buffer.from(await response.arrayBuffer());
+  /* The service answers with raw WAV bytes, not JSON. A JSON.parse here is the
+   * kind of mistake that reads as a TTS outage. */
+  if (wav.subarray(0, 4).toString() !== 'RIFF') {
+    throw new Error(`Chatterbox did not return WAV: ${wav.subarray(0, 120).toString()}`);
+  }
+  await writeFile(out, wav);
+  return ffprobeDuration(out);
+}
+
+/** Shot lengths are proportional to the words spoken over them. */
+function shotDurations(shots, total) {
+  const words = shots.map((shot) => shot.line.trim().split(/\s+/).length);
+  const sum = words.reduce((a, b) => a + b, 0);
+  const raw = words.map((n) => (n / sum) * total);
+  /* Rounded to whole frames, with the remainder pushed onto the last shot so
+   * the video and the narration end on the same frame rather than drifting. */
+  const frames = raw.map((seconds) => Math.max(FPS, Math.round(seconds * FPS)));
+  const target = Math.round(total * FPS);
+  frames[frames.length - 1] += target - frames.reduce((a, b) => a + b, 0);
+  return frames;
+}
+
+const CHROME_HTML = (opts) => `<!doctype html><html><head><meta charset="utf-8"><style>
+@font-face{font-family:'Manrope';src:url('file://${opts.font}') format('woff2');font-weight:200 800;font-display:block}
+*{margin:0;padding:0;box-sizing:border-box}
+html,body{width:${FRAME_W}px;height:${FRAME_H}px;background:transparent}
+body{font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
+.band{position:absolute;left:0;right:0;background:${opts.bg}}
+.top{top:0;height:${APP_Y}px;display:flex;flex-direction:column;justify-content:center;padding:0 64px;gap:14px}
+.bottom{top:${APP_Y + APP_H}px;height:${FRAME_H - APP_Y - APP_H}px;display:flex;align-items:center;justify-content:space-between;padding:0 64px}
+.eyebrow{font-size:26px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:${opts.accent}}
+.caption{font-size:58px;font-weight:700;letter-spacing:-.02em;line-height:1.08;color:${opts.fg}}
+.mark{display:flex;align-items:center;gap:14px;font-size:28px;font-weight:700;color:${opts.fg};opacity:.85}
+.dot{width:12px;height:12px;border-radius:50%;background:${opts.accent}}
+.track{position:absolute;left:64px;right:64px;top:${FRAME_H - 26}px;height:6px;border-radius:3px;background:${opts.rule}}
+.fill{height:6px;border-radius:3px;background:${opts.accent};width:${Math.round(opts.progress * 100)}%}
+.hair{position:absolute;left:0;right:0;height:1px;background:${opts.rule}}
+</style></head><body>
+<div class="band top"><div class="eyebrow">${opts.eyebrow}</div><div class="caption">${opts.caption}</div></div>
+<div class="hair" style="top:${APP_Y - 1}px"></div>
+<div class="hair" style="top:${APP_Y + APP_H}px"></div>
+<div class="band bottom"><div class="mark"><span class="dot"></span>PIG · Motion</div><div class="mark" style="opacity:.5">primeintellectgrowth.com</div></div>
+<div class="track"><div class="fill"></div></div>
+</body></html>`;
+
+const THEME = {
+  dark: { bg: '#0a0a0b', fg: '#fafafa', rule: '#26262b', accent: '#22c55e' },
+  light: { bg: '#ffffff', fg: '#0a0a0b', rule: '#e6e6ea', accent: '#16a34a' },
+};
+
+async function main() {
+  const scriptPath = process.argv[2];
+  if (!scriptPath) throw new Error('usage: learn-film.mjs <script.json>');
+  const film = JSON.parse(await readFile(scriptPath, 'utf8'));
+  const work = join(REPO, '.film', film.slug);
+  await rm(work, { recursive: true, force: true });
+  await mkdir(work, { recursive: true });
+
+  const font = join(
+    REPO,
+    'node_modules/.pnpm/@fontsource-variable+manrope@5.3.0/node_modules/@fontsource-variable/manrope/files/manrope-latin-wght-normal.woff2',
+  );
+
+  // 1 ------------------------------------------------------- the narration
+  const narration = film.shots.map((shot) => shot.line.trim()).join(' ');
+  const words = narration.split(/\s+/).length;
+  const rawVoice = join(work, 'voice-raw.wav');
+  const spoken = await narrate(narration, rawVoice);
+  const voice = join(work, 'voice.wav');
+  await run('ffmpeg', ['-v', 'error', '-y', '-i', rawVoice, '-filter:a', `atempo=${TEMPO}`, voice]);
+  const duration = await ffprobeDuration(voice);
+  console.log(`  narration ${words} words -> ${spoken.toFixed(2)}s at 1.0x -> ${duration.toFixed(2)}s at ${TEMPO}x`);
+
+  const frames = shotDurations(film.shots, duration);
+
+  // 2 ---------------------------------------------------------- the capture
+  const engagements = await fetch(`${WEB}/api/motion/engagements`).then((r) => r.json());
+  const templates = await fetch(`${WEB}/api/motion/templates`).then((r) => r.json());
+  const poc = engagements.engagements.find((e) => e.stage === 'poc') ?? engagements.engagements[0];
+  const playbook = templates.templates.find((t) => t.kind === 'playbook') ?? templates.templates[0];
+
+  const browser = await chromium.launch({ channel: 'chrome' });
+  const contexts = {};
+  for (const theme of ['dark', 'light']) {
+    const context = await browser.newContext({
+      viewport: { width: SHOT_W, height: SHOT_H },
+      /* 3x, because a detail shot crops to about half the viewport and is then
+       * scaled back up to 1080 wide; at 2x that is an upscale and it shows. */
+      deviceScaleFactor: 3,
+      colorScheme: theme,
+    });
+    await context.addInitScript(`
+      localStorage.setItem('pig.themeMode', '${theme}');
+      localStorage.setItem('pig.sidebarOpen', 'true');
+      localStorage.setItem('pig.piggyDockOpen', 'false');
+      localStorage.setItem('pig.audio.enabled', 'false');
+    `);
+    await context.route('**/api/me/profile', async (route) => {
+      const response = await route.fetch();
+      const body = await response.json().catch(() => ({}));
+      await route.fulfill({ json: { ...body, themeMode: theme } });
+    });
+    contexts[theme] = context;
+  }
+  const chromePage = await browser.newPage({ viewport: { width: FRAME_W, height: FRAME_H } });
+
+  const segments = [];
+  for (const [index, shot] of film.shots.entries()) {
+    const anchor = ANCHORS[shot.anchor];
+    if (!anchor) throw new Error(`unknown anchor "${shot.anchor}" in ${film.slug}`);
+    const route = anchor.route.replace('PLAYBOOK', playbook.id).replace('POC', poc.id);
+
+    const page = await contexts[shot.theme].newPage();
+    await page.goto(`${WEB}${route}`, { waitUntil: 'networkidle' });
+    /* Lazy route chunks sit behind a Suspense boundary; a screenshot taken
+     * before the fallback resolves photographs the spinner. */
+    await page.waitForTimeout(1400);
+    const rendered = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
+    if (rendered !== shot.theme) throw new Error(`shot ${index} rendered ${rendered}, wanted ${shot.theme}`);
+    if (anchor.text) {
+      await page.evaluate((text) => {
+        const node = [...document.querySelectorAll('h1,h2,h3')].find(
+          (el) => el.textContent?.trim() === text,
+        );
+        if (!node) throw new Error(`no heading "${text}"`);
+        const card = node.closest('section,[class*="card"],div');
+        (card ?? node).scrollIntoView({ block: 'center' });
+        window.scrollBy(0, -60);
+      }, anchor.text);
+    } else {
+      await page.evaluate(() => window.scrollTo(0, 0));
+    }
+    await page.waitForTimeout(500);
+
+    const appPng = join(work, `app-${index}.png`);
+    const clip = anchor.focus === 'full' ? null : await page.evaluate(
+      ({ text, shotW, shotH }) => {
+        const column = document.querySelector('main');
+        if (!column) return null;
+        const rect = column.getBoundingClientRect();
+        const width = Math.min(shotW, Math.max(560, rect.width));
+        const height = Math.min(shotH, width * (shotH / shotW));
+        const heading = text
+          ? [...document.querySelectorAll('h1,h2,h3')].find((el) => el.textContent?.trim() === text)
+          : null;
+        const box = (heading?.closest('section,[class*="card"]') ?? heading)?.getBoundingClientRect();
+        const centreY = box ? box.top + box.height / 2 : height / 2;
+        return {
+          x: Math.round(Math.max(0, Math.min(shotW - width, rect.left))),
+          y: Math.round(Math.max(0, Math.min(shotH - height, centreY - height / 2))),
+          width: Math.round(width),
+          height: Math.round(height),
+        };
+      },
+      { text: anchor.text ?? null, shotW: SHOT_W, shotH: SHOT_H },
+    );
+    await page.screenshot(clip ? { path: appPng, clip } : { path: appPng });
+    await page.close();
+
+    const palette = THEME[shot.theme];
+    await chromePage.setContent(
+      CHROME_HTML({
+        ...palette,
+        font,
+        eyebrow: index === 0 ? 'Prime Intellect Growth' : 'Motion',
+        caption: shot.caption,
+        progress: (index + 1) / film.shots.length,
+      }),
+      { waitUntil: 'load' },
+    );
+    await chromePage.waitForTimeout(250);
+    const chromePng = join(work, `chrome-${index}.png`);
+    await chromePage.screenshot({ path: chromePng, omitBackground: true });
+
+    // 3 ------------------------------------------------ one shot -> one clip
+    const n = frames[index];
+    const zoom =
+      shot.zoom === 'out'
+        ? `'if(eq(on,0),1.14,max(1.0,zoom-${(0.14 / n).toFixed(6)}))'`
+        : shot.zoom === 'hold'
+          ? `'1.03'`
+          : `'if(eq(on,0),1.0,min(1.12,zoom+${(0.12 / n).toFixed(6)}))'`;
+    const segment = join(work, `seg-${index}.mp4`);
+    await run('ffmpeg', [
+      '-v', 'error', '-y',
+      '-loop', '1', '-framerate', String(FPS), '-t', String(n / FPS), '-i', appPng,
+      '-i', chromePng,
+      '-filter_complex',
+      `[0:v]zoompan=z=${zoom}:x='iw/2-(iw/zoom/2)':y='ih/2-(ih/zoom/2)':d=${n}:s=${APP_W}x${APP_H}:fps=${FPS},` +
+        `pad=${FRAME_W}:${FRAME_H}:0:${APP_Y}:color=${palette.bg}[base];` +
+        `[base][1:v]overlay=0:0:format=auto,format=yuv420p[v]`,
+      '-map', '[v]', '-frames:v', String(n),
+      /* CRF 22, not 18. The frame is a mostly-static UI with a slow zoom, so 18
+       * spent 3.7 Mbps on 32 seconds — a 15 MB download for a video whose whole
+       * point is that somebody opens it on a phone between meetings. 22 holds
+       * the product's 12px labels and lands under 6 MB. */
+      '-c:v', 'libx264', '-preset', 'slow', '-crf', '22', segment,
+    ]);
+    segments.push(segment);
+    console.log(`  shot ${index + 1}/${film.shots.length} ${shot.anchor} ${shot.theme} ${(n / FPS).toFixed(2)}s`);
+  }
+  await browser.close();
+
+  // 4 ------------------------------------------------- cut, score, normalise
+  const list = join(work, 'segments.txt');
+  await writeFile(list, segments.map((s) => `file '${s}'`).join('\n'));
+  const silent = join(work, 'silent.mp4');
+  await run('ffmpeg', ['-v', 'error', '-y', '-f', 'concat', '-safe', '0', '-i', list, '-c', 'copy', silent]);
+
+  const out = join(work, 'film.mp4');
+  await run('ffmpeg', [
+    '-v', 'error', '-y',
+    '-i', silent,
+    '-i', voice,
+    '-stream_loop', '-1', '-i', MUSIC,
+    '-filter_complex',
+    /* The bed sits far under the voice and fades at both ends. Loudness is
+     * normalised so clips do not jump against each other on the Learn page. */
+    `[2:a]volume=0.085,afade=t=in:st=0:d=1.2,afade=t=out:st=${(duration - 1.6).toFixed(2)}:d=1.6[bed];` +
+      `[1:a]adelay=250|250,apad[vox];` +
+      `[vox][bed]amix=inputs=2:duration=first:dropout_transition=0,` +
+      `atrim=0:${duration.toFixed(3)},loudnorm=I=-16:TP=-1.5:LRA=11[a]`,
+    '-map', '0:v', '-map', '[a]',
+    '-c:v', 'copy', '-c:a', 'aac', '-b:a', '192k',
+    '-movflags', '+faststart', '-shortest', out,
+  ]);
+
+  const finalDuration = await ffprobeDuration(out);
+  const hash = createHash('sha256').update(await readFile(out)).digest('hex').slice(0, 8);
+  const named = join(work, `${film.slug}.${hash}.mp4`);
+  await run('cp', [out, named]);
+  const poster = join(work, `${film.slug}.${hash}.jpg`);
+  await run('ffmpeg', [
+    '-v', 'error', '-y', '-ss', '1.2', '-i', named, '-frames:v', '1', '-q:v', '3', poster,
+  ]);
+
+  console.log(`\n  ${film.slug}: ${finalDuration.toFixed(2)}s, ${words} words`);
+  console.log(`  ${named}`);
+  console.log(`  ${poster}`);
+  await writeFile(
+    join(work, 'result.json'),
+    JSON.stringify(
+      { slug: film.slug, title: film.title, summary: film.summary, hash, durationSeconds: Math.round(finalDuration), words, file: named, poster },
+      null,
+      2,
+    ),
+  );
+}
+
+await main();