/* 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 app's faces: Anton caps for every headline, eyebrow and label (the
   nav, the footer roll), with the gold word; the app's text face for
   everything read as a sentence (--font-app: SF Pro on Apple devices, Inter,
   its closest open match, elsewhere). Orbitron is the wordmark alone. It carries 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 {
  /* The app's text face: SF Pro from the system on Apple devices, the
     self-hosted Inter (site-fonts/fonts.css) everywhere else. */
  --font-app: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  /* The nav bar: full at the top of the page and on the way back up, compact
     on the way down (site.js). Anchors and the sticky story clear the full one. */
  --bar-full: 84px;
  --bar-compact: 58px;
  --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: var(--font-app);
  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; }
/* A unit that must not break across lines: a date, a byline, "Last Updated:". */
.nw { white-space: nowrap; }
.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, .site-foot { font-family: var(--font-app); font-size: 17px; line-height: 1.6; }
.site-foot { position: relative; z-index: 2; }

/* Type */
h1, h2, h3 { font-family: 'Anton', Impact, 'Arial Narrow', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--gold-tx); }
/* 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: var(--bar-h); }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
/* The mark alone, no tile or ring round it (owner, 2026-10-10). */
.brand img { width: auto; height: var(--logo-h); transition: height .25s ease; }
.brand .words { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.brand .word, .foot-sig .word { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; }
.brand .word span, .foot-sig .word span { color: var(--teal-lt); margin-left: 3px; }
.brand .word { font-size: var(--word-size); transition: font-size .25s ease; }
.brand .est { font-size: var(--est-size); transition: font-size .25s ease; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; text-align: center; 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); }
@media (max-width: 400px) { .brand .est { display: none; } }

/* The bar: RUN · PLAY · FOLLOW · FAQ and the Join pill, one type size, no
   icons (owner, 2026-10-10). A group opens the index under the bar with its
   row lit and its line on the right; on a phone the bar is the name and
   INDEX, and the index fills the screen. Without JS each group links to its
   band on the home page and INDEX to the whole grid. site.js runs it. */
/* Two sizes. Full at the top and whenever the reader scrolls back up; compact
   while they scroll down. The compact bar's margin makes up the difference,
   so the page never jumps. Every size below is a variable, so the two states
   are one list each. */
.nav { --bar-h: var(--bar-full); --logo-h: 50px; --word-size: 18px; --est-size: 11px; --item-size: 18px; --join-size: 15px; --join-pad: 12px 20px; --index-size: 17px; --index-pad: 13px 18px; }
.nav.is-compact { --bar-h: var(--bar-compact); --logo-h: 34px; --word-size: 14px; --est-size: 9.5px; --item-size: 15px; --join-size: 13px; --join-pad: 8px 16px; --index-size: 15px; --index-pad: 10px 15px; margin-bottom: calc(var(--bar-full) - var(--bar-compact)); }
.nav-row { transition: height .25s ease; }
.nav { transition: margin-bottom .25s ease, background .25s ease; }
.gnav { position: relative; display: flex; align-items: center; gap: 34px; }
.gnav-i, .gnav-join, .gnav-index { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: var(--item-size); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.gnav-i { color: rgba(235, 235, 245, 0.72); padding: 14px 0; transition: color .2s ease, font-size .25s ease; }
.gnav-i:hover, .gnav-i[aria-expanded="true"] { color: #fff; }
/* One underline glides to whatever the pointer or focus is on. */
.gnav-line { position: absolute; left: 0; bottom: 4px; width: 0; height: 2px; border-radius: 2px; background: var(--teal-lt); box-shadow: 0 0 12px rgba(95, 163, 189, 0.9); opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(.2, .7, .2, 1), width .32s cubic-bezier(.2, .7, .2, 1), opacity .2s ease; }
/* Join: the nav's Join Us and every Join the Beta button (.btn-app) are one
   look. See-through gold with a gold edge; hover wipes the gold in from the
   left (the eyebrows' wipe) and turns the words navy, a press squeezes it.
   Only the Join the Beta buttons carry the shimmer passing every eight
   seconds (owner, 2026-10-11: on the nav too was too much). The nav's are
   pills; a button keeps its family's corners. */
.gnav-join, .ix-join, .btn-app { position: relative; overflow: hidden; isolation: isolate; color: var(--gold-tx); background: rgba(181, 158, 94, 0.13); box-shadow: inset 0 0 0 1px rgba(212, 186, 122, 0.5); transition: color .16s ease, box-shadow .3s ease, transform .12s ease, padding .25s ease, font-size .25s ease; }
.gnav-join, .ix-join { border-radius: 999px; }
.gnav-join::before, .ix-join::before, .btn-app::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold-tx); transform: scaleX(0); transform-origin: left; transition: transform .38s cubic-bezier(.2, .7, .2, 1); }
.btn-app::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: 0; width: 34%; background: linear-gradient(100deg, transparent, rgba(255, 236, 190, 0.55), transparent); transform: translateX(-160%) skewX(-20deg); pointer-events: none; animation: join-sheen 8s 1s ease-in-out infinite; }
@keyframes join-sheen { 0% { transform: translateX(-160%) skewX(-20deg); } 14%, 100% { transform: translateX(360%) skewX(-20deg); } }
.gnav-join { font-size: var(--join-size); letter-spacing: 0.16em; padding: var(--join-pad); }
.gnav-join:hover, .gnav-join:focus-visible, .ix-join:hover, .ix-join:focus-visible, .btn-app:hover, .btn-app:focus-visible { color: #0A0E1A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 24px rgba(212, 186, 122, 0.4); }
.gnav-join:hover::before, .gnav-join:focus-visible::before, .ix-join:hover::before, .ix-join:focus-visible::before, .btn-app:hover::before, .btn-app:focus-visible::before { transform: scaleX(1); }
.btn-app:hover::after, .btn-app:focus-visible::after { opacity: 0; }
.gnav-join:active, .ix-join:active, .btn-app:active { transform: scale(0.97); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 30px rgba(212, 186, 122, 0.7); }
.gnav-index { display: none; align-items: center; color: #fff; font-size: var(--index-size); padding: var(--index-pad); transition: font-size .25s ease, padding .25s ease; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(95, 163, 189, 0.55); }
.gnav-index-close { display: none; }
/* After a tap the open index holds focus itself (site.js open()); no ring for that. */
.nav-index:focus { outline: none; }
.gnav-index[aria-expanded="true"] { color: #0A0E1A; background: var(--teal); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.gnav-index[aria-expanded="true"] .gnav-index-open { display: none; }
.gnav-index[aria-expanded="true"] .gnav-index-close { display: inline; }
.gnav-index.flip { animation: navFlip .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes navFlip { from { transform: perspective(240px) rotateX(-90deg); } to { transform: perspective(240px) rotateX(0); } }

/* The index. */
.nav-index { position: absolute; left: 0; right: 0; top: 100%; overflow: hidden; background: radial-gradient(800px 380px at 88% 115%, rgba(95, 163, 189, 0.14), transparent), linear-gradient(180deg, #05070C, #000); border-bottom: 1px solid rgba(181, 158, 94, 0.22); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9); }
.nav-index[hidden] { display: none !important; }
.nav-index::before { content: ""; position: absolute; right: -70px; top: -40px; width: 520px; height: 520px; background: url(/icons/mark-640.webp?v=1) center / contain no-repeat; opacity: 0.045; pointer-events: none; }
.nav-index-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: center; padding-top: 30px; padding-bottom: 28px; }
.ix-rows { display: flex; flex-direction: column; gap: 4px; }
.ix-row { display: grid; grid-template-columns: 84px 1fr; align-items: center; padding: 12px 16px; border-radius: 14px; transition: background .3s ease; }
.ix-label { appearance: none; background: none; border: 0; padding: 8px 0; margin: 0; cursor: pointer; text-align: left; justify-self: start; font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(235, 235, 245, 0.32); transition: color .3s ease; }
/* The row labels switch groups from inside the open index. */
.ix-label:hover, .ix-label:focus-visible { color: #fff; }
.ix-items { display: flex; flex-wrap: nowrap; gap: 26px; list-style: none; }
.ix-items a { display: block; white-space: nowrap; font-family: 'Anton', sans-serif; font-size: clamp(22px, 2.35vw, 30px); line-height: 1; text-transform: uppercase; color: rgba(235, 235, 245, 0.34); transition: font-size .32s cubic-bezier(.2, .7, .2, 1), color .25s ease; }
.ix-items a:hover, .ix-items a:focus-visible { color: #fff; }
.ix-row.is-lit { background: rgba(255, 255, 255, 0.035); }
.ix-row.is-lit .ix-label { color: var(--teal-tx); }
.ix-row.is-lit .ix-items a { font-size: clamp(28px, 3.2vw, 44px); color: #fff; }
.ix-row.is-lit .ix-items a:hover { color: var(--teal-tx); }
.ix-says { border-left: 1px solid rgba(181, 158, 94, 0.25); padding: 6px 0 6px 28px; }
.ix-say { display: none; }
.ix-say.is-lit { display: block; }
.ix-say-k { font-family: 'Anton', sans-serif; font-size: 30px; line-height: 1.05; text-transform: uppercase; color: var(--gold-tx); margin-bottom: 12px; transform-origin: left center; }
.ix-say-b { font-size: 16px; line-height: 1.6; color: rgba(235, 235, 245, 0.72); }
/* A group's line lands like a freeze-frame title card. */
.ix-say.slam .ix-say-k { animation: ixSlam .5s cubic-bezier(.2, .8, .2, 1) both; }
.ix-say.slam .ix-say-b { animation: ixFade .45s .16s ease both; }
@keyframes ixSlam { 0% { opacity: 0; transform: scale(1.22); filter: blur(8px); } 55% { opacity: 1; transform: scale(0.97); filter: blur(0); } 100% { transform: scale(1); } }
@keyframes ixFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.nav-index-foot { position: relative; display: flex; align-items: center; gap: 26px; padding-top: 14px; padding-bottom: 18px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.nav-index-foot a { font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(235, 235, 245, 0.5); transition: color .2s ease; }
.nav-index-foot a:hover { color: #fff; }
.nav-index-foot .ix-join { display: none; }

@media (max-width: 1060px) {
  .nav-index-in { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
  .ix-items { gap: 20px; }
}
/* The phone: the name and INDEX, and the index full screen, its names
   stacked toward the thumb and rising in one after another. */
@media (max-width: 900px) {
  :root { --bar-full: 70px; }
  .nav { --logo-h: 42px; --word-size: 16px; --est-size: 10px; }
  .nav.is-compact { --logo-h: 32px; --word-size: 13px; --est-size: 9px; }
  .gnav { display: none; }
  .gnav-index { display: inline-flex; }
  .nav-index { height: calc(100dvh - var(--bar-h) - env(safe-area-inset-top)); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; border-bottom: 0; box-shadow: none; background: radial-gradient(500px 360px at 100% 100%, rgba(95, 163, 189, 0.2), transparent), radial-gradient(400px 300px at 0% 0%, rgba(212, 186, 122, 0.08), transparent), #000; }
  .nav-index::before { right: -120px; top: 130px; width: 420px; height: 420px; opacity: 0.06; }
  /* The wraps sit in a flex column, where auto margins would shrink them to their content. */
  .nav-index-in, .nav-index-foot { width: 100%; }
  .nav-index-in { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 0; padding-top: 12px; padding-bottom: 6px; }
  .ix-says { display: none; }
  .ix-row, .ix-row.is-lit { display: block; padding: 0; margin-top: 16px; background: none; }
  .ix-label, .ix-row.is-lit .ix-label { display: flex; width: 100%; align-items: center; gap: 10px; padding: 0; font-size: 12px; letter-spacing: 0.28em; color: var(--teal-tx); margin-bottom: 6px; cursor: default; }
  .ix-label::after { content: ""; flex: 1; height: 1px; background: rgba(181, 158, 94, 0.22); }
  .ix-items { display: block; }
  .ix-items a, .ix-row.is-lit .ix-items a { font-size: 36px; line-height: 1.06; padding: 2px 0; color: #fff; transition: color .12s ease, transform .12s ease; }
  .ix-items a:active { color: var(--teal-tx); transform: translateX(4px); }
  .nav-index.is-open .ix-label, .nav-index.is-open .ix-items a { animation: ixRise .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 38ms); }
  .nav-index-foot { flex-wrap: wrap; gap: 14px 22px; padding-top: 12px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  /* Four groups can outrun a short screen: the foot, Join Us with it, stays
     pinned at the bottom of the menu while the groups scroll under it. */
  .nav-index-foot { position: sticky; bottom: 0; z-index: 1; background: rgba(0, 0, 0, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  /* The index's link rule is more specific than .ix-join: restate its gold. */
  .nav-index-foot .ix-join { display: block; width: 100%; text-align: center; padding: 17px 0; font-size: 16px; letter-spacing: 0.14em; color: var(--gold-tx); transition: color .16s ease, box-shadow .3s ease, transform .12s ease; }
  .nav-index-foot .ix-join:hover, .nav-index-foot .ix-join:focus-visible { color: #0A0E1A; }
}
/* Four groups and twelve pages: shorter phones step down again so Join Us
   stays on screen without scrolling the menu. */
@media (max-width: 900px) and (max-height: 760px) {
  .ix-items a, .ix-row.is-lit .ix-items a { font-size: 30px; }
  .ix-row, .ix-row.is-lit { margin-top: 10px; }
}
@keyframes ixRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Narrow phones: the wordmark ran under the Index pill at 360px and below.
   After the 900px block above, which sets the phone bar's sizes, so these win. */
@media (max-width: 380px) {
  .nav { --logo-h: 38px; --word-size: 14.5px; --index-size: 15px; --index-pad: 11px 14px; }
  .brand { gap: 9px; }
  .brand .word { letter-spacing: 0.12em; }
}
@media (max-width: 350px) {
  .nav, .nav.is-compact { --logo-h: 32px; --word-size: 13px; --index-size: 14px; --index-pad: 10px 12px; }
  .brand { gap: 7px; }
  .brand .word { letter-spacing: 0.08em; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav-row, .gnav-line, .ix-row, .ix-label, .ix-items a, .brand img, .brand .word, .brand .est, .gnav-i, .gnav-index { transition: none; }
  .gnav-index.flip, .ix-say.slam .ix-say-k, .ix-say.slam .ix-say-b, .nav-index.is-open .ix-label, .nav-index.is-open .ix-items a { animation: none; }
  .gnav-join, .ix-join, .btn-app, .nav-index-foot .ix-join, .gnav-join::before, .ix-join::before, .btn-app::before { transition: none; }
  .btn-app::after { display: none; }
  .gnav-join:active, .ix-join:active, .btn-app:active { transform: 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; margin: 22px 0 26px; }
/* 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; }
.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: var(--font-app);
  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; }
/* 9px either side makes each dot a 24px target (WCAG 2.5.8). */
.dots button { height: var(--controls); padding: 0 9px; 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, var(--font-app); 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; }
/* Phones: the bracket's longest name ("Midgard Serpents") fits instead of ending in an ellipsis. */
@media (max-width: 420px) {
  .br { padding: 0 8px; }
  .mc .tr { padding: 0 6px; font-size: 11px; }
  .mc .tr img { width: 16px; height: 16px; margin-right: 4px; }
}
.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: var(--font-app); }
.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-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 departments under the hero, by the menu's four groups (owner,
   2026-10-11): who each group is for, then its pages. The links keep the old
   forks' look, plain teal text whose underline rises into place on hover or
   keyboard focus (the outline chips read as heavy, owner 2026-10-09); the
   block padding keeps a full-height tap target without moving the line. */
.hero-depts { position: relative; z-index: 1; margin-top: 56px; font-family: var(--font-app); }
.hero-depts-label { font-family: 'Anton', sans-serif; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(235, 235, 245, 0.55); margin-bottom: 4px; }
.hdep-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
/* Two by two, then one row once each card's pages fit on one line; in the
   row, Run's four pages get the extra room. */
@media (min-width: 700px) { .hdep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; } }
@media (min-width: 1180px) { .hdep-grid { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 0 24px; } }
/* Each group's name is the footer roll's outlined word (.roll-set a), lit
   the roll's way, white with the blue glow, while the pointer or keyboard
   focus is anywhere in its group (owner pick, 2026-10-11). Its line stays
   short enough to hold one row at every width. */
.hdep { display: flex; flex-direction: column; }
.hdep-k { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 52px; line-height: 1.08; letter-spacing: 0.01em; text-transform: uppercase; color: var(--muted); transition: color .2s, text-shadow .2s, -webkit-text-stroke-color .2s; }
@supports (-webkit-text-stroke: 1px) {
  .hdep-k { color: transparent; -webkit-text-stroke: 1.2px rgba(245, 242, 237, 0.45); }
}
.hdep:focus-within .hdep-k { color: var(--ink); -webkit-text-stroke-color: transparent; text-shadow: 0 0 34px rgba(95, 163, 189, 0.55); }
@media (hover: hover) { .hdep:hover .hdep-k { color: var(--ink); -webkit-text-stroke-color: transparent; text-shadow: 0 0 34px rgba(95, 163, 189, 0.55); } }
.hdep-who { margin-top: 2px; font-size: 15px; line-height: 1.45; color: rgba(235, 235, 245, 0.66); white-space: nowrap; }
@media (min-width: 1180px) { .hdep-who { font-size: 14.5px; } }
.hdep-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: auto; padding-top: 2px; }
.hdep-links a { padding: 10px 0; color: var(--teal-tx); font-size: 15px; 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; }
.hdep-links 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) { .hdep-links a:hover { color: var(--ink); text-decoration-color: currentColor; text-underline-offset: 5px; } }
@media (prefers-reduced-motion: reduce) { .hdep-links a, .hdep-k { 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 .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-depts { margin-top: 44px; }
  .hdep-k { font-size: 44px; }
}
/* The hero's pieces as grid areas. Side by side, the copy runs from the
   eyebrow to the buttons and the fine print sits under the buttons, in a row
   of its own, so the card can match the copy. Stacked, the fine print follows
   the buttons and the card comes after it (owner, 2026-10-11). */
.hero-app .hero-grid { grid-template-areas: "copy visual" "fine ."; row-gap: 0; }
.hero-app .hero-copy { grid-area: copy; }
.hero-app .hero-visual { grid-area: visual; }
.hero-app .hero-grid > .fine { grid-area: fine; margin-top: 20px; }
@media (max-width: 980px) {
  .hero-app .hero-grid { grid-template-areas: "copy" "fine" "visual"; gap: 0; }
  .hero-app .hero-visual { margin-top: 40px; }
  /* The card keeps the copy's left edge on a tablet, where it is narrower than the column. */
  .hero-app .tour-wrap { align-items: flex-start; }
}
@media (max-width: 560px) {
  .hero-app .hero-grid > .fine { margin-top: 16px; }
  .hero-app .hero-visual { margin-top: 32px; }
}
/* Side by side, the tour card runs from the top of the eyebrow to the foot of
   the buttons, at the card's own proportions (owner, 2026-10-11): size
   containment keeps the card out of the row's height, so the copy alone sets
   it and the card stretches to fill. The slides were checked down to 300px.
   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: stretch; }
  .hero-app .hero-visual { position: relative; contain: size; }
  .hero-app .tour-wrap { padding-top: 0; height: 100%; }
  .hero-app .tour { width: auto; max-width: 100%; height: 100%; min-height: 300px; aspect-ratio: 460 / 332; }
  .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. Not on the
   home page, where the card runs eyebrow to buttons beside the copy and a
   drift would pull it out of line (owner, 2026-10-11); /welcome keeps it. */
@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; }
    .hero-app .tour-wrap { animation: none; }
    @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: var(--font-app); 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(var(--bar-full) + env(safe-area-inset-top)); }
.section + .section:not(.beta-section) { scroll-margin-top: calc(var(--bar-full) + 28px + env(safe-area-inset-top)); }
#screens, #beta { scroll-margin-top: calc(var(--bar-full) - 36px + 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; } }
/* The same size as a department page's .dept-h2, so the home page's
   headings read as one family. */
.sec-h { font-size: clamp(30px, 4vw, 46px); 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; }
/* site.js hides a strip's buttons when the strip has nothing to scroll. */
.rail-btns[hidden] { display: 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); }
/* A step whose feature is in beta carries its stamped chip after the title. */
.story-step .t .tier { display: inline-block; margin-left: 8px; padding: 1px 7px; font-size: 10px; vertical-align: 1px; }
.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 - var(--bar-full) - 72px) * 0.455)); --ph: calc(var(--pw) * 2.17 + 8px); }
  .story-stage { display: block; position: sticky; top: calc(var(--bar-full) + (100vh - var(--bar-full) - 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-size: clamp(22px, 2.1vw, 28px); font-weight: 600; line-height: 1.3; 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); }

.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); }

/* 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); }

.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); }
/* 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; }
.tshots { --sh: 440px; display: flex; align-items: flex-start; 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); }
.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); }
/* Phones hide the buttons, so a fade at the right edge says there is more to swipe. */
@media (max-width: 720px) { .tshots.has-more { -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); } }
@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; } }

/* 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-size: 19px; font-weight: 600; 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; }
.faq details ul, .faq details ol { padding: 0 0 22px 22px; color: var(--ink-2); font-size: 17px; max-width: 740px; }
.faq details li { margin-bottom: 6px; }
.faq details li::marker { color: var(--gold-tx); }

/* ─── The answers page (/faq) and the home band ───────────────────────
   One search box, section chips, then the answers grouped like the nav.
   faq.js filters them; without script every answer shows and the search
   and chips hide (the band's search still works: it is a plain GET form). */
.faqp { padding: 48px 0 96px; }
.faqp [hidden] { display: none !important; }
.faq-h1 { font-size: clamp(42px, 6.2vw, 80px); margin: 14px 0 16px; }
.faq-lede { font-size: 18px; line-height: 1.6; color: rgba(235, 235, 245, 0.72); max-width: 640px; }
.faq-updated { margin-top: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.faq-search { display: flex; gap: 10px; max-width: 680px; margin-top: 28px; }
.faq-search input { flex: 1; min-width: 0; height: 56px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line-2); background: #0E1320; color: var(--ink); font: inherit; font-size: 17px; }
.faq-search input::placeholder { color: var(--muted-2); }
.faq-search input:focus-visible { outline: 2px solid var(--teal-lt); outline-offset: 2px; border-color: transparent; }
.faq-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 4.5l9 9M13.5 4.5l-9 9' stroke='%23D4BA7A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.faq-search .btn { min-height: 56px; }
.faq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.faq-chips button { padding: 9px 14px; border-radius: 999px; border: 0; background: rgba(245, 242, 237, 0.05); box-shadow: inset 0 0 0 1px var(--line-2); font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(235, 235, 245, 0.72); cursor: pointer; transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.faq-chips button:hover { color: var(--ink); }
.faq-chips button[aria-pressed="true"] { color: #0A0E1A; background: var(--gold-tx); box-shadow: none; }
.faq-count { min-height: 1.6em; margin-top: 14px; font-size: 14px; color: var(--muted); }
.faq-none { max-width: 680px; margin-top: 8px; padding: 20px 22px; border-radius: 14px; background: #0E1320; box-shadow: inset 0 0 0 1px rgba(181, 158, 94, 0.22); color: var(--ink-2); }
.faq-none-k { font-family: 'Anton', sans-serif; font-size: 20px; text-transform: uppercase; color: var(--gold-tx); margin-bottom: 6px; }
.faq-none a { color: var(--teal-tx); text-decoration: underline; text-underline-offset: 3px; }
/* The question form sits inside the card, so it drops the beta form's own card. */
.faq-none .form { background: none; border: 0; border-radius: 0; padding: 0; margin-top: 6px; }
.faq-none .form .btn { width: auto; justify-self: start; }
.faq-none .faq-ask-lede { margin-bottom: 2px; }
.faq-none-guides { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(181, 158, 94, 0.18); font-size: 14px; color: var(--muted); }
#faqCount { scroll-margin-top: 92px; }
.faq-group { margin-top: 56px; }
.faq-group-k { margin-bottom: 4px; }
.faq-sec { margin-top: 44px; scroll-margin-top: calc(var(--bar-full) + 16px + env(safe-area-inset-top)); }
.faq-group .faq-sec:first-of-type { margin-top: 18px; }
.faq-h { font-size: clamp(26px, 3vw, 34px); }
.faq-sec .faq { margin-top: 14px; }
.faq details { scroll-margin-top: calc(var(--bar-full) + 16px + env(safe-area-inset-top)); }
.faq summary mark { background: rgba(212, 186, 122, 0.28); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.faq details p.faq-src { margin-top: -10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.dept-faq details p.faq-src { margin-top: 8px; font-size: 13px; line-height: 1.5; color: rgba(235, 235, 245, 0.5); }
.dept-faq details p.faq-src a { color: var(--teal-tx); text-decoration: underline; text-underline-offset: 3px; }
html:not(.js) .faqp .faq-search, html:not(.js) .faq-chips, html:not(.js) .faq-count { display: none; }
.faq-band .faq-search { margin-top: 24px; }
.about { padding: 48px 0 96px; }
.about .bx { margin-bottom: 18px; }
.about-h1 { font-size: clamp(48px, 7vw, 96px); line-height: 0.95; }
.about-story { max-width: 740px; margin-top: 28px; }
.about-story p { margin-top: 16px; font-size: 19px; line-height: 1.65; color: var(--ink-2); }
.about-story p:first-child { font-size: 22px; color: var(--ink); }
.about-h2 { font-size: clamp(30px, 4vw, 48px); margin-top: 72px; }
.founder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1040px; margin-top: 28px; }
.founder { padding: 22px; border-radius: 18px; background: rgba(245, 242, 237, 0.04); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: calc(var(--bar-full) + 16px + env(safe-area-inset-top)); }
.founder picture, .founder img { display: block; width: 100%; height: auto; border-radius: 12px; }
.founder h3 { margin-top: 18px; font-size: 30px; }
.founder-role { margin-top: 2px; font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-tx); }
.founder p:not(.founder-role) { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.founder strong { color: var(--ink); }
.about-how { max-width: 740px; }
.about-how p:not(.link-row) { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 760px) { .founder-grid { grid-template-columns: 1fr; } }
.iq-sec { margin-top: 64px; scroll-margin-top: calc(var(--bar-full) + 16px + env(safe-area-inset-top)); }
.iq-lede { max-width: 740px; margin-top: 12px; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.iq-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 980px; margin-top: 24px; }
.iq-term { padding: 18px 20px; border-radius: 14px; background: rgba(245, 242, 237, 0.04); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: calc(var(--bar-full) + 16px + env(safe-area-inset-top)); }
.iq-term dt { font-size: 18px; font-weight: 600; color: var(--ink); }
.iq-term dd p { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.iq-term dd p.iq-ex, .iq-term dd p.iq-note { font-size: 15px; color: var(--muted); }
.iq-rules { margin-top: 8px; padding-left: 20px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.iq-rules li { margin-bottom: 4px; }
.iq-rules li::marker { color: var(--gold-tx); }
.iq-term dd p.faq-src { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.faq-picks { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; max-width: 880px; margin-top: 26px; }
.faq-picks li { display: flex; }
.faq-picks a { display: block; flex: 1; padding: 14px 16px; border-radius: 12px; background: rgba(245, 242, 237, 0.04); box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; font-weight: 600; color: var(--ink); transition: box-shadow .15s ease, background .15s ease; }
.faq-picks a:hover { background: rgba(245, 242, 237, 0.07); box-shadow: inset 0 0 0 1px rgba(212, 186, 122, 0.45); }
.faq-band .link-row { margin-top: 18px; }
@media (max-width: 640px) {
  .faq-search { flex-direction: column; }
  .faq-search input { flex: none; }
  .faq-search .btn { width: 100%; }
  .faq-picks { grid-template-columns: 1fr; }
  .iq-terms { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .faq-chips button, .faq-picks a { transition: none; } }

/* 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-size: 19px; font-weight: 500; color: var(--ink-2); margin-top: 26px; line-height: 1.5; }
.letter b { color: var(--gold-tx); font-weight: 600; }
.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 footer. The nine departments roll by in outlined Anton with gold dots
   between them; the one under the pointer or focus fills in. Two copies of
   the run make the loop seamless (each carries its own trailing gap, so -50%
   lands exactly on the second). Hover, the Pause button and leaving the
   screen stop the roll; keyboard focus and reduced motion lay the names out
   still, every one in view. Under it, the signature and the legal links. */
.site-foot { border-top: 1px solid var(--line); }
.roll { position: relative; border-bottom: 1px solid var(--line); padding: 6px 0 24px; }
.roll-view { padding: 28px 0 22px; overflow: hidden; overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.roll-track { display: flex; width: max-content; animation: tick 52s linear infinite; }
.roll-view:hover .roll-track, .roll-view:focus-within .roll-track, .roll.is-paused .roll-track, .roll.is-offscreen .roll-track { animation-play-state: paused; }
.roll-set { display: flex; align-items: center; gap: 0 30px; padding-right: 30px; white-space: nowrap; }
.roll-set a { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: clamp(48px, 5.4vw, 78px); line-height: 1.1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--muted); transition: color .2s, text-shadow .2s, -webkit-text-stroke-color .2s; }
@supports (-webkit-text-stroke: 1px) {
  .roll-set a { color: transparent; -webkit-text-stroke: 1.2px rgba(245, 242, 237, 0.45); }
}
.roll-set a:hover, .roll-set a:focus-visible { color: var(--ink); -webkit-text-stroke-color: transparent; text-shadow: 0 0 34px rgba(95, 163, 189, 0.55); }
.roll-set a:focus-visible { outline-offset: 6px; }
.roll-set .dot { font-family: 'Anton', sans-serif; font-size: clamp(28px, 3vw, 42px); line-height: 1; color: var(--gold-tx); }
.roll-pause { position: absolute; bottom: 4px; right: max(var(--gutter), calc((100% - 1200px) / 2 + var(--gutter))); padding: 8px 10px; border: 0; background: none; font-family: 'Anton', sans-serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); cursor: pointer; }
.roll-pause:hover { color: var(--ink); }
html:not(.js) .roll-pause { display: none; }
/* Still: one copy, wrapped and centered, nothing masked. */
.roll:has(a:focus-visible) .roll-view { -webkit-mask-image: none; mask-image: none; }
.roll:has(a:focus-visible) .roll-track { width: auto; animation: none; }
.roll:has(a:focus-visible) .roll-set { flex-wrap: wrap; justify-content: center; white-space: normal; padding: 0 var(--gutter); row-gap: 4px; }
.roll:has(a:focus-visible) .roll-set[aria-hidden], .roll:has(a:focus-visible) .roll-set .dot:last-child { display: none; }
/* No :has(): the strip stays, so a focused name must be able to scroll into
   view (clip forbids it; site.js scrolls the strip back when focus leaves). */
@supports not selector(:has(a)) { .roll-view { overflow: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .roll { padding-bottom: 6px; }
  .roll-view { -webkit-mask-image: none; mask-image: none; }
  .roll-track { width: auto; animation: none; }
  .roll-set { flex-wrap: wrap; justify-content: center; white-space: normal; padding: 0 var(--gutter); row-gap: 4px; }
  .roll-set[aria-hidden], .roll-set .dot:last-child { display: none; }
  .roll-pause { display: none; }
  .roll-set a { transition: none; }
}
.footer { padding: 30px 0 calc(36px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: space-between; align-items: center; font-size: 14px; color: var(--muted); }
.foot-sig { display: flex; align-items: center; gap: 12px; }
.foot-sig img { width: auto; height: 32px; }
.foot-sig .word { font-size: 13px; color: var(--ink); }
.foot-tag { padding-left: 14px; border-left: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
.footer nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin-right: -10px; }
.footer nav a { padding: 12px 10px; }
.footer nav a:hover { color: var(--ink); }
.footer .legal { flex-basis: 100%; font-size: 12.5px; color: var(--muted-2); }
@media (max-width: 640px) {
  .roll { padding: 2px 0 26px; }
  .roll-view { padding: 22px 0 16px; }
  .roll-set { gap: 0 20px; padding-right: 20px; }
  .roll-set a { font-size: 44px; }
  .roll-set .dot { font-size: 26px; }
  .roll-track { animation-duration: 36s; }
  .footer { flex-direction: column; align-items: flex-start; gap: 6px; }
  .foot-sig { flex-wrap: wrap; row-gap: 8px; }
  .foot-tag { flex-basis: 100%; padding-left: 0; border-left: 0; }
  .footer nav { margin: 0 0 0 -10px; }
}

/* 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; }
.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, an Anton headline with its gold word, a mono
   "Effective" line, Anton section heads, 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 var(--gutter) 64px; } }
.doc .bx { margin-bottom: 22px; }
@media (max-width: 560px) { .doc .bx { font-size: 11px; letter-spacing: 0.16em; } }
.doc h1 { font-size: clamp(38px, 6vw, 56px); color: var(--ink); margin-bottom: 14px; }
.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-size: 20px; letter-spacing: 0.06em; line-height: 1.25; color: var(--ink); margin: 44px 0 14px; }
.doc h3 { font-family: inherit; font-size: 15.5px; font-weight: 700; text-transform: none; 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); }

/* ─── Guides: the document column, read as an article ──────────────────
   Bigger, brighter body text than the fine print; a byline under the
   headline; the not-affiliated line and the next reads at the end. The hub
   lists the guides as cards. */
.doc.guide p, .doc.guide li { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.doc.guide h2 { font-size: 24px; margin-top: 48px; }
.doc.guide .guide-lede { font-size: 20px; line-height: 1.55; color: var(--ink); margin-bottom: 8px; }
.doc .guide-by { 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.guide .tier { vertical-align: 2px; margin-left: 4px; }
/* The article's p rule outranks these; restate them at its weight. */
.doc.guide p.bx { font-size: 13px; line-height: inherit; color: var(--gold-tx); }
.doc.guide .guide-by { font-size: 11px; line-height: 1.7; color: var(--muted); }
.doc.guide .guide-end { font-size: 13.5px; color: var(--muted-2); }
.doc .guide-end { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted-2); }
.doc .guide-next { margin-top: 28px; }
.doc .crumbs { flex-wrap: wrap; }
.doc .crumbs a { border-bottom: 0; }
.doc .guide-next .link-row a { border-bottom: 0; }
.guide-list { display: grid; gap: 14px; margin-top: 8px; }
.guide-card { display: block; padding: 22px 24px; border-radius: 14px; background: #0E1320; box-shadow: inset 0 0 0 1px rgba(181, 158, 94, 0.22); transition: box-shadow .2s ease, transform .2s ease; }
.doc a.guide-card { border-bottom: 0; color: inherit; }
.guide-card:hover { box-shadow: inset 0 0 0 1px rgba(212, 186, 122, 0.55); transform: translateY(-2px); }
/* Beats .doc.guide h2's article spacing (same weight, later). */
.doc .guide-card h2 { margin: 0 0 8px; font-size: 24px; }
.doc .guide-card p { margin: 0; font-size: 16px; color: var(--ink-2); }
.doc .guide-card .bx { margin-bottom: 10px; font-size: 13px; color: var(--gold-tx); }
@media (prefers-reduced-motion: reduce) { .guide-card { transition: none; } .guide-card:hover { transform: none; } }
.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: var(--font-app); }
.dept h3, .dept summary { font-family: inherit; letter-spacing: 0; text-transform: none; }
.dept-hero { position: relative; padding: 40px 0 72px; }
.crumbs { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: rgba(235, 235, 245, 0.55); margin-bottom: 28px; }
.crumbs a { color: var(--teal-tx); padding: 3px 0; } /* a 24px-tall tap target, WCAG 2.5.8 */
.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 .bx .tier { align-self: center; }
.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; }
/* The router drops a switched-off card, so the count moves: four cards sit two
   by two rather than three and a lone one. Desktop only: the :has() selector
   outranks the narrower widths' plain .jobs rules. */
@media (min-width: 981px) { .jobs:has(> .job:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
.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: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; color: rgba(235, 235, 245, 0.72); }
.tier-list .tier { margin-top: 1px; }
.dept-copy { font-size: 18px; line-height: 1.6; color: rgba(235, 235, 245, 0.72); max-width: 720px; }
/* Phones: each chip sits over its line, so every line starts on the same edge. */
@media (max-width: 720px) { .tier-list { grid-template-columns: 1fr; gap: 16px; } .tier-list li { flex-direction: column; gap: 6px; } }
.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; }
}
/* Two by two, an odd last card takes the full row. */
@media (min-width: 621px) and (max-width: 980px) { .jobs > .job:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@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: 6px 12px; line-height: 1.2; }
}
.dept .tshots-head { margin-top: 0; align-items: center; }
.dept .tshots-head .dept-h2 { margin-bottom: 0; }

/* The home page below the hero takes the app's black too, like the department
   pages' main (owner's pick of option A, 2026-10-10). */
.home { background: #000; }

/* ─── Home: everyone at the rink (MARKETING-SITE-V2-PLAN §5, option A, owner
   2026-10-10). One card per department: its pitch, its headline features and
   the link out, so the home page reads at a glance and the department pages
   hold the rest. A card shows a line's chip only when the line is not
   Available now; the note under the grid says so. */
.dgrid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; }
.dgrid.n4 { --n: 4; } .dgrid.n3 { --n: 3; } .dgrid.n2 { --n: 2; }
/* A band: the nav's group, its line, then its cards. */
.eband { margin-top: 44px; scroll-margin-top: calc(var(--bar-full) + 24px + env(safe-area-inset-top)); }
.eband-head { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 8px 40px; align-items: end; margin-bottom: 20px; }
.eband-g { grid-column: 1 / -1; font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--teal-tx); }
.eband-k { font-family: 'Anton', sans-serif; font-size: 28px; line-height: 1.05; text-transform: uppercase; color: var(--gold-tx); }
.eband-b { font-size: 16px; line-height: 1.6; color: rgba(235, 235, 245, 0.72); max-width: 640px; }
.dcard { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 18px; border-radius: 14px; background: #0E1320; box-shadow: inset 0 0 0 1px rgba(181, 158, 94, 0.22); scroll-margin-top: calc(var(--bar-full) + 24px + env(safe-area-inset-top)); transition: box-shadow .2s ease; }
.dcard:hover, .dcard:focus-within, .dcard:target { box-shadow: inset 0 0 0 1px rgba(181, 158, 94, 0.55); }
.dcard-eb { font-family: 'Anton', sans-serif; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-lt); }
.dcard h3 { font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }
.dcard-feats { flex: 1; list-style: none; display: grid; align-content: start; gap: 8px; }
.dcard-feats li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.45; color: rgba(235, 235, 245, 0.72); }
.dcard-feats li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.dcard-feats .tier { display: inline-block; margin-left: 4px; padding: 1px 7px; font-size: 10px; vertical-align: 1px; }
.dcard .tier[data-tier="now"] { display: none; }
.dcard .link-row { margin-top: 0; }
.band { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.band .dept-h2 { margin-bottom: 18px; }
.band-flow { list-style: none; display: grid; gap: 10px; }
.band-flow li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 12px; background: #0E1320; box-shadow: inset 0 0 0 1px rgba(181, 158, 94, 0.18); font-size: 15px; color: rgba(235, 235, 245, 0.85); }
.band-flow li > :last-child { text-align: right; color: rgba(235, 235, 245, 0.6); }
.band-flow li b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-tx); }
.band-flow .tier { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 10px; vertical-align: 1px; }
/* The FAQ keeps the home page's section rhythm after the black block. */
.home .dept + .section { padding-top: 8px; scroll-margin-top: calc(var(--bar-full) + 28px + env(safe-area-inset-top)); }
@media (max-width: 1120px) { .dgrid, .dgrid.n3 { grid-template-columns: 1fr 1fr; } .eband-head { grid-template-columns: 1fr; } }
/* Two by two, a three-card row's last card takes the full width. */
@media (min-width: 621px) and (max-width: 1120px) { .dgrid.n3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 980px) { .band { grid-template-columns: 1fr; gap: 32px; } }
/* Phones: one column for every row. Each count class is named, because the
   1120px rule names .dgrid.n3 and a bare .dgrid here cannot outrank it (the
   Play row sat in two narrow columns on phones until 2026-10-11). */
@media (max-width: 620px) {
  .dgrid, .dgrid.n2, .dgrid.n3, .dgrid.n4 { grid-template-columns: 1fr; }
}

/* Department pages since the nav (owner, 2026-10-10): two side-by-side
   "ways in" cards, a job card that lists its lines with chips, and a tease
   that points at the page covering a topic in full. */
.jobs.two { grid-template-columns: 1fr 1fr; }
.job-feats { list-style: none; display: grid; gap: 10px; margin-top: 4px; }
.job-feats li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; color: rgba(235, 235, 245, 0.72); }
.job .link-row { margin-top: 6px; }
.jobs.two .job p { flex: none; }
.jobs.two .job .link-row { margin-top: auto; padding-top: 6px; }
.tease { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; padding: 28px 32px 30px; border-radius: 18px; background: radial-gradient(600px 240px at 100% 120%, rgba(95, 163, 189, 0.12), transparent), #0E1320; box-shadow: inset 0 0 0 1px rgba(181, 158, 94, 0.22); }
.tease-g { font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--teal-tx); }
.tease-k { margin-top: 8px; font-family: 'Anton', sans-serif; font-size: 34px; line-height: 1.02; text-transform: uppercase; color: var(--gold-tx); }
.tease-b { margin-top: 10px; max-width: 640px; font-size: 16px; line-height: 1.6; color: rgba(235, 235, 245, 0.72); }
.tease .tier-list { grid-template-columns: 1fr; margin-top: 16px; }
.tease .link-row { margin: 0; }
@media (max-width: 720px) { .jobs.two { grid-template-columns: 1fr; } .tease { grid-template-columns: 1fr; padding: 24px 20px 26px; } }

/* Stay-tuned pages (owner, 2026-10-10): every department has a page in the
   nav; until its content lands, one card says what is on deck. */
.soon { max-width: 860px; padding: 30px 32px 32px; border-radius: 18px; background: #0E1320; box-shadow: inset 0 0 0 1px rgba(181, 158, 94, 0.22); }
.soon-k { font-family: 'Anton', sans-serif; font-size: 34px; line-height: 1; text-transform: uppercase; color: var(--gold-tx); }
.soon-b { margin-top: 10px; font-size: 16px; color: rgba(235, 235, 245, 0.72); }
.soon .tier-list { grid-template-columns: 1fr; margin-top: 20px; }
.soon .hero-cta { margin-top: 26px; }
@media (max-width: 620px) { .soon { padding: 24px 20px 26px; } }