/* ============================================================================
   vb.css — the shared VideoBro marketing design system.
   ----------------------------------------------------------------------------
   Used by every page in server/marketing/ (the SEO content cluster). The
   tokens, the VHS stripe rule, the grain/scanline overlays, the cream band and
   the REC button are lifted VERBATIM from landing.html so the cluster reads as
   the same site rather than a lookalike.

   landing.html deliberately still carries its own inline copy of these rules:
   it is the one page where first paint is worth the duplication, and rewriting
   the live homepage was out of scope for the content build. If you change a
   BRAND TOKEN here (--black, --gold, the --s1..--s5 stripes, --cream), change
   it in landing.html's <style> block too, or the homepage will drift away from
   every other page on the site.
   ========================================================================= */

@font-face{font-family:'DOUG';src:url('/DOUGTEXT01.otf') format('opentype');font-display:swap}

:root{
  /* This is a single-theme design on purpose — the app is a dark room with a
     tape deck in it, and it looks wrong in light. color-scheme pins form
     controls to match so the browser can't hand us a white input. */
  color-scheme:dark;
  --black:#0a0908;
  --panel:#141210;
  --panel-2:#1c1917;
  --ink:#f4f0e8;
  --ink-soft:#c6bdae;
  --muted:#9a9082;
  --line:#2c2723;
  --line-2:#3b342d;
  --cream:#f3ece0;
  --cream-ink:#1a1613;
  --cream-soft:#4f463c;
  --cream-line:#ded3c1;
  --s1:#efc953; --s2:#d59448; --s3:#c34664; --s4:#9d54e1; --s5:#2050f2;
  --rec:#d8231d;
  --green:#5a9e3f;
  --gold:#f5c742;
  --s4-deep:#6b2fb0; /* the purple stripe, darkened so light text on it clears AA */
  --display:'DOUG','Avenir Next',-apple-system,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
/* scroll-padding is the sticky nav's other half: without it every in-page jump
   on the site (#step-1, #tape, the "Keep exploring" links, the FAQ anchors)
   lands its target underneath the pinned bar. One declaration on the scroll
   container covers every anchor on every page, and it is generous enough to
   cover the tallest the bar gets. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--black);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;overflow-x:hidden}
::selection{background:var(--gold);color:#000}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--ink);color:#000;padding:.6rem 1rem;border-radius:0 0 8px 0;font-size:.85rem}
.skip:focus{left:0;top:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}

/* ——— VHS stripe rule (the app's signature) ——— */
.stripes{display:flex;height:8px;width:100%}
.stripes i{flex:1}
.stripes i:nth-child(1){background:var(--s1)}
.stripes i:nth-child(2){background:var(--s2)}
.stripes i:nth-child(3){background:var(--s3)}
.stripes i:nth-child(4){background:var(--s4)}
.stripes i:nth-child(5){background:var(--s5)}
.topbar{height:6px}

/* ——— grain + scanlines ——— */
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scan{position:fixed;inset:0;pointer-events:none;z-index:51;opacity:.35;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 3px)}
/* Site-wide CRT ground (founder notes 2026-09-14: "a very subtle grey static
   in the background… a little pop/depth", "like the tv static you see when a
   new active tape is selected in the app", then "in the background and much
   more subtle and can we have scan lines"). vb.js (job 7) plants one fixed
   .vb-crt layer BEHIND the page (z-index -1 in the root stacking context, so
   it paints above the body's black and under everything with content) holding
   three things: a <canvas> of TV static drawn the way the app's tape-swap
   snow is (chunky bimodal grey grains, wider than tall, a new frame 24 times a
   second), a sheet of faint scan lines, and a vignette that lets both fade
   toward the corners. Text and pictures are never touched; sections with
   their own background (the cream band, the footer, cards) cover it, which is
   the point of "background". An earlier feTurbulence tile at this depth read
   as nothing because fractal noise is low-contrast mid-grey; bimodal grains
   show at a fraction of the opacity. Three knobs, all here: --static-opacity,
   --scan-opacity and --crt-parallax. Under reduced motion vb.js draws a
   single still frame.
   Parallax (founder, 2026-09-14: "can it parallax and scroll when I scroll
   on the page but scroll slower"): the ground follows the page at a fraction
   of its speed, --crt-parallax (.3 = it travels 30% as far as the copy does;
   0 = a fixed screen again; vb.js re-reads it once a second, so a devtools
   edit shows on the next scroll). What travels is the LIGHTING of the screen, .vb-glow,
   never the snow: snow is a new random picture 24 times a second, so it has
   no feature the eye could watch slide, and translating the canvas would
   cost a taller canvas for nothing anyone can see. The glow is therefore a
   repeating tile (geometry below), on a layer two tiles tall, moved by
   (scrollY x rate) modulo one tile, so it never runs out of ground on a long
   page and the wrap is invisible because every gradient fades out INSIDE
   the tile. Scan lines and the vignette stay put: they are the glass and
   the bezel, and a 1px-on-3px line pattern shifted a fraction of the scroll
   would strobe. Off under reduced motion, which is the setting that asks
   for exactly this kind of scroll-tied shift not to happen.
   --static-opacity was halved from .035 to .0175 on 2026-09-18 (founder:
   "lower the static in the background more, maybe we cut it in half"). */
:root{--static-opacity:.0175;--scan-opacity:.02;--crt-parallax:.3}
.vb-crt{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
/* Depth (round 5, "a little more subtle and with a little more depth"): under
   the static, a warm phosphor glow up where the headline sits, so the black
   reads as a lit screen rather than a flat fill, plus a second, dimmer pool
   lower down (under the vignette's corner at rest; it surfaces as the ground
   slides) so the parallax stays readable the whole way down a page; over it,
   a faint tracking band that rolls up the screen once every 14 s (motion
   only, off under reduced motion).
   GEOMETRY. The glow repeats as a tile 1.25 screens tall (the layer is two
   tiles, 250%, and background-size 50% is one tile); at rest the screen
   shows the tile's LOWER four fifths, so a point V% down the screen sits at
   (20 + 0.8 x V)% of the tile and a height of H% of the screen is 0.8 x H%
   of the tile. The warm pool is the round-5 pool restated that way (28% 24%
   / 62% 55% of the screen = 28% 39.2% / 62% 44% of the tile), so the hero
   looks exactly as it did. The spare fifth above exists because that pool
   reaches 14% of the screen ABOVE the top edge: on a tile exactly one screen
   tall it was clipped flat there, and once the ground moved that cut slid
   down the page as a hard line. So every gradient here must fade out inside
   the tile (a pool's visible reach is 70% of its radius): both pools do, and
   the top wash fades in from the tile's top and is gone by half way. The old
   fall-off to black at the bottom is gone too: it sat on the body's own
   black, so it never showed, and a tile must end the way it begins. vb.js
   reads the tile height off this element and moves the layer by (a fifth of
   a tile + scrollY x rate) modulo one tile. */
.vb-crt .vb-glow{position:absolute;left:0;right:0;top:0;height:250%;will-change:transform;
  background:radial-gradient(ellipse 62% 44% at 28% 39.2%,rgba(255,236,196,.07),transparent 70%),
             radial-gradient(ellipse 56% 26% at 72% 80%,rgba(255,236,196,.04),transparent 70%),
             linear-gradient(180deg,transparent 0%,rgba(255,255,255,.025) 20%,transparent 50%);
  background-size:100% 50%;background-repeat:repeat-y}
.vb-crt canvas{position:absolute;inset:0;width:100%;height:100%;opacity:var(--static-opacity);
  image-rendering:crisp-edges;image-rendering:pixelated}
.vb-crt .vb-scan{position:absolute;inset:0;opacity:var(--scan-opacity);
  background:repeating-linear-gradient(to bottom,#fff 0 1px,transparent 1px 3px)}
.vb-crt .vb-roll{position:absolute;left:0;right:0;top:100%;height:24vh;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.035) 42%,rgba(255,255,255,.035) 58%,transparent)}
.vb-crt .vb-vig{position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 72% at 50% 42%,transparent 45%,rgba(10,9,8,.85) 100%)}
@media (prefers-reduced-motion:no-preference){
  .vb-crt .vb-roll{animation:vb-roll 14s linear infinite}
  @keyframes vb-roll{from{transform:translateY(0)}to{transform:translateY(-124vh)}}
}
@media print{.vb-crt{display:none}}
/* The doodle pass (founder, 2026-09-14: "tiny fun illustrations… being drawn
   in the background… like cool gen z tattoos"). vb.js (job 9) loads
   /vb-doodles.js, which plants the .vb-doodle layer right after the CRT layer
   at the same depth, so the ink sits over the snow and under every piece of
   content. Fine-line pictures (pictures only: the word blurbs went on
   2026-09-18) are drawn stroke by stroke, held, then fade out (never
   scribbled or struck: founder, round 3); one to three at a time, each
   pinned to its spot on the PAGE so it scrolls with the copy (the static
   under it stays a screen effect).
   The layer is ABSOLUTE, not fixed, and has no size of its own: it sits at
   the document's origin and each doodle is its own small canvas inside it
   at its page coordinates (founder, 2026-09-18: they "appear to not scroll
   perfectly along with the other content"). A fixed canvas repainted at
   minus-scrollY always trailed the compositor's scroll by a frame or two; a
   box that is part of the page scrolls in the same frame as the text
   beside it. overflow stays visible because the layer is 0px tall, and the
   script keeps every canvas inside the page's width, so it cannot widen
   the page. The four
   knobs live HERE and nowhere else; the script re-reads them once a second,
   so a devtools edit shows up live:
     --doodle-opacity          ink alpha when the doodles have the gutters
                               beside the 1120px column to themselves
     --doodle-opacity-narrow   ink alpha when they must share the column with
                               text (phones and small tablets), so a line
                               behind a paragraph stays a whisper
     --doodle-density          how many are alive at once (1 = one to three,
                               by how much gutter the screen has; 0 = none)
     --doodle-speed            pen speed and hold time (2 = twice as busy)
   Never runs under prefers-reduced-motion (vb.js does not load it). */
:root{--doodle-opacity:.32;--doodle-opacity-narrow:.1;--doodle-density:1;--doodle-speed:1}
.vb-doodle{position:absolute;left:0;top:0;width:100%;height:0;z-index:-1;pointer-events:none}
.vb-doodle canvas{position:absolute;display:block}
@media print{.vb-doodle{display:none}}

@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;animation:rise .75s cubic-bezier(.16,1,.3,1) both}
  .d1{animation-delay:.04s}.d2{animation-delay:.1s}.d3{animation-delay:.16s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1}}
}

/* ——— nav ——— */
/* One nav for the whole site, injected server-side from
   marketing/partials/nav.html (__NAV__). Desktop: inline links plus a
   click-to-open Features dropdown (a <details>, so it needs no JS and is
   keyboard-accessible by default). Narrow: a Menu button toggles the same
   list, at whatever width this language's labels stop fitting on one line —
   see "the collapsed nav" below. Without JS the list is simply visible,
   which is the honest fallback. */
/* Pinned to the top of the viewport (founder call 2026-09-14), so the links
   and the store button are reachable from anywhere on a long page instead of
   only from the top of it. Two things make that safe rather than a regression:
   the bar is OPAQUE (content scrolls under it, and the page background is the
   only thing that used to show through), and it is SHORTER than it was —
   52px mark + .9rem padding was ~81px of a phone's screen parked there for
   the whole scroll; 44px + .7rem is ~66px. `sticky` keeps it in flow, so
   nothing needs a compensating top offset and the phone menu's
   `position:absolute; top:100%` still anchors to it. */
nav.site-nav{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;background:var(--black)}
/* The gap doubles as the collapse cushion. `space-between` spreads the bar
   whenever there is slack, so this number is only ever felt at the exact
   width where the row stops fitting — which is precisely where the last link
   would otherwise sit flush against the wordmark. Keeping the cushion IN the
   layout rather than in vb.js is what lets the fit test stay one honest
   question ("does .nav-in overflow?") instead of a width sum with a fudge. */
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;padding:.7rem 0}
/* Nothing in the bar may be COMPRESSED to fit. A flex item shrinks by
   default, which turns "doesn't fit" into "fits, badly": the French bar was
   squeezing the 570x90 mark down to 220px, off its own aspect ratio, to make
   room for a links row that then wrapped anyway. Refusing to shrink is also
   what makes the fit MEASURABLE — with it, vb.js only has to ask whether
   .nav-in overflows; without it, the overflow hides itself in the logo. */
.nav-in>*{flex:none}
.wordmark{display:inline-block;line-height:0}
/* Doubled from 26px in the 2026-08 homepage redesign and carried across the
   site. The mark is 570x90 (6.3:1), so height drives a lot of width; it steps
   down before it can crowd the links. Trimmed a step in 2026-09 when the bar
   became sticky: whatever height this is, it is now height the reader pays
   for on every screen of every page. */
.wordmark img{height:44px;width:auto}
@media (max-width:1040px){.wordmark img{height:40px}}
@media (max-width:880px){.wordmark img{height:34px}}
@media (max-width:560px){.wordmark img{height:28px}}
.nav-links{display:flex;gap:1.3rem;align-items:center}
.nav-links a,.nav-dd>summary{font-size:.94rem;color:var(--ink-soft);text-decoration:none;cursor:pointer}
.nav-links>a:not(.pill){padding:.6rem .35rem;margin:-.6rem -.35rem}
.nav-links a:hover,.nav-dd>summary:hover{color:var(--ink)}
/* A top-level nav label is one line or it is the menu — never a label broken
   across two. Without this, "How it works" became "How it" / "works" and the
   66px bar silently grew to 73px (98px in French, where the label is three
   words); with it, a row that no longer fits OVERFLOWS instead, which is a
   thing JS can measure and act on. The sub-labels inside the Features panel
   are deliberately NOT included — that panel is 260px wide and its second
   lines are the design. */
.nav-links>a,.nav-links>.nav-dd>summary{white-space:nowrap}
/* The nav's store link is the SAME button as the homepage hero's "Download to
   iPhone" (founder, 2026-09-14), scaled to fit a 66px bar: the REC red, the
   white keyline, the display face, the hard drop shadow that collapses under
   a press. It is the only .pill on the site, so this is the nav button rather
   than a shape other things borrow — keep it that way, or the next component
   that wants a pill inherits an App Store CTA's colour. Every value below is
   .btn-rec's, changed only where nav scale demands it (font, padding, and
   flex so the Apple mark sits on the text baseline). */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  cursor:pointer;text-align:center;white-space:nowrap;
  border:2px solid rgba(255,255,255,.9);background:var(--rec);color:#fff !important;
  font-family:var(--display);font-size:.95rem;letter-spacing:.06em;
  padding:.4rem 1rem;border-radius:6px;box-shadow:0 3px 0 rgba(0,0,0,.5);
  transition:transform .12s ease,filter .18s ease}
.pill:hover{filter:brightness(1.12)}
.pill:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.5)}
.nav-dd{position:relative}
.nav-dd>summary{list-style:none;padding:.6rem .35rem;margin:-.6rem -.35rem;display:flex;align-items:center;gap:.35rem}
.nav-dd>summary::-webkit-details-marker{display:none}
.nav-dd>summary::after{content:"";width:.42em;height:.42em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.15em) rotate(45deg);transition:transform .15s ease}
.nav-dd[open]>summary::after{transform:translateY(.1em) rotate(-135deg)}
.dd{position:absolute;top:calc(100% + .9rem);left:50%;transform:translateX(-50%);min-width:260px;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;padding:.5rem;box-shadow:0 24px 50px -20px rgba(0,0,0,.9)}
.dd a{display:block;padding:.6rem .8rem;border-radius:9px;font-size:.94rem;color:var(--ink)}
.dd a:hover{background:var(--panel-2)}
.dd a small{display:block;font-size:.8rem;color:var(--muted);margin-top:.1rem}
.nav-toggle{display:none;background:none;border:1px solid var(--line-2);color:var(--ink);border-radius:9px;padding:.5rem .75rem;font:inherit;font-size:.9rem;cursor:pointer}

/* ——— the collapsed nav (the Menu button) ——— */
/* WHEN the bar collapses is MEASURED, not guessed. vb.js (job 1) compares the
   row the links want against the room left beside the wordmark, at load, on
   resize and once the display font has landed, and sets .nav-compact the
   moment they stop fitting on one line. That cannot be a px breakpoint,
   because the same seven labels are 65 characters in English and 91 in
   French: the old `@media (max-width:859px)` was tuned for English and still
   let English wrap at 980px, German at 1060, Spanish at 1120 — and French at
   every width the site has, including 1600. A number that has to be right in
   eleven languages, in eleven sets of word lengths, is a number that is wrong
   in ten of them.
   So every rule below keys on the class, and vb.js owns the trigger. It also
   sets the class unconditionally below 860px, so a phone gets the button even
   where the row would technically fit. */
.site-nav.nav-compact .nav-toggle{display:inline-flex;align-items:center;gap:.5rem}
.site-nav.nav-compact .nav-links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--panel);border-bottom:1px solid var(--line-2);padding:.6rem clamp(20px,5vw,48px) 1.2rem;box-shadow:0 30px 50px -20px rgba(0,0,0,.9);flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0}
.site-nav.nav-compact.open .nav-links{display:flex}
.site-nav.nav-compact .nav-links>a:not(.pill){padding:.85rem 0;margin:0;border-top:1px solid var(--line);font-size:1.02rem}
.site-nav.nav-compact .nav-dd{border-top:1px solid var(--line)}
.site-nav.nav-compact .nav-dd>summary{padding:.85rem 0;margin:0;font-size:1.02rem;justify-content:space-between}
.site-nav.nav-compact .dd{position:static;transform:none;min-width:0;background:none;border:none;box-shadow:none;padding:0 0 .6rem}
.site-nav.nav-compact .dd a{padding:.55rem .6rem}
.site-nav.nav-compact .nav-links .pill{margin-top:.9rem;text-align:center;padding:.8rem 1rem}
/* Full-bleed is right on a phone and wrong on a laptop: this menu can now
   appear at 1440px (in French it always does), where a sheet spanning the
   whole window — with the store button stretched to 1300px — reads as a
   broken page rather than a menu. Past phone width it becomes what it is,
   a panel hanging off the button, sized and shaped like the Features
   dropdown it sits beside. */
@media (min-width:560px){
  .site-nav.nav-compact .nav-links{left:auto;right:clamp(20px,5vw,48px);width:min(340px,calc(100% - 2*clamp(20px,5vw,48px)));margin-top:.4rem;padding:.4rem 1.1rem 1rem;border:1px solid var(--line-2);border-radius:14px;box-shadow:0 24px 50px -20px rgba(0,0,0,.9)}
  .site-nav.nav-compact .nav-links>a:not(.pill):first-child,.site-nav.nav-compact .nav-links>.nav-dd:first-child{border-top:0}
}
/* No JS means no class and no Menu button, so the links simply stay visible —
   the honest fallback this nav has always had. All this owes them is somewhere
   to go at phone width, now that a label can no longer break to make room and
   the row above is forbidden to shrink. The `flex` here is a deliberate local
   exception to `.nav-in>*`: below 860px vb.js collapses the bar on width
   alone, so nothing measures this layout and letting it compress costs the
   fit test nothing. */
@media (max-width:859px){.nav-links{flex:1 1 auto;min-width:0;flex-wrap:wrap;gap:.35rem 1.1rem}}

/* ——— language switcher (nav) ——— */
/* .nav-lang / .dd-lang carry details.nav-dd / .dd too, on purpose — same
   chevron, same panel, same phone-collapse behaviour for free. Only what's
   genuinely different lives here: a narrower panel with a scroll cap for
   eleven-plus languages, and the current-language marker (a filled dot,
   same idiom as .rec-dot). CJK native names (日本語, 한국어) need no
   dedicated font stack: --body already ends in the generic `sans-serif`,
   so the browser substitutes a system CJK font per character rather than
   falling through to tofu. */
.dd-lang{min-width:190px;max-height:min(360px,70vh);overflow-y:auto}
.dd-lang a,.dd-lang span{display:flex;align-items:center;gap:.55rem}
.dd-lang a::before,.dd-lang span::before{content:"";width:6px;height:6px;border-radius:50%;background:transparent;flex:none}
.dd-lang [aria-current]{color:var(--ink);font-weight:650;background:var(--panel-2)}
.dd-lang [aria-current]::before{background:var(--gold)}
.site-nav.nav-compact .dd-lang{max-height:none;overflow-y:visible}

/* ——— language suggestion bar ——— */
/* One sentence, one link, one dismiss — quieter than an ad or a cookie
   banner on purpose. It sits in normal document flow immediately before
   nav.site-nav (vb.js inserts it there), and it stays in flow: the nav is
   `position:sticky` as of 2026-09, which keeps the nav in flow too, so the
   bar still simply pushes the rest of the page down rather than overlapping
   or being overlapped. It scrolls away with .stripes.topbar and the nav
   then pins alone — right for a one-time, dismissible bar. Do not make this
   sticky as well: two stacked pinned bars is most of a phone's screen. No
   animation, so there is nothing for prefers-reduced-motion to disable. */
.langbar{background:var(--panel-2);border-bottom:1px solid var(--line-2);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.7rem clamp(20px,5vw,48px);font-size:.88rem}
.langbar-msg{color:var(--ink-soft);margin-right:auto}
.langbar-go{color:var(--gold);text-decoration:underline;text-underline-offset:3px;font-weight:600;white-space:nowrap}
.langbar-go:hover{color:var(--ink)}
.langbar-x{flex:none;background:none;border:1px solid var(--line-2);color:var(--muted);border-radius:9px;padding:.35rem .7rem;font:inherit;font-size:.8rem;cursor:pointer}
.langbar-x:hover{color:var(--ink);border-color:var(--ink-soft)}
@media (max-width:559px){.langbar-msg{margin-right:0;flex:1 1 100%}}

/* ——— article header ——— */
.ahead{padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(1.4rem,2.5vw,2rem)}
.crumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem}
.crumb a{color:var(--gold);text-decoration:none}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
/* §4.7 hero scale: headline plans around its own length. 20ch at 3.3rem gave
   4-line heroes; 28ch at 2.9rem holds every headline in this cluster to 2. */
h1{font-family:var(--display);font-weight:400;font-size:clamp(1.85rem,3.6vw,2.9rem);line-height:1.16;letter-spacing:.005em;max-width:28ch;text-wrap:balance}
h1 .l2{color:var(--gold)}
.dek{margin-top:1.4rem;max-width:54ch;font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--ink-soft)}
.dek strong{color:var(--ink)}
.dek em{color:var(--ink);font-style:italic}

/* ——— sections + prose ——— */
section{padding:clamp(2.6rem,5vw,4rem) 0}
h2{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.1vw,2.4rem);line-height:1.15;letter-spacing:.005em;text-wrap:balance;max-width:22ch}
h3{font-size:1.14rem;font-weight:650;letter-spacing:-.008em;margin-top:2rem}
.prose h2{margin-top:2.8rem}
.prose > h2:first-child{margin-top:0}
.prose h2+h3{margin-top:1.4rem}
.rule{border-top:1px solid var(--line)}
/* .prose deliberately sets NO width. Every content page puts both classes on
   one element (class="wrap-narrow prose"), so .wrap-narrow's 760px is the
   column and .prose only styles what's inside it. Giving .prose a max-width
   here overrides .wrap-narrow (it wins on source order) and knocks the body
   copy out of alignment with the h1 above it — 62ch re-centres the column
   narrower, `none` blows it out to full-bleed. Set the reading measure on the
   text instead, as below. */
.prose p{color:var(--ink-soft);max-width:62ch}
.prose p+p{margin-top:1.1rem}
.prose h2+p,.prose h3+p{margin-top:.9rem}
.prose strong{color:var(--ink);font-weight:650}
.prose em{color:var(--ink)}
.prose .lead{font-size:clamp(1.06rem,1.6vw,1.22rem);color:var(--ink)}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose ul{list-style:none;margin:1.1rem 0}
.prose ul li{position:relative;padding-left:1.4rem;color:var(--ink-soft)}
.prose ul li+li{margin-top:.6rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--gold)}
.prose ul li strong{color:var(--ink)}

/* pull quote — the one flourish, used once per page at most */
.pull{
  border-left:3px solid var(--gold);padding:.3rem 0 .3rem 1.4rem;margin:2rem 0;
  font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.28;
  color:var(--ink);max-width:24ch;
}

/* ——— steps ——— */
.steps{max-width:640px;margin-top:1.8rem}
.step{display:grid;grid-template-columns:44px 1fr;gap:1.1rem;padding:1.4rem 0;border-top:1px solid var(--line)}
.step:first-child{border-top:none;padding-top:0}
.step-n{
  width:40px;height:40px;display:grid;place-items:center;background:var(--panel-2);
  border:1px solid var(--line-2);border-radius:10px;
  font-family:var(--display);font-size:1.05rem;color:var(--gold);
}
.step h3{font-size:1.14rem;margin-top:0}
.step p{margin-top:.4rem;color:var(--ink-soft);font-size:.98rem;max-width:56ch}
.step p strong{color:var(--ink);font-weight:600}

/* ——— bento ——— */
/* §9.C bans the three-equal-column feature row. This is an asymmetric 5-cell
   grid: one wide lead cell, then a 2+2. Cell count always matches item count
   (§4.7), so there is never an empty tile. */
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.8rem,1.8vw,1.1rem);margin-top:clamp(1.6rem,3vw,2.2rem)}
.bento .cell{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem;min-width:0}
.bento .cell:first-child{grid-column:1 / -1}
/* §4.7 bento background diversity: the lead cell carries real visual weight
   rather than being a fourth identical white-on-white text card. */
.bento .cell:first-child{
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(245,199,66,.10), transparent 58%),
    var(--panel-2);
  border-color:var(--line-2);
}
.bento .cell h3{font-size:1.02rem;font-weight:650;letter-spacing:-.005em;margin-top:0}
.bento .cell:first-child h3{font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,2.2vw,1.5rem);letter-spacing:.005em}
.bento .cell p{margin-top:.45rem;font-size:.93rem;color:var(--ink-soft)}
.bento .cell:first-child p{font-size:1rem;max-width:46ch}
@media (max-width:599px){.bento{grid-template-columns:1fr}}

/* ——— figures (§4.8: real assets, never div-based fake screenshots) ——— */
figure{margin:clamp(1.8rem,3.5vw,2.6rem) 0}
figure img,figure video{width:100%;border-radius:12px}
figcaption{margin-top:.75rem;font-size:.85rem;color:var(--muted);max-width:52ch}

/* Full-bleed-ish plate for the wide brand stills. */
.plate{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#000}
.plate img,.plate video{display:block;width:100%;height:auto}

/* The shelf: real tape-spine art, stacked the way a shelf actually reads.
   Used where the copy argues "a season is a tape, a childhood is a shelf". */
.shelf{display:flex;flex-direction:column;gap:.55rem;margin:0}
.shelf img{width:100%;border-radius:3px;box-shadow:0 6px 18px -8px rgba(0,0,0,.85)}
@media (prefers-reduced-motion:no-preference){
  .shelf img{transition:transform .35s cubic-bezier(.16,1,.3,1)}
  .shelf img:hover{transform:translateX(6px)}
}

/* Phone screenshot pair, matching landing.html's .shot-frame treatment. */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.5vw,1.8rem);margin:clamp(1.8rem,3.5vw,2.6rem) 0;max-width:560px}
.shot-frame{border:3px solid #2f2a26;border-radius:26px;overflow:hidden;background:#121212;box-shadow:0 18px 40px -18px rgba(0,0,0,.9)}
/* A screen RECORDING gets the identical phone frame to a screenshot: same
   bezel, same radius, same shadow. The only reason both selectors exist is
   that a <video> is not an <img>. Keep them together so a change to one is
   obviously a change to both. */
.shot-frame img,.shot-frame video{width:100%;display:block}
/* The wide equivalent, for a desktop screenshot, a diagram or a landscape
   recording. There was no shared class for this before: the homepage kept
   its .shot-wide inline and every other page fell back to a naked <figure>,
   so a full-width asset had no frame at all. */
.shot-w{margin:clamp(1.6rem,3vw,2.4rem) 0}
/* A full-width illustration in its own frame. Lived in vb-home.css while the
   homepage was the only page using it; it moved here in 2026-09-17 when the
   "everything falls into place" graphic moved to /features/shared-tapes, which
   is the page it was always explaining. */
.diagram{margin:clamp(1.8rem,3.5vw,2.6rem) auto 0;max-width:var(--max);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--black)}
.diagram img{display:block;width:100%;height:auto}
.shot-w img,.shot-w video{width:100%;display:block;border-radius:14px;border:1px solid var(--line-2);background:#121212}
.shot-w figcaption,.shot figcaption{margin-top:.7rem}
.shots figcaption{text-align:center;margin-top:.7rem}
@media (max-width:599px){.shots{grid-template-columns:1fr;max-width:300px}}

/* Split: copy beside a visual. §4.3 anti-center bias at VARIANCE 7. */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.8rem,4vw,3.2rem);align-items:center;margin:clamp(2rem,4vw,3rem) 0}
.split.flip{grid-template-columns:.85fr 1.15fr}
.split.flip .split-copy{order:2}
.split p{max-width:46ch}
@media (max-width:820px){
  .split,.split.flip{grid-template-columns:1fr;gap:1.6rem}
  .split.flip .split-copy{order:0}
}

/* ——— cream band ——— */
/* z-index lifts the cream band ABOVE the fixed grain/scanline overlays —
   scanlines read as CRT on black but as corduroy on cream. */
.band{background:var(--cream);color:var(--cream-ink);position:relative;z-index:52}
.band .wrap,.band .wrap-narrow{padding-top:clamp(3.2rem,6vw,5rem);padding-bottom:clamp(3.2rem,6vw,5rem)}
.band h2{font-size:clamp(1.8rem,3.6vw,2.7rem);max-width:18ch}
.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);margin-top:clamp(1.6rem,3vw,2.4rem);align-items:start}
@media (max-width:820px){.band-grid{grid-template-columns:1fr}}
.band-copy p{max-width:44ch;color:var(--cream-ink)}
.band-copy p+p{margin-top:1rem;color:var(--cream-soft)}
.band-points{list-style:none}
.band-points li{border-top:1px solid var(--cream-line);padding:1rem 0;font-size:.96rem;color:var(--cream-soft)}
.band-points li:last-child{border-bottom:1px solid var(--cream-line)}
.band-points strong{color:var(--cream-ink);font-weight:650}
.band a{color:var(--cream-ink);text-decoration:underline;text-underline-offset:3px}
.band :focus-visible{outline-color:var(--cream-ink)}

/* ——— comparison table (how-to pages) ——— */
.tablewrap{overflow-x:auto;margin-top:1.8rem;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;min-width:520px;background:var(--panel)}
th,td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line);font-size:.93rem;vertical-align:top}
th{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;background:var(--panel-2)}
td{color:var(--ink-soft)}
td:first-child{color:var(--ink);font-weight:600}
tbody tr:last-child td{border-bottom:none}
.yes{color:var(--green);font-weight:650}
.no{color:var(--muted)}

/* ——— FAQ ——— */
.faq{margin-top:clamp(1.6rem,3vw,2.4rem);max-width:760px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1rem 0;font-size:1rem;font-weight:600;letter-spacing:-.005em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+" / "";flex:none;color:var(--gold);font-size:1.15rem;line-height:1;transition:transform .2s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 0 1.15rem;font-size:.93rem;color:var(--ink-soft);max-width:58ch}

/* ——— related links ——— */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.6rem}
.related a{
  display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:1.1rem 1.2rem;text-decoration:none;transition:border-color .15s ease,transform .15s ease;
}
.related a:hover{border-color:var(--line-2);transform:translateY(-2px)}
.related .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.45rem}
.related .t{font-weight:650;font-size:1rem;letter-spacing:-.005em;display:block}
.related .d{font-size:.88rem;color:var(--ink-soft);margin-top:.3rem;display:block}

/* ——— waitlist form ——— */
.wl{margin-top:1.8rem;max-width:480px}
.wl-row{display:flex;gap:.6rem;flex-wrap:wrap}
.wl input[type=email]{
  flex:1 1 220px;min-width:0;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink);
  font:inherit;font-size:1rem;padding:.85rem 1rem;border-radius:10px;
}
.wl input[type=email]::placeholder{color:var(--muted)}
.wl input[type=email]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,199,66,.16)}
.btn-rec{
  flex:0 0 auto;display:inline-block;cursor:pointer;text-decoration:none;text-align:center;
  border:2px solid rgba(255,255,255,.9);
  background:var(--rec);color:#fff !important;font-family:var(--display);font-size:clamp(1.02rem,1.5vw,1.15rem);letter-spacing:.06em;
  padding:.85rem 1.7rem;border-radius:6px;
  box-shadow:0 3px 0 rgba(0,0,0,.5);
  transition:transform .12s ease,filter .18s ease;
}
.btn-rec:hover{filter:brightness(1.1)}
.btn-rec:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.btn-rec[disabled]{opacity:.55;cursor:default}
.wl-note{margin-top:.9rem;font-size:.85rem;color:var(--muted)}
.wl-msg{margin-top:.9rem;font-size:.92rem;min-height:1.4em}
.wl-msg.ok{color:var(--green);font-weight:600}
.wl-msg.err{color:#ff8a80}
.hp{position:absolute;left:-9999px}

/* ——— download QR ——— */
/* The code encodes watchvideobro.com/download and nothing else, so it never
   needs reprinting when the App Store listing lands: the server re-aims that
   one URL. Generated server-side as inline SVG, so it is sharp at any zoom or
   pixel density and costs no request. See marketing.js downloadQrSvg().
   The plate is white on purpose rather than a site surface tone: contrast is
   the whole job of a QR code, and the SVG carries its own white quiet zone,
   which needs somewhere seamless to sit. */
.qr-get{display:flex;align-items:center;gap:.9rem;margin-top:1.8rem}
.qr-plate{flex:0 0 auto;width:104px;height:104px;padding:6px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.qr-plate svg{display:block;width:100%;height:100%}
.qr-cap{margin:0;font-size:.85rem;line-height:1.5}
.qr-cap strong{display:block;color:var(--ink-soft);font-weight:600}
.qr-cap span{display:block;color:var(--muted);font-family:var(--mono);font-size:.78rem;word-break:break-all}
/* On a phone the visitor is already holding the thing the code is for, so it
   is dead weight next to the CTA. Hidden outright rather than shrunk. */
@media (max-width:719px){.qr-get{display:none}}

/* ——— outro / footer ——— */
.outro{background:var(--panel);border-top:1px solid var(--line)}
.outro .wrap{padding-top:clamp(3.2rem,6vw,5rem)}
.outro h2{font-size:clamp(1.9rem,4vw,2.9rem)}
.outro-dek{margin-top:1.1rem;color:var(--ink-soft);max-width:46ch;font-size:1.04rem}
.foot-in{margin-top:clamp(3rem,5vw,4.4rem);border-top:1px solid var(--line);padding:1.6rem 0 2.4rem;display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between;align-items:center;font-size:.84rem;color:var(--muted)}
.foot-brand{display:flex;align-items:center;gap:.9rem}
.foot-brand img{height:20px;width:auto}
.foot-links{display:flex;gap:1.5rem;flex-wrap:wrap}
.foot-links a{color:var(--muted);text-decoration:none;padding:.6rem .3rem;margin:-.6rem -.3rem}
.foot-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* Footer site map: every content page reachable from every page, one click.
   Sits above .foot-in inside the same .wrap; colours all via tokens so the
   stray-colour lock in marketing-pages.test.js stays green. */
.foot-map{margin-top:clamp(2.6rem,4vw,3.6rem);border-top:1px solid var(--line);padding-top:1.7rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem 2rem;font-size:.84rem;text-align:left}
.foot-map .foot-k{display:block;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;font-size:.68rem;margin-bottom:.65rem}
.foot-map a{display:block;color:var(--muted);text-decoration:none;padding:.26rem 0}
.foot-map a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.foot-map+.foot-in,.foot-map+.wrap .foot-in{border-top:none;margin-top:.4rem;padding-top:.4rem}
@media (max-width:720px){.foot-map{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================================
   2026-08-24 site rework — product pages, diagrams, placeholders, footer.
   Everything below uses only the tokens above (the stray-colour test in
   marketing-pages.test.js keeps it that way).
   ========================================================================= */

/* ——— buttons (App Store / secondary) ——— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;font-weight:650;border-radius:12px;padding:.8rem 1.3rem;font-size:1rem;line-height:1.2;border:1px solid var(--line-2);color:var(--ink);background:var(--panel-2);transition:transform .12s ease,filter .15s ease,border-color .15s ease}
.btn:hover{border-color:var(--ink-soft);transform:translateY(-1px)}
.btn-store{background:var(--ink);color:#0a0908;border-color:var(--ink);font-family:var(--display);letter-spacing:.04em;font-size:1.05rem}
.btn-store:hover{background:#fff}
/* The Apple mark on a live App Store CTA. .btn/.btn-rec are already
   inline-flex with a gap, so this only has to stop the glyph stretching and
   sit it on the cap height of the label beside it. Sized in em so it tracks
   the button's own font-size down to the 380px breakpoint. */
.btn-apple{flex:none;width:auto;height:1.15em;margin-top:-.12em}

/* ——— the web sign-in buttons (shared by the homepage hero and /login.html,
   2026-09-14) ———
   Two identical buttons, Google first, equal widths (the founder's
   reference). The site's own tokens rather than the reference's green: the
   panel gradient every dark card already uses, and the brand gold on
   hover/focus. White bold label, the provider mark on the left. Under 480px
   they stack full width; a page that wants them stacked everywhere sets
   .auth-row's columns itself (login.html does). vb.js job 8 wires them. */
.auth-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:0;max-width:560px}
@media (max-width:479px){.auth-row{grid-template-columns:1fr;max-width:none}}
.btn-auth{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;width:100%;height:48px;padding:0 1.1rem;
  border-radius:12px;border:1px solid var(--line-2);background:linear-gradient(180deg,var(--panel-2) 0%,var(--panel) 100%);
  color:#fff;font:700 1.02rem/1 var(--body);letter-spacing:.005em;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 2px 6px rgba(0,0,0,.35);
  transition:border-color .15s ease,transform .12s ease,filter .15s ease}
.btn-auth:hover{border-color:var(--gold);filter:brightness(1.12);transform:translateY(-1px)}
.btn-auth:disabled{opacity:.6;cursor:default;transform:none}
.btn-auth:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-auth .btn-apple{width:17px;height:20px;margin-top:0}
.btn-auth .btn-g{width:20px;height:20px}
.auth-msg{margin:.5rem 0 0;font-size:.9rem;color:var(--gold);max-width:48ch}
a.btn-rec{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:1.4rem}
.cta-note{margin-top:.8rem;font-size:.85rem;color:var(--muted)}

/* ——— the top-of-page install affordance (partials/get-app.html) ——— */
/* One action under the hero's own reading buttons, not a CTA block: a
   hairline instead of a panel, no headline, no bullets. The QR sits BESIDE
   the button rather than under it for the same reason it does on the
   homepage — it is the desktop path to the same place, not a second offer —
   and .qr-get already hides itself under 720px, where the visitor is holding
   the phone the code would send them to. Everything else here is a reused
   class (.cta-row, .cta-note, .qr-get, .qr-plate, .qr-cap), so the component
   is a layout, not a new set of visual decisions. */
.getapp{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(1rem,2.5vw,2rem);margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.getapp>div{flex:0 1 auto;min-width:0}
/* .phero .cta-row sets a 1.6rem top margin for the hero's own button row and
   has the same specificity as a bare .getapp .cta-row, so it would win on
   source order and leave a gap under the rule. Named explicitly rather than
   moved below it: this must not depend on where the block sits in the file. */
.getapp .cta-row,.phero .getapp .cta-row{margin-top:0}
.getapp .cta-note{max-width:38ch}
.getapp .qr-get{margin-top:0}
.getapp .qr-cap{min-width:7em}
/* Under 720px .qr-get hides itself and the flex wrapper has no job left, so it
   gets out of the way completely rather than leaving a shrink-to-fit column
   the button and note have to live inside. Same fix as .hero-get's. */
@media (max-width:719px){.getapp{display:block}.getapp>div{width:auto}}

/* ——— the free-tier CTA band ——— */
/* "Start with 5 GB free." One band, used on every product page at the point
   where the reader has understood enough to want to try it. */
.cta-free{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-free .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center;padding-top:clamp(2.6rem,5vw,4rem);padding-bottom:clamp(2.6rem,5vw,4rem)}
.cta-free h2{font-size:clamp(1.9rem,3.8vw,2.8rem);max-width:16ch}
.cta-free .gb{color:var(--gold)}
.cta-free p{margin-top:.9rem;color:var(--ink-soft);max-width:48ch}
.cta-free .wl{margin-top:0;max-width:none}
.cta-free ul{list-style:none;margin-top:.2rem}
.cta-free li{border-top:1px solid var(--line);padding:.7rem 0;font-size:.93rem;color:var(--ink-soft)}
.cta-free li:last-child{border-bottom:1px solid var(--line)}
.cta-free li strong{color:var(--ink)}
@media (max-width:820px){.cta-free .wrap{grid-template-columns:1fr}}

/* ——— page hero for product pages (wide, with a visual beside the copy) ——— */
.phero{padding:clamp(2.4rem,5vw,3.8rem) 0 clamp(1.2rem,2.5vw,2rem)}
.phero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.8rem,5vw,4rem);align-items:center}
@media (max-width:859px){.phero-grid{grid-template-columns:1fr}}
/* A hero whose figure IS the argument (a recording of the feature working,
   not a still beside the copy) gives the figure the wider column: 432px to
   552px at a 1440 viewport. Written as min-width rather than as an override
   ON PURPOSE — a media query adds no specificity, so a plain
   `.phero-grid.shot-lead` rule would have beaten the 859px collapse above and
   held two columns on a phone. An inline style would have done the same. */
@media (min-width:860px){.phero-grid.shot-lead{grid-template-columns:.85fr 1.15fr}}
.phero .dek{max-width:50ch}
.phero .cta-row{margin-top:1.6rem}

/* ——— definition rows (the vocabulary strip) ——— */
.defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:clamp(1.4rem,3vw,2rem)}
.defs>div{background:var(--panel);padding:1.1rem 1.2rem;min-width:0}
.defs dt{font-family:var(--display);font-size:1.15rem;color:var(--gold);letter-spacing:.01em}
.defs dd{margin-top:.35rem;font-size:.92rem;color:var(--ink-soft)}
/* Six terms in auto-fit columns land as four across and two under, which
   leaves two dead cells in the bottom right of a bordered box. A list whose
   item count is not a multiple of the column count needs the column count
   stated, not derived: three rows of two fills the grid exactly. Only
   /how-it-works opts in; the four-term lists on /features/develop and
   /features/tape-cabinet still fill their own row. */
.defs-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:719px){.defs-2{grid-template-columns:1fr}}

/* ——— numbered how-it-works flow (wider than .steps: copy + visual per step) ——— */
.flow{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.flow-step{display:grid;grid-template-columns:52px 1fr minmax(0,.9fr);gap:clamp(1rem,2.5vw,2rem);padding:clamp(1.6rem,3vw,2.4rem) 0;border-top:1px solid var(--line);align-items:start}
.flow-step:first-child{border-top:none;padding-top:0}
.flow-n{width:44px;height:44px;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;font-family:var(--display);font-size:1.1rem;color:var(--gold)}
.flow-step h2,.flow-step h3{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.15;margin-top:.25rem;max-width:none}
.flow-step p{margin-top:.6rem;color:var(--ink-soft);max-width:52ch}
.flow-step p+p{margin-top:.7rem}
.flow-step p strong{color:var(--ink);font-weight:600}
.flow-step .ui{font-family:var(--mono);font-size:.78em;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--panel-2);border:1px solid var(--line-2);border-radius:6px;padding:.1em .45em;white-space:nowrap}
.flow-visual{min-width:0}
.flow-visual figure{margin:0}
.flow-more{display:inline-block;margin-top:.8rem;font-size:.9rem;color:var(--gold);text-decoration:none;font-weight:650}
.flow-more:hover{text-decoration:underline;text-underline-offset:3px}
.flow-more::after{content:" \2192"}
@media (max-width:859px){
  .flow-step{grid-template-columns:44px 1fr}
  .flow-visual{grid-column:1 / -1;margin-top:1rem}
}
.ui{font-family:var(--mono);font-size:.78em;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--panel-2);border:1px solid var(--line-2);border-radius:6px;padding:.1em .45em;white-space:nowrap}
.band .ui{background:rgba(0,0,0,.06);border-color:var(--cream-line);color:var(--cream-ink)}

/* ——— feature list with icons (asymmetric, matches .bento rules) ——— */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.8rem,1.8vw,1.1rem);margin-top:clamp(1.4rem,3vw,2rem)}
.facts>div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;min-width:0}
.facts h3{font-size:1rem;margin-top:0}
.facts p{margin-top:.4rem;font-size:.92rem;color:var(--ink-soft)}
.facts .n{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.2rem);color:var(--gold);line-height:1;display:block;margin-bottom:.35rem}
@media (max-width:599px){.facts{grid-template-columns:1fr}}

/* ——— designed placeholders (the asset brief, in place) ——— */
/* Not a grey box. A labelled frame in the brand's chrome that says exactly
   what asset belongs here, so the page reads as designed and the placeholder
   doubles as the brief for the asset that replaces it. Every .ph carries a
   data-asset id that docs/SITE_ASSET_TODO.md lists (a test ties them). */
.ph{position:relative;margin:0;border:2px dashed var(--line-2);border-radius:14px;overflow:hidden;background:
  repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.028) 14px 28px),var(--panel);
  display:grid;align-content:center;justify-items:center;text-align:center;padding:1.4rem 1.2rem;min-height:180px}
.ph::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(90deg,var(--s1) 0 20%,var(--s2) 20% 40%,var(--s3) 40% 60%,var(--s4) 60% 80%,var(--s5) 80% 100%)}
.ph-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(245,199,66,.4);border-radius:999px;padding:.22rem .6rem;background:rgba(245,199,66,.08)}
.ph-t{display:block;margin-top:.7rem;font-family:var(--display);font-size:clamp(1rem,1.8vw,1.25rem);color:var(--ink);line-height:1.2;max-width:22ch}
.ph-spec{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted)}
.ph-d{margin-top:.6rem;font-size:.82rem;color:var(--ink-soft);max-width:34ch;line-height:1.45}
.ph.phone{aspect-ratio:9/19.5;max-width:280px;width:100%;border-radius:30px;padding:1.2rem .9rem}
.ph.phone .ph-t{font-size:1rem}
.ph.wide{aspect-ratio:16/9;width:100%}
.ph.square{aspect-ratio:1;width:100%}
.ph.short{aspect-ratio:21/9;width:100%;min-height:150px}
.ph-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.8rem);max-width:600px;margin:clamp(1.6rem,3vw,2.4rem) auto}
.ph-pair .ph.phone{margin:0 auto}
@media (max-width:599px){.ph-pair{grid-template-columns:1fr;max-width:280px}}
.band .ph{background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(0,0,0,.035) 14px 28px),rgba(255,255,255,.4);border-color:var(--cream-line)}
.band .ph-t{color:var(--cream-ink)}
.band .ph-d{color:var(--cream-soft)}
.band .ph-spec{color:var(--cream-soft)}

/* ——— the chronology diagram (a real diagram, not a placeholder) ——— */
/* Three phones, one evening, and the tape that results. Rows are laid on a
   shared time axis with CSS grid columns = minutes, so a clip's position IS
   its record time. The bottom strip is the tape: the same clips, in time
   order, colour-coded by who shot them. */
.chrono{margin:clamp(1.6rem,3vw,2.4rem) 0;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:clamp(1rem,2.5vw,1.6rem);overflow:hidden}
.chrono-title{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.chrono-axis{display:grid;grid-template-columns:78px 1fr;margin-top:.8rem}
.chrono-axis .ticks{display:grid;grid-template-columns:repeat(6,1fr);font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.chrono-axis .ticks span{border-left:1px solid var(--line-2);padding-left:.35rem;line-height:1;padding-bottom:.4rem}
.chrono-row{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:0;padding:.45rem 0;border-top:1px solid var(--line)}
.chrono-row .who{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:.45rem}
.chrono-row .who i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.chrono-row .lane{display:grid;grid-template-columns:repeat(24,1fr);gap:0;height:30px;position:relative;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 100%);background-size:calc(100% / 6) 100%}
.chrono-row .lane i{height:100%;border-radius:5px;display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:#0a0908;font-weight:650;min-width:0;overflow:hidden;white-space:nowrap}
.c-a{background:var(--s1)}.c-b{background:var(--s2)}.c-c{background:var(--s4);color:var(--ink) !important}
.chrono .c-c{background:var(--s4-deep)}
.chrono-row.late .lane i{outline:2px dashed var(--ink-soft);outline-offset:-2px}
.chrono-arrow{text-align:center;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:.9rem 0 .5rem}
.chrono-arrow::before{content:"";display:block;width:1px;height:18px;background:var(--gold);margin:0 auto .45rem}
.chrono-tape{border:2px solid var(--ink);border-radius:10px;background:#0f0e0d;padding:.5rem}
.chrono-tape .strip{display:flex;gap:4px;height:38px}
.chrono-tape .strip i{border-radius:5px;display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:#0a0908;font-weight:650;min-width:0;overflow:hidden;white-space:nowrap}
.chrono-tape .strip i.c-c{color:var(--ink)}
.chrono-legend{margin-top:.8rem;font-size:.82rem;color:var(--muted);display:flex;gap:1.2rem;flex-wrap:wrap}
.chrono-legend b{color:var(--ink-soft);font-weight:600}
@media (max-width:599px){
  .chrono-axis,.chrono-row{grid-template-columns:24px 1fr}
  .chrono-row .who span{display:none}
  .chrono-row .lane i,.chrono-tape .strip i{font-size:.68rem}
  .chrono-axis .ticks span{min-width:0;overflow:visible;font-size:.62rem;letter-spacing:0;padding-left:.25rem}
  .chrono-axis .ticks span:nth-child(even){font-size:0}
}

/* ——— the lifecycle diagram: Active → Develop → Film, and the way back ——— */
.life{margin:clamp(1.6rem,3vw,2.4rem) 0;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.6rem;align-items:stretch}
.life-node{border:1px solid var(--line-2);border-radius:14px;background:var(--panel);padding:1rem 1.05rem;min-width:0}
.life-node .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:block}
.life-node .t{font-family:var(--display);font-size:clamp(1.05rem,2vw,1.35rem);color:var(--ink);display:block;margin-top:.35rem;line-height:1.15}
.life-node p{margin-top:.45rem;font-size:.86rem;color:var(--ink-soft)}
.life-node.film{border-color:var(--gold);background:radial-gradient(120% 140% at 100% 0%,rgba(245,199,66,.10),transparent 58%),var(--panel-2)}
.life-arrow{display:grid;place-items:center;color:var(--gold);font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:0 .2rem}
.life-arrow::before{content:"\2192";font-size:1.4rem;line-height:1;display:block}
.life-back{grid-column:1 / -1;display:flex;align-items:center;gap:.8rem;margin-top:.2rem;font-size:.86rem;color:var(--ink-soft);border:1px dashed var(--line-2);border-radius:12px;padding:.75rem 1rem}
.life-back b{color:var(--ink);font-weight:600}
.life-back .arr{font-family:var(--mono);color:var(--gold);flex:none;font-size:1.1rem}
@media (max-width:719px){
  .life{grid-template-columns:1fr}
  .life-arrow::before{content:"\2193"}
  .life-arrow{padding:.1rem 0}
}

/* ——— storage: the numbers, and the four-things-that-are-different table ——— */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:clamp(1.4rem,3vw,2rem)}
.nums>div{background:var(--panel);padding:1.1rem 1.2rem;min-width:0}
.nums .n{font-family:var(--display);font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--gold);line-height:1;display:block}
.nums .l{display:block;margin-top:.45rem;font-size:.9rem;color:var(--ink-soft)}
.nums .s{display:block;margin-top:.25rem;font-size:.78rem;color:var(--muted)}
.rows{margin-top:clamp(1.4rem,3vw,2rem);border-top:1px solid var(--line)}
.rows>div{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:1rem 2rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.rows h3{margin-top:0;font-size:1.02rem}
.rows p{font-size:.93rem;color:var(--ink-soft)}
.rows p+p{margin-top:.6rem}
@media (max-width:599px){.rows>div{grid-template-columns:1fr;gap:.4rem}}

/* ——— meter mock: an honest diagram of the storage meter, not a screenshot ——— */
.meter{margin-top:1.2rem;border:1px solid var(--line-2);border-radius:12px;background:var(--panel-2);padding:.9rem 1rem;max-width:420px}
.meter .lab{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:flex;justify-content:space-between;gap:1rem}
.meter .bar{margin-top:.6rem;height:10px;border-radius:999px;background:var(--line);overflow:hidden}
.meter .bar i{display:block;height:100%;width:31%;background:linear-gradient(90deg,var(--s1),var(--s2))}
.meter small{display:block;margin-top:.5rem;font-size:.74rem;color:var(--muted)}

/* ——— hub index cards (use-case hub, footer-adjacent) ——— */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(.8rem,1.8vw,1.1rem);margin-top:clamp(1.4rem,3vw,2rem)}
.hub a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.15rem 1.25rem;text-decoration:none;min-width:0;transition:border-color .15s ease,transform .15s ease}
.hub a:hover{border-color:var(--line-2);transform:translateY(-2px)}
.hub .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.45rem}
.hub .t{font-weight:650;font-size:1.05rem;letter-spacing:-.005em;display:block;color:var(--ink)}
.hub .d{font-size:.88rem;color:var(--ink-soft);margin-top:.35rem;display:block}

/* ——— prose extras ——— */
.prose ol{margin:1.1rem 0 1.1rem 1.3rem;color:var(--ink-soft)}
.prose ol li+li{margin-top:.5rem}
.prose ol li strong{color:var(--ink)}
.prose .note{border:1px solid var(--line-2);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;background:var(--panel);padding:.9rem 1.1rem;margin:1.4rem 0;font-size:.93rem;color:var(--ink-soft)}
.prose .note strong{color:var(--ink)}
/* The contextual trigger (2026-09-09, the content playground): the ONE in-body
   store link a page may carry ("Opening day is coming? Start one Tape for the
   season."), sitting at the end of the argument, before the FAQ. It takes the
   note's border and radius so it reads as part of the prose, not as a banner;
   the shared CTA band below the page still owns the "2 GB free" pitch. */
.trigger{border:1px solid var(--line-2);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;background:var(--panel);padding:.95rem 1.15rem;margin:1.8rem 0 .4rem;font-size:.97rem;color:var(--ink-soft)}
.trigger p{margin:0}
.trigger strong{color:var(--ink)}
.trigger a{color:var(--gold);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.trigger a:hover{color:var(--ink)}
/* The "Start" card in a Keep exploring grid: same card, gold rule on the left. */
.related a.start{border-left:3px solid var(--gold)}
.prose dl.terms{margin:1.2rem 0}
.prose dl.terms dt{font-weight:650;color:var(--ink);margin-top:.9rem}
.prose dl.terms dd{color:var(--ink-soft);font-size:.95rem;margin-top:.2rem;max-width:62ch}
.prose h2[id]{scroll-margin-top:1.5rem}
.checks{list-style:none;margin:1.1rem 0}
.checks li{position:relative;padding-left:1.6rem;color:var(--ink-soft)}
.checks li+li{margin-top:.55rem}
.checks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--green);font-weight:700}
.checks li.x::before{content:"\00d7";color:var(--muted)}
.checks li strong{color:var(--ink)}

/* ——— the site footer (shared partial) ——— */
.site-foot{background:var(--panel);border-top:1px solid var(--line);position:relative;z-index:52}
/* auto-fit/minmax rather than a hard-coded column count: the grid used to
   be repeat(5,...) with 3-then-2 breakpoint overrides for exactly 5
   children. The language column makes 6, and a 12th language would make 7
   — a fixed count breaks again every time a column is added or removed, so
   the columns flow to fit whatever is actually there at any width. The two
   breakpoints below are kept (same 859/559 cutoffs as everywhere else in
   this file) and their min-widths are tuned, by measurement against a real
   rendered iframe, to land on the SAME column counts today's 5-column
   footer already renders at each tier — 5 above 859, 3 at ≤859, 2 at
   ≤559 — while 6 (or a few more) still flows into even rows with no
   orphan. The one deliberate gap: right at the ≤559 cutoff (a real
   container of ~485px) this now renders 3 columns instead of 2, because a
   single auto-fit value can't hold flat at "always exactly 2" across that
   whole tier's width range AND also still show exactly 2 at a true small
   phone (~261px, 320px viewport) the way the old zero-floor
   minmax(0,1fr) could — the two widths need contradictory minimums. 320px
   was kept faithful (2 columns, matching today) since it's the tier's one
   realistic device width; the widened-to-3 result at the ~559 boundary
   costs nothing (no overflow, no orphan) and is actually the better outcome
   for 6 languages there (a clean 3+3 instead of a cramped 2-per-row).
   2026-09-15 — the Learn fold at the bottom of this block spans TWO tracks,
   so seven groups now ask for eight slots. Two numbers moved to make eight
   of them fit the 1024px desktop row: this minimum, 100px to 92px, and the
   column gap, 1.6rem to 1.1rem. At the old pair the eighth slot did not fit
   anywhere between 860 and 1075px, so the Language column orphaned onto a
   second row and the footer went back over 1000px at exactly the widths an
   iPad landscape and a part-screen laptop window use. Neither number
   reaches the ≤859 or ≤559 tiers — their own minimums still win there — and
   320px still renders the two columns the paragraph above insists on. The
   ~559 boundary now widens to 4 rather than 3, for the same reason it
   widened to 3 before, and with the same verdict: no overflow, no orphan.
   Re-measured at 24 widths from 1440 down to 320 after the fold landed;
   every one is shorter than it was and none overflows. */
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));--foot-gap:1.1rem;gap:1.6rem var(--foot-gap);padding:clamp(2.4rem,4vw,3.4rem) 0 1.6rem;font-size:.86rem}
/* min-height is two heading lines so the first link of every column starts at
   the same y whether its heading wrapped or not. One column's heading is
   longer than the rest in most languages ("USE VIDEOBRO FOR", "VideoBro
   gebruiken voor", "Use o VideoBro para"), and without this that column's
   whole list sits one line lower than its neighbours — already true on nl, sv
   and pt-BR before the fold, and true of English once the fold's extra track
   narrowed the columns. lh is the honest unit; the em fallback is the same
   number for browsers that don't have it, which is why line-height is pinned
   here rather than inherited. */
.foot-grid .foot-k{display:block;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;font-size:.68rem;line-height:1.65;min-height:3.3em;min-height:2lh;margin-bottom:.65rem}
.foot-grid a{display:block;color:var(--muted);text-decoration:none;padding:.26rem 0}
.foot-grid a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
/* The Learn group carries every guide — 16 links, more than twice the next
   longest column — so as a single track it ran ~940px while its neighbours
   stopped near 320, and the footer was one tall list beside a lot of empty
   space (1015px at 1280, 1984px at 320). It spans two tracks and folds into
   two sub-columns instead: measured, the footer drops to 592px at 1280 and
   1737px at 320, and Learn lands beside the Language column in height.
   Its internal gap is the grid's own --foot-gap, so a two-track span folds
   onto exactly the track grid underneath it rather than near it.
   Three details are load-bearing. column-span on the heading: without it
   "LEARN" flows into the first sub-column and the fold reads as two
   unlabelled lists. break-inside on the links: a wrapped two-line label
   otherwise splits across the fold. align-self:start so the multicol box
   balances over its OWN content height — stretched to a row made taller by
   some other column, it fills the first sub-column instead of halving.
   grid-auto-columns is the safety net for the span: below ~300px the
   auto-fit track count can fall to one, and an implicit auto-width track
   there would push the footer wider than the screen.
   The span is also what the 92px minimum and the 1.1rem gap at the top of
   this block are for — see that comment. Between them the other columns get
   back most of the width the eighth slot costs: 113px at 1280, against
   124px before the fold and 106px with the span alone. */
.foot-grid{grid-auto-columns:minmax(0,1fr)}
.foot-grid .foot-wide{grid-column:span 2;align-self:start;column-count:2;column-gap:var(--foot-gap)}
.foot-grid .foot-wide .foot-k{column-span:all}
.foot-grid .foot-wide a{break-inside:avoid}
.foot-lang [aria-current]{color:var(--ink);font-weight:650}
@media (max-width:859px){.foot-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
@media (max-width:559px){.foot-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}}
.foot-bottom{border-top:1px solid var(--line);padding:1.4rem 0 2.2rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--muted)}
.foot-bottom .foot-brand img{height:20px;width:auto}
.foot-bottom .foot-brand{display:flex;align-items:center;gap:.9rem}

/* ——— fixes from the first render pass ——— */
.sec-intro{margin-top:.9rem;color:var(--ink-soft);max-width:52ch}
.ph.phone{max-width:240px}
.flow-visual .ph.phone{max-width:230px;margin:0 auto}
.flow-visual .life{grid-template-columns:1fr;margin:0}
.flow-visual .life-arrow::before{content:"\2193"}
.flow-visual .life-arrow{padding:.1rem 0}
.cta-free .wl{margin-top:1.3rem}
.cta-free .cta-row{margin-top:1.3rem}

/* ——— homepage hero + deck (moved verbatim from the old inline landing.html
   block in the 2026-08-24 rework so the homepage uses the shared sheet) ——— */
.home-hero{padding:clamp(3.2rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem);text-align:center}
.home-hero h1{font-size:clamp(2rem,5vw,3.9rem);line-height:1.12;max-width:22ch;margin:0 auto}
.home-hero h1 .l2{display:block;color:var(--gold)}
.home-hero .dek{margin:1.5rem auto 0;max-width:52ch}
.home-hero .wl{margin:2.2rem auto 0;max-width:480px}
.home-hero .cta-row{justify-content:center;margin-top:2rem}
.d4{animation-delay:.22s}.d5{animation-delay:.28s}
.deck-band{padding:clamp(1rem,3vw,2.5rem) 0 clamp(3.5rem,7vw,6rem)}
.deck{width:min(720px,100%);margin:0 auto;background:#0f0e0d;border:3px solid var(--ink);border-radius:26px;padding:clamp(.8rem,2vw,1.15rem);box-shadow:0 0 0 1px #000,0 26px 60px -20px rgba(0,0,0,.9)}
.deck-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.15rem .35rem .8rem}
.deck-mark{line-height:0}
.deck-mark img{height:20px;width:auto}
.deck-rec{display:flex;align-items:center;gap:.45rem;font-family:var(--display);font-size:clamp(.85rem,2.2vw,1.05rem);color:var(--ink)}
.rec-dot{display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--rec)}
@media (prefers-reduced-motion:no-preference){
  .rec-dot{animation:blink 2.4s step-end infinite}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
}
/* The film is exactly 16:9 (pillarbox cropped off), so `cover` never crops it. */
.deck-screen{position:relative;border-radius:8px;overflow:hidden;background:#000;aspect-ratio:16/9}
.deck-screen video{width:100%;height:100%;object-fit:cover;border-radius:0}
.deck-stripes{margin:.85rem 0;border-radius:2px;overflow:hidden}
.deck-tray{background:#252220;border:2px solid #3a3531;border-radius:10px;height:clamp(58px,11vw,86px);display:flex;align-items:center;justify-content:center;gap:.55rem}
.deck-tray span{display:block;width:26px;height:6px;border-radius:2px;background:#3f3a35}
.deck-caption{margin-top:1.3rem;text-align:center;font-size:.88rem;color:var(--muted)}
.deck figure,.deck-band figure{margin:0}

/* ——— homepage: definitional prose + steps (the original two-column layouts) ——— */
.what-grid{display:grid;grid-template-columns:2fr 3fr;gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:899px){.what-grid{grid-template-columns:1fr;gap:2rem}}
.how-grid{display:grid;grid-template-columns:2fr 3fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.how-head .sec-intro{max-width:26ch}
@media (max-width:899px){.how-grid{grid-template-columns:1fr;gap:2.2rem}.how-head .sec-intro{max-width:52ch}}
.step-ic{width:40px;height:40px;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px}
.step-ic img{width:24px;height:24px}
.home-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,3vw,2.2rem);margin:clamp(2rem,4vw,3rem) auto 0;max-width:680px}
.home-shots figure{margin:0}
.home-shots .shot-frame{border-radius:30px}
.home-shots figcaption{margin-top:.8rem;text-align:center;font-size:.85rem;color:var(--muted);max-width:none}
@media (max-width:719px){.home-shots{grid-template-columns:1fr;max-width:320px}}
.home-faq{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4rem);margin-top:clamp(2rem,4vw,3rem);align-items:start}
.home-faq .faq{margin-top:0;max-width:none;min-width:0}
@media (max-width:719px){.home-faq{grid-template-columns:1fr}}
.pull-wide{font-family:var(--display);font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.25;color:var(--ink);max-width:30ch;margin:1.6rem 0 0}
.pull-wide .gold{color:var(--gold)}

/* ——— final review pass ——— */
.crumb a,.flow-more,.use-more{display:inline-block;padding:.7rem .3rem;margin:-.7rem -.3rem}
.foot-grid a{padding:.5rem 0}
@media (max-width:599px){.chrono-axis,.chrono-row{grid-template-columns:28px 1fr}}
.nf{padding:clamp(3rem,8vw,6rem) 0;text-align:center}
.nf h1{margin:0 auto}
.nf p{margin:1.2rem auto 0;color:var(--ink-soft);max-width:44ch}
.nf .hub{text-align:left;max-width:760px;margin:2rem auto 0}

/* ——— shared with the homepage (2026-08 redesign) ——— */
.lab{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.recap{list-style:none;margin-top:clamp(2.4rem,5vw,3.4rem)}
.recap li{border-top:1px solid var(--line);padding:.95rem 0;font-size:.95rem;color:var(--ink-soft)}
.recap li:last-child{border-bottom:1px solid var(--line)}
.recap strong{color:var(--ink);font-weight:650}
/* .pill moved its movement from :hover to :active when it became the same
   button as .btn-rec, so it is suppressed in the same place .btn-rec's is. */
@media (prefers-reduced-motion:reduce){.btn-rec:active,.pill:active{transform:none}}