/*
Theme Name: SharpSight
Description: Lightweight custom theme for the SharpSight website.
Version: 4.5
Text Domain: sharpsight
*/
:root{
  --bg:#0B0F14; --bg2:#0F141B; --surface:#131A23; --surface2:#18202B; --line:rgba(255,255,255,.09);
  --green:#39FF14; --violet:#8B5CF6; --violet-l:#8B5CF6;
  --maroon:#39FF14; --rose:#39FF14; --cream:#18202B; --night:#07070A; --sky:#39FF14;
  --ink:#EEF2F6; --muted:#9BA6B4; --edge:rgba(255,255,255,.09); --white:#131A23; --paper:#0B0F14;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px;
  --section:clamp(44px,5.5vw,72px);
  --gutter:clamp(20px,5vw,64px); --max:1180px; --r:20px;
  --shadow:0 28px 60px -28px rgba(0,0,0,.7),0 6px 16px -8px rgba(0,0,0,.4);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:"Inter",system-ui,sans-serif;background:#0B0F14;color:#EEF2F6;line-height:1.6;font-size:1.0625rem;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid #39FF14;outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
h1,h2,h3{letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
h2{font-size:clamp(2rem,4vw,2.9rem);font-weight:800;color:#EEF2F6}
p{text-wrap:pretty}
.lead{color:#9BA6B4;font-size:1.1rem;max-width:50ch;margin-top:12px}
.bar{display:block;width:48px;height:5px;border-radius:3px;background:#39FF14;margin-bottom:var(--s2)}
svg.i{width:1em;height:1em;display:block}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;padding-block:var(--s2)}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;text-decoration:none;color:#EEF2F6}
.brand img{width:38px;height:auto}
.nav ul{list-style:none;padding:0;display:flex;gap:var(--s4)}
.nav a.l{font-size:.95rem;font-weight:600;text-decoration:none;padding-block:6px;border-bottom:3px solid transparent}
.nav a.l.on{border-color:#39FF14}
.nav a.l:hover{color:#EEF2F6}

/* ---------- hero ---------- */
:root{--hdr:73px}
.hero-bg{position:relative;overflow:hidden;isolation:isolate;display:grid;align-items:center;min-height:clamp(560px,calc(100svh - var(--hdr)),1000px);background:radial-gradient(55% 65% at 80% 45%,rgba(139,92,246,0.13),transparent 70%),linear-gradient(180deg,#0B0F14 0%,#0F141B 62%,#0B0F14 100%)}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,0.112) 1px,transparent 1.4px);background-size:24px 24px;-webkit-mask-image:radial-gradient(55% 70% at 78% 45%,#000,transparent 75%);mask-image:radial-gradient(55% 70% at 78% 45%,#000,transparent 75%)}
.admin-bar .hero-bg{min-height:clamp(560px,calc(100svh - var(--hdr) - 32px),1000px)}

.hero{width:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(48px,6vw,96px);align-items:center;padding-block:clamp(24px,4vh,56px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;background:rgba(19,26,35,0.7);box-shadow:0 10px 24px -14px rgba(0,0,0,0.46);font-size:.82rem;font-weight:600;line-height:1.5;color:#9BA6B4}
.eb-live{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:4px 11px 4px 9px;border-radius:999px;background:#39FF14;color:#0B0F14;font-weight:700;letter-spacing:.01em}
.eb-live i{width:7px;height:7px;border-radius:50%;background:#39FF14;animation:ping 2.4s ease-out infinite}
.eb-live .apple{width:1.05em;height:1.05em;margin:-2px -4px 0 -2px}
.eb-rot{position:relative;display:inline-block;height:1.5em;overflow:hidden;vertical-align:top;font-weight:800;color:#EEF2F6;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.eb-rot b{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(100%);transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s}
.eb-rot b.is-on{position:relative;opacity:1;transform:none}
.eb-rot b.is-off{opacity:0;transform:translateY(-100%)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero h1{font-size:clamp(3rem,6.2vw,5.4rem);font-weight:800;line-height:1;color:#EEF2F6;letter-spacing:-.045em;margin-top:20px}
.hero h1 span{color:#39FF14;background:linear-gradient(100deg,#39FF14 30%,#8B5CF6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero h2{font-size:clamp(1.25rem,2vw,1.6rem);color:#EEF2F6;margin-top:14px;letter-spacing:-.02em}
.hero .sub{color:#9BA6B4;font-size:1.1rem;max-width:44ch;margin-top:16px}
.hero .sub em{font-style:italic;font-weight:600;color:#EEF2F6}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:14px;border:1.5px solid #39FF14;font-weight:700;text-decoration:none;background:#39FF14;color:#0B0F14;box-shadow:0 14px 28px -14px rgba(0,0,0,0.805);transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.btn:hover{background:#2FE010;border-color:#39FF14;transform:translateY(-2px);box-shadow:0 20px 34px -16px rgba(0,0,0,0.85)}
.btn svg{width:18px;height:18px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn.ghost{background:rgba(19,26,35,0.55);color:#EEF2F6;border-color:rgba(255,255,255,0.16);box-shadow:none}
.btn.ghost:hover{background:#131A23;border-color:#39FF14;box-shadow:0 14px 28px -18px rgba(0,0,0,0.575)}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:580px;margin-top:40px}
.chips>div{--c:139,92,246;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:18px;background:linear-gradient(160deg,rgba(19,26,35,0.92),rgba(19,26,35,0.6));border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 36px -24px rgba(0,0,0,0.517),inset 0 0 0 1px rgba(var(--c),.08);transition:transform .25s,box-shadow .25s}
.chips>div::before{content:"";position:absolute;left:16px;right:16px;top:0;height:3px;border-radius:0 0 3px 3px;background:rgb(var(--c));opacity:.75}
.chips>div:nth-child(2){--c:57,255,20}
.chips>div:nth-child(3){--c:57,255,20}
.chips>div:hover{transform:translateY(-3px);box-shadow:0 24px 40px -22px rgba(var(--c),.5),inset 0 0 0 1px rgba(var(--c),.18)}
.chips .ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,rgba(var(--c),.2),rgba(var(--c),.06));box-shadow:inset 0 0 0 1px rgba(var(--c),.22);font-size:1.35rem;line-height:1}
.chips b{display:block;font-size:.95rem;font-weight:700;line-height:1.25;color:#EEF2F6}
.chips small{display:block;margin-top:4px;font-size:.78rem;line-height:1.35;color:#9BA6B4}

/* right side: 3D phone stage. --px/--py (-1..1) are set by the pointer for parallax */
.stage{--sh:clamp(480px,calc(100svh - var(--hdr) - 110px),640px);--tilt:-13deg;--px:0;--py:0;position:relative;isolation:isolate;height:var(--sh);perspective:1400px}
.stage::before{content:"";position:absolute;left:50%;top:48%;width:min(92%,calc(var(--sh)*.74));aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 30% 25%,#39FF14,#1A1F33 62%);box-shadow:0 40px 80px -30px rgba(0,0,0,0.69)}
.stage::after{content:"";position:absolute;z-index:-1;left:50%;top:48%;width:calc(var(--sh)*.95);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(139,92,246,0.35),transparent);filter:blur(30px)}
.orbit{position:absolute;left:50%;top:48%;width:min(104%,calc(var(--sh)*.9));aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px dashed rgba(255,255,255,0.16);animation:spin 60s linear infinite}
.orbit::before,.orbit::after{content:"";position:absolute;top:50%;border-radius:50%}
.orbit::before{left:-7px;width:12px;height:12px;margin-top:-6px;background:#39FF14;box-shadow:0 0 0 5px rgba(0,0,0,0.184)}
.orbit::after{right:-5px;width:8px;height:8px;margin-top:-4px;background:#39FF14}
.floor{position:absolute;z-index:1;left:50%;top:calc(48% + var(--sh)*.4);width:calc(var(--sh)*.34);height:24px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,0.42),transparent);filter:blur(5px);animation:floor 6s ease-in-out infinite}
.stage .phone-wrap{position:absolute;z-index:2;left:50%;top:48%;height:calc(var(--sh)*.82);aspect-ratio:1/2;transform:translate(-50%,-50%) rotateY(calc(var(--tilt) + var(--px)*9deg)) rotateX(calc(4deg - var(--py)*7deg)) rotateZ(1deg);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1);animation:bob 6s ease-in-out infinite}
.phone-slider{position:relative;width:100%;height:100%;filter:drop-shadow(0 36px 36px rgba(0,0,0,0.46)) drop-shadow(0 8px 12px rgba(0,0,0,0.253));animation:phone-in 1s .15s cubic-bezier(.2,.7,.2,1) both}
.phone-slider .ps{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .7s ease}
.phone-slider .ps.is-active{opacity:1}
.float{position:absolute;z-index:3;border-radius:18px;border:1px solid rgba(255,255,255,.09);background:#131A23;box-shadow:0 34px 60px -28px rgba(0,0,0,0.632),0 10px 22px -12px rgba(0,0,0,0.345);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.float.notify{width:calc(var(--sh)*.3);left:calc(50% + var(--sh)*.21);top:11%;transform:translate3d(calc(var(--px)*22px),calc(var(--py)*16px),0) rotate(2deg);animation:pop .7s .55s cubic-bezier(.2,.8,.3,1.2) both,drift 7s 1.3s ease-in-out infinite}
.float.pick{width:calc(var(--sh)*.28);right:calc(50% + var(--sh)*.12);bottom:11%;transform:translate3d(calc(var(--px)*30px),calc(var(--py)*22px),0) rotate(-2deg);animation:pop .7s .75s cubic-bezier(.2,.8,.3,1.2) both,drift 8s 1.5s ease-in-out infinite reverse}
.phone-dots{display:none;position:absolute;z-index:4;left:50%;bottom:0;translate:-50% 0;align-items:center;gap:2px}
.phone-dots.is-js{display:flex}
.pd{width:22px;height:36px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.pd::before{content:"";width:8px;height:8px;border-radius:999px;background:#39FF14;opacity:.35;transition:width .35s cubic-bezier(.2,.7,.2,1),opacity .25s,box-shadow .25s}
.pd:hover::before{opacity:.7}
.pd.is-active{width:40px}
.pd.is-active::before{width:30px;background:linear-gradient(90deg,#1A1F33,#39FF14);opacity:1;box-shadow:0 4px 10px -3px rgba(0,0,0,0.632)}
.pd:focus-visible{outline:3px solid #39FF14;outline-offset:-2px;border-radius:8px}

/* entrance + idle motion */
.hero-copy>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>:nth-child(2){animation-delay:.08s}
.hero-copy>:nth-child(3){animation-delay:.16s}
.hero-copy>:nth-child(4){animation-delay:.24s}
.hero-copy>:nth-child(5){animation-delay:.32s}
.hero-copy>:nth-child(6){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes phone-in{from{opacity:0;transform:translateY(60px) rotateY(-28deg)}}
@keyframes pop{from{opacity:0;scale:.85}}
@keyframes bob{50%{translate:0 -10px}}
@keyframes drift{50%{translate:0 -8px}}
@keyframes floor{50%{scale:.85;opacity:.7}}
@keyframes spin{to{rotate:360deg}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(57,255,20,.6)}70%,100%{box-shadow:0 0 0 7px rgba(57,255,20,0)}}

@media (max-width:1200px){.float.notify{left:calc(50% + var(--sh)*.17)}}
@media (max-width:980px){
  .hero-bg{min-height:0}
  .hero{grid-template-columns:1fr;gap:var(--s4);padding-block:var(--s4) var(--s3);text-align:center}
  .hero-copy{display:flex;flex-direction:column;align-items:center}
  .hero .sub{margin-inline:auto}
  .cta{justify-content:center}
  .chips{width:100%;margin-inline:auto;text-align:left}
  .stage{--sh:clamp(440px,70vw,600px);--tilt:-8deg;width:100%;max-width:600px;margin-inline:auto}
}
@media (max-width:600px){
  .hero{padding-block:var(--s3) var(--s2);gap:var(--s3)}
  .eyebrow{font-size:.74rem}
  .hero h1{font-size:clamp(2.4rem,12vw,3rem);margin-top:16px}
  .hero h2{font-size:1.05rem;margin-top:10px}
  .hero .sub{font-size:.92rem;margin-top:12px}
  .cta{flex-direction:column;width:100%;margin-top:24px}
  .btn{width:100%;min-height:48px;font-size:.95rem}
  .chips{gap:8px;margin-top:28px}
  .chips>div{align-items:center;gap:8px;padding:14px 6px;text-align:center}
  .chips .ic{width:38px;height:38px;font-size:1.15rem}
  .chips b{font-size:.8rem}
  .chips small{display:none}
  .stage{--sh:min(118vw,470px)}
  .float.notify{display:none}
  .float.pick{width:calc(var(--sh)*.27);right:calc(50% + var(--sh)*.1)}
}
@media (max-width:380px){.hero h1{font-size:2.2rem}}
@media (prefers-reduced-motion:reduce){
  .hero-copy>*,.eb-live i,.orbit,.floor,.stage .phone-wrap,.phone-slider,.float{animation:none}
  .stage .phone-wrap,.float,.phone-slider .ps,.pd,.pd::before,.eb-rot,.eb-rot b,.chips>div{transition:none}
}

/* ---------- sections ---------- */
section{padding-block:var(--section)}
/* ---------- devices: one app, every screen ---------- */
.devices{position:relative;isolation:isolate;padding-block:clamp(56px,7vw,96px)}
.dv{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,88px);align-items:center}
.dv-copy h2{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.dv-copy h2 span{color:#39FF14;background:linear-gradient(100deg,#39FF14 30%,#8B5CF6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dv-copy .lead{max-width:46ch}
.dv-tabs{display:grid;gap:10px;margin-top:32px}
.dv-tab{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border:1px solid transparent;border-radius:18px;background:transparent;font:inherit;text-align:left;color:inherit;cursor:pointer;transition:background .3s,border-color .3s,box-shadow .3s}
.dv-tab:hover{background:rgba(19,26,35,0.55)}
.dv-tab.is-on{background:#131A23;border-color:rgba(255,255,255,.09);box-shadow:0 18px 36px -24px rgba(0,0,0,0.517)}
.dv-tab:focus-visible{outline:3px solid #39FF14;outline-offset:2px}
.dv-tab .ic{flex:none;display:grid;place-items:center;overflow:hidden;width:58px;height:58px;border-radius:16px;background:#0B0F14;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:box-shadow .3s,transform .3s}
.dv-tab .ic img{width:100%;height:100%;object-fit:cover}
.dv-tab .ic.fit img{padding:6px;object-fit:contain}
.dv-tab.is-on .ic{box-shadow:0 0 0 2px rgba(255,255,255,.06),0 0 0 4px rgba(57,255,20,0.45),0 10px 20px -10px rgba(0,0,0,0.575);transform:scale(1.04)}
.dv-tab b{display:block;font-size:1.05rem;font-weight:800;color:#EEF2F6}
.dv-tab small{display:block;margin-top:2px;font-size:.88rem;line-height:1.4;color:#9BA6B4}
/* progress bar: when it fills, the next device shows */
.dv-tab .bar{position:absolute;left:18px;right:18px;bottom:0;height:3px;border-radius:3px 3px 0 0;overflow:hidden;background:rgba(255,255,255,0.064);opacity:0}
.dv-tab .bar span{position:absolute;inset:0;background:linear-gradient(90deg,#1A1F33,#39FF14);transform:scaleX(0);transform-origin:left}
.dv-tab.is-on .bar{opacity:1}
.dv-tab.is-on .bar span{animation:dvbar 2.5s linear forwards}
.devices.paused .dv-tab.is-on .bar span,.devices.offscreen .dv-tab.is-on .bar span{animation-play-state:paused}
@keyframes dvbar{to{transform:none}}

.dv-stage{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:20/21;border-radius:32px;background:radial-gradient(60% 60% at 50% 45%,rgba(139,92,246,0.22),transparent 70%),linear-gradient(160deg,#0F141B,#0F141B);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 40px 80px -50px rgba(0,0,0,0.632)}
.dv-stage::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,0.096) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 80%);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 80%)}
.dv-stage::after{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:78%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px dashed rgba(255,255,255,0.16);animation:spin 80s linear infinite}
.dv-panel{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.dv-panel.is-on{opacity:1;visibility:visible}
.dv-panel img{position:absolute;height:auto;filter:drop-shadow(0 30px 28px rgba(0,0,0,0.368)) drop-shadow(0 6px 10px rgba(0,0,0,0.207));transform:translateY(28px) scale(.94) rotate(var(--r,0deg));transition:transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.dv-panel.is-on img{transform:rotate(var(--r,0deg));animation:bob 6s ease-in-out infinite;animation-delay:var(--f,0s)}
/* iPhone: three screens fanned out */
.p-iphone .d1{z-index:3;width:38%;left:31%;top:7%}
.p-iphone .d2{z-index:2;width:30%;left:7%;top:17%;--r:-8deg;--d:.08s;--f:-2s}
.p-iphone .d3{z-index:2;width:30%;right:7%;top:17%;--r:8deg;--d:.16s;--f:-4s}
/* iPad: landscape behind, portrait in front */
.p-ipad .d1{z-index:1;width:88%;right:3%;top:9%}
.p-ipad .d2{z-index:2;width:36%;left:4%;bottom:6%;--r:-4deg;--d:.12s;--f:-3s}
/* foldables: open on top, two closed in front */
.p-fold .d1{z-index:1;width:80%;left:10%;top:5%}
.p-fold .d2{z-index:2;width:34%;left:4%;bottom:5%;--r:-6deg;--d:.1s;--f:-2s}
.p-fold .d3{z-index:2;width:32%;right:4%;bottom:5%;--r:6deg;--d:.2s;--f:-4s}

@media (max-width:980px){
  .dv{grid-template-columns:1fr;gap:var(--s4)}
  .dv-copy{text-align:center}
  .dv-copy .lead{margin-inline:auto}
  .dv-tabs{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px}
  .dv-tab{flex-direction:column;gap:8px;padding:14px 8px;text-align:center}
  .dv-tab small{display:none}
  .dv-stage{width:100%;max-width:560px;margin-inline:auto}
}
@media (max-width:600px){
  .dv-copy h2{font-size:clamp(1.8rem,8vw,2.2rem)}
  .dv-tabs{gap:6px}
  .dv-tab{padding:12px 6px}
  .dv-tab .ic{width:46px;height:46px;border-radius:13px}
  .dv-tab b{font-size:.9rem}
  .dv-stage{border-radius:24px}
}
@media (prefers-reduced-motion:reduce){
  .dv-tab .bar{display:none}
  .dv-stage::after,.dv-panel.is-on img{animation:none}
  .dv-panel,.dv-panel img{transition:none}
}

/* ---------- what SharpSight does ---------- */
.what{position:relative;isolation:isolate;padding-block:clamp(56px,7vw,96px)}
.what::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,0.096) 1px,transparent 1.4px);background-size:24px 24px;-webkit-mask-image:radial-gradient(70% 60% at 50% 20%,#000,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 20%,#000,transparent 75%)}
.what-head{max-width:760px;margin-inline:auto;text-align:center}
.what-head h2{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.what-head h2 span{color:#39FF14;background:linear-gradient(100deg,#39FF14 30%,#8B5CF6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.what-head .lead{max-width:62ch;margin:14px auto 0}

.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(220px,auto);gap:16px;margin-top:44px}
.tile{--c:139,92,246;--d:0s;position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:22px;background:linear-gradient(160deg,rgba(19,26,35,0.96),rgba(19,26,35,0.72));border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 44px -30px rgba(0,0,0,0.575),inset 0 0 0 1px rgba(var(--c),.08);transition:transform .3s,box-shadow .3s}
.tile::before{content:"";position:absolute;left:26px;right:26px;top:0;height:3px;border-radius:0 0 3px 3px;background:rgb(var(--c));opacity:.7}
.tile::after{content:"";position:absolute;z-index:-1;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--c),.16),transparent)}
.tile:hover{transform:translateY(-4px);box-shadow:0 30px 50px -28px rgba(var(--c),.55),inset 0 0 0 1px rgba(var(--c),.2)}
.tile .tx{display:flex;flex-direction:column;gap:10px}
.tile .ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,rgba(var(--c),.2),rgba(var(--c),.06));box-shadow:inset 0 0 0 1px rgba(var(--c),.22);font-size:1.45rem;line-height:1}
.tile h3{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:#EEF2F6;margin-top:4px}
.tile p{color:#9BA6B4;font-size:.95rem;line-height:1.55}
.t-odds{--c:57,255,20}
.t-why{--c:124,58,237}
.t-parlay{--c:217,119,6}
.t-props{--c:57,255,20}
.t-record{--c:139,92,246}

/* big tile: AI predictions with a phone peeking up */
.t-main{grid-column:span 2;grid-row:span 2;background:linear-gradient(150deg,#131A23 0%,#0F141B 100%)}
.t-main .tx{max-width:50%}
.t-main h3{font-size:clamp(1.4rem,2.2vw,1.75rem)}
.t-main p{font-size:1rem}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;padding:0;list-style:none}
.tags li{padding:4px 12px;border-radius:999px;background:rgba(var(--c),.1);color:#EEF2F6;font-size:.78rem;font-weight:700}
.t-main .shot{position:absolute;right:7%;top:96px;width:min(42%,240px);transform:rotate(5deg);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.t-main .shot img{width:100%;filter:drop-shadow(0 30px 30px rgba(0,0,0,0.402))}
.t-main:hover .shot{transform:rotate(3deg) translateY(-10px)}

/* wide tiles: player props + track record, a phone rising from the bottom right */
.t-props,.t-record{grid-column:span 2;min-height:260px}
.t-props .tx,.t-record .tx{max-width:52%}
.t-props .shot,.t-record .shot{position:absolute;right:8%;top:26px;width:min(32%,190px);transform:rotate(6deg);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.t-record .shot{transform:rotate(-6deg)}
.t-props .shot img,.t-record .shot img{width:100%;filter:drop-shadow(0 24px 24px rgba(0,0,0,0.345))}
.t-props:hover .shot{transform:rotate(4deg) translateY(-10px)}
.t-record:hover .shot{transform:rotate(-4deg) translateY(-10px)}

/* wide tile: parlay builder with its screenshot */
.t-parlay{grid-column:span 2}
.t-parlay .tx{max-width:44%}
.t-parlay .shot{position:absolute;right:-7%;top:50%;width:60%;transform:translateY(-50%) rotate(-3deg);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.t-parlay .shot img{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:#131A23;box-shadow:0 24px 40px -22px rgba(0,0,0,0.575)}
.t-parlay:hover .shot{transform:translateY(calc(-50% - 6px)) rotate(-1.5deg)}

/* wide tile: league coverage */
.t-cover{--c:243,239,230;grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;gap:32px;background:linear-gradient(140deg,#1A1F33,#1A1F33);border-color:rgba(255,255,255,.08)}
.t-cover::before{background:#8B5CF6}
.t-cover:hover{box-shadow:0 30px 50px -26px rgba(0,0,0,0.85)}
.t-cover .tx{flex-direction:row;align-items:center;gap:14px}
.t-cover .ic{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.t-cover h3{color:#C3CBD5;margin:0}
.t-cover p{color:#C3CBD5;margin-top:2px}
.league-chips{flex:1;max-width:620px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0;list-style:none}
.league-chips li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 24px -18px rgba(0,0,0,.6);color:#C3CBD5;transition:transform .25s,background .25s,border-color .25s}
.league-chips li:hover{transform:translateY(-3px);background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.07));border-color:rgba(255,255,255,.28)}
.league-chips .em{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:1.15rem;line-height:1}
.league-chips b{display:block;font-size:1.05rem;font-weight:800;letter-spacing:.03em;line-height:1.1}
.league-chips small{display:block;margin-top:3px;font-size:.74rem;line-height:1.3;color:#C3CBD5}

/* reveal on scroll (only when JS runs) */
.js .bento .tile{opacity:0;translate:0 24px;transition:opacity .7s var(--d),translate .7s cubic-bezier(.2,.7,.2,1) var(--d),transform .3s,box-shadow .3s}
.js .bento.in .tile{opacity:1;translate:none}
.bento .tile:nth-child(2){--d:.06s}
.bento .tile:nth-child(3){--d:.12s}
.bento .tile:nth-child(4){--d:.18s}
.bento .tile:nth-child(5){--d:.24s}
.bento .tile:nth-child(6){--d:.3s}
.bento .tile:nth-child(7){--d:.36s}

@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .t-main{grid-row:auto;min-height:320px}
  .t-main .tx{max-width:52%}
  .t-main .shot{top:40px;width:min(40%,220px)}
  .tile{min-height:200px}
}
@media (max-width:860px){
  .t-cover{flex-direction:column;align-items:stretch;gap:16px}
  .league-chips{max-width:none}
}
@media (max-width:600px){
  .what-head h2{font-size:clamp(1.8rem,8vw,2.2rem)}
  .bento{grid-template-columns:1fr;gap:12px;margin-top:28px}
  .t-main,.t-parlay,.t-props,.t-record{grid-column:auto}
  .tile{min-height:0;padding:20px}
  .tile::before{left:20px;right:20px}
  .t-main{min-height:0;padding-bottom:0}
  .t-main .tx,.t-parlay .tx{max-width:none}
  .t-main .shot{position:relative;right:auto;top:auto;align-self:center;width:58%;margin-bottom:-62%;transform:rotate(3deg)}
  .t-parlay .shot{position:relative;right:auto;top:auto;width:100%;transform:rotate(-1.5deg)}
  .t-props,.t-record{min-height:0;padding-bottom:0}
  .t-props .tx,.t-record .tx{max-width:none}
  .t-props .shot,.t-record .shot{position:relative;right:auto;top:auto;align-self:center;width:52%;margin:8px 0 -56%}
  .t-parlay:hover .shot{transform:translateY(-4px) rotate(-1deg)}
  .league-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .js .bento .tile{opacity:1;translate:none;transition:none}
  .t-main .shot,.t-parlay .shot,.t-props .shot,.t-record .shot,.league-chips li{transition:none}
}

/* ---------- how it works ---------- */
.how{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(64px,8vw,104px);background:linear-gradient(160deg,#11151F 0%,#1A1F33 45%,#1A1F33 100%);color:#C3CBD5}
.how::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 85% 0%,rgba(139,92,246,0.55),transparent 70%),radial-gradient(40% 50% at 0% 100%,rgba(139,92,246,.16),transparent 70%)}
.how::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.4px);background-size:24px 24px;-webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%)}
.how-head{max-width:900px;margin-inline:auto;text-align:center}
.how-head h2{color:#C3CBD5;font-size:clamp(2.2rem,4.4vw,3.4rem)}
.how-head h2 span{color:#8B5CF6;background:linear-gradient(100deg,#8B5CF6,#8B5CF6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.how-head .lead{color:#C3CBD5;max-width:56ch;margin:14px auto 0}

/* timeline: numbered nodes joined by a line, a card under each */
.flow{position:relative;list-style:none;padding:0;margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.flow::before{content:"";position:absolute;left:16.6%;right:16.6%;top:27px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(139,92,246,0.7),rgba(139,92,246,0.7));transform-origin:left;transition:transform 1.2s .2s cubic-bezier(.2,.7,.2,1)}
.flow::after{content:"";position:absolute;left:16.6%;top:24px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#131A23;box-shadow:0 0 0 4px rgba(255,255,255,.15),0 0 16px 4px rgba(139,92,246,0.7);animation:travel 4s ease-in-out infinite}
.fstep{--d:0s;display:flex;flex-direction:column;align-items:stretch}
.fstep:nth-child(2){--d:.15s}
.fstep:nth-child(3){--d:.3s}
.node{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin:0 auto 24px;border-radius:50%;background:linear-gradient(145deg,#131A23,#0F141B);color:#EEF2F6;font-weight:800;font-size:1rem;letter-spacing:.02em;box-shadow:0 0 0 6px rgba(255,255,255,.08),0 0 0 12px rgba(255,255,255,.04),0 14px 30px -10px rgba(0,0,0,.5)}
.fcard{position:relative;overflow:hidden;isolation:isolate;flex:1;display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 50px -30px rgba(0,0,0,.6);transition:transform .3s,border-color .3s,background .3s}
.fcard:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.28);background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.06))}
.fcard::after{content:attr(data-n);position:absolute;z-index:-1;right:16px;bottom:-22px;font-size:7.5rem;font-weight:800;line-height:1;letter-spacing:-.05em;color:rgba(255,255,255,.05)}
.fcard .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:1.5rem;line-height:1}
.fcard h3{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;color:#C3CBD5;margin-top:4px}
.fcard p{color:#C3CBD5;font-size:.97rem;line-height:1.6}
.mini{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding:8px 0 0;list-style:none}
.mini li{padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);font-size:.76rem;font-weight:600;color:#C3CBD5}
.meter{display:flex;align-items:center;gap:10px;margin-top:auto;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:.76rem;font-weight:600;color:#C3CBD5}
.meter .bars{display:flex;gap:4px;flex:1}
.meter .bars i{flex:1;height:6px;border-radius:3px;background:linear-gradient(90deg,#8B5CF6,#8B5CF6)}
.meter .bars i.dim{background:rgba(255,255,255,.15)}
.meter b{color:#fff;font-weight:800}
@keyframes travel{0%{left:16.6%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:83.4%;opacity:0}}

/* reveal on scroll */
.js .flow::before{transform:scaleX(0)}
.js .flow.in::before{transform:none}
.js .flow .fstep{opacity:0;translate:0 28px;transition:opacity .7s var(--d),translate .7s cubic-bezier(.2,.7,.2,1) var(--d)}
.js .flow.in .fstep{opacity:1;translate:none}

@media (max-width:860px){
  .flow{grid-template-columns:1fr;gap:20px;margin-top:40px}
  .flow::before,.flow::after{display:none}
  .fstep{position:relative;flex-direction:row;align-items:flex-start;gap:16px}
  .fstep:not(:last-child)::before{content:"";position:absolute;left:27px;top:56px;bottom:-20px;width:2px;background:linear-gradient(180deg,rgba(139,92,246,0.7),rgba(139,92,246,0.7))}
  .node{flex:none;margin:0}
}
@media (max-width:600px){
  .how-head h2{font-size:clamp(1.8rem,8vw,2.2rem)}
  .fcard{padding:20px;gap:10px}
  .fcard h3{font-size:1.1rem}
  .fcard p{font-size:.9rem}
  .fcard::after{font-size:5.5rem}
  .node{width:48px;height:48px;font-size:.9rem}
  .fstep:not(:last-child)::before{left:23px;top:48px}
}
@media (prefers-reduced-motion:reduce){
  .flow::after{display:none}
  .js .flow::before,.js .flow .fstep{transform:none;opacity:1;translate:none;transition:none}
  .fcard{transition:none}
}


/* ---------- attribution + footer ---------- */
.attr{background:#131A23;border-block:1px solid rgba(255,255,255,.09);padding-block:var(--s5)}
.attr .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.attr h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.attr p{color:#9BA6B4;margin-top:var(--s1);max-width:52ch}
.logo-slot{width:min(100%,300px);height:84px;border:2px dashed rgba(255,255,255,.09);border-radius:14px;display:grid;place-items:center;color:#9BA6B4;font-size:.85rem;font-weight:600;text-align:center;padding:var(--s1)}


/* ---------- phone ---------- */
@media (max-width:600px){
  .nav ul{gap:var(--s3)}
  .attr .wrap{flex-direction:column;align-items:flex-start}
  .logo-slot{width:100%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- inner pages ---------- */
.page-hero{background:linear-gradient(180deg,#0B0F14 0%,#0F141B 100%);padding-block:var(--s4) var(--s4)}
.page-hero h1{font-size:clamp(2.4rem,6vw,4rem);font-weight:800;color:#EEF2F6;letter-spacing:-.04em}
.page-hero p{color:#9BA6B4;margin-top:var(--s2);max-width:56ch}
.draft{display:inline-block;margin-top:var(--s3);padding:4px 14px;border-radius:999px;background:#18202B;border:1px solid #E7CF86;color:#6A5200;font-weight:700;font-size:.85rem}
.wrap.prose{padding-block:var(--section)}
.prose>*{max-width:72ch}
.prose h2{font-size:1.45rem;margin:var(--s4) 0 var(--s1);letter-spacing:-.02em}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:#EEF2F6;margin-top:var(--s1)}
.prose ul{padding-left:1.2em}
.prose a{color:#EEF2F6;font-weight:600}
.ph-text{background:#18202B;padding:0 4px;border-radius:4px}


@media (max-width:760px){.duo{grid-template-columns:1fr}.duo .big{padding:var(--s3)}}




.data-sec{padding-block:0 var(--s4)}

.data-sec .lead{max-width:60ch}
.data-sec,.contact-sec{padding-top:0}

/* ---------- inner pages: compact hero ---------- */
body .page-hero{padding-block:var(--s3)}
body .page-hero h1{font-size:clamp(2.2rem,5vw,3.2rem)}
body .page-hero p{margin-top:8px}



/* ---------- Footer ---------- */
/* ---------- footer ---------- */
.site-footer{position:relative;overflow:hidden;isolation:isolate;padding-top:clamp(48px,6vw,72px);background:var(--night);color:#C3CBD5;font-size:.95rem}
.site-footer::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(45% 60% at 0% 0%,rgba(139,92,246,0.28),transparent 70%),radial-gradient(35% 50% at 100% 100%,rgba(139,92,246,.12),transparent 70%)}
.site-footer::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,0.5),rgba(139,92,246,0.6),transparent)}
.site-footer a{color:#C3CBD5;font-weight:500;text-decoration:none}

/* call to action card */
.foot-cta{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:56px;padding:clamp(24px,4vw,40px);border-radius:24px;background:linear-gradient(135deg,#1A1F33,#39FF14 60%,#39FF14);box-shadow:0 30px 60px -30px rgba(57,255,20,0.6),inset 0 1px 0 rgba(255,255,255,.15)}
.foot-cta::after{content:"";position:absolute;z-index:-1;right:-80px;top:-140px;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.2),transparent)}
.foot-cta h2{color:#fff;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.02em}
.foot-cta p{color:#C3CBD5;margin-top:6px}
.site-footer .foot-btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border-radius:14px;background:#131A23;color:#EEF2F6;font-weight:800;box-shadow:0 14px 28px -14px rgba(0,0,0,.5);transition:transform .2s,box-shadow .2s}
.site-footer .foot-btn:hover{transform:translateY(-2px);box-shadow:0 20px 32px -16px rgba(0,0,0,.6)}
.foot-btn svg{width:18px;height:18px;transition:transform .2s}
.foot-btn:hover svg{transform:translateX(3px)}

/* columns */
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:var(--s4);padding-bottom:40px}
.site-footer .brand{display:inline-flex;align-items:center;gap:12px;color:#C3CBD5;font-size:1.25rem;font-weight:800}
.site-footer .brand img{width:40px}
.foot-blurb{margin-top:14px;max-width:32ch;color:#9BA6B4;line-height:1.6}
.site-footer h3{margin-bottom:16px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9BA6B4}
.site-footer ul{list-style:none;padding:0;display:grid;gap:10px}
.foot-links a{display:inline-flex;align-items:center;transition:color .2s}
.foot-links a::before{content:"";width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#1A1F33,#39FF14);transition:width .25s,margin .25s}
.foot-links a:hover{color:#fff}
.foot-links a:hover::before{width:12px;margin-right:8px}
.foot-contact li{display:flex;align-items:flex-start;gap:12px}
.foot-contact .fi{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#8B5CF6}
.foot-contact .fi svg{width:16px;height:16px}
.foot-contact address{font-style:normal;line-height:1.6}
.foot-contact b{color:#C3CBD5;font-weight:700}
.foot-contact a{align-self:center;transition:color .2s}
.foot-contact a:hover{color:#fff}

/* bottom bar */
.foot-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px;border-top:1px solid rgba(243,239,230,.1);font-size:.86rem;color:#9BA6B4}
.foot-bar .data-credit{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.foot-bar .data-credit a{display:inline-flex;align-items:center;padding:6px 10px;border-radius:8px;background:#18202B;transition:transform .2s}
.foot-bar .data-credit a:hover{transform:translateY(-2px)}
.foot-bar .data-credit img{display:block;width:auto;height:19px}

/* big faded wordmark */
.foot-mark{overflow:hidden;margin-top:4px;font-size:clamp(4rem,17vw,15rem);font-weight:800;line-height:.78;letter-spacing:-.06em;text-align:center;white-space:nowrap;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;user-select:none;pointer-events:none}

@media (max-width:980px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
}
@media (max-width:600px){
  .site-footer{font-size:.88rem}
  .foot-cta{margin-bottom:40px;border-radius:20px}
  .site-footer .foot-btn{width:100%;justify-content:center}
  .site-footer{padding-top:40px}
  .foot-grid{gap:14px;padding-bottom:24px}
  .foot-grid>.fcol:first-child,.foot-grid>.fcol:last-child{grid-column:1 / -1}
  /* brand: centred */
  .foot-grid>.fcol:first-child{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:10px}
  .foot-blurb{max-width:36ch;margin-top:12px}
  /* link groups and contact sit in soft cards */
  .foot-grid>nav.fcol,.foot-grid>.fcol:last-child{padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
  .site-footer h3{margin-bottom:8px;font-size:.7rem}
  .site-footer .foot-links{gap:0}
  .foot-links a{min-height:40px}
  .foot-contact{gap:12px}
  .foot-contact address{font-size:.86rem}
  .foot-contact a{font-size:.86rem;word-break:break-all}
  /* bottom bar: centred and stacked */
  .foot-bar{flex-direction:column;align-items:center;gap:12px;padding-block:20px;text-align:center;font-size:.78rem}
  .foot-bar .data-credit{justify-content:center}
  .foot-mark{font-size:17vw;line-height:.82;margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  .foot-btn,.foot-btn svg,.foot-links a::before,.foot-bar .data-credit a{transition:none}
}



.nav a.l{white-space:nowrap}
@media (max-width:600px){
  .nav{flex-wrap:wrap;row-gap:var(--s1)}
  .nav ul{gap:var(--s3)}
  .nav a.l{font-size:.9rem}
}


/* ---------- Contact Us ---------- */
.wh-hero.ct-hero{padding-block:clamp(40px,6vw,80px) clamp(24px,4vw,48px)}
.ct-copy{max-width:820px;margin-inline:auto;text-align:center}
.ct-copy h1{margin-top:0}
.ct-copy .wh-lead{max-width:44ch;margin-inline:auto;font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:500;color:#9BA6B4}

.ct-sec{padding-block:clamp(8px,2vw,24px) clamp(56px,7vw,96px)}
.ct-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,48px);align-items:stretch}
.ct-side{display:grid;grid-template-rows:repeat(3,1fr);gap:16px}
.ct-side .tile{min-height:0}
.ct-mail{align-self:flex-start;font-weight:700;color:#EEF2F6;text-decoration:none;word-break:break-all;border-bottom:2px solid rgba(57,255,20,0.3);transition:border-color .2s}
.ct-mail:hover{border-color:#39FF14}
.ct-side address{font-style:normal;line-height:1.65;color:#EEF2F6}

/* form card */
.ct-form{position:relative;overflow:hidden;isolation:isolate;padding:clamp(24px,4vw,44px);border-radius:28px;background:linear-gradient(160deg,#131A23,rgba(19,26,35,0.88));border:1px solid rgba(255,255,255,.09);box-shadow:0 40px 80px -44px rgba(0,0,0,0.632),inset 0 0 0 1px rgba(0,0,0,0.069)}
.ct-form::before{content:"";position:absolute;left:32px;right:32px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#1A1F33,#39FF14)}
.ct-form::after{content:"";position:absolute;z-index:-1;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(closest-side,rgba(139,92,246,0.12),transparent)}
.ct-form-head h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.ct-form-head p{margin-top:6px;font-size:.92rem;color:#9BA6B4}
.ct-form form{margin-top:24px}
.ct-form .notice{margin-top:20px;margin-bottom:0}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fgroup{margin:0 0 18px;padding:0;border:0;min-width:0}
.fgroup>label,.fgroup>legend{display:block;margin-bottom:8px;padding:0;font-size:.88rem;font-weight:700;color:#EEF2F6}
.fgroup .req{color:#39FF14}
.fgroup .opt{font-weight:500;color:#9BA6B4}
.ct-form input[type=text],.ct-form input[type=email],.ct-form textarea{width:100%;padding:14px 16px;border:1.5px solid rgba(255,255,255,.09);border-radius:14px;background:#0B0F14;font:inherit;font-size:16px;color:#EEF2F6;transition:border-color .2s,box-shadow .2s,background .2s}
.ct-form ::placeholder{color:#9BA6B4}
.ct-form input[type=text]:hover,.ct-form input[type=email]:hover,.ct-form textarea:hover{border-color:rgba(255,255,255,.09)}
.ct-form input[type=text]:focus,.ct-form input[type=email]:focus,.ct-form textarea:focus{outline:none;background:#131A23;border-color:#39FF14;box-shadow:0 0 0 4px rgba(57,255,20,0.14)}
.ct-form textarea{min-height:150px;resize:vertical}
/* service interest: styled dropdown */
.fselect{position:relative}
.fselect::after{content:"";position:absolute;right:18px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:2px solid #39FF14;border-bottom:2px solid #39FF14;transform:rotate(45deg);pointer-events:none;transition:transform .2s}
.fselect:not(.is-js):focus-within::after{transform:translateY(3px) rotate(225deg)}
.ct-form select{width:100%;padding:14px 48px 14px 16px;border:1.5px solid rgba(255,255,255,.09);border-radius:14px;background:#0B0F14;font:inherit;font-size:16px;color:#EEF2F6;cursor:pointer;-webkit-appearance:none;appearance:none;text-overflow:ellipsis;transition:border-color .2s,box-shadow .2s,background .2s}
.ct-form select:invalid{color:#9BA6B4}
.ct-form select option{color:#EEF2F6}
.ct-form select:hover{border-color:rgba(255,255,255,.09)}
.ct-form select:focus{outline:none;background:#131A23;border-color:#39FF14;box-shadow:0 0 0 4px rgba(57,255,20,0.14)}
/* custom dropdown (JS) layered over the real select */
.fselect.is-js::after{z-index:2}
.fselect.is-js select{position:absolute;inset:0;opacity:0;pointer-events:none}
.fs-btn{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:8px 48px 8px 10px;border:1.5px solid rgba(255,255,255,.09);border-radius:14px;background:#0B0F14;font:inherit;font-size:16px;color:#EEF2F6;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.fs-btn.is-empty{padding-left:16px;color:#9BA6B4}
.fs-btn:hover{border-color:rgba(255,255,255,.09)}
.fs-btn:focus-visible,.fselect.is-open .fs-btn{outline:none;background:#131A23;border-color:#39FF14;box-shadow:0 0 0 4px rgba(57,255,20,0.14)}
.fselect.is-invalid .fs-btn{border-color:#39FF14;box-shadow:0 0 0 4px rgba(57,255,20,0.12)}
.fselect.is-open::after{transform:translateY(3px) rotate(225deg)}
.fs-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,rgba(139,92,246,0.16),rgba(139,92,246,0.05));box-shadow:inset 0 0 0 1px rgba(57,255,20,0.14);font-size:1rem;line-height:1}
.fs-tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;border-radius:18px;background:#131A23;border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 60px -24px rgba(0,0,0,0.517),0 8px 18px -10px rgba(0,0,0,0.23);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top;transition:opacity .18s,transform .18s,visibility .18s}
.fs-list:focus{outline:none}
.fselect.is-open .fs-list{opacity:1;visibility:visible;transform:none}
.fs-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-size:.95rem;font-weight:600;color:#EEF2F6;cursor:pointer;transition:background .15s}
.fs-list li.is-act{background:rgba(255,255,255,0.048)}
.fs-list li.is-sel{color:#EEF2F6}
.fs-list li.is-sel .fs-ic{background:#39FF14;box-shadow:none}
.fs-ck{flex:none;width:18px;height:18px}
.fs-list li.is-sel .fs-ck::after{content:"";display:block;width:6px;height:11px;margin:1px auto 0;border-right:2.5px solid #39FF14;border-bottom:2.5px solid #39FF14;transform:rotate(45deg)}
.fsubmit{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;margin-top:4px;padding:0 28px;border:0;border-radius:14px;background:linear-gradient(135deg,#39FF14,#8B5CF6);background-size:140% 100%;background-position:0 0;color:#fff;font:800 1rem "Inter",system-ui,sans-serif;cursor:pointer;box-shadow:0 16px 30px -16px rgba(57,255,20,0.85),inset 0 1px 0 rgba(255,255,255,.2);transition:background-position .3s,transform .2s,box-shadow .2s}
.fsubmit:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 22px 34px -16px rgba(57,255,20,0.9),inset 0 1px 0 rgba(255,255,255,.2)}
.fsubmit svg{width:18px;height:18px}
.fsubmit:focus-visible{outline:3px solid #39FF14;outline-offset:3px}
.fnote{margin-top:14px;font-size:.85rem;text-align:center;color:#9BA6B4}
.fnote a{color:#EEF2F6;font-weight:600;text-decoration:underline;text-underline-offset:4px}

@media (max-width:900px){
  .ct-grid{grid-template-columns:1fr}
  .ct-form{order:-1}
  .ct-side{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}
}
@media (max-width:700px){
  .ct-side{grid-template-columns:1fr}
}
@media (max-width:520px){
  .frow{grid-template-columns:1fr;gap:0}
  .ct-form{border-radius:22px}
  .ct-form::before{left:22px;right:22px}
}
@media (prefers-reduced-motion:reduce){
  .fsubmit,.ct-form input,.ct-form textarea,.ct-form select,.fselect::after,.fs-btn,.fs-list,.fs-list li{transition:none}
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{padding:14px 16px;border-radius:10px;margin-bottom:var(--s2);font-weight:600;font-size:.95rem}
.notice.ok{background:#0F141B;color:#39FF14}
.notice.err{background:#0F141B;color:#EEF2F6}

/* ---------- touch / small-screen polish ---------- */
@media (max-width:600px){
  .nav a.l{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
  .brand{min-height:44px}
}
@media (max-width:360px){
  :root{--gutter:16px}
}
@media (min-width:1700px){
  :root{--max:1280px}
  body{font-size:1.125rem}
}


/* ---------- fixed header ---------- */
html{scroll-padding-top:84px}
.site-header{position:sticky;top:0;z-index:100;background:rgba(19,26,35,0.94);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid rgba(255,255,255,.09)}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
@media (max-width:600px){.admin-bar .site-header{top:0}}
@media (max-width:600px){
  html{scroll-padding-top:64px}
  .nav{flex-wrap:nowrap;padding-block:4px}
  .brand{min-height:44px}
}
@media (max-width:480px){
  .nav .bn{display:none}
  .nav ul{gap:var(--s2)}
}

/* ---------- centred reading column (legal pages) ---------- */
body.reading .page-hero .wrap,
body.reading .wrap.prose{max-width:calc(860px + 2*var(--gutter))}
body.reading .prose>*{max-width:none}


/* page subtitle: single line on wide screens */
body .page-hero p{max-width:none}

/* ---------- legal pages: numbered clause cards ---------- */
body.reading .wrap.prose{counter-reset:cl;max-width:calc(940px + 2*var(--gutter))}
body.reading .page-hero .wrap{max-width:calc(940px + 2*var(--gutter))}
body.reading .prose>p:first-child{color:#9BA6B4;font-size:.95rem;margin:0 0 var(--s2)}
body.reading .prose p{text-wrap:wrap}
.clause{counter-increment:cl;background:#131A23;border:1px solid rgba(255,255,255,.09);border-radius:var(--r);padding:var(--s3) var(--s4);margin-top:var(--s2)}
.prose .clause h2,.clause h2{display:flex;align-items:center;gap:12px;font-size:1.3rem;margin:0 0 var(--s1);letter-spacing:-.02em}
.clause h2::before{content:counter(cl);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#39FF14;color:#0B0F14;font-size:.9rem;font-weight:800;letter-spacing:0}
.clause p,.clause li{margin-top:var(--s1)}
.clause>*:last-child{margin-bottom:0}
@media (max-width:600px){.clause{padding:var(--s3)}.clause h2{font-size:1.15rem}}

/* ---------- mobile menu button ---------- */
.nav-toggle{display:none;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:#EEF2F6;cursor:pointer;align-items:center;justify-content:center;flex:none}
.nav-toggle:hover{background:rgba(255,255,255,0.064)}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{display:block;width:22px;height:2.5px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.nav-toggle .bars{position:relative}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0}
.nav-toggle .bars::before{top:-7px}
.nav-toggle .bars::after{top:7px}
.site-header.open .nav-toggle .bars{background:transparent}
.site-header.open .nav-toggle .bars::before{transform:translateY(7px) rotate(45deg)}
.site-header.open .nav-toggle .bars::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:700px){
  .js .nav-toggle{display:inline-flex}
  .nav .bn{display:inline}
  .js #site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#0B0F14;border-bottom:1px solid rgba(255,255,255,.09);box-shadow:0 22px 30px -20px rgba(0,0,0,0.517)}
  .js .site-header.open #site-nav{display:block}
  .js #site-nav ul{flex-direction:column;gap:0;padding:var(--s1) var(--gutter) var(--s2)}
  .js #site-nav a.l{display:flex;width:100%;min-height:52px;align-items:center;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.09)}
  .js #site-nav li:last-child a.l{border-bottom-color:transparent}
  .js #site-nav a.l.on{color:#EEF2F6;border-bottom-color:#39FF14}
}
@media (prefers-reduced-motion:reduce){.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{transition:none}}


/* ---------- responsive polish ---------- */
/* phone footer: two columns instead of one tall stack */

/* ---------- phone: compact text and cards ---------- */
@media (max-width:600px){
  body{font-size:1rem}
  .lead{font-size:1rem}
}

/* ---------- phone: smaller type scale ---------- */
@media (max-width:600px){
  html{font-size:93.75%}
  body{font-size:.95rem;line-height:1.55}
  h2{font-size:clamp(1.45rem,7vw,1.7rem)}
  .lead{font-size:.95rem;margin-top:8px}
  .brand{font-size:1.1rem}
  .brand img{width:34px}
  .nav a.l{font-size:.85rem}
  body .page-hero h1{font-size:1.9rem}
  body .page-hero p{font-size:.9rem}
  .clause h2{font-size:1.02rem}
  .clause p,.clause li,.prose p,.prose li{font-size:.88rem;line-height:1.55}
  .clause h2::before{width:26px;height:26px;font-size:.8rem}
  body.reading .prose>p:first-child{font-size:.85rem}
}
@media (max-width:380px){
  h2{font-size:1.4rem}
}

/* ---------- tighter vertical rhythm ---------- */
:root{--section:clamp(32px,4vw,52px)}
.bar{margin-bottom:12px}
.page-hero .wrap{padding-block:0}


/* ---------- Who We Are ---------- */
.wh-hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(48px,7vw,96px);background:radial-gradient(50% 70% at 80% 40%,rgba(139,92,246,0.13),transparent 70%),linear-gradient(180deg,#0B0F14 0%,#0F141B 70%,#0B0F14 100%)}
.wh-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,0.112) 1px,transparent 1.4px);background-size:24px 24px;-webkit-mask-image:radial-gradient(55% 70% at 75% 45%,#000,transparent 75%);mask-image:radial-gradient(55% 70% at 75% 45%,#000,transparent 75%)}
.wh-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:center}
.wh-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(19,26,35,0.8);box-shadow:0 10px 24px -14px rgba(0,0,0,0.46);font-size:.82rem;font-weight:700;color:#EEF2F6}
.wh-copy h1{margin-top:18px;font-size:clamp(3rem,6.4vw,5.4rem);font-weight:800;line-height:1;letter-spacing:-.045em;color:#EEF2F6}
.wh-copy h1 span{color:#39FF14;background:linear-gradient(100deg,#39FF14 30%,#8B5CF6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wh-lead{max-width:34ch;margin-top:18px;font-size:clamp(1.15rem,1.8vw,1.4rem);font-weight:600;line-height:1.45;color:#EEF2F6}
.wh-sub{max-width:48ch;margin-top:12px;font-size:1.05rem;color:#9BA6B4}
.wh-copy .cta{margin-top:28px}
/* logo in a disc, ringed by floating chips */
.wh-visual{position:relative;justify-self:center;width:100%;max-width:440px;aspect-ratio:1}
.wh-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(255,255,255,0.16);animation:spin 70s linear infinite}
.wh-disc{position:absolute;inset:13%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 30% 25%,#39FF14,#1A1F33 62%);box-shadow:0 40px 80px -30px rgba(0,0,0,0.69)}
.wh-mark{width:40%;height:auto;border-radius:22%;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45));animation:bob 6s ease-in-out infinite}
.wh-chip{position:absolute;display:flex;text-align:left;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:999px;background:rgba(19,26,35,0.86);border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 40px -18px rgba(0,0,0,0.632),inset 0 0 0 1px rgba(0,0,0,0.057);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;transform:translate(-50%,-50%);animation:drift 7s ease-in-out infinite;transition:transform .25s,box-shadow .25s}
.wh-chip:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 26px 44px -18px rgba(0,0,0,0.69),inset 0 0 0 1px rgba(57,255,20,0.2)}
.wh-chip i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,rgba(139,92,246,0.2),rgba(139,92,246,0.06));box-shadow:inset 0 0 0 1px rgba(57,255,20,0.18);font-style:normal;font-size:1.15rem;line-height:1}
.wh-chip b{display:block;font-size:.98rem;font-weight:800;line-height:1.1;letter-spacing:.02em;color:#EEF2F6}
.wh-chip small{display:block;margin-top:1px;font-size:.7rem;font-weight:600;color:#9BA6B4}
/* the four leagues sit on the ring's diagonals */
.wh-chip.c1{left:14.6%;top:14.6%}
.wh-chip.c2{left:85.4%;top:14.6%;animation-delay:-2s}
.wh-chip.c3{left:14.6%;top:85.4%;animation-delay:-4s}
.wh-chip.c4{left:85.4%;top:85.4%;animation-delay:-5.5s}

/* who it's for */
.wh-for{padding-top:clamp(8px,2vw,24px)}
.wh-panel{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(28px,5vw,56px);border-radius:28px;background:linear-gradient(140deg,#11151F,#1A1F33 50%,#1A1F33);color:#C3CBD5;box-shadow:0 40px 80px -40px rgba(0,0,0,0.805)}
.wh-panel::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(60% 80% at 20% 50%,#000,transparent 75%);mask-image:radial-gradient(60% 80% at 20% 50%,#000,transparent 75%)}
.wh-panel::after{content:"";position:absolute;z-index:-1;right:-140px;top:-160px;width:440px;height:440px;border-radius:50%;background:radial-gradient(closest-side,rgba(139,92,246,0.7),transparent)}
.wh-panel h2{color:#C3CBD5;font-size:clamp(1.9rem,3.4vw,2.6rem)}
.wh-panel-head p{margin-top:14px;font-size:1.15rem;line-height:1.6;color:#C3CBD5}
.wh-aud{display:grid;gap:14px}
.wh-aud article{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;align-items:start;padding:20px 22px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:transform .3s,border-color .3s}
.wh-aud article:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.28)}
.wh-aud .ic{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-size:1.4rem;line-height:1}
.wh-aud h3{font-size:1.15rem;font-weight:800;color:#fff}
.wh-aud p{font-size:.95rem;line-height:1.55;color:#C3CBD5}

/* values + info cards reuse the .tile card look */
.wh-values{padding-top:clamp(56px,7vw,96px)}
.wh-head{max-width:720px;margin-inline:auto;text-align:center}
.wh-head h2{font-size:clamp(2rem,4vw,3rem)}
.wh-head h2 span{color:#39FF14;background:linear-gradient(100deg,#39FF14 30%,#8B5CF6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wh-head .lead{margin:12px auto 0;max-width:56ch}
.wh-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.wh-cards .tile{min-height:0}
.wh-info{padding-block:16px clamp(56px,7vw,96px)}
.wh-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.wh-logo{display:inline-flex;align-self:flex-start;margin-top:4px;padding:8px 12px;border-radius:10px;background:#18202B;border:1px solid rgba(255,255,255,.09);transition:transform .2s}
.wh-logo:hover{transform:translateY(-2px)}
.wh-logo img{display:block;width:auto;height:20px}
.wh-info address{font-style:normal;font-size:.95rem;font-weight:500;color:#EEF2F6}

/* reveal on scroll */
.js .rv{opacity:0;translate:0 24px;transition:opacity .7s var(--d,0s),translate .7s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .3s,box-shadow .3s}
.js .rv.in{opacity:1;translate:none}

@media (max-width:980px){
  .wh-grid{grid-template-columns:1fr;text-align:center}
  .wh-lead,.wh-sub{margin-inline:auto}
  .wh-copy .cta{justify-content:center}
  .wh-visual{max-width:380px}
  .wh-panel{grid-template-columns:1fr}
}
@media (max-width:860px){
  .wh-cards{grid-template-columns:1fr}
}
@media (max-width:760px){
  .wh-info-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .wh-copy h1{font-size:clamp(2.6rem,12vw,3.2rem)}
  .wh-visual{max-width:300px}
  .wh-chip{gap:8px;padding:5px 12px 5px 5px}
  .wh-chip i{width:30px;height:30px;font-size:.95rem}
  .wh-chip b{font-size:.85rem}
  .wh-chip small{display:none}
  .wh-chip.c1,.wh-chip.c3{left:18%}
  .wh-chip.c2,.wh-chip.c4{left:82%}
  .wh-panel{border-radius:22px}
  .wh-aud article{padding:16px}
  .wh-panel-head p{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .wh-ring,.wh-mark,.wh-chip{animation:none}
  .js .rv{opacity:1;translate:none;transition:none}
}



/* legal pages: same left and right edges as the header, footer and other pages */
body.reading .page-hero .wrap,body.reading .wrap.prose{max-width:var(--max)}
.clause p,.clause ul,.clause ol{max-width:90ch}

/* ---------- header: no divider, soft glass, pill links ---------- */
.site-header{border-bottom:0;background:rgba(19,26,35,0.78);transition:background .3s,box-shadow .3s}
.site-header.scrolled{background:rgba(19,26,35,0.9);box-shadow:0 14px 34px -26px rgba(0,0,0,0.575)}
.nav ul{align-items:center;gap:6px}
.nav a.l{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:0;border-radius:999px;color:#EEF2F6;transition:background .2s,color .2s,box-shadow .2s}
.nav a.l:hover{background:rgba(255,255,255,0.048);color:#EEF2F6}
.nav a.l.on{background:rgba(255,255,255,0.072);color:#EEF2F6}
.nav li:last-child a.l{margin-left:10px;padding:0 20px;background:#39FF14;color:#0B0F14;box-shadow:0 10px 22px -12px rgba(0,0,0,0.85)}
.nav li:last-child a.l:hover{background:#2FE010;color:#0B0F14}
.nav li:last-child a.l.on{box-shadow:0 0 0 3px rgba(57,255,20,0.25),0 10px 22px -12px rgba(0,0,0,0.85)}
.brand{transition:opacity .2s}
.brand:hover{opacity:.85}
@media (max-width:700px){
  .js #site-nav{border-bottom:0;border-radius:0 0 20px 20px}
  .js #site-nav ul{gap:4px;align-items:stretch}
  .js #site-nav a.l{min-height:50px;padding:0 14px;border:0;border-radius:12px;color:#EEF2F6;background:none;box-shadow:none;margin:0}
  .js #site-nav a.l:hover{background:rgba(255,255,255,0.048)}
  .js #site-nav a.l.on{background:rgba(255,255,255,0.072);color:#EEF2F6}
  .js #site-nav li:last-child a.l{justify-content:center;margin-top:8px;background:#39FF14;color:#0B0F14}
}
@media (prefers-reduced-motion:reduce){.site-header,.nav a.l{transition:none}}

/* ---------- contact: dark maroon form ---------- */
.ct-form{background:linear-gradient(150deg,#11151F,#1A1F33 55%,#1A1F33);border-color:rgba(255,255,255,.08);box-shadow:0 40px 80px -40px rgba(0,0,0,0.85),inset 0 1px 0 rgba(255,255,255,.1)}
.ct-form::before{background:linear-gradient(90deg,#8B5CF6,#39FF14)}
.ct-form::after{width:340px;height:340px;background:radial-gradient(closest-side,rgba(139,92,246,0.65),transparent)}
.ct-form-head h2{color:#C3CBD5}
.ct-form-head p{color:#C3CBD5}
.ct-form .fgroup>label{color:#C3CBD5}
.ct-form .req{color:#8B5CF6}
.ct-form .opt{color:#C3CBD5}
.ct-form input[type=text],.ct-form input[type=email],.ct-form textarea,.ct-form select,.ct-form .fs-btn{background:#0B0F14;border-color:transparent}
.ct-form input[type=text]:hover,.ct-form input[type=email]:hover,.ct-form textarea:hover,.ct-form select:hover,.ct-form .fs-btn:hover{border-color:rgba(57,255,20,0.45)}
.ct-form input[type=text]:focus,.ct-form input[type=email]:focus,.ct-form textarea:focus,.ct-form select:focus,.ct-form .fs-btn:focus-visible,.ct-form .fselect.is-open .fs-btn{background:#131A23;border-color:rgba(57,255,20,0.45);box-shadow:0 0 0 4px rgba(139,92,246,0.3)}
.ct-form .fselect.is-invalid .fs-btn{border-color:rgba(57,255,20,0.45);box-shadow:0 0 0 4px rgba(139,92,246,0.3)}
.ct-form .fsubmit{background:linear-gradient(135deg,#8B5CF6,#8B5CF6);background-size:140% 100%;box-shadow:0 16px 30px -14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.ct-form .fnote{color:#C3CBD5}
.ct-form .fnote a{color:#C3CBD5}

/* ---------- contact: compact sizing ---------- */
.ct-side{gap:14px}
.ct-side .tile{padding:22px 24px;gap:10px}
.ct-side .tile::before{left:24px;right:24px}
.ct-side .tile .ic{width:42px;height:42px;border-radius:13px;font-size:1.2rem}
.ct-side .tile h3{margin-top:2px}
.ct-form{padding:clamp(22px,3vw,34px)}
.ct-form-head h2{font-size:clamp(1.4rem,2.2vw,1.75rem)}
.ct-form form{margin-top:18px}
.fgroup{margin-bottom:14px}
.fgroup>label,.fgroup>legend{margin-bottom:6px}
.frow{gap:14px}
.ct-form input[type=text],.ct-form input[type=email],.ct-form textarea{padding:12px 14px}
.ct-form select{padding:12px 44px 12px 14px}
.ct-form textarea{min-height:110px}
.fs-btn{min-height:48px;padding:6px 44px 6px 8px}
.fs-btn.is-empty{padding-left:14px}
.fs-btn .fs-ic{width:32px;height:32px}
.fsubmit{min-height:50px;margin-top:2px}
.fnote{margin-top:12px}

/* ---------- legal pages: hero, sticky contents, clause cards ---------- */
.wh-hero.lg-hero{padding-block:clamp(40px,6vw,80px) clamp(24px,4vw,48px)}
.lg-copy{max-width:860px;margin-inline:auto;text-align:center}
.lg-copy h1{margin-top:0}
.lg-copy .wh-lead{max-width:52ch;margin-inline:auto;font-size:clamp(1.05rem,1.6vw,1.2rem);font-weight:500;color:#9BA6B4}
.lg-sec{padding-block:clamp(8px,2vw,24px) clamp(56px,7vw,96px)}
.lg-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.lg-grid.no-toc{grid-template-columns:minmax(0,1fr)}
.lg-grid.no-toc .lg-toc{display:none}
.lg-toc{position:sticky;top:calc(var(--hdr) + 24px);padding:18px;border-radius:20px;background:rgba(19,26,35,0.8);border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 44px -30px rgba(0,0,0,0.575),inset 0 0 0 1px rgba(0,0,0,0.069)}
.lg-toc-h{margin:0 0 8px 10px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9BA6B4}
.lg-toc ol{display:grid;gap:2px;margin:0;padding:0;list-style:none;counter-reset:t}
.lg-toc a{counter-increment:t;display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:10px;font-size:.88rem;font-weight:600;line-height:1.35;color:#9BA6B4;text-decoration:none;transition:background .2s,color .2s}
.lg-toc a::before{content:counter(t,decimal-leading-zero);flex:none;font-size:.72rem;font-weight:800;color:#C3CBD5;transition:color .2s}
.lg-toc a:hover{background:rgba(255,255,255,0.04);color:#EEF2F6}
.lg-toc a.on{background:rgba(255,255,255,0.064);color:#EEF2F6}
.lg-toc a.on::before{color:#39FF14}
.lg-body{counter-reset:cl}
.lg-body>*{max-width:none}
body.reading .lg-body>p:first-child{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:8px 16px;border-radius:999px;background:rgba(19,26,35,0.85);box-shadow:0 12px 26px -18px rgba(0,0,0,0.575),inset 0 0 0 1px rgba(0,0,0,0.069);font-size:.85rem;color:#9BA6B4}
body.reading .lg-body>p:first-child::before{content:"\f073";font-family:"Font Awesome 6 Free";font-weight:900}
body.reading .lg-body>p:first-child b{color:#EEF2F6}
.lg-body .clause{position:relative;overflow:hidden;margin-top:14px;padding:26px 30px;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:linear-gradient(160deg,rgba(19,26,35,0.97),rgba(19,26,35,0.78));box-shadow:0 22px 44px -32px rgba(0,0,0,0.575),inset 0 0 0 1px rgba(0,0,0,0.069);scroll-margin-top:calc(var(--hdr) + 20px);transition:box-shadow .3s}
.lg-body>p:first-child+.clause,.lg-body>.clause:first-child{margin-top:0}
.lg-body .clause::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,#1A1F33,#39FF14);opacity:0;transition:opacity .3s}
.lg-body .clause.is-on::before{opacity:1}
.lg-body .clause.is-on{box-shadow:0 26px 50px -30px rgba(0,0,0,0.632),inset 0 0 0 1px rgba(57,255,20,0.14)}
.prose .lg-body .clause h2,.lg-body .clause h2{gap:14px;font-size:1.25rem;color:#EEF2F6}
.lg-body .clause h2::before{width:36px;height:36px;border-radius:12px;background:linear-gradient(145deg,#1A1F33,#39FF14);box-shadow:0 8px 16px -8px rgba(0,0,0,0.69);font-size:.85rem}
.lg-body .clause p,.lg-body .clause li{color:#EEF2F6;line-height:1.75}
.lg-body .clause a{color:#EEF2F6;font-weight:600;text-decoration:underline;text-decoration-color:rgba(57,255,20,0.4);text-underline-offset:3px}
.lg-body .clause a:hover{text-decoration-color:#EEF2F6}
@media (max-width:900px){
  .lg-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .lg-toc,.lg-body{min-width:0}
  .lg-toc{position:static;padding:12px}
  .lg-toc-h{display:none}
  .lg-toc ol{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
  .lg-toc ol::-webkit-scrollbar{display:none}
  .lg-toc a{white-space:nowrap;background:rgba(255,255,255,0.032)}
}
@media (max-width:600px){
  .lg-body .clause{padding:20px}
  .lg-body .clause h2::before{width:30px;height:30px;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){.lg-toc a,.lg-body .clause,.lg-body .clause::before{transition:none}}

/* ---------- review round: model points, Our data, FAQ ---------- */
.points{list-style:none;display:grid;gap:8px;margin-top:4px;padding:0}
.points li{position:relative;padding-left:22px;font-size:.9rem;line-height:1.5;color:#C3CBD5}
.points li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:50%;background:#8B5CF6;box-shadow:0 0 0 3px rgba(139,92,246,0.18)}
.points b{color:#fff;font-weight:700}
.ourdata,.faq{padding-block:clamp(56px,7vw,96px)}
.od-head{max-width:760px;margin-inline:auto;text-align:center}
.od-head h2{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.od-head h2 span{color:#39FF14}
.od-head .lead{max-width:56ch;margin:14px auto 0}
.od-list{list-style:none;padding:0;margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.od-list li{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:var(--r);background:#131A23;border:1px solid rgba(255,255,255,.09)}
.od-list .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#18202B;font-size:1.3rem;line-height:1;margin-bottom:6px}
.od-list b{font-size:1.05rem;color:#EEF2F6;letter-spacing:-.01em}
.od-list small{font-size:.92rem;line-height:1.5;color:#9BA6B4}
.od-credit{text-align:center;margin-top:28px;color:#9BA6B4;font-size:.95rem}
.od-credit a{color:#EEF2F6;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.faq{background:linear-gradient(180deg,#0B0F14,#0F141B)}
.faq-list{max-width:820px;margin:36px auto 0;display:grid;gap:12px}
.faq details{background:#131A23;border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding-block:14px;font-weight:700;color:#EEF2F6;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#18202B;color:#EEF2F6;font-size:1.2rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 18px;color:#9BA6B4;max-width:68ch}
.faq details a{color:#EEF2F6;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.faq summary:focus-visible{outline:3px solid #39FF14;outline-offset:2px;border-radius:12px}
@media (max-width:900px){.od-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.od-list{grid-template-columns:1fr;margin-top:28px}.od-list li{padding:18px}.faq details{padding:0 16px}.faq summary{font-size:.98rem}}

/* ---------- Font Awesome icons (replace emoji) ---------- */
.ic i,.em i,.fs-ic i{font-size:inherit;line-height:1;color:rgb(var(--c,162,71,89))}
.fcard .ic i,.wh-aud .ic i,.t-cover .ic i,.league-chips .em i{color:#C3CBD5}
.od-list .ic i,.ct-side .tile .ic i{color:#EEF2F6}
.wh-pill i,.eb-rot b i{margin-right:.4em;font-size:.9em}
.fs-ic i{color:#EEF2F6}

/* ---------- tighter vertical rhythm (v5.3) ---------- */
:root{--sec:clamp(32px,4.2vw,60px);--sec-s:clamp(20px,2.6vw,36px)}
.devices{padding-block:var(--sec)}
.what{padding-block:var(--sec-s) var(--sec)}
.how{padding-block:clamp(40px,5vw,72px)}
.ourdata{padding-block:var(--sec)}
.faq{padding-block:var(--sec)}
.wh-hero{padding-block:clamp(36px,5vw,64px)}
.wh-hero.ct-hero,.wh-hero.lg-hero{padding-block:clamp(32px,5vw,64px) clamp(16px,3vw,32px)}
.wh-values{padding-block:var(--sec-s) clamp(24px,3.4vw,44px)}
.wh-info{padding-block:12px clamp(40px,5vw,64px)}
.ct-sec,.lg-sec{padding-block:clamp(8px,1.6vw,20px) clamp(40px,5vw,64px)}
.bento{margin-top:clamp(28px,3.4vw,36px)}
.flow{margin-top:clamp(36px,4vw,44px)}
.od-list{margin-top:clamp(24px,3vw,32px)}
.faq-list{margin-top:clamp(24px,3vw,32px)}
.od-credit{margin-top:20px}
.hero-bg{min-height:clamp(520px,calc(100svh - var(--hdr)),880px)}
.admin-bar .hero-bg{min-height:clamp(520px,calc(100svh - var(--hdr) - 32px),880px)}
@media (max-width:900px){.hero-bg{min-height:0}}
.site-footer{padding-top:clamp(40px,5vw,56px)}

/* what now follows the hero directly */
.what{padding-block:var(--sec)}

/* ---------- waitlist (v5.8) ---------- */
.eb-live i{background:#8B5CF6;animation:none}
.wl{margin-top:28px;max-width:620px}
.wl-form{display:block}
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-row{display:flex;gap:10px;align-items:stretch}
.wl-row input[type=email]{flex:1 1 auto;min-width:0;min-height:52px;padding:0 18px;border-radius:14px;border:1.5px solid rgba(255,255,255,0.16);background:#131A23;color:#EEF2F6;font:inherit;font-size:1rem}
.wl-row input[type=email]::placeholder{color:#9BA6B4}
.wl-row input[type=email]:focus{outline:none;border-color:#39FF14;box-shadow:0 0 0 4px rgba(57,255,20,0.18)}
.wl-row .btn{flex:none;cursor:pointer;font:inherit;font-weight:700;font-size:.92rem;white-space:nowrap;padding-inline:16px;gap:6px}
.wl-note{margin-top:10px;font-size:.84rem;line-height:1.5;color:#9BA6B4}
.wl-note a{color:#EEF2F6;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.wl-msg{margin-top:8px;font-size:.92rem;font-weight:600}
.wl-msg:empty{display:none}
.wl-msg.is-ok{color:#39FF14}
.wl-msg.is-bad{color:#EEF2F6}
.waitband{padding-block:var(--sec)}
.wb-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,4vw,44px);border-radius:24px;background:#131A23;border:1px solid rgba(255,255,255,.09);box-shadow:0 24px 48px -32px rgba(0,0,0,0.402)}
.wb-copy h2{font-size:clamp(1.7rem,3.2vw,2.4rem);color:#EEF2F6;letter-spacing:-.03em}
.wb-copy p{margin-top:10px;color:#9BA6B4}
.wb-card .wl{margin-top:0;max-width:none}
@media (max-width:900px){
  .wl{margin-inline:auto}
  .wb-card{grid-template-columns:1fr;text-align:center}
}
@media (max-width:520px){
  .wl-row{flex-direction:column}
  .wl-row .btn{width:100%}
}

.hero-copy .wl{width:100%}

/* ---------- responsible gambling note (v6.0) ---------- */
.foot-rg{margin-top:clamp(20px,3vw,32px);padding:16px 20px;border-radius:14px;background:rgba(243,239,230,.06);border:1px solid rgba(243,239,230,.14);display:grid;gap:6px;font-size:.88rem;line-height:1.6;color:#C3CBD5}
.foot-rg strong{color:#C3CBD5;font-weight:700}
.foot-rg a{color:#C3CBD5;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.foot-rg .nw{white-space:nowrap;font-weight:700;color:#C3CBD5}
@media (max-width:520px){.foot-rg{padding:14px 16px;font-size:.84rem}}

/* Waitlist inside "How it works" (v6.3) */
.how-join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,4vw,48px);align-items:center;margin-top:clamp(28px,4vw,48px);padding:clamp(20px,3vw,32px);border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.hj-copy h3{font-size:clamp(1.4rem,2.6vw,1.9rem);color:#C3CBD5;letter-spacing:-.02em}
.hj-copy p{margin-top:8px;color:#C3CBD5}
.how-join .wl{margin-top:0;max-width:none}
.how-join .wl-note{color:#C3CBD5}
.how-join .wl-note a{color:#fff}
.how-join .wl-msg.is-ok{color:#39FF14}
.how-join .wl-msg.is-bad{color:#8B5CF6}
.how-join .btn{background:#18202B;color:#EEF2F6}
@media (max-width:820px){.how-join{grid-template-columns:1fr;text-align:center}}

/* v6.4: tighter "How it works" (no dead space in cards) */
.how{padding-block:clamp(32px,3.6vw,52px)}
.how-head .lead{margin-top:10px}
.flow{margin-top:clamp(24px,3vw,32px)}
.fcard{padding:24px;gap:10px}
.node{margin-bottom:16px}
.points{gap:6px}
.points li{font-size:.88rem;line-height:1.45}
.conf,.fcard .conf{margin-top:6px}
@keyframes travel2{0%{left:15.2%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:84.8%;opacity:0}}
@media (min-width:901px){
  .flow{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:20px}
  .flow::before{left:15.2%;right:15.2%}
  .flow::after{left:15.2%;animation-name:travel2}
}
.how-join{margin-top:clamp(18px,2.4vw,26px);padding:clamp(16px,2.2vw,24px) clamp(18px,3vw,32px);gap:clamp(16px,3vw,36px)}
.hj-copy h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
.hj-copy p{margin-top:4px;font-size:.95rem}
.how-join .wl-note{margin-top:8px}

/* v6.5: tighter "Our data" */
.ourdata{padding-block:clamp(28px,3.2vw,44px)}
.od-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.od-head .lead{margin-top:8px;font-size:1rem}
.od-list{margin-top:20px;gap:12px}
.od-list li{display:grid;grid-template-columns:40px 1fr;column-gap:12px;row-gap:2px;align-items:center;padding:16px}
.od-list .ic{grid-row:1;width:40px;height:40px;margin:0;font-size:1.15rem}
.od-list b{grid-column:2;grid-row:1;font-size:1rem;line-height:1.25}
.od-list small{grid-column:1/-1;margin-top:6px;font-size:.88rem;line-height:1.45}
.od-credit{margin-top:14px}

/* v6.6: tighter vertical rhythm everywhere */
:root{--sec:clamp(20px,2.4vw,32px);--sec-s:clamp(12px,1.6vw,20px)}
.hero-bg{min-height:clamp(480px,calc(100svh - var(--hdr) - 40px),760px)}
.hero{padding-block:clamp(16px,2.5vh,32px)}
.what .od-head,.what-head{margin-bottom:0}
.how{padding-block:clamp(28px,3vw,44px)}
.dv{gap:clamp(28px,4vw,56px)}
.dv-tabs{margin-top:20px}

/* v6.8: "Coming soon on the App Store" badge (placeholder until the app is live) */
.asb{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:8px 18px 8px 14px;min-height:52px;border-radius:12px;background:#000;color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.asb-logo{width:26px;height:26px;flex:none;fill:#fff}
.asb-t{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.asb-t small{font-size:.7rem;font-weight:500;letter-spacing:.01em;color:#C3CBD5}
.asb-t b{font-size:1.35rem;font-weight:600;letter-spacing:-.01em;margin-top:2px}
@media (max-width:900px){.hero-copy .asb{margin-inline:auto}}

/* v6.9: eyebrow is now just "Picks for <league>" (the App Store badge says "coming soon") */
.eyebrow{padding:7px 16px}

/* v7.0: App Store badge on top of the hero */
.hero-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.hero-top .asb{margin-top:0}
@media (max-width:900px){.hero-top{justify-content:center}}

/* v7.1: compact badge on top, league pill moved under the form */
.hero-copy>.asb{margin:0 0 18px;min-height:44px;padding:6px 16px 6px 12px;gap:9px}
.hero-copy>.asb .asb-logo{width:22px;height:22px}
.hero-copy>.asb .asb-t small{font-size:.66rem}
.hero-copy>.asb .asb-t b{font-size:1.1rem;margin-top:1px}
.eyebrow.eb-end{margin-top:18px}
@media (max-width:900px){.hero-copy>.asb{margin-inline:auto}}

/* v7.2: league pill back on top, badge at the bottom of the hero copy */
.hero-copy>.asb{margin:20px 0 0;min-height:48px;padding:7px 18px 7px 14px}
.hero-copy>.asb .asb-logo{width:24px;height:24px}
.hero-copy>.asb .asb-t small{font-size:.68rem}
.hero-copy>.asb .asb-t b{font-size:1.2rem}
.eyebrow.eb-end{margin-top:0}

/* v7.3: "Choose sport" card is a transparent PNG with its own rounded corners */
.float.notify{background:none;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 22px 26px rgba(0,0,0,0.322)) drop-shadow(0 6px 10px rgba(0,0,0,0.207))}

/* v7.6: Who We Are, company story */
.wh-story{padding-block:var(--sec)}
.wh-story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,3.5vw,48px);align-items:start}
.wh-story-main h2{font-size:clamp(1.9rem,3.6vw,2.7rem);color:#EEF2F6;letter-spacing:-.03em;line-height:1.1}
.wh-story-main h2 span{color:#39FF14}
.wh-story-main .lead{margin-top:14px;font-size:1.15rem;line-height:1.55;color:#EEF2F6}
.wh-story-main p{margin-top:14px;max-width:60ch;color:#9BA6B4;line-height:1.65}
.wh-story-main .lead{max-width:56ch}
.wh-story-side{display:grid;gap:clamp(14px,2vw,20px)}
.wh-story-side .tile p{margin-top:8px}
.wh-story-side .tile p+p{margin-top:10px}
.wh-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.wh-list li{position:relative;padding-left:22px;color:#EEF2F6;line-height:1.45}
.wh-list li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:#39FF14;box-shadow:0 0 0 3px rgba(57,255,20,0.16)}
@media (max-width:900px){.wh-story-grid{grid-template-columns:1fr}}

/* v8.0: compact Who We Are, matches the approved layout (no full-screen hero, no sticky column) */
.wh-hero:not(.ct-hero):not(.lg-hero){padding-block:clamp(20px,3vw,36px)}
.wh-hero.ct-hero,.wh-hero.lg-hero{padding-block:clamp(20px,3vw,40px) clamp(10px,2vw,20px)}
.wh-grid{gap:clamp(24px,4vw,56px)}
.wh-visual{max-width:380px}
.wh-hero h1{font-size:clamp(2.6rem,6vw,4.4rem)}
.wh-lead{font-size:clamp(1.05rem,1.7vw,1.3rem)}
.wh-sub{margin-top:10px}
.wh-hero .cta{margin-top:18px}
.wh-story{padding-block:clamp(20px,2.6vw,36px) clamp(16px,2vw,28px)}
.wh-for{padding-top:0}
.wh-panel{padding:clamp(20px,3.2vw,36px)}
.wh-values{padding-top:clamp(24px,3vw,40px)}
.wh-head .lead{margin-top:8px}
.wh-info{padding-block:12px clamp(24px,3vw,40px)}
.ct-sec,.lg-sec{padding-block:clamp(4px,1vw,12px) clamp(28px,3.4vw,44px)}

/* v8.1: story section restructured, heading left / text right, then two even cards */
.wh-hero:not(.ct-hero):not(.lg-hero){padding-block:clamp(16px,2.4vw,28px)}
.wh-visual{max-width:340px}
.wh-hero h1{font-size:clamp(2.4rem,5.2vw,3.9rem)}
.wh-story-top{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px);align-items:start}
.wh-story-top h2{font-size:clamp(1.9rem,3.6vw,2.7rem);color:#EEF2F6;letter-spacing:-.03em;line-height:1.1}
.wh-story-top h2 span{color:#39FF14}
.wh-story-text .lead{font-size:1.15rem;line-height:1.55;color:#EEF2F6;max-width:62ch}
.wh-story-text p+p{margin-top:12px}
.wh-story-text p:not(.lead){color:#9BA6B4;line-height:1.65;max-width:68ch}
.wh-story-pair{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(14px,2vw,20px);margin-top:clamp(20px,2.6vw,32px);align-items:stretch}
.wh-story-card{padding:clamp(20px,2.6vw,30px);border-radius:22px;background:#131A23;border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 36px -28px rgba(0,0,0,0.402)}
.wh-story-card h3{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:800;letter-spacing:-.02em;color:#EEF2F6}
.wh-story-card h3 i{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#18202B;font-size:1rem;color:#EEF2F6}
.wh-story-card p{margin-top:12px;color:#9BA6B4;line-height:1.6}
.wh-timeline{list-style:none;margin:18px 0 0;padding:0 0 0 18px;display:grid;gap:22px;border-left:2px solid rgba(57,255,20,0.3)}
.wh-timeline li{position:relative;display:grid;gap:4px}
.wh-timeline li::before{content:"";position:absolute;left:-25px;top:.35em;width:12px;height:12px;border-radius:50%;background:#39FF14;box-shadow:0 0 0 4px rgba(57,255,20,0.16)}
.wh-timeline b{font-size:1.05rem;color:#EEF2F6}
.wh-timeline span{color:#9BA6B4;line-height:1.55}
@media (max-width:900px){.wh-story-top,.wh-story-pair{grid-template-columns:1fr}}

.wh-story-card:first-child{display:flex;flex-direction:column}
.wh-leagues{list-style:none;margin:auto 0 0;padding:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.wh-leagues li{padding:6px 14px;border-radius:999px;background:#18202B;border:1px solid rgba(255,255,255,.09);font-size:.82rem;font-weight:700;color:#EEF2F6}

/* v8.4: story text runs to the right edge of the page container */
.wh-story-top{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.wh-story-text .lead,.wh-story-text p:not(.lead){max-width:none}
.wh-story-text{justify-self:stretch}

/* v9.0: team section */
.wh-team{padding-block:clamp(24px,3vw,40px) clamp(24px,3vw,40px)}
.wh-team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:clamp(14px,2vw,20px);margin-top:clamp(20px,2.6vw,32px)}
.wh-member{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:stretch;overflow:hidden;border-radius:26px;background:#131A23;border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 44px -30px rgba(0,0,0,0.46)}
.wh-photo{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:340px;padding:24px 20px 0;background:radial-gradient(70% 60% at 50% 42%,#0F141B 0%,#0F141B 62%,#18202B 100%);overflow:hidden}
.wh-photo::before{content:"";position:absolute;left:50%;top:46%;width:78%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:linear-gradient(160deg,rgba(19,26,35,0.75),rgba(255,255,255,.15));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.wh-photo img{position:relative;width:100%;max-width:340px;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,0.253))}
.wh-bio{display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,3.2vw,40px)}
.wh-bio h3{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.03em;color:#EEF2F6;line-height:1.1}
.wh-role{margin-top:6px;font-size:.95rem;font-weight:700;color:#39FF14}
.wh-bio p:not(.wh-role){margin-top:16px;color:#9BA6B4;line-height:1.65;max-width:56ch}
@media (max-width:760px){.wh-member{grid-template-columns:1fr}.wh-photo{min-height:300px}}

/* v9.1: team cards are photo, name, role (no bio) */
.wh-team-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),300px));justify-content:center}
.wh-member{grid-template-columns:1fr;text-align:center}
.wh-photo{min-height:0;aspect-ratio:1/1.05;padding:20px 16px 0}
.wh-photo img{max-width:300px}
.wh-bio{align-items:center;padding:18px 16px 22px}
.wh-bio h3{font-size:1.35rem}
.wh-role{margin-top:4px}

/* v9.2: four team cards, same frame, heads kept at the top */
.wh-team-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));justify-content:stretch;gap:clamp(12px,1.6vw,20px)}
.wh-photo{aspect-ratio:1/1.08;padding:0}
.wh-photo img{width:100%;max-width:none;height:100%;object-fit:cover;object-position:50% 0}
.wh-photo::before{top:42%;width:74%}

/* v9.3: five team cards fit in one row */
.wh-team-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.wh-bio h3{font-size:clamp(1.05rem,1.5vw,1.25rem)}

/* v9.4: lighter disc behind the app icon */
.wh-disc{background:radial-gradient(circle at 30% 25%,#8B5CF6,#39FF14 58%,#39FF14 100%);box-shadow:0 40px 80px -30px rgba(0,0,0,0.517)}
.wh-disc{background:radial-gradient(circle at 30% 25%,#8B5CF6,#39FF14 50%,#1A1F33 100%);box-shadow:0 40px 80px -30px rgba(0,0,0,0.632)}

/* Who We Are hero visual: phone with floating app cards (real screenshots only) */
.wh-visual{aspect-ratio:auto;width:100%;max-width:520px;justify-self:center}
.wh-stage{position:relative;aspect-ratio:1/1.02;isolation:isolate}
.wh-halo{position:absolute;z-index:-1;left:50%;top:50%;width:84%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 32% 24%,#18202B,#8B5CF6 45%,#39FF14 100%);box-shadow:0 40px 70px -40px rgba(0,0,0,0.575)}
.wh-phone{position:absolute;z-index:2;left:50%;top:50%;width:42%;height:auto;translate:-50% -50%;filter:drop-shadow(0 28px 30px rgba(0,0,0,0.437))}
.wh-fl{position:absolute;z-index:3;height:auto;border-radius:16px;background:#131A23;box-shadow:0 26px 44px -20px rgba(0,0,0,0.575),0 6px 14px -8px rgba(0,0,0,0.287)}
.wh-fl.f-sport{width:46%;right:-2%;top:3%;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 18px 20px rgba(0,0,0,0.345))}
.wh-fl.f-alert{width:46%;right:-4%;bottom:8%;aspect-ratio:882/330;object-fit:cover;object-position:100% 0;rotate:1.5deg}
.wh-fl.f-parlay{width:48%;left:-3%;bottom:20%;aspect-ratio:880/236;object-fit:cover;object-position:0 0;rotate:-2deg}
.wh-spark{position:absolute;fill:#39FF14;opacity:.85}
.wh-spark.s1{width:22px;left:12%;top:16%}
.wh-spark.s2{width:16px;right:10%;bottom:4%}
@media (max-width:900px){.wh-visual{max-width:440px}}
.wh-visual{max-width:600px}
.wh-hero:not(.ct-hero):not(.lg-hero) .wh-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.wh-phone{width:46%}
.wh-fl.f-sport{width:52%;right:-3%;top:2%}
.wh-fl.f-alert{width:56%;right:-5%;bottom:6%;aspect-ratio:882/360}
.wh-fl.f-parlay{width:56%;left:-5%;bottom:18%;aspect-ratio:880/262}
.wh-spark.s1{width:26px}

/* Team section: editorial header (label + headline left, text + button right), photo cards with name and role below */
.wh-team-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:end}
.wh-team-head h2{font-size:clamp(2rem,4vw,3.1rem);font-weight:700;letter-spacing:-.035em;line-height:1.08;color:#EEF2F6;max-width:16ch}
.wh-lbl{display:block;margin-bottom:10px;font-size:.95rem;font-weight:500;letter-spacing:0;color:#9BA6B4}
.wh-team-aside p{color:#9BA6B4;line-height:1.6;max-width:42ch}
.wh-team-aside .btn{margin-top:18px;min-height:46px}
.wh-member{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible;text-align:left}
.wh-photo{border-radius:24px;aspect-ratio:4/5;background:radial-gradient(80% 60% at 50% 38%,#0F141B 0%,#0F141B 60%,#18202B 100%)}
.wh-photo::before{display:none}
.wh-bio{align-items:flex-start;padding:16px 2px 0}
.wh-bio h3{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:600;letter-spacing:-.02em;color:#EEF2F6}
.wh-role{margin-top:4px;font-size:.92rem;font-weight:500;color:#9BA6B4}
@media (max-width:760px){.wh-team-head{grid-template-columns:1fr}}
.wh-team-grid{margin-top:clamp(28px,3.4vw,44px)}

/* team: two-tone text from the theme (maroon + rose) instead of black */
.wh-team-head h2{color:#EEF2F6}
.wh-team-head h2 .wh-ac{background:linear-gradient(100deg,#39FF14 20%,#8B5CF6 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wh-lbl{color:#39FF14;font-weight:600}
.wh-bio h3{color:#EEF2F6}
.wh-role{color:#39FF14;font-weight:600}

/* Who We Are hero: single illustration (cutout PNG converted to WebP) */
.wh-visual{aspect-ratio:auto;max-width:640px;width:100%;justify-self:center}
.wh-art{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,0.322))}
.wh-hero:not(.ct-hero):not(.lg-hero) .wh-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
/* bigger Who We Are illustration */
.wh-hero:not(.ct-hero):not(.lg-hero) .wh-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.wh-visual{max-width:none;overflow:visible}
.wh-art{width:118%;max-width:none;margin:-5% -9% -5% -9%}
@media (max-width:900px){.wh-art{width:112%;margin:-4% -6%}}
@media (max-width:900px){.wh-hero:not(.ct-hero):not(.lg-hero) .wh-grid{grid-template-columns:1fr}.wh-visual{max-width:420px;margin-inline:auto;overflow:hidden}.wh-art{width:100%;margin:0}}
@media (max-width:900px){.wh-story-top,.wh-story-pair{grid-template-columns:1fr}}
/* space between the menu and the Who We Are banner */
.wh-hero:not(.ct-hero):not(.lg-hero){padding-top:clamp(28px,4vw,56px)}
.wh-art{margin-top:-2%}

/* Who We Are: roomier vertical rhythm between all sections */
.wh-hero:not(.ct-hero):not(.lg-hero){padding-bottom:clamp(32px,4.4vw,64px)}
.wh-story{padding-block:clamp(40px,5.4vw,80px) clamp(24px,3vw,40px)}
.wh-story-pair{margin-top:clamp(32px,4vw,56px);gap:clamp(18px,2.4vw,28px)}
.wh-story-top{gap:clamp(24px,4vw,64px)}
.wh-story-text p+p{margin-top:16px}
.wh-team{padding-block:clamp(48px,6vw,96px) clamp(24px,3vw,40px)}
.wh-team-grid{margin-top:clamp(36px,4.4vw,60px);gap:clamp(16px,2vw,28px)}
.wh-for{padding-block:clamp(32px,4vw,56px) 0}
.wh-panel{padding:clamp(28px,4.2vw,52px)}
.wh-values{padding-top:clamp(48px,6vw,96px)}
.wh-head .lead{margin-top:12px}
.wh-cards{margin-top:clamp(28px,3.4vw,44px);gap:clamp(16px,2vw,24px)}
.wh-info{padding-block:clamp(20px,2.6vw,32px) clamp(56px,7vw,104px)}
.wh-info-grid{gap:clamp(16px,2vw,24px)}

/* Who We Are hero: taller, vertically centred, larger text */
@media (min-width:901px){
  .wh-hero:not(.ct-hero):not(.lg-hero){min-height:calc(100svh - var(--hdr,76px));display:grid;align-items:center;padding-block:clamp(32px,5vh,72px)}
  .wh-hero:not(.ct-hero):not(.lg-hero)>.wrap{width:100%}
  .wh-hero:not(.ct-hero):not(.lg-hero) h1{font-size:clamp(3rem,6.2vw,5.2rem)}
  .wh-hero:not(.ct-hero):not(.lg-hero) .wh-lead{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.45}
  .wh-hero:not(.ct-hero):not(.lg-hero) .wh-sub{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.6}
  .wh-hero:not(.ct-hero):not(.lg-hero) .wh-pill{font-size:.95rem}
  .wh-hero:not(.ct-hero):not(.lg-hero) .cta{margin-top:26px}
  .wh-hero:not(.ct-hero):not(.lg-hero) .cta .btn{min-height:56px;font-size:1.05rem}
}
@media (min-width:901px){
  .wh-hero:not(.ct-hero):not(.lg-hero) .wh-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .wh-hero:not(.ct-hero):not(.lg-hero) h1{font-size:clamp(2.8rem,5.4vw,4.6rem);white-space:nowrap}
  .wh-hero:not(.ct-hero):not(.lg-hero) .wh-lead{font-size:clamp(1.15rem,1.6vw,1.4rem)}
  .wh-art{width:112%;margin:-4% -8%}
}
@media (min-width:901px){.wh-art{width:134%;margin:-6% -17%}}
@media (min-width:901px){.wh-art{width:142%;margin:-6% -21% -6% -17%}}

/* Who We Are hero: at-a-glance facts under the buttons, balanced with the picture */
.wh-facts{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.wh-facts li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(19,26,35,0.75);border:1px solid rgba(255,255,255,.09);font-size:.9rem;font-weight:600;color:#EEF2F6}
.wh-facts i{color:#39FF14}
@media (min-width:901px){
  .wh-hero:not(.ct-hero):not(.lg-hero) .wh-grid{align-items:center}
  .wh-art{width:124%;margin:0 -12% 0 -10%}
}
@media (max-width:900px){.wh-facts{justify-content:center}}
@media (min-width:901px){.wh-art{width:136%;margin:0 -18% 0 -14%}.wh-facts{max-width:560px}}

/* Who We Are hero: equal side margins (picture stays inside the page width), less gap to the next section */
@media (min-width:901px){
  .wh-hero:not(.ct-hero):not(.lg-hero){min-height:0;padding-block:clamp(40px,4.4vw,64px) clamp(20px,2.4vw,32px)}
  .wh-visual{overflow:visible}
  .wh-art{width:116%;margin:0 0 0 -16%}
}
.wh-story{padding-top:clamp(24px,3vw,40px)}

/* ==================================================================
 * Contact form submit sequence
 * 1. button morphs into a circle, label lifts away, paper plane launches
 * 2. ring spins while the message is sent in the background
 * 3. success: circle turns cream, check draws in with overshoot, ripple
 * 4. form folds away, success card rises in with a particle burst
 * ================================================================== */
.ct-f .fsubmit{display:flex;position:relative;isolation:isolate;overflow:visible;margin-inline:auto;transition:width .5s cubic-bezier(.65,0,.35,1),border-radius .5s cubic-bezier(.65,0,.35,1),padding .5s,background .35s,box-shadow .35s,transform .2s}
.ct-f .fsubmit:active{transform:scale(.98)}
.fs-label{display:inline-block;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.3,1)}
.fsubmit .fs-arrow{transition:opacity .2s,transform .3s}
.fsubmit:hover .fs-arrow{transform:translateX(3px)}
.fsubmit .fs-plane,.fsubmit .fs-ring,.fsubmit .fs-tick{position:absolute;left:50%;top:50%;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fsubmit .fs-plane{width:22px;height:22px;margin:-11px 0 0 -11px;stroke:#fff;stroke-width:2;opacity:0}
.fsubmit .fs-ring{width:64px;height:64px;margin:-32px 0 0 -32px;opacity:0}
.fs-ring circle{stroke:rgba(255,255,255,.95);stroke-width:2.5;stroke-dasharray:46 200;transform-origin:50% 50%}
.fsubmit .fs-tick{width:26px;height:26px;margin:-13px 0 0 -13px;stroke:#EEF2F6;stroke-width:3;stroke-dasharray:24;stroke-dashoffset:24;opacity:0}

/* 1-2. sending */
.ct-f.is-sending .fsubmit{width:58px;min-height:58px;height:58px;padding:0;border-radius:50%;cursor:progress}
.ct-f.is-sending .fs-label{opacity:0;transform:translateY(-16px)}
.ct-f.is-sending .fs-arrow{opacity:0;transform:translateX(12px)}
.ct-f.is-sending .fs-plane{animation:ss-plane 1.1s .25s cubic-bezier(.5,0,.2,1) both}
.ct-f.is-sending .fs-ring{opacity:1;transition:opacity .3s .55s}
.ct-f.is-sending .fs-ring circle{animation:ss-ring .9s linear infinite}
.ct-f.is-sending .fgroup,.ct-f.is-sending .frow,.ct-f.is-sending .fnote{opacity:.55;filter:blur(.4px);pointer-events:none;transition:opacity .35s,filter .35s}
@keyframes ss-plane{
  0%{opacity:0;transform:translate(0,14px) scale(.6) rotate(0)}
  30%{opacity:1;transform:translate(0,0) scale(1) rotate(-8deg)}
  45%{opacity:1;transform:translate(-3px,3px) scale(1) rotate(-12deg)}
  100%{opacity:0;transform:translate(90px,-70px) scale(.5) rotate(18deg)}
}
@keyframes ss-ring{to{transform:rotate(360deg)}}

/* 3. success on the button */
.ct-f.is-done .fsubmit{background:#18202B;box-shadow:0 0 0 0 rgba(139,92,246,0.6);animation:ss-ripple 1s ease-out .1s}
.ct-f.is-done .fs-ring{opacity:0;transition:opacity .2s}
.ct-f.is-done .fs-tick{opacity:1;animation:ss-tick .45s .1s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes ss-tick{0%{stroke-dashoffset:24;transform:scale(.6)}60%{transform:scale(1.18)}100%{stroke-dashoffset:0;transform:scale(1)}}
@keyframes ss-ripple{to{box-shadow:0 0 0 22px rgba(139,92,246,0)}}

/* failed: shake back to full width */
.ct-f.is-failed .fsubmit{animation:ss-shake .45s ease-in-out}

/* 4. form folds away */
.ct-f.is-leaving{opacity:0;transform:translateY(-10px) scale(.98);filter:blur(4px);transition:opacity .35s,transform .35s,filter .35s}

/* success card */
.ct-done{position:relative;display:grid;justify-items:center;align-content:center;text-align:center;gap:10px;margin-top:24px;padding:clamp(32px,4.4vw,52px) 22px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.18);overflow:hidden;animation:ss-card .6s cubic-bezier(.2,.8,.3,1) both}
.ct-done::before{content:"";position:absolute;inset:-40%;z-index:-1;background:conic-gradient(from 0deg,transparent 0 70%,rgba(139,92,246,0.28) 82%,transparent 94%);animation:ss-sweep 2.4s .3s ease-out both}
.ct-badge{position:relative;display:grid;place-items:center;width:88px;height:88px;margin-bottom:8px}
.ct-badge::before,.ct-badge::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(57,255,20,0.55);animation:ss-wave 1.6s .55s ease-out both}
.ct-badge::after{animation-delay:.8s}
.ct-done .ct-check{position:relative;width:88px;height:88px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ct-check .bg{fill:#C3CBD5;transform-origin:50% 50%;animation:ss-pop .5s .15s cubic-bezier(.3,1.6,.5,1) both}
.ct-check path{stroke:#EEF2F6;stroke-width:4;stroke-dasharray:36;stroke-dashoffset:36;animation:ss-draw .4s .55s ease-out forwards}
.ct-burst{position:absolute;left:50%;top:50%;width:0;height:0}
.ct-burst i{position:absolute;left:0;top:0;width:var(--s,7px);height:var(--s,7px);margin:calc(var(--s,7px)/-2);border-radius:50%;background:var(--c,#8B5CF6);opacity:0;animation:ss-burst .9s .5s cubic-bezier(.15,.7,.3,1) forwards}
.ct-burst i.sq{border-radius:2px}
.ct-done h3{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;letter-spacing:-.03em;color:#C3CBD5;animation:ss-rise .5s .8s both}
.ct-done p{color:#C3CBD5;max-width:36ch;line-height:1.6;animation:ss-rise .5s .92s both}
.ct-again{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#C3CBD5;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s;animation:ss-rise .5s 1.04s both}
.ct-again:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.ct-again:focus-visible{outline:3px solid #39FF14;outline-offset:2px}
.ct-form:has(.ct-done){display:flex;flex-direction:column}
.ct-form:has(.ct-done) .ct-done{flex:1}
@keyframes ss-card{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ss-sweep{from{transform:rotate(-90deg);opacity:1}to{transform:rotate(270deg);opacity:0}}
@keyframes ss-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes ss-draw{to{stroke-dashoffset:0}}
@keyframes ss-wave{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}
@keyframes ss-burst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.4) rotate(var(--r,0deg))}}
@keyframes ss-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.ct-form .notice.err{animation:ss-shake .45s ease-in-out}
@keyframes ss-shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

@media (prefers-reduced-motion:reduce){
  .ct-f .fsubmit,.fs-label,.ct-f.is-leaving{transition:none}
  .ct-f.is-sending .fs-plane,.ct-f.is-sending .fs-ring circle,.ct-f.is-done .fsubmit,.ct-f.is-failed .fsubmit,
  .ct-done,.ct-done::before,.ct-badge::before,.ct-badge::after,.ct-check .bg,.ct-burst i,.ct-done h3,.ct-done p,.ct-again,.ct-form .notice.err{animation:none}
  .ct-f.is-done .fs-tick,.ct-check path{animation:none;stroke-dashoffset:0}
  .ct-badge::before,.ct-badge::after,.ct-burst,.ct-done::before{display:none}
}
.ct-done:focus{outline:none}
.ct-f.is-sending .fsubmit,.ct-f.is-sending .fsubmit:hover{transform:none;gap:0}
.ct-f.is-sending .fs-label,.ct-f.is-sending .fs-arrow{position:absolute}
.ct-f.is-done .fsubmit,.ct-f.is-done .fsubmit:hover{width:58px;height:58px;min-height:58px;padding:0;border-radius:50%;gap:0;transform:none}

/* Send message button: solid theme rose with white text (old light pink was about 2.4:1, this is over 5:1) */
.ct-form .fsubmit{background:linear-gradient(135deg,#39FF14,#8B5CF6);color:#fff;font-weight:700;letter-spacing:.01em;box-shadow:0 16px 30px -14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.ct-form .fsubmit:hover{background:linear-gradient(135deg,#39FF14,#39FF14);color:#fff;box-shadow:0 22px 34px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22)}
.ct-form .fsubmit:focus-visible{outline:3px solid rgba(57,255,20,0.45);outline-offset:3px}
.ct-form .ct-f.is-sending .fsubmit,.ct-form .ct-f.is-sending .fsubmit:hover{background:#39FF14}
.ct-form .ct-f.is-done .fsubmit,.ct-form .ct-f.is-done .fsubmit:hover{background:#18202B}
/* ==================================================================
 * Waitlist button: label lifts away, a paper plane flies through the
 * button while the email is sent, then "You are on the list" with a tick
 * ================================================================== */
.wl-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-grid !important;grid-template-areas:"l";align-items:center;justify-items:center}
.wl-btn .wl-l{grid-area:l;display:inline-flex;align-items:center;gap:6px;transition:transform .45s cubic-bezier(.2,.8,.3,1),opacity .3s}
.wl-l2{opacity:0;transform:translateY(130%)}
.wl-tick{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
.wl-fly{position:absolute;left:0;top:50%;width:20px;height:20px;margin-top:-10px;opacity:0;pointer-events:none}
.wl-plane{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wl-fly::before{content:"";position:absolute;right:16px;top:12px;width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,currentColor);opacity:.5}

/* sending: label lifts out, plane loops through the button with a short trail */
.wl-form.is-sending .wl-btn{cursor:progress}
.wl-form.is-sending .wl-l1{opacity:0;transform:translateY(-130%)}
.wl-form.is-sending .wl-fly{animation:wl-fly 1.1s .15s cubic-bezier(.4,0,.3,1) infinite}
.wl-form.is-sending input[type=email]{opacity:.7}
@keyframes wl-fly{
  0%{opacity:0;transform:translateX(-24px) translateY(8px) rotate(10deg)}
  15%{opacity:1}
  55%{transform:translateX(calc(var(--bw,180px)*.55)) translateY(-3px) rotate(-6deg)}
  85%{opacity:1}
  100%{opacity:0;transform:translateX(calc(var(--bw,180px) + 10px)) translateY(-16px) rotate(-14deg)}
}
/* joined: success label slides up, tick draws */
.wl-form.is-joined .wl-l1{opacity:0;transform:translateY(-130%)}
.wl-form.is-joined .wl-l2{opacity:1;transform:none}
.wl-form.is-joined .wl-tick{animation:wl-draw .35s .25s ease-out forwards}
.wl-form.is-joined .wl-btn{cursor:default;animation:wl-pop .45s cubic-bezier(.3,1.5,.5,1)}
.wl-form.is-joined input[type=email]{opacity:.75}
@keyframes wl-draw{to{stroke-dashoffset:0}}
@keyframes wl-pop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:none}}

/* failed: shake, label comes back */
.wl-form.is-failed .wl-btn{animation:ss-shake .45s ease-in-out}
.wl-msg{transition:opacity .25s}

@media (prefers-reduced-motion:reduce){
  .wl-btn .wl-l{transition:none}
  .wl-form.is-sending .wl-fly,.wl-form.is-joined .wl-btn,.wl-form.is-failed .wl-btn{animation:none}
  .wl-form.is-joined .wl-tick{animation:none;stroke-dashoffset:0}
}

/* the other waitlist form joins quietly (no pop), the label simply shows the success state */
.wl-form.is-synced .wl-btn{animation:none}
.wl-form.is-synced .wl-tick{animation:none;stroke-dashoffset:0}

/* ==================================================================
 * Pop-up alerts (toasts)
 * ================================================================== */
.ss-toasts{position:fixed;z-index:9999;top:calc(var(--hdr,76px) + 14px);right:max(16px,calc((100vw - var(--max,1180px))/2));display:grid;gap:10px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.ss-toast{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:12px;padding:14px 12px 16px 14px;border-radius:16px;background:#131A23;color:#EEF2F6;border:1px solid rgba(255,255,255,.09);box-shadow:0 24px 48px -20px rgba(0,0,0,0.517),0 6px 14px -8px rgba(0,0,0,0.287);pointer-events:auto;animation:ss-toast-in .45s cubic-bezier(.2,.9,.3,1.2) both}
.ss-toast p{margin:2px 0 0;font-size:.94rem;font-weight:600;line-height:1.45}
.ss-toast-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%}
.ss-toast-ic svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.ss-toast.is-error .ss-toast-ic{background:#39FF14;box-shadow:0 0 0 5px rgba(57,255,20,0.12)}
.ss-toast.is-ok .ss-toast-ic{background:#39FF14;box-shadow:0 0 0 5px rgba(57,255,20,.12)}
.ss-toast.is-error{border-left:4px solid #39FF14}
.ss-toast.is-ok{border-left:4px solid #39FF14}
.ss-toast-x{display:grid;place-items:center;width:28px;height:28px;margin:-2px -2px 0 0;border:0;border-radius:8px;background:transparent;color:#9BA6B4;font-size:1.3rem;line-height:1;cursor:pointer}
.ss-toast-x:hover{background:#18202B;color:#EEF2F6}
.ss-toast-x:focus-visible{outline:3px solid #39FF14;outline-offset:1px}
.ss-toast-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;background:currentColor;opacity:.18;animation:ss-toast-bar var(--ms,6000ms) linear forwards}
.ss-toast.is-error .ss-toast-bar{color:#39FF14}
.ss-toast.is-ok .ss-toast-bar{color:#39FF14}
.ss-toast.is-paused .ss-toast-bar{animation-play-state:paused}
.ss-toast.is-out{animation:ss-toast-out .3s ease-in forwards}
@keyframes ss-toast-in{from{opacity:0;transform:translateX(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ss-toast-out{to{opacity:0;transform:translateX(24px) scale(.96)}}
@keyframes ss-toast-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (max-width:600px){
  .ss-toasts{top:auto;bottom:16px;right:16px;left:16px;width:auto}
  @keyframes ss-toast-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  @keyframes ss-toast-out{to{opacity:0;transform:translateY(20px)}}
}
@media (prefers-reduced-motion:reduce){.ss-toast,.ss-toast.is-out{animation:none}.ss-toast-bar{animation:none;display:none}}

/* ==================================================================
 * Who We Are hero: centred, type-led (no side visual).
 * Large display type with tight tracking, one clear reading line,
 * actions underneath. Tracking/leading tuned per size.
 * ================================================================== */
.wh-hero.wh-hero--center:not(.ct-hero):not(.lg-hero){min-height:0;display:block;padding-block:clamp(56px,7vw,104px) clamp(40px,5vw,72px);text-align:center;
  background:radial-gradient(60% 70% at 50% 0%,rgba(139,92,246,0.14),transparent 70%),linear-gradient(180deg,#0B0F14 0%,#0F141B 100%)}
.wh-hero--center::before{-webkit-mask-image:radial-gradient(60% 70% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(60% 70% at 50% 30%,#000,transparent 75%)}
.wh-hero.wh-hero--center:not(.ct-hero) .wh-grid{display:block}
.wh-hero.wh-hero--center:not(.ct-hero) .wh-copy{max-width:860px;margin-inline:auto}
.wh-hero.wh-hero--center:not(.ct-hero) .wh-pill{margin-inline:auto}
.wh-hero.wh-hero--center:not(.ct-hero) h1{margin-top:18px;font-size:clamp(3rem,8vw,6.2rem);line-height:.98;letter-spacing:-.045em;white-space:normal}
.wh-hero.wh-hero--center:not(.ct-hero) .wh-lead{max-width:36ch;margin:22px auto 0;font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.35;letter-spacing:-.012em;font-weight:600;color:#EEF2F6}
.wh-hero.wh-hero--center:not(.ct-hero) .wh-sub{max-width:52ch;margin:14px auto 0;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.6;letter-spacing:0;color:#9BA6B4}
.wh-hero.wh-hero--center:not(.ct-hero) .cta{justify-content:center;margin-top:30px}
.wh-hero.wh-hero--center:not(.ct-hero) .cta .btn:active{transform:scale(.97);transition:transform .1s ease-out}
@media (max-width:600px){.wh-hero.wh-hero--center:not(.ct-hero):not(.lg-hero){padding-block:40px 32px}.wh-hero.wh-hero--center:not(.ct-hero) .cta{flex-direction:column}}
/* centred hero: use the page width, fewer and longer lines */
.wh-hero.wh-hero--center:not(.ct-hero):not(.lg-hero){padding-block:clamp(36px,5vw,72px) clamp(32px,4vw,56px)}
.wh-hero.wh-hero--center:not(.ct-hero) .wh-copy{max-width:1040px}
.wh-hero.wh-hero--center:not(.ct-hero) h1{margin-top:14px}
.wh-hero.wh-hero--center:not(.ct-hero) .wh-lead{max-width:44ch;margin-top:18px}
.wh-hero.wh-hero--center:not(.ct-hero) .wh-sub{max-width:68ch}
.wh-hero.wh-hero--center:not(.ct-hero) .cta{margin-top:26px}
.wh-hero.wh-hero--center:not(.ct-hero) .wh-lead,.wh-hero.wh-hero--center:not(.ct-hero) .wh-sub{text-wrap:balance}.wh-hero.wh-hero--center:not(.ct-hero) .wh-lead{max-width:52ch}

/* ==================================================================
 * Contact Us: split layout. Left: title, one line, ways to reach us.
 * Right: the form. Both visible on the first screen.
 * ================================================================== */
.ct-sec.ct-split{padding-block:clamp(36px,4.6vw,72px) clamp(48px,6vw,96px);background:radial-gradient(50% 60% at 15% 10%,rgba(139,92,246,0.12),transparent 70%),linear-gradient(180deg,#0B0F14 0%,#0F141B 100%)}
.ct-split-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.ct-intro{padding-top:clamp(4px,1vw,16px)}
.ct-intro h1{margin-top:16px;font-size:clamp(2.6rem,5.4vw,4.4rem);font-weight:800;line-height:1;letter-spacing:-.04em;color:#EEF2F6}
.ct-intro h1 span{color:#39FF14;background:linear-gradient(100deg,#39FF14 30%,#8B5CF6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ct-lead{margin-top:16px;max-width:40ch;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.55;color:#9BA6B4}
.ct-split .ct-ways{display:grid;grid-template-columns:1fr;gap:0;max-width:440px;margin:clamp(24px,3vw,36px) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.09)}
.ct-split .ct-ways li{display:grid;grid-template-columns:44px 1fr;column-gap:16px;row-gap:3px;align-items:start;text-align:left;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.ct-split .ct-ways-ic{grid-row:span 3;margin:0}
.ct-split .ct-ways h3{font-size:1.02rem;margin-top:2px}
.ct-split .ct-ways p,.ct-split .ct-ways address{max-width:none;font-size:.94rem;text-wrap:pretty}
.ct-split .ct-ways .ct-mail{justify-self:start;align-self:start}
.ct-split .ct-form{max-width:none;margin:0}
@media (max-width:900px){.ct-split-grid{grid-template-columns:1fr}.ct-intro{text-align:center}.ct-intro .wh-pill{margin-inline:auto}.ct-lead{margin-inline:auto}.ct-split .ct-ways{margin-inline:auto}}
.ct-split .ct-ways{list-style:none}
.ct-split .ct-ways-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,#0F141B,#0F141B);color:#EEF2F6;font-size:1.05rem}
.ct-split .ct-ways h3{font-weight:700;letter-spacing:-.01em;color:#EEF2F6}
.ct-split .ct-ways p{color:#9BA6B4;line-height:1.55}
.ct-split .ct-ways address{font-style:normal;color:#EEF2F6;line-height:1.6}
.ct-split .ct-ways .ct-mail{margin-top:4px}
@media (max-width:900px){
  .ct-split-grid{display:flex;flex-direction:column;gap:0}
  .ct-intro{display:contents}
  .ct-intro>.wh-pill{order:1;align-self:center}
  .ct-intro>h1{order:2}
  .ct-intro>.ct-lead{order:3}
  .ct-split .ct-form{order:4;margin-top:24px;width:100%}
  .ct-split .ct-ways{order:5;width:100%;max-width:520px;align-self:center;margin-top:36px}
  .ct-intro>h1,.ct-intro>.ct-lead{text-align:center}
}
@media (max-width:900px){.ct-intro>h1{align-self:center}}
/* selected topic: white icon on the maroon tile (was maroon on maroon) */
.fs-list li.is-sel .fs-ic i{color:#fff}

/* Responsive fix: keep the "Choose sport" hero card inside the screen on 900-1200px windows */
@media (min-width:901px) and (max-width:1200px){
  .float.notify{width:calc(var(--sh)*.27);left:auto;right:-2%}
}
@media (min-width:901px) and (max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,3vw,48px)}
  .stage{--sh:clamp(440px,52vw,560px)}
}

/* Phones: show the "Choose sport" card (top right of the phone mockup) */
@media (max-width:600px){
  .float.notify{display:block;width:calc(var(--sh)*.42);left:auto;right:-1%;top:4%}
}
@media (max-width:380px){.float.notify{width:calc(var(--sh)*.4);right:-2%}}

/* Phones: the two floating cards sit side by side under the phone, never over its screen or each other */
@media (max-width:600px){
  .stage{height:calc(var(--sh) + 215px)}
  .stage .orbit{top:calc(var(--sh)*.5)}
  .stage .phone-wrap{top:calc(var(--sh)*.5)}
  .stage .floor{top:calc(var(--sh)*.5 + var(--sh)*.4)}
  .stage .phone-dots{bottom:auto;top:calc(var(--sh)*.94)}
  .float.notify,.float.pick{top:auto;bottom:0;animation:none;transform:none}
  .float.pick{width:34%;right:auto;left:2%;rotate:-2deg}
  .float.notify{width:54%;left:auto;right:2%;rotate:2deg}
}
/* Phones: maroon circle and glow follow the phone (they were tied to the taller stage) */
@media (max-width:600px){
  .stage::before,.stage::after{top:calc(var(--sh)*.5)}
}
/* Phones: larger phone mockup, everything (circle, ring, glow) scales with it */
@media (max-width:600px){
  .stage{--sh:min(136vw,540px);--tilt:-6deg}
  .stage::before{width:min(96%,calc(var(--sh)*.72))}
}

/* "info" popup: calm rose, used for "you have already requested" */
.ss-toast.is-info{border-left:4px solid #39FF14}
.ss-toast.is-info .ss-toast-ic{background:#39FF14;box-shadow:0 0 0 5px rgba(57,255,20,0.14)}
.ss-toast.is-info .ss-toast-bar{color:#39FF14}
/* Waitlist: stack email + button on every phone/small-tablet width (a global full-width .btn rule squeezed the email box at 520-600px) */
@media (max-width:640px){
  .wl-row{flex-direction:column}
  .wl-row input[type=email]{width:100%;flex:none}
  .wl-row .btn{width:100%;flex:none}
}
@media (min-width:641px){.wl-row .btn{width:auto}}

/* "Our pick" hero card is a transparent PNG/WebP with its own rounded corners (like the Choose sport card) */
.float.pick{background:none;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 22px 26px rgba(0,0,0,0.322)) drop-shadow(0 6px 10px rgba(0,0,0,0.207))}

/* ==================================================================
 * Track record card: compact. Record per market, plus the app's own
 * "Our pick missed" / "Our pick hit" notifications as proof.
 * ================================================================== */
.tile.t-record{display:flex;flex-direction:column;gap:14px}
.t-record .tx{max-width:none}
.t-record .shot{position:static;width:100%;max-width:400px;margin:auto auto 0;transform:none;transition:none}
.t-record .shot img{width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,0.207))}
.t-record:hover .shot{transform:none}
.rec-mini{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.rec-mini li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:11px;background:rgba(var(--c),.08)}
.rec-mini span{font-size:.88rem;font-weight:600;color:#9BA6B4}
.rec-mini b{font-size:1rem;font-weight:800;letter-spacing:-.01em;color:#EEF2F6;font-variant-numeric:tabular-nums;white-space:nowrap}
.rec-mini b.is-low{color:#39FF14}
.t-record .rec-cap{margin-top:8px;font-size:.8rem;line-height:1.45;color:#9BA6B4}
/* Player props: larger phone so the shorter neighbour does not leave a blank tile */
@media (min-width:901px){.t-props .shot{width:min(46%,250px);top:22px;right:7%}}
@media (min-width:901px){
  .t-props .shot{width:min(60%,330px);top:18px;right:5%}
  .t-props .tx{max-width:42%}
}

/* track record: compact, no image */
.tile.t-record{justify-content:center}
.t-record .rec-mini{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.t-record .rec-mini li{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px}
.t-record .rec-mini span{font-size:.78rem}
.t-record .rec-mini b{font-size:.95rem}
@media (max-width:420px){.t-record .rec-mini{grid-template-columns:1fr}.t-record .rec-mini li{flex-direction:row;align-items:baseline}}
@media (max-width:900px){.tile.t-record{padding-bottom:24px}}
.rec-proof{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.rec-proof img{width:100%;height:auto;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.138)}
@media (max-width:420px){.rec-proof{grid-template-columns:1fr}.rec-proof img{max-width:300px}}


/* record section */
.recsec{padding-block:clamp(32px,4.5vw,60px)}
.recsec-card{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:clamp(16px,4vw,56px);padding:clamp(28px,4.5vw,56px) clamp(24px,4.5vw,64px);border-radius:32px;background:linear-gradient(135deg,#0B0F14 0%,#0F141B 100%);border:1px solid rgba(255,255,255,0.08);box-shadow:0 30px 60px -30px rgba(0,0,0,0.287)}
.recsec-card::before{content:"";position:absolute;z-index:-1;right:-6%;top:50%;width:min(60%,520px);aspect-ratio:1;translate:0 -50%;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,0.3),rgba(139,92,246,0.08) 62%,transparent 70%)}
.recsec-tx h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 12px}
.recsec-tx h2 span{color:#39FF14}
.recsec-tx .lead{margin:0;max-width:40ch}
.rs-list{list-style:none;margin:22px 0 0;padding:0;max-width:420px}
.rs-list li{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:14px;padding:12px 0;border-top:1px solid rgba(255,255,255,0.12)}
.rs-list li:last-child{border-bottom:1px solid rgba(255,255,255,0.12)}
.rs-list span{font-weight:600;color:#9BA6B4}
.rs-list b{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:#EEF2F6;font-variant-numeric:tabular-nums}
.rs-list em{grid-column:1/-1;justify-self:end;margin-top:2px;font-style:normal;font-size:.78rem;font-weight:600;color:#39FF14}
.rs-cap{margin:10px 0 0;font-size:.8rem;color:#9BA6B4}
.recsec-ph{position:relative;height:clamp(380px,40vw,520px)}
.recsec-ph img{position:absolute;height:auto;filter:drop-shadow(0 26px 28px rgba(0,0,0,0.322))}
.rp-back{width:min(44%,230px);left:6%;top:6%;transform:rotate(-5deg)}
.rp-front{width:min(52%,270px);right:6%;top:0;transform:rotate(3deg)}
@media (max-width:820px){.recsec-card{grid-template-columns:1fr}.recsec-tx .lead{max-width:none}.rs-list{max-width:none}.recsec-ph{height:clamp(340px,92vw,470px)}.rp-back{left:4%;top:8%;width:42%}.rp-front{right:4%;width:50%}}
@media (min-width:821px){.recsec-card{padding-block:clamp(24px,3vw,40px)}.recsec-ph{height:clamp(400px,38vw,500px)}.rp-back{width:min(50%,270px);left:0;top:12%}.rp-front{width:min(58%,310px);right:2%;top:0}}
/* record section: tighter */
.recsec{padding-block:clamp(8px,1.5vw,20px)}
.recsec-card{gap:clamp(8px,2vw,28px);padding:clamp(20px,2.4vw,32px) clamp(22px,3.5vw,48px)}
.recsec-tx h2{margin-bottom:8px}
.rs-list{margin-top:14px}
.rs-list li{padding:8px 0}
.rs-cap{margin-top:8px}
@media (min-width:821px){.recsec-ph{height:clamp(360px,32vw,430px)}.rp-back{width:min(52%,260px);top:14%;left:2%}.rp-front{width:min(60%,300px);right:0;top:0}}
@media (max-width:820px){.recsec-ph{height:clamp(280px,78vw,380px)}.rp-back{top:4%}}
.recsec{padding-bottom:clamp(24px,3vw,40px)}
@media (min-width:821px){.recsec-ph{height:clamp(400px,34vw,470px)}.rp-back{width:min(46%,230px);top:16%;left:4%}.rp-front{width:min(54%,265px);right:2%}}
@media (max-width:820px){.recsec-ph{height:clamp(270px,76vw,340px)}}

/* leagues strip: full width, coming soon row */
.t-cover .league-side{flex:1;max-width:620px;display:grid;gap:12px}
.t-cover .league-side .league-chips{max-width:none;flex:none}
.league-soon{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.league-soon span{margin-right:4px;font-size:.82rem;font-weight:600;color:#C3CBD5}
.league-soon b{padding:5px 14px;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.03em;color:#C3CBD5;border:1px dashed rgba(255,255,255,.4)}
@media (max-width:860px){.t-cover .league-side{max-width:none}}
.wh-leagues li.is-soon{background:transparent;border:1px dashed rgba(255,255,255,0.16);color:#9BA6B4;font-weight:600}

/* notifications tile: cropped phone */
.t-notif{--c:217,119,6;grid-column:span 2;min-height:260px}
.t-notif .tx{max-width:46%}
.t-notif .shot{position:absolute;right:7%;top:26px;width:min(42%,230px);transform:rotate(-5deg);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.t-notif .shot img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 24px rgba(0,0,0,0.345))}
.t-notif:hover .shot{transform:rotate(-3deg) translateY(-8px)}
@media (min-width:901px){.t-notif .shot{width:min(42%,230px);top:24px;right:5%}}
@media (max-width:980px){.t-notif{grid-column:1/-1}}
@media (max-width:600px){.t-notif{grid-column:auto;min-height:0;padding-bottom:0}.t-notif .tx{max-width:none}.t-notif .shot{position:relative;right:auto;top:auto;align-self:center;width:56%;margin:8px 0 -60%}}
@media (prefers-reduced-motion:reduce){.t-notif .shot{transition:none}}
/* leagues strip */
.tile.t-lg{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:clamp(18px,2.2vw,26px);padding:clamp(20px,2.4vw,30px);background:radial-gradient(120% 140% at 0% 0%,#1A1F33 0%,transparent 55%),linear-gradient(140deg,#1A1F33,#1A1F33 55%,#1A1F33)}
.t-lg .lg-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.6fr);align-items:center;gap:clamp(16px,2.6vw,36px)}
.t-lg .lg-top>.tx{padding-right:clamp(12px,2vw,28px);border-right:1px solid rgba(255,255,255,.14)}
.t-lg .lg-live,.t-lg .lg-soon{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.t-lg .lg-live{grid-template-columns:repeat(4,minmax(0,1fr))}
.t-lg .lg-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.16);background:radial-gradient(130% 120% at 100% 0%,rgba(139,92,246,0.22),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03))}
.t-lg .lg-id{display:flex;align-items:center;gap:12px}
.t-lg .lg-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.06));box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font-size:1.3rem;color:#fff}
.t-lg .lg-card b{display:block;font-size:1.15rem;font-weight:800;letter-spacing:.02em;line-height:1.1;color:#C3CBD5}
.t-lg .lg-card small{display:block;margin-top:3px;font-size:.76rem;line-height:1.3;color:#C3CBD5}
.t-lg .lg-badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:5px 11px;border-radius:999px;background:rgba(0,0,0,.22);font-size:.72rem;font-weight:700;letter-spacing:.03em;color:#C3CBD5}
.t-lg .lg-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#39FF14;box-shadow:0 0 0 3px rgba(57,255,20,.22)}
.t-lg .lg-more{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.6fr);align-items:center;gap:clamp(16px,2.6vw,36px);padding:clamp(16px,2vw,24px);border-radius:20px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,rgba(0,0,0,.2),rgba(0,0,0,.08))}
.t-lg .lg-pill{display:inline-block;padding:4px 12px;border-radius:999px;background:linear-gradient(90deg,#39FF14,#8B5CF6);font-size:.72rem;font-weight:700;letter-spacing:.03em;color:#fff}
.t-lg .lg-more h4{margin:10px 0 6px;font-size:1.2rem;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:#C3CBD5}
.t-lg .lg-more p{margin:0;font-size:.88rem;line-height:1.5;color:#C3CBD5}
.t-lg .lg-soon{grid-template-columns:repeat(3,minmax(0,1fr))}
.t-lg .lg-soon li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.t-lg .lg-disc{position:relative;display:grid;place-items:center;width:64px;height:64px;margin-bottom:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.3),rgba(255,255,255,.06) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font-size:1.6rem;color:#fff}
.t-lg .lg-disc::after{content:"";position:absolute;left:50%;bottom:-11px;width:84px;height:14px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(139,92,246,0.45),transparent);z-index:-1}
.t-lg .lg-soon b{font-size:1.05rem;font-weight:800;color:#C3CBD5}
.t-lg .lg-soon small{font-size:.76rem;font-weight:600;color:#C3CBD5;opacity:.85}
@media (max-width:1180px){.t-lg .lg-top,.t-lg .lg-more{grid-template-columns:1fr}.t-lg .lg-top>.tx{padding:0 0 16px;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}.t-lg .lg-live{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.t-lg .lg-soon{gap:6px}.t-lg .lg-disc{width:54px;height:54px;font-size:1.35rem}.t-lg .lg-disc::after{width:68px}}
.t-lg .lg-more h4{text-wrap:balance}
/* leagues strip: colour + lighting */
.tile.t-lg{background:radial-gradient(90% 120% at 0% 0%,rgba(139,92,246,0.35),transparent 60%),linear-gradient(140deg,#11151F 0%,#1A1F33 55%,#11151F 100%);border:1px solid rgba(57,255,20,0.35);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 30px 60px -28px rgba(0,0,0,0.805)}
.t-lg::before{background:linear-gradient(90deg,transparent,rgba(139,92,246,0.7),transparent)}
.t-lg h3{color:#fff}
.t-lg .lg-card{--g:220,38,38;padding:16px 16px 16px;border:1px solid rgba(var(--g),.45);background:radial-gradient(120% 110% at 100% 0%,rgba(var(--g),.5),transparent 62%),linear-gradient(160deg,rgba(0,0,0,.4),rgba(0,0,0,.2));box-shadow:0 14px 28px -18px rgba(var(--g),.7)}
.t-lg .lg-card:nth-child(2){--g:249,115,22}
.t-lg .lg-card:nth-child(3){--g:59,100,230}
.t-lg .lg-card::after{content:"\f44e";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:-10px;bottom:-22px;font-size:104px;line-height:1;color:rgba(255,255,255,.09);transform:rotate(-24deg);pointer-events:none}
.t-lg .lg-card:nth-child(n+3)::after{content:"\f434"}
.t-lg .lg-card>*{position:relative;z-index:1}
.t-lg .lg-ic{background:linear-gradient(145deg,rgba(var(--g),.55),rgba(var(--g),.15));box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.t-lg .lg-badge{background:rgba(57,255,20,.25);border:1px solid rgba(57,255,20,.45);color:#39FF14}
.t-lg .lg-more{border:1px solid rgba(57,255,20,0.3);background:radial-gradient(80% 140% at 50% 120%,rgba(139,92,246,0.4),transparent 70%),linear-gradient(160deg,rgba(0,0,0,.3),rgba(0,0,0,.12))}
.t-lg .lg-pill{box-shadow:0 8px 18px -8px rgba(57,255,20,0.8)}
.t-lg .lg-more h4{font-size:clamp(1.25rem,2vw,1.6rem);color:#fff}
.t-lg .lg-soon li{position:relative}
.t-lg .lg-disc{margin-bottom:34px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.35),rgba(255,255,255,.08) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 10px 24px -8px rgba(57,255,20,0.6)}
.t-lg .lg-disc::after{z-index:-1;bottom:-28px;width:112px;height:32px;border:1px solid rgba(57,255,20,0.55);background:linear-gradient(180deg,#39FF14,#11151F);box-shadow:0 0 24px rgba(57,255,20,0.4),inset 0 2px 0 rgba(255,255,255,.22)}
.t-lg .lg-soon b{font-size:1.1rem;margin-top:-4px}
.t-lg .lg-soon small{margin-top:6px;padding:4px 12px;border:1px solid rgba(57,255,20,0.4);border-radius:999px;background:rgba(0,0,0,.25);opacity:1;font-size:.72rem}
.t-lg .lg-badge{white-space:nowrap}
@media (max-width:480px){
  .t-lg .lg-card{padding:14px 12px}
  .t-lg .lg-badge{padding:5px 9px;font-size:.68rem;gap:6px}
  .t-lg .lg-disc::after{width:84px;height:24px;bottom:-22px}
  .t-lg .lg-disc{margin-bottom:28px}
  .t-lg .lg-soon small{padding:4px 8px;white-space:nowrap}
}

/* leagues strip: photos */
.t-lg .lg-card::after{display:none}
.t-lg .lg-img{position:absolute;z-index:0;right:-14px;bottom:-26px;width:clamp(96px,9vw,132px);height:auto;transform:rotate(-14deg);filter:drop-shadow(0 14px 14px rgba(0,0,0,.45));pointer-events:none}
.t-lg .lg-card:nth-child(n+3) .lg-img{transform:rotate(8deg);right:-10px}
.t-lg .lg-id,.t-lg .lg-badge{position:relative;z-index:1}
.t-lg .lg-disc{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;margin-bottom:34px}
.t-lg .lg-disc img{display:block;width:clamp(70px,7vw,98px);height:auto;filter:drop-shadow(0 12px 12px rgba(0,0,0,.5))}
.t-lg .lg-disc::after{bottom:-30px}
@media (max-width:1180px){.t-lg .lg-img{width:clamp(96px,16vw,130px)}}
@media (max-width:480px){.t-lg .lg-img{width:84px;right:-12px;bottom:-22px}.t-lg .lg-disc img{width:64px}.t-lg .lg-disc{margin-bottom:28px}}
/* league photos replace icon tiles */
.t-lg .lg-card .lg-ic{visibility:hidden}
.t-lg .lg-img,.t-lg .lg-card:nth-child(n+3) .lg-img{right:auto;bottom:auto;left:12px;top:8px;width:60px;transform:rotate(-12deg);filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))}
.t-lg .lg-card:nth-child(n+3) .lg-img{transform:none}
.t-lg .lg-card:nth-child(n+3) .lg-ic,.t-lg .lg-card .lg-ic{width:60px;height:60px;background:none;box-shadow:none}
.t-lg .lg-card{background:radial-gradient(90% 100% at 0% 0%,rgba(var(--g),.5),transparent 65%),linear-gradient(160deg,rgba(0,0,0,.4),rgba(0,0,0,.2))}
@media (max-width:480px){.t-lg .lg-img,.t-lg .lg-card:nth-child(n+3) .lg-img{left:8px;top:8px;width:50px}.t-lg .lg-card .lg-ic{width:50px;height:50px}}
.t-lg .lg-disc img{width:clamp(76px,7.5vw,104px)}
.t-lg .lg-disc{display:flex;align-items:flex-end;justify-content:center;height:clamp(84px,8vw,112px)}
.t-lg .lg-disc img{max-height:100%;width:auto;max-width:clamp(76px,7.5vw,104px)}
@media (max-width:480px){.t-lg .lg-card:nth-child(n+3) .lg-ic,.t-lg .lg-card .lg-ic{width:50px;height:50px}.t-lg .lg-disc{height:76px}.t-lg .lg-disc img{max-width:64px}}

/* NHL: full pedestal image */
.t-lg .lg-soon li:first-child .lg-disc{height:clamp(84px,8vw,112px);margin-bottom:12px}
.t-lg .lg-soon li:first-child .lg-disc img{max-width:none;width:clamp(130px,13vw,180px);height:auto}
.t-lg .lg-soon li:first-child .lg-disc::after{display:none}
@media (max-width:480px){.t-lg .lg-soon li:first-child .lg-disc img{width:100px}.t-lg .lg-soon li:first-child .lg-disc{margin-bottom:6px}}

/* leagues strip v4 (reference style) */
.tile.t-lgx{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:clamp(14px,1.8vw,20px);padding:clamp(18px,2.2vw,26px);background:radial-gradient(80% 120% at 0% 0%,rgba(139,92,246,0.4),transparent 60%),linear-gradient(140deg,#11151F 0%,#11151F 55%,#11151F 100%);border:1px solid rgba(57,255,20,0.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 30px 60px -28px rgba(0,0,0,0.805)}
.t-lgx::before{background:linear-gradient(90deg,transparent,rgba(139,92,246,0.7),transparent)}
.t-lgx h3{color:#fff}
.lgx-top{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2.4fr);align-items:center;gap:clamp(14px,2.2vw,28px)}
.lgx-top>.tx{padding-right:clamp(10px,1.6vw,22px);border-right:1px solid rgba(255,255,255,.14)}
.lgx-live{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lgx-card{--g:220,38,38;position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"tile name" "live live";align-items:center;column-gap:12px;row-gap:12px;min-height:112px;padding:14px 16px;border-radius:16px;border:1px solid rgba(var(--g),.5);background:radial-gradient(120% 130% at 100% 0%,rgba(var(--g),.55),transparent 62%),linear-gradient(160deg,rgba(0,0,0,.5),rgba(0,0,0,.25));box-shadow:0 14px 28px -18px rgba(var(--g),.8)}
.lgx-card.is-cfb{--g:249,115,22}
.lgx-card.is-nba{--g:50,90,230}
.lgx-tile{grid-area:tile;display:grid;place-items:center;width:52px;height:56px;border-radius:14px}
.lgx-tile img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.lgx-card.is-cfb .lgx-tile,.lgx-card.is-cbb .lgx-tile{background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);padding:8px}
.lgx-name{grid-area:name;position:relative;z-index:1}
.lgx-name b{display:block;font-size:1.15rem;font-weight:800;letter-spacing:.02em;line-height:1.1;color:#fff}
.lgx-name small{display:block;margin-top:3px;font-size:.8rem;line-height:1.3;color:#C3CBD5;max-width:9ch}
.lgx-live{}
.lgx-card .lgx-live,.lgx-card>.lgx-live{grid-area:live}
.lgx-card>span.lgx-live{display:inline-flex;align-items:center;gap:7px;justify-self:start;padding:5px 12px;border-radius:999px;background:rgba(57,255,20,.3);border:1px solid rgba(57,255,20,.5);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#39FF14;position:relative;z-index:1}
.lgx-card>span.lgx-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#39FF14}
.lgx-big{position:absolute;z-index:0;right:-18px;top:50%;width:clamp(96px,10vw,136px);height:auto;translate:0 -50%;rotate:-14deg;opacity:.95;filter:drop-shadow(0 12px 14px rgba(0,0,0,.5));pointer-events:none}
.lgx-card.is-nba .lgx-big,.lgx-card.is-cbb .lgx-big{rotate:10deg}
.lgx-more{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2.4fr) minmax(0,1fr);align-items:center;gap:clamp(10px,2vw,24px);padding:clamp(16px,2vw,22px);border-radius:20px;border:1px solid rgba(57,255,20,0.32);background:radial-gradient(70% 140% at 50% 120%,rgba(139,92,246,0.45),transparent 70%),linear-gradient(160deg,rgba(0,0,0,.3),rgba(0,0,0,.12))}
.lgx-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:999px;background:linear-gradient(90deg,#39FF14,#8B5CF6);font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;box-shadow:0 8px 18px -8px rgba(57,255,20,0.8)}
.lgx-copy h4{margin:12px 0 8px;font-size:clamp(1.3rem,2.1vw,1.75rem);font-weight:800;letter-spacing:-.015em;line-height:1.12;color:#fff}
.lgx-copy h4 em{font-style:normal;background:linear-gradient(90deg,#8B5CF6,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
.lgx-copy p{margin:0;font-size:.88rem;line-height:1.5;color:#C3CBD5;max-width:26ch}
.lgx-peds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,1.4vw,18px);align-items:end}
.lgx-ped{display:flex;flex-direction:column;align-items:center}
.lgx-obj{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;height:clamp(86px,8vw,104px);margin-bottom:-22px}
.lgx-obj img{max-height:100%;width:auto;max-width:clamp(86px,8.5vw,116px);filter:drop-shadow(0 10px 12px rgba(0,0,0,.55))}
.lgx-base{position:relative;z-index:1;width:100%;max-width:190px;padding:30px 8px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:0 0 46% 46%/0 0 22px 22px;background:linear-gradient(180deg,#39FF14 0%,#1A1F33 38%,#11151F 70%,#1A1F33 100%);box-shadow:0 18px 30px -12px rgba(57,255,20,0.55),inset 0 -3px 0 rgba(139,92,246,0.55),inset 0 0 0 1px rgba(139,92,246,0.35)}
.lgx-base::before{content:"";position:absolute;left:-1px;right:-1px;top:-17px;height:34px;border-radius:50%;background:radial-gradient(70% 90% at 50% 40%,#8B5CF6,#1A1F33 70%);border:1px solid rgba(57,255,20,0.75);box-shadow:0 0 16px rgba(57,255,20,0.6)}
.lgx-base b{position:relative;font-size:1.1rem;font-weight:800;color:#fff}
.lgx-base span{position:relative;padding:4px 14px;border-radius:999px;border:1px solid rgba(57,255,20,0.55);background:rgba(0,0,0,.28);font-size:.72rem;font-weight:600;color:#fff}
.lgx-stay{display:flex;align-items:center;gap:12px;padding-left:clamp(10px,1.6vw,20px);border-left:1px solid rgba(255,255,255,.14)}
.lgx-bell{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-size:1.05rem;color:#fff}
.lgx-stay b{display:block;font-size:1rem;font-weight:800;color:#fff}
.lgx-stay small{display:block;margin-top:3px;font-size:.78rem;line-height:1.4;color:#C3CBD5}
@media (max-width:1180px){
  .lgx-top,.lgx-more{grid-template-columns:1fr}
  .lgx-top>.tx{padding:0 0 14px;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .lgx-stay{padding:14px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .lgx-copy p{max-width:none}
}
@media (max-width:520px){
  .lgx-live{grid-template-columns:1fr}
  .lgx-peds{gap:6px}
  .lgx-obj{height:74px;margin-bottom:-18px}
  .lgx-obj img{max-width:74px}
  .lgx-base{padding:26px 4px 12px}
  .lgx-base b{font-size:.98rem}
  .lgx-base span{padding:3px 8px;font-size:.66rem;white-space:nowrap}
}
/* leagues strip v4: measured fixes */
.lgx-card{min-height:0;padding:12px 16px;row-gap:10px}
.lgx-tile{width:56px;height:60px}
.lgx-card.is-cfb .lgx-tile,.lgx-card.is-cbb .lgx-tile{width:60px;height:60px;padding:9px;box-sizing:border-box}
.lgx-tile img{width:auto;height:100%;max-width:100%;object-fit:contain}
.lgx-card.is-cfb .lgx-tile img,.lgx-card.is-cbb .lgx-tile img{height:auto;max-height:100%}
.lgx-obj{height:clamp(84px,8vw,100px);margin-bottom:-8px}
.lgx-obj img{height:100%;width:auto;max-height:none}
.lgx-base{padding:26px 8px 12px}
@media (max-width:520px){.lgx-obj{height:72px;margin-bottom:-6px}.lgx-obj img{height:100%;max-width:none}}
.lgx-tile{display:flex;align-items:center;justify-content:center}
.lgx-card.is-nfl .lgx-tile img,.lgx-card.is-nba .lgx-tile img{height:60px;width:auto;max-width:none}
.lgx-card.is-cfb .lgx-tile img,.lgx-card.is-cbb .lgx-tile img{height:auto;width:42px;max-height:none}
@media (max-width:520px){
  .lgx-live{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .lgx-card{grid-template-columns:auto 1fr;padding:12px 10px;column-gap:8px}
  .lgx-big{display:none}
  .lgx-tile,.lgx-card.is-cfb .lgx-tile,.lgx-card.is-cbb .lgx-tile{width:46px;height:50px}
  .lgx-card.is-nfl .lgx-tile img,.lgx-card.is-nba .lgx-tile img{height:50px}
  .lgx-card.is-cfb .lgx-tile img,.lgx-card.is-cbb .lgx-tile img{width:32px}
  .lgx-card.is-cfb .lgx-tile,.lgx-card.is-cbb .lgx-tile{padding:7px}
  .lgx-name b{font-size:1.02rem}
  .lgx-name small{font-size:.72rem}
  .lgx-card>span.lgx-live{padding:4px 9px;font-size:.62rem;gap:5px}
  .lgx-obj{height:64px}
}

/* pedestal image */
.lgx-peds{align-items:end;row-gap:0}
.lgx-ped{position:relative;width:100%;max-width:190px;margin-inline:auto;padding-top:clamp(58px,5.4vw,70px)}
.lgx-stand{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 22px rgba(57,255,20,0.35))}
.lgx-obj{position:absolute;z-index:2;left:50%;translate:-50% 0;bottom:80%;height:clamp(78px,7.4vw,96px);margin:0;pointer-events:none}
.lgx-obj img{height:100%;width:auto;max-width:none}
.lgx-label{position:absolute;z-index:3;left:0;right:0;top:46%;display:flex;flex-direction:column;align-items:center;gap:5px}
.lgx-label b{font-size:clamp(.95rem,1.4vw,1.1rem);font-weight:800;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.55)}
.lgx-label span{padding:3px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,0.55);font-size:.7rem;font-weight:600;color:#fff;white-space:nowrap}
@media (max-width:520px){.lgx-ped{padding-top:48px}.lgx-obj{height:62px}.lgx-label{gap:3px}.lgx-label span{padding:2px 6px;font-size:.6rem}.lgx-label b{font-size:.88rem}}

.lgx-ped{padding-top:clamp(52px,5vw,64px)}
.lgx-obj{bottom:76%}
.lgx-label{top:44%}
@media (max-width:520px){.lgx-ped{padding-top:44px}}
/* pedestal v2: label below the stand */
.lgx-ped{padding-top:70px}
.lgx-obj{height:86px;bottom:auto;top:0;translate:-50% 0}
.lgx-obj::after{content:none}
.lgx-stand{margin-top:0}
.lgx-label{position:static;margin-top:10px;gap:6px}
.lgx-label b{font-size:1.05rem}
.lgx-label span{border-color:rgba(57,255,20,0.5);background:rgba(0,0,0,.3)}
@media (max-width:520px){.lgx-ped{padding-top:52px}.lgx-obj{height:62px}.lgx-label{margin-top:6px}.lgx-label b{font-size:.92rem}}

/* pedestal v3: text inside the stand */
.lgx-more{grid-template-columns:minmax(0,1fr) minmax(0,2.7fr) minmax(0,.9fr)}
.lgx-ped{max-width:210px;padding-top:0;display:block}
.lgx-pbox{position:relative;margin-top:64px}
.lgx-stand{display:block;width:100%;aspect-ratio:440/250;object-fit:fill;height:auto}
.lgx-obj{top:auto;bottom:calc(100% - 4px);left:50%;translate:-50% 0;height:86px}
.lgx-obj{bottom:auto;top:-62px}
.lgx-ped:first-child .lgx-obj{translate:-43% 0}
.lgx-label{position:absolute;left:8%;right:8%;top:53%;height:30%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.lgx-label b{font-size:clamp(.9rem,1.25vw,1.05rem);line-height:1.05;text-shadow:0 1px 4px rgba(0,0,0,0.805)}
.lgx-label span{padding:0;border:0;background:none;font-size:clamp(.58rem,.8vw,.68rem);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#C3CBD5;text-shadow:0 1px 3px rgba(0,0,0,0.805)}
@media (max-width:1180px){.lgx-ped{max-width:200px}}
@media (max-width:520px){.lgx-pbox{margin-top:46px}.lgx-obj{height:62px;top:-44px}.lgx-label b{font-size:.78rem}.lgx-label span{font-size:.5rem}}
.lgx-peds{padding-top:14px}
@media (max-width:1180px){.lgx-more{grid-template-columns:1fr}.lgx-peds{max-width:640px;width:100%;margin-inline:auto}.lgx-copy p{max-width:none}}
@media (max-width:520px){.lgx-peds{gap:6px;padding-top:8px}.lgx-ped{max-width:none}}
.lgx-peds{padding-top:30px}
@media (max-width:1180px){.lgx-peds{padding-top:56px}}
@media (max-width:520px){.lgx-peds{padding-top:44px}}
/* pedestal label: lower, oval pill, sentence case */
.lgx-label{top:58%;height:32%;gap:3px}
.lgx-label span{padding:2px 11px;border:1px solid rgba(57,255,20,0.65);border-radius:999px;background:rgba(0,0,0,0.45);font-size:clamp(.6rem,.82vw,.7rem);font-weight:600;letter-spacing:0;text-transform:none;line-height:1.3;color:#fff;white-space:nowrap}
@media (max-width:520px){.lgx-label{top:56%;gap:2px}.lgx-label b{font-size:.76rem}.lgx-label span{padding:1px 7px;font-size:.52rem}}
/* league cards: one row of four, compact */
.lgx-top{grid-template-columns:minmax(0,.7fr) minmax(0,3fr)}
.lgx-live{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lgx-card{min-height:0;padding:10px 10px 12px;column-gap:8px;row-gap:8px;border-radius:14px}
.lgx-tile,.lgx-card.is-cfb .lgx-tile,.lgx-card.is-cbb .lgx-tile{width:40px;height:44px;border-radius:11px}
.lgx-card.is-cfb .lgx-tile,.lgx-card.is-cbb .lgx-tile{padding:6px}
.lgx-card.is-nfl .lgx-tile img,.lgx-card.is-nba .lgx-tile img{height:42px}
.lgx-card.is-cfb .lgx-tile img,.lgx-card.is-cbb .lgx-tile img{width:28px}
.lgx-name b{font-size:1rem}
.lgx-name small{font-size:.7rem;line-height:1.25;max-width:none}
.lgx-card>span.lgx-live{padding:3px 9px;font-size:.6rem;gap:5px}
.lgx-big{width:64px;right:-14px;top:auto;bottom:-14px;translate:none}
@media (max-width:1180px){.lgx-live{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){
  .lgx-live{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lgx-big{display:block;width:70px}
}
@media (max-width:520px){.lgx-big{display:none}}
.lgx-top{grid-template-columns:minmax(0,.95fr) minmax(0,3fr)}
@media (max-width:1180px){
  .lgx-top{grid-template-columns:1fr}
  .lgx-top>.tx{padding:0 0 14px;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
}
@media (max-width:760px){.lgx-live{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* coming soon heading: reference style */
.lgx-pill{padding:8px 20px;border-radius:16px;background:linear-gradient(180deg,#8B5CF6,#39FF14);font-size:.82rem;font-weight:800;letter-spacing:.03em;gap:9px;box-shadow:0 10px 22px -8px rgba(57,255,20,0.75),inset 0 1px 0 rgba(255,255,255,.3)}
.lgx-pill i{font-size:.9rem}
.lgx-copy h4{margin:14px 0 10px;font-size:clamp(1.55rem,2.5vw,2.15rem);font-weight:800;font-style:italic;letter-spacing:-.02em;line-height:1.08;background:linear-gradient(180deg,#131A23 0%,#0F141B 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.lgx-copy h4 em{font-style:italic;background:linear-gradient(180deg,#8B5CF6 0%,#8B5CF6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:520px){.lgx-copy h4{font-size:1.6rem}}
@media (min-width:1181px){
  .lgx-more{grid-template-columns:minmax(260px,1.3fr) minmax(0,2.3fr) minmax(0,.8fr)}
  .lgx-copy h4{font-size:clamp(1.45rem,1.9vw,1.85rem);white-space:nowrap}
  .lgx-copy p{max-width:30ch}
  .lgx-stay small{font-size:.74rem}
}

/* leagues title: reference style */
.t-lgx .lgx-top>.tx{gap:14px;align-items:center}
.t-lgx .lgx-top>.tx .ic{flex:none;width:56px;height:56px;border-radius:16px;background:linear-gradient(145deg,rgba(139,92,246,0.32),rgba(255,255,255,.06));box-shadow:inset 0 0 0 1px rgba(139,92,246,0.4),0 10px 22px -10px rgba(57,255,20,0.6)}
.t-lgx .lgx-top>.tx .ic i{font-size:1.35rem;color:#fff}
.t-lgx .lgx-top>.tx h3{margin:0 0 6px;font-size:clamp(1.3rem,1.9vw,1.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.08;color:#fff}
.t-lgx .lgx-top>.tx h3 em{font-style:normal;background:linear-gradient(180deg,#8B5CF6 0%,#8B5CF6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-lgx .lgx-top>.tx p{margin:0;font-size:.86rem;line-height:1.4;color:#C3CBD5}
@media (max-width:520px){.t-lgx .lgx-top>.tx h3{font-size:1.4rem}}
@media (min-width:1181px){
  .lgx-top{grid-template-columns:minmax(272px,1fr) minmax(0,3fr)}
  .t-lgx .lgx-top>.tx{gap:12px;padding-right:16px}
  .t-lgx .lgx-top>.tx .ic{width:50px;height:50px}
  .t-lgx .lgx-top>.tx h3{font-size:clamp(1.2rem,1.55vw,1.45rem);white-space:nowrap}
  .t-lgx .lgx-top>.tx p{font-size:.8rem}
}
/* coming soon block: smaller type */
.lgx-pill{padding:5px 13px;border-radius:12px;font-size:.68rem;gap:6px}
.lgx-pill i{font-size:.72rem}
.lgx-copy h4{margin:10px 0 7px;font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.1}
.lgx-copy p{font-size:.8rem}
@media (min-width:1181px){.lgx-copy h4{font-size:clamp(1.15rem,1.5vw,1.4rem)}}
@media (max-width:520px){.lgx-copy h4{font-size:1.25rem}.lgx-pill{font-size:.64rem}}
/* stay tuned: bottom row */
.lgx-more{grid-template-columns:minmax(260px,1fr) minmax(0,2fr);grid-template-areas:"copy peds" "stay stay";row-gap:clamp(12px,1.6vw,18px)}
.lgx-copy{grid-area:copy}
.lgx-peds{grid-area:peds}
.lgx-stay{grid-area:stay;justify-content:center;padding:14px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.14);gap:12px}
.lgx-stay>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.lgx-stay b{font-size:.95rem}
.lgx-stay small{margin:0;font-size:.8rem}
.lgx-bell{width:36px;height:36px;font-size:.9rem;border-radius:10px}
@media (max-width:1180px){.lgx-more{grid-template-columns:1fr;grid-template-areas:"copy" "peds" "stay"}}
@media (max-width:520px){.lgx-stay{justify-content:flex-start}.lgx-stay>div{display:block}.lgx-stay small{display:block;margin-top:2px}}
@media (min-width:1181px){.lgx-ped{max-width:172px}.lgx-peds{padding-top:34px}.lgx-more{padding-top:clamp(18px,2vw,24px)}}
/* tighter spacing */
.tile.t-lgx{gap:10px;padding:14px 16px}
.lgx-top{gap:12px}
.lgx-card{padding:8px 10px 10px;row-gap:6px}
.lgx-more{padding:12px 16px 10px;row-gap:6px;column-gap:16px}
.lgx-copy h4{margin:8px 0 5px}
.lgx-stay{padding:8px 0 0}
.lgx-bell{width:30px;height:30px;font-size:.8rem}
@media (min-width:1181px){
  .lgx-ped{max-width:150px}
  .lgx-peds{padding-top:26px}
  .lgx-obj{height:74px;top:-52px}
  .lgx-pbox{margin-top:50px}
  .lgx-more{grid-template-columns:minmax(250px,1fr) minmax(0,1.8fr)}
}
@media (max-width:1180px){.lgx-pbox{margin-top:50px}.lgx-peds{padding-top:44px}}
@media (min-width:1181px){
  .lgx-big{width:52px;right:-12px;bottom:-12px}
  .lgx-name small{font-size:.66rem}
  .lgx-peds{padding-top:34px}
  .lgx-obj{height:70px}
}

/* our data: hub layout */
.odx{position:relative;margin-top:clamp(18px,2.4vw,28px);display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,.62fr) minmax(0,1fr);align-items:center;column-gap:clamp(12px,2.4vw,36px)}
.odx-grid{display:contents;list-style:none;margin:0;padding:0}
.odx-hub{grid-column:2;grid-row:1;z-index:1;display:flex;justify-content:center}
.odx-svg{width:min(100%,270px);height:auto;filter:drop-shadow(0 22px 26px rgba(57,255,20,0.28))}
.odx-card.l{grid-column:1}
.odx-card.r{grid-column:3}
.odx-card:nth-child(1),.odx-card:nth-child(2){grid-row:1;align-self:start}
.odx-card:nth-child(3),.odx-card:nth-child(4){grid-row:1;align-self:end}
.odx-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:14px;padding:14px 16px;border-radius:20px;background:linear-gradient(160deg,#131A23,#0F141B);border:1px solid rgba(255,255,255,0.08);box-shadow:0 16px 30px -22px rgba(0,0,0,0.46)}
.odx-card::after{content:"";position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#39FF14;translate:0 -50%;box-shadow:0 0 0 4px rgba(0,0,0,0.115)}
.odx-card.l::after{right:-6px}
.odx-card.r::after{left:-6px}
.odx-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#0F141B;font-size:1.25rem;color:#EEF2F6}
.odx-tx b{display:block;font-size:1.02rem;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:#EEF2F6}
.odx-tx small{display:block;margin-top:4px;font-size:.84rem;line-height:1.45;color:#9BA6B4}
.odx-deco{display:grid;place-items:center;width:44px;height:64px;border-radius:12px;background:linear-gradient(180deg,#0F141B,#0F141B);color:#8B5CF6}
.odx-deco svg{width:30px;height:30px;fill:currentColor}
.odx-card:nth-child(1) .odx-deco,.odx-card:nth-child(3) .odx-deco{color:#8B5CF6}
@media (min-width:901px){
  .odx::before,.odx::after{content:"";position:absolute;top:0;bottom:0;width:calc(50% - 150px);pointer-events:none;background:none}
}
@media (max-width:900px){
  .odx{grid-template-columns:1fr 1fr;row-gap:10px}
  .odx-hub{grid-column:1/-1;grid-row:1;margin-bottom:4px}
  .odx-svg{width:min(60%,210px)}
  .odx-card.l,.odx-card.r{grid-column:auto;grid-row:auto;align-self:stretch}
  .odx-card::after{display:none}
  .odx-deco{display:none}
  .odx-card{grid-template-columns:auto 1fr}
}
@media (max-width:560px){.odx{grid-template-columns:1fr}}

/* our data: two rows + connectors */
.odx{row-gap:clamp(14px,1.8vw,22px)}
.odx-hub{grid-row:1/3}
.odx-card:nth-child(1),.odx-card:nth-child(2){grid-row:1;align-self:stretch}
.odx-card:nth-child(3),.odx-card:nth-child(4){grid-row:2;align-self:stretch}
.odx-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.odx-lines path{stroke-dasharray:none}
@media (max-width:900px){.odx-lines{display:none}.odx-hub{grid-row:1}.odx-card:nth-child(n){grid-row:auto}}
@media (max-width:900px){.odx-svg{width:min(52%,200px);margin:-8px 0 -22px}.odx-hub{margin-bottom:0}}
.od-head h2{font-size:clamp(2.1rem,4.2vw,3.2rem)}

/* data stack image */
img.odx-svg{display:block;width:min(100%,300px);height:auto;filter:drop-shadow(0 22px 26px rgba(57,255,20,0.28))}
@media (max-width:900px){img.odx-svg{width:min(56%,230px);margin:0}}
@media (min-width:901px){.odx{grid-template-columns:minmax(0,1fr) minmax(250px,.78fr) minmax(0,1fr)}img.odx-svg{width:min(100%,320px);margin-block:-10px}}
@media (min-width:901px){.odx{grid-template-columns:minmax(0,1fr) minmax(210px,.62fr) minmax(0,1fr)}img.odx-svg{width:min(100%,270px);margin-block:-6px}.odx-deco{display:none}.odx-card{grid-template-columns:auto 1fr}}

@media (min-width:901px){img.odx-svg{width:min(100%,300px);margin-block:-4px;filter:drop-shadow(0 20px 22px rgba(57,255,20,0.22))}}

/* data credit card */
.od-credit{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,26px);width:fit-content;max-width:100%;margin:clamp(18px,2.4vw,26px) auto 0;padding:14px clamp(18px,2.6vw,30px);border-radius:18px;background:linear-gradient(160deg,#131A23,#0F141B);border:1px solid rgba(255,255,255,0.1);box-shadow:0 14px 28px -22px rgba(0,0,0,0.517);text-align:left}
.odc-logo{flex:none;display:block;padding:0;background:none;border:0}
.odc-logo img{display:block;width:clamp(128px,13vw,160px);height:auto}
.odc-sep{flex:none;align-self:stretch;width:1px;background:rgba(255,255,255,0.112)}
.od-credit p{margin:0;font-size:.92rem;line-height:1.45;color:#9BA6B4}
.od-credit p b{display:block;font-weight:700;color:#EEF2F6}
.od-credit p b a{color:inherit;text-decoration:underline;text-decoration-color:rgba(238,242,246,0.35);text-underline-offset:3px}
.od-credit p span{display:block;margin-top:2px}
@media (max-width:620px){.od-credit{flex-direction:column;text-align:center;gap:10px;width:100%;padding:16px}.odc-sep{width:60%;height:1px;align-self:center}}

/* footer data credit: stacked */
.foot-bar .data-credit{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.foot-bar .dc-lead{font-size:.82rem;font-weight:600;color:#C3CBD5}
.foot-bar .data-credit a.dc-logo{display:inline-flex;align-items:center;padding:9px 16px;border-radius:12px;background:#18202B;box-shadow:0 10px 22px -12px rgba(0,0,0,.6)}
.foot-bar .data-credit .dc-logo img{display:block;width:132px;height:auto}
.foot-bar .dc-soon{font-size:.78rem;color:#9BA6B4}
@media (max-width:760px){.foot-bar .data-credit{align-items:center}}
/* pedestal pill: pedestal colours */
.lgx-label span{border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,#8B5CF6 0%,#8B5CF6 55%,#39FF14 100%);color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,0.575);box-shadow:0 4px 10px -3px rgba(0,0,0,0.805),inset 0 1px 0 rgba(255,255,255,.06)}
/* pedestal pill: soft low-opacity grey */
.lgx-label span{border:1px solid rgba(255,255,255,.28);background:rgba(220,220,225,.22);color:#C3CBD5;font-weight:600;text-shadow:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* record card: layered background */
.recsec-card{background:radial-gradient(circle at top,rgba(255,255,255,0.064),transparent 60%),linear-gradient(180deg,#131A23 0%,#131A23 100%);border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 0 160px rgba(0,0,0,0.046),0 30px 60px -34px rgba(0,0,0,0.253)}
.recsec-card::before{content:"";position:absolute;inset:0;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .12 0 0 0 0 .17 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px;opacity:.05;mix-blend-mode:multiply;pointer-events:none;right:auto;top:auto;width:auto;translate:none;aspect-ratio:auto;border-radius:0}
.recsec-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 25% 40%,rgba(19,26,35,0.9),transparent 45%),radial-gradient(circle at 70% 30%,rgba(19,26,35,0.8),transparent 40%)}
.rs-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.rs-glow{position:absolute;right:-120px;top:-70px;width:min(700px,80%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.08) 35%,rgba(255,255,255,0.024) 55%,transparent 75%);filter:blur(40px)}
.rs-circle{position:absolute;right:3%;top:50%;width:min(64%,640px);aspect-ratio:1;translate:0 -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.08),rgba(255,255,255,0.04),transparent 70%);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.057);filter:blur(2px)}
.rs-curve{position:absolute;inset:0;width:100%;height:100%;opacity:.35}
.rs-curve path{fill:none;stroke:#EEF2F6;stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rs-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:#39FF14;box-shadow:0 0 18px rgba(57,255,20,0.35)}
.rs-d1{left:43%;top:86%;translate:-50% -50%}
.rs-d2{left:90%;top:30%;translate:-50% -50%}
.rs-icon{position:absolute;right:5%;top:12%;display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:rgba(19,26,35,0.7);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.09);box-shadow:0 12px 40px rgba(0,0,0,0.092)}
.recsec-tx,.recsec-ph{position:relative;z-index:1}
@media (max-width:820px){.rs-curve,.rs-d1,.rs-d2{display:none}.rs-circle{right:50%;translate:50% 20%;top:62%;width:90%}.rs-icon{width:52px;height:52px;border-radius:16px;right:6%;top:46%}.rs-glow{right:-20%;top:30%}}
@media (prefers-reduced-motion:reduce){.rs-icon{-webkit-backdrop-filter:none;backdrop-filter:none}}
.rs-circle{background:radial-gradient(circle,rgba(255,255,255,0.104),rgba(255,255,255,0.056) 55%,transparent 72%);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.081)}
.rs-icon{right:1.6%;top:13%;z-index:2}
.rs-d1{left:41%;top:88%}
@media (max-width:820px){.rs-icon{right:5%;top:auto;bottom:8%}}
@media (max-width:820px){.rs-icon{right:4%;top:44%;bottom:auto;width:48px;height:48px;border-radius:15px}.rs-icon svg{width:22px;height:22px}}
@media (max-width:820px){.rs-icon{top:61%;right:3%;z-index:0}}
@media (max-width:820px){.rs-icon{display:none}}
/* more providers: noticeable */
.od-credit p span{display:inline-flex;align-items:center;gap:8px;margin-top:7px;padding:5px 13px 5px 6px;border-radius:999px;background:rgba(139,92,246,0.1);border:1px dashed rgba(57,255,20,0.55);font-size:.84rem;font-weight:700;color:#39FF14}
.od-credit p span::before{content:"+";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#39FF14;font-size:.95rem;font-weight:800;line-height:1;color:#0B0F14}
.foot-bar .dc-soon{display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 6px;border-radius:999px;background:rgba(139,92,246,0.12);border:1px dashed rgba(57,255,20,0.5);font-size:.78rem;font-weight:700;color:#8B5CF6}
.foot-bar .dc-soon::before{content:"+";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#8B5CF6;font-size:.85rem;font-weight:800;line-height:1;color:#EEF2F6}
/* footer credit: one-row glass bar */
.foot-bar .data-credit{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:8px 14px 8px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.foot-bar .dc-lead{font-size:.8rem;font-weight:500;color:#C3CBD5}
.foot-bar .data-credit a.dc-logo{padding:6px 12px;border-radius:10px;box-shadow:none}
.foot-bar .data-credit .dc-logo img{width:104px}
.foot-bar .dc-soon{padding:4px 12px 4px 5px;font-size:.74rem;font-weight:600;background:transparent;border:1px solid rgba(57,255,20,0.35);color:#8B5CF6}
.foot-bar .dc-soon::before{width:16px;height:16px;font-size:.8rem}
@media (max-width:760px){.foot-bar .data-credit{justify-content:center;flex-direction:column;gap:8px;padding:12px 16px;width:100%;max-width:340px}}

.tile .wh-soon{margin:8px 0 0}
.tile .wh-soon span{display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 6px;border-radius:999px;background:rgba(139,92,246,.09);border:1px dashed rgba(139,92,246,.5);font-size:.84rem;font-weight:700;color:#8B5CF6}
.tile .wh-soon span::before{content:"+";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#8B5CF6;font-size:.95rem;font-weight:800;line-height:1;color:#fff}
.tile .wh-logo+.wh-soon{margin:12px 0 0}
/* who we are: our data card gaps */
.tile:has(.wh-soon){gap:8px}
.tile:has(.wh-soon) .tx p{margin:0}
.tile:has(.wh-soon) .wh-logo{margin-top:6px}
.tile .wh-logo+.wh-soon{margin:0}
.tile:has(.wh-soon){gap:10px}.tile:has(.wh-soon) .wh-logo{margin-top:4px}
/* who we are: tighter values / info */
.wh-values{padding-bottom:0}
.wh-cards{margin-top:clamp(20px,2.4vw,28px);gap:14px}
.wh-info{padding-block:14px clamp(32px,4vw,56px)}
.wh-info-grid{gap:14px}
.wh-cards .tile,.wh-info .tile{gap:8px;padding:20px 22px}
.wh-cards .tile .ic,.wh-info .tile .ic{margin-bottom:2px}
.wh-info .tile:has(.wh-soon){gap:8px}
.wh-info .wh-logo{margin-top:2px}
/* leagues strip: deeper wine background, spotlight behind pedestals */
.tile.t-lgx{background:radial-gradient(60% 55% at 62% 78%,rgba(139,92,246,0.34),transparent 70%),radial-gradient(50% 70% at 0% 0%,rgba(139,92,246,0.35),transparent 65%),linear-gradient(180deg,#11151F 0%,#11151F 55%,#11151F 100%);border-color:rgba(57,255,20,0.28)}
.lgx-more{background:radial-gradient(75% 120% at 62% 115%,rgba(139,92,246,0.42),transparent 68%),linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.4));border-color:rgba(57,255,20,0.22)}
.lgx-card{background:radial-gradient(120% 130% at 100% 0%,rgba(var(--g),.5),transparent 62%),linear-gradient(160deg,rgba(0,0,0,.42),rgba(0,0,0,.3))}
/* responsive pass: leagues strip */
@media (max-width:1180px){
  .lgx-more{row-gap:clamp(30px,5vw,44px)}
  .lgx-peds{padding-top:50px;padding-bottom:6px}
  .lgx-ped{max-width:176px}
  .lgx-stay{padding-top:12px;margin-top:2px}
}
@media (max-width:980px){.lgx-big{display:none}}
@media (max-width:520px){
  .lgx-more{row-gap:30px;padding:16px 12px 12px}
  .lgx-peds{padding-top:42px;padding-bottom:12px;gap:4px}
  .lgx-label span{font-size:.5rem;padding:1px 6px}
  .lgx-stay{padding-top:12px}
}
@media (max-width:360px){
  .tile.t-lgx{padding:12px}
  .lgx-card{padding:8px 8px 10px;column-gap:6px}
  .lgx-name b{font-size:.92rem}
  .lgx-name small{font-size:.66rem}
  .lgx-card>span.lgx-live{font-size:.56rem;padding:3px 7px}
}
/* responsive pass: record phones on tablet */
@media (min-width:521px) and (max-width:820px){
  .recsec-ph{height:clamp(380px,62vw,470px)}
  .rp-back{width:min(36%,215px);left:14%;top:12%}
  .rp-front{width:min(42%,250px);right:14%;top:0}
}
/* responsive: 900-1180 keeps the two-column band */
@media (min-width:901px) and (max-width:1180px){
  .lgx-more{grid-template-columns:minmax(210px,.9fr) minmax(0,2fr);grid-template-areas:"copy peds" "stay stay";row-gap:12px}
  .lgx-copy p{max-width:24ch}
  .lgx-peds{padding-top:30px;padding-bottom:0;gap:10px}
  .lgx-ped{max-width:150px}
  .lgx-pbox{margin-top:48px}
  .lgx-obj{height:68px;top:-48px}
  .lgx-stay{padding-top:10px}
}

/* new pedestal image: natural ratio, label on the front band */
.lgx-stand{aspect-ratio:440/193;object-fit:contain}
.lgx-label{top:50%;height:34%}
.lgx-stand{aspect-ratio:440/250;object-fit:fill}
.lgx-label{top:58%;height:32%}
/* pedestals removed for now: object, name, pill in a tidy column */
.lgx-stand{display:none}
.lgx-ped{max-width:none;padding:0;display:flex;flex-direction:column;align-items:center}
.lgx-pbox{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.lgx-obj{position:static;translate:none;height:clamp(78px,7vw,96px);margin:0;display:flex;align-items:flex-end;justify-content:center}
.lgx-obj img{height:100%;width:auto;max-width:none;filter:drop-shadow(0 12px 14px rgba(0,0,0,.55))}
.lgx-ped:first-child .lgx-obj{translate:none}
.lgx-label{position:static;margin:0;height:auto;gap:6px}
.lgx-label b{font-size:1.05rem}
.lgx-label span{padding:3px 12px;font-size:.7rem}
.lgx-peds{padding:6px 0 0;align-items:end;gap:clamp(8px,2vw,24px)}
@media (min-width:901px) and (max-width:1180px){.lgx-obj{height:70px}.lgx-peds{padding-top:0}}
@media (max-width:1180px) and (min-width:901px){.lgx-pbox{gap:8px}}
@media (max-width:900px){.lgx-peds{padding-top:4px;max-width:560px;margin-inline:auto;width:100%}.lgx-obj{height:84px}}
@media (max-width:520px){.lgx-obj{height:60px}.lgx-label b{font-size:.9rem}.lgx-label span{font-size:.56rem;padding:2px 8px}.lgx-pbox{gap:8px}.lgx-peds{padding-top:2px}}
.lgx-pbox{gap:16px}.lgx-obj{margin-bottom:2px}@media (max-width:520px){.lgx-pbox{gap:12px}}
/* smaller league logos in coming soon */
.lgx-obj{height:clamp(52px,5vw,64px)}
.lgx-pbox{gap:10px}
@media (min-width:901px) and (max-width:1180px){.lgx-obj{height:52px}}
@media (max-width:900px){.lgx-obj{height:56px}}
@media (max-width:520px){.lgx-obj{height:42px}.lgx-pbox{gap:8px}}

/* data lines: dots connect card to stack, dashes flow inward */
.odx-lines path{fill:none;stroke:#39FF14;stroke-opacity:.75;stroke-width:2;stroke-linecap:round;stroke-dasharray:1 8;animation:odxflow 1.1s linear infinite}
@keyframes odxflow{to{stroke-dashoffset:-9}}
.odx-card::after{z-index:2}
@media (prefers-reduced-motion:reduce){.odx-lines path{animation:none}}
.odx-lines path{stroke-width:3.2;stroke-opacity:.8;stroke-dasharray:.1 9.9}
@keyframes odxflow{to{stroke-dashoffset:-10}}
@media (min-width:901px){img.odx-svg{width:min(100%,235px)}}
@media (min-width:901px){.odx{grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr)}img.odx-svg{width:200px;max-width:none;margin-inline:-10px}}
/* evenly spaced flowing dots (SMIL) */
.odx-lines path{stroke:none;animation:none}
.odx-pt{fill:#39FF14}
@media (min-width:901px){.odx{grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr)}img.odx-svg{width:177px;margin-inline:0}}
.rs-bg{display:none}
/* record = its own full-width band, not a bento card */
.recsec{background:linear-gradient(180deg,#0F141B 0%,#0F141B 100%);border-block:1px solid rgba(255,255,255,0.07);padding-block:clamp(44px,6vw,84px);margin-top:clamp(36px,5vw,72px)}
.recsec-card{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible;padding:0}
.recsec-card::before,.recsec-card::after{display:none}
@media (max-width:820px){.recsec-card{padding:0}}
.recsec{margin-top:clamp(12px,1.6vw,20px);padding-block:clamp(24px,3vw,40px)}

/* record: modern stat tiles */
.recsec-tx{max-width:540px}
.recsec-tx h2{margin-bottom:14px}
.recsec-tx .lead{max-width:46ch}
.rs-stats{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rs-stats li{display:flex;flex-direction:column;gap:6px;padding:16px 16px 14px;border-radius:18px;background:rgba(19,26,35,0.78);border:1px solid rgba(255,255,255,0.08);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 14px 28px -20px rgba(0,0,0,0.402)}
.rs-k{font-size:.78rem;font-weight:600;color:#9BA6B4}
.rs-stats b{font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:#EEF2F6;font-variant-numeric:tabular-nums;white-space:nowrap}
.rs-bar{display:flex;gap:2px;height:6px;margin-top:6px;border-radius:99px;overflow:hidden}
.rs-bar i{display:block;border-radius:99px}
.rs-bar .w{background:#39FF14}
.rs-bar .l{background:#18202B}
.rs-bar .p{background:#0F141B}
.rs-cap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:16px 0 0;font-size:.8rem;line-height:1.5;color:#9BA6B4}
.rs-tag{display:inline-flex;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,0.056);font-weight:700;color:#EEF2F6;white-space:nowrap}
@media (max-width:520px){.rs-stats{grid-template-columns:1fr;gap:8px}.rs-stats li{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:8px;padding:12px 14px}.rs-bar{grid-column:1/-1;margin-top:0}}
.rs-cap{display:block}
.rs-tag{margin-right:8px;padding:2px 9px;font-size:.76rem}
@media (min-width:521px) and (max-width:1180px){.rs-stats{gap:10px}.rs-stats li{padding:14px 12px 12px}.rs-stats b{font-size:clamp(.98rem,1.5vw,1.2rem)}}
.recsec{padding-bottom:clamp(48px,6vw,88px)}
/* live dot blinks every 0.8s */
.lgx-card>span.lgx-live::before{animation:lgxblink .8s ease-in-out infinite;box-shadow:0 0 6px rgba(57,255,20,.8)}
@keyframes lgxblink{0%,100%{opacity:1}50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.lgx-card>span.lgx-live::before{animation:none}}
.lgx-card>span.lgx-live{background:none;border:0;box-shadow:none;padding:0;color:#39FF14}
.lgx-card>span.lgx-live::before{animation-duration:1.5s}
/* leagues strip: naked icons, no divider, plain coming-soon text */
.t-lgx .lgx-top>.tx{border:0}
.t-lgx .lgx-top>.tx .ic,.lgx-bell{width:auto;height:auto;background:none;box-shadow:none;border:0;border-radius:0}
.t-lgx .lgx-top>.tx .ic i{font-size:1.9rem;color:#8B5CF6}
.lgx-bell{font-size:1.15rem;color:#8B5CF6}
.lgx-card.is-cfb .lgx-tile,.lgx-card.is-cbb .lgx-tile{background:none;box-shadow:none;border:0;padding:2px}
.lgx-card>span.lgx-live{margin-left:6px}
/* footer headings: rose gradient text + short accent bar */
.site-footer .fcol h3,.site-footer h3{position:relative;display:inline-block;margin-bottom:20px;padding-bottom:10px;font-size:1rem;font-weight:800;letter-spacing:-.01em;text-transform:none;background:linear-gradient(90deg,#8B5CF6 0%,#8B5CF6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.site-footer h3::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:3px;background:linear-gradient(90deg,#8B5CF6,#39FF14)}
@media (max-width:640px){.site-footer h3{margin-bottom:12px;padding-bottom:8px;font-size:.92rem}}
/* our data, phone: drop the decorative stack, one grouped list */
@media (max-width:560px){
  .odx-hub,.odx-lines{display:none}
  .odx{grid-template-columns:1fr;row-gap:0;margin-top:20px;border-radius:22px;background:#131A23;border:1px solid rgba(255,255,255,0.08);box-shadow:0 18px 34px -26px rgba(0,0,0,0.517);overflow:hidden}
  .odx::before,.odx::after{display:none}
  .odx-card{grid-template-columns:40px 1fr;column-gap:14px;align-items:start;padding:16px 18px;border:0;border-radius:0;background:none;box-shadow:none}
  .odx-card+.odx-card{border-top:1px solid rgba(255,255,255,0.08)}
  .odx-ic{width:40px;height:40px;border-radius:12px;font-size:1.02rem}
  .odx-tx b{font-size:.98rem}
  .odx-tx small{margin-top:3px;font-size:.84rem}
}
/* our data, phone: faint stack watermark centred behind the list */
@media (max-width:560px){
  .odx{isolation:isolate}
  .odx::before{content:"";display:block;position:absolute;inset:0;z-index:-1;width:auto;background:url(img/data-stack.webp) center/min(70%,250px) auto no-repeat;opacity:.09;pointer-events:none}
  .odx-card{position:relative;z-index:1}
}
@media (max-width:560px){.odx::before{filter:brightness(1.9) saturate(1.3);opacity:.14}}
@media (max-width:560px){.odx::before{opacity:.1}}
@media (max-width:560px){.odx-card+.odx-card{border-top:0}.odx-card{padding-block:13px}.odx-card:first-child{padding-top:18px}.odx-card:last-child{padding-bottom:18px}}
@media (max-width:560px){.odx{background:linear-gradient(160deg,#0F141B 0%,#0F141B 100%);border-color:rgba(255,255,255,0.1)}.odx::before{opacity:.17}.odx-ic{background:#0F141B}}
@media (max-width:560px){.odx{background:#131A23;border-color:rgba(255,255,255,0.08)}.odx-ic{background:#0F141B}}
@media (max-width:560px){.odx::before{opacity:.12}}

/* ---------- Brand refresh: dark base, green main, violet accent ---------- */
body{background:var(--bg);color:var(--ink)}
::selection{background:rgba(57,255,20,.3);color:#fff}
.btn:hover{box-shadow:0 18px 36px -16px rgba(57,255,20,.55)}
.how-join .btn{background:var(--green);color:var(--bg);border-color:var(--green)}

/* hero disc: dark with a green rim instead of a solid fill */
.stage::before{background:radial-gradient(circle at 30% 25%,#1D2438,#10141D 70%);box-shadow:0 0 0 1px rgba(57,255,20,.22),0 0 90px -20px rgba(57,255,20,.45),inset 0 0 70px rgba(139,92,246,.22)}
.stage::after{background:radial-gradient(closest-side,rgba(139,92,246,.32),transparent)}

/* how it works band */
.how{background:radial-gradient(55% 70% at 88% 0%,rgba(139,92,246,.26),transparent 70%),radial-gradient(45% 60% at 0% 100%,rgba(57,255,20,.1),transparent 70%),linear-gradient(160deg,#0E121A,#121628 55%,#0B0F14)}
.how::before{background:none}
.how-head h2{color:#fff}
.how-head h2 span{background:linear-gradient(100deg,var(--green),var(--violet));-webkit-background-clip:text;background-clip:text}

/* contact band in the footer */
.foot-cta{background:linear-gradient(135deg,#1C1638,#141A2B 55%,#10201A);border:1px solid rgba(139,92,246,.3);box-shadow:0 30px 60px -30px rgba(139,92,246,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.foot-cta::after{background:radial-gradient(closest-side,rgba(57,255,20,.16),transparent)}
.site-footer .foot-btn{background:var(--green);color:var(--bg)}
.site-footer .foot-btn:hover{box-shadow:0 18px 34px -16px rgba(57,255,20,.55)}

/* partner logos keep a light plate so their dark lettering reads */
.odc-logo,.wh-logo,.foot-bar .data-credit a,.foot-bar .data-credit a.dc-logo{background:#fff;border:0}
.odc-logo{padding:8px 14px;border-radius:12px}
.odx-ic{background:rgba(57,255,20,.1);color:var(--green)}
.ct-form .fsubmit,.fsubmit{background:var(--green);color:var(--bg)}
.ct-form .fsubmit:hover,.fsubmit:hover{background:#2FE010;color:var(--bg);box-shadow:0 20px 34px -16px rgba(57,255,20,.55)}
.fs-plane{stroke:var(--bg)}
.fs-ring circle{stroke:rgba(11,15,20,.9)}

/* leagues block */
.tile.t-lgx{background:radial-gradient(55% 80% at 0% 0%,rgba(139,92,246,.16),transparent 65%),var(--surface);border:1px solid var(--line);box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}
.t-lgx::before{background:linear-gradient(90deg,transparent,rgba(57,255,20,.55),transparent)}
.t-lgx .lgx-top>.tx h3{color:#fff}
.t-lgx .lgx-top>.tx h3 em{background:none;-webkit-text-fill-color:var(--green);color:var(--green)}
.t-lgx .lgx-top>.tx .ic i,.lgx-bell{color:var(--green)}
.t-lgx .lgx-top>.tx p{color:var(--muted)}
.lgx-card{background:radial-gradient(110% 120% at 100% 0%,rgba(var(--g),.2),transparent 60%),var(--bg2);border:1px solid rgba(255,255,255,.08);box-shadow:none}
.lgx-name small{color:var(--muted)}
.lgx-more{background:radial-gradient(70% 120% at 60% 120%,rgba(139,92,246,.14),transparent 70%),var(--bg2);border:1px solid var(--line)}
.lgx-pill{background:var(--green);color:var(--bg);box-shadow:none}
.lgx-copy h4{background:none;-webkit-text-fill-color:#fff;color:#fff;filter:none}
.lgx-copy h4 em{background:none;-webkit-text-fill-color:var(--green);color:var(--green)}
.lgx-copy p,.lgx-stay small{color:var(--muted)}
.lgx-label b{color:#fff;text-shadow:none}
.lgx-label span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#C3CBD5;box-shadow:none;text-shadow:none}
.lgx-stay{border-top-color:var(--line)}

/* leagues block: violet with green */
.tile.t-lgx{background:radial-gradient(50% 90% at 0% 0%,rgba(139,92,246,.26),transparent 65%),radial-gradient(40% 70% at 100% 100%,rgba(57,255,20,.07),transparent 70%),var(--surface);border-color:rgba(139,92,246,.22)}
.t-lgx::before{background:linear-gradient(90deg,transparent,var(--green) 30%,var(--violet) 70%,transparent)}
.t-lgx .lgx-top>.tx .ic i{background:linear-gradient(160deg,var(--green),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.t-lgx .lgx-top>.tx h3 em,.lgx-copy h4 em{background:linear-gradient(90deg,var(--green),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.08em}
.lgx-more{background:radial-gradient(60% 110% at 62% 125%,rgba(139,92,246,.3),transparent 70%),radial-gradient(35% 80% at 0% 0%,rgba(57,255,20,.06),transparent 70%),var(--bg2);border-color:rgba(139,92,246,.25)}
.lgx-pill{background:linear-gradient(90deg,var(--green),var(--violet));color:var(--bg)}
.lgx-label span{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.4);color:#D9CCFF}
.lgx-bell{color:var(--violet)}
.lgx-stay{border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(57,255,20,.35),rgba(139,92,246,.45),transparent) 1}
.t-lgx .lgx-top>.tx .ic i{background:linear-gradient(180deg,var(--green) 15%,var(--violet) 90%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 4px 12px rgba(139,92,246,.35))}

/* our data: violet with green */
.ourdata{position:relative;isolation:isolate;background:radial-gradient(38% 46% at 50% 58%,rgba(139,92,246,.2),transparent 70%),radial-gradient(30% 40% at 50% 62%,rgba(57,255,20,.07),transparent 70%)}
.od-head h2 span{background:linear-gradient(90deg,var(--green),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.06em}
.odx-card{background:radial-gradient(90% 140% at 0% 0%,rgba(139,92,246,.13),transparent 60%),linear-gradient(160deg,#131A23,#0F141B);border-color:rgba(139,92,246,.2)}
.odx-card.r{background:radial-gradient(90% 140% at 100% 0%,rgba(139,92,246,.13),transparent 60%),linear-gradient(200deg,#131A23,#0F141B)}
.odx-ic{background:linear-gradient(145deg,rgba(57,255,20,.16),rgba(139,92,246,.22));box-shadow:inset 0 0 0 1px rgba(139,92,246,.25)}
.odx-card::after{background:linear-gradient(135deg,var(--green),var(--violet))}
.odx-pt:nth-of-type(even){fill:var(--violet)}
img.odx-svg{filter:drop-shadow(0 22px 26px rgba(57,255,20,.22)) drop-shadow(0 0 40px rgba(139,92,246,.35))}
.od-credit{background:radial-gradient(80% 160% at 100% 0%,rgba(139,92,246,.16),transparent 65%),linear-gradient(160deg,#131A23,#0F141B);border:1px solid rgba(139,92,246,.25)}
.odc-sep{background:linear-gradient(180deg,transparent,rgba(139,92,246,.5),transparent)}
.od-credit p span{background:linear-gradient(90deg,rgba(57,255,20,.1),rgba(139,92,246,.16));border-color:rgba(139,92,246,.5)}
.od-credit p span::before{background:linear-gradient(135deg,var(--green),var(--violet))}
@media (max-width:560px){.odx{border-color:rgba(139,92,246,.22);background:radial-gradient(70% 50% at 50% 50%,rgba(139,92,246,.16),transparent 70%),#10151D}.odx-card,.odx-card.r{background:none}}

/* faq: violet with green */
.faq{background:radial-gradient(45% 60% at 50% 30%,rgba(139,92,246,.12),transparent 70%)}
.faq details{background:radial-gradient(70% 160% at 100% 0%,rgba(139,92,246,.1),transparent 60%),#131A23;border:1px solid rgba(139,92,246,.18);transition:border-color .2s}
.faq details:hover,.faq details[open]{border-color:rgba(139,92,246,.45)}
.faq summary::after{background:linear-gradient(135deg,rgba(57,255,20,.2),rgba(139,92,246,.35));color:#fff}
.faq details[open] summary::after{background:linear-gradient(135deg,var(--green),var(--violet));color:var(--bg)}
.faq summary::after{background:linear-gradient(135deg,rgba(57,255,20,.4),rgba(139,92,246,.7))}
.faq details{border-color:rgba(139,92,246,.26)}
img.odx-svg{filter:drop-shadow(0 22px 30px rgba(139,92,246,.35)) drop-shadow(0 0 30px rgba(57,255,20,.12))}

/* display font: free stand-in for Knockout Cruiserweight until the licensed files arrive */
:root{--display:"Oswald","Knockout Cruiserweight","Arial Narrow",system-ui,sans-serif}
html body :is(h1,h2,.brand,.t-lgx .lgx-top>.tx h3,.lgx-copy h4,.rs-stats b,.foot-cta h2,.how-head h2,.hero h1,.wh-copy h1){font-family:var(--display);font-weight:700;letter-spacing:.005em;line-height:1.08}
html body .hero h1{line-height:1;letter-spacing:0}
.brand{font-size:1.4rem}
html body .hero h1{font-size:clamp(3.4rem,7.4vw,6.4rem)}
.foot-mark{font-family:var(--display);font-weight:700;letter-spacing:0;font-size:clamp(5rem,21vw,19rem)}
@media (max-width:640px){.foot-mark{font-size:21vw}}

/* exact brand colours: tiles and chips use only #39FF14 / #8B5CF6, at full strength */
.tile::before,.chips>div::before{opacity:1}
.t-why,.t-record,.chips>div:nth-child(1){--c:139,92,246}
.t-odds,.t-props,.chips>div:nth-child(2),.chips>div:nth-child(3){--c:57,255,20}
.ic i,.em i,.fs-ic i{color:rgb(var(--c,139,92,246))}
.flow::before,.fstep:not(:last-child)::before{background:#8B5CF6}
.t-lg::before,.t-lgx::before{background:linear-gradient(90deg,transparent,#8B5CF6,transparent)}
.t-parlay{--c:57,255,20}
.t-notif{--c:139,92,246}

/* league cards follow the brand: green and violet, alternating */
.lgx-card.is-nfl,.lgx-card.is-nba{--g:57,255,20}
.lgx-card.is-cfb,.lgx-card.is-cbb{--g:139,92,246}
.wh-team-head h2{max-width:none}

/* header on Base */
.site-header,.site-header.scrolled{background:#0B0F14;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid rgba(255,255,255,.06)}
.site-header.scrolled{box-shadow:0 14px 34px -26px rgba(0,0,0,.8)}
.site-header,.site-header.scrolled{border-bottom:0}

/* transparent owl logo, larger */
.brand{gap:14px}
.brand img{width:66px;height:auto;border-radius:0}
.site-footer .brand img{width:58px}
@media (max-width:900px){.brand img{width:56px}}

/* app name is white, like the logo wordmark */
html body .hero h1 span{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#fff;color:#fff}
html body .brand{font-size:1.75rem;color:#fff}
@media (max-width:900px){html body .brand{font-size:1.5rem}}
html body .site-footer .brand{font-size:1.55rem}
html body .hero h2 .hl{background:linear-gradient(90deg,var(--green) 10%,var(--violet) 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--green);padding-right:.05em}
html body .site-footer .brand,html body .site-footer a.brand{color:#fff}
html body .hero h1{color:#fff}
html body .hero h2 .hl{background:linear-gradient(90deg,var(--green) 0%,var(--violet) 100%);-webkit-background-clip:text;background-clip:text;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html body .eb-rot b i{color:var(--green)}
html body .recsec-tx h2 span{background:linear-gradient(90deg,var(--green) 0%,var(--violet) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-right:.05em}

/* page backgrounds are Base, no lighter bands or haze */
html body :is(.hero-bg,.page-hero,.wh-hero,.wh-hero.wh-hero--center:not(.ct-hero):not(.lg-hero),.ct-sec.ct-split,.recsec,#record){background:#0B0F14}
html body .site-footer{background:#0B0F14}
html body .ct-form::after{display:none}
html body .ct-form{background:#131A23}
html body .how{background:radial-gradient(55% 70% at 88% 0%,rgba(139,92,246,.22),transparent 70%),radial-gradient(45% 60% at 0% 100%,rgba(57,255,20,.08),transparent 70%),#0B0F14}

/* contact form: accent for the card and its fields, main colour only for the send button */
html body .ct-form{background:linear-gradient(180deg,rgba(139,92,246,.10) 0,rgba(139,92,246,0) 220px),#131A23;border:1px solid rgba(139,92,246,.38);box-shadow:0 40px 80px -44px rgba(0,0,0,.85),0 0 0 4px rgba(139,92,246,.06)}
html body .ct-form::before{background:#8B5CF6}
html body .ct-form :is(input[type=text],input[type=email],textarea,select,.fs-btn){border:1px solid rgba(139,92,246,.22)}
html body .ct-form :is(input[type=text],input[type=email],textarea,select,.fs-btn):hover{border-color:rgba(139,92,246,.6)}
html body .ct-form :is(input[type=text],input[type=email],textarea,select):focus,html body .ct-form .fs-btn:focus-visible,html body .ct-form .fselect.is-open .fs-btn{background:#0B0F14;border-color:#8B5CF6;box-shadow:0 0 0 4px rgba(139,92,246,.25)}
html body .ct-form .fselect.is-invalid .fs-btn{border-color:#8B5CF6;box-shadow:0 0 0 4px rgba(139,92,246,.25)}
html body .fselect::after{border-color:#8B5CF6}
html body .fs-list{border-color:rgba(139,92,246,.35)}
html body .fs-list li.is-act{background:rgba(139,92,246,.12)}
html body .fs-list li.is-sel .fs-ic{background:#8B5CF6}
html body .fs-list li.is-sel .fs-ck::after{border-color:#8B5CF6}

/* our data tile: provider logo and "more coming" side by side */
.wh-prov{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:6px}
.wh-prov .wh-logo{margin:0;align-self:center}
.wh-prov .wh-soon{margin:0}
/* tile colour stays inside the card */
html body .tile::after{right:-40px;top:-40px;width:150px;height:150px;background:radial-gradient(closest-side,rgba(var(--c),.09),transparent)}
html body .tile:hover{box-shadow:0 16px 28px -22px rgba(var(--c),.28),inset 0 0 0 1px rgba(var(--c),.2)}
html body .tile::after{display:none}
html body .eb-for{color:#8B5CF6;font-weight:700}

/* three steps: violet glow top-left, green glow bottom-right */
html body .how{background:radial-gradient(50% 65% at 0% 0%,rgba(139,92,246,.22),transparent 70%),radial-gradient(45% 60% at 100% 100%,rgba(57,255,20,.09),transparent 70%),#0B0F14}
/* step cards: brand colour per step, like the feature tiles */
.fstep{--c:57,255,20}
.fstep:nth-child(2){--c:139,92,246}
html body .fcard{background:linear-gradient(160deg,#131A23,rgba(19,26,35,.85));border:1px solid rgba(255,255,255,.08)}
html body .fcard::before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 3px 3px;background:rgb(var(--c))}
html body .fcard .ic{background:linear-gradient(145deg,rgba(var(--c),.2),rgba(var(--c),.06));box-shadow:inset 0 0 0 1px rgba(var(--c),.3)}
html body .fcard .ic i{color:rgb(var(--c))}
html body .fcard h3{color:#fff}
html body .fcard:hover{border-color:rgba(var(--c),.35);background:linear-gradient(160deg,#131A23,rgba(19,26,35,.85))}
/* three steps: violet glows top-left and top-right, green glows bottom-left and bottom-right, smaller */
html body .how{background:radial-gradient(30% 40% at 0% 0%,rgba(139,92,246,.2),transparent 70%),radial-gradient(30% 40% at 100% 0%,rgba(139,92,246,.2),transparent 70%),radial-gradient(28% 38% at 0% 100%,rgba(57,255,20,.08),transparent 70%),radial-gradient(28% 38% at 100% 100%,rgba(57,255,20,.08),transparent 70%),#0B0F14}
/* step cards: no top line, gradient icons */
html body .fcard::before{display:none}
html body .fcard .ic{background:linear-gradient(145deg,rgba(57,255,20,.16),rgba(139,92,246,.22));box-shadow:inset 0 0 0 1px rgba(139,92,246,.35)}
html body .fcard .ic i{background:linear-gradient(160deg,#39FF14 15%,#8B5CF6 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
html body .fcard:hover{border-color:rgba(255,255,255,.08)}
@media (min-width:761px){html body .fstep .fcard{margin-top:16px}}

/* mobile menu: lighter panel, smooth open and close */
@media (max-width:700px){
  html.js body #site-nav{display:block;background:rgba(11,15,20,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s}
  html.js body .site-header.open #site-nav{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .28s ease,transform .28s ease,visibility 0s}
}
@media (prefers-reduced-motion:reduce){html.js body #site-nav,html.js body .site-header.open #site-nav{transition:none;transform:none}}