/* WAVERS homepage — Register A (D18): navy ink, Signal Orange, warm paper ground.

   Fonts are system stacks on purpose: the CSP is `default-src 'self'` with no font-src, so a
   webfont has to be self-hosted before it can be used here. Self-hosting Barlow (OFL) is a P8
   task; until then the display face is the platform's own condensed-ish grotesk.

   Layout targets 400 px with no horizontal scroll, matching the waiver. */

:root {
  --navy: #1b2a4a;
  --navy-soft: #3c4a68;
  --orange: #ff6a13;
  --nickel: #b8bec6;
  --paper: #f4efe4;
  --paper-warm: #ede6d7;
  --white: #fffdf8;
  --rule: #d9d2c3;

  --font-display: "Helvetica Neue Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --measure: 62ch;
  --pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font: 17px/1.6 var(--font-body);
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: .01em; line-height: 1.04; }
h2 { font-size: clamp(30px, 5vw, 46px); margin: 0 0 12px; text-transform: uppercase; }
h3 { font-size: 19px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .03em; }
p { margin: 0 0 14px; }
a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--navy); color: var(--paper);
  padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 0; }
.sprite { position: absolute; }

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

/* ── the mark ─────────────────────────────────────────────────────────────── */
.roundel-hand { color: #1b2a4a; }
.ring-text { font-family: var(--font-body); font-weight: 700; fill: var(--paper); }
.ring-text-lg { font-size: 36px; letter-spacing: 3.6px; }
.ring-text-sm { font-size: 30px; letter-spacing: 3px; }
.cap-hand { color: #1b2a4a; }

/* ── ticker ───────────────────────────────────────────────────────────────── */
.ticker {
  background: var(--navy); color: var(--paper); overflow: hidden; white-space: nowrap;
  font: 600 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  padding: 10px 0; border-bottom: 3px solid var(--orange);
}
.ticker-track { display: inline-block; padding-left: 100%; animation: ticker 38s linear infinite; }
.ticker-track span::after { content: " · "; color: var(--orange); }
@keyframes ticker { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; padding-left: 0; white-space: normal; display: block; padding-inline: var(--pad); }
}

/* ── top bar ──────────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px var(--pad); border-bottom: 1px solid var(--rule); background: var(--paper);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: block; }
.brand-name { font: 800 22px/1 var(--font-display); letter-spacing: .06em; }
.topbar nav { display: flex; gap: 18px; margin-left: auto; font-size: 14px; font-weight: 600; }
.topbar nav a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.topbar nav a:hover { border-bottom-color: var(--orange); }
@media (max-width: 720px) { .topbar nav { display: none; } .topbar .btn { margin-left: auto; } }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; font: 700 16px/1 var(--font-body); letter-spacing: .02em;
  padding: 16px 26px; border-radius: 3px; text-decoration: none; border: 2px solid transparent;
  cursor: pointer;
}
.btn-sm { font-size: 14px; padding: 11px 16px; }
.btn-lg { font-size: 19px; padding: 20px 34px; }
.btn-primary { background: var(--navy); color: var(--paper); }
.btn-primary:hover { background: #24365c; }
.btn-signal { background: var(--orange); color: var(--navy); }
.btn-signal:hover { background: #ff7d33; }
.btn-ghost { border-color: var(--navy); color: var(--navy); }
.btn-ghost:hover { background: rgba(27, 42, 74, .07); }
.btn.is-pending { opacity: .55; cursor: default; border-style: dashed; }
.btn-note { font-weight: 400; font-size: .85em; }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px);
  align-items: center; padding: clamp(34px, 6vw, 76px) var(--pad);
}
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }
.eyebrow {
  font: 600 12px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy-soft); margin-bottom: 14px;
}
h1 { font-size: clamp(42px, 8vw, 86px); margin: 0 0 18px; text-transform: uppercase; }
.lede { font-size: clamp(17px, 2vw, 20px); max-width: 46ch; color: #2c3a58; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 10px; }
.microcopy { font-size: 14px; color: var(--navy-soft); margin: 0; }
.microcopy-light { color: rgba(244, 239, 228, .72); }

/* ── the Wave Test ────────────────────────────────────────────────────────── */
.wave-test {
  background: var(--white); border: 1px solid var(--rule); border-radius: 6px;
  padding: 24px; text-align: center;
}
.wave-test-stage {
  background: var(--orange); border-radius: 4px; padding: 26px 10px; margin-bottom: 16px;
  display: flex; justify-content: center;
}
.wave-test-hand { width: min(220px, 60vw); height: auto; color: var(--navy); transform-origin: 60% 92%; }
.wave-test[data-state="waving"] .wave-test-hand { animation: wag 1.1s ease-in-out infinite; }
.wave-test[data-state="returned"] .wave-test-hand { animation: none; transform: rotate(-4deg); }
@keyframes wag { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@media (prefers-reduced-motion: reduce) { .wave-test-hand { animation: none !important; } }
.wave-test-prompt { font-size: 15px; margin: 0; }
.wave-test-result { font-size: 15px; margin: 8px 0 0; font-weight: 600; }

/* ── stats ────────────────────────────────────────────────────────────────── */
.stats {
  background: var(--navy); color: var(--paper); padding: 30px var(--pad);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px;
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-fig { font: 800 clamp(34px, 5vw, 50px)/1 var(--font-display); color: var(--orange); }
.stat-line { font-size: 14px; color: rgba(244, 239, 228, .82); }
.stats-source { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; color: rgba(244, 239, 228, .6); }

/* ── bands ────────────────────────────────────────────────────────────────── */
.band { padding: clamp(40px, 7vw, 86px) var(--pad); border-top: 1px solid var(--rule); }
.band-paper { background: var(--paper-warm); }
.band-navy { background: var(--navy); color: var(--paper); text-align: center; }
.band-navy .lead-para { color: rgba(244, 239, 228, .82); margin-inline: auto; }
.section-no {
  font: 700 13px/1 var(--font-body); letter-spacing: .2em; color: var(--orange); margin-bottom: 8px;
}
.lead-para { font-size: clamp(18px, 2.2vw, 22px); max-width: var(--measure); color: #2c3a58; }

.villains, .tech, .tiers, .members { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
.villains { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tech { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.villains li, .tech li {
  background: var(--white); border: 1px solid var(--rule); border-left: 4px solid var(--orange);
  border-radius: 3px; padding: 20px;
}
.villains p, .tech p { margin: 0; color: #2c3a58; }

/* ── tiers ────────────────────────────────────────────────────────────────── */
.tiers { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tier {
  background: var(--white); border: 1px solid var(--rule); border-radius: 4px; padding: 22px;
  display: flex; flex-direction: column; gap: 4px; text-align: center; align-items: center;
}
.tier-featured { border-color: var(--navy); border-width: 2px; }
.tier-art {
  width: 100%; aspect-ratio: 1; margin-bottom: 14px; border-radius: 3px; overflow: hidden;
  background: var(--paper-warm); display: flex; align-items: center; justify-content: center;
}
.tier-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tier-art-roundel { width: 72px; }
.cap-svg { width: 130px; }
.cap-svg-sm { width: 82px; }
.tier-kit { font-size: 14px; font-weight: 600; color: var(--navy-soft); margin: 0 0 6px; }
.tier p { margin: 0 0 6px; color: #2c3a58; }
.tier-status {
  margin-top: auto; font: 600 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); background: var(--nickel); border-radius: 999px; padding: 8px 14px;
}
.offer-cta { margin: 30px 0 0; }

/* ── members ──────────────────────────────────────────────────────────────── */
.members { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.members li { background: var(--white); border: 1px solid var(--rule); border-radius: 3px; padding: 20px; }
.member-no { font: 600 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin: 0 0 8px; }
.members p:last-child { margin: 0; color: #2c3a58; }
.ai-label {
  display: inline-block; font: 600 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  background: var(--navy); color: var(--paper); padding: 8px 12px; border-radius: 3px;
}

/* ── the app ──────────────────────────────────────────────────────────────── */
.app-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(24px, 4vw, 50px); align-items: center; margin-top: 26px; }
@media (max-width: 860px) { .app-row { grid-template-columns: 1fr; } }
.app-steps { margin: 0 0 22px; padding-left: 20px; }
.app-steps li { margin-bottom: 8px; color: #2c3a58; transition: opacity .2s; }
.app-steps li.is-current { color: var(--navy); }
.app-steps li.is-current b { color: var(--orange); }
.app-watch { display: flex; justify-content: center; }
.app-watch wavers-watch { width: min(260px, 70vw); }

/* ── counter + faq + close ────────────────────────────────────────────────── */
.counter { font-size: 15px; color: rgba(244, 239, 228, .9); margin: 18px 0 0; }
.faq { margin: 26px 0 0; max-width: var(--measure); }
.faq dt { font-weight: 700; margin-top: 18px; }
.faq dd { margin: 4px 0 0; color: #2c3a58; }
.close { text-align: center; padding: clamp(50px, 8vw, 100px) var(--pad); background: var(--paper-warm); border-top: 1px solid var(--rule); }
.close h2 { font-size: clamp(30px, 6vw, 58px); }
.tagline { margin-top: 18px; font: 600 15px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--navy-soft); }

/* ── footer ───────────────────────────────────────────────────────────────── */
.footer { background: var(--navy); color: rgba(244, 239, 228, .78); padding: 34px var(--pad) 110px; font-size: 14px; }
.footer-office { font: 600 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 239, 228, .5); margin: 10px 0 0; }
.footer-links a { color: var(--paper); }

/* ── sticky bar (small screens) ───────────────────────────────────────────── */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; display: none; gap: 10px; justify-content: center;
  padding: 10px; background: rgba(244, 239, 228, .96); border-top: 1px solid var(--rule); z-index: 30;
}
@media (max-width: 720px) { .stickybar { display: flex; } }

/* ── brand lockup: the chosen logotype, with the tagline directly under it ───────
   The roundel stays to its left as the seal; the script is the wordmark now, so
   .brand-name is retired rather than deleted — the markup no longer emits it.
   NB: no names or quotes in anything under public/ — the anonymity gate scans shipped
   code and this comment failed it once already. Attribution lives in docs/ and in the
   editorial JSON, never here. */
.brand { align-items: center; }
/* align-items: flex-start is LOAD-BEARING, not tidiness. A column flex stretches its children
   along the CROSS axis by default, so the wordmark's width was being pulled out to the tagline's
   width and `width:auto` lost: 182px wide at 30px tall, a rendered aspect of 6.08 against the
   file's own 2.54. The script was flattened to 40% of its proper proportions. */
.brand-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.brand-wordmark {
  /* 28px, not 52px, and the file is why. wordmark.png used to be 540x213 with the script sitting in
     y96..210 — 45% of the image was empty space above it. So `height: 52px` sized a box that was
     mostly nothing, the script rendered at 28px inside it, and `align-items: center` on .brand
     dutifully centred the BOX against the roundel while the visible script hung ~12px below that
     centre. The seal looked high because it was aligned to transparency.
     The PNG is now trimmed to its own ink (400x114, zero padding on all four sides), so the box IS
     the script and the height here is the height you see. 28px keeps the rendered size identical to
     before; the alignment is what changes. Fixed in the file rather than nudged with a CSS offset,
     because the same padding was silently skewing the 9:16 poster frame too. */
  display: block; height: 28px; width: auto; flex: 0 0 auto;
  /* Still wanted after the trim: this compensates for the GLYPH, not the padding. A cursive W
     leans, so its bounding box is set by the lowest point of the lean and flush-left reads as
     indented. */
  margin-left: -2px;
}
.brand-tagline {
  font: 700 8px/1 var(--font-body);
  letter-spacing: .068em; text-transform: uppercase; color: var(--navy-soft);
  white-space: nowrap;
}
@media (max-width: 640px) { .brand-wordmark { height: 18px; } .brand-tagline { font-size: 7px; } }

/* ── cast portraits in Meet the Wavers ─────────────────────────────────────── */
.member-art {
  margin: -20px -20px 16px; border-bottom: 1px solid var(--rule);
  background: var(--paper-warm); aspect-ratio: 4 / 3; overflow: hidden;
}
.member-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── add to cart ────────────────────────────────────────────────────────────
   The button carries the fiction; the dialog carries the truth. */
.btn-cart {
  margin-top: 14px; width: 100%;
  background: var(--navy); color: var(--white); border: 1px solid var(--navy);
}
.btn-cart:hover { background: var(--orange); border-color: var(--orange); color: #1a1207; }

.cart {
  border: 1px solid var(--navy); border-radius: 4px; padding: 0;
  max-width: 460px; width: calc(100vw - 32px);
  background: var(--white); color: var(--navy);
  box-shadow: 0 24px 60px rgba(27, 42, 74, .28);
}
.cart::backdrop { background: rgba(27, 42, 74, .55); }
.cart-form { padding: clamp(20px, 5vw, 30px); }
.cart-eyebrow {
  margin: 0 0 6px; font: 700 10px/1 var(--font-body);
  letter-spacing: .16em; text-transform: uppercase; color: var(--navy-soft);
}
.cart h2 { margin: 0 0 10px; font: 800 clamp(22px, 5vw, 28px)/1.05 var(--font-display); }
.cart-note { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: #2c3a58; }
.cart-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.cart input[type="email"] {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 16px;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
  color: var(--navy);
}
.cart input[type="email"]:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.cart .check { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; font-size: 13px; }
.cart .check input { margin-top: 2px; flex: 0 0 auto; }
.cart .hint { margin: 14px 0 0; font-size: 12px; }
.cart-msg {
  margin: 14px 0 0; padding: 9px 11px; border-radius: 3px; font-size: 13px;
  background: #fbe9df; border: 1px solid #f0b48c; color: #7a3b12;
}
.cart-msg.is-ok { background: #e6f0e4; border-color: #a8c9a0; color: #2c4a26; }
.cart-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
@media (max-width: 420px) { .cart-actions { flex-direction: column-reverse; } .cart-actions .btn { width: 100%; } }

/* ── the film ───────────────────────────────────────────────────────────────── */
/* These three were inline `style=` attributes on film.html, which the CSP (`style-src 'self'`, no
   'unsafe-inline') silently refuses to apply in production — so the film page's own H1 would have
   rendered as a browser-default heading on the live site while looking perfect locally. The CSP
   test only covered five pages and film.html was not one of them; it is now. */
.film-title { font: 800 clamp(26px, 6vw, 44px)/1 var(--font-display); margin: 0 0 6px; }
.film-meta { margin-top: 14px; }
.lede-center { margin-inline: auto; }

.film-wrap { max-width: 1100px; margin: 0 auto; padding: 0 var(--pad) 56px; }
.film-wrap video { width: 100%; height: auto; display: block; background: #0d1220; border-radius: 4px; }
.film-gate { text-align: center; padding: clamp(40px, 10vw, 90px) var(--pad); }
.film-gate h1 { font: 800 clamp(28px, 7vw, 52px)/1 var(--font-display); margin: 0 0 14px; }