/* ═══════════════════════════════════════════════════════════════
   Flash ai. — flashcinema.ai (v5, GLOBAL PRODUCT SITE)
   Two pages, one sheet: index.html (hero → system → the format
   dock) + onboard.html (redirect bridge to the app). Static,
   self-contained; brand photography serves first-party from Flash's
   own storage (the brand bucket). Token values copied verbatim from
   docs/design-system/tokens/flash.tokens.css (FDS v1.0).
   Dark-only surface. Fonts resolve locally if installed; system
   stacks otherwise.

   v5: LIQUID GLASS REGISTER (founder-directed, papaya-ruled
   2026-07-13 — recipe recorded in docs/design-system/CHANGELOG.md)
   + THE FORMAT DOCK: section 03 detached from the flow into a fixed
   bottom band — always on screen, plain anchors, no script.

   v5.1: FEATURE FIRST (founder ruling 2026-07-13). The public
   offering narrows to feature film for now; ad film, short film and
   documentary leave the marketing surface and return later. The dock
   stands but carries ONE commanding full-width door — the standing
   call-to-action of the page — chip + door, paper-and-hairline.
   --dock-clearance retuned to the smaller band (152px desktop /
   144px phone); hero min-heights relaxed accordingly. onboard.html
   and the edge function still accept all four formats — deep links
   (?format=ad_film …) resolve; the plumbing is untouched.

   v5.2: AD FILM JOINS (founder ruling 2026-07-13, amending FEATURE
   FIRST). The public offering is features + ad films; the v5
   multi-tile grammar returns at TWO-UP — two independent glass
   doors side by side in the band, Feature film 01 / Ad film 02,
   both at the v5.1 commanding scale (68px, full clamp face). Chip
   reads "Start with your format" (the v5 head returns) / "More
   formats to follow." Phone: the doors STACK full-width (56px each,
   generous hits, arrows kept) — all on screen, no scroll.
   --dock-clearance: desktop holds at 152px (side-by-side doors,
   band depth unchanged); phone 144→200px for the stacked pair;
   hero min-heights unchanged (CTA verified above the dock on load).
   Short film and documentary stay off the surface; plumbing still
   accepts all four — deep links resolve. Liquid glass recipe, ink
   scrim and AA math untouched.

   v5.3: QUIET SURFACE (founder ruling 2026-07-13). The landing page
   drops the Non-negotiables section, the footer corporate line and
   the app address — wordmark + © only. The dock renumbers 03 → 02.
   onboard.html keeps its footer as-is (sign-in page, not landing).

   v5.4: THE DOCK RISES (founder direction 2026-07-13 — "put the
   floating bars above, at the top; it's overlapping"). The format
   band leaves the bottom edge, where it covered content, and hangs
   fixed at the TOP of the viewport, directly beneath the sticky
   statusbar (--bar-h seam, statusbar now a fixed 64px); it floats
   over the page as it scrolls. The doors stay two INDEPENDENT
   glass tiles — never a fused bar — and the band flattens to ONE
   ROW at desktop: chip left, doors right (a top band taxes the
   hero, so it spends the least height it can; door rows 68→60px).
   ≤1020px the chip returns to its own line above the two-up doors;
   ≤720px the doors stay SIDE BY SIDE and compress (56px, names may
   break to two lines — half the band the stacked pair cost);
   ≤560px the arrows retire with the chip note (compact register —
   the tile is the affordance; no hover on touch anyway). Reserved
   clearance moves from body bottom-padding to MAIN TOP-PADDING:
   --dock-clearance 92px desktop / 132px ≤1020 / 128px phone
   (measured band + headroom; see the token comment). The ink scrim
   recomposes for a top band: deepest at the statusbar seam (.78),
   ≥.62 under every tile, dying 56px below the band — same AA
   floor, same load-bearing role, ramp inverted. Hero min-heights
   relax (the hero no longer guards a bottom band): 70→62svh
   desktop, 62→54svh phone. Bottom safe-area inset retires with
   the bottom band. Dock DOM moves above main — visual order and
   focus order agree (nav → doors → page). Copy, Signal budget,
   liquid glass recipe, plumbing: untouched.

   v5.5: THE HANDOFF (founder direction 2026-07-14 — "take out the
   magic link, make it global standard saas onboarding"). The
   marketing site never runs auth again: the magic-link/OTP protocol
   and the intake call are DELETED. Every CTA hands off to the app —
   nav Sign in → app.flashcinema.ai/login; nav ghost, hero GET
   STARTED and the seven live module cards → /signup; dock doors →
   /signup?format=feature_film | ad_film. onboard.html survives as a
   thin redirect BRIDGE (old links never 404; ?format validated and
   carried through to /signup; zero Supabase calls, zero Signal).
   The dead module cards become ENTRIES (founder: unclickable
   components made the site feel light — remove or make functional):
   the seven live modules are real anchors into signup with a
   persistent paper arrow (top-right, the door-arrow grammar) and
   the door hover register; Storyboard (08) stays static under its
   In-development tag — a link on an in-development card would be
   the fake link. The trial promise lands once, as a mono note
   beside the hero CTA: "14 days · full system · no card". Dead
   intake CSS (card/form/refused/filed registers) pruned; the
   bridge register added. Glass recipe, AA math, dock, reduced
   motion: untouched.

   v5.6: THE HERO GLYPH RETIRES (founder ruling 2026-07-14 —
   "remove the huge bolt mark"). The monumental hero mark leaves;
   the canonical 18×22 glyph stays in the nav and footer only.

   v5.8: THE TAB RETIRES, THE DOORS STAY (founder correction
   2026-07-14 — "i need feature film and ad film blocks. just the
   start with your format tab has to go"; supersedes the v5.7
   whole-dock removal, which over-read the ruling). The chip
   register (dock-head / dock-title / dock-note) is DELETED; the
   two independent glass doors keep the fixed top band. With the
   chip gone the band is one door row at every width, so the
   mid/phone clearance overrides retire: --dock-clearance is a
   single 92px (door 60 + 12/12 padding = 84 measured; phone door
   56 = 80 measured — 92 covers all tiers with headroom). The
   ≤1020px chip-line recomposition retires with the chip. Scrim,
   AA math, door grammar, plumbing: untouched.

   SIGNAL DISCIPLINE (for the record):
   Interactive Signal Orange budget —
     index:   ONE moment — the hero GET STARTED button;
     onboard: ZERO — a redirect bridge; its continue link is the
              hairline mono register.
   Plus structural Flash ink (canonical glyph,
   section/module/dock-door indices, punctuation accent) per the app
   §2.3 precedent — markings, not controls. The dock doors and the
   seven module entries are paper-and-hairline anchors; their
   indices are structural ink and their arrows are PAPER, so
   neither adds anything to the Signal budget. The nav "Get
   started" is a hairline ghost by design so the budget holds.
   Orange visible INSIDE the photographs — lamps, tally, tape,
   rope — is photography, not UI accent, and does not count. Frames
   are never recolored or tinted; veils and scrims are ink-only.

   AA ON GLASS (binding for this sheet — liquid register math):
   Atmosphere frames carry blur(8px) brightness(.6) — channel cap
   ≈153 — under the ink veil (.58 + gradient caps): the veiled
   backdrop maxes at ≈ #464646 (70/255). Worst case assumes pure
   white behind every blur. Composited grounds:
   · Standard glass (fill .55 ink, lens brightness 1.05) over the
     veiled backdrop → ground ≈ #272727. Signal mono 12px ≥ 4.5:1;
     paper ≥ .75 opacity ≥ 7:1.
   · The dock (fixed TOP band since v5.4) floats over UNVEILED page
     content (white display type can pass beneath, 255): the dock
     scrim (ink-only — .78 at the statusbar seam, ≥.62 under every
     tile, dying 56px BELOW the band; the v5 ramp inverted, values
     unchanged) plus deep glass (.72) puts tile ground ≈ #1e1e1e →
     Signal ≥ 5:1. The scrim is load-bearing: deep glass alone
     over white FAILS Signal at 12px. Do not thin it; do not
     shorten the ramp.
   · Heavy bands (statusbar, footer) are the only surfaces that
     carry dim (#8f8d86): fill .90 solid, lens WITHOUT a brightness
     lift → dim ≥ 4.8:1 even with a white headline scrolled beneath.
     Dim never sits on .55/.72 glass.
   · Sheen budget: ≤ .02 paper in any text zone — the edge catch
     light dies within 16px, above the first text baseline. A fatter
     sheen drops Signal indices below 4.5:1; it is capped, not
     tasteful preference.
   Mono floor: 12px (0.75rem) everywhere.
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* Primitives — values from flash.tokens.css, do not drift */
  --signal-500: #ff5a1f;
  --signal-600: #e64d17;
  --signal-400: #ff6d38;
  --ink:        #0a0a0a;
  --ink-2:      #0f0f0f;
  --ink-3:      #161616;
  --paper:      #f4f3ef;
  --dim:        #8f8d86;
  --paper-a14:  rgba(244, 243, 239, 0.14);
  --paper-a24:  rgba(244, 243, 239, 0.24);
  /* Functional status — state only, never brand moments */
  --ok:     #3fb950;
  --warn:   #d29922;
  --danger: #f85149;
  --info:   #6ea8fe;

  /* Semantic */
  --bg:             var(--ink);
  --bg-raised:      var(--ink-2);
  --bg-overlay:     var(--ink-3);
  --text:           var(--paper);
  --text-dim:       var(--dim);
  --text-on-accent: var(--ink);
  --border:         var(--paper-a14);
  --border-strong:  var(--paper-a24);
  --accent:         var(--signal-500);
  --accent-hover:   var(--signal-400);
  --accent-press:   var(--signal-600);
  --focus:          var(--signal-500);

  /* Glass — LIQUID REGISTER (papaya ruling 2026-07-13; recipe in
     docs/design-system/CHANGELOG.md). Fills are ink-only. Clarity
     comes from the lens (saturation + brightness), not from
     thinning fills past the AA math in the header. */
  --glass:        rgba(10, 10, 10, 0.55);  /* panels over the veiled atmosphere */
  --glass-deep:   rgba(10, 10, 10, 0.72);  /* floats over live content; hover; card */
  --glass-solid:  rgba(10, 10, 10, 0.90);  /* heavy bands — the only dim-bearing fill */
  --veil:         rgba(10, 10, 10, 0.58);
  /* The lens — backdrop treatment. Heavy bands skip the brightness
     lift so dim keeps its AA headroom. */
  --glass-lens:       blur(24px) saturate(1.5) brightness(1.05);
  --glass-lens-heavy: blur(20px) saturate(1.4);
  /* Edge catch light — hairline inner top highlight */
  --glass-edge: inset 0 1px 0 rgba(244, 243, 239, 0.18);
  /* Lift — soft outer shadow; -near for elements floating over live content */
  --glass-lift:      0 16px 40px rgba(0, 0, 0, 0.35);
  --glass-lift-near: 0 8px 24px rgba(0, 0, 0, 0.45);
  /* Sheen — specular gradient on the surface. CAPPED: ≤ .02 paper
     in any text zone (edge glow dies in 16px). See AA header. */
  --glass-sheen:
    linear-gradient(180deg, rgba(244, 243, 239, 0.05) 0, rgba(244, 243, 239, 0) 16px),
    linear-gradient(180deg, rgba(244, 243, 239, 0.02) 0, rgba(244, 243, 239, 0) 100%);

  /* Type */
  --font-display: "Archivo", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Archivo", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;
  --tracking-display: -0.03em;
  --tracking-mono:    0.14em;

  /* Spacing (4-base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-8: 48px; --space-10: 64px;

  /* Radius — r-glass/r-glass-lg are the liquid-register continuous
     corners (amendment recorded in the FDS changelog) */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --r-glass: 20px; --r-glass-lg: 24px;

  /* The format dock — v5.4 TOP band. --bar-h is the statusbar's
     fixed height: the seam the dock hangs from. --dock-clearance is
     the reserved page clearance BELOW the band (main top padding —
     the band must never cover content at rest). v5.8: the chip is
     gone, so the band is ONE door row at every width — doors 60
     inside 12/12 padding = 84px measured (phone doors 56 = 80);
     one 92px value covers all tiers with headroom. */
  --bar-h: 64px;
  --dock-clearance: 92px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-1: 120ms; --t-2: 200ms; --t-3: 320ms;

  /* Page measure */
  --measure: 1160px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* overflow-x clip (not hidden — no scroll container, sticky lives):
   nothing may grant the page a sideways pan (v5.2 gate fix; kept
   after the hero glyph retired in v5.6 as a standing guard). */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

/* Pages that carry the format dock reserve its band — the fixed TOP
   band must never cover content at rest; the page starts below it.
   (v5.4: clearance moved from body bottom-padding to main
   top-padding.) */
body.with-dock main {
  padding-top: var(--dock-clearance);
}

a { color: inherit; }

img { display: block; max-width: 100%; }

::selection { background: var(--accent); color: var(--text-on-accent); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ── Atmosphere — the frames become abstract depth ─────────── */
/* Fixed, blurred, darkened, drifting. The subject dissolves;   */
/* only the energy of the set remains, far behind the UI.       */
.atmos {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
}

.atmos-frame {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  /* Founder ruling: visible, motion-blurred — not gaussian fog. Light
     blur + a longer, faster drift reads as movement; the panels carry
     their own fills for AA. */
  filter: blur(8px) brightness(0.6);
  animation: drift 40s ease-in-out infinite alternate;
  will-change: transform;
}

/* Second frame breathes in and out over the first — depth, not slideshow */
.atmos-frame--b {
  opacity: 0;
  animation:
    drift 40s ease-in-out infinite alternate-reverse,
    breathe 120s ease-in-out infinite;
}

.atmos-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0) 65%, rgba(10,10,10,0.4) 100%),
    var(--veil);
}

@keyframes drift {
  from { transform: translate3d(-2.8%, -1.3%, 0) scale(1.08); }
  to   { transform: translate3d( 2.8%,  1.3%, 0) scale(1.08); }
}

@keyframes breathe {
  0%, 32%  { opacity: 0; }
  50%, 82% { opacity: 1; }
  100%     { opacity: 0; }
}

/* ── Shared type registers ─────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.8;             /* floating over the veil — paper, never dim */
}

.eyebrow--signal { color: var(--accent); opacity: 1; }

.q { color: var(--accent); }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 0.92;
  text-transform: uppercase;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* ── Nav — instrument chrome ───────────────────────────────── */
.statusbar {
  position: sticky;
  top: 0;
  z-index: 10;
  /* Fixed height — the seam the format dock hangs from (v5.4);
     border included (border-box). */
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border);
  /* Heavy band — carries dim, so: solid fill, lens without the
     brightness lift (AA header math) */
  background: var(--glass-solid);
  backdrop-filter: var(--glass-lens-heavy);
  -webkit-backdrop-filter: var(--glass-lens-heavy);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.glyph { display: block; flex: none; }

.wordmark-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: var(--tracking-display);
  color: var(--text);
}

.wordmark-ai { font-weight: 500; color: var(--text-dim); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* Coordinates — identity chrome on the heavy band; dim is AA here */
.readout-item { color: var(--text-dim); }

.nav-signin {
  color: var(--text);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--t-2) var(--ease);
}
.nav-signin:hover { opacity: 1; }

/* Ghost CTA — hairline, paper; NOT the Signal moment by design */
.btn-ghost {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  transition: border-color var(--t-2) var(--ease), background var(--t-2) var(--ease);
}
.btn-ghost:hover {
  border-color: var(--text);
  background: rgba(244, 243, 239, 0.06);
}

@media (max-width: 720px) {
  .readout-item { display: none; }
  .nav-actions { gap: var(--space-4); }
}

/* Smallest phones: the chrome compresses so the ghost pill never
   clips the viewport edge (pre-v5.4 defect, caught at the 340px
   gate — the bar's content ran ~366px wide). */
@media (max-width: 360px) {
  .statusbar { padding-inline: var(--space-4); }
  .nav-actions { gap: var(--space-3); }
  .btn-ghost { padding: 9px 12px; }
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(56px, 10vh, 128px) var(--space-5) clamp(48px, 8vh, 96px);
  /* v5.4: the hero no longer guards a bottom band — clearance is
     structural (main top padding), overlap is impossible by
     construction — so it relaxes; sized so the composition centers
     and section 01 crests beneath at desk heights. */
  min-height: min(62svh, 680px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Type floats on the veil — carries its own ink */
  text-shadow: 0 1px 3px rgba(10,10,10,0.9), 0 2px 24px rgba(10,10,10,0.8);
}

/* v5.6: the monumental hero glyph is RETIRED (founder ruling
   2026-07-14 — "remove the huge bolt mark, not looking good"). The
   canonical mark survives at instrument scale only: nav wordmark,
   footer, favicon. Never reintroduce at architectural scale without
   a founder word. */
@media (max-width: 720px) {
  .hero { min-height: min(54svh, 560px); }
}

.hero-title {
  margin-top: var(--space-4);
  font-size: clamp(2.75rem, 7vw, 5.75rem);
  max-width: 12em;
}

.hero-sub {
  margin-top: var(--space-5);
  max-width: 36em;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.55;
  color: var(--text);
  opacity: 0.82;            /* secondary on the veil — paper, dialed down */
}

.hero-cta {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
}

/* The trial promise — v5.5, the one place it earns: the moment of
   commitment. Mono readout register, paper (never dim on the veil);
   states terms, sells nothing. */
.cta-note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.78;
}

/* Small phones: step the display down so the title holds clean lines
   (not ragged overflow wraps) and trim the lead-in so the one Signal
   moment still lands on screen on load, under the top band. */
@media (max-width: 340px) {
  .hero { padding-top: 24px; }
  .hero-title { font-size: 2.125rem; }
  .hero-sub { margin-top: var(--space-4); }
}

/* ── Sections — editorial, indexed, hairline-ruled ─────────── */
.section {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(40px, 7vh, 80px) var(--space-5);
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  margin-bottom: var(--space-6);
  text-shadow: 0 1px 3px rgba(10,10,10,0.9);
}

/* Structural Signal ink — an instrument marking, not a control */
.section-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--accent);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
}

.section-note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.75;
  text-align: right;
}

@media (max-width: 560px) {
  .section-note { display: none; }
}

/* ── The ledger — eight modules, floating glass cells ──────── */
/* v5.5: the seven live modules are ENTRIES — anchors into the
   signup flow — carrying the door register (persistent paper arrow
   top-right, hover deepen + lift). Storyboard (08) stays static
   under its In-development tag. Cards remain paper-and-hairline;
   nothing here touches the Signal budget. */
.ledger {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

/* The cell — grid child; the module (anchor or static) fills it */
.module-cell { display: flex; }
.module-cell > .module { flex: 1; }

.module {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 148px;
  padding: var(--space-4) var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--r-glass);
  background-color: var(--glass);
  background-image: var(--glass-sheen);
  backdrop-filter: var(--glass-lens);
  -webkit-backdrop-filter: var(--glass-lens);
  box-shadow: var(--glass-edge), var(--glass-lift);
}

/* The entry register — anchors only; the static cell never moves.
   Hover deepens toward --glass-deep (darker ground = more AA
   headroom, never less) — the door grammar, quieter. */
a.module {
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--t-2) var(--ease),
    background-color var(--t-2) var(--ease),
    transform var(--t-2) var(--ease);
}

a.module:hover {
  border-color: var(--border-strong);
  background-color: var(--glass-deep);
  transform: translateY(-2px);
}

/* Persistent affordance — PAPER, the door-arrow grammar; sits in
   the tag slot (top-right; only the static card carries a tag, so
   the slot never collides). Constant, not hover-only: on touch the
   arrow IS the affordance. */
.module-arrow {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1;
  color: var(--text);
  opacity: 0.75;
  transition: transform var(--t-2) var(--ease), opacity var(--t-2) var(--ease);
}

a.module:hover .module-arrow { transform: translateX(4px); opacity: 1; }

/* Structural Signal ink — constant marking, non-interactive */
.module-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--accent);
}

.module-name {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
}

.module-line {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text);
  opacity: 0.78;
}

.module-tag {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.75;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px 10px;
}

@media (max-width: 980px) {
  .ledger { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .ledger { grid-template-columns: 1fr; }
  .module { min-height: 116px; }
}

/* ── The format doors — always on screen ───────────────────── */
/* v5.4 THE DOCK RISES / v5.8 THE TAB RETIRES: the band hangs fixed
   at the TOP, directly beneath the sticky statusbar (--bar-h seam),
   floating over the page as it scrolls. Two INDEPENDENT commanding
   doors (never one fused bar) fill the row — the chip is gone
   (v5.8), so the band is one door row at every width. Plain
   anchors, no script. The band itself has no fill — content passes
   visibly beneath the tiles; only the ink scrim calms the ground
   for AA (the doors are deep glass over unveiled content, so the
   scrim stays load-bearing — ramping DOWNWARD below the band). */
.dock {
  position: fixed;
  inset: var(--bar-h) 0 auto 0;
  z-index: 20;
  padding: var(--space-3) var(--space-5);
}

/* Ink-only scrim — LOAD-BEARING for AA (see header math): deepest
   at the statusbar seam, ≥.62 under every tile, dying 56px below
   the band so unveiled content calms before it passes beneath. */
.dock-scrim {
  position: absolute;
  inset: 0 0 -56px 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(10, 10, 10, 0.78) 0,
    rgba(10, 10, 10, 0.62) calc(100% - 56px),
    rgba(10, 10, 10, 0) 100%);
}

.dock-inner {
  max-width: var(--measure);
  margin: 0 auto;
  /* One row, doors only (v5.8) — a top band taxes the hero, so it
     spends the least height it can. */
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* The doors — two independent tiles, side by side, filling the
   band's row (equal heights via the grid). */
.doors {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* A door — horizontal tile; deep glass because live page content
   (not the veiled atmosphere) passes beneath it. 68→60px in v5.4:
   a top band wants less height; the clamp face keeps it commanding. */
.door {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 60px;
  padding: var(--space-3) var(--space-5);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--r-glass);
  background-color: var(--glass-deep);
  background-image: var(--glass-sheen);
  backdrop-filter: var(--glass-lens);
  -webkit-backdrop-filter: var(--glass-lens);
  box-shadow: var(--glass-edge), var(--glass-lift-near);
  transition:
    border-color var(--t-2) var(--ease),
    background-color var(--t-2) var(--ease),
    transform var(--t-2) var(--ease);
}

.door:hover {
  border-color: var(--border-strong);
  background-color: var(--glass-solid);
  transform: translateY(-2px);
}

/* Structural Signal ink — constant marking, non-interactive */
.door-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--accent);
  flex: none;
}

.door-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
}

.door-arrow {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  color: var(--text);
  opacity: 0.75;
  transition: transform var(--t-2) var(--ease);
}
.door:hover .door-arrow { transform: translateX(4px); }

/* Phone: the pair stays SIDE BY SIDE — a top band spends the least
   viewport it can (half the height of a stacked pair). Doors
   compress to 56px; names may break to two lines at the tightened
   leading; hits stay generous (half-width × 56px+). */
@media (max-width: 720px) {
  .dock { padding-inline: var(--space-4); }
  .door { min-height: 56px; padding: var(--space-2) var(--space-3); gap: var(--space-3); }
  .door-name { font-size: 1rem; line-height: 1.05; }
}

/* Compact register: the arrow retires — the tile is the affordance
   (no hover on touch anyway). */
@media (max-width: 560px) {
  .door-arrow { display: none; }
}

/* ── The bridge (onboard.html) — v5.5 handoff register ─────── */
/* A page that exists only to leave: instant redirect to the app,
   ?format validated and carried through. No atmosphere frames (no
   megabytes for a page nobody dwells on) — type on ink. ZERO
   interactive Signal; the continue link is the hairline mono
   register below. */
.bridge-main {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(48px, 12vh, 128px) var(--space-5) var(--space-10);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bridge-title {
  margin-top: var(--space-3);
  font-size: clamp(2.125rem, 5vw, 3.5rem);
}

.bridge-line {
  margin-top: var(--space-5);
  max-width: 34em;
  color: var(--text);
  opacity: 0.82;
}

.bridge-go { margin-top: var(--space-6); }
.bridge-go .backlink { margin-bottom: 0; }

.backlink {
  display: inline-block;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.8;
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 2px;
  transition: opacity var(--t-2) var(--ease), border-color var(--t-2) var(--ease);
}
.backlink:hover { opacity: 1; border-color: var(--text); }

/* ── The primary CTA — THE Signal moment of the landing page ── */
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  padding: 14px 28px;
  border-radius: var(--r-sm);
  transition: background var(--t-2) var(--ease);
}
.btn-primary:hover  { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); }

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  padding: var(--space-6) var(--space-5) var(--space-8);
  /* Heavy band — carries dim; solid fill, no brightness lift */
  background: var(--glass-solid);
  backdrop-filter: var(--glass-lens-heavy);
  -webkit-backdrop-filter: var(--glass-lens-heavy);
}

.footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-4);
}

.wordmark-text-sm { font-size: 0.875rem; }

.footer-line {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: var(--space-2);
}

.footer-line a {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  transition: color var(--t-2) var(--ease), border-color var(--t-2) var(--ease);
}
.footer-line a:hover { color: var(--text); border-color: var(--text); }

/* ── Motion — reveal, not spectacle ────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.rise   { animation: rise var(--t-3) var(--ease) both; }
.rise-2 { animation-delay: var(--t-1); }
.rise-3 { animation-delay: var(--t-2); }

/* Reduced motion: the drift dies, the breath dies, the rise dies.
   One static blurred frame remains. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .atmos-frame { animation: none; transform: scale(1.08); }
  .atmos-frame--b { display: none; }
  .rise, .rise-2, .rise-3 { animation: none; }
  * { transition: none !important; }
}