/* ==========================================================================
   AME · Autonomous Matching Engine — site styles
   Brand system: AME_BRANDPACK (black space · chartreuse · teal · dot language)
   Type: Libre Baskerville (display) · Onest (body) · Bitcount Mono (accents)
   ========================================================================== */

/* ---------- Fonts (self-hosted from AME_BRANDPACK) ---------- */
@font-face {
  font-family: "Libre Baskerville";
  src: url("fonts/LibreBaskerville-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("fonts/LibreBaskerville-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("fonts/Onest-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Authored light: opts out of mobile-browser auto-dark inversion of the
     white sections (paired with <meta name="color-scheme" content="light">). */
  color-scheme: light;
  /* Primary palette (verified against AME_BRANDPACK/COLOR) */
  --black: #000000;
  --white: #FFFFFF;
  --gray: #E7E7E7;
  --chartreuse: #F0FA78;
  --teal: #00CEBA;
  --teal-deep: #00A08D;
  /* Text-on-light teal: 5.25:1 on white (WCAG 2.2 AA). --teal-deep (3.27:1)
     stays for decorative/large uses only, never body-size text on light. */
  --teal-ink: #007A6C;

  /* Derived, on-brand neutrals */
  --ink: #0B0B0B;                 /* body text on light */
  --mut-light: #4B4B4B;           /* secondary text on light  (8.9:1 on #fff) */
  --mut-dark: #A8A8A8;            /* secondary text on black  (5.6:1 on #000) */
  --hair-dark: rgba(231, 231, 231, 0.14);
  --hair-light: rgba(0, 0, 0, 0.12);

  /* Type */
  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "Onest", "Helvetica Neue", Arial, sans-serif;
  --mono: "Bitcount Mono Single", "Bitcount Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Layout */
  --wrap: 1160px;
  --gutter: clamp(20px, 4.5vw, 56px);
  --head-h: 68px;

  /* z-scale: content < header < skip-focus */
  --z-header: 20;
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 12px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--black);
  color: var(--gray);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-weight: 380;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
/* the hidden attribute must win over any display set by a class (e.g. .btn) */
[hidden] { display: none !important; }
a { color: inherit; }
em { font-style: italic; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

::selection { background: var(--chartreuse); color: var(--black); }
.sec-accent ::selection { background: var(--black); color: var(--chartreuse); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Shared layout ---------- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sec { padding-block: clamp(96px, 14vw, 176px); }
.sec-dark { background: var(--black); color: var(--gray); }
.sec-light { background: var(--white); color: var(--ink); }
.sec-accent { background: var(--chartreuse); color: var(--black); }

/* Display type */
.d2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.25rem + 2.7vw, 3.35rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.sec-dark .d2 { line-height: 1.22; }
.lead {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  line-height: 1.5;
  font-weight: 440;
  max-width: 34ch;
  text-wrap: pretty;
}
.sec p { max-width: 62ch; }
.quiet { color: var(--mut-light); }
.sec-dark .quiet { color: var(--mut-dark); }

/* ---------- Reveal system ----------
   Content is VISIBLE by default. The lowered/transparent start state is
   armed only after JS confirms it can drive AND guarantee the reveal
   (html.reveal-on). If that never happens — observer suspended, headless
   render, JS disabled — .r elements simply stay at their natural resting
   values. Nothing can ever ship blank. When an entrance finishes the .r
   class is removed, so its eased end values become the natural rest values
   (end points = start points of rest). */
.reveal-on .r {
  opacity: 0;
  transform: translateY(22px);
}
.reveal-on .r.in {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-on .r { opacity: 1; transform: none; transition: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 560;
  font-size: 0.985rem;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 17px 30px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    transform 160ms var(--ease-out),
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  .btn:active { transform: scale(0.97); }
}

.btn-solid { background: var(--chartreuse); color: var(--black); }
.btn-ghost { border: 1px solid rgba(231, 231, 231, 0.38); color: var(--gray); }
.btn-dark  { background: var(--black); color: var(--chartreuse); }
.btn-big   { padding: 21px 40px; font-size: 1.06rem; }

@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover { background: var(--white); }
  .btn-ghost:hover { border-color: var(--gray); background: rgba(231, 231, 231, 0.08); }
  .btn-dark:hover  { color: var(--white); }
}

/* ---------- Header ---------- */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--head-h);
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  padding-inline: var(--gutter);
  color: var(--gray);
  background: transparent;
  transition:
    color 400ms ease,
    background-color 400ms ease;
}
/* Bottom hairline fades on the GPU via opacity, not an animated box-shadow. */
.site-head::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: rgba(128, 128, 128, 0.16);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.site-head.scrolled::after { opacity: 1; }
.site-head[data-theme="light"] { color: var(--ink); }
.site-head[data-theme="accent"] { color: var(--black); }

.site-head.scrolled[data-theme="dark"]   { background: rgba(0, 0, 0, 0.72); }
.site-head.scrolled[data-theme="light"]  { background: rgba(255, 255, 255, 0.82); }
.site-head.scrolled[data-theme="accent"] { background: rgba(240, 250, 120, 0.88); }
.site-head.scrolled {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-mark { width: 26px; height: auto; flex: none; }
.brand-marks { position: relative; display: inline-flex; flex: none; }
.brand-marks .mk-y { transition: opacity 400ms ease; }
.brand-marks .mk-k {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms ease;
}
.site-head[data-theme="accent"] .mk-y { opacity: 0; }
.site-head[data-theme="accent"] .mk-k { opacity: 1; }
.brand-word { height: 15px; width: auto; flex: none; display: block; }

.site-nav {
  display: flex;
  gap: clamp(16px, 2.6vw, 34px);
  margin-left: auto;
}
.site-nav a {
  font-size: 0.92rem;
  font-weight: 460;
  text-decoration: none;
  opacity: 0.82;
  transition: opacity 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { opacity: 1; }
}

.btn-head {
  padding: 11px 22px;
  font-size: 0.9rem;
  border: 1px solid currentColor;
  color: inherit;
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .site-head[data-theme="dark"] .btn-head:hover   { background: var(--chartreuse); border-color: var(--chartreuse); color: var(--black); }
  .site-head[data-theme="light"] .btn-head:hover  { background: var(--black); border-color: var(--black); color: var(--chartreuse); }
  .site-head[data-theme="accent"] .btn-head:hover { background: var(--black); border-color: var(--black); color: var(--chartreuse); }
}

/* ---------- 1 · Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  background: var(--black);
  overflow: hidden;
}
.hero-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: calc(var(--head-h) + 48px) var(--gutter) 96px;
}
.hero-mark { width: clamp(44px, 5vw, 62px); height: auto; margin-bottom: clamp(28px, 4.5vh, 52px); }
.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.72rem, 0.9rem + 3.4vw, 3.7rem);
  line-height: 1.24;
  letter-spacing: -0.008em;
  color: var(--white);
  text-wrap: balance;
}
.hero-title em { color: var(--chartreuse); font-style: italic; }
.hero-sub {
  margin-top: clamp(22px, 3.4vh, 36px);
  max-width: 58ch;
  color: var(--mut-dark);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.14rem);
  text-wrap: pretty;
}
.hero-cta {
  margin-top: clamp(30px, 4.6vh, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- 2 · What AME is ---------- */
.what-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.what-copy p { margin-top: 1.35rem; }
.what-copy .lead { margin-top: clamp(26px, 3.4vw, 40px); }
.what-copy .quiet { font-size: 0.98rem; }
.what-figure { margin: 0; }
.what-figure img {
  width: min(100%, 440px);
  margin-inline: auto;
}

/* ---------- 3 · Why AME exists ---------- */
.why { background: var(--black); }
.why-inner { max-width: 880px; }
.why-belief {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.1rem);
  line-height: 1.3;
  color: var(--white);
  max-width: 24ch;
  text-wrap: balance;
}
.why-belief em { color: var(--chartreuse); }
.why-body {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.why-body p { max-width: 46ch; color: var(--gray); }

/* ---------- 4 · How it works ---------- */
.steps {
  list-style: none;
  margin: clamp(44px, 6vw, 80px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(26px, 3.6vw, 44px);
}
.steps li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(16px, 3vw, 36px);
}
.step-n {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(1.17rem, 1.05rem + 0.5vw, 1.35rem);
  color: var(--teal-ink);
  letter-spacing: 0.06em;
}
.step-t {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.28rem, 1rem + 1.4vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* ---------- 5 · The Field (scroll-driven story) ---------- */
.universe {
  position: relative;
  background: var(--black);
  color: var(--gray);
}
/* Tall track gives the pinned stage room to scrub through the sequence. */
.universe-track { position: relative; height: 460vh; }
.universe-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.universe-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.universe-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(48px, 10vh, 120px);
  padding-inline: var(--gutter);
  max-width: var(--wrap);
  margin-inline: auto;
  pointer-events: none;
}
.universe-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: clamp(14px, 2vw, 22px);
}
/* Captions share one box and cross-fade; JS drives opacity per phase.
   Each caption is anchored to the bottom so longer copy grows UPWARD into
   the open field above, never down past the fold. */
.ucaps { position: relative; min-height: clamp(170px, 24vh, 210px); }
.ucap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transform: translateY(14px);
  max-width: 30ch;
}
.ucap-line {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
  text-wrap: balance;
  max-width: 24ch;
}
.ucap-sub {
  margin-top: clamp(10px, 1.4vw, 16px);
  color: var(--mut-dark);
  font-size: clamp(0.96rem, 0.9rem + 0.3vw, 1.08rem);
  max-width: 32ch;
}
/* The static fallback is hidden whenever the animated stage is active. */
.universe-static {
  padding-block: clamp(96px, 14vw, 160px);
  display: none;
}
.universe-static p {
  margin-top: clamp(20px, 3vw, 32px);
  color: var(--gray);
  max-width: 60ch;
}
.no-scrollstory .universe-track { display: none; }
.no-scrollstory .universe-static { display: block; }

/* ---------- 6 · Who AME is for ---------- */
.roles {
  list-style: none;
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(18px, 2.6vw, 34px);
  row-gap: clamp(10px, 1.8vw, 22px);
  max-width: 21em;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 0.95rem + 1.8vw, 2.4rem);
  line-height: 1.32;
  letter-spacing: -0.005em;
}
.roles li { position: relative; }
.roles li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  border-radius: 50%;
  background: var(--teal);
  margin-left: clamp(18px, 2.6vw, 34px);
  vertical-align: 0.08em;
}
.roles-anchor {
  margin-top: clamp(36px, 5vw, 56px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  color: var(--ink);
}
.who .quiet { margin-top: 1rem; font-size: 0.98rem; }

/* ---------- 7 · Beta ---------- */
.beta-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.beta-mark { width: clamp(48px, 6vw, 72px); height: auto; margin-bottom: clamp(30px, 4.5vw, 48px); }
.beta .d2 { max-width: 16ch; }
.beta-lead {
  margin-top: clamp(22px, 3vw, 34px);
  max-width: 44ch;
  font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.2rem);
  color: rgba(0, 0, 0, 0.78);
  text-wrap: pretty;
}
.beta-note {
  margin-top: clamp(16px, 2vw, 22px);
  max-width: 46ch;
  font-size: 0.98rem;
  color: rgba(0, 0, 0, 0.62);
  text-wrap: pretty;
}
.beta .btn-dark { margin-top: clamp(30px, 4.4vw, 46px); }

/* ---------- 8 · Founder / proof ---------- */
.founder-name {
  margin-top: clamp(30px, 4.4vw, 52px);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  line-height: 1.2;
}
.founder-name::after {
  content: "";
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--teal);
  margin-left: 0.28em;
  vertical-align: 0.04em;
}
.founder-cols {
  margin-top: clamp(26px, 3.6vw, 40px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.founder-cols p { max-width: 46ch; }
.founder-cols p + p { color: var(--mut-light); }
/* Each grid cell stacks its own paragraphs, so the copy reads down a
   column instead of zig-zagging across the grid. The grid `gap` above
   separates the two columns; this one sets the rhythm inside one. */
.founder-col {
  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
  align-content: start;
}
/* Only the opening line carries full ink; everything after is secondary,
   matching the original lead-plus-supporting treatment. */
.founder-col p { color: var(--mut-light); }
.founder-col:first-child p:first-child { color: inherit; }
.founder-line {
  margin-top: clamp(36px, 5vw, 60px);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  color: var(--ink);
}

/* ---------- 9 · Film / story ---------- */
.story {
  border-top: 1px solid var(--hair-dark);
  border-bottom: 1px solid var(--hair-dark);
  padding-block: clamp(120px, 18vw, 220px);
}
.story-inner {
  max-width: 860px;
  text-align: center;
  margin-inline: auto;
}
.story-belief {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.7rem);
  line-height: 1.4;
  color: var(--white);
  text-wrap: balance;
}
.story .quiet {
  margin-top: clamp(24px, 3.4vw, 36px);
  font-size: 0.98rem;
  max-width: none;
}

/* ---------- 10 · Final CTA ---------- */
.final { padding-block: clamp(120px, 17vw, 210px); }
.final-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.final-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4.2rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--white);
  max-width: 18ch;
  text-wrap: balance;
}
.final-title em { color: var(--chartreuse); }
.final .btn-big { margin-top: clamp(36px, 5.4vw, 60px); }

/* ---------- Footer ---------- */
.site-foot {
  background: var(--black);
  color: var(--gray);
  border-top: 1px solid var(--hair-dark);
  padding-block: clamp(48px, 7vw, 80px);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: 28px;
}
.site-foot .brand-word { color: var(--gray); }
.foot-line {
  grid-column: 1 / -1;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--mut-dark);
}
.foot-nav { display: flex; gap: 26px; justify-self: end; }
.foot-nav a {
  font-size: 0.9rem;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .foot-nav a:hover { opacity: 1; }
}
.foot-legal {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  color: var(--mut-dark);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .what-grid { grid-template-columns: minmax(0, 1fr); }
  .what-figure { order: -1; }
  .what-figure img { width: min(62vw, 340px); margin-inline: 0; }
  .why-body { grid-template-columns: minmax(0, 1fr); }
  .founder-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .site-nav { display: none; }
  .brand-word { height: 13px; }
  .hero-inner { padding-bottom: 72px; }
  .steps li { grid-template-columns: 52px minmax(0, 1fr); }
  .universe-track { height: 380vh; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-nav { justify-self: start; }
}
@media (max-width: 560px) {
  .btn-head-ghost { display: none; }
}
@media (max-width: 420px) {
  .btn { padding: 15px 24px; }
  .hero-cta .btn-solid, .hero-cta .btn-ghost { flex: 1 1 auto; }
}

/* ==========================================================================
   Additions: skip link · header actions · button variants · what-next ·
   waitlist modal · shared form system (also used by /apply and /film)
   ========================================================================== */

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: var(--z-header);
  transform: translateY(-160%);
  background: var(--chartreuse);
  color: var(--black);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 560;
  font-size: 0.9rem;
  text-decoration: none;
  transition: transform 200ms var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Header actions cluster */
.head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-head-ghost {
  padding: 11px 20px;
  font-size: 0.9rem;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  opacity: 0.9;
}
@media (hover: hover) and (pointer: fine) {
  .btn-head-ghost:hover { opacity: 1; border-color: currentColor; }
}

/* Button variants */
.btn-text {
  padding: 17px 6px;
  background: transparent;
  color: var(--gray);
  gap: 7px;
}
.btn-text span { transition: transform 200ms var(--ease-out); }
.btn-outline-dark {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.4);
  color: var(--black);
}
@media (hover: hover) and (pointer: fine) {
  .btn-text:hover { color: var(--white); }
  .btn-text:hover span { transform: translate(2px, -2px); }
  .btn-outline-dark:hover { border-color: var(--black); background: rgba(0, 0, 0, 0.06); }
}
.hero-cta { align-items: center; }

/* ---------- What happens next ---------- */
.next-grid {
  margin-top: clamp(44px, 6vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}
@media (max-width: 860px) {
  .next-grid { grid-template-columns: minmax(0, 1fr); }
  .next-card { max-width: 40ch; }
}
.next-card {
  border-top: 1px solid var(--hair-dark);
  padding-top: clamp(20px, 2.4vw, 30px);
}
.next-n {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--teal);
}
.next-card h3 {
  margin-top: clamp(16px, 2vw, 26px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  line-height: 1.24;
  color: var(--white);
  letter-spacing: -0.005em;
}
.next-card p {
  margin-top: 0.7rem;
  color: var(--mut-dark);
  font-size: 0.98rem;
}
.next-note {
  margin-top: clamp(40px, 5vw, 64px);
  max-width: 60ch;
  color: var(--gray);
}

/* ---------- Story section additions ---------- */
.story-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: clamp(18px, 2.6vw, 30px);
}
.story .btn-ghost { margin-top: clamp(28px, 3.6vw, 42px); }
.final-sub {
  margin-top: clamp(18px, 2.4vw, 28px);
  color: var(--mut-dark);
  max-width: 46ch;
  margin-inline: auto;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
}
.final-cta, .beta-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.final-cta { justify-content: center; }
.final .final-cta { margin-top: clamp(34px, 4.6vw, 56px); }

/* ---------- Waitlist modal ---------- */
.wl-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(92vh, 860px);
  padding: 0;
  border: none;
  border-radius: 20px;
  background: #0C0C0C;
  color: var(--gray);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  /* The form is taller than the dialog on small screens: the dialog itself
     is the scroll container, and its scroll never chains to the page. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.wl-modal::backdrop {
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference) {
  .wl-modal[open] { animation: wl-in 320ms var(--ease-out); }
}
@keyframes wl-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.wl {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(231, 231, 231, 0.1);
  border-radius: 20px;
}
.wl-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(231, 231, 231, 0.06);
  color: var(--gray);
  cursor: pointer;
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .wl-close:hover { background: rgba(231, 231, 231, 0.14); }
}
.wl-close:active { transform: scale(0.94); }
.wl-kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}
.wl-title {
  margin-top: 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
  line-height: 1.12;
  color: var(--white);
  letter-spacing: -0.01em;
}
.wl-intro {
  margin-top: 12px;
  color: var(--mut-dark);
  font-size: 0.98rem;
  max-width: 42ch;
}
.wl-fields {
  margin-top: clamp(22px, 3vw, 30px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* --------------------------------------------------------------------------
   Waitlist consent block — age attestation, communications notice, optional
   marketing opt-in. Reuses .choice from the apply form so both surfaces read
   the same. The whole label is the hit target, so it clears the WCAG 2.2
   minimum comfortably even though the box itself is 18px.
   -------------------------------------------------------------------------- */
.wl-consents {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
.wl-consent-notice {
  margin: 2px 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--mut-dark);
}
/* Let an inline error wrap onto its own line instead of squeezing the label. */
.wl-consents .choice { flex-wrap: wrap; }
.wl-consents .choice .field-err { flex-basis: 100%; margin-top: 6px; }
.choice[data-error] { border-color: rgba(255, 107, 74, 0.55); }

/* Turnstile mount. Sized by the widget itself; the reserve keeps the modal
   from jumping when the challenge finishes loading. */
.wl-turnstile {
  margin-top: 18px;
  min-height: 65px;
  display: flex;
  justify-content: center;
}
.wl-turnstile[hidden] { display: none; }

/* Application Turnstile — same presentation as the waitlist widget
   (public-application security gate 2026-08-16). */
.apply-turnstile {
  margin-top: 18px;
  min-height: 65px;
  display: flex;
  justify-content: center;
}
.apply-turnstile[hidden] { display: none; }

/* Contract notice under the submit button. Deliberately more legible than
   .wl-fine: counsel requires the Terms and Privacy links be conspicuous and
   reachable from the form, because the liability limitation depends on the
   visitor having had constructive notice of them. */
/* Footer legal links: 2px of vertical padding lifts the hit target from
   21px to 25px at desktop widths, clearing the WCAG 2.2 target-size
   minimum. Mobile already cleared it at 29px. Purely additive — no layout
   or spacing change. */
.foot-nav-legal a { padding-block: 2px; }

.wl-agree {
  margin-top: 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gray);
  text-align: center;
}
.wl-agree a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wl-agree a:hover,
.wl-agree a:focus-visible { color: #fff; }

.wl-submit { margin-top: 22px; width: 100%; }
.wl-fine {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--mut-dark);
  text-align: center;
}
.wl-fine a { color: var(--teal); text-underline-offset: 3px; }

.wl-success { text-align: center; padding-block: clamp(12px, 3vw, 28px); }
/* The success panel is focused programmatically once a submit succeeds, so a
   person arrives here by pressing a button, not by tabbing. Painting a ring
   for that move is noise — and while the target was the <h2>, the ring sat
   tight around the headline text (which wraps to two lines on narrow
   viewports), reading as a stray box drawn around the copy.
   Keyboard users who genuinely tab to the panel still get a real, deliberate
   ring via :focus-visible, matching the site treatment for links and buttons.
   Offset is negative so the ring hugs the inside edge and cannot be clipped
   by the dialog's own padding. */
.wl-success:focus { outline: none; }
.wl-success:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
  border-radius: 8px;
}
.wl-check { color: var(--teal); display: inline-block; margin-bottom: 8px; }
.wl-success .wl-title { margin-top: 6px; }
.wl-success .wl-intro { margin-inline: auto; margin-top: 14px; }
.wl-success .btn { margin-top: 22px; }

/* ---------- Shared form field system ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field-wide { grid-column: 1 / -1; }
.field-label {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gray);
}
.field-label em {
  font-style: normal;
  color: var(--mut-dark);
  font-weight: 400;
  margin-left: 4px;
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--white);
  background: rgba(231, 231, 231, 0.045);
  border: 1px solid rgba(231, 231, 231, 0.16);
  border-radius: 12px;
  padding: 13px 15px;
  width: 100%;
  transition: border-color 200ms ease, background-color 200ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.55; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23A8A8A8' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
  cursor: pointer;
}
.field select:invalid { color: var(--mut-dark); }
.field input::placeholder,
.field textarea::placeholder { color: #6C6C6C; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: rgba(0, 206, 186, 0.05);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; }
.field[data-error] input,
.field[data-error] select,
.field[data-error] textarea { border-color: #FF6B4A; }
.field-err {
  font-size: 0.8rem;
  color: #FF8A6E;
  min-height: 0;
}

/* Forms rendered on a light surface (rare) invert the field ink */
.form-light .field input,
.form-light .field select,
.form-light .field textarea {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.16);
}

@media (max-width: 520px) {
  .wl-fields { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Sub-pages: /apply (beta application) and /film (countdown)
   ========================================================================== */

.page-apply, .page-film { background: var(--black); }

/* Minimal header for sub-pages */
.mini-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
  color: var(--gray);
}
.mini-head::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--hair-dark);
}
.btn-back {
  background: transparent;
  color: var(--mut-dark);
  padding: 10px 4px;
  gap: 8px;
  font-size: 0.92rem;
}
.btn-back span { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn-back:hover { color: var(--gray); }
  .btn-back:hover span { transform: translateX(-3px); }
}

/* ---------- /apply ---------- */
.apply {
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--head-h) + clamp(40px, 7vw, 88px)) var(--gutter) clamp(60px, 9vw, 120px);
}
.apply-grid {
  max-width: 1100px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 92px);
  align-items: start;
}
.apply-aside { position: sticky; top: calc(var(--head-h) + 44px); }
.apply-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}
.apply-h1 {
  margin-top: 18px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 1.3rem + 1.9vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
  text-wrap: balance;
}
.apply-lead { margin-top: 20px; color: var(--mut-dark); max-width: 40ch; }
.apply-aside-steps { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; gap: 14px; }
.apply-aside-steps li {
  display: flex; gap: 14px; align-items: baseline;
  color: var(--mut-dark); font-size: 0.98rem;
  transition: color 300ms ease;
}
.apply-aside-steps li span { font-family: var(--mono); font-size: 0.8rem; color: var(--mut-dark); transition: color 300ms ease; }
.apply-aside-steps li[data-active] { color: var(--white); }
.apply-aside-steps li[data-active] span,
.apply-aside-steps li[data-done] span { color: var(--teal); }

.apply-main { min-width: 0; }
.apply-progress { height: 2px; background: rgba(231, 231, 231, 0.12); border-radius: 2px; overflow: hidden; }
.apply-progress-fill {
  display: block; height: 100%;
  background: var(--chartreuse);
  transform-origin: left;
  transform: scaleX(0.333);
  transition: transform 500ms var(--ease-out);
}
.apply-step-label {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mut-dark);
}
.apply-fs { border: 0; margin: 0; padding: clamp(22px, 3vw, 32px) 0 0; min-inline-size: 0; }
.apply-fs[hidden] { display: none; }
.apply-fs.enter { opacity: 0; transform: translateY(12px); }
.apply-fs.enter.in {
  opacity: 1; transform: none;
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.apply-fs-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  color: var(--white); letter-spacing: -0.005em;
}
.apply-fs-sub { margin-top: 8px; color: var(--mut-dark); font-size: 0.96rem; max-width: 48ch; }
.apply-fields { margin-top: clamp(22px, 3vw, 30px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.apply-stack { margin-top: clamp(22px, 3vw, 30px); display: grid; gap: 20px; }

/* checkbox / radio choice lists */
.choice-group { gap: 12px; }
.choices { display: grid; gap: 10px; }
.choices-radio { grid-auto-flow: column; grid-auto-columns: 1fr; }
.choices-2col { grid-template-columns: 1fr 1fr; }
.apply-hint { margin-top: 16px; font-size: 0.85rem; color: var(--mut-dark); }
.apply-error, .wl-error {
  margin-top: 22px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 107, 74, 0.4);
  border-radius: 12px;
  background: rgba(255, 107, 74, 0.06);
  color: #FF8A6E;
  font-size: 0.92rem;
}
.wl-error { margin-top: 18px; }

/* Lock the page while the waitlist dialog is open (site.js toggles it). */
html.modal-open, html.modal-open body { overflow: hidden; }
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid rgba(231, 231, 231, 0.16);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.choice input {
  width: 18px; height: 18px; margin: 0; flex: none;
  accent-color: var(--teal);
  cursor: pointer;
}
.choice span { font-size: 0.98rem; color: var(--gray); line-height: 1.3; }
.choice:has(input:checked) { border-color: var(--teal); background: rgba(0, 206, 186, 0.06); }
.choice-group[data-error] .choice { border-color: rgba(255, 107, 74, 0.45); }
@media (hover: hover) and (pointer: fine) {
  .choice:hover { border-color: rgba(231, 231, 231, 0.34); }
  .choice:has(input:checked):hover { border-color: var(--teal); }
}
@media (max-width: 520px) {
  .choices-radio { grid-auto-flow: row; }
}
.apply-nav { margin-top: clamp(28px, 4vw, 40px); display: flex; gap: 12px; align-items: center; }
.apply-nav .btn[data-next], .apply-nav .btn[data-submit] { margin-left: auto; }
.apply-success { max-width: 48ch; padding-top: clamp(10px, 3vw, 28px); }
.apply-success .wl-check { color: var(--teal); display: inline-block; margin-bottom: 10px; }
.apply-success h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
  color: var(--white); letter-spacing: -0.01em; line-height: 1.14;
}
.apply-success p { margin-top: 16px; color: var(--mut-dark); }
.apply-success .apply-success-cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .apply-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 6vw, 44px); }
  .apply-aside { position: static; }
  .apply-aside-steps { display: none; }
}
@media (max-width: 640px) {
  .choices-2col { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .apply-fields { grid-template-columns: 1fr; }
}

/* ---------- /film ---------- */
.film {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.film .hero-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film-inner {
  position: relative;
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  padding: calc(var(--head-h) + clamp(48px, 8vh, 90px)) var(--gutter) clamp(60px, 9vw, 100px);
  text-align: center;
}
.film-kicker {
  font-family: var(--mono);
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--teal);
}
.film-title {
  margin-top: 22px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.9rem);
  line-height: 1.12; letter-spacing: -0.012em;
  color: var(--white); text-wrap: balance;
}
.film-belief {
  margin: clamp(22px, 3vw, 32px) auto 0;
  max-width: 42ch;
  color: var(--gray);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.28rem);
  line-height: 1.5;
}
.countdown {
  margin: clamp(34px, 5vw, 56px) auto 0;
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(16px, 4vw, 40px);
}
.cd-unit { display: flex; flex-direction: column; gap: 10px; }
.cd-num {
  font-family: var(--serif); font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem);
  line-height: 1; color: var(--white);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.cd-lab {
  font-family: var(--mono);
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mut-dark);
}
.film-when {
  margin: clamp(18px, 2.4vw, 26px) auto 0;
  color: var(--gray);
  font-size: 0.95rem;
}
.film-tease {
  margin: clamp(30px, 4vw, 44px) auto 0;
  max-width: 52ch; color: var(--mut-dark);
}
/* The synopsis is the one genuinely long-form block on this page. Centring
   suits the title card above it, but at phone widths this paragraph runs to
   eight lines, and centred text gives every one of them a different starting
   x — the eye has to re-find the left edge on each return sweep. Ranging it
   left restores a single entry point. The heading, belief line, countdown and
   premiere time stay centred; only this paragraph changes, and only below the
   560px breakpoint this file already uses. */
@media (max-width: 560px) {
  .film-tease { text-align: left; }
}
.film-note { margin: clamp(30px, 4vw, 44px) auto 0; font-size: 0.95rem; color: var(--mut-dark); }
.film-note a, .film-tease a { color: var(--teal); text-underline-offset: 3px; }
/* Cinema mode — the premiere instant. Everything on the page yields to the
   film: film.js fades the countdown page out (film-fading), flips the body
   to film-live, and fades the film up. Arriving after the instant lands in
   the final state with no transition. Reduced motion swaps instantly. */
.film-inner.film-fading { opacity: 0; transition: opacity 1600ms ease; }
body.film-live .film-inner > *:not(.film-cinema) { display: none; }
body.film-live .mini-foot { display: none; }
body.film-live .film-inner { opacity: 1; }
.film-cinema {
  display: block; width: 100%; max-width: 1080px;
  margin: clamp(24px, 9vh, 96px) auto 0; background: #000;
  opacity: 1; transition: opacity 1400ms ease;
  position: relative;
}
.film-cinema video { display: block; width: 100%; background: #000; }
.film-cinema-enter { opacity: 0; }

/* The film owns the whole browser viewport from the moment the cinema
   opens — this is the presentation on every device, and on iPhone it is
   the ONLY presentation, because handing the film to the native player
   there would paint player chrome over the picture. Native element
   fullscreen, where the browser allows it, is layered on top of this. */
body.film-fullbleed { overflow: hidden; }
body.film-fullbleed .film-cinema {
  position: fixed; inset: 0; z-index: 50;
  max-width: none; margin: 0;
  height: 100dvh;                 /* keeps iOS URL-bar changes from cropping */
  display: block;                 /* see the note on the video rule below */
}
/* The video is absolutely positioned to the stage rather than centred as a
   grid item. As a grid item under place-items:center it is auto-sized, so
   `height:100%` never resolves against the implicit row and the element
   falls back to its intrinsic 1.896:1 height — taller than the viewport on
   any screen wider than 1.896:1, which vertically CROPPED the film on
   landscape phones. Pinning it to the stage box makes object-fit:contain
   letterbox correctly at every aspect ratio. */
body.film-fullbleed .film-cinema video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}

/* In native element fullscreen the stage IS the screen — same pinning. */
.film-cinema:fullscreen { width: 100vw; height: 100vh; background: #000; display: block; }
.film-cinema:fullscreen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.film-cinema:-webkit-full-screen { width: 100vw; height: 100vh; background: #000; display: block; }
.film-cinema:-webkit-full-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Back to website — the only intentional interface during the film.
   Subtle by default, unmistakable on hover or keyboard focus. It sits
   inside the stage so it survives element fullscreen, and it is never
   dimmed or hidden by the idle timer: nobody gets trapped in a
   fourteen-minute film. */
.film-exit {
  position: absolute;
  /* Inside the notch / Dynamic Island / home-indicator insets. In
     landscape the notch takes a side, which is exactly where this sits. */
  top: calc(env(safe-area-inset-top, 0px) + clamp(14px, 2.4vw, 28px));
  left: calc(env(safe-area-inset-left, 0px) + clamp(14px, 2.4vw, 28px));
  z-index: 3;
  display: inline-flex; align-items: center; gap: 0.5rem;
  /* min-height keeps the escape hatch at or above the 44px touch target
     Apple asks for — being hard to tap is the same failure as being absent. */
  min-height: 44px; box-sizing: border-box;
  padding: 0.55rem 1.05rem 0.55rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8125rem; letter-spacing: 0.01em; line-height: 1;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-decoration: none;
  /* Hidden by default: during playback there is NOTHING over the film.
     pointer-events:none while invisible so it cannot swallow the tap that
     is meant to reveal it — an invisible control that eats touches is
     worse than a visible one. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease, color 260ms ease, border-color 260ms ease;
}
/* Revealed for a few seconds by a deliberate tap on the film (film.js). */
.film-cinema.film-chrome .film-exit { opacity: 0.92; pointer-events: auto; }
.film-cinema.film-chrome .film-exit:hover { opacity: 1; color: var(--chartreuse); border-color: rgba(240, 250, 120, 0.5); }
/* Keyboard users are not required to guess: focus reveals it outright,
   independently of the tap-to-reveal timer. */
.film-exit:focus-visible {
  opacity: 1; pointer-events: auto;
  color: var(--chartreuse); border-color: rgba(240, 250, 120, 0.5);
  outline: 2px solid var(--chartreuse); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { .film-exit { transition: none; } }

/* The pre-play poster: fills the whole viewport, POSTER ONLY on cover —
   the experience has already taken the screen before the first tap.
   Slight poster cropping is accepted; the FILM itself keeps
   object-fit: contain and is never cropped or stretched. */
.film-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.film-poster[hidden] { display: none; }

/* The begin gesture — shown only when the browser refuses audible
   autoplay, or after a playback error. Not a player control: no
   triangle, no chrome. The whole stage is the target, and its veil is
   a subtle cinematic darkening over the full-bleed poster — just enough
   to keep TAP TO BEGIN legible, never an opaque curtain. */
.film-begin {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; align-content: center; gap: 1.1rem;
  width: 100%; height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.55));
  border: 0; cursor: pointer; color: var(--white);
  font: inherit;
}
.film-begin[hidden] { display: none; }
.film-begin-mark circle { fill: var(--chartreuse); }
.film-begin-line {
  font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.film-begin:focus-visible { outline: 2px solid var(--chartreuse); outline-offset: -6px; }

/* Cinema stillness: the pointer retires during playback. Back to website
   is deliberately excluded — it keeps its own cursor and visibility. */
.film-cinema.film-idle { cursor: none; }
.film-cinema.film-idle .film-exit { cursor: pointer; }

/* The orientation gate. A 1.896:1 film in an upright phone is a thin
   strip, and AME does not ship the premiere that way — portrait is
   refused outright rather than degraded. Opaque black, so the picture is
   genuinely concealed rather than merely de-emphasised, and completely
   inert: no play button, nothing pressable, nothing that can start the
   film. Rotating is the only way forward.

   Display is decided by the media query alone — the identical query
   string drives the pause/resume logic in film.js, so the picture and the
   playback state can never disagree. No orientation-lock API is used. */
/* film.html opts into viewport-fit=cover for the cinema, which pushes the
   page chrome under the notch unless the insets are re-applied here. The
   countdown page keeps its exact previous layout on devices with no
   insets, because env() falls back to 0. */
.page-film .mini-head {
  padding-left: calc(env(safe-area-inset-left, 0px) + var(--gutter));
  padding-right: calc(env(safe-area-inset-right, 0px) + var(--gutter));
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--head-h) + env(safe-area-inset-top, 0px));
}
.page-film .film-inner {
  padding-left: calc(env(safe-area-inset-left, 0px) + var(--gutter));
  padding-right: calc(env(safe-area-inset-right, 0px) + var(--gutter));
}
.page-film .mini-foot {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
}

.film-gate {
  position: absolute; inset: 0; z-index: 2;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 1.15rem; text-align: center;
  background: #000;
  padding: calc(env(safe-area-inset-top, 0px) + 24px)
           calc(env(safe-area-inset-right, 0px) + 24px)
           calc(env(safe-area-inset-bottom, 0px) + 24px)
           calc(env(safe-area-inset-left, 0px) + 24px);
}
.film-gate-icon { color: var(--chartreuse); opacity: 0.9; }
.film-gate-line {
  margin: 0; max-width: 22ch;
  font-size: 0.9375rem; letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1.5; color: rgba(255, 255, 255, 0.86);
}
@media (pointer: coarse) and (orientation: portrait) and (max-width: 767px) {
  .film-cinema .film-gate { display: flex; }
}

/* The ending: the film fades to black, then the end card takes the room.
   No replay chrome, no final frame left hanging. */
.film-cinema.film-ended video { opacity: 0; transition: opacity 700ms ease; }

/* The end card — the locked line and exactly two choices. Premium means
   restraint: black room, the mark, one sentence, two equal doors. */
.film-endcard {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(20px, 4.5vh, 38px);
  text-align: center; background: #000;
  padding: calc(env(safe-area-inset-top, 0px) + 28px)
           calc(env(safe-area-inset-right, 0px) + 28px)
           calc(env(safe-area-inset-bottom, 0px) + 28px)
           calc(env(safe-area-inset-left, 0px) + 28px);
  opacity: 0; transition: opacity 1100ms ease;
}
.film-endcard[hidden] { display: none; }
.film-endcard.on { opacity: 1; }
.film-endcard-mark { width: clamp(46px, 7vh, 66px); height: auto; }
.film-endcard-mark circle { fill: var(--chartreuse); }
.film-endcard-line {
  margin: 0; max-width: 26ch;
  font-family: "Libre Baskerville", Georgia, serif; font-style: italic;
  font-size: clamp(1.05rem, 2.6vh, 1.4rem); line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.film-endcard-choices {
  display: flex; flex-wrap: wrap; gap: 14px 18px;
  align-items: center; justify-content: center;
}
.film-endcard-choices .btn {
  text-transform: uppercase; letter-spacing: 0.08em;
}
@media (prefers-reduced-motion: reduce) { .film-endcard { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .film-inner.film-fading, .film-cinema, .film-cinema.film-ended video,
  .film-exit { transition: none; }
}

/* Premiere reminder block — deliberately the loudest thing on the page:
   the film page's one action is claiming the reminder (via the waitlist,
   the only path into AME). Hidden by film.js once the premiere passes. */
.film-remind { margin: clamp(38px, 5vw, 56px) auto 0; }
.film-remind-line { font-size: 1.12rem; color: var(--white); margin: 0 0 18px; }
.film-remind-cta { display: inline-block; }
.film-remind-sub {
  margin: 14px auto 0; max-width: 44ch;
  font-size: 0.9rem; color: var(--mut-dark);
}

.film-back { margin-top: clamp(40px, 6vw, 64px); }
.film-back a { color: var(--mut-dark); text-decoration: none; font-size: 0.9rem; }
@media (hover: hover) and (pointer: fine) {
  .film-back a:hover { color: var(--gray); }
}
@media (max-width: 460px) {
  .countdown { gap: 12px; }
}

/* ==========================================================================
   Legal and support pages (privacy · terms · cookies · accessibility ·
   privacy-choices · security · email-preferences)
   Light reading surface consistent with the site's light sections.
   ========================================================================== */
.page-legal { background: var(--white); color: var(--ink); }
.page-legal .mini-head { background: var(--black); }
.legal { padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 7vw, 96px); }
.legal-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.legal-draft {
  border: 1px solid rgba(0, 0, 0, 0.35);
  background: var(--chartreuse);
  color: var(--black);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  line-height: 1.6;
  padding: 12px 16px;
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.legal-kicker {
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal-ink);
  margin: 0 0 10px;
}
.legal h1 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--ink);
}
.legal-dates {
  color: var(--mut-light);
  font-size: 0.85rem;
  margin: 0 0 clamp(30px, 4.5vw, 52px);
  padding-bottom: clamp(18px, 3vw, 28px);
  border-bottom: 1px solid var(--hair-light);
}
.legal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.55rem);
  line-height: 1.25;
  margin: clamp(30px, 4.5vw, 46px) 0 12px;
  color: var(--ink);
}
.legal p, .legal li { line-height: 1.65; color: var(--ink); }
.legal ul { padding-left: 1.2em; margin: 0 0 1em; }
.legal li { margin-bottom: 0.5em; }
.legal a { color: var(--teal-ink); text-underline-offset: 3px; }
.legal-attorney, .legal-placeholder {
  border-left: 3px solid var(--teal);
  background: rgba(0, 206, 186, 0.07);
  padding: 10px 14px;
  font-size: 0.95rem;
}
.legal-placeholder { border-left-color: #b54708; background: #fffaeb; }

/* --------------------------------------------------------------------------
   Counsel-cleared legal pages
   -------------------------------------------------------------------------- */

/* Lead statement, e.g. the US-only scope line at the top of the cookie
   notice. Reads as a standing condition rather than body copy. */
.legal-strong {
  border-left: 3px solid var(--teal);
  background: rgba(0, 206, 186, 0.07);
  padding: 12px 16px;
  margin: 0 0 clamp(24px, 3.5vw, 36px);
  font-size: 0.98rem;
}

.legal-list { padding-left: 1.2em; margin: 0 0 1em; }
.legal-list li { margin-bottom: 0.5em; }

/* Tables carry real substance on these pages — what we store, why we
   collect it, which emails stop on which opt-out. They scroll inside their
   own container so a wide table never makes the page scroll sideways. */
.legal-table-wrap {
  overflow-x: auto;
  margin: 0 0 1.4em;
  -webkit-overflow-scrolling: touch;
}
.legal-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 0.92rem;
  line-height: 1.55;
}
.legal-table th,
.legal-table td {
  border: 1px solid var(--hair-light);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  color: var(--ink);
}
.legal-table thead th {
  background: rgba(0, 0, 0, 0.035);
  font-weight: 600;
  font-size: 0.86rem;
}
.legal-table code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: 3px;
}
.legal p code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Limitation of liability. Georgia enforces exculpatory clauses partly on
   whether they were conspicuous, so this section is set apart deliberately
   rather than left to run as ordinary body copy. */
.legal-prominent {
  border: 2px solid var(--ink);
  padding: clamp(18px, 3vw, 28px);
  margin: clamp(30px, 4.5vw, 46px) 0;
  background: rgba(0, 0, 0, 0.02);
}
.legal-prominent > h2 { margin-top: 0; }
.legal-prominent > *:last-child { margin-bottom: 0; }
.legal-caps {
  font-size: 0.95rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
}
.legal-foot {
  background: var(--black);
  color: var(--gray);
  padding: clamp(30px, 4.5vw, 48px) 0;
}
.legal-foot .legal-wrap { max-width: 760px; }
.legal-foot-nav {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-bottom: 16px;
}
.legal-foot-nav a {
  color: var(--mut-dark); text-decoration: none; font-size: 0.85rem;
}
@media (hover: hover) and (pointer: fine) {
  .legal-foot-nav a:hover { color: var(--gray); text-decoration: underline; }
}
.legal-foot .foot-legal { margin: 0; }

/* Legal/support links in the main site footers */
.foot-nav-legal {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 14px 0 0;
}
.foot-nav-legal a { color: var(--mut-dark); text-decoration: none; font-size: 0.8rem; }
@media (hover: hover) and (pointer: fine) {
  .foot-nav-legal a:hover { color: var(--gray); text-decoration: underline; }
}
.mini-foot {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  justify-content: center;
  padding: 26px var(--gutter) 34px;
  background: var(--black);
}
.mini-foot a { color: var(--mut-dark); text-decoration: none; font-size: 0.8rem; }
@media (hover: hover) and (pointer: fine) {
  .mini-foot a:hover { color: var(--gray); text-decoration: underline; }
}

/* Plain-language notices beside the public forms */
.form-notice {
  margin: 14px 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--mut-light);
}
.form-notice a { color: var(--teal-ink); text-underline-offset: 2px; }
/* The waitlist modal is a dark surface — flip to the dark-surface tones. */
.wl .form-notice { color: var(--mut-dark); }
.wl .form-notice a { color: var(--teal); }
/* The apply page is the same dark surface; without this flip its consent
   notice renders the light-surface tones on black (2.3:1 text, 4.0:1
   links — both under WCAG AA). Collapsed while applications are closed,
   visible the moment the form opens. */
.page-apply .form-notice { color: var(--mut-dark); }
.page-apply .form-notice a { color: var(--teal); }

/* ---------- Footer layout repair (homepage .foot-grid) ----------
   Cause: .foot-grid declared `row-gap: 28px` but no column-gap, and left
   its children to auto-placement. That put .foot-nav (pushed right by
   `justify-self: end`) and .foot-nav-legal into adjacent cells of a
   two-column grid with zero separation, so "Film" met "Privacy Policy"
   flush at the column boundary. Column 2 also stayed empty on the brand
   row, which is why content crowded left while the right sat empty.

   Fix: place the three sections explicitly at 901px and up. Brand,
   tagline and copyright stack in column 1; primary nav in column 2;
   legal links wrap inside a bounded column 3.

   The stacked layout is extended up to 900px because three columns at
   768px squeezed column 1 to 217px, and because 721-900px would
   otherwise have fallen back to the original gap-less two-column rule
   and reproduced the same collision. */
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-grid .foot-nav { justify-self: start; }
  /* WCAG 2.2 Target Size (Minimum): the 0.8rem legal links measure 21px
     tall, under the 24px floor, and sit closest together exactly where
     touch input is used. */
  .foot-grid .foot-nav-legal { gap: 4px 18px; }
  .foot-grid .foot-nav-legal a { padding-block: 4px; }
}
@media (min-width: 901px) {
  .foot-grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 21rem);
    column-gap: clamp(32px, 5vw, 88px);
    row-gap: 14px;
    align-items: start;
  }
  .foot-grid > .brand { grid-column: 1; grid-row: 1; }
  .foot-grid .foot-line { grid-column: 1; grid-row: 2; margin: 0; }
  .foot-grid .foot-legal { grid-column: 1; grid-row: 3; margin: 6px 0 0; }
  /* Primary nav becomes a vertical group so it reads as its own section
     rather than a second horizontal row competing with the legal links. */
  .foot-grid .foot-nav {
    grid-column: 2;
    grid-row: 1 / span 3;
    flex-direction: column;
    gap: 10px;
    justify-self: start;
  }
  .foot-grid .foot-nav-legal {
    grid-column: 3;
    grid-row: 1 / span 3;
    margin: 0;
    align-content: start;
  }
}

/* ==========================================================================
   TEMPORARY: FOOTER HIDDEN SITEWIDE
   --------------------------------------------------------------------------
   Added at Andrew's request while the footer design is being reworked.
   The markup and every legal page are untouched and still reachable by URL
   (privacy.html, terms.html, cookies.html, accessibility.html,
   privacy-choices.html, security.html, email-preferences.html).

   TO REVERSE: delete this entire block. Nothing else references it.
   Covers all three footer variants: .site-foot (homepage),
   .mini-foot (apply, film), .legal-foot (legal pages).
   ========================================================================== */
/* REVERSED 2026-08-04. Counsel required the legal links be visible before
   launch: hidden terms materially weaken any argument that a visitor had
   constructive notice, and the liability limitation depends on that notice.
   The hide rule is gone; the footer grid repair below stands on its own. */
/* ===================== END TEMPORARY FOOTER HIDE ====================== */