/* Bifrost Sports marketing site: the shared stylesheet
   (docs/features/queue/MARKETING-SITE-V2-PLAN.md §16 Phase 2).

   Moved out of landing.html's <style> so every marketing page and /welcome
   share one cached file. /welcome links it through
   src/routes/welcome-page.js, which reads the <link> tag from landing.html,
   so the tour's styles (.tour-wrap and below) live here too. Bump the ?v= in
   every page's <link> when this file changes. */

/* Bifrost Sports marketing page.
   The editorial bones of the first site (Fraunces with a gold italic
   accent, Hanken Grotesk, Anton index eyebrows) carrying the app itself:
   the sign-in tour built to the app's numbers, and real screens. Rink
   markings stay quiet structure. Dark only, like the sign-in screens. */

:root {
  --bg:        #0A0E1A;
  --bg-deep:   #060911;
  --card:      #0F1626;
  --ink:       #F5F2ED;
  --ink-2:     #CFCBC0;
  --muted:     #979DA6;
  --muted-2:   #7C8491;
  --line:      rgba(245, 242, 237, 0.09);
  --line-2:    rgba(245, 242, 237, 0.18);
  --teal:      #4D8CA6;
  --teal-lt:   #5FA3BD;
  --teal-tx:   #7DBED1;
  --gold:      #B59E5E;
  --gold-tx:   #D4BA7A;
  --gold-edge: rgba(181, 158, 94, 0.30);
  --shadow:    0 30px 80px -30px rgba(0, 0, 0, 0.8);
  --gutter:    36px;
}
@media (max-width: 720px) { :root { --gutter: 16px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { overflow-x: clip; }
html:has(body.menu-open) { overflow: hidden; }
body {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--gold); color: var(--bg-deep); }
:focus-visible { outline: 2px solid var(--teal-lt); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

/* The shared nav and footer (the shared:nav and shared:footer regions every
   marketing page carries) bring their own base type and stacking, so a page
   whose body sets another font or size (the legal pages) shows them the same
   as the home page. */
.nav, .menu-sheet, .site-foot { font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.6; }
.site-foot { position: relative; z-index: 2; }

/* Type */
.serif { font-family: 'Fraunces', Georgia, serif; font-variation-settings: "opsz" 144, "SOFT" 30; }
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-variation-settings: "opsz" 144, "SOFT" 30; font-weight: 380; letter-spacing: -0.02em; line-height: 1.04; }
h1 em, h2 em, h3 em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 80; color: var(--gold-tx); font-weight: 400; }
/* The app's broadcast eyebrow: Anton caps with an index and a hairline. */
.bx { display: flex; align-items: center; gap: 14px; font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-tx); }
.bx::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bx.gold { color: var(--gold-tx); }
.bx .ix { color: var(--muted-2); letter-spacing: 0.12em; }
@media (max-width: 560px) { .bx { font-size: 11.5px; letter-spacing: 0.16em; } }

html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.in { opacity: 1; transform: none; }

/* ─── Nav ─────────────────────────────────────────────────────── */

.nav { position: sticky; top: 0; z-index: 40; background: rgba(10, 14, 26, 0.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.nav-row { display: flex; align-items: center; gap: 28px; height: 66px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(95, 163, 189, 0.3); }
.brand .words { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.brand .word { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; }
.brand .word span { color: var(--teal-lt); margin-left: 3px; }
.brand .est { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.nav-links { display: flex; gap: 26px; list-style: none; font-weight: 500; font-size: 15px; }
.nav-links a { color: var(--ink-2); padding: 8px 0; }
.nav-links a:hover { color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; font-weight: 700; font-size: 15px; border-radius: 8px; transition: background .15s, color .15s, border-color .15s; }
.btn-gold { background: var(--gold); color: var(--bg-deep); }
.btn-gold:hover { background: var(--gold-tx); }
.btn-line { border: 1px solid var(--line-2); color: var(--ink); }
.btn-line:hover { border-color: var(--ink-2); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 999px; border: 1px solid var(--gold-edge); color: var(--gold-tx); background: none; }
.btn-sm:hover { background: var(--gold); color: var(--bg-deep); }
.menu-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--line-2); }
.menu-btn svg { width: 20px; height: 20px; }
.menu-btn[aria-expanded="true"] .i-open, .menu-btn .i-close { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }
.menu-sheet { position: fixed; left: 0; right: 0; top: calc(66px + env(safe-area-inset-top)); bottom: 0; background: var(--bg); z-index: 39; padding: 12px var(--gutter) 32px; overflow-y: auto; }
.menu-sheet ul { list-style: none; }
.menu-sheet li a { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); font-family: 'Fraunces', serif; font-size: 28px; }
.menu-sheet .btn { width: 100%; margin-top: 28px; }
@media (max-width: 900px) { .nav-links, .nav-cta { display: none; } .menu-btn { display: inline-flex; } }
@media (max-width: 400px) { .brand .est { display: none; } }

/* ─── Hero ────────────────────────────────────────────────────── */

.hero { position: relative; padding: 88px 0 80px; overflow: hidden; overflow: clip; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(58px, 8.4vw, 112px); line-height: 0.98; letter-spacing: -0.028em; margin: 22px 0 26px; font-weight: 330; }
/* The home H1 sits on one row, sized from its own column, not the viewport.
   The clamp() is the fallback for browsers without container query units. */
.hero .hero-copy { container-type: inline-size; min-width: 0; }
.hero h1.h1-row { white-space: nowrap; font-size: clamp(36px, 5.6vw, 72px); font-size: min(96px, 13.5cqi); }
.hero .lede { font-size: 19px; color: var(--ink-2); max-width: 540px; }
.hero .lede b { color: var(--ink); font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.forks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 15px; }
.forks a { color: var(--teal-tx); border-bottom: 1px solid rgba(125, 190, 209, 0.35); padding-bottom: 1px; }
.forks a:hover { color: var(--ink); border-color: var(--ink-2); }
.fine { margin-top: 26px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 18px; letter-spacing: 0.02em; }
.fine span { display: inline-flex; align-items: center; gap: 8px; }
.fine span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
@media (max-width: 980px) {
  .hero { padding: 44px 0 52px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ─── The tour card ───────────────────────────────────────────────
   The app's sign-in tour (WelcomeTourView + TourDemoCards), built to the
   app's own numbers: AuthDemoShell's eyebrow row over a 292pt tile, the
   pages laid out as their widgets are, SF condensed for the big numerals,
   Anton for eyebrows. Values cite the Swift source they come from. */

.tour-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.tour {
  --controls: 40px;
  --hair: rgba(245, 242, 237, 0.14);
  --gold: #B59E5E;
  --ink: #F5F2ED;
  --teal: #4D8CA6;
  --green: #30D158;
  --orange: #FF9E0A;
  --red: #FF453A;
  --tint: var(--teal);
  /* The app's 292pt tile, plus the strip of dots and pause along its foot. */
  position: relative; width: 100%; max-width: 460px; height: calc(292px + var(--controls));
  border-radius: 14px; overflow: hidden; overflow: clip;
  background: #0E1320;
  box-shadow: inset 0 0 0 1px rgba(181, 158, 94, 0.22), 0 30px 70px -30px rgba(0, 0, 0, 0.85);
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--ink);
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.tour:active { cursor: grabbing; }
.tour[data-tint="live"] { --tint: var(--red); }
.tour[data-tint="gold"] { --tint: var(--gold); }
.cond { font-stretch: condensed; }

/* Surfaces: BroadcastSurfaceFill for the plain pages, the hero surface plus
   FadedTeamLogosBackground for the matchup pages. They cross-fade, as the
   app's shell does (0.25s ease-in-out). */
.tour-plain, .tour-bg { position: absolute; inset: 0; pointer-events: none; transition: opacity .25s ease-in-out; }
.tour-plain { background: linear-gradient(135deg, rgba(43, 46, 54, 0.90), rgba(43, 46, 54, 0.76)); }
.tour-bg { opacity: 0; background: linear-gradient(rgba(77, 140, 166, 0.06), rgba(77, 140, 166, 0.06)), linear-gradient(135deg, rgba(10, 14, 26, 0.72), rgba(10, 14, 26, 0.52)); }
.tour.matchup .tour-bg { opacity: 1; }
.tour.matchup .tour-plain { opacity: 0; }
.tour-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(184, 148, 63, 0.16), rgba(184, 148, 63, 0) 50%, rgba(95, 179, 212, 0) 50%, rgba(95, 179, 212, 0.16)); }
.tour-bg img { position: absolute; width: 158px; height: 158px; top: calc((100% - var(--controls)) / 2 - 79px); border-radius: 50%; opacity: 0.12; }
.tour-bg img:first-child { left: calc(min(120px, 10%) - 158px); }
.tour-bg img:last-child { right: calc(min(120px, 10%) - 158px); }

/* AuthDemoShell eyebrow row: glyph, Anton eyebrow, trailing date or pill. */
.tour-head { position: relative; display: flex; align-items: center; gap: 4px; min-height: 17px; padding: 10px 12px 6px; }
.tour-icon { width: 11px; height: 11px; color: var(--tint); display: inline-flex; }
.tour-icon svg { width: 11px; height: 11px; }
.anton { font-family: 'Anton', 'Arial Narrow', sans-serif; font-weight: 400; text-transform: uppercase; }
.tour-eyebrow { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--tint); line-height: 1.2; }
.tour-trailing { margin-left: auto; font-size: 9px; font-weight: 800; line-height: 1.2; color: rgba(245, 242, 237, 0.6); white-space: nowrap; }
.tour-trailing.pill { font-size: 11px; font-weight: 700; color: var(--gold); background: rgba(181, 158, 94, 0.15); padding: 2px 6px; border-radius: 999px; }
.hair { height: 1px; background: var(--hair); }
.tour-viewport { position: absolute; left: 0; right: 0; top: 33px; bottom: var(--controls); overflow: hidden; overflow: clip; display: flex; flex-direction: column; }
.tour-track { display: flex; flex: 1; min-height: 0; transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
.tour-slide { flex: 0 0 100%; height: 100%; position: relative; }
html:not(.js) .tour-slide ~ .tour-slide { display: none; }

/* PageIndicatorDots: 8pt active in gold, 6pt tertiary, spacing 6. */
/* The game timeline along the card's foot: played steps are gold dots, the
   live one a pill that fills over its dwell, the rest grey dots. Live runs
   twice as long, split into three periods. The slide changes when the fill
   ends. The card's own eyebrow names the step, so nothing here repeats it. */
.tour-rail { position: absolute; left: 0; right: 0; bottom: 0; height: var(--controls); display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid var(--hair); cursor: default; }
.dots { display: flex; align-items: center; }
.dots button { height: var(--controls); padding: 0 5px; display: flex; align-items: center; }
/* The card clips its edges, so a dot's focus ring sits inside the button. */
.dots button:focus-visible { outline-offset: -2px; }
.dots .seg { position: relative; display: block; width: 6px; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(235, 235, 245, 0.28); transition: width .45s cubic-bezier(.2, .7, .2, 1), background .3s; }
.dots button:hover .seg { background: rgba(235, 235, 245, 0.5); }
.dots button.done .seg { background: rgba(181, 158, 94, 0.6); }
.dots button[aria-current="true"] .seg { width: 44px; background: rgba(235, 235, 245, 0.16); }
.dots button[data-live][aria-current="true"] .seg { width: 88px; }
.dots .seg i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: #B59E5E; }
.dots button { --dwell: 6s; }
.dots button[data-live] { --dwell: 12s; }
.dots button[aria-current="true"] .seg i { animation: seg-fill var(--dwell) linear both; }
.dots button[data-live][aria-current="true"] .seg::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, transparent calc(33.33% - 1px), var(--bg) calc(33.33% - 1px) calc(33.33% + 1px), transparent calc(33.33% + 1px) calc(66.67% - 1px), var(--bg) calc(66.67% - 1px) calc(66.67% + 1px), transparent calc(66.67% + 1px)); }
.tour-wrap.held .dots .seg i, .tour-wrap.stopped .dots .seg i, .tour-wrap.away .dots .seg i { animation-play-state: paused; }
.dots.static button[aria-current="true"] .seg i { animation: none; width: 100%; }
@keyframes seg-fill { to { width: 100%; } }
.tour-pause { width: 28px; height: 28px; border-radius: 50%; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); }
.tour-pause:hover { border-color: var(--line-2); color: var(--ink); }
.tour-pause svg { width: 11px; height: 11px; }
.tour-pause .i-play, .tour-pause[aria-pressed="true"] .i-pause { display: none; }
.tour-pause[aria-pressed="true"] .i-play { display: block; }
/* Reduced motion: no autoplay, so landing.js hides the pause; the display above would override [hidden]. */
.tour-pause[hidden] { display: none; }
/* Without script there is one card and nothing to step through. */
html:not(.js) .tour { --controls: 0px; }
html:not(.js) .tour-rail { display: none; }
@media (prefers-reduced-motion: reduce) { .dots .seg { transition: none; } }
/* The live card's ticker line under the logos (LiveLastEventLine): the save
   that holds it at 2-2, then the goal, pushed up from below as the score flips. */
.ev { display: flex; justify-content: center; margin: 0; font-size: 12px; color: rgba(245, 242, 237, 0.6); white-space: nowrap; }
.ev .swap > span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ev svg { width: 10px; height: 10px; color: rgba(245, 242, 237, 0.6); }
.ev .goal svg { color: #30D158; }
.is-active .evswap .from { animation: ev-out .35s 1.6s both; }
.is-active .evswap .to { animation: ev-in .35s 1.6s both; }
@keyframes ev-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes ev-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The matchup pages: VStack(spacing 4) { Spacer; grid; Spacer(min 6); venue }
   padded 14 / 12 / 14, so the matchup sits centred in the space above the
   venue line, the way the Home hero spends its height. */
.mu-page { height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.mu-page .grow { flex: 1 1 0; min-height: 0; }
.mu-page .grow.min6 { min-height: 6px; }
.mu { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 8px; row-gap: 8px; align-items: center; justify-items: center; }
/* BroadcastSidePill: 9pt heavy caps, tracking 1.6, ink 0.85 on ink 0.10, radius 5. */
.side-pill { font-size: 9px; font-weight: 800; letter-spacing: 1.6px; color: rgba(245, 242, 237, 0.85); background: rgba(245, 242, 237, 0.10); padding: 3px 9px; border-radius: 5px; line-height: 1.2; }
/* AuthDemoCrest: a 48pt crest with a 2pt team ring 4pt wider. */
.crest { position: relative; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; }
.crest img { width: 48px; height: 48px; border-radius: 50%; }
.crest::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ring); }
.crest.va { --ring: rgba(184, 148, 63, 0.85); }
.crest.fg { --ring: rgba(95, 179, 212, 0.85); }
.tname { font-weight: 700; font-size: 15px; font-stretch: condensed; text-align: center; line-height: 1.15; }
.eb { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); line-height: 1.2; }
.time { font-size: 28px; font-weight: 900; font-stretch: condensed; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.vs { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 4px; color: rgba(245, 242, 237, 0.6); padding-left: 4px; }
.rec { font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; }
.cd { font-size: 15px; font-weight: 600; font-family: ui-rounded, system-ui, sans-serif; color: rgba(245, 242, 237, 0.6); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* BroadcastMatchupVenueLine: caption at ink 0.6, the dots at 0.35. */
.venue { text-align: center; font-size: 12px; color: rgba(245, 242, 237, 0.6); white-space: nowrap; }
.venue i { font-style: normal; color: rgba(245, 242, 237, 0.35); }
.score { display: flex; align-items: center; gap: 6px; font-size: 34px; font-weight: 900; font-stretch: condensed; font-variant-numeric: tabular-nums; line-height: 1; }
.score .dash { font-size: 20px; font-weight: 700; color: rgba(245, 242, 237, 0.6); }
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; }
.swap .to { opacity: 0; }

/* Game day: GameDayPlannerCard with the team chat landing in it. */
.gd { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.gd .gd-title { font-size: 20px; font-weight: 700; line-height: 1.2; }
.chips { display: flex; gap: 6px; }
.chip { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.chip.in { color: var(--green); background: rgba(48, 209, 88, 0.15); }
.chip.pend { color: var(--orange); background: rgba(255, 158, 10, 0.15); }
.chip.out { color: rgba(245, 242, 237, 0.6); background: rgba(245, 242, 237, 0.09); }
.bubbles { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.bub { display: flex; align-items: flex-end; gap: 6px; font-size: 15px; opacity: 0; }
.bub p { padding: 6px 12px; border-radius: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bub.inc p { background: rgba(245, 242, 237, 0.1); border-bottom-left-radius: 4px; }
.bub.out { justify-content: flex-end; }
.bub.out p { background: var(--teal); color: #fff; border-bottom-right-radius: 4px; }
.avatar { width: 24px; height: 24px; border-radius: 50%; flex: none; object-fit: cover; }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.door { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 600; padding: 8px 0; border-radius: 12px; color: var(--teal); background: rgba(77, 140, 166, 0.12); }
.door svg { width: 15px; height: 15px; }
.door.fill { background: #3F7D96; color: #fff; } /* the app's teal, a shade deeper so white text passes 4.5:1 */

/* Live: LiveHeroCard's pulse, period and score. */
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; animation: blink 1.2s ease-in-out infinite alternate; }
@keyframes blink { to { opacity: 0.4; } }
.period { font-size: 11px; font-weight: 900; letter-spacing: 2px; color: var(--red); display: inline-flex; align-items: center; gap: 5px; }

/* Game Wrapped: WrappedHeroPage. */
.wr-page { height: 100%; display: flex; flex-direction: column; }
.wr-body { flex: 1; display: flex; flex-direction: column; padding: 12px 14px 10px; }
.wr-body .grow { flex: 1 1 0; min-height: 6px; }
.result { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--green); background: rgba(48, 209, 88, 0.15); padding: 2px 7px; border-radius: 999px; }
.night { display: flex; justify-content: center; gap: 10px; line-height: 1.2; font-size: 12px; font-weight: 600; }
.night .n1 { color: rgba(245, 242, 237, 0.75); }
.night .n2, .night .n3 { color: var(--gold); opacity: 0; display: inline-flex; align-items: center; gap: 3px; }
.night svg { width: 10px; height: 10px; }
.headline { text-align: center; line-height: 1.2; font-size: 20px; font-weight: 800; font-stretch: condensed; white-space: nowrap; }
/* BroadcastCardFooter: icon, caption, chevron, on a 6% tint. */
.foot { display: flex; align-items: center; gap: 6px; padding: 10px 12px 12px; font-size: 12px; color: var(--ftint); background: color-mix(in srgb, var(--ftint) 6%, transparent); box-shadow: inset 0 0.5px 0 rgba(245, 242, 237, 0.08); }
.foot svg { width: 12px; height: 12px; }
.foot .chev { margin-left: auto; color: rgba(245, 242, 237, 0.4); }
.foot.gold { --ftint: #B59E5E; }
.foot.teal { --ftint: #4D8CA6; }

/* Your Standing: StandingContextPage. */
.st-page { height: 100%; display: flex; flex-direction: column; }
.st { flex: 1; padding: 10px 12px 0; }
.st .rankline { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.st .rankline .r { font-size: 22px; font-weight: 900; font-stretch: condensed; color: var(--gold); }
.st .rankline > span:last-child { font-size: 15px; font-weight: 500; color: rgba(245, 242, 237, 0.62); }
.st .th, .st .row { display: grid; grid-template-columns: 1fr 34px 78px 34px; align-items: center; padding: 0 6px; }
.st .th { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; color: rgba(245, 242, 237, 0.42); padding-bottom: 5px; }
.st .th span, .st .row .n, .st .row .p { text-align: right; }
.st .th span:first-child { text-align: left; }
.st .rows { position: relative; height: 116px; }
.st .row { position: absolute; left: 0; right: 0; height: 29px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.st .row .nm { display: flex; align-items: center; gap: 7px; font-size: 15px; color: rgba(245, 242, 237, 0.85); white-space: nowrap; }
.st .row .pl { width: 15px; text-align: right; font-size: 12px; color: rgba(245, 242, 237, 0.55); }
.st .row .gp { text-align: right; font-size: 12px; color: rgba(245, 242, 237, 0.5); }
.st .row .n { font-size: 12px; color: rgba(245, 242, 237, 0.72); }
.st .row .p { font-size: 15px; font-weight: 700; color: var(--ink); }
.st .row.lead .nm { color: var(--gold); }
.st .row.lead .pl { color: var(--gold); font-weight: 700; }
.st .row.you { background: rgba(245, 242, 237, 0.05); box-shadow: inset 0 0 0 1px rgba(245, 242, 237, 0.08); border-radius: 10px; }
.st .row.you .nm { font-weight: 700; color: var(--ink); }
.st .row.you .pl { font-weight: 700; color: rgba(245, 242, 237, 0.9); }
.you-pill { font-size: 11px; font-weight: 700; color: var(--gold); background: rgba(181, 158, 94, 0.15); padding: 2px 6px; border-radius: 999px; }
.r1 { top: 0; } .r2 { top: 29px; } .r3 { top: 58px; } .r4 { top: 87px; }

/* Playoffs: SeasonBracketView in miniature, BracketMatchCard bands. */
.br { height: 100%; display: flex; align-items: center; padding: 0 12px; }
.br .col { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.br .fin { flex: 1; min-width: 0; }
.mc { height: 84px; border-radius: 6px; background: rgba(245, 242, 237, 0.06); box-shadow: inset 0 0 0 1px rgba(245, 242, 237, 0.12); overflow: hidden; display: flex; flex-direction: column; }
.mc .hd { display: flex; align-items: center; gap: 5px; padding: 5px 8px 4px; border-bottom: 1px solid rgba(245, 242, 237, 0.12); font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(245, 242, 237, 0.6); white-space: nowrap; }
.mc.title .hd { color: var(--gold); }
.mc .hd svg { width: 11px; height: 11px; color: var(--gold); flex: none; }
.mc .hd .g { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; color: rgba(245, 242, 237, 0.4); }
.mc .tr { flex: 1; display: flex; align-items: center; padding: 0 8px; font-size: 12px; position: relative; overflow: hidden; }
.mc .tr + .tr { border-top: 1px solid rgba(245, 242, 237, 0.12); }
.mc .team { flex: 1; min-width: 0; display: flex; align-items: center; position: relative; z-index: 1; }
.mc .team.swap { display: grid; justify-items: start; align-items: center; }
.mc .tr img { width: 18px; height: 18px; border-radius: 50%; margin-right: 5px; }
.mc .tr .sd { width: 10px; text-align: right; font-size: 11px; color: rgba(245, 242, 237, 0.45); margin-right: 5px; font-variant-numeric: tabular-nums; }
.mc .tr .tn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc .tr .sc { width: 17px; text-align: right; font-variant-numeric: tabular-nums; color: rgba(245, 242, 237, 0.5); position: relative; z-index: 1; }
.mc .tr .pend { color: rgba(245, 242, 237, 0.4); }
.conn { width: 18px; height: 178px; flex: none; }
.conn path { fill: none; stroke: rgba(245, 242, 237, 0.2); stroke-width: 1.5; }
/* ChampionShimmer: a gold wash with a slow sheen crossing it (2.2s). */
.sheen { position: absolute; inset: 0; background: rgba(181, 158, 94, 0.16); opacity: 0; }
.sheen::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(90deg, transparent, rgba(181, 158, 94, 0.45), transparent); animation: sheen 2.2s linear infinite; }
@keyframes sheen { to { left: 100%; } }

/* ─── Each page runs its story while it is showing (the app's isActive). */
@keyframes in-left { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes out { to { opacity: 0; } }
@keyframes on { to { opacity: 1; } }
@keyframes up-one { to { transform: translateY(-29px); } }
@keyframes down-one { to { transform: translateY(29px); } }
@keyframes gold-line { to { stroke: #B59E5E; } }
@keyframes gold-score { to { color: #B59E5E; font-weight: 700; } }
@keyframes win-name { to { font-weight: 600; } }
@keyframes champ-name { to { color: #B59E5E; font-weight: 600; } }
@keyframes lose { to { color: rgba(245, 242, 237, 0.5); } }

.is-active .bub.inc { animation: in-left .45s .5s both; }
.is-active .bub.out { animation: in-right .45s 1.6s both; }
.is-active .swap.s1 .from { animation: out .6s 2.3s both; }
.is-active .swap.s1 .to { animation: on .6s 2.3s both; }
.is-active .swap.s2 .from { animation: out .35s 1.6s both; }
.is-active .swap.s2 .to { animation: on .35s 1.6s both; }
.is-active .night .n2 { animation: pop .4s .7s both; }
.is-active .night .n3 { animation: pop .4s 1.4s both; }
.is-active .swap.s3 .from { animation: out .5s 1s both; }
.is-active .swap.s3 .to { animation: on .5s 1s both; }
.is-active .row.climb { animation: up-one .6s 1s cubic-bezier(.3, .7, .2, 1) both; }
.is-active .row.drop { animation: down-one .6s 1s cubic-bezier(.3, .7, .2, 1) both; }
.is-active .conn .c1 { animation: gold-line .3s 1s both; }
.is-active .conn .c2 { animation: gold-line .3s 2s both; }
.is-active .swap.b1 .from { animation: out .3s 1s both; }
.is-active .swap.b1 .to { animation: on .3s 1s both; }
.is-active .swap.b2 .from { animation: out .3s 2s both; }
.is-active .swap.b2 .to { animation: on .3s 2s both; }
.is-active .swap.b3 .from { animation: out .3s 3s both; }
.is-active .swap.b3 .to { animation: on .3s 3s both; }
.is-active .w1 .tn { animation: win-name .3s 1s both; }
.is-active .w1 .sc { animation: gold-score .3s 1s both; }
.is-active .l1x .tn { animation: lose .3s 1s both; }
.is-active .w2 .tn { animation: win-name .3s 2s both; }
.is-active .w2 .sc { animation: gold-score .3s 2s both; }
.is-active .l2x .tn { animation: lose .3s 2s both; }
.is-active .champ .sheen { animation: on .4s 3s both; }
.is-active .champ .tn { animation: champ-name .4s 3s both; }
.is-active .champ .sc { animation: gold-score .4s 3s both; }
.is-active .loser .tn, .is-active .loser .sc { animation: lose .4s 3s both; }
@media (prefers-reduced-motion: reduce) {
  .tour-track, .tour-plain, .tour-bg { transition: none; }
  .tour *, .tour *::before { animation-delay: 0s !important; animation-duration: 0.01ms !important; }
  .pulse, .sheen::after { animation: none !important; }
}


/* ─── Polish: arena light, the ghost mark, device glow ────────────
   Quiet by default. Motion only where it says something (a live dot,
   the eyebrow wipe), all of it off under reduced motion. */

/* The ghost of the Viking mark: the app's BroadcastGhostMark in CSS. */
.ghost-mark {
  position: absolute; top: -130px; right: 20px; width: 620px; height: 620px;
  object-fit: contain; pointer-events: none; user-select: none; z-index: 0;
  filter: grayscale(1) sepia(1) hue-rotate(8deg) saturate(1.9) brightness(0.62);
  opacity: 0.18;
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 18%, transparent 72%);
}
/* Side by side, the card sits low so the mark's face shows above it. */
@media (min-width: 981px) { .hero-grid { align-items: end; } .tour-wrap { padding-top: 150px; } }

/* ─── The hero in the app's own look (owner pick, 2026-10-09) ───────
   Built from the app's design rules (docs/claude/design-system.md): the
   page black, the Anton section title with its trailing rule and the gold
   IN BETA capsule, Anton for the headline (the app's display face,
   BifrostDesign.displayFont), the teal filled button and the slate plate
   on 10px corners, and the teal outline chips. Scoped to .hero-app because
   /welcome reuses this stylesheet and keeps its own hero. */
.hero.hero-app { background: #000; }
.nav.nav-app { background: rgba(0, 0, 0, 0.84); border-bottom-color: rgba(181, 158, 94, 0.22); }
.hero-app .hero-copy { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; }
.hero-app .bx { color: var(--teal-lt); font-size: 15px; letter-spacing: 0.18em; gap: 12px; }
/* The hero's eyebrow stands alone, no trailing rule (owner, 2026-10-09). */
.hero-app .bx::after { display: none; }
.hero-app .beta-cap { padding: 3px 10px; border-radius: 999px; background: rgba(181, 158, 94, 0.16); box-shadow: inset 0 0 0 1px rgba(181, 158, 94, 0.45); color: var(--gold-tx); font-size: 12px; letter-spacing: 0.16em; }
.hero-app h1.h1-row { font-family: 'Anton', Impact, 'Arial Narrow', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; margin: 20px 0 22px; }
.hero-app h1 em { font-style: normal; }
.hero-app .lede { font-size: 18px; line-height: 1.6; color: rgba(235, 235, 245, 0.72); max-width: 560px; }
.hero-app .lede b { color: var(--ink); font-weight: 700; }
.hero-app .hero-cta { margin-top: 30px; }
.hero-app .btn { border-radius: 10px; min-height: 52px; font-size: 17px; }
.btn-app { background: var(--teal); color: #0A0E1A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.btn-app:hover { background: var(--teal-lt); }
.btn-plate { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: var(--ink); }
.btn-plate:hover { background: rgba(255, 255, 255, 0.09); }
/* The forks are plain links: teal text, and an underline that rises into
   place on hover or keyboard focus (owner, 2026-10-09). The block padding
   keeps a full-height tap target without moving the underline. */
.hero-app .forks { align-items: baseline; gap: 2px 22px; margin-top: 24px; }
.hero-app .forks-label { font-family: 'Anton', sans-serif; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(235, 235, 245, 0.55); margin-right: 2px; }
.hero-app .forks a { padding: 10px 0; border: 0; color: var(--teal-tx); font-size: 16px; font-weight: 600; text-decoration-line: underline; text-decoration-thickness: 1.5px; text-decoration-color: transparent; text-underline-offset: 10px; transition: color .2s ease, text-decoration-color .2s ease, text-underline-offset .2s ease; }
.hero-app .forks a:focus-visible { color: var(--ink); text-decoration-color: currentColor; text-underline-offset: 5px; }
/* Touch screens keep :hover after a tap, so the lift is for pointers only. */
@media (hover: hover) { .hero-app .forks a:hover { color: var(--ink); text-decoration-color: currentColor; text-underline-offset: 5px; } }
@media (prefers-reduced-motion: reduce) { .hero-app .forks a { transition: none; } }
.hero-app .fine { color: rgba(235, 235, 245, 0.6); }
/* Phones: one column that reads as one piece. The two buttons share the row
   evenly (and stack when even 140px each will not fit), the lede steps down
   a size, and the spacing tightens. */
@media (max-width: 560px) {
  .hero-app .forks-label { flex-basis: 100%; }
  .hero-app .lede { font-size: 17px; line-height: 1.55; }
  .hero-app .hero-cta { margin-top: 26px; }
  .hero-app .hero-cta .btn { flex: 1 1 140px; padding: 0 12px; }
  .hero-app .forks { margin-top: 20px; }
  .hero-app .fine { margin-top: 16px; }
  .hero-app .hero-grid { gap: 36px; }
}
/* Side by side, the copy and the tour card center on each other, and the
   Heimdall mark centers behind the card (owner, 2026-10-09). The mark lives
   in the card's column (.hero-visual), so it follows the card at any width;
   z-index -1 keeps it under the copy and the card inside the grid, and it is
   sized past the card so the helmet shows above it and the beard below. */
.hero-app .ghost-mark { z-index: -1; max-width: none; }
@media (min-width: 981px) {
  .hero-app .hero-grid { align-items: center; }
  .hero-app .tour-wrap { padding-top: 0; }
  .hero-app .hero-visual { position: relative; }
  .hero-app .ghost-mark { top: 50%; right: auto; left: 50%; width: 880px; height: 880px; transform: translate(-50%, -50%); }
}
/* Stacked, the mark centers behind the headline instead: the card is opaque
   and would hide it, and pinned to the right edge it read as a stray shape
   (owner, 2026-10-09). The column is not positioned here, so the grid is the
   mark's box, and its top is the hero's content edge. */
@media (max-width: 980px) { .hero-app .ghost-mark { left: 50%; right: auto; top: -150px; transform: translateX(-50%); } }
@media (max-width: 560px) { .hero-app .ghost-mark { top: -110px; width: 360px; height: 360px; } }

/* The score ticker as the app's results rows: a plate per game with a
   3px status stripe (gold final, red live, teal upcoming). */
.ticker.ticker-app { background: #000; background-image: none; border-color: rgba(181, 158, 94, 0.22); }
.ticker.ticker-app::before { background: linear-gradient(90deg, #000, transparent); }
.ticker.ticker-app::after { background: linear-gradient(-90deg, #000, transparent); }
.ticker-app .ticker-run { gap: 10px; padding: 12px 5px; }
.ticker-app .tk { position: relative; overflow: hidden; border: 0; border-radius: 10px; padding: 9px 16px 9px 18px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-size: 15px; font-weight: 700; }
.ticker-app .tk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--teal-lt); }
.ticker-app .tk:has(.st8.final)::before { background: var(--gold); }
.ticker-app .tk:has(.st8.live)::before { background: #FF453A; }
.ticker-app .tk b:not(.dim) { color: var(--ink); text-shadow: none; }
.ticker-app .tk .st8 { color: var(--teal-lt); }
.ticker-app .tk .st8.final { color: var(--gold-tx); }
.ticker-app .tk .st8.live { color: #FF6961; }
@media (max-width: 980px) { .ghost-mark { width: 440px; height: 440px; top: 30px; right: -120px; opacity: 0.16; } }
@media (max-width: 560px) { .ghost-mark { width: 320px; height: 320px; top: 56px; right: -120px; opacity: 0.14; } }

/* Arena light from above, cold and faint. */
.hero::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 70%; pointer-events: none; background: radial-gradient(55% 60% at 72% 0%, rgba(95, 179, 212, 0.07), transparent 72%); }

/* The tour card sits on ice: a soft light pooled under it. */
.tour-wrap { position: relative; }
.tour-wrap::before { content: ""; position: absolute; left: 10%; right: 10%; top: calc(100% - 64px); height: 72px; z-index: -1; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(95, 179, 212, 0.16), transparent 72%); filter: blur(14px); }

/* Devices: a rim of arena light and a pool of it on the ice below. */
.phone, .ipad { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(95, 179, 212, 0.05), 0 34px 70px -28px rgba(95, 179, 212, 0.22), var(--shadow); }
.phone picture, .ipad picture { display: block; }
@media (max-width: 980px) { .story-shot .phone { transition: transform .35s cubic-bezier(.2, .7, .2, 1); } }
@media (max-width: 980px) and (hover: hover) { .story-shot:hover .phone { transform: translateY(-6px); } }

/* Broadcast lower-third: chapter eyebrows wipe in, rule and all. */
html.js .bx.reveal { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path .8s cubic-bezier(.2, .7, .2, 1); }
html.js .bx.reveal.in { clip-path: inset(0 0 0 0); }

/* "handled." catches the light once on arrival, like the app's gold sheen. */
.hero h1 em { background: linear-gradient(100deg, var(--gold-tx) 40%, #F4E3B0 50%, var(--gold-tx) 60%) 100% 0 / 250% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; animation: em-sheen 2.4s .6s cubic-bezier(.3, .6, .3, 1) both; }
@keyframes em-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* A little depth: the tour card drifts up as the page scrolls. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .tour-wrap { animation: tour-drift linear both; animation-timeline: scroll(root); animation-range: 0 720px; }
    @keyframes tour-drift { to { transform: translateY(-32px); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .bx.reveal { clip-path: none; transition: none; }
  .hero h1 em { animation: none; background-position: 0 0; }
  .story-shot .phone { transition: none; }
}


/* ─── Score ticker ────────────────────────────────────────────── */

.ticker { position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-deep); overflow: hidden; overflow: clip; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg-deep), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--bg-deep), transparent); }
.ticker-run { display: flex; width: max-content; animation: tick 70s linear infinite; }
.ticker.paused .ticker-run, .ticker:hover .ticker-run { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-run { animation: none; } }
.tk { display: flex; align-items: center; gap: 10px; padding: 14px 28px; border-right: 1px solid var(--line); white-space: nowrap; font-family: system-ui, -apple-system, sans-serif; font-stretch: condensed; font-weight: 600; font-size: 16px; }
.tk .st8 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.tk .st8.live { color: #FF453A; }
.tk .st8.final { color: var(--gold); }
.tk img { width: 22px; height: 22px; border-radius: 50%; }
.tk b { font-weight: 900; font-variant-numeric: tabular-nums; min-width: 12px; text-align: center; }
.tk .dim { color: var(--muted); }
/* Scoreboard: an LED dot field behind the run, lit numbers on it. */
.ticker { background-image: radial-gradient(rgba(245, 242, 237, 0.045) 1px, transparent 1.3px); background-size: 6px 6px; }
.tk b:not(.dim) { color: #F2DDA0; text-shadow: 0 0 10px rgba(242, 221, 160, 0.45); }
.tk .st8.live { display: inline-flex; align-items: center; gap: 7px; }
.tk .st8.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF453A; box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.6); animation: live-dot 1.8s ease-out infinite; }
@keyframes live-dot { 70% { box-shadow: 0 0 0 7px rgba(255, 69, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0); } }
@media (prefers-reduced-motion: reduce) { .tk .st8.live::before { animation: none; } }

/* ─── Sections ────────────────────────────────────────────────── */

.section { padding: 64px 0; position: relative; }
.section + .section { padding-top: 8px; }
/* In-page links land below the sticky nav, with the eyebrow in view. */
section[id] { scroll-margin-top: calc(66px + env(safe-area-inset-top)); }
.section + .section:not(.beta-section) { scroll-margin-top: calc(66px + 28px + env(safe-area-inset-top)); }
#screens, #beta { scroll-margin-top: calc(66px - 36px + env(safe-area-inset-top)); }
#tower { scroll-margin-top: calc(66px - 20px + env(safe-area-inset-top)); }
.section + .section.beta-section { padding-top: 64px; }
@media (max-width: 720px) { .section { padding: 56px 0; } .section + .section.beta-section { padding-top: 56px; } }
.sec-h { font-size: clamp(38px, 4.6vw, 58px); margin: 22px 0 14px; max-width: 880px; }
.sec-sub { font-size: 18px; color: var(--ink-2); max-width: 640px; }

/* Screens rail */
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.rail-btns { display: flex; gap: 10px; flex: none; }
.rail-btns button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; }
.rail-btns button:hover:not(:disabled) { border-color: var(--ink-2); }
.rail-btns button:disabled { opacity: 0.3; cursor: default; }
.rail-btns svg { width: 16px; height: 16px; }
@media (max-width: 720px) { .rail-btns { display: none; } }
/* Screens: one game night. Narrow screens swipe a rail of phone and caption
   pairs; wide screens pin one phone while the steps scroll past it and the
   screen changes with each step. One set of markup serves both. */
.story { display: grid; grid-template-rows: auto auto; grid-auto-columns: 260px; column-gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 44px var(--gutter) 12px; margin: 0 calc(-1 * var(--gutter)); scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.story::-webkit-scrollbar { display: none; }
.story-stage, .story-steps { display: contents; }
.story-shot { grid-row: 1; scroll-snap-align: start; }
.story-step { grid-row: 2; list-style: none; margin-top: 18px; }
.story-shot:nth-child(1), .story-step:nth-child(1) { grid-column: 1; } .story-shot:nth-child(2), .story-step:nth-child(2) { grid-column: 2; } .story-shot:nth-child(3), .story-step:nth-child(3) { grid-column: 3; } .story-shot:nth-child(4), .story-step:nth-child(4) { grid-column: 4; } .story-shot:nth-child(5), .story-step:nth-child(5) { grid-column: 5; } .story-shot:nth-child(6), .story-step:nth-child(6) { grid-column: 6; } .story-shot:nth-child(7), .story-step:nth-child(7) { grid-column: 7; }
@media (max-width: 720px) { .story { grid-auto-columns: min(72vw, 290px); } }
.phone { position: relative; border-radius: 42px; padding: 9px; background: #1B202B; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), var(--shadow); }
.phone img { width: 100%; height: auto; aspect-ratio: 1206 / 2622; object-fit: cover; object-position: top; border-radius: 34px; background: var(--card); }
.story-step .n { display: block; font-family: 'Anton', sans-serif; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.callout, .story-seg { display: none; }
.story-step .t { font-family: 'Anton', sans-serif; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-tx); }
.story-step .d { font-size: 15px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }

@media (min-width: 981px) {
  /* The story rail pins its phone on desktop, so its own arrows go; the Tower
     strips keep theirs (this once hid every .rail-btns, Tower's included). */
  .rail-head .rail-btns { display: none; }
  .story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: none; grid-auto-columns: auto; column-gap: 72px; overflow: visible; scroll-snap-type: none; padding: 0; margin: 48px 0 0; }
  /* Phone width from the view height; the stage centres in the view under the nav. */
  .story { --pw: min(380px, calc((100vh - 66px - 72px) * 0.455)); --ph: calc(var(--pw) * 2.17 + 8px); }
  .story-stage { display: block; position: sticky; top: calc(66px + (100vh - 66px - var(--ph)) / 2); grid-column: 1; grid-row: 1; align-self: start; height: var(--ph); }
  /* Screens stack in the pinned phone; the next one wipes up over the last
     (down when scrolling back), like scrolling through the app. */
  /* Left edge on the heading's left edge, so the phone lines up with the text above it. */
  .story-shot { position: absolute; top: 0; left: 0; width: var(--pw); visibility: hidden; pointer-events: none; }
  .story-shot.on, .story-shot.prev { visibility: visible; }
  .story-shot.prev { z-index: 1; }
  .story-shot.on { z-index: 2; pointer-events: auto; animation: shot-in .65s cubic-bezier(.2, .7, .2, 1) both; }
  .story-shot.on.back { animation-name: shot-back; }
  .story-shot.first { animation: none; }
  /* One gold ring on the part of the screen the step is about, once the screen lands. */
  .story-shot .callout { display: block; position: absolute; z-index: 3; pointer-events: none; left: calc(9px + (100% - 18px) * var(--l) / 100); top: calc(9px + (100% - 18px) * var(--t) / 100); width: calc((100% - 18px) * var(--w) / 100); height: calc((100% - 18px) * var(--h) / 100); border: 2px solid #E8CD84; border-radius: 12px; box-shadow: 0 0 0 4px rgba(232, 205, 132, 0.16), 0 0 26px rgba(232, 205, 132, 0.4); opacity: 0; transform: scale(1.08); transition: opacity .35s ease .6s, transform .5s cubic-bezier(.2, .7, .2, 1) .6s; }
  .story-shot.on .callout { opacity: 1; transform: none; }
  .story-steps { display: block; grid-column: 2; grid-row: 1; position: relative; margin: 0; padding: 0 0 0 36px; }
  /* The rail: segments between the step nodes, measured by the script, with a
     wider gap where the night moves from before the game, to the game, to after. */
  .story-seg { display: block; position: absolute; left: 0; width: 2px; border-radius: 2px; background: var(--line-2); transition: background .45s ease; }
  .story-seg.lit { background: var(--gold); }
  /* Each step is a block most of a view tall with its text centred, so the
     next one is always peeking in. */
  .story-step { display: flex; flex-direction: column; justify-content: center; margin: 0; min-height: 70vh; opacity: 0.45; transition: opacity .4s ease; }
  /* The first and last blocks are the phone's height, so their text centres
     on the phone before it pins and after it lets go. */
  .story-step:first-child, .story-step:last-child { min-height: var(--ph); }
  .story-step.on { opacity: 1; }
  .story-step .n { position: relative; font-size: 13px; margin-bottom: 12px; }
  .story-step .n::before { content: ""; position: absolute; left: -40.5px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(245, 242, 237, 0.3); background: var(--bg); transition: border-color .3s, background .3s, box-shadow .3s; }
  .story-step.past .n::before { background: var(--gold); border-color: var(--gold); }
  .story-step.on .n::before { border-color: #E8CD84; box-shadow: 0 0 0 5px rgba(232, 205, 132, 0.16); }
  .story-step .d { font-family: 'Fraunces', serif; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.22; letter-spacing: -0.01em; color: var(--ink); margin-top: 12px; max-width: 540px; }
}
@keyframes shot-in { from { clip-path: inset(100% 0 0 0 round 42px); } to { clip-path: inset(0 0 0 0 round 42px); } }
@keyframes shot-back { from { clip-path: inset(0 0 100% 0 round 42px); } to { clip-path: inset(0 0 0 0 round 42px); } }
@media (min-width: 981px) and (prefers-reduced-motion: reduce) {
  .story-shot.on { animation: none; }
  .story-shot .callout, .story-step, .story-seg { transition: none; }
}
.shot-note { margin-top: 26px; font-size: 14px; color: var(--muted); }

/* Chapters: a heading across the page, then a 7/5 split */
.chapter-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; margin-top: 40px; }
.chapter-grid.flip { grid-template-columns: 5fr 7fr; }
.chapter-grid.flip > :first-child { order: 2; }
@media (max-width: 980px) { .chapter-grid, .chapter-grid.flip { grid-template-columns: 1fr; gap: 40px; } .chapter-grid.flip > :first-child { order: 0; } }
.prose p { color: var(--ink-2); font-size: 18px; }
.prose p + p { margin-top: 16px; }
.prose b { color: var(--ink); font-weight: 600; }
.ledger { list-style: none; margin-top: 30px; border-top: 1px solid var(--line); }
.ledger li { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink-2); }
.ledger li b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); padding-top: 3px; }
@media (max-width: 560px) { .ledger li { grid-template-columns: 1fr; gap: 4px; } }
.tag { display: inline-block; font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 1px 7px; border-radius: 4px; margin-left: 6px; vertical-align: 2px; color: var(--teal-tx); border: 1px solid rgba(95, 163, 189, 0.4); }
.aside { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px 30px 30px; }
.aside .bx { font-size: 12px; }
.aside h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; margin: 12px 0 12px; max-width: 26ch; }
.aside p { color: var(--ink-2); font-size: 16px; line-height: 1.6; }
@media (max-width: 560px) { .aside { padding: 22px 20px 24px; } .aside h3 { font-size: 22px; } }
.aside p + p { margin-top: 12px; }

/* iPad, portrait */
.ipad { border-radius: 26px; padding: 12px; background: #1B202B; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), var(--shadow); }
.ipad img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 16px; background: var(--card); }
.cap { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* The RSVP email in its dark-mode colours (email-layout.js's
   prefers-color-scheme: dark overrides), drawn to email-layout.js: navy header with the wordmark and
   a gold rule, white card, the navy game card with a gold border, crests over
   team-colour bars, names, captions, and the date/venue footer. */
.mail { background: #05070C; border-radius: 16px; padding: 14px; box-shadow: var(--shadow), inset 0 0 0 1px rgba(245, 242, 237, 0.06); font-family: -apple-system, system-ui, sans-serif; color: #C9CED8; max-width: 420px; }
.mail-card { background: #10141D; border-radius: 14px; overflow: hidden; }
.mail-head { background: #0A0E1A; padding: 14px 18px; border-bottom: 1px solid #B59E5E; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mail-head img { height: 26px; width: auto; }
.mail-head span { font-family: 'Anton', sans-serif; font-size: 12px; letter-spacing: 2px; color: #E8833A; white-space: nowrap; }
.mail-body { padding: 20px 20px 16px; font-size: 14px; line-height: 1.55; }
.mail-body .game { margin: 14px 0 16px; background: #0A0E1A; border: 1px solid #B59E5E; border-radius: 12px; overflow: hidden; }
.mail-body .teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 16px 8px 12px; }
.mail-body .tm { display: flex; flex-direction: column; align-items: center; }
.mail-body .tm img { width: 38px; height: 38px; border-radius: 50%; }
.mail-body .tm i { display: block; width: 38px; height: 3px; border-radius: 2px; margin-top: 5px; }
.mail-body .tm b { margin-top: 8px; font-size: 13px; font-weight: 700; color: #F5F2ED; }
.mail-body .tm small { margin-top: 1px; font-family: 'Anton', sans-serif; font-size: 9px; letter-spacing: 1.5px; color: #8B93A3; }
.mail-body .vs { font-family: 'Anton', sans-serif; font-size: 15px; letter-spacing: 2px; color: #B59E5E; padding: 10px 10px 0; }
.mail-body .when { border-top: 1px solid #2A2F3B; padding: 10px 12px 12px; text-align: center; }
.mail-body .when b { display: block; font-size: 13px; color: #F5F2ED; }
.mail-body .when span { display: block; margin-top: 2px; font-size: 11.5px; color: #5FA3BD; }
.mail-btns { display: flex; gap: 8px; margin: 0 0 12px; }
.mail-btns span { flex: 1; text-align: center; font-size: 14px; font-weight: 700; padding: 11px 0; border-radius: 10px; color: #5FA3BD; background: #10141D; box-shadow: inset 0 0 0 2px #2E6680; }
.mail-btns span.yes { background: #2E6680; color: #fff; }
.mail-body p { color: #C9CED8; font-size: 14px; margin: 0 0 8px; }
.mail-body .fine-mail { font-size: 12px; color: #8B93A3; margin: 0; }

/* Tower marquee */
.tower { background: linear-gradient(160deg, #131B2C 0%, #0B111E 70%); border: 1px solid var(--gold-edge); border-radius: 24px; padding: 56px; }
@media (max-width: 720px) { .tower { padding: 30px 20px; border-radius: 18px; } }
.tower .chapter-grid { margin-top: 0; align-items: end; }
.rulebooks { margin-top: 26px; }
.rulebooks p { font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-row span { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line-2); }
.chips-row span.gold { border-color: var(--gold-edge); color: var(--gold-tx); }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
@media (max-width: 520px) { .modes { grid-template-columns: 1fr; } }
.mode { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.mode .m { font-family: 'Fraunces', serif; font-size: 20px; }
.mode .d { font-size: 14px; color: var(--muted); margin: 2px 0 8px; }
.mode .s { font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.mode .s.is-beta { color: var(--teal-tx); }
.mode .s.is-next { color: var(--muted); }
.tower .phone { max-width: 290px; margin: 0 auto; }
.modes { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* Tower screens: one filmstrip, phones and iPads at one height. */
.tshots-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 44px; }
.rulebooks-label { font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.tshots { --sh: 440px; display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 0 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.tshots::-webkit-scrollbar { display: none; }
.tshots:focus-visible { outline: 2px solid var(--teal-lt); outline-offset: 6px; border-radius: 12px; }
.tshot { flex: none; margin: 0; scroll-snap-align: start; width: calc((var(--sh) - 18px) * 1206 / 2622 + 18px); }
.tshot.wide { width: calc((var(--sh) - 24px) * 2420 / 1668 + 24px); }
.tower .tshot .phone { max-width: none; margin: 0; border-radius: 34px; padding: 9px; }
.tower .tshot .phone img { border-radius: 26px; }
.ipad.land img { aspect-ratio: 2420 / 1668; object-position: center; }
.tshot figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }
.tshot figcaption b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-tx); }
.tshot figcaption .tag { margin-left: 4px; }
.tshot figcaption span:last-child { display: block; margin-top: 4px; color: var(--ink-2); }
@media (max-width: 720px) { .tshots { --sh: 380px; } .tshot.wide { width: min(86vw, calc((var(--sh) - 24px) * 2420 / 1668 + 24px)); } .tshots-head .rail-btns { display: none; } }

/* Player strip */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 40px; }
.strip > div { padding: 28px 28px 30px 0; }
.strip > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.strip h3 { font-size: 24px; margin-bottom: 8px; }
.strip p { color: var(--ink-2); font-size: 16px; }
@media (max-width: 860px) { .strip { grid-template-columns: 1fr; } .strip > div, .strip > div + div { padding: 22px 0; border-left: 0; } .strip > div + div { border-top: 1px solid var(--line); } }

/* Status board */
.status { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; margin-top: 44px; }
@media (max-width: 900px) { .status { grid-template-columns: 1fr; } }
.col-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
.col-card h3 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.col-card h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.col-card.st-now h3::before { background: #30D158; }
.col-card.st-beta h3::before { background: var(--teal-lt); }
.col-card.st-next h3::before { background: var(--muted-2); }
.col-card ul { list-style: none; margin-top: 16px; }
.col-card li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }

/* FAQ */
.faq { margin-top: 40px; border-top: 1px solid var(--line); max-width: 880px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font-family: 'Fraunces', serif; font-size: 21px; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus { outline: none; }
.faq summary:focus-visible { outline: none; color: var(--gold-tx); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 28px; color: var(--gold-tx); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p a { color: var(--teal-tx); text-decoration: underline; text-underline-offset: 3px; }
.faq details p { padding: 0 0 22px; color: var(--ink-2); font-size: 17px; max-width: 740px; }

/* Beta */
.beta-section { background: var(--bg-deep); border-top: 1px solid var(--line); }
.beta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .beta-grid { grid-template-columns: 1fr; gap: 36px; } }
.beta-section .body { color: var(--ink-2); font-size: 18px; margin-top: 8px; max-width: 520px; }
.letter { font-family: 'Fraunces', serif; font-style: italic; font-variation-settings: "opsz" 30, "SOFT" 80; font-size: 20px; color: var(--ink-2); margin-top: 26px; line-height: 1.5; }
.letter b { color: var(--gold-tx); font-weight: 500; }
.form { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: grid; gap: 8px; }
.form label { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-top: 8px; }
.form input, .form select, .form textarea { width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 13px 14px; min-height: 48px; }
.form textarea { resize: vertical; min-height: 96px; }
.form select:invalid { color: var(--muted-2); }
.form input::placeholder, .form textarea::placeholder { color: var(--muted-2); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--teal-lt); outline-offset: 1px; border-color: var(--teal-lt); }
.form label .opt { font-weight: 400; color: var(--muted); }
/* The honeypot: off screen, out of the tab order, hidden from screen readers. */
.form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
/* Always rendered (empty, it has no height): a live region must exist before
   its text arrives, or a screen reader may not announce it. */
.form-status { font-size: 15px; color: var(--gold-tx); }
/* Without script the form cannot send, so only the email line shows. */
html:not(.js) .form > :not(.small) { display: none; }
/* Sent: the fields give way to the "Got it" note; the fallback line stays. */
.form.is-sent > :not(.form-done):not(.small) { display: none; }
.form-done { padding: 8px 0 4px; font-size: 17px; color: var(--ink-2); }
.form-done:focus { outline: none; }
.form-done-h { font-family: 'Anton', sans-serif; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.form .btn { margin-top: 16px; width: 100%; }
.form .small { font-size: 14px; color: var(--muted); margin-top: 8px; }
.form .small a { color: var(--teal-tx); text-decoration: underline; text-underline-offset: 3px; }

/* The divider spans the page, like the band above it. */
.site-foot { border-top: 1px solid var(--line); }
.footer { padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; align-items: center; font-size: 14px; color: var(--muted); }
.footer nav { display: flex; gap: 8px; }
.footer nav a { padding: 12px 10px; }
.footer nav a:hover { color: var(--ink); }
.footer .legal { flex-basis: 100%; font-size: 13px; color: var(--muted-2); }

/* Tap a screenshot to see it bigger: a native <dialog> over the page. */
.zoomable { cursor: zoom-in; }
.zoom-btn { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: inherit; cursor: zoom-in; text-align: left; font: inherit; color: inherit; }
.zoom-btn:focus-visible { outline: 2px solid var(--teal-lt); outline-offset: 4px; }
.lightbox { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); }
.lightbox::backdrop { background: rgba(4, 6, 12, 0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: calc(56px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
#lbImg { max-width: min(100%, 1400px); max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 22px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7); cursor: zoom-out; }
#lbImg.wide { border-radius: 16px; }
#lbImg[hidden] { display: none; }
.lb-html { cursor: zoom-out; }
.lb-html .mail { max-width: 460px; margin: 0 auto; zoom: 1.3; }
@media (max-width: 720px), (max-height: 820px) { .lb-html .mail { zoom: 1; } }
.aside .mail-wrap { margin-top: 22px; }
.aside .mail { margin-inline: auto; }
.lightbox .lb-cap { max-width: 640px; text-align: center; font-size: 15px; color: var(--ink-2); }
.lightbox .lb-close, .lightbox .lb-nav { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(15, 22, 38, 0.9); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.lightbox .lb-close { top: calc(12px + env(safe-area-inset-top)); right: 16px; }
.lightbox .lb-nav { top: 50%; margin-top: -23px; }
.lightbox .lb-prev { left: 16px; }
.lightbox .lb-next { right: 16px; }
.lightbox svg { width: 18px; height: 18px; }
@media (max-width: 720px) { .lightbox .lb-nav { top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); margin-top: 0; } #lbImg { max-height: calc(100dvh - 190px); border-radius: 16px; } }

/* ─── Documents: privacy, terms, the beta agreement, the bot page ──────
   One style for every document page, here and nowhere else: those pages
   carry no <style> of their own (tests/marketing-pages.test.js fails one
   that does). The layout is the privacy and terms pages' editorial column:
   an Anton eyebrow, a Fraunces headline with its gold italic word, a mono
   "Effective" line, then the text. */
.doc { position: relative; max-width: 760px; margin: 0 auto; padding: 72px 36px 80px; font-size: 15px; line-height: 1.7; }
@media (max-width: 720px) { .doc { padding: 48px 20px 64px; } }
.doc .bx { margin-bottom: 22px; }
@media (max-width: 560px) { .doc .bx { font-size: 11px; letter-spacing: 0.16em; } }
.doc h1 { font-weight: 360; font-size: clamp(38px, 6vw, 56px); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 14px; }
.doc h1 em { font-style: italic; font-weight: inherit; font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1; color: var(--gold-tx); }
.doc .effective { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-bottom: 28px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.doc h2 { font-weight: 480; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 44px 0 14px; }
.doc h3 { font-family: inherit; font-variation-settings: normal; font-size: 15.5px; font-weight: 700; letter-spacing: normal; line-height: inherit; color: var(--ink-2); margin: 24px 0 8px; }
.doc p, .doc li { font-size: 15px; color: var(--muted); margin-bottom: 12px; }
.doc ul, .doc ol { padding-left: 20px; margin-bottom: 12px; }
.doc li { margin-bottom: 7px; }
.doc li::marker { color: var(--gold-tx); }
.doc a { color: var(--teal-tx); border-bottom: 1px solid rgba(95, 163, 189, 0.38); }
.doc a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.doc strong { color: var(--ink-2); font-weight: 600; }
.doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: var(--ink-2); background: rgba(245, 242, 237, 0.06); padding: 2px 6px; border-radius: 4px; }
.doc .data-table { width: 100%; border-collapse: collapse; margin: 14px 0 22px; }
.doc .data-table th, .doc .data-table td { text-align: left; padding: 10px 12px; font-size: 13.5px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc .data-table th { color: var(--gold-tx); font-family: 'Anton', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.doc .data-table td { color: var(--muted); }
.doc .callout { border: 1px solid var(--gold-edge); border-left-width: 3px; background: linear-gradient(172deg, var(--card) 0%, #0C1322 100%); padding: 14px 18px; margin: 18px 0; border-radius: 10px; }
.doc .callout p { margin-bottom: 0; color: var(--ink-2); }
.doc .legal-caps strong { color: var(--ink-2); }
.doc .contact { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 24px; }

/* ─── Department pages (MARKETING-SITE-V2-PLAN §6), in the hero's app look ──
   Black page, Anton headings, slate cards with the gold hairline, tier chips
   stamped from the claims registry (data-tier). */
.dept { background: #000; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; }
.dept h3, .dept summary { font-family: inherit; letter-spacing: 0; }
.dept-hero { position: relative; padding: 40px 0 72px; }
.crumbs { display: flex; gap: 8px; font-size: 14px; color: rgba(235, 235, 245, 0.55); margin-bottom: 28px; }
.crumbs a { color: var(--teal-tx); }
.crumbs a:hover { color: var(--ink); }
.dept-hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; align-items: center; }
.dept .bx { color: var(--teal-lt); font-size: 14px; letter-spacing: 0.18em; }
.dept .bx::after { display: none; }
.dept .bx.gold { color: var(--gold-tx); }
.dept-h1 { font-family: 'Anton', Impact, 'Arial Narrow', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.02; font-size: clamp(42px, 6.2vw, 80px); margin: 18px 0 22px; }
.dept-h1 em, .dept-h2 em { font-style: normal; color: var(--gold-tx); }
.dept-lede { font-size: 18px; line-height: 1.6; color: rgba(235, 235, 245, 0.72); max-width: 560px; }
.dept .hero-cta { margin-top: 28px; }
.dept .btn { border-radius: 10px; min-height: 52px; font-size: 17px; }
.dept-hero-shot { display: flex; justify-content: center; }
.dept-hero-shot .phone { width: 250px; }
/* A wide hero shot (Tower's iPad) lands under the headline and the line
   below it, at full width, rather than beside them (owner, 2026-10-09). */
.dept-hero-grid.is-stacked { grid-template-columns: 1fr; gap: 48px; }
.dept-hero-grid.is-stacked .dept-hero-shot { justify-content: flex-start; }
.dept-hero-grid.is-stacked .dept-lede { max-width: 720px; }
.dept-hero-ipad .ipad { width: 100%; max-width: 980px; }
.dept-sec { padding: 72px 0; border-top: 1px solid rgba(181, 158, 94, 0.16); }
.dept-h2 { font-family: 'Anton', Impact, 'Arial Narrow', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; font-size: clamp(30px, 4vw, 46px); margin: 14px 0 28px; }
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.job { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; border-radius: 14px; background: #0E1320; box-shadow: inset 0 0 0 1px rgba(181, 158, 94, 0.22); }
.job h3 { font-size: 19px; font-weight: 700; color: var(--ink); }
.job p { flex: 1; font-size: 15px; line-height: 1.55; color: rgba(235, 235, 245, 0.72); }
.tier { align-self: flex-start; flex: none; white-space: nowrap; font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: var(--teal-tx); background: rgba(77, 140, 166, 0.15); box-shadow: inset 0 0 0 1px rgba(95, 163, 189, 0.45); }
.tier[data-tier="now"] { color: #6FE08A; background: rgba(48, 209, 88, 0.12); box-shadow: inset 0 0 0 1px rgba(48, 209, 88, 0.4); }
.tier[data-tier="road"] { color: rgba(235, 235, 245, 0.6); background: rgba(235, 235, 245, 0.06); box-shadow: inset 0 0 0 1px rgba(235, 235, 245, 0.18); }
.road-line { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 15px; color: rgba(235, 235, 245, 0.6); }
/* The department's other lines, each with its stamped tier: one list, so the
   cards stay few and nothing repeats in a separate status board. */
.tier-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; margin-top: 28px; }
.tier-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.45; color: rgba(235, 235, 245, 0.72); }
.dept-copy { font-size: 18px; line-height: 1.6; color: rgba(235, 235, 245, 0.72); max-width: 720px; }
@media (max-width: 720px) { .tier-list { grid-template-columns: 1fr; } }
.ripple { list-style: none; display: grid; gap: 0; border-top: 1px solid rgba(235, 235, 245, 0.1); }
.ripple li { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid rgba(235, 235, 245, 0.1); font-size: 16px; line-height: 1.55; color: rgba(235, 235, 245, 0.72); }
.ripple li b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-tx); padding-top: 2px; }
.link-row { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 20px; }
.link-row a { padding: 8px 0; color: var(--teal-tx); font-weight: 600; text-decoration-line: underline; text-decoration-thickness: 1.5px; text-decoration-color: transparent; text-underline-offset: 8px; transition: color .2s ease, text-decoration-color .2s ease, text-underline-offset .2s ease; }
.link-row a:focus-visible { color: var(--ink); text-decoration-color: currentColor; text-underline-offset: 4px; }
@media (hover: hover) { .link-row a:hover { color: var(--ink); text-decoration-color: currentColor; text-underline-offset: 4px; } }
.demo-note { margin-top: 16px; font-size: 14px; color: rgba(235, 235, 245, 0.5); }
.dept-faq details { border-bottom: 1px solid rgba(235, 235, 245, 0.1); padding: 16px 0; max-width: 760px; }
.dept-faq summary { cursor: pointer; font-size: 18px; font-weight: 600; color: var(--ink); }
.dept-faq details p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: rgba(235, 235, 245, 0.72); }
.dept-next { text-align: left; }
.dept-next p { font-size: 17px; color: rgba(235, 235, 245, 0.72); max-width: 560px; }
@media (max-width: 980px) {
  .dept-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .jobs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .dept-hero { padding: 24px 0 52px; }
  .dept-sec { padding: 52px 0; }
  .jobs { grid-template-columns: 1fr; }
  .ripple li { grid-template-columns: 1fr; gap: 4px; }
  .dept .hero-cta .btn { flex: 1 1 140px; padding: 0 12px; }
}
.dept .tshots-head { margin-top: 0; align-items: center; }
.dept .tshots-head .dept-h2 { margin-bottom: 0; }