@font-face{font-family:Geist;src:url("/assets/fonts/Geist-Variable.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Spectral;src:url("/assets/fonts/Spectral-500-normal.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Spectral;src:url("/assets/fonts/Spectral-600-normal.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Spectral;src:url("/assets/fonts/Spectral-500-italic.woff2") format("woff2");font-style:italic;font-weight:500;font-display:swap}
@font-face{font-family:Spectral;src:url("/assets/fonts/Spectral-600-italic.woff2") format("woff2");font-style:italic;font-weight:600;font-display:swap}

/* =========================================================
   SCOUTCREW.IO — marketing site
   Field Green brand, FINAL v3 tokens (final/final-v3.js T.dark / T.light).
   Type: Geist (UI) + Geist Mono (every number/label, tabular).
   Gold leads CTAs · green = the crew / positive · one gold family.
   Fonts are self-hosted under assets/fonts (see bundled OFL notices).
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

:root{
  --bg:oklch(0.168 0.014 160); --sf:oklch(0.228 0.018 160); --sf-2:oklch(0.268 0.020 160); --sf-3:oklch(0.312 0.022 160);
  --line:oklch(0.315 0.021 160); --line-s:oklch(0.395 0.025 160);
  --ink:oklch(0.96 0.008 140); --ink-2:oklch(0.80 0.011 145); --ink-3:oklch(0.63 0.014 152); --ink-4:oklch(0.575 0.015 152);
  --gold:oklch(0.85 0.128 88); --gold-ink:oklch(0.86 0.115 88); --gold-tint:oklch(0.33 0.05 88); --on-gold:oklch(0.25 0.05 84);
  --focus:var(--gold); --focus-on-dark:var(--gold);
  --green:oklch(0.66 0.12 152); --green-ink:oklch(0.80 0.10 152); --g-tint:oklch(0.29 0.042 155);
  --pos:oklch(0.70 0.14 152); --neg:oklch(0.64 0.19 25); --neg-tint:oklch(0.28 0.06 28);
  --d1:oklch(0.46 0.105 156); --d2:oklch(0.245 0.065 160);
  --v-kalshi:oklch(0.72 0.13 156); --v-poly:oklch(0.68 0.15 250);
  --sans:Geist,-apple-system,system-ui,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,monospace;
  --rc:20px; --rr:13px;
  --shadow:0 30px 70px -38px rgba(0,0,0,.72),0 2px 6px -2px rgba(0,0,0,.4);
  --sheen:inset 0 1px 0 oklch(1 0 0 / .055);
  --wrap:1140px;
  /* accent lead: gold by default (gold = the pick). data-accent="green" swaps CTA energy. */
  --act:var(--gold); --act-ink:var(--gold-ink); --on-act:var(--on-gold); --act-tint:var(--gold-tint);
  /* sport tint — hue driven by the Sport System demo (MLB 240 · NBA 35 · WNBA 330 · NHL 200 · NFL 145 · Soccer 285 · UFC 15 · Boxing 55) */
  --sh:152; --sc:0.12; --sport:oklch(var(--tl,0.72) var(--sc) var(--sh));
  --tl:0.72;
}
[data-accent=green]{--act:var(--green);--act-ink:var(--green-ink);--on-act:oklch(0.16 0.03 158);--act-tint:var(--g-tint)}
[data-theme=light]{--tl:0.52}
[data-density=compact]{--rc:15px;--rr:10px}
[data-theme=light]{
  --bg:oklch(0.971 0.007 155); --sf:#fff; --sf-2:oklch(0.958 0.008 155); --sf-3:oklch(0.928 0.010 155);
  --line:oklch(0.884 0.010 155); --line-s:oklch(0.815 0.014 155);
  --ink:oklch(0.22 0.022 155); --ink-2:oklch(0.37 0.020 153); --ink-3:oklch(0.51 0.017 152); --ink-4:oklch(0.575 0.015 152);
  --gold:oklch(0.72 0.115 82); --gold-ink:oklch(0.52 0.115 78); --gold-tint:oklch(0.948 0.05 86); --on-gold:oklch(0.24 0.05 80);
  --focus:var(--gold-ink); --focus-on-dark:oklch(0.85 0.128 88);
  --green:oklch(0.50 0.13 152); --green-ink:oklch(0.36 0.10 152); --g-tint:oklch(0.945 0.032 152);
  --pos:oklch(0.52 0.13 152); --neg:oklch(0.55 0.20 27); --neg-tint:oklch(0.94 0.05 28);
  --d1:oklch(0.50 0.115 155); --d2:oklch(0.30 0.075 158);
  --v-kalshi:oklch(0.48 0.14 156); --v-poly:oklch(0.50 0.17 252);
  --shadow:0 22px 50px -34px rgba(35,52,42,.5); --sheen:none;
}
body{margin:0;background:#151a17;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.6;font-variant-ligatures:contextual;-webkit-font-smoothing:antialiased}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:var(--gold-ink);text-decoration-color:color-mix(in oklab,var(--gold) 45%,transparent);text-underline-offset:3px}
a:hover{color:var(--gold)}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip-link{position:fixed;top:10px;left:10px;z-index:1000;padding:10px 14px;border-radius:8px;background:var(--gold);color:var(--on-gold);font:700 13px/1 var(--sans);text-decoration:none;transform:translateY(-160%);transition:transform .16s ease}
.skip-link:focus{color:var(--on-gold);transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none}}
h1,h2,h3,h4{margin:0;letter-spacing:-.025em;line-height:1.08;text-wrap:balance;font-weight:700}
p{margin:0;text-wrap:pretty}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sec{padding:clamp(56px,7vw,104px) 0;position:relative}
.sec.tight{padding:clamp(40px,4.6vw,68px) 0}
.eyebrow{display:flex;align-items:center;gap:10px;font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-bottom:16px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px;flex:none}
.eyebrow.g::before{background:var(--green)}
.h1{font-size:clamp(38px,5.6vw,66px);letter-spacing:-.036em}
.h2{font-size:clamp(28px,3.5vw,42px)}
.h3{font-size:clamp(20px,2vw,25px);letter-spacing:-.02em}
.lede{color:var(--ink-2);font-size:clamp(16.5px,1.35vw,19px);max-width:62ch}
.dim{color:var(--ink-3)}
.fine{font:500 12.5px/1.65 var(--mono);color:var(--ink-4);letter-spacing:.005em}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- field backdrop ---------- */
.page{position:relative;background:#151a17;background:var(--bg)}
.page>*:not(.field):not(.skip-link){position:relative;z-index:1}
.field{position:absolute;inset:0 0 auto;height:100vh;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 62% at 50% -16%,oklch(0.30 0.05 153 / .60),transparent 62%),
    radial-gradient(78% 50% at 97% 106%,oklch(0.22 0.045 150 / .45),transparent 64%),
    var(--bg);}
[data-theme=light] .field{background:
    radial-gradient(120% 60% at 50% -16%,oklch(0.93 0.035 150 / .9),transparent 60%),
    radial-gradient(88% 48% at 98% 106%,oklch(0.94 0.03 145 / .7),transparent 62%),
    var(--bg);}
.field::after{content:"";position:absolute;inset:0;
  background:linear-gradient(112deg,transparent 40%,oklch(0.62 0.07 150 / .055) 46.5%,transparent 53%),
             linear-gradient(68deg,transparent 52%,oklch(0.62 0.07 155 / .042) 58%,transparent 65%)}
[data-theme=light] .field::after{background:linear-gradient(112deg,transparent 40%,oklch(0.85 0.05 150 / .15) 46.5%,transparent 53%)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--bg) 86%,transparent);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:66px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:none}
.brand b{font-size:17px;font-weight:700;letter-spacing:-.02em;display:block;line-height:1.1}
.brand i{font:600 9.5px/1 var(--mono);letter-spacing:.16em;color:var(--ink-4);font-style:normal;display:block;margin-top:3px;white-space:nowrap}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:8px 10px;border-radius:9px;white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--sf)}
.nav a[aria-current=page]{color:var(--ink);background:var(--sf-2);box-shadow:var(--sheen)}
/* Two header actions, two audiences: .mobile-login / .btn-ghost sends a RETURNING
   user to the app's own login+signup gate at /app/; .mobile-invite / .btn-gold sends
   a NEW one to the invite request. Each pair is the same link at a different breakpoint. */
.nav .mobile-invite,.nav .mobile-login{display:none}
.hdr-r{display:flex;align-items:center;gap:9px;flex:none}
.icb{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--sf);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;padding:0}
.icb:hover{color:var(--ink);border-color:var(--line-s)}
.burger{display:none}
@media (max-width:840px){
  .nav{position:fixed;inset:66px 0 auto;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:10px 18px 18px;margin:0;display:none}
  .nav.open{display:flex}
  .nav a{padding:13px 10px;font-size:16px;border-radius:10px}
  .nav .mobile-login{display:inline-flex;justify-content:center;margin-top:10px;font-weight:600;
    background:var(--sf);border:1px solid var(--line-s);color:var(--ink)}
  .nav .mobile-login:hover{background:var(--sf-2);color:var(--ink)}
  .nav .mobile-invite{display:inline-flex;justify-content:center;margin-top:8px;background:var(--act);color:var(--on-act)}
  .nav .mobile-invite:hover{background:color-mix(in oklab,var(--act) 92%,#fff);color:var(--on-act)}
  .burger{display:grid;margin-left:auto}
  .hdr-r .btn{display:none}
}
/* Between the mobile breakpoint and 1020px the header now carries two actions.
   The HEADER copy of the decorative brand tagline yields first so the nav and both
   CTAs stay on one line instead of clipping. It stays scoped to `.hdr .brand i`:
   every page has a SECOND `.brand` inside `.ftr-brand`, and an unscoped `.brand i`
   would strip the tagline from the footer too — removing it from the page entirely
   in exactly the band the header rule leans on it. The footer is under no space
   pressure here (`.ftr-top` stays a 4-column grid until 820px).
   840.02px, not 841px: at a fractional viewport such as 840.8 CSS px (a 1051px
   window at 125% OS scaling) an 841px floor leaves a gap where this query and the
   840px one above BOTH miss, showing the tagline and `.hdr-r .btn` at once — the
   exact collision this rule exists to prevent. */
@media (min-width:840.02px) and (max-width:1019px){.hdr .brand i{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.005em;padding:12px 20px;border-radius:12px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:transform .16s,background .16s,border-color .16s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{cursor:wait;opacity:.72;transform:none}
.btn-gold{background:var(--act);color:var(--on-act);box-shadow:0 10px 26px -14px color-mix(in oklab,var(--act) 70%,transparent)}
.btn-gold:hover{color:var(--on-act);background:color-mix(in oklab,var(--act) 92%,#fff)}
.btn-ghost{background:var(--sf);color:var(--ink);border-color:var(--line-s)}
.btn-ghost:hover{color:var(--ink);background:var(--sf-2)}
.btn.sm{padding:8px 14px;font-size:14px;border-radius:10px}
.btn.lg{padding:15px 26px;font-size:16.5px}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- surfaces ---------- */
.card{background:var(--sf);border:1px solid var(--line);border-radius:var(--rc);padding:24px;box-shadow:var(--sheen)}
.card.pad-lg{padding:clamp(24px,3vw,36px)}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-2);font-size:15.5px}
.num-badge{font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--ink-4);margin-bottom:14px;display:block}
.chip{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:7px;color:var(--c,var(--ink-3));background:color-mix(in oklab,var(--c,var(--ink-3)) 13%,transparent);border:1px solid color-mix(in oklab,var(--c,var(--ink-3)) 45%,transparent);white-space:nowrap}
.chip.gold{--c:var(--gold)}.chip.green{--c:var(--green)}.chip.kalshi{--c:var(--v-kalshi)}.chip.poly{--c:var(--v-poly)}.chip.red{--c:var(--neg)}
.rail{border-left:2px solid var(--gold);padding-left:18px}
.rail.g{border-color:var(--green)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(52px,7vw,96px) 0 clamp(44px,5.4vw,76px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(30px,4.4vw,64px);align-items:center}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr}}
.hero h1{margin-bottom:20px}
.hero h1 .gl{color:var(--gold)}
.hero .lede{font-size:clamp(17px,1.5vw,20.5px);margin-bottom:28px}
.hero-fine{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 18px}
.hero-art{position:relative;display:grid;justify-items:center;align-content:center;gap:clamp(20px,3vw,34px)}
.ghost-mark{position:absolute;right:-8%;top:-14%;width:min(560px,72vw);opacity:.045;pointer-events:none;z-index:0}

/* ---------- stat strip ---------- */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--rc);background:var(--sf);overflow:hidden}
.strip>div{padding:20px 22px;border-right:1px solid var(--line)}
.strip>div:last-child{border-right:0}
.strip b{display:block;font:700 clamp(24px,2.4vw,31px)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-bottom:7px}
.strip span{font:500 12px/1.45 var(--mono);color:var(--ink-4);letter-spacing:.04em;text-transform:uppercase}
@media (max-width:820px){.strip{grid-template-columns:repeat(2,1fr)}.strip>div:nth-child(2n){border-right:0}.strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ---------- sample game card ---------- */
.gc{background:var(--sf);border:1px solid var(--line);border-radius:var(--rc);box-shadow:var(--shadow);overflow:hidden;position:relative;--wp:56%}
.gc-wpwrap{position:relative;height:38px;background:color-mix(in oklab,var(--sf-2) 70%,transparent);border-bottom:1px solid var(--line)}
.gc-wp{position:absolute;inset:0 0 auto;height:9px;background:linear-gradient(90deg,var(--ta) 0 var(--wp),var(--tb) var(--wp) 100%)}
.gc-open{position:absolute;top:-2px;left:clamp(2%,var(--wp0,var(--wp)),98%);height:13px;z-index:2;
  border-left:2px dashed oklch(1 0 0 / .92);filter:drop-shadow(0 0 3px oklch(0 0 0 / .85))}
[data-theme=light] .gc-open{border-left-color:oklch(0.18 0 0 / .8);filter:drop-shadow(0 0 3px oklch(1 0 0 / .9))}
.gc-open::after{content:"";position:absolute;top:13px;left:-3px;width:6px;height:6px;border-radius:50%;
  background:var(--ink-2);box-shadow:0 0 0 2px var(--sf)}
.gc-pill{position:absolute;top:6px;left:clamp(64px,var(--wp),calc(100% - 64px));transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:6px;white-space:nowrap;
  padding:5px 10px;border-radius:999px;font:600 12px/1 var(--mono);font-variant-numeric:tabular-nums;
  background:var(--sf);border:1px solid color-mix(in oklab,var(--pc,var(--line-s)) 70%,transparent);color:var(--pc,var(--ink));
  box-shadow:0 4px 14px -5px rgba(0,0,0,.75),0 0 0 3px color-mix(in oklab,var(--pc,var(--ink-4)) 13%,transparent)}
.gc-pill b{font-weight:600;font-size:11px;color:var(--pos)}
.gc-pill b.dn{color:var(--neg)}
@keyframes driftPill{0%,100%{transform:translateX(-50%)}50%{transform:translateX(calc(-50% + 11px))}}
[data-anim=on] .gc.is-live .gc-pill{animation:driftPill 7s ease-in-out infinite}
/* the upset tell — the favourite has flipped */
@keyframes upsetRing{0%,100%{box-shadow:0 4px 14px -5px rgba(0,0,0,.75),0 0 0 3px color-mix(in oklab,var(--neg) 22%,transparent)}
  50%{box-shadow:0 4px 14px -5px rgba(0,0,0,.75),0 0 0 9px color-mix(in oklab,var(--neg) 3%,transparent)}}
.gc.is-upset .gc-pill{--pc:var(--neg);background:color-mix(in oklab,var(--neg) 22%,var(--sf));color:oklch(0.97 0.02 25)}
.gc.is-upset .gc-pill .tm{color:oklch(0.90 0.08 25)}
[data-theme=light] .gc.is-upset .gc-pill{background:color-mix(in oklab,var(--neg) 14%,#fff);color:oklch(0.38 0.19 27)}
[data-theme=light] .gc.is-upset .gc-pill .tm{color:oklch(0.48 0.18 27)}
[data-anim=on] .gc.is-upset .gc-pill{animation:upsetRing 1.9s ease-in-out infinite}
.gc.is-upset .gc-wpwrap{background:color-mix(in oklab,var(--neg) 9%,transparent)}
.upset-tag{font:600 10px/1 var(--mono);letter-spacing:.12em;padding:3px 6px;border-radius:5px;background:color-mix(in oklab,var(--neg) 20%,transparent);color:oklch(0.86 0.10 25)}
[data-theme=light] .upset-tag{color:oklch(0.45 0.18 27)}
.gc-b{padding:18px 20px 16px}
.gc-top{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.gc-top .t{margin-left:auto;font:500 12px/1 var(--mono);color:var(--ink-4)}
.gc-team{display:flex;align-items:center;gap:11px;padding:9px 0;flex-wrap:wrap;row-gap:5px}
.gc-team+.gc-team{border-top:1px solid var(--line)}
.gc-team img{width:32px;height:32px;flex:none}
.gc-team .nm{font-weight:600;font-size:16px;letter-spacing:-.01em;flex:0 1 auto;white-space:nowrap}
.gc-team .wp{font:600 11.5px/1 var(--mono);padding:4px 7px;border-radius:6px;flex:none;color:var(--tc);background:color-mix(in oklab,var(--tc) 15%,transparent)}
.gc-team .pr{margin-left:auto;font:600 14px/1 var(--mono);font-variant-numeric:tabular-nums;flex:none}
.gc-read{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-2);line-height:1.55}
.gc-read .hl{color:var(--ink);font-weight:600;font-family:var(--mono);font-variant-numeric:tabular-nums}
.gc-read .hl-pos{color:var(--pos);font-weight:600;font-family:var(--mono)}
.gc-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.gc-foot .fair{border-style:dashed}
.gc-foot .rd{margin-left:auto;font:600 12.5px/1 var(--mono);color:var(--gold-ink);text-decoration:none;white-space:nowrap}
.gc-market{align-items:center}
.gc-market-heading{display:flex;align-items:baseline;gap:8px;flex:1 0 100%;min-width:0;flex-wrap:wrap}
.gc-market-label{font:700 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.gc-market-selection{font:500 11px/1.25 var(--mono);letter-spacing:.03em;color:var(--ink-4);overflow-wrap:anywhere}
.gc-market-values{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.gc-market-values .chip b{font-size:16px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gc-note{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);text-align:center;margin-top:12px}
.stars{display:inline-flex;gap:2px;color:var(--gold);font-size:12px;letter-spacing:1px;vertical-align:1px}
.stars i{color:var(--line-s);font-style:normal}

/* annotated card */
.anno{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(24px,4vw,52px);align-items:center}
@media (max-width:900px){.anno{grid-template-columns:1fr}}
.anno-list{display:grid;gap:2px}
.anno-list>div{display:grid;grid-template-columns:46px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.anno-list>div:last-child{border-bottom:0}
.anno-list b{display:block;font-size:15.5px;margin-bottom:3px}
.anno-list p{font-size:14.5px;color:var(--ink-3)}
.anno-list em{font:600 12px/1 var(--mono);color:var(--gold-ink);font-style:normal;padding-top:4px}

/* ---------- feature rows ---------- */
.frow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,3.6vw,54px);align-items:start;padding:clamp(30px,4vw,52px) 0;border-top:1px solid var(--line)}
@media (max-width:840px){.frow{grid-template-columns:1fr;gap:18px}}
.frow h3{margin-bottom:10px}
.frow p{color:var(--ink-2)}
.blist{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.blist li{display:flex;gap:11px;font-size:15.5px;color:var(--ink-2);align-items:flex-start}
.blist li::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--green);margin-top:8px;margin-left:5px}
.blist.gold li::before{background:var(--gold)}

/* screen list */
.screens{display:grid;gap:0}
.screens div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:16px 0;border-top:1px solid var(--line);align-items:baseline}
.screens div:last-child{border-bottom:1px solid var(--line)}
.screens b{font:600 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink)}
.screens p{font-size:15px;color:var(--ink-2)}
@media (max-width:640px){.screens div{grid-template-columns:1fr;gap:5px}}

/* steps */
.steps{display:grid;gap:14px}
.step{display:grid;grid-template-columns:44px 1fr;gap:18px;background:var(--sf);border:1px solid var(--line);border-radius:var(--rc);padding:22px 24px;box-shadow:var(--sheen)}
.step .sn{font:700 15px/44px var(--mono);color:var(--gold);background:var(--gold-tint);border-radius:11px;text-align:center;height:44px;display:block}
.step h3{font-size:19px;margin-bottom:6px}
.step p{color:var(--ink-2);font-size:15.5px}

/* ---------- CTA band ---------- */
.band{background:linear-gradient(150deg,var(--d1),var(--d2) 78%);border:1px solid color-mix(in oklab,var(--gold) 24%,transparent);border-radius:var(--rc);padding:clamp(30px,4.4vw,56px);position:relative;overflow:hidden;color:oklch(0.97 0.01 140)}
.band :focus-visible{outline-color:var(--focus-on-dark)}
.band .lede,.band p{color:oklch(0.88 0.02 145)}
.band .eyebrow{color:oklch(0.80 0.04 130)}
.band-in{position:relative;z-index:1;max-width:64ch}
.band .ghost{position:absolute;right:-40px;bottom:-70px;width:290px;opacity:.11;z-index:0}

/* ---------- invite form ---------- */
.form{display:grid;gap:14px;max-width:460px}
.f-row{display:grid;gap:7px}
.f-row label{font:600 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.f-row input{font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--sf-2);border:1px solid var(--line-s);border-radius:11px;padding:12px 14px;width:100%}
.f-row input::placeholder{color:var(--ink-4)}
.f-row input.code{font-family:var(--mono);letter-spacing:.22em;text-transform:uppercase}
.f-row input[aria-invalid=true]{border-color:var(--neg);box-shadow:0 0 0 3px color-mix(in oklab,var(--neg) 18%,transparent)}
.check{display:grid;grid-template-columns:20px 1fr;gap:11px;font-size:14px;color:var(--ink-2);align-items:start}
.check input{margin:3px 0 0;accent-color:var(--gold);width:17px;height:17px}
.check input[aria-invalid=true]{outline:2px solid var(--neg);outline-offset:2px}
.form-note{font:500 12.5px/1.6 var(--mono);color:var(--ink-4)}
.form-note[data-state=pending]{color:var(--gold-ink)}
.form-note[data-state=success]{color:var(--green-ink)}
.form-note[data-state=error]{color:var(--neg)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:0;max-width:840px}
.faq details{border-top:1px solid var(--line);padding:2px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:19px 34px 19px 0;font-size:17px;font-weight:600;letter-spacing:-.015em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:17px;font:400 22px/1 var(--mono);color:var(--gold);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 20px;color:var(--ink-2);font-size:15.5px;max-width:70ch}
.faq .a p+p{margin-top:11px}

/* ---------- legal doc ---------- */
.doc-grid{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:start}
@media (max-width:940px){.doc-grid{grid-template-columns:1fr}.doc-toc{position:static!important;max-height:none!important}}
.doc-toc{position:sticky;top:92px;max-height:calc(100vh - 130px);overflow:auto;font-size:13.5px;display:grid;gap:1px}
.doc-toc .tl{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-bottom:10px}
.doc-toc a{display:block;padding:5px 10px;border-radius:7px;color:var(--ink-3);text-decoration:none;line-height:1.35}
.doc-toc a:hover{background:var(--sf);color:var(--ink)}
.doc{max-width:74ch;font-size:16.5px}
.doc .meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.doc h2{font-size:clamp(20px,2vw,24px);letter-spacing:-.02em;margin:38px 0 12px;scroll-margin-top:92px}
.doc h2:first-of-type{margin-top:26px}
.doc h2 .n{font-family:var(--mono);color:var(--gold);font-size:.82em;margin-right:9px;font-weight:600}
.doc h3{font-size:16.5px;margin:22px 0 8px}
.doc p{color:var(--ink-2);margin:0 0 13px}
.doc strong{color:var(--ink);font-weight:600}
.doc ul,.doc ol{color:var(--ink-2);margin:0 0 14px;padding-left:22px;display:grid;gap:8px}
.doc li{padding-left:2px}
.doc .callout{background:var(--sf);border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:var(--rr);padding:18px 20px;margin:0 0 22px}
.doc .callout p:last-child{margin:0}
.doc table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px}
.doc th{text-align:left;font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);padding:0 12px 9px 0;border-bottom:1px solid var(--line-s)}
.doc td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.doc td:first-child{color:var(--ink);font-weight:500}
.doc td .num{white-space:nowrap}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,90px);padding:clamp(38px,4.4vw,58px) 0 34px;background:color-mix(in oklab,var(--sf) 42%,transparent)}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:32px;margin-bottom:34px}
@media (max-width:820px){.ftr-top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr-top{grid-template-columns:1fr}}
.ftr h4{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-bottom:14px}
.ftr-col{display:grid;gap:9px;align-content:start}
.ftr-col a{font-size:14.5px;color:var(--ink-2);text-decoration:none}
.ftr-col a:hover{color:var(--gold)}
.ftr-brand p{font-size:14.5px;color:var(--ink-3);max-width:38ch;margin-top:14px}
.ftr-legal{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font:500 12px/1.6 var(--mono);color:var(--ink-4)}
.ftr-legal a{color:var(--ink-3);text-decoration:none}
.ftr-legal a:hover{color:var(--gold)}
.ftr-legal .rg{color:var(--ink-3)}
.ftr-warn{margin-top:16px;font:500 12px/1.7 var(--mono);color:var(--ink-4);max-width:96ch}

/* ---------- reveal ---------- */
/* .rv is a hook only — entrance motion is opt-in, so static renders and no-JS are always correct */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
[data-anim] .rv.in{animation:rise .6s cubic-bezier(.17,.89,.24,1.06) both}
@media (prefers-reduced-motion:reduce){.rv.in{animation:none}.btn:hover{transform:none}}

/* =========================================================
   LIVE LAYER — the app's energy: gradient rails, ghost
   watermarks, pulsing LIVE pills, drifting win-prob bars.
   All of it stops dead under [data-anim="off"] and
   prefers-reduced-motion.
   ========================================================= */
@keyframes drift{0%,100%{transform:translateX(-1px)}50%{transform:translateX(9px)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
@keyframes scan{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes sweep{0%{transform:translateY(-120%)}100%{transform:translateY(320%)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes tick{0%{opacity:.35;transform:translateY(-3px)}100%{opacity:1;transform:none}}
@keyframes glowline{0%,100%{opacity:.5}50%{opacity:1}}

/* gradient rail — every card gets the app's two-team top edge */
.gc{position:relative}

/* huge faded monogram behind the card, like the app's watermark */
.gc-b{position:relative}
.gc-ghost{position:absolute;right:12px;top:30px;font:700 72px/1 var(--mono);letter-spacing:-5px;color:var(--ink);opacity:.05;pointer-events:none;user-select:none;z-index:0}
.gc-top,.gc-team,.gc-read,.gc-foot{position:relative;z-index:1}

/* LIVE pill with a breathing dot */
.chip.live{--c:var(--neg)}
.chip.live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
[data-anim=on] .chip.live::before{animation:pulse 1.5s ease-in-out infinite}

/* value / verdict pill accents used across the site */
.chip.buy{--c:var(--green)}
.chip.sport{--c:oklch(var(--tl,0.72) 0.12 240)}

/* number that just changed */
[data-anim=on] .tickd{animation:tick .5s ease-out}

/* card hover — a real lift plus a tinted edge */
.card,.gc{transition:transform .18s cubic-bezier(.17,.89,.24,1.06),border-color .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--act) 34%,var(--line));box-shadow:var(--shadow)}
.gc:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--act) 30%,var(--line))}
@media (prefers-reduced-motion:reduce){.card:hover,.gc:hover{transform:none}}

/* ---------- hero: the scouting-scan mark (from the Sport System loader set) ---------- */
@keyframes scanPulse{0%{transform:scale(.34);opacity:.85}100%{transform:scale(1);opacity:0}}
.scanmark{position:relative;width:min(268px,64vw);aspect-ratio:1;display:grid;place-items:center}
.scanmark .glow{position:absolute;inset:-16%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in oklab,var(--green) 26%,transparent),transparent 62%);filter:blur(10px)}
.scanmark .dial{position:absolute;border-radius:50%;border:1px solid color-mix(in oklab,var(--green) 20%,var(--line))}
.scanmark .dial.d1{inset:0}.scanmark .dial.d2{inset:13%}.scanmark .dial.d3{inset:27%;border-style:dashed;opacity:.6}
.scanmark .rings{position:absolute;inset:0}
.scanmark .rings i{position:absolute;inset:0;border-radius:50%;opacity:.3;
  border:2px solid color-mix(in oklab,var(--green) 55%,transparent)}
[data-anim=on] .scanmark .rings i{opacity:0;animation:scanPulse 2.6s ease-out infinite}
[data-anim=on] .scanmark .rings i:nth-child(2){animation-delay:.87s}
[data-anim=on] .scanmark .rings i:nth-child(3){animation-delay:1.74s}
.scanmark .sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 292deg,color-mix(in oklab,var(--gold) 40%,transparent) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 40%,#000 41%);mask:radial-gradient(circle,transparent 40%,#000 41%)}
[data-anim=on] .scanmark .sweep{animation:scan 3.8s linear infinite}
.scanmark .core{position:relative;z-index:2;filter:drop-shadow(0 26px 46px rgba(0,0,0,.5))}
.hero-card{width:min(392px,100%);z-index:2}
@media (max-width:940px){.scanmark{width:min(224px,52vw)}.hero-card{width:100%;max-width:440px}}

/* ---------- the desk: full-bleed marquee of compact cards ---------- */
.desk{position:relative;overflow:hidden;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in oklab,var(--sf) 40%,transparent)}
.desk::before,.desk::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.desk::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.desk::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.desk-hd{max-width:var(--wrap);margin:0 auto 18px;padding:0 24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.desk-hd .eyebrow{white-space:nowrap}
.desk-track{display:flex;gap:14px;width:max-content}
[data-anim=on] .desk-track{animation:marquee 46s linear infinite}
.desk:hover .desk-track,.desk:focus-within .desk-track{animation-play-state:paused}
.desk:focus-visible{outline:2px solid var(--focus);outline-offset:-4px;border-radius:0}
.desk-track [aria-hidden=true]{pointer-events:none}
.cc{width:352px;flex:none;background:var(--sf);border:1px solid var(--line);border-radius:var(--rr);padding:0;overflow:hidden;position:relative}
.cc-rail{position:relative;height:28px;background:color-mix(in oklab,var(--sf-2) 60%,transparent);border-bottom:1px solid var(--line)}
.cc-rail .b{position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--ta) 0 var(--wp),var(--tb) var(--wp) 100%)}
.cc-rail .o{position:absolute;top:-2px;left:clamp(2%,var(--wp0),98%);height:10px;z-index:2;border-left:2px dashed oklch(1 0 0 / .9);filter:drop-shadow(0 0 3px oklch(0 0 0 / .8))}
.cc-rail .o::after{content:"";position:absolute;top:10px;left:-3px;width:5px;height:5px;border-radius:50%;background:var(--ink-2);box-shadow:0 0 0 2px var(--sf)}
[data-theme=light] .cc-rail .o{border-left-color:oklch(0.18 0 0 / .75);filter:drop-shadow(0 0 3px oklch(1 0 0 / .9))}
.cc-rail .p{position:absolute;top:2px;left:clamp(64px,var(--wp),calc(100% - 64px));transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;
  font:600 11.5px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em;
  background:var(--sf);border:1.5px solid color-mix(in oklab,var(--pc,var(--line-s)) 80%,transparent);color:var(--ink);
  box-shadow:0 5px 14px -5px rgba(0,0,0,.8),0 0 0 3px color-mix(in oklab,var(--pc,var(--ink-4)) 14%,transparent)}
.cc-rail .p .tm{color:var(--pc,var(--ink-2))}
.cc-rail .p b{font-weight:600;font-size:10.5px;color:var(--pos)}
.cc.is-upset .cc-rail{background:color-mix(in oklab,var(--neg) 9%,transparent)}
.cc.is-upset .cc-rail .p{--pc:var(--neg);background:color-mix(in oklab,var(--neg) 22%,var(--sf));color:oklch(0.97 0.02 25)}
.cc.is-upset .cc-rail .p .tm,.cc.is-upset .cc-rail .p b{color:oklch(0.90 0.08 25)}
[data-theme=light] .cc.is-upset .cc-rail .p{background:color-mix(in oklab,var(--neg) 14%,#fff);color:oklch(0.38 0.19 27)}
[data-theme=light] .cc.is-upset .cc-rail .p .tm,[data-theme=light] .cc.is-upset .cc-rail .p b{color:oklch(0.48 0.18 27)}
.cc-b{padding:13px 15px 14px}
.cc-r{display:flex;align-items:center;gap:9px}
.cc-r+.cc-r{margin-top:7px}
.cc-r img{width:22px;height:22px;flex:none}
.cc-r .nm{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.cc-r .pr{margin-left:auto;font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums;flex:none}
.cc-f{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.cc-f .t{margin-left:auto;font:500 10.5px/1 var(--mono);color:var(--ink-4);white-space:nowrap}

/* ---------- sport system demo ---------- */
.sport-demo{--sh:240;--sc:0.12}
.sportbar{display:flex;flex-wrap:wrap;gap:8px}
.sportbar button{font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:9px 13px;border-radius:999px;cursor:pointer;
  background:var(--sf);border:1px solid var(--line);color:var(--ink-3);transition:all .18s}
.sportbar button:hover{color:var(--ink);border-color:var(--line-s)}
.sportbar button[aria-pressed=true]{color:var(--sport);border-color:color-mix(in oklab,var(--sport) 60%,transparent);background:color-mix(in oklab,var(--sport) 14%,transparent)}
.sportwash{position:relative;overflow:hidden;border:1px solid color-mix(in oklab,var(--sport) 26%,var(--line));border-radius:var(--rc);padding:clamp(22px,3vw,34px);
  background:radial-gradient(120% 100% at 8% 0%,color-mix(in oklab,var(--sport) 15%,transparent),transparent 62%),var(--sf);transition:border-color .5s,background .5s}
.sportwash .lbl{font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sport);transition:color .5s}
.sportwash .big{font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.025em;margin:10px 0 8px}

/* ---------- count-up strip ---------- */
.strip b{transition:none}
.strip>div{position:relative;overflow:hidden}
.strip>div::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--act),transparent)}
[data-anim=on] .strip>div::after{animation:glowline 3.4s ease-in-out infinite}
.strip>div:nth-child(2)::after{animation-delay:.4s}.strip>div:nth-child(3)::after{animation-delay:.8s}.strip>div:nth-child(4)::after{animation-delay:1.2s}

/* ---------- global motion kill switch ---------- */
[data-anim=off] *,[data-anim=off] *::before,[data-anim=off] *::after{animation:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}