/*
 * The film - shared by the /faq hero and by the video render.
 *
 * Every rule is scoped under .film. The video wrapper can afford bare `h1` and
 * `body` selectors; the /faq page cannot, because the film sits inside a real
 * page whose own h1 must not inherit a 92px display size. One scope keeps a
 * single stylesheet honest for both.
 *
 * Custom properties come from render() rather than from here: they are all
 * derived from the frame's short edge, so the same layout serves 16:9, 4:5 and
 * 9:16 without a second set of rules.
 */
.film {
  position: relative;
  overflow: hidden;
  color: var(--film-text);
  /* Stated rather than inherited. body{font-family} used to supply this when the
     film was one standalone file; scoping it took that away and every element
     without a `font:` shorthand silently fell back to the browser serif. On the
     page it would instead inherit whatever the site sets, which is the same
     drift in the other direction. */
  font-family: var(--film-sans);
  background: radial-gradient(120% 80% at 50% -10%, #171232 0%, #0a0b18 45%, var(--film-ink) 100%);

  --sky-200:#bfe0f7; --sky-300:#9ccdf1; --sky-400:#77b5e8; --sky-900:#0f2438;
  --lilac-400:#ab92d4; --pink-400:#d98fb8;
  --film-ink:#080c13; --film-text:#e9eff6; --film-2:#9dafc2; --film-3:#63758a;
  --film-ramp:linear-gradient(100deg,var(--sky-400),var(--sky-300) 34%,var(--lilac-400) 74%,var(--pink-400));
  --film-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  --film-mono:ui-monospace,"SF Mono",Menlo,monospace;
}
.film * { box-sizing: border-box; }
.film .f-scene { position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; opacity:0; }

/* A hairline of the ramp along the top and the mark bottom-left, both held for
   the whole run so any single frame is recognisably this site. */
.film .f-ramp { position:absolute; inset:0 0 auto; height:4px; background:var(--film-ramp); }
.film .f-wm { position:absolute; left:var(--pad); bottom:var(--wmBot);
  font:700 var(--wm) var(--film-sans); letter-spacing:-.02em; color:var(--film-text); opacity:.9; }
.film .f-wm i { display:block; font:400 var(--wmSub) var(--film-mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--film-3); font-style:normal; margin-top:.25em; }

.film .f-kicker { font:600 var(--kick) var(--film-mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--sky-300); margin-bottom:.7em; }
.film h1 { margin:0; font-size:var(--h1); line-height:1.02; letter-spacing:-.035em;
  font-weight:700; text-wrap:balance; max-width:var(--measure); color:var(--film-text); }
.film h1 em { font-style:normal; background:var(--film-ramp); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.film p.f-sub { margin:.65em 0 0; font-size:var(--sub); line-height:1.45;
  color:var(--film-2); max-width:var(--measure); }

.film .f-price-row { display:flex; align-items:baseline; gap:var(--gap); margin-top:.5em;
  flex-wrap:wrap; }
.film .f-price { font-size:var(--big); font-weight:700; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; }
.film .f-price.f-was { color:var(--film-3); text-decoration:line-through;
  text-decoration-thickness:.06em; font-size:var(--bigWas); }
.film .f-tag { display:inline-block; padding:.3em .8em; border-radius:99px;
  font:700 var(--tag) var(--film-sans); letter-spacing:.04em; }

.film .f-rungs { display:flex; flex-direction:column; gap:var(--rungGap); margin-top:.4em;
  /* Capped, or margin-left:auto on the count throws it to the far edge of a
     1920 frame and it stops reading as belonging to its label. */
  max-width:var(--measure); }
.film .f-rung { display:flex; align-items:center; gap:var(--gap); }
.film .f-rung b { flex:none; width:var(--rungDot); height:var(--rungDot); border-radius:99px; }
.film .f-rung span { font-size:var(--rungTxt); font-weight:600; }
.film .f-rung i { font-style:normal; font:var(--rungN) var(--film-mono); color:var(--film-3);
  margin-left:auto; font-variant-numeric:tabular-nums; }

.film .f-shops { display:flex; flex-wrap:wrap; gap:var(--shopGap); margin-top:.5em;
  /* 30ch wrapped fifteen shop names into a ragged one-per-line column. The
     measure is the frame's, so the same list reads as tidy rows at 16:9 and as
     a taller block at 9:16. */
  max-width:var(--measure); }
.film .f-shops span { font-size:var(--shop); color:var(--film-2); white-space:nowrap; }
.film .f-shops span.f-on { color:var(--sky-200); }

.film .f-stat { font-size:var(--big); font-weight:700; letter-spacing:-.04em;
  background:var(--film-ramp); -webkit-background-clip:text; background-clip:text;
  color:transparent; font-variant-numeric:tabular-nums; }
.film .f-url { font:700 var(--url) var(--film-sans); letter-spacing:-.01em; }