Cut two vertical Motion films, and write down the pipeline that makes them

THE PIPELINE. The five existing platform videos were cut by an ad-hoc process
that was never committed, so the first time the UI moved nobody could re-shoot
them — which is the same failure `scripts/screenshots.mjs` was written to stop.
`scripts/learn-film.mjs` is that pipeline, and it reuses both of the screenshot
script's hard-won lessons: the appearance preference is stored server-side and
adopted after hydration, so the theme has to be forced by rewriting the profile
response rather than by seeding localStorage; and per-device layout state has to
be pinned 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, because a shot list timed by guess leaves the narrator
talking over a frozen frame. Shot durations are then proportional to the words
spoken over them, so the cut lands on the sentence.

Typography is composed in the browser rather than in ffmpeg. The product's face
is Manrope Variable and drawtext would have fallen back to DejaVu, which reads
as a different company. Playwright renders a transparent chrome layer per shot
and ffmpeg only moves pixels.

Detail shots crop to the content column rather than the whole viewport. The
first attempt cropped a box around the element being talked about, which 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 from the aspect.

CRF is 22, not 18. The frame is a static UI with a slow zoom, and 18 spent
3.7 Mbps — a 15 MB download for a video whose whole point is that somebody opens
it on a phone between meetings.

THE STAGE RAIL BUG, which the films found. Every stage label was losing its last
letters — "QUALIFICATIO", "PROCUREMEN" — 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: the LI holding it had `min-w-0` and no
`shrink-0`, so it took its flex share of 88px while the card inside stayed 160,
and every card was overpainted by the next one. The DOM reported no overflow the
whole time, because there wasn't any — the clipping was one level up. `shrink-0`
moves to the LI, where it belongs, and the rail scrolls as it was always meant
to. The labels also wrap rather than truncate now: they are a fixed vocabulary
of eight words we control, and losing a letter is worse than taking a line.

THE FILMS. Two 9:16 clips for the team, narrated in Karti's cloned voice through
Chatterbox at 1.20x and scored with the platform's own ambient bed, ducked and
loudness-normalised so they do not jump against the five already on the page.
Both open dark and switch to light at the midpoint. Shot lists live beside the
narration in `docs/learn-films/`, because a script and its shot list timed
against each other are one object and splitting them is how they drift.

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"
+    }
+  ]
+}

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"
+    }
+  ]
+}