/* Fluid sizes: each token is its design value at a 90rem (1440px) viewport and wider,
   its small value at 22.5rem (360px) and narrower, and linear in between. */
:root {
  --fs-display: clamp(2.375rem, calc(1.25rem + 5vw), 5.75rem);
  --fs-step: clamp(2.75rem, calc(2.3333rem + 1.8519vw), 4rem);
  --fs-date: clamp(1.125rem, calc(0.8333rem + 1.2963vw), 2rem);
  --fs-h3: clamp(1.25rem, calc(1.1667rem + 0.3704vw), 1.5rem);
  --fs-body: clamp(1rem, calc(0.9583rem + 0.1852vw), 1.125rem);
  --fs-small: clamp(0.875rem, calc(0.8333rem + 0.1852vw), 1rem);
  --sp-075: clamp(0.625rem, calc(0.5833rem + 0.1852vw), 0.75rem);
  --sp-1: clamp(0.875rem, calc(0.8333rem + 0.1852vw), 1rem);
  --sp-15: clamp(1.25rem, calc(1.1667rem + 0.3704vw), 1.5rem);
  --sp-2: clamp(1.75rem, calc(1.6667rem + 0.3704vw), 2rem);
  --sp-3: clamp(2.25rem, calc(2rem + 1.1111vw), 3rem);
  --section: clamp(3rem, calc(2.3333rem + 2.963vw), 5rem);
  --margin: clamp(1rem, calc(0.3333rem + 2.963vw), 3rem);
  --pad-card: clamp(1.5rem, calc(1.2083rem + 1.2963vw), 2.375rem);
  --device-w: clamp(7.5rem, calc(4.875rem + 11.6667vw), 15.375rem);
  --field-h: clamp(3rem, calc(2.8333rem + 0.7407vw), 3.5rem);
  --footer-h: clamp(7rem, calc(5.875rem + 5vw), 10.375rem);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 400 var(--fs-body) / 1.4 "Epilogue", system-ui, sans-serif; }
a { color: inherit; }
img { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Lander ---------- */

/* The page fills the window: the two steps stretch so the footer sits on the bottom edge. */
.lander { flex: 1 0 auto; display: flex; flex-direction: column; }
.lander .split { flex: 1 0 auto; }

.lander h1, .lander h2, .lander h3, .lander .h3, .lander p, .lander .price, .lander .chip span, .lander .pill {
  margin: 0;
  line-height: 1.1;
  text-box: trim-both cap alphabetic;
}

.hero { padding: var(--sp-3) var(--margin); text-align: center; }
.hero h1 { font: 400 var(--fs-display) / 1.06 "Anton SC", Impact, sans-serif; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; }
.hero h1 span { display: block; }
.hero h1 .accent { color: var(--accent); }
.hero .date { margin-top: var(--sp-3); font-size: var(--fs-date); letter-spacing: -0.01em; text-transform: uppercase; color: #fff; }

.strip { padding: 0 var(--margin) var(--sp-3); }
.strip .card { max-width: 56rem; margin: 0 auto; }

.split { display: grid; grid-template-columns: calc(50% + 12px) 1fr; min-height: clamp(30rem, 38.33vw, 46rem); }

.step { font: 400 var(--fs-step) / 1.1 "Anton SC", Impact, sans-serif; text-transform: uppercase; white-space: nowrap; }
.lander h3, .lander .h3 { display: block; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; text-transform: uppercase; }

/* Left edge sits 260px in on the 1920 frame and never closer than the site margin. */
.purchase { background: var(--panel); color: var(--bg); padding: var(--section) var(--margin) var(--section) max(var(--margin), calc(50vw - 700px)); }
.how { position: relative; overflow: hidden; width: min(100%, 37.0625rem); min-height: 18.3125rem; margin-top: var(--sp-2); padding: var(--pad-card) var(--pad-card) calc(var(--pad-card) - 4px); border-radius: 0.75rem; background: var(--bg); color: var(--text); }
.how .price { position: absolute; top: var(--pad-card); right: var(--pad-card); font: 400 var(--fs-step) / 1.1 "Anton SC", Impact, sans-serif; white-space: nowrap; }
.how-body { max-width: min(21.75rem, 68%); margin-top: var(--sp-15) !important; font-size: var(--fs-body); letter-spacing: -0.01em; }
.how .device { position: absolute; right: 0; bottom: 0; width: var(--device-w); height: auto; aspect-ratio: 246 / 149; object-fit: cover; object-position: bottom; pointer-events: none; }
.pill { position: relative; z-index: 1; display: inline-block; margin-top: var(--sp-15) !important; padding: 1rem 1.5rem; border: 0; border-radius: 999px; background: var(--accent); color: var(--text); font: 600 var(--fs-body) / 1.1 "Epilogue", sans-serif; letter-spacing: -0.01em; text-transform: uppercase; cursor: pointer; }
.how .pill { margin-top: 2.625rem !important; }
.pill:hover { filter: brightness(1.1); }
.pill:focus-visible, .lander a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.stripe { width: 9.375rem; height: 2.125rem; margin: calc(var(--sp-15) + 3px) 0 0 min(25.8125rem, calc(100% - 9.375rem)); }

.viewing { background-color: #0c1220; background-repeat: no-repeat; background-size: auto 114.27%; background-position: 30.98% 97.34%; padding: var(--section) var(--margin) var(--section) clamp(var(--margin), 4.95vw, 5.9375rem); }
.viewing .dot { display: inline-block; width: 0.375em; height: 0.375em; vertical-align: 0.24em; }
.viewing > h3 { margin-top: var(--sp-2); }
.countdown { display: inline-flex; gap: var(--sp-1); margin-top: var(--sp-15); padding: var(--sp-075); border-radius: 1rem; background: var(--accent); }
.chip { display: flex; gap: 2px; padding: 0.3em 0.25em; border-radius: 6px; background: var(--bg); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.entry { margin-top: var(--sp-3); }
.entry input { display: block; width: min(100%, 19.1875rem); height: var(--field-h); margin-top: var(--sp-15); padding: 0 1.25rem; border: 2px solid transparent; border-radius: 0.5rem; background: var(--text); color: var(--bg); font: 400 var(--fs-h3) / 1 "Epilogue", sans-serif; letter-spacing: -0.01em; outline: 0; }
.entry input[name="code"] { text-transform: uppercase; }
.entry input::placeholder { color: #bcbcbc; text-transform: uppercase; }
.entry input:focus { border-color: var(--accent); box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.25); }
.help { max-width: 20.75rem; margin-top: var(--sp-2) !important; font-size: var(--fs-body); letter-spacing: -0.01em; }

/* ---------- Shared cards (notices, return page, watch page) ---------- */

.card { background: var(--surface); border-radius: 0.75rem; padding: var(--sp-15); margin-top: var(--sp-15); }
.card h2 { margin: 0 0 0.5rem; font-size: var(--fs-h3); font-weight: 600; text-transform: uppercase; }
.card p { margin: 0.5rem 0; line-height: 1.4; text-box: none; }
.notice { border-left: 4px solid var(--accent); }
.card .link { word-break: break-all; }
.card .code { font-size: 1.25em; letter-spacing: 0.08em; }
.muted { color: var(--muted); }

/* ---------- Watch page ---------- */

main.watch { flex: 1 0 auto; width: 100%; max-width: 70rem; margin: 0 auto; padding: var(--sp-3) var(--margin) var(--section); }
main.watch h1 { margin: 0 0 0.5rem; font: 400 var(--fs-step) / 1.06 "Anton SC", Impact, sans-serif; text-transform: uppercase; }
main.watch button { border: 0; border-radius: 999px; padding: 1rem 1.5rem; background: var(--accent); color: var(--text); font: 600 var(--fs-body) / 1.1 "Epilogue", sans-serif; text-transform: uppercase; cursor: pointer; }
#player { aspect-ratio: 16 / 9; background: #000; border-radius: 0.75rem; overflow: hidden; }
#player iframe { width: 100%; height: 100%; border: 0; display: block; }
main.watch #countdown { font-size: var(--fs-date); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Footer ---------- */

.site-footer { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); min-height: var(--footer-h); padding: var(--sp-2) var(--margin); background: var(--bg); color: var(--text); font-size: var(--fs-small); font-weight: 300; text-align: center; }
.site-footer p { position: relative; margin: 0; line-height: 1.1; }
.site-footer .authorised { text-transform: uppercase; }
.site-footer a { text-decoration: none; }
/* The spiral is sized from the footer's height so it always runs off the top and bottom
   edges, as in the design; only the footer itself clips it. */
.footer-logo { position: absolute; left: calc(max(var(--margin), 50vw - 700px) - var(--footer-h) * 0.61); top: calc(var(--footer-h) * -1.108); width: calc(var(--footer-h) * 3.3); pointer-events: none; }
.footer-logo img { width: 100%; height: auto; }

/* ---------- Narrow screens: stack the two steps (no design for these yet) ---------- */

@media (max-width: 56.25rem) {
  .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .viewing { background-size: cover; background-position: 70% 50%; }
  .purchase, .viewing { padding: var(--section) var(--margin); }
  .how { min-height: 0; }
  .how-body { max-width: 100%; margin-top: calc(var(--sp-2) + 0.75rem) !important; }
  .how .pill { margin-top: var(--sp-2) !important; }
  .stripe { margin-left: 0; }
}

/* The spiral would run into the centred footer text on narrower screens. */
@media (max-width: 68.75rem) {
  .footer-logo { display: none; }
}