/* ============================================================================
   SlamReels design system · site.css
   Dark arena base, brand magenta as the hot accent, court gold as the secondary
   accent, broadcast typography. Shared by /, /players, /custom (and the /sample shell).

   Tokens ........ :root
   Base .......... reset, type scale, utilities
   Components .... .btn .nav .hero .board .tiles .tabs .pcard .reel .phone .ba
                   .steps .price .faq .frm .modal .film .dock .foot .tbl .chip
   Motion ........ one orchestrated entrance per page (.enter), .rv reveals that
                   start visible, tap feedback on everything interactive,
                   prefers-reduced-motion respected
   ========================================================================== */

@font-face{font-family:"Big Shoulders";src:url(/sample/fonts/BigShouldersDisplay-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/sample/fonts/BarlowCondensed-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/sample/fonts/BarlowCondensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/sample/fonts/BarlowCondensed-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Barlow";src:url(/sample/fonts/Barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/sample/fonts/Barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(/sample/fonts/Barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* arena */
  --bg:#07060B;--bg-2:#0B0A12;--surface:#12101B;--surface-2:#191624;--surface-3:#221E30;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);--line-3:rgba(255,255,255,.22);
  --ink:#F6F4FB;--ink-2:#BDB6CC;--ink-3:#8A839C;--ink-4:#5E586E;
  /* brand: magenta is the hot accent; violet only adds depth to gradients */
  --accent:#E040FB;--accent-ink:#1A0820;--accent-soft:rgba(224,64,251,.16);--accent-glow:rgba(224,64,251,.55);
  --violet:#8B5CF6;
  /* secondary accent: court gold, for clocks, FINAL stamps and "best" marks */
  --gold:#FFC24D;--gold-ink:#2A1B00;--gold-soft:rgba(255,194,77,.16);
  /* semantic */
  --made:#3DDC97;--miss:#FF5C7A;--live:#FF3B5C;--warn:#FFB020;
  /* sample game teams (data-driven pages override per team) */
  --navy:#4F86FF;--navy-deep:#0E1F4A;--navy-gold:#E2B93B;
  --usmc:#F2545B;--usmc-deep:#5A0D17;--usmc-gold:#F2C230;
  /* type */
  --display:"Big Shoulders","Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-display:clamp(44px,10.4vw,88px);
  --t-h2:clamp(34px,6.6vw,64px);
  --t-h3:26px;--t-h4:20px;--t-lead:18px;--t-body:16px;--t-small:14px;--t-label:12px;
  /* shape + layout */
  --r:16px;--r-sm:10px;--r-lg:24px;--gut:16px;--max:1200px;--nav-h:64px;
  --ease:cubic-bezier(.2,.8,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4);
  color-scheme:dark;
}
@media (min-width:768px){:root{--gut:32px;--nav-h:72px}}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-body)/1.55 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;-webkit-tap-highlight-color:transparent}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent);color:var(--accent-ink)}
.tnum,.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--ink-2)}.faint{color:var(--ink-3)}
.hot{color:var(--accent)}.gold{color:var(--gold)}

/* type scale */
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:.95;text-wrap:balance}
h1{font-size:var(--t-display);line-height:.9}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:.03em;line-height:1}
h4{font-size:var(--t-h4);letter-spacing:.04em}
h1 em,h2 em{font-style:normal;color:var(--accent);text-shadow:0 0 34px var(--accent-glow)}
.lead{font-size:var(--t-lead);color:var(--ink-2);max-width:38em}
.lead b,.sub b{color:var(--ink);font-weight:600}
.small{font-size:var(--t-small)}
.eyebrow{font:800 var(--t-label)/1 var(--cond);letter-spacing:.24em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:12px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--accent);flex:0 0 auto}
.label{font:700 var(--t-label)/1.3 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* sections */
.sec{padding:64px 0}
@media (min-width:900px){.sec{padding:104px 0}}
.sec.tight{padding-top:0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:26px}
.sec-head .lead{margin:12px 0 0}
@media (min-width:900px){.sec-head{margin-bottom:34px}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.grid-2{display:grid;gap:14px}.grid-3{display:grid;gap:14px}
@media (min-width:900px){.grid-2{grid-template-columns:1fr 1fr;gap:20px}.grid-3{grid-template-columns:repeat(3,1fr);gap:20px}}
hr.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 22px;border-radius:999px;font:800 17px/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-decoration:none;transition:transform .18s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s;will-change:transform}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn-hot{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px -8px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-hot:hover{transform:translateY(-1px);box-shadow:0 14px 36px -8px rgba(224,64,251,.75),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--ink);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-line{background:transparent;border:1.5px solid var(--accent);color:var(--accent)}
.btn-line:hover{background:var(--accent-soft)}
.btn-gold{background:var(--gold);color:var(--gold-ink);box-shadow:0 10px 30px -10px rgba(255,194,77,.6)}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.btn-lg{height:58px;padding:0 28px;font-size:18px}
.btn-block{width:100%}
.btn:active{transform:translateY(1px) scale(.98)}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.ib{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid var(--line);flex:0 0 auto;transition:background .15s,transform .15s}
.ib svg{width:16px;height:16px}.ib:hover{background:rgba(255,255,255,.12)}.ib:active{transform:scale(.92)}.ib[disabled]{opacity:.3}

.linkish{display:inline;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-3);cursor:pointer}
.linkish:hover{color:var(--ink);text-decoration-color:var(--accent)}
.foot .linkish{text-decoration:none;color:var(--ink-2)}.foot .linkish:hover{color:var(--ink)}

/* ---------- chips / badges ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);font:700 12px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);background:rgba(7,6,11,.5);backdrop-filter:blur(8px)}
.chip.hot{border-color:transparent;background:var(--accent);color:var(--accent-ink)}
.chip.gold{border-color:transparent;background:var(--gold);color:var(--gold-ink)}
.chip.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.stamp{display:inline-flex;align-items:center;gap:8px;font:800 12px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:8px 12px}
.stamp i{width:8px;height:8px;border-radius:50%;background:var(--made);box-shadow:0 0 10px var(--made)}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.check-list li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2)}
.check-list li::before{content:"";flex:0 0 auto;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14.5 7' stroke='%23E040FB' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);transition:background .35s,box-shadow .35s}
.nav .wrap{display:flex;align-items:center;gap:10px;height:100%}
.nav.solid{background:rgba(7,6,11,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line)}
.nav .logo{display:inline-flex;align-items:center;margin-right:4px}
.nav .logo img{height:26px;width:auto}
@media (min-width:900px){.nav .logo img{height:30px}}
.nav-links{display:none;align-items:center;gap:2px;margin-left:12px}
.nav-links a{font:700 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding:11px 12px;border-radius:9px;text-decoration:none;transition:color .15s,background .15s}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{content:"";display:block;height:2px;margin:6px -2px -8px;border-radius:2px;background:var(--accent)}
.nav-cta{margin-left:auto}
.nav .btn{height:40px;font-size:14px;padding:0 14px}
.nav .btn .long{display:none}.nav .btn .short{display:inline}
@media (min-width:480px){.nav .btn .long{display:inline}.nav .btn .short{display:none}}
.burger{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);display:grid;place-items:center;flex:0 0 auto}
.burger svg{width:20px;height:20px}
@media (min-width:1000px){.nav-links{display:flex}.burger{display:none}.nav .btn{height:42px}}
.menu{position:fixed;inset:0;z-index:70;background:rgba(7,6,11,.96);backdrop-filter:blur(20px);display:none;flex-direction:column;padding:calc(var(--nav-h) + 12px) var(--gut) 32px}
.menu.on{display:flex}
.menu a.big{font:800 clamp(34px,9vw,52px)/1.08 var(--display);text-transform:uppercase;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.menu a.big small{font:700 12px/1 var(--cond);letter-spacing:.18em;color:var(--ink-3)}
.menu a.big[aria-current="page"]{color:var(--accent)}
.menu .menu-foot{margin-top:auto;display:grid;gap:12px}
.menu-close{position:fixed;right:var(--gut);top:calc((var(--nav-h) - 42px)/2);z-index:71}
body.menu-open{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);padding-top:var(--nav-h)}
.hero-media{position:absolute;inset:0 0 auto 0;height:min(78vh,640px);overflow:hidden;background:#000}
.hero-media img,.hero-media video,.hero-media picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media video{opacity:0;transition:opacity .9s ease}
.hero-media video.on{opacity:1}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,6,11,.42) 0%,rgba(7,6,11,0) 26%,rgba(7,6,11,.08) 52%,var(--bg) 100%)}
.hero-inner{position:relative;z-index:2;padding:min(34vh,290px) 0 24px}
.hero-grid{display:flex;flex-direction:column-reverse;gap:22px}
.hero .sub{color:var(--ink-2);font-size:17px;max-width:34em;margin:0 0 20px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.cta-row .btn-hot{flex:1 1 auto}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:20px;color:var(--ink-3);font:700 13px/1.3 var(--cond);letter-spacing:.1em;text-transform:uppercase}
.hero-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--ink-3);align-self:center}
.hero-meta .verify{flex-basis:100%;display:flex;align-items:baseline;gap:9px;font:500 15px/1.45 var(--body);letter-spacing:0;text-transform:none;color:var(--ink-2);max-width:36em}
.hero-meta .verify i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--made);box-shadow:0 0 10px var(--made);transform:translateY(-1px)}
@media (min-width:900px){
  .hero{min-height:min(880px,100vh);display:flex;align-items:flex-end}
  .hero-media{height:auto;inset:0}
  .hero-media::after{background:linear-gradient(90deg,rgba(7,6,11,.96) 0%,rgba(7,6,11,.8) 36%,rgba(7,6,11,.2) 66%,rgba(7,6,11,.45) 100%),linear-gradient(180deg,rgba(7,6,11,.55) 0%,rgba(7,6,11,0) 25%,rgba(7,6,11,0) 68%,var(--bg) 100%)}
  .hero-inner{width:100%;padding:150px 0 72px}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(360px,.8fr);gap:56px;align-items:end}
  .cta-row .btn-hot{flex:0 0 auto}
}
/* simple hero for inner pages (no full-bleed video) */
.hero-plain{padding-top:calc(var(--nav-h) + 48px);min-height:0!important;display:block!important}
.hero-plain .hero-inner{padding:0 0 24px}
.hero-plain::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 80% 0%,rgba(224,64,251,.18),transparent 60%),radial-gradient(50% 40% at 0% 20%,rgba(139,92,246,.14),transparent 60%);pointer-events:none}

/* ---------- scoreboard ---------- */
.board{position:relative;background:linear-gradient(180deg,rgba(26,22,38,.92),rgba(14,12,22,.94));border:1px solid var(--line-2);border-radius:18px;padding:14px 14px 12px;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.board::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(120deg,rgba(224,64,251,.55),rgba(139,92,246,.15) 40%,rgba(255,255,255,0) 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.board-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:10px}
.board .final{font:800 13px/1 var(--cond);text-transform:uppercase;letter-spacing:.24em;color:var(--accent-ink);background:var(--accent);padding:6px 9px 5px;border-radius:5px;box-shadow:0 0 18px var(--accent-glow)}
.board .clock{font:800 13px/1 var(--cond);letter-spacing:.14em;color:var(--gold);display:inline-flex;align-items:center;gap:8px}
.board .clock i{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live);animation:blink 1.4s ease-in-out infinite}
.board-head .bev{font:700 12px/1.25 var(--cond);letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;text-align:right}
.team-row{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:12px;padding:6px 0}
.team-row+.team-row{border-top:1px solid var(--line)}
.team-row .bar{height:44px;border-radius:3px}
.team-row .nm{font:800 30px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.team-row .nm small{display:block;font:600 12px/1.3 var(--cond);letter-spacing:.14em;color:var(--ink-3);margin-top:3px}
.team-row .pts{font:900 64px/.9 var(--display);letter-spacing:-.01em;min-width:2.2ch;text-align:right;font-variant-numeric:tabular-nums}
.team-row.lose .nm,.team-row.lose .pts{color:var(--ink-2);opacity:.78}
.team-row .w{display:inline-block;width:0;height:0;border:6px solid transparent;border-right-color:var(--accent);margin-left:6px;vertical-align:middle;transform:translateY(-3px)}
.line{width:100%;border-collapse:collapse;margin-top:8px;font:700 14px/1 var(--cond)}
.line th{font:700 11px/1 var(--cond);letter-spacing:.14em;color:var(--ink-3);padding:6px 0;text-align:center}
.line th:first-child,.line td:first-child{text-align:left}
.line td{padding:5px 0;text-align:center;color:var(--ink-2);font-variant-numeric:tabular-nums}
.line td.t{color:var(--ink);font-weight:800}
.line tr+tr td{border-top:1px solid var(--line)}
.line td.off{opacity:.25}
@media (min-width:900px){.board{padding:20px 22px 16px}.team-row .bar{height:58px}.team-row .nm{font-size:40px}.team-row .pts{font-size:92px}}

/* ---------- stat tiles ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:900px){.tiles{grid-template-columns:repeat(4,1fr);gap:14px}}
.tile{position:relative;padding:16px 16px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;transition:transform .2s var(--ease),border-color .2s}
.tile:active{transform:scale(.985)}
.tile b{display:block;font:800 40px/1 var(--cond);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tile span{display:block;font:700 11px/1.3 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.tile.hot{border-color:rgba(224,64,251,.4);background:linear-gradient(160deg,rgba(224,64,251,.14),var(--surface) 60%)}
.tile.hot b{color:var(--accent)}
.tile .ic{position:absolute;right:12px;top:12px;width:26px;height:26px;opacity:.5}
@media (min-width:900px){.tile{padding:22px 20px 18px}.tile b{font-size:52px}}
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.strip ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr 1fr;max-width:var(--max)}
.strip li{padding:18px var(--gut) 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center}
.strip li:nth-child(2n){border-right:0}
.strip li svg{width:26px;height:26px;flex:0 0 auto;color:var(--accent)}
.strip .n{font:800 30px/1 var(--cond);letter-spacing:-.01em;display:block;font-variant-numeric:tabular-nums}
.strip .l{font:700 11px/1.3 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:4px;display:block}
@media (min-width:768px){.strip ul{grid-template-columns:repeat(4,1fr)}.strip li{border-bottom:0;padding:24px 28px 22px}.strip li:nth-child(2n){border-right:1px solid var(--line)}.strip li:last-child{border-right:0}.strip .n{font-size:34px}}

/* ---------- broadcast ticker ---------- */
.ticker{position:relative;height:44px;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.ticker .tk-lab{flex:0 0 auto;height:100%;display:inline-flex;align-items:center;gap:8px;padding:0 14px;background:var(--accent);color:var(--accent-ink);font:800 12px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;z-index:2}
.ticker .tk-lab i{width:7px;height:7px;border-radius:50%;background:var(--accent-ink);animation:blink 1.4s ease-in-out infinite}
.ticker .tk-track{flex:1;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.ticker .tk-run{display:inline-flex;gap:0;white-space:nowrap;animation:tk var(--tk-dur,60s) linear infinite;will-change:transform}
.ticker:hover .tk-run,.ticker:focus-within .tk-run{animation-play-state:paused}
.ticker .tk-item{display:inline-flex;align-items:center;gap:10px;padding:0 22px;font:700 14px/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ticker .tk-item b{color:var(--ink)}
.ticker .tk-item .q{color:var(--gold);font-weight:800}
.ticker .tk-item .sc{color:var(--ink);font-weight:800;background:rgba(255,255,255,.06);padding:5px 7px;border-radius:5px}
.ticker .tk-item .tc{width:8px;height:8px;border-radius:2px}
.ticker .tk-item::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--ink-4);margin-left:22px}
@keyframes tk{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .tk-run{animation:none}}

/* ---------- tabs (segmented) ---------- */
.tabs{display:flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1 0 auto;height:44px;padding:0 16px;border-radius:999px;font:800 14px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .2s,color .2s,transform .15s;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 24px -10px var(--accent-glow)}
.tab:active{transform:scale(.97)}
.tab .k{font:800 12px/1 var(--cond);background:rgba(0,0,0,.25);padding:4px 6px;border-radius:5px}
.tab[aria-selected="false"] .k{background:rgba(255,255,255,.08)}
[role="tabpanel"][hidden]{display:none}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px}
.seg button{height:36px;padding:0 14px;border-radius:999px;font:800 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--surface-3);color:var(--ink)}
.seg i{width:9px;height:9px;border-radius:2px}

/* ---------- tables (box score, lineups) ---------- */
.tbl-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);overscroll-behavior-x:contain}
table.tbl{border-collapse:separate;border-spacing:0;width:100%;font:700 16px/1 var(--cond);font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:0 10px;text-align:center;white-space:nowrap;height:46px}
.tbl thead th{position:sticky;top:0;background:var(--surface-2);font:800 11px/1 var(--cond);letter-spacing:.14em;color:var(--ink-3);height:40px;border-bottom:1px solid var(--line)}
.tbl th.p,.tbl td.p{position:sticky;left:0;z-index:2;text-align:left;background:var(--surface);min-width:92px;padding-left:14px}
.tbl thead th.p{background:var(--surface-2);z-index:3}
.tbl td.p{font:800 19px/1 var(--display);letter-spacing:.02em;border-right:1px solid var(--line)}
.tbl td.p small{display:block;font:700 10px/1 var(--cond);letter-spacing:.14em;color:var(--ink-3);margin-top:3px}
.tbl tbody tr+tr td{border-top:1px solid var(--line)}
.tbl td.c{position:relative;padding:0 2px}
.tbl td.c button{position:relative;width:100%;min-width:44px;height:40px;border-radius:8px;font:700 16px/1 var(--cond);font-variant-numeric:tabular-nums;color:var(--ink);transition:background .15s}
.tbl td.c button:hover{background:rgba(255,255,255,.07)}
.tbl td.c button[disabled]{color:var(--ink-3);cursor:default;background:none}
.tbl td.c button.hi{color:var(--gold);font-weight:800}
.tbl td.c button.pulse{animation:pulse .9s var(--ease)}
.tbl td.c .heat{position:absolute;inset:3px 2px;border-radius:8px;pointer-events:none}
.tbl td.pos{color:var(--made)}.tbl td.neg{color:var(--miss)}
.tbl tfoot td{height:44px;border-top:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);font-weight:800}
.tbl tfoot td.p{background:var(--surface-2);font:800 12px/1 var(--cond);letter-spacing:.14em;color:var(--ink-3)}
.tbl-note{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--ink-3);font-size:13px;margin-top:12px}
.tbl-note .hint{display:flex;align-items:center;gap:8px}
.tbl-note .hint b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font:800 12px/1 var(--cond)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,64,251,.75);background:var(--accent-soft)}100%{box-shadow:0 0 0 14px rgba(224,64,251,0);background:transparent}}
.bars{display:grid;gap:8px}
.bars .row{display:grid;grid-template-columns:72px 1fr 46px;align-items:center;gap:10px;font:700 14px/1 var(--cond)}
.bars .row span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.bars .trk{height:10px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden}
.bars .trk i{display:block;height:100%;border-radius:5px;background:var(--accent);transform-origin:left;transition:transform .9s var(--ease)}

/* ---------- trading-card player card ---------- */
.pcards{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,320px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--gut) 18px;margin:0 calc(-1 * var(--gut));scrollbar-width:none}
.pcards::-webkit-scrollbar{display:none}
@media (min-width:900px){.pcards{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;padding:6px 0 0;margin:0;gap:20px}}
.pcard{scroll-snap-align:center;position:relative;aspect-ratio:9/14;border-radius:20px;overflow:hidden;isolation:isolate;background:var(--cbg,var(--surface-2));box-shadow:0 30px 60px -28px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .35s var(--ease)}
@media (hover:hover){.pcard:hover{transform:translateY(-4px) rotate(-.4deg)}}
.pcard:active{transform:scale(.985)}
.pcard::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(118deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px),radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.12),transparent 60%)}
.pcard .still{position:absolute;inset:0 0 34% 0;background:var(--still) center 30%/cover no-repeat;-webkit-mask:linear-gradient(180deg,#000 55%,transparent);mask:linear-gradient(180deg,#000 55%,transparent);opacity:.92;cursor:pointer}
.pcard .num{position:absolute;right:-6px;top:44%;font:900 190px/.8 var(--display);color:var(--cgold,var(--gold));opacity:.95;letter-spacing:-.04em;text-shadow:0 8px 30px rgba(0,0,0,.5);pointer-events:none}
.pcard .tm{position:absolute;left:16px;top:16px;font:800 13px/1 var(--cond);letter-spacing:.22em;color:#fff;background:rgba(0,0,0,.45);padding:7px 10px;border-radius:6px;backdrop-filter:blur(6px)}
.pcard .rank{position:absolute;right:16px;top:16px;font:800 12px/1 var(--cond);letter-spacing:.18em;color:var(--cgold,var(--gold));background:rgba(0,0,0,.55);padding:8px 10px;border-radius:6px;backdrop-filter:blur(6px)}
.pcard .meta{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72) 40%)}
.pcard .id{font:800 34px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.pcard .sl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}
.pcard .sl div{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px 8px 7px;text-align:center}
.pcard .sl b{display:block;font:800 30px/1 var(--cond);font-variant-numeric:tabular-nums}
.pcard .sl span{font:700 10px/1 var(--cond);letter-spacing:.16em;color:rgba(255,255,255,.7)}
.pcard .sub2{font:700 13px/1.3 var(--cond);letter-spacing:.06em;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
.pcard .play{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:rgba(0,0,0,.45);border:1.5px solid rgba(255,255,255,.6);display:grid;place-items:center;backdrop-filter:blur(6px);transition:transform .2s var(--ease),background .2s}
.pcard .play svg{width:24px;height:24px;margin-left:3px}
.pcard:hover .play{transform:translate(-50%,-50%) scale(1.06);background:var(--accent);border-color:var(--accent)}
.pcard:hover .play svg path{fill:var(--accent-ink)}
.pcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;opacity:0;pointer-events:none;transition:opacity .35s;background:#000}
.pcard.playing video{opacity:1;pointer-events:auto}
.pcard .x{position:absolute;right:12px;top:12px;z-index:4;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.6);display:none;place-items:center}
.pcard.playing .x{display:grid}

/* ---------- reel player (16:9 / 9:16) ---------- */
.reel{position:relative;margin:0;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--line);isolation:isolate;box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.reel.h{aspect-ratio:16/9}.reel.v{aspect-ratio:9/16}
.reel>img,.reel>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel>video{z-index:2;background:#000}
.reel .play{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background:rgba(7,6,11,.55);border:1.5px solid rgba(255,255,255,.6);display:grid;place-items:center;backdrop-filter:blur(8px);transition:transform .2s var(--ease),background .2s,border-color .2s}
.reel .play svg{width:26px;height:26px;margin-left:4px}
.reel:hover .play{transform:translate(-50%,-50%) scale(1.06);background:var(--accent);border-color:var(--accent)}
.reel:hover .play svg path{fill:var(--accent-ink)}
.reel.playing .play{display:none}
.reel .cap{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:40px 14px 12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));display:flex;align-items:flex-end;justify-content:space-between;gap:10px;pointer-events:none}
.reel .cap>*{pointer-events:auto}
.reel .cap b{display:block;font:800 16px/1.1 var(--cond);letter-spacing:.06em;text-transform:uppercase}
.reel .cap .dur{position:static;display:inline-block;margin-top:6px}
.reel .cap span{display:block;font:600 12px/1.3 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-top:4px}
.reel.playing .cap{opacity:0;transition:opacity .3s}
.reel .top{position:absolute;z-index:3;left:12px;top:12px;display:flex;gap:6px}
.reel .dur{position:absolute;z-index:3;right:12px;top:12px;font:700 12px/1 var(--cond);letter-spacing:.1em;background:rgba(0,0,0,.55);padding:6px 8px;border-radius:6px;font-variant-numeric:tabular-nums}
.share{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font:700 12px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#fff;backdrop-filter:blur(8px);transition:background .15s,transform .15s}
.share svg{width:14px;height:14px}
.share:hover{background:rgba(255,255,255,.18)}.share:active{transform:scale(.95)}
.share.ok{background:var(--made);color:#042;border-color:transparent}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:90;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--bg);font:700 14px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;padding:12px 16px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .3s var(--ease),opacity .3s;pointer-events:none}
.toast.on{transform:translate(-50%,0);opacity:1}

/* ---------- phone mockup ---------- */
.phone{position:relative;width:min(72vw,300px);aspect-ratio:9/19.2;border-radius:46px;background:#0B0A12;border:1.5px solid rgba(255,255,255,.16);box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 0 0 8px rgba(255,255,255,.03),inset 0 0 0 1px rgba(0,0,0,.6);padding:10px;margin:0 auto}
.phone .scr{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#000;isolation:isolate}
.phone .scr img,.phone .scr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone .scr video{opacity:0;transition:opacity .6s}
.phone .scr video.on{opacity:1}
.phone .isl{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:34%;height:22px;border-radius:12px;background:#000;z-index:5}
.phone .btnR{position:absolute;right:-3px;top:22%;width:3px;height:64px;border-radius:2px;background:rgba(255,255,255,.18)}
.phone .btnL{position:absolute;left:-3px;top:18%;width:3px;height:36px;border-radius:2px;background:rgba(255,255,255,.18);box-shadow:0 54px 0 rgba(255,255,255,.18),0 108px 0 rgba(255,255,255,.18)}
.phone .mute{position:absolute;z-index:6;right:12px;bottom:14px}
@media (min-width:900px){.phone{width:320px}}

/* ---------- before / after ---------- */
.ba{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--line);isolation:isolate;box-shadow:var(--shadow)}
.ba video,.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba video{opacity:0;transition:opacity .35s}
.ba video.on{opacity:1}
.ba .flash{position:absolute;inset:0;z-index:4;background:var(--accent);opacity:0;pointer-events:none}
.ba .flash.go{animation:flash .55s var(--ease) both}
@keyframes flash{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}
.ba .tag{position:absolute;z-index:5;left:12px;top:12px;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-radius:7px;background:rgba(7,6,11,.7);border:1px solid rgba(255,255,255,.14);font:800 12px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);backdrop-filter:blur(8px);transition:background .3s,color .3s}
.ba .tag i{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.ba.after .tag{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.ba.after .tag i{background:var(--accent-ink)}
.ba .prog{position:absolute;z-index:5;left:12px;right:12px;bottom:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.ba .prog i{display:block;height:100%;background:var(--accent);width:0}
.ba-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.ba-row .who{font:800 20px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.ba-row .who i{width:10px;height:26px;border-radius:3px;background:var(--navy)}
.ba-row .who small{display:block;font:700 11px/1.2 var(--cond);letter-spacing:.16em;color:var(--ink-3);margin-top:4px}
.ba-row .stat{display:grid;grid-auto-flow:column;gap:8px}
.ba-row .stat div{min-width:58px;text-align:center;padding:8px 8px 7px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);transition:background .3s,border-color .3s}
.ba-row .stat b{display:block;font:800 24px/1 var(--cond);font-variant-numeric:tabular-nums;transition:color .3s}
.ba-row .stat span{font:700 10px/1 var(--cond);letter-spacing:.16em;color:var(--ink-3)}
.ba-row .stat div.bump{background:var(--accent-soft);border-color:rgba(224,64,251,.5);animation:bump .5s var(--ease)}
.ba-row .stat div.bump b{color:var(--accent)}
@keyframes bump{40%{transform:scale(1.08)}}

/* ---------- steps ---------- */
.steps{display:grid;gap:14px;counter-reset:st;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:20px}}
.step{position:relative;padding:22px 20px;overflow:hidden}
.step .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(140deg,rgba(224,64,251,.22),rgba(139,92,246,.1));border:1px solid rgba(224,64,251,.35);margin-bottom:18px}
.step .ic svg{width:30px;height:30px}
.step h3{margin:0 0 8px}
.step p{margin:0;color:var(--ink-2)}
.step::after{counter-increment:st;content:"0" counter(st);position:absolute;right:16px;top:12px;font:900 64px/1 var(--display);color:rgba(255,255,255,.05)}

/* ---------- pricing ---------- */
.prices{display:grid;gap:14px}
@media (min-width:900px){.prices{grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}}
.price{position:relative;display:flex;flex-direction:column;padding:24px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);transition:transform .25s var(--ease),border-color .25s}
.price:active{transform:scale(.99)}
.price.hot{border-color:rgba(224,64,251,.5);background:radial-gradient(120% 80% at 100% 0%,rgba(224,64,251,.2),transparent 55%),var(--surface);box-shadow:0 30px 70px -30px rgba(224,64,251,.45)}
.price .flag{position:absolute;right:18px;top:-13px}
.price .nm{font:800 28px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.price .amt{display:flex;align-items:baseline;gap:8px;margin:14px 0 4px}
.price .amt b{font:900 56px/1 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.price .amt small{font:700 13px/1.2 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.price .blurb{color:var(--ink-2);margin:6px 0 16px;min-height:3.1em}
.price .check-list{margin-bottom:22px;font-size:15px}
.price .btn{margin-top:auto}
.price .note{margin:10px 0 0;color:var(--ink-3);font-size:13px;text-align:center}
.price-ex{margin:-6px -6px 14px;border-radius:14px;overflow:hidden}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font:600 18px/1.3 var(--body);transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary .pm{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:transform .25s var(--ease),background .2s}
.faq summary .pm::before{content:"+";font:800 20px/1 var(--cond)}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--accent);color:var(--accent-ink);border-color:transparent}
.faq .a{padding:0 0 22px;color:var(--ink-2);max-width:64em}
.faq .a p:last-child{margin-bottom:0}
@media (min-width:900px){.faq summary{font-size:20px;padding:24px 0}}

/* ---------- forms ---------- */
.frm{display:grid;gap:14px}
.frm .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.frm label{display:grid;gap:6px;font:700 12px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.frm label .opt{color:var(--ink-3);letter-spacing:.08em;text-transform:none;font-weight:600}
.frm input[type=text],.frm input[type=url],.frm input[type=email],.frm input[type=tel],.frm textarea,.frm select{width:100%;height:50px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);font:500 16px/1.2 var(--body);padding:0 14px;outline:none;transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none}
.frm select{background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23BDB6CC' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center/18px no-repeat;padding-right:40px}
.frm textarea{height:110px;padding:12px 14px;resize:vertical}
.frm input:focus,.frm textarea:focus,.frm select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.frm input::placeholder,.frm textarea::placeholder{color:var(--ink-4)}
.frm .check{display:flex;gap:12px;align-items:flex-start;font:500 14px/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.frm .check input{width:22px;height:22px;accent-color:var(--accent);flex:0 0 auto;margin:0}
.frm .err{color:#FF8A8A;font-size:14px;min-height:1em}
.frm .btn{width:100%;margin-top:4px}
.frm .fine{color:var(--ink-3);font-size:13px;margin:0;text-align:center}
.done{text-align:center;padding:16px 4px 6px}
.done .tick{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);border:1px solid rgba(224,64,251,.45)}
.done .tick svg{width:34px;height:34px}
.done h3{margin-bottom:8px}
.done .lede{color:var(--ink-2)}
.form-card{padding:22px 18px}
@media (min-width:900px){.form-card{padding:32px}}

/* ---------- CTA block ---------- */
.cta{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:40px 22px;background:radial-gradient(120% 120% at 100% 0%,rgba(224,64,251,.28),transparent 55%),radial-gradient(90% 90% at 0% 100%,rgba(139,92,246,.22),transparent 60%),var(--surface);border:1px solid rgba(224,64,251,.3)}
.cta::before{content:"";position:absolute;inset:auto -10% -40% -10%;height:70%;background:repeating-linear-gradient(90deg,rgba(201,149,92,.05) 0 1px,transparent 1px 64px),linear-gradient(180deg,transparent,rgba(201,149,92,.08));transform:perspective(500px) rotateX(55deg);transform-origin:bottom;pointer-events:none}
.cta h2{font-size:clamp(40px,9vw,84px)}
.cta .check-list{margin:18px 0 26px}
.fine{color:var(--ink-3);font-size:13px;margin-top:14px}
@media (min-width:900px){.cta{padding:64px 56px}.cta-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}.cta .check-list{margin:0 0 22px}}

/* ---------- sticky mobile CTA ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(7,6,11,0),rgba(7,6,11,.92) 30%);transform:translateY(110%);transition:transform .35s var(--ease)}
.dock.on{transform:none}
.dock .btn{width:100%}
@media (min-width:900px){.dock{display:none}}

/* ---------- film drawer (stat → clip) ---------- */
.film{position:fixed;z-index:80;left:0;right:0;bottom:0;background:#0A0910;border-top:1px solid var(--line-2);box-shadow:0 -20px 60px rgba(0,0,0,.6);transform:translateY(105%);visibility:hidden;transition:transform .38s var(--ease),visibility 0s linear .38s;padding-bottom:env(safe-area-inset-bottom)}
.film.on{transform:none;visibility:visible;transition:transform .38s var(--ease)}
.film .bar{display:flex;align-items:center;gap:10px;padding:10px 12px}
.film .lbl{flex:1;min-width:0}
.film .lbl b{display:block;font:800 15px/1.15 var(--cond);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film .lbl span{display:block;font:600 12px/1.2 var(--cond);letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;margin-top:3px}
.film .stage{position:relative;aspect-ratio:16/9;background:#000}
.film .stage>*{position:absolute;inset:0;width:100%;height:100%;border:0}
.film .count{font:700 12px/1 var(--cond);color:var(--ink-3);letter-spacing:.1em;min-width:44px;text-align:center}
@media (min-width:900px){.film{left:auto;right:24px;bottom:24px;width:560px;border-radius:18px;border:1px solid var(--line-2);overflow:hidden;transform:translateY(calc(100% + 40px))}}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:85;display:none;align-items:flex-end;justify-content:center;background:rgba(4,3,8,.7);backdrop-filter:blur(6px)}
.modal.on{display:flex}
.sheet{position:relative;width:100%;max-width:560px;max-height:92vh;overflow:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:22px 22px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));animation:sheet .35s var(--ease)}
@media (min-width:640px){.modal{align-items:center}.sheet{border-radius:22px;padding:30px 30px 26px}}
@keyframes sheet{from{transform:translateY(40px);opacity:0}}
.sheet h3{font-size:34px;margin:0 0 6px;letter-spacing:.02em}
.sheet .lede{color:var(--ink-2);margin:0 0 18px}
.sheet .close{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);display:grid;place-items:center}
body.modal-open{overflow:hidden}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:40px 0 120px;color:var(--ink-3);font-size:14px}
@media (min-width:900px){.foot{padding:56px 0 48px}}
.foot-grid{display:grid;gap:26px}
@media (min-width:900px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:40px}}
.foot img{height:22px;width:auto;opacity:.9}
.foot p{margin:12px 0 0;max-width:46em}
.foot h4{color:var(--ink-2);font-size:13px;letter-spacing:.18em;margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--ink)}
.foot .legal{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:.25;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes flip{from{opacity:0;transform:translateY(40%) scaleY(.6);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes settle{from{opacity:.3;transform:translateY(16px)}to{opacity:1;transform:none}}
/* one orchestrated entrance per page: children of .enter rise in sequence; pure CSS, no script needed */
.enter>*{animation:rise .6s var(--ease) both}
.enter>*:nth-child(1){animation-delay:.08s}.enter>*:nth-child(2){animation-delay:.16s}.enter>*:nth-child(3){animation-delay:.26s}
.enter>*:nth-child(4){animation-delay:.34s}.enter>*:nth-child(5){animation-delay:.42s}.enter>*:nth-child(6){animation-delay:.5s}
.board.enter-board{animation:rise .8s var(--ease) .05s both}
.board.enter-board .team-row .pts{animation:flip .9s var(--ease) .25s both}
.board.enter-board .team-row+.team-row .pts{animation-delay:.37s}
.board.enter-board .final{animation:pop .5s var(--ease) 1.5s both}
/* scroll reveals start visible: .in only adds a short settle when the element enters the viewport */
.rv.in{animation:settle .65s var(--ease-out) both}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero-media video{display:none}
}

/* ---------- plan stepper, founding offer, add-on strip, unlock list ---------- */
.prices.coach{grid-template-columns:1fr}
@media (min-width:900px){.prices.coach{grid-template-columns:1.5fr 1fr}}
.price .amt .was{font:700 22px/1 var(--display);color:var(--ink-3);text-decoration:line-through;margin-right:2px}
.price .founding{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 2px;padding:7px 12px;border-radius:999px;background:var(--accent-soft);border:1px solid rgba(224,64,251,.45);color:var(--ink);font:700 12px/1.2 var(--cond);letter-spacing:.1em;text-transform:uppercase;width:fit-content}
.price .founding b{color:var(--accent)}
.stepper{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:12px;margin:14px 0 4px;padding:12px 14px;border:1px solid var(--line-2);border-radius:16px;background:var(--bg-2)}
.stepper button{width:48px;height:48px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.06);color:var(--ink);font:800 26px/1 var(--cond);display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .15s}
.stepper button:hover:not(:disabled){background:rgba(255,255,255,.12)}
.stepper button:active:not(:disabled){transform:scale(.95)}
.stepper button:disabled{opacity:.3;cursor:default}
.stepper output{display:grid;justify-items:center;text-align:center}
.stepper output b{font:900 38px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stepper output span{font:700 11px/1.3 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.stepper .hrs{grid-column:1/-1;text-align:center;color:var(--ink-2);font-size:14px;font-weight:600;padding-top:8px;border-top:1px solid var(--line)}
.price .more{display:block;margin:6px 0 2px;font-size:14px;color:var(--accent)}
.price .more[hidden],.price .founding[hidden],.price .was[hidden]{display:none}
.price .tagline{color:var(--ink-2);font-weight:600;margin:0 0 14px;font-size:15px}
.price .cta-row{margin-top:auto}
.price .cta-row .btn{flex:1 1 auto;margin-top:0;min-width:0}
.addon{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;padding:18px 22px;margin-top:14px;border:1px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface)}
.addon .nm{font:800 22px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.addon .amt{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.addon .amt b{font:900 30px/1 var(--display)}
.addon .amt small{font:700 12px/1.2 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.addon p{margin:0;color:var(--ink-2);flex:1 1 300px;font-size:15px}
.unlock{display:grid;gap:14px}
.unlock .search{display:flex;gap:10px}
.unlock .search input{flex:1 1 auto;min-width:0;height:50px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);font:500 16px/1.2 var(--body);padding:0 14px;outline:none}
.unlock .search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.unlock ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.unlock li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.unlock li b{font:800 16px/1.2 var(--cond);letter-spacing:.04em;text-transform:uppercase}
.unlock li span{color:var(--ink-3);font-size:14px}
.unlock li .btn{margin-left:auto}
.unlock .empty{color:var(--ink-3);font-size:14px;margin:0}