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.

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"