/* ===========================================================================
   NORTA landing page
   ---------------------------------------------------------------------------
   The palette here is lifted from the film, not from the app. The app's own
   tokens live in apps/web/src/app/globals.css and the two must not be mixed -
   see DESIGN.md. Three palettes exist in this product and they stay apart:
   app chrome, customer brand (inside a banner), and this, the marketing skin.

   The page ground is the SAME cream as the film's own background, which is what
   lets the hero video sit on the page with no frame, no shadow and no rounded
   corner and still look like part of the page rather than a box on it. If you
   change --paper, re-sample the film or that illusion breaks.
   ======================================================================== */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/spacemono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/spacemono-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Sampled from the film. --paper is the film's own background. */
  --paper: #efeae3;
  --paper-raised: #fbf9f6;
  --ink: #17181a;
  --ink-soft: #645f58;
  --ink-faint: #9a948b;
  --line: #e0d8cd;
  --line-strong: #cfc6b9;

  /* The blue of the film's chapter numbers and the app's own accent. */
  --accent: #2b4de0;
  --accent-deep: #1b34a8;

  /* The film's one gradient: blue, violet, magenta, coral. */
  --grad: linear-gradient(97deg, #2b3fe8 0%, #6a4bdd 36%, #b05fae 68%, #ef7f5f 100%);

  /* The soft blooms the film floats everything on. */
  --bloom-peach: #f3cbb2;
  --bloom-lilac: #ded0ec;
  --bloom-sky: #d9e2ef;

  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* --------------------------------------------------------------- scale --
     Everything below is fluid, with a floor and a ceiling. The two that matter:

     --wrap keeps GROWING past a laptop instead of freezing, so a 2560 screen
     is not an 1180px ribbon in a sea of cream. Its floor sits above most
     laptop widths, which is harmless: .wrap is `width: 100%` and --wrap only
     caps it.

     --film-reserve is the vertical room the hero keeps clear for the topbar.
     It is deliberately small - the control pills overlay the film rather than
     sitting under it - because the film is sized from the height LEFT OVER, so
     every pixel reserved here costs 16/9 pixels of width. At a flat 190px a
     1366x768 laptop got a 1028px-wide film on a 1366px screen. */
  --wrap: clamp(1180px, 74vw, 1560px);
  --gut: clamp(18px, 4.4vw, 80px);
  /* vh here, svh below. A custom property cannot fall back by declaring it
     twice - its value is not validated at parse time, so the svh version would
     win everywhere and then fail at use, taking the vh line with it. @supports
     is the only honest way to do this one. */
  --film-reserve: clamp(76px, 11vh, 112px);
}

@supports (height: 1svh) {
  :root { --film-reserve: clamp(76px, 11svh, 112px); }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* The fixed topbar must not cover an anchored heading. */
  scroll-padding-top: 86px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(16px, 1.05vw, 19px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* The blooms. Fixed, so the whole page floats on one light rather than each
   section carrying its own. */
body::before {
  content: "";
  position: fixed;
  inset: -20vh -10vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(44vw 40vw at 22% 18%, var(--bloom-peach) 0%, transparent 62%),
    radial-gradient(50vw 44vw at 86% 36%, var(--bloom-lilac) 0%, transparent 64%),
    radial-gradient(40vw 36vw at 50% 88%, var(--bloom-sky) 0%, transparent 60%),
    radial-gradient(38vw 34vw at 8% 76%, var(--bloom-lilac) 0%, transparent 62%);
  opacity: 0.42;
  filter: blur(14px);
}

img, video, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  font-size: 0.85em;
}
.skip:focus { left: 0; }

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- the type */

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* A gradient fill cannot be read by a contrast checker, so the text keeps a
     solid fallback wherever background-clip is unsupported. */
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad { color: var(--accent); background: none; }
}

.eyebrow {
  font-family: var(--mono);
  font-size: clamp(10px, 0.72vw, 13px);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 18px;
}
.eyebrow__n { color: var(--accent); margin-right: 10px; }

/* ------------------------------------------------------------------ topbar */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    backdrop-filter 0.25s var(--ease);
  border-bottom: 1px solid transparent;
}
.topbar.is-stuck {
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent);
}
.topbar__logo { color: var(--ink); display: block; }
.topbar__logo img { width: 128px; height: auto; }

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar__nav > a:not(.btn) {
  font-size: 0.88em;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.15s var(--ease);
}
.topbar__nav > a:not(.btn):hover { color: var(--ink); }

@media (max-width: 780px) {
  .topbar__nav > a:not(.btn) { display: none; }
}

/* ----------------------------------------------------------------- buttons */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 0.88em;
  font-weight: 600;
  line-height: 1;
  padding: 0.8em 1.4em;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease),
    border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--solid { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn--solid:hover { --btn-bg: #000; }

.btn--ghost {
  --btn-fg: var(--ink);
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--paper-raised) 60%, transparent);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--lg { font-size: 0.97em; padding: 0.95em 1.7em; }

/* Declared after .btn so it wins on source order rather than needing !important. */
@media (max-width: 780px) {
  .topbar__login { display: none; }
  .topbar .btn { font-size: 0.85em; padding: 0.72em 1.15em; }
}

@media (max-width: 420px) {
  .topbar { padding-block: 12px; }
  .topbar__logo img { width: 98px; }
  .topbar .btn { font-size: 0.8em; padding: 0.68em 1em; }
}

/* -------------------------------------------------------------------- film */

.film {
  position: relative;
  min-height: 100vh;      /* fallback first, for anything without svh */
  min-height: 100svh;
  display: grid;
  place-items: center;
  /* Only the topbar is reserved for; the control pills overlay the film. */
  padding: var(--film-reserve) 0 clamp(34px, 5vh, 58px);
  /* Flat --paper, painted OVER the page blooms. The film carries its own
     blooms; letting the page's show through around it made the video read as
     a rectangle pasted onto a differently-lit page. */
  background: var(--paper);
}

/* The stage carries the sizing law, not the video, so the overlaid controls
   anchor to the FILM's corner rather than the page's. Putting it on the video
   and `width: max-content` here would be circular - the video's 100% would
   resolve against a box sized by the video. */
.film__stage {
  position: relative;
  width: min(100%, calc((100vh - var(--film-reserve)) * 16 / 9));
  width: min(100%, calc((100svh - var(--film-reserve)) * 16 / 9));
  display: grid;
  place-items: center;
}

/* No frame, no shadow, no radius on purpose: the film's own ground is --paper,
   so an unframed video reads as the page itself animating. A card treatment
   here would turn it back into "a video embedded on a website". */
.film__video {
  /* The box is EXACTLY 16:9, never merely capped at it. With `max-height` doing
     the limiting, the element stayed wider than the film and object-fit letter-
     boxed it against the element's own background - which is what drew a visible
     rectangle around the video. Sizing the width from the available height
     leaves nothing to letterbox. */
  /* The stage above already resolved how big the film may be: fill the page
     width, or whatever 16:9 fits in the height left after --film-reserve. */
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  background: var(--paper);
  /* A small feather so the film's own background wash dissolves into the page
     instead of ending on a line. The film keeps its content inside a 5% margin,
     so this eats none of it. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 0.9%, #000 99.1%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 1.1%, #000 98.9%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 0.9%, #000 99.1%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 1.1%, #000 98.9%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.film__poster-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  display: flex;
  align-items: center;
  gap: 12px;
  font: inherit;
  font-size: 0.88em;
  font-weight: 600;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper-raised) 86%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 14px 24px 14px 20px;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}
.film__poster-play:hover { transform: scale(1.03); }
.film__poster-play-icon {
  width: 0;
  height: 0;
  border-left: 13px solid var(--ink);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* Over the film's bottom-right corner, where the film itself keeps nothing -
   its own progress bar is centred. Sitting BELOW the video instead cost the
   hero 16/9 pixels of width for every pixel of height it took. */
.film__controls {
  position: absolute;
  right: clamp(10px, 1.6%, 28px);
  bottom: clamp(10px, 2.4%, 26px);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: clamp(9px, 0.7vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper-raised) 72%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 15px;
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.pill:hover { color: var(--ink); border-color: var(--line-strong); }
.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: background 0.15s var(--ease);
}
.pill[aria-pressed="true"] .pill__dot { background: var(--accent); }

.film__cue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  translate: -50% 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}
.film__cue span {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  rotate: 45deg;
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(-2px); opacity: 0.4; }
  50%      { transform: translateY(3px);  opacity: 1; }
}

/* A 16:9 film in a portrait viewport can never fill it, so stop asking the hero
   to be a full screen: at 834x1112 a forced 100svh left 640px of empty cream
   under a 469px-tall film. Keyed on the viewport's own shape rather than a width,
   because that is the thing that actually decides it. */
@media (max-aspect-ratio: 1 / 1) {
  .film {
    min-height: auto;
    padding: calc(var(--film-reserve) + 12px) 0 clamp(26px, 4vh, 48px);
  }
  .film__cue { display: none; }
}

/* Phones: the pills are bigger relative to the film than the film can carry, so
   they come out from over it and sit underneath. */
@media (max-width: 720px) {
  .film__controls {
    position: static;
    justify-content: center;
    margin-top: 20px;
  }
}

/* --------------------------------------------------------------- statement */

.statement {
  padding: clamp(70px, 11vw, 150px) 0 clamp(60px, 9vw, 120px);
  text-align: center;
}
.statement__h {
  margin: 0;
  font-size: clamp(36px, 7.4vw, 132px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.statement__lede {
  margin: 28px auto 0;
  max-width: 54ch;
  font-size: clamp(16px, 1.55vw, 24px);
  color: var(--ink-soft);
  text-wrap: pretty;
}
.statement__cta {
  margin-top: 38px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- chapters */

.chapter { padding: clamp(60px, 9vw, 118px) 0; }

.chapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
}
.chapter__grid--flip .chapter__text { order: 2; }
.chapter__grid--flip .chapter__visual { order: 1; }

@media (max-width: 900px) {
  .chapter__grid { grid-template-columns: 1fr; }
  .chapter__grid--flip .chapter__text,
  .chapter__grid--flip .chapter__visual { order: initial; }
}

.chapter__head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.chapter__head--center { margin-inline: auto; text-align: center; }

.chapter__h {
  margin: 0;
  font-size: clamp(26px, 3.7vw, 60px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
/* The two-column sections give the heading roughly a third of the page, which
   the full-width scale overflows into three and four lines. */
.chapter__grid .chapter__h { font-size: clamp(24px, 2.9vw, 46px); }

.chapter__body {
  margin: 20px 0 0;
  max-width: 58ch;
  font-size: clamp(15px, 1.25vw, 20px);
  color: var(--ink-soft);
  text-wrap: pretty;
}
.chapter__head--center .chapter__body { margin-inline: auto; }

/* Screenshots out of the film. No heavy card: a hairline and a soft lift, so
   they sit on the page the way the film's own panels do. */
.shot { margin: 0; }
.shot img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.04), 0 18px 48px -24px rgba(40, 30, 20, 0.22);
}
.shot--wide { max-width: min(100%, 1400px); margin-inline: auto; }

/* ------------------------------------------------- 01: the format cluster */

.formats {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  align-items: end;
}

.fmt { margin: 0; }
.fmt figcaption {
  margin-top: 9px;
  font-family: var(--mono);
  font-size: clamp(8px, 0.62vw, 12px);
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  text-align: center;
}

/* Each card is the real aspect ratio of the format it is labelled with. */
.fmt__card {
  width: 100%;
  border-radius: 5px;
  background:
    linear-gradient(135deg, #8a3fe0 0%, #a74ae0 48%, #c452c8 100%);
  box-shadow: 0 10px 26px -14px rgba(90, 40, 140, 0.55);
  position: relative;
  overflow: hidden;
}
/* The pink call-to-action pill the demo banners carry. */
.fmt__card::after {
  content: "";
  position: absolute;
  left: 11%;
  bottom: 13%;
  width: 46%;
  height: 13%;
  min-height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8179b, #f446b4);
}

.fmt--mpu  { grid-column: span 4; }
.fmt--mpu  .fmt__card { aspect-ratio: 300 / 250; }
.fmt--hpu  { grid-column: span 3; }
.fmt--hpu  .fmt__card { aspect-ratio: 300 / 600; }
.fmt--bb   { grid-column: span 5; }
.fmt--bb   .fmt__card { aspect-ratio: 970 / 250; }
.fmt--lb   { grid-column: span 5; }
.fmt--lb   .fmt__card { aspect-ratio: 728 / 90; }
.fmt--mob  { grid-column: span 4; }
.fmt--mob  .fmt__card { aspect-ratio: 320 / 100; }

.fmt--hpu .fmt__card::after { left: 14%; width: 62%; height: 5%; bottom: 9%; }
.fmt--lb  .fmt__card::after,
.fmt--mob .fmt__card::after { left: 58%; width: 32%; height: 34%; bottom: 33%; }
.fmt--bb  .fmt__card::after { left: 60%; width: 28%; height: 22%; bottom: 20%; }

.formats__note {
  margin: 22px 0 0;
  font-family: var(--mono);
  font-size: clamp(9px, 0.66vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

/* Below this the 12-column split makes every card a postage stamp, so the
   cluster drops to six columns and each format takes a bigger share. */
@media (max-width: 620px) {
  .formats { grid-template-columns: repeat(6, 1fr); gap: 10px; }
  .fmt figcaption { letter-spacing: 0.08em; }
  .fmt--mpu { grid-column: span 3; }
  .fmt--bb  { grid-column: span 3; }
  .fmt--lb  { grid-column: span 4; }
  .fmt--mob { grid-column: span 2; }
  .fmt--hpu { grid-column: span 2; }
}

/* ------------------------------------------------ 03: the connect card */

.connect-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  max-width: 470px;
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.04), 0 24px 56px -30px rgba(40, 30, 20, 0.3);
}
.connect-card__label {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: clamp(9px, 0.6vw, 11px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.connect-card__row { display: flex; align-items: center; gap: 13px; }
.connect-card__badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  flex: none;
}
.connect-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.connect-card__text strong { font-size: 0.88em; font-weight: 600; }
.connect-card__text em {
  font-style: normal;
  font-size: 0.78em;
  color: var(--ink-soft);
}
.connect-card__btn {
  margin-left: auto;
  flex: none;
  background: var(--accent);
  color: #fff;
  font-size: 0.78em;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
}

/* ------------------------------------------------------- 07: the channels */

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.7em 1.3em;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 500;
  box-shadow: 0 10px 26px -20px rgba(40, 30, 20, 0.4);
}
.chip span { color: #15935f; font-size: 0.82em; }

/* -------------------------------------------------------------------- demo */

.demo { padding: clamp(60px, 9vw, 120px) 0 clamp(70px, 10vw, 130px); }
.demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(36px, 5vw, 96px);
  align-items: start;
}
@media (max-width: 900px) { .demo__grid { grid-template-columns: 1fr; } }

.demo__h {
  margin: 0;
  font-size: clamp(26px, 3.7vw, 60px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.demo__h--sm { font-size: clamp(24px, 3vw, 34px); }

.form {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(22px, 3.4vw, 34px);
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.04), 0 26px 60px -34px rgba(40, 30, 20, 0.32);
}

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 0.8em;
  font-weight: 600;
  margin-bottom: 7px;
}
.field__opt {
  font-weight: 400;
  color: var(--ink-faint);
  font-size: 0.92em;
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.88em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 11px 13px;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus,
.field textarea:focus { background: #fff; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #b4472e; }

.field__error {
  margin: 6px 0 0;
  font-size: 0.78em;
  color: #a8412a;
}

/* Hidden from the eye, the screen reader and the tab order - a bot filling it
   in is the only way it ever gets a value. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__submit { width: 100%; margin-top: 6px; }

.form__status {
  margin: 14px 0 0;
  font-size: 0.85em;
  min-height: 1lh;
}
.form__status[data-state="ok"]   { color: #15704b; }
.form__status[data-state="err"]  { color: #a8412a; }

.form__small {
  margin: 14px 0 0;
  font-size: 0.74em;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------ footer */

.foot {
  border-top: 1px solid var(--line);
  padding: 44px 0 56px;
}
.foot__grid {
  display: flex;
  align-items: center;
  gap: 22px 32px;
  flex-wrap: wrap;
}
.foot__logo { color: var(--ink); display: block; }
.foot__logo img { width: 116px; height: auto; }
.foot__tag { margin: 0; font-size: 0.88em; font-weight: 500; }
.foot__links { margin-left: auto; display: flex; gap: 20px; }
.foot__links a {
  font-size: 0.85em;
  color: var(--ink-soft);
  text-decoration: none;
}
.foot__links a:hover { color: var(--ink); }
.foot__mark {
  width: 100%;
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: clamp(9px, 0.6vw, 11px);
  letter-spacing: 0.3em;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------ reveal */

/* Scoped to .js (set by an inline script in <head>) so that with scripting off
   the sections are simply visible rather than permanently transparent. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .film__cue span { animation: none; }
  .btn:hover, .film__poster-play:hover { transform: none; }
}

/* ------------------------------------------------------------ language pick
   Two real links to two real URLs, not a JS toggle - so both languages are
   indexable and the picker works with scripting off. Deliberately NOT inside
   the `@media (max-width: 780px)` rule that hides the text nav links: the
   whole point of a language picker is that someone on the wrong language can
   find it, and a phone is exactly where they will be. */
.langpick {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.72em;
  letter-spacing: 0.06em;
  margin-right: 4px;
}
.langpick a {
  padding: 6px 10px;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.langpick a:hover { color: var(--ink); }
/* The current language reads as selected rather than as a link to here. */
.langpick a[aria-current] {
  background: var(--ink);
  color: var(--paper);
}
.langpick a[aria-current]:hover { color: var(--paper); }

/* ------------------------------------------------------- page header (detail)
   The detail page has no film, so its statement is the first thing under the
   FIXED topbar and has to clear it on its own. */
.statement--page {
  padding-top: clamp(130px, 14vw, 200px);
}
/* .statement is already text-align: center, so the eyebrow centres with it. */

/* --------------------------------------------------------- topbar at 320px
   The lockup is a flex item in a row that also holds the language picker and
   the demo button, and `flex: 0 1 auto` let it absorb every shortfall: at
   320px it was compressed to 42x9 and unreadable while nothing technically
   overflowed. It now refuses to shrink and scales on its own curve instead,
   and the rest of the row gives up the millimetres. */
.topbar__logo { flex: none; }
.topbar__logo img {
  width: clamp(104px, 30vw, 150px);
  height: auto;
}

/* 38px tall rather than 30: the picker is the one control a visitor on the
   wrong language has to hit, and it is the smallest thing in the bar. */
.langpick a { padding: 10px 11px; }

@media (max-width: 420px) {
  .topbar { gap: 10px; }
  .topbar__nav { gap: 6px; }
  .langpick a { padding: 10px 9px; }
  .topbar__nav .btn--solid { padding-left: 13px; padding-right: 13px; }
}

/* 320px is the floor this page is held to, and at exactly that width the row
   is 17px too wide once the lockup refuses to shrink. The millimetres come off
   the chrome rather than off the logo or the picker: those are the two things
   someone actually has to read and hit. */
@media (max-width: 360px) {
  .topbar { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .topbar__nav { gap: 4px; }
  .topbar__logo img { width: 92px; }
  .langpick a { padding: 10px 7px; }
  .topbar__nav .btn--solid { padding-left: 11px; padding-right: 11px; font-size: 0.82em; }
}