/* TAPATAHI BASKETBALL CLUB — brand tokens pulled from the app (constants/colors.js) */

@font-face{font-family:"DaltonWhite";src:url("../fonts/daltonwhite.otf") format("opentype");font-display:swap;font-weight:400}
@font-face{font-family:"Varsity";src:url("../fonts/varsity.ttf") format("truetype");font-display:swap;font-weight:400}
@font-face{font-family:"Satoshi";src:url("../fonts/Satoshi-Regular.ttf") format("truetype");font-display:swap;font-weight:400}
/* Script italic bold for the display headings. Two real files rather than one
   plus font-synthesis: Lobster Two ships a genuine 700 and a genuine italic, so
   the bold/italic look is drawn by the type designer, not smeared by the browser.
   DaltonWhite stays as the fallback for the split second before this loads. */
@font-face{font-family:"ScriptBold";src:url("../fonts/lobstertwo-bolditalic.woff2") format("woff2");font-display:swap;font-weight:700;font-style:italic}

:root{
  --red:#d10023;
  --red-hot:#ff1f45;
  --gold:#e8c27a;
  --gold-hi:#f7e3b6;
  --wa:#25d366;
  --ink:#000;
  --panel:#0e0e10;
  --panel-2:#131315;
  --line:rgba(255,255,255,.11);
  --text:#f4f2ee;
  --muted:#a5a29c;
  --maxw:1220px;
  --gutter:clamp(18px,4.2vw,44px);
  --radius:18px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
/* An author display rule outranks the UA sheet's [hidden]{display:none}, so any
   element given display:grid/flex here would ignore its own hidden attribute and
   stay on screen. site.js toggles hidden on the nav panel, the sent panel and the
   draft note, so make the attribute authoritative once, for all of them. */
[hidden]{display:none !important}
html{background:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(15.5px,.35vw + 14.6px,17px);line-height:1.62;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  min-height:100svh;display:flex;flex-direction:column;
}
main{flex:1 0 auto;min-width:0;display:flex;flex-direction:column}
/* FAQ/mobile hard stop: these boxes can never create horizontal scroll. */
html,body,main,.wrap,.section,.faq,.faq details,.faq details p,.faq summary{
  overflow-x:hidden !important;
  max-width:100% !important;
}
img,svg,video{max-width:100%;height:auto;display:block}
/* <picture> is a format-swapping mechanism, not a layout box. These three
   block-level spots measure pixel-identical with the wrapper when it generates
   no box of its own, so the WebP swap cannot move the image. Scoped rather than
   global: the app shots are flex items and must not be caught by it. */
.strip picture,.aside picture,.footer__brand picture{display:contents}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:400;line-height:1.02}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:5px}
[id]{scroll-margin-top:92px}

.skip{position:absolute;left:-999px}
.skip:focus{left:14px;top:12px;z-index:60;background:var(--red);color:#fff;padding:10px 16px;border-radius:10px}

.wrap{width:min(var(--maxw),100% - var(--gutter) * 2);margin-inline:auto;overflow-x:hidden}
.wrap--narrow{width:min(840px,100% - var(--gutter) * 2)}

.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font-family:"Varsity",sans-serif;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.pip{width:8px;height:8px;border-radius:50%;background:var(--red-hot);box-shadow:0 0 0 4px rgba(255,31,69,.22)}

/* Script faces are optically lighter and narrower than a block display cut, so the
   size is stepped up to hold the same visual weight the layout was tuned around.
   font-weight/font-style are not optional here: the only @font-face registered
   for this family is 700 italic, so omitting either makes the browser skip it. */
.display{font-family:"ScriptBold","DaltonWhite",Impact,sans-serif;font-weight:700;font-style:italic;font-size:clamp(50px,10.5vw,132px);line-height:1.02;text-transform:none;letter-spacing:0;text-wrap:balance}
.display em{font-style:italic;color:var(--gold);text-shadow:0 0 44px rgba(232,194,122,.35)}
.h2{font-family:"ScriptBold","DaltonWhite",Impact,sans-serif;font-weight:700;font-style:italic;font-size:clamp(30px,4.8vw,58px);text-transform:none;line-height:1.14;margin-bottom:16px;text-wrap:balance}
.lead{margin:0;color:var(--muted);font-size:clamp(16px,1.15vw,19px);max-width:56ch}
.lead--sm{max-width:62ch;margin-bottom:clamp(20px,2.6vw,30px)}
.fine{font-size:13px;color:var(--muted);line-height:1.55}
.fine a{color:var(--gold);text-decoration:underline}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border:1px solid transparent;border-radius:999px;cursor:pointer;
  font-family:"Varsity",sans-serif;font-size:14px;letter-spacing:.11em;text-transform:uppercase;
  text-align:center;transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s;
}
.btn--primary{background:var(--red);color:#fff;box-shadow:0 14px 34px -14px rgba(209,0,35,.9)}
.btn--primary:hover{background:#bf0020;box-shadow:0 18px 42px -12px rgba(255,31,69,.6),0 14px 34px -14px rgba(209,0,35,.9);transform:translateY(-2px)}
.btn--ghost{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-hi);transform:translateY(-2px)}
.btn--wa{
  background:var(--wa);color:#fff;font-weight:700;letter-spacing:.08em;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
  box-shadow:0 12px 28px -14px rgba(37,211,102,.75);
}
.btn--wa:hover{filter:brightness(1.06);transform:translateY(-2px);color:#fff}
.btn--wa[aria-disabled="true"]{background:#1c1c1e;color:#6f6f74;border-color:var(--line);cursor:not-allowed;box-shadow:none;transform:none;filter:none;text-shadow:none}
#contactWhatsApp,#sendWhatsApp{
  /* Same footprint as a normal primary pill — clear Satoshi type */
  font-family:"Satoshi",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.btn--sm{padding:10px 17px;font-size:12.5px}
.btn--lg{padding:17px 32px;font-size:15.5px}
.btn:active{transform:translateY(0)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--gold);text-decoration:underline;cursor:pointer}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:#16161a;border:1px solid var(--line);padding:2px 6px;border-radius:6px}

/* ---- nav ---- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:7px var(--gutter);
  background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,.55));
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
}
.brand{flex:0 0 auto}
.brand__mark{height:32px;width:auto}
/* Home-only mobile title; the desktop hero keeps the primary display title. */
.nav__home-title{display:none}
.nav__links{display:flex;gap:2px;margin-left:auto}
.nav__links a{padding:9px 13px;border-radius:999px;font-size:14.5px;color:#b8b5af;transition:color .2s,background .2s}
.nav__links a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav__right{display:flex;align-items:center;gap:10px;margin-left:12px}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:0 11px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navpanel{position:fixed;inset:52px 0 auto 0;z-index:39;display:grid;gap:2px;padding:14px var(--gutter) 22px;background:rgba(6,6,7,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.navpanel a{padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.07);font-family:"Varsity",sans-serif;font-size:15px;letter-spacing:.09em;text-transform:uppercase}
.navpanel a.btn{margin-top:16px;border:0;justify-self:start;padding:14px 26px}

/* ---- hero ---- */
/* Title sits centered; Desktop 11.png (hero-team) sits behind it at full opacity. */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:stretch;justify-content:center;min-height:100svh;padding:0 0 clamp(20px,3vh,36px)}
.hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,0) 46%,rgba(0,0,0,.12) 100%)}
.hero__squad{position:absolute;left:50%;top:auto;bottom:0;transform:translateX(-50%);width:min(96vw,1269px);z-index:0;opacity:1;pointer-events:none}
.hero__squad picture{display:block}
.hero__squad img{width:100%;height:auto;margin:0;filter:none}
.hero__inner{position:relative;z-index:2;width:100%;min-height:100svh;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(var(--nav-h,52px) + 0px) 0 clamp(16px,2.5vh,28px);box-sizing:border-box}
.hero .display{margin:-32px auto 0;flex:0 0 auto;padding-top:.14em;line-height:1.12;overflow:visible;text-shadow:0 2px 18px rgba(0,0,0,.82)}
/* Spacer opens the gap between Tapatahi and the tagline, then the rest of the
   copy packs toward the bottom so West Auckland sits just above the fold. */
.hero__after-title{flex:1 1 auto;min-height:clamp(48px,12vh,140px);width:100%}
.hero__lower{flex:0 0 auto;width:100%;display:flex;flex-direction:column;align-items:center}
.hero .lead{margin-inline:auto;max-width:min(72ch,92vw)}
.hero__tagline{margin:0 auto .5em;font-family:"ScriptBold","DaltonWhite",Impact,sans-serif;font-weight:700;font-style:italic;font-size:clamp(21px,3.1vw,40px);line-height:1.16;color:var(--text);text-wrap:balance;max-width:28ch}
.hero__tagline em{font-style:italic;color:var(--gold);text-shadow:0 0 40px rgba(232,194,122,.35)}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:clamp(18px,2.5vw,26px) 0 clamp(18px,2.5vw,26px)}
.stats{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,4vw,52px);margin:0;padding:18px 0 0;border-top:1px solid var(--line)}
.stats li{display:grid;gap:3px;min-width:150px;justify-items:center}
.stats b{font-family:"Varsity",sans-serif;font-weight:400;font-size:clamp(19px,2.3vw,29px);letter-spacing:.02em;text-transform:uppercase;color:var(--gold)}
.stats span{font-size:13.5px;color:var(--muted)}
.hero__meta{margin:16px 0 0;font-size:14px;color:var(--muted)}
.hero__meta strong{color:var(--text);font-weight:600}
.ticks--hero{margin:14px auto 0;max-width:min(72ch,92vw);text-align:left}
.hero__lower .lead--sm{margin-top:.6em;max-width:min(72ch,92vw)}
.hero h2.hero__tagline{font-weight:700}

/* ---- sections ---- */
.section{position:relative;padding:clamp(54px,8.5vw,108px) 0;overflow-x:hidden}
.section--tint{background:linear-gradient(180deg,#0a0a0b,#0e0e10 55%,#0a0a0b);border-block:1px solid var(--line)}
.section--register{background:radial-gradient(90% 70% at 88% -10%,rgba(209,0,35,.16),transparent 62%),#07070a;border-block:1px solid var(--line)}
.section--contact{flex:1 0 auto;background:radial-gradient(80% 80% at 8% 100%,rgba(232,194,122,.09),transparent 60%),#07070a;border-top:1px solid var(--line)}

.split{display:grid;gap:clamp(24px,4vw,56px);align-items:center;grid-template-columns:minmax(0,1fr) minmax(0,min(45%,520px))}
.split--rev{grid-template-columns:minmax(0,min(45%,560px)) minmax(0,1fr)}
.split--rev .split__text{order:2}
.split--rev .shots{order:1}
/* The club photo is a 1237x448 cutout - nearly three to one. In a 520px column it
   would render about 190px tall, too short to read as a squad, so that section
   stacks the copy above a full-width band instead. */
.split--band{grid-template-columns:1fr;gap:clamp(26px,3.4vw,44px)}
/* club: the band stacks at every width, so it must stay out of the single-column
   collapse list - the copy is already full measure above the photo. */
.split--band .split__text{max-width:70ch}
.split--form{grid-template-columns:minmax(0,min(33%,370px)) minmax(0,1fr);align-items:start}

.frame{margin:0}
.frame img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);border-radius:var(--radius)}
.frame figcaption{margin-top:12px;font-family:"Varsity",sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* Same problem as the hero, smaller: a cutout in the old 4/3 cover box would be
   cropped down to a torso. The band keeps the players' own ratio, drops the
   border that only made sense around a photo, and puts them on a lit panel so
   the black kit still separates from the page. */
.frame--band img{aspect-ratio:auto;width:100%;height:auto;object-fit:contain;border:0;border-radius:0}
.frame--band{padding:0;background:transparent;border:0;border-radius:0}
.frame--band figcaption{text-align:center}

.ticks{list-style:none;display:grid;gap:12px;margin:22px 0 0;padding:0}
.ticks li{position:relative;padding-left:30px;color:#ddd9d2}
.ticks li::before{content:"";position:absolute;left:2px;top:.5em;width:14px;height:8px;border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(-45deg)}
.ticks--sm{gap:9px;margin-top:14px;font-size:14.5px}
.ticks b{color:var(--gold-hi);font-weight:600}

.grid{display:grid;gap:clamp(14px,1.6vw,20px);margin-top:clamp(20px,3vw,32px)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{position:relative;overflow:hidden;padding:clamp(20px,2.4vw,28px);background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);transition:border-color .25s,transform .25s var(--ease)}
.card:hover{border-color:rgba(232,194,122,.45)}
.card::before{content:"";position:absolute;inset:0 auto auto 0;height:2px;width:0;background:var(--red);transition:width .35s var(--ease)}
.card:hover::before{width:100%}
.card__num{font-family:"Varsity",sans-serif;font-size:13px;letter-spacing:.14em;color:rgba(232,194,122,.4)}
.card h3{margin:8px 0 10px;font-family:"Varsity",sans-serif;font-size:clamp(19px,2vw,23px);letter-spacing:.04em;text-transform:uppercase}
.card p{margin-bottom:18px;font-size:15px;color:var(--muted)}
.pick{display:inline-flex;align-items:center;gap:8px;padding:0;background:none;border:0;cursor:pointer;font-family:"Varsity",sans-serif;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.pick::after{content:"→";transition:transform .25s var(--ease)}
.pick:hover{color:var(--gold-hi)}
.pick:hover::after{transform:translateX(5px)}

.callout{margin-top:clamp(24px,3.4vw,40px);padding:clamp(20px,2.6vw,30px);background:rgba(232,194,122,.055);border:1px dashed rgba(232,194,122,.36);border-radius:var(--radius)}
.callout h3{margin:0 0 8px;font-family:"Varsity",sans-serif;font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.callout p{max-width:74ch;margin:0;color:#d8d5cf}
.callout em{color:var(--gold-hi);font-style:normal;text-decoration:underline}

.steps{list-style:none;display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:clamp(22px,3vw,34px) 0;padding:0}
.steps li{padding:clamp(20px,2.2vw,26px);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.steps__n{display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border-radius:50%;background:var(--red);color:#fff;font-family:"Varsity",sans-serif;font-size:20px}
.steps h3{margin:0 0 8px;font-family:"Varsity",sans-serif;font-size:20px;letter-spacing:.04em;text-transform:uppercase}
.steps p{margin:0;font-size:15px;color:var(--muted)}
.join-cta{display:flex;justify-content:center;margin:clamp(18px,2.4vw,28px) 0 0}
.steps:has(+ .join-cta){margin-bottom:0}

/* ---- app shots ---- */
/* Default (e.g. home embeds): modest cluster. The App page overrides below. */
.shots{display:flex;align-items:flex-end;justify-content:center;gap:6px;padding:8px 10px 0;max-width:100%;box-sizing:border-box}
.shots__s{width:clamp(72px,9.2vw,118px);border:1px solid rgba(255,255,255,.16);border-radius:18px;box-shadow:0 22px 44px -28px rgba(0,0,0,.95);display:block;height:auto}
.shots__s--a{transform:rotate(-4deg) translateY(6px)}
.shots__s--b{z-index:2;width:clamp(84px,10.8vw,136px);transform:translateY(-6px)}
.shots__s--c{transform:rotate(4deg) translateY(6px)}
.app__cta{margin-top:26px}
.app__cta .fine{margin:12px 0 0;text-align:center}

/* App page: smaller phones, fully inside the left column, bottoms level with
   the copy, App Store CTA as a centered bar on the flat line under both. */
#app .split.split--rev{
  align-items:center;
  grid-template-columns:minmax(0,min(36%,340px)) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
}
#app .split.split--rev .shots{
  order:1;
  align-self:center;
  justify-content:center;
  width:100%;
  max-width:100%;
  /* Room for the left phone's tilt so body overflow-x:hidden does not crop it */
  padding:0 6px 0 22px;
  gap:4px;
  overflow:visible;
}
#app .split.split--rev .shots .shots__s{
  width:clamp(72px,8.6vw,110px);
  border-radius:16px;
}
#app .split.split--rev .shots .shots__s--a{
  transform:rotate(-3.5deg) translate(4px,8px);
}
#app .split.split--rev .shots .shots__s--b{
  z-index:2;
  width:clamp(84px,10vw,128px);
  transform:translateY(-4px);
}
#app .split.split--rev .shots .shots__s--c{
  transform:rotate(3.5deg) translate(-2px,8px);
}
#app .split.split--rev .split__text{
  order:2;
  align-self:center;
  position:relative;
  z-index:3;
  min-width:0;
}
#app .split.split--rev .split__text .app__cta{display:none}
#app .app__cta--bar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin:clamp(36px,5vw,56px) auto 0;
  max-width:min(540px,100%);
  text-align:center;
  position:relative;
  z-index:4;
}
#app .app__cta--bar .btn{width:100%;min-height:58px;font-size:16px;letter-spacing:.04em}
#app .app__cta--bar .fine{margin:0;text-align:center}

.strip{margin:clamp(28px,4vw,48px) 0 0;text-align:center}
.strip img{margin-inline:auto;max-width:min(100%,560px);border:1px solid var(--line);border-radius:var(--radius)}
.strip figcaption{margin-top:12px;font-size:13.5px;color:var(--muted)}

/* ---- register ---- */
.aside__img{width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--line);border-radius:var(--radius)}
.aside h3{margin:22px 0 0;font-family:"Varsity",sans-serif;font-size:19px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold)}
.aside .fine{display:block;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.aside .fine em{color:var(--gold-hi);font-style:normal}
.formwrap{min-width:0}
form{display:grid;gap:16px;margin-top:clamp(18px,2.4vw,26px)}
.row--2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.field{display:grid;gap:7px;min-width:0}
fieldset{margin:0;padding:0;border:0}
label,legend{font-family:"Varsity",sans-serif;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:#cfcac2}
.req,.opt{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;font-family:"Satoshi",sans-serif;font-size:10px;letter-spacing:.1em;vertical-align:2px;text-transform:uppercase}
.req{color:#ff8095;border:1px solid rgba(209,0,35,.55);transition:opacity .2s var(--ease),border-color .2s,color .2s}
.field.is-filled .req,
.check--block.is-filled .req{opacity:0;border-color:transparent;color:transparent;pointer-events:none}
.opt{color:var(--muted);border:1px solid var(--line)}
input,select,textarea{width:100%;padding:13px 14px;font:inherit;font-size:16px;color:var(--text);background:#0f0f12;border:1px solid var(--line);border-radius:12px;color-scheme:dark;transition:border-color .2s,background .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:#6d6a66}
textarea{min-height:92px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);background:#141418;box-shadow:0 0 0 3px rgba(232,194,122,.14)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--red);background:rgba(209,0,35,.08)}
.err{margin:0;font-size:13px;color:#ff8095}
.checks{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:8px}
.check{display:flex;align-items:flex-start;gap:10px;font-family:"Satoshi",sans-serif;font-size:14.5px;letter-spacing:0;text-transform:none;color:#d9d5cf;cursor:pointer;line-height:1.45}
.check input{width:19px;height:19px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--red);cursor:pointer}
.check--block{padding:13px 15px;background:#0f0f12;border:1px solid var(--line);border-radius:12px}
.check--block:hover{border-color:rgba(232,194,122,.34)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__foot{display:grid;gap:10px;justify-items:start;margin-top:6px}
.sent{margin-top:24px;padding:clamp(22px,3vw,32px);background:linear-gradient(180deg,rgba(232,194,122,.11),rgba(232,194,122,.02));border:1px solid rgba(232,194,122,.42);border-radius:var(--radius)}
.sent h3{margin:0 0 10px;font-family:"Varsity",sans-serif;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:var(--gold)}
.sent p{color:#ddd9d2}
.sent__btns{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 14px}
.sent .fine{margin-bottom:8px}
.copybox{width:100%;min-height:190px;margin:4px 0 10px;padding:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5;white-space:pre;color:var(--text);background:#0b0b0d;border:1px solid var(--line);border-radius:12px}
.copybox:focus{outline:none;border-color:var(--gold)}

/* ---- faq ---- */
.faq{
  margin-top:clamp(20px,2.6vw,30px);
  border-top:1px solid var(--line);
  overflow-x:hidden !important;
  max-width:100% !important;
}
.faq details,
.faq details:hover,
.faq details[open]{
  transform:none !important;
}
.faq details{
  border-bottom:1px solid var(--line);
  transition:opacity .2s var(--ease), box-shadow .2s var(--ease);
  opacity:1;
  position:relative;
  max-width:100% !important;
  box-sizing:border-box;
  overflow-x:hidden !important;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.faq details:hover,
.faq details[open]{
  opacity:1;
  box-shadow:none;
}
.faq summary{
  display:block;margin:0;padding:16px 12px;
  font-family:"Varsity",sans-serif;font-size:clamp(13px,1.35vw,17px);
  letter-spacing:.02em;text-transform:uppercase;color:#eceae5;
  cursor:pointer;list-style:none;text-align:left;
  max-width:100% !important;
  overflow-x:hidden !important;
  box-sizing:border-box;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}
.faq summary::marker{content:"";display:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after,.faq details[open] summary::after{content:none !important}
.faq summary:hover{color:var(--gold-hi)}
.faq details p{
  max-width:100% !important;
  width:100%;
  margin:0 0 18px;
  padding:0 12px;
  color:var(--muted);
  text-align:left;
  box-sizing:border-box;
  overflow-x:hidden !important;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.faq details p a,.faq details p em{color:var(--gold-hi);font-style:normal}
.faq details p a{text-decoration:underline}

/* ---- contact ---- */
.contact{display:grid;gap:clamp(24px,4vw,52px);align-items:start;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.contact .btn{margin-top:8px}
.contact__list{display:grid;margin:0;padding:0;list-style:none;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius)}
.contact__list li{display:flex;justify-content:space-between;gap:16px;padding:15px 18px;background:var(--panel);border-bottom:1px solid var(--line);font-size:14.5px}
.contact__list li:last-child{border-bottom:0}
.contact__list span{padding-top:3px;font-family:"Varsity",sans-serif;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact__list a{color:var(--gold);word-break:break-word;text-align:right}
.contact__list a:hover{text-decoration:underline;color:var(--gold-hi)}

/* ---- footer ---- */
.footer{padding:clamp(16px,2.2vw,24px) 0 24px;background:#070709;border-top:1px solid var(--line)}
.footer__grid{display:grid;gap:clamp(22px,3vw,42px);grid-template-columns:minmax(210px,1.2fr) minmax(210px,1fr);align-items:start}
@media (max-width:720px){.footer__grid{grid-template-columns:1fr}}
.footer__crest{width:76px;height:auto;background:transparent;border:0;border-radius:0;object-fit:contain}
.footer__tag{margin:14px 0 6px;font-family:"ScriptBold","DaltonWhite",Impact,sans-serif;font-weight:700;font-style:italic;font-size:27px;text-transform:none;line-height:1.2;color:var(--gold)}
.footer__brand .fine{margin:0}
.footer__nav{display:grid;gap:9px;align-content:start}
.footer__nav h3{margin:0 0 6px;font-family:"Varsity",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.footer__nav a{font-size:14.5px;color:#d6d3cd;transition:color .2s}
.footer__nav a:hover{color:var(--gold-hi)}
.footer__base{display:flex;flex-wrap:nowrap;gap:8px 24px;justify-content:space-between;align-items:center;margin-top:clamp(12px,1.6vw,18px);padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;line-height:16px;color:var(--muted);-webkit-text-size-adjust:100%;text-size-adjust:100%}
.footer__base p{margin:0;font-size:12.5px;line-height:16px;white-space:nowrap}
@media (max-width:720px){
  .footer__base{flex-direction:column;align-items:flex-start;gap:2px;margin-top:12px;padding-top:10px}
  .footer__base p:last-child{font-size:min(12.5px, calc((100vw - 36px) / 31.52))}
}

/* ---- responsive ---- */
@media (max-width:940px){
  .shots__s{width:clamp(78px,22vw,120px)}
  .shots__s--b{width:clamp(90px,26vw,138px)}

  .split,.split--rev,.split--form{grid-template-columns:1fr}
  .split--rev .split__text{order:-1}
  /* Portrait 760x1065 — 16/10 was cropping the top on phone. Show full image. */
  .aside__img{aspect-ratio:auto;height:auto;object-fit:contain;object-position:center top}
  .frame img{aspect-ratio:16/10}
  /* .frame img above and .frame--band img are the same specificity, and this
     block sits later in the sheet, so the 16/10 would silently win and squeeze
     the cutout. The band keeps its own ratio at every width. */
  .frame--band img{aspect-ratio:auto}
}
@media (max-width:900px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav__right{margin-left:auto}
  .hero .display{margin-top:0}
  /* The hero is content-sized on phones. The squad starts at the bottom of
     the translucent fixed nav, so the spacer puts the copy directly after the
     image instead of pinning it to a viewport/lvh bottom. */
  .hero{
    min-height:0;
  }
  .hero__inner{
    min-height:0;
    padding-top:calc(var(--nav-h,52px) + 12px);
    justify-content:flex-start;
  }
  .hero__after-title{
    /* hero-team is 1269x535; its natural height at 100vw is 42.16vw.
       The squad also starts below the nav, so keep the full image height here
       and let the lower copy follow its feet. */
    flex:0 0 auto;
    height:42.16vw;
    min-height:0;
  }
  .hero__lower{
    margin-top:0;
    width:100%;
  }
}
@media (max-width:600px){
  .brand__mark{height:27px}
  .nav__right .btn{display:none}
  .hero__cta .btn{flex:1 1 100%}
  /* Soften the desktop title pull so the script heading is not shoved under the
     thin fixed header on phone widths. Dual 100svh + negative title margin was
     crushing the hero on ~390px iOS Safari. */
  .hero{padding-bottom:clamp(16px,3vh,28px)}
  .hero__inner{padding-top:calc(var(--nav-h,52px) + 12px)}
  .hero .display{margin-top:0;margin-bottom:0;font-size:clamp(44px,14vw,72px)}
  .hero__squad{opacity:1;width:min(100vw,1269px)}
  .hero__tagline{font-size:clamp(18px,5.2vw,28px)}
  /* Three equal stats that fit a ~375px row without the old 50%-wrap awkwardness */
  .stats{gap:10px 8px;padding-top:14px}
  .stats li{min-width:0;flex:1 1 0;max-width:none}
  .stats b{font-size:clamp(15px,4.2vw,19px)}
  .stats span{font-size:12px}
  .contact__list li{flex-direction:column;gap:4px}
  .contact__list a{text-align:left;padding:3px 0}
  /* WCAG 2.2 AA target size (min 24px): these read as 20px-tall text links, so
     give them real touch height without touching the type or the card spacing */
  .pick{min-height:28px;padding:4px 0}
  /* footer nav links measure 23px, one short of the same floor */
  .footer__nav a{min-height:26px;display:flex;align-items:center}
}

/* Phone / touch / narrow: FAQ rows keep fixed geometry.
   overflow-x:clip is poorly supported on older iOS — use hidden. */
@media (max-width:900px), (hover:none){
  .faq,
  .wrap,
  .section,
  .grid.grid--3,
  .steps{overflow-x:hidden}
  .faq summary{
    font-size:clamp(12px,3.2vw,14.5px);
    padding:14px 10px;
    letter-spacing:.01em;
  }
  .faq details p{padding:0 10px}
  .card:hover,
  .steps li:hover{
    transform:none !important;
    box-shadow:none;
  }
}
@media (max-width:900px){
  /* iOS/phone: keep the same bright squad treatment as desktop. */
  /* iOS/phone: keep the main title accessible, but place its visible copy in the nav.
     The image then has a clean run from below the header without the giant hero h1. */
  .nav__home-title{
    display:block;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    max-width:calc(100% - 132px);
    overflow:hidden;
    font-family:"ScriptBold","DaltonWhite",Impact,sans-serif;
    font-weight:700;
    font-style:italic;
    font-size:clamp(23px,7vw,31px);
    line-height:1;
    white-space:nowrap;
    color:var(--text);
    text-shadow:0 2px 14px rgba(0,0,0,.8);
  }
  .hero .display{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .hero__squad{opacity:1}
  .hero__squad img{filter:none}
  /* iOS/phone: start the squad below the real fixed nav; desktop pinning is unchanged. */
  .hero__squad{
    top:var(--nav-h,52px);
    right:0;
    bottom:auto;
    left:0;
    width:100%;
    max-height:none;
    transform:none;
  }
  .hero__squad img{
    width:100%;
    height:auto;
    object-fit:cover;
    object-position:top center;
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .shots__s--a,.shots__s--c{transform:none}
}

/* ---- merch ---- */
.section--merch{min-height:calc(100svh - 52px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.merch__logo{position:absolute;inset:0;margin:auto;width:min(92vw,680px);height:auto;max-height:86%;object-fit:contain;pointer-events:none;z-index:0}
.section--merch .merch{position:relative;z-index:1;background:radial-gradient(closest-side,rgba(0,0,0,.82),rgba(0,0,0,.35) 78%,transparent);padding:28px 18px}
.section--merch .merch .h2,.section--merch .merch .lead{text-shadow:0 2px 14px #000,0 0 22px #000}
.section--merch .merch .lead{color:var(--text)}
.merch{display:grid;gap:clamp(22px,3vw,36px);justify-items:center;text-align:center;padding-block:clamp(12px,2vw,24px)}
.merch .h2{margin:0}
.merch .lead{margin:0;max-width:36ch;color:var(--muted)}

/* Join page: programs then steps, no hard band between */
.section--join-top{padding-bottom:clamp(28px,4vw,44px);border-bottom:0}
.hero__thunder{display:none}
.join-intro__mark{display:none}
@media (min-width:901px){
  .join-intro{display:grid;grid-template-columns:minmax(0,1fr) 168px;column-gap:28px;align-items:start}
  .join-intro__copy .lead--sm{margin-bottom:0}
  .join-intro__mark{display:block;width:168px;height:auto;margin-top:6px}
}
.section--join-bot{padding-top:clamp(12px,2vw,20px);padding-bottom:clamp(28px,4vw,44px);border-top:0}
.section--join-top + .section--join-bot{margin-top:0}

/* Home: the giant Tapatahi title is hidden. The squad moves up into that
   space. The tagline and the rest of the hero copy stay put. */
@media (min-width:901px){
  .hero__scrim{background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,0) 46%,rgba(0,0,0,.12) 100%)}
  .hero .display{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .hero__squad{opacity:1;top:calc(var(--nav-h,52px) - 12px);bottom:auto}
  .hero__squad img{filter:none}
}

/* Dock-style pop on join cards + step bubbles (same feel as FAQ).
   Desktop only — scale would overflow the viewport sideways on phones. */
@media (min-width:901px) and (hover:hover){
  .card,.steps li{
    transform-origin:center center;
    transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
    will-change:transform;
  }
  .card:hover,.steps li:hover{
    transform:translateY(-10px) scale(1.04);
    box-shadow:0 28px 56px -24px rgba(0,0,0,.92);
    border-color:rgba(232,194,122,.35);
    z-index:2;
    position:relative;
  }
}
@media (prefers-reduced-motion:reduce){
  .card:hover,.steps li:hover{transform:none;box-shadow:none}
}

/* ---- app promo ---- */
/* The site-wide overflow-x:hidden rule turns html, body, main and .wrap into
   nested scrollers. On a phone the first swipes land in that inner scroller
   and the page only starts moving after a few tries. Clip sideways here and
   leave vertical scrolling on the document. */
html:has(main.promo),
body:has(main.promo){
  overflow-x:clip !important;
  overflow-y:visible !important;
  height:auto !important;
  touch-action:pan-y;
}
main.promo{
  overflow:visible !important;
  background:#000;
  touch-action:pan-y;
}
.promo .wrap{overflow:visible !important}
.promo-hero{
  position:relative;
  isolation:isolate;
  overflow:visible;
  display:flex;
  align-items:center;
  padding:calc(var(--nav-h,52px) + 28px) 0 36px;
}
.promo-hero__court{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(90% 70% at 80% 20%,rgba(209,0,35,.22),transparent 55%),
    #000;
}
.promo-hero__grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
  gap:clamp(24px,4vw,64px);
  align-items:center;
}
.promo-hero__title{
  margin:0 0 .2em;
  font-family:"ScriptBold","DaltonWhite",Impact,sans-serif;
  font-weight:700;font-style:italic;
  font-size:clamp(46px,6.4vw,92px);
  line-height:.98;letter-spacing:0;
  text-wrap:balance;
}
.promo-hero__lead{max-width:38ch;font-size:clamp(17px,1.4vw,19px);color:#e7e2d8}
.promo-hero__cta{margin-top:26px}
.promo-hero__cta .btn{min-height:56px;padding-inline:28px}
.promo-hero__cta .fine{margin:12px 0 0;max-width:36ch}
.promo-stage{
  --phone:min(42%,250px);
  position:relative;height:min(78vh,740px);
  pointer-events:none;
}
.promo-phone{
  position:absolute;
  bottom:0;left:50%;
  width:var(--phone);
  margin-left:calc(var(--phone) * -.5);
  border-radius:28px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 34px 80px -28px #000;
  background:#111;
  pointer-events:none;
}
.promo-phone img{display:block;width:100%;height:auto;border-radius:26px}
.promo-phone--l{z-index:1;transform:translateX(-46%) rotate(-8deg) translateY(22px);animation:promo-float 7s ease-in-out infinite}
.promo-phone--c{z-index:2;transform:translateY(-16px);animation:promo-float 6.2s ease-in-out infinite reverse}
.promo-phone--r{z-index:1;transform:translateX(46%) rotate(8deg) translateY(22px);animation:promo-float 7.6s ease-in-out infinite}
@keyframes promo-float{
  0%,100%{translate:0 0}
  50%{translate:0 -12px}
}
.promo-block{padding:clamp(64px,9vw,120px) 0}
.promo-block--tight{padding-top:clamp(28px,4vw,48px)}
.promo-block:has(+ .promo-mirror){padding-bottom:clamp(12px,2vw,28px)}
.promo-split{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(200px,320px);
  gap:clamp(28px,5vw,72px);align-items:center;
}
.promo-frame{
  margin:0;justify-self:center;
  padding:10px;border-radius:32px;
  background:linear-gradient(180deg,rgba(232,194,122,.45),rgba(255,255,255,.08));
  box-shadow:0 40px 80px -36px #000;
}
.promo-frame > img{display:block;width:min(320px,74vw);height:auto;border-radius:24px}
.promo-reel{
  margin-top:clamp(22px,3vw,36px);
  display:flex;gap:18px;
  overflow-x:auto;
  overflow-y:clip;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
  scroll-snap-type:x proximity;
  padding:28px 2px 28px;
  scrollbar-color:rgba(232,194,122,.45) transparent;
  touch-action:pan-x pan-y;
}
.compare{
  position:relative;z-index:1;margin:0;
  flex:0 0 auto;
  width:min(250px,74vw);
  scroll-snap-align:start;
  transition:width 1.15s cubic-bezier(.22,1,.32,1);
}
.compare:hover,.compare.is-open,.compare:focus-within{z-index:4;width:min(520px,94vw)}
.compare__btn{
  display:block;width:100%;padding:0;border:0;background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer;touch-action:pan-x pan-y;
  transition:transform 1.15s cubic-bezier(.22,1,.32,1);
}
.compare:hover .compare__btn,
.compare.is-open .compare__btn,
.compare:focus-within .compare__btn{transform:translateY(-14px)}
.compare__pair{display:flex;align-items:flex-start}
.compare__now,.compare__alt{
  display:block;height:auto;border-radius:26px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 28px 60px -32px #000;
}
.compare__now{flex:1 1 auto;width:auto;min-width:0}
.compare__alt{
  flex:0 0 auto;
  width:min(240px,46vw);
  max-width:0;
  margin-left:0;
  opacity:0;
  object-fit:cover;
  object-position:top center;
  transition:max-width 1.15s cubic-bezier(.22,1,.32,1),margin-left 1.15s cubic-bezier(.22,1,.32,1),opacity .95s cubic-bezier(.22,1,.32,1) .18s;
}
.compare:hover .compare__alt,
.compare.is-open .compare__alt,
.compare:focus-within .compare__alt{
  max-width:min(240px,46vw);
  margin-left:10px;
  opacity:1;
}
.promo-reel figcaption{margin-top:12px;color:var(--muted);font-size:14.5px}
.promo-reel figcaption b{
  display:block;margin-bottom:4px;
  font-family:"Varsity",sans-serif;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text);font-size:15px;
}
.promo-mirror{
  position:relative;
  padding:clamp(36px,5vw,64px) 0 clamp(20px,3vw,36px);
  background:radial-gradient(92% 88% at 50% 46%,rgba(209,0,35,.22),transparent 72%);
  overflow:hidden;
}
.promo-mirror__head{max-width:68ch}
.promo-mirror__head .lead--sm{color:var(--text)}
.mirror{
  margin-top:clamp(28px,4vw,48px);
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
  gap:12px;align-items:center;
}
.mirror__who{
  margin:0 0 10px;
  font-family:"Varsity",sans-serif;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.mirror__bubble{
  border-radius:18px;padding:16px 18px;
  border:1px solid var(--line);
  background:#121214;
  max-width:42ch;
}
.mirror__bubble--player{animation:promo-in 1.1s var(--ease) both}
.mirror__bubble--parent{
  background:linear-gradient(180deg,rgba(232,194,122,.16),#121214 42%);
  border-color:rgba(232,194,122,.45);
  animation:promo-copy 1.4s var(--ease) .7s both, promo-glow 3.2s ease-in-out 2s infinite;
}
.mirror__bubble--parent b{
  display:block;margin-bottom:8px;
  font-family:"Varsity",sans-serif;font-weight:400;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);
}
.mirror__bridge{
  justify-self:center;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(232,194,122,.5);
  color:var(--gold);
  font-family:"Varsity",sans-serif;letter-spacing:.08em;font-size:12px;
  box-shadow:0 0 0 8px rgba(232,194,122,.06);
  animation:promo-pulse 7.5s ease-in-out infinite;
}
@keyframes promo-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes promo-copy{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes promo-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(232,194,122,0)}
  50%{box-shadow:0 0 28px rgba(232,194,122,.28)}
}
@keyframes promo-pulse{
  0%,100%{transform:scale(.92);opacity:.55}
  50%{transform:scale(1);opacity:1}
}
.promo-mirror__note{max-width:68ch;margin:22px 0 0}
.promo-shots{
  margin-top:clamp(28px,4vw,42px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);align-items:start;
}
.promo-shots figure{margin:0}
.promo-shots img{
  width:100%;height:auto;border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 50px -30px #000;
}
.promo-shots figcaption{margin-top:12px;color:var(--muted);font-size:14.5px}
.promo-shots figcaption b{
  display:block;margin-bottom:4px;
  font-family:"Varsity",sans-serif;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text);font-size:15px;
}
.promo-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.promo-mirror + .promo-block{padding-top:clamp(8px,1.6vw,20px)}
.promo-grid article{
  margin:0;padding:clamp(18px,2vw,28px);
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,#101013,#0b0b0d);
}
.promo-grid h3{
  margin:0 0 8px;
  font-family:"Varsity",sans-serif;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;font-size:20px;
}
.promo-grid p{margin:0;color:var(--muted)}
.promo-block:has(+ .promo-close){padding-bottom:clamp(16px,2vw,28px)}
.promo-close{
  position:relative;text-align:center;
  padding:clamp(4px,1vw,12px) 0 clamp(48px,7vw,80px);
  overflow:visible;
}
.promo .btn--primary{
  box-shadow:none;
  transition:transform .2s var(--ease),background .2s,box-shadow .25s ease;
}
.promo .btn--primary:hover{
  box-shadow:inset 0 0 22px rgba(255,120,140,.5);
}
.promo-close__mark{
  width:min(220px,46vw);height:auto;margin:0 auto 8px;
  animation:promo-float 8s ease-in-out infinite;
}
.promo-close .h2{margin-bottom:18px}
.promo-close .fine{margin:14px auto 0;max-width:42ch}
html.promo-motion .rise{opacity:0;transform:translateY(22px)}
html.promo-motion .rise.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.promo-motion .promo-reel .compare.rise{transition:width 1.15s cubic-bezier(.22,1,.32,1)}
html.promo-motion .promo-reel .compare.rise.is-in{
  transition:opacity .7s var(--ease),transform .7s var(--ease),width 1.15s cubic-bezier(.22,1,.32,1);
}
@media (max-width:900px){
  .promo-hero__grid,.promo-split,.promo-shots,.promo-grid{grid-template-columns:1fr}
  .promo-stage{--phone:min(34vw,168px);height:auto;min-height:460px;margin-top:8px}
  .mirror{grid-template-columns:1fr;gap:18px}
  .mirror__bridge{transform:rotate(90deg)}
  .promo-frame{justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .promo-phone,.promo-phone--l,.promo-phone--c,.promo-phone--r,
  .mirror__bubble--player,.mirror__bubble--parent,
  .mirror__bridge,.promo-close__mark{animation:none}
  .compare,.compare__alt{transition:none}
  .promo-phone--l{transform:translateX(-46%) rotate(-8deg) translateY(16px)}
  .promo-phone--c{transform:translateY(-12px)}
  .promo-phone--r{transform:translateX(46%) rotate(8deg) translateY(16px)}
}

/* Home: the photo sits in the flow, copy always under it, edges fade to black. */
.hero{min-height:0;height:100svh;max-height:100svh;display:block;overflow:hidden;box-sizing:border-box;padding:calc(var(--nav-h,52px) + 8px) 0 18px}
.hero__fit{width:min(96vw,1400px);margin:0 auto;transform-origin:top center;transform:scale(var(--fit,1))}
.hero__squad{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:100%;margin:0 auto;z-index:0}
.hero__squad img{width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:3200/2133;object-fit:cover;object-position:center 40%;filter:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 72%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 72%,transparent);mask-composite:intersect}
.hero__inner{position:relative;min-height:0;height:auto;padding-top:8px;justify-content:flex-start;width:100%}
.hero__tagline{font-size:clamp(21px,2.2vw,30px)}
.hero__after-title{display:none;height:0;min-height:0;flex:none}
.hero__lower{margin-top:0}
.hero__cta{margin-bottom:0}
.intro{position:fixed;inset:0;z-index:80;background:#000;pointer-events:auto;transition:background 3.2s ease}
.intro.is-zoom{background:transparent;pointer-events:none}
.intro.is-zoom .intro__bar{opacity:0;transition:opacity .4s ease}
.intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:1;background:#000;transition:top 3.2s cubic-bezier(.33,0,.2,1),left 3.2s cubic-bezier(.33,0,.2,1),width 3.2s cubic-bezier(.33,0,.2,1),height 3.2s cubic-bezier(.33,0,.2,1),opacity 3.2s ease}
.intro.is-zoom video{opacity:0;object-fit:cover}
.intro.is-fade{opacity:0;background:transparent;transition:opacity 1.2s ease}
.intro.is-fade video{transition:none}
.intro__bar{position:absolute;top:16px;right:16px;display:flex;gap:8px}
.intro__bar button,.intro__start{background:rgba(0,0,0,.45);color:#f4f2ee;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.intro__start{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;padding:14px 28px}
.intro.is-blocked .intro__start{display:block}
html.intro-seen .intro{display:none}
@media (max-width:900px){
  .intro__bar{display:none}
  .intro video{object-fit:contain;background:#000}
  .hero{height:auto;max-height:none;overflow:visible}
  .hero__fit{transform:none}
  .hero__squad img{aspect-ratio:3200/2133;object-position:center 40%}
}

/* ---- Glass red (2026-10-31): same red-to-clear fade + iOS glass finish as the coach desk,
   so buttons, pills and selected states read as one product. Colours/finish only, no layout. ---- */
:root{
  --red-rgb:209,0,35;
  --gl-hi:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.03) 48%,rgba(255,255,255,0) 52%);
  --gl-red:linear-gradient(100deg,rgba(var(--red-rgb),.86) 0%,rgba(var(--red-rgb),.46) 55%,rgba(var(--red-rgb),.16) 100%);
  --gl-red-hover:linear-gradient(100deg,rgba(var(--red-rgb),.96) 0%,rgba(var(--red-rgb),.58) 55%,rgba(var(--red-rgb),.24) 100%);
  --gl-edge:rgba(255,255,255,.18);
  --gl-blur:saturate(180%) blur(14px);
}
.btn{-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s,box-shadow .25s,filter .2s}
.btn:active{transform:scale(.96);transition-duration:.08s}
.btn--primary,.promo .btn--primary{
  background:var(--gl-hi),var(--gl-red);background-color:rgba(10,10,12,.35);color:#fff;border-color:var(--gl-edge);
  text-shadow:0 1px 1px rgba(0,0,0,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.2),0 12px 30px -14px rgba(var(--red-rgb),.85),0 2px 6px rgba(0,0,0,.3);
}
.btn--primary:hover,.promo .btn--primary:hover{
  background:var(--gl-hi),var(--gl-red-hover);background-color:rgba(10,10,12,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.2),0 18px 40px -14px rgba(255,31,69,.6),0 2px 6px rgba(0,0,0,.3);
}
.btn--ghost{background:var(--gl-hi),rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 8px rgba(0,0,0,.3)}
.btn--ghost:hover{background:var(--gl-hi),rgba(255,255,255,.08)}
.btn--wa{background:var(--gl-hi),linear-gradient(100deg,rgba(37,211,102,.95),rgba(37,211,102,.55));border-color:var(--gl-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 28px -14px rgba(37,211,102,.75)}
.btn:focus-visible{outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 0 0 3px rgba(var(--red-rgb),.45)}
/* Selected nav item: the sidebar red fade. */
.nav__links a[aria-current="page"]{color:#fff;background:var(--gl-hi),linear-gradient(90deg,rgba(var(--red-rgb),.34),rgba(var(--red-rgb),.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 .5px rgba(255,255,255,.1)}
.navpanel a[aria-current="page"]{color:#fff}
/* Numbered step badges and the "required" pill. */
.steps__n{background:var(--gl-hi),linear-gradient(135deg,rgba(var(--red-rgb),.9),rgba(var(--red-rgb),.3));box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 .5px var(--gl-edge),0 8px 20px -10px rgba(var(--red-rgb),.8);text-shadow:0 1px 1px rgba(0,0,0,.3)}
.req{background:linear-gradient(90deg,rgba(var(--red-rgb),.22),rgba(var(--red-rgb),.04))}
/* Small glass pills on the intro video. */
.intro__bar button,.intro__start{-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);background:var(--gl-hi),rgba(0,0,0,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:transform .15s}
.intro__bar button:active{transform:scale(.95)}
.check input,input[type="checkbox"],input[type="radio"]{accent-color:var(--red)}
@media (prefers-reduced-motion:reduce){.btn:active,.intro__bar button:active{transform:none}}

/* ---- Coach-desk iOS look, site-wide (round 9): system body font, glass cards with
   hairlines, no accent strips, glass inputs with the red focus ring. Finish only, no layout. ---- */
:root{
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,sans-serif;
  --glass:rgba(28,28,32,.55);--sep:rgba(255,255,255,.1);--stroke:rgba(255,255,255,.1);
  --fill:rgba(255,255,255,.08);--fill-2:rgba(255,255,255,.12);
  --shadow:0 1px 0 rgba(255,255,255,.06) inset,0 12px 32px -16px rgba(0,0,0,.85);
}
body{font-family:var(--sys);letter-spacing:-.01em}
.req,.opt,.check,#contactWhatsApp,#sendWhatsApp{font-family:var(--sys)}
:focus-visible{outline:2px solid rgba(var(--red-rgb),.7);outline-offset:3px}
/* Glass cards, hairline edges. The red top strip on cards is gone (desk has no accent strips). */
.card,.steps li,.promo-grid article{
  background:var(--glass);border:.5px solid var(--stroke);box-shadow:var(--shadow);
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
}
.card::before{content:none}
.card:hover,.steps li:hover{border-color:rgba(var(--red-rgb),.35)}
.steps__n{border:0}
.callout{background:linear-gradient(180deg,rgba(232,194,122,.08),rgba(232,194,122,.03));border:.5px solid rgba(232,194,122,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.sent{border-width:.5px;box-shadow:var(--shadow)}
.contact__list{border:.5px solid var(--stroke);box-shadow:var(--shadow)}
.contact__list li{background:var(--glass);border-bottom:.5px solid var(--sep);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px)}
.contact__list li:last-child{border-bottom:0}
/* FAQ: hairline rows; open question gets the sidebar red fade. */
.faq{border-top:.5px solid var(--sep)}
.faq details{border-bottom:.5px solid var(--sep)}
.faq summary{border-radius:12px;transition:background .2s,color .2s}
.faq summary:hover{background:var(--fill)}
.faq details[open] summary{color:#fff;background:linear-gradient(90deg,rgba(var(--red-rgb),.22),rgba(var(--red-rgb),.03))}
/* Inputs: iOS fill, no hard border, red focus ring (as on the desk). */
input,select,textarea,.copybox{background:var(--fill);border:.5px solid transparent}
input::placeholder,textarea::placeholder{color:rgba(235,235,245,.3)}
input:focus,select:focus,textarea:focus,.copybox:focus{border-color:transparent;background:var(--fill-2);box-shadow:0 0 0 3px rgba(var(--red-rgb),.35)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:rgba(var(--red-rgb),.8);background:rgba(var(--red-rgb),.1)}
.check--block{background:var(--fill);border:.5px solid transparent}
.check--block:hover{border-color:rgba(255,255,255,.14);background:var(--fill-2)}
.req{border-width:.5px}.opt{border-width:.5px}
.burger{background:var(--gl-hi),var(--fill);border:.5px solid var(--stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.navpanel{border-bottom:.5px solid var(--sep)}
.navpanel a{border-bottom:.5px solid var(--sep)}
.nav__links a:hover{background:var(--fill)}
/* Image frames: hairline edge. */
.frame img,.strip img,.aside__img{border:.5px solid var(--stroke)}

/* =====================================================================================
   Round 10 (2026-10-31): the site IS the app / coach desk. Pure black, glass cards,
   iOS translucent bar, Varsity headings, system body, device-framed app screens,
   home = team gate. Overrides everything above; delete this block to roll back.
   ===================================================================================== */
:root{
  --gold-rgb:232,194,122;
  --radius:22px;
  --glass:rgba(28,28,32,.55);
  --glass-2:rgba(38,38,44,.6);
  --blur:saturate(180%) blur(24px);
  --gl-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.2),0 8px 20px -10px rgba(var(--red-rgb),.6),0 2px 6px rgba(0,0,0,.32);
  --label-2:rgba(235,235,245,.6);
  --label-3:rgba(235,235,245,.3);
}
html{background:#000}
body{
  background:#000;color:var(--text);font-family:var(--sys);font-size:16px;line-height:1.55;letter-spacing:-.01em;
}
/* one soft red light at the top of every page, like the desk login */
body::before{content:"";position:fixed;z-index:-1;inset:-20vh -10vw auto;height:70vh;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%,rgba(var(--red-rgb),.22),rgba(var(--red-rgb),.06) 55%,transparent 75%)}
main{position:relative;z-index:0}

/* ---------- type: Varsity headings (app), system body ---------- */
.display,.h2,.hero__tagline,.promo-hero__title,.gate__title,.promo-close .h2{
  font-family:"Varsity",Impact,sans-serif;font-weight:400;font-style:normal;text-transform:uppercase;letter-spacing:.045em;line-height:1.04;text-shadow:none;
}
.h2{font-size:clamp(28px,3.4vw,44px);margin:0 0 .45em}
.promo-hero__title{font-size:clamp(34px,4.4vw,60px);line-height:1.02}
.hero__tagline{font-size:clamp(24px,2.6vw,34px)}
.display em,.h2 em,.hero__tagline em{color:var(--gold);text-shadow:none;font-style:normal}
.eyebrow{font-family:"Varsity",sans-serif;font-size:12.5px;letter-spacing:.2em;color:var(--gold)}
.pip{background:var(--red);box-shadow:0 0 0 4px rgba(var(--red-rgb),.22),0 0 12px rgba(var(--red-rgb),.8)}
.lead,.promo-hero__lead{color:var(--label-2)}
.fine{color:var(--label-2)}
p{color:inherit}
.card p,.steps p,.promo-grid p,.faq details p{color:var(--label-2)}
.footer__tag{font-family:"Varsity",sans-serif;font-style:normal;font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:var(--gold)}
label,legend,.contact__list span,.mirror__who,.card__num{font-family:var(--sys);font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--label-2)}

/* ---------- iOS translucent bar ---------- */
.nav{background:rgba(22,22,24,.62);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.nav__links{gap:4px;padding:3px;border-radius:999px;background:rgba(118,118,128,.18);border:.5px solid rgba(255,255,255,.06)}
.nav__links a{font-family:var(--sys);font-size:13.5px;font-weight:600;letter-spacing:0;color:var(--label-2);padding:7px 14px}
.nav__links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav__links a[aria-current="page"]{color:#fff;background:var(--gl-hi),var(--gl-red);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 .5px var(--gl-edge),0 6px 16px -8px rgba(var(--red-rgb),.8)}
.navpanel{background:rgba(22,22,24,.82);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px)}
.navpanel a{font-family:var(--sys);font-weight:600;text-transform:none;letter-spacing:0;font-size:17px}
.navpanel a[aria-current="page"]{color:#fff;background:linear-gradient(90deg,rgba(var(--red-rgb),.3),transparent);border-radius:12px;padding-left:12px}
.nav__home-title{font-family:"Varsity",sans-serif;letter-spacing:.08em}

/* ---------- buttons: team red-fade glass pills everywhere ---------- */
.btn{font-family:var(--sys);font-weight:700;font-size:15px;letter-spacing:.01em;text-transform:none;border-radius:999px;padding:13px 24px;min-height:48px}
.btn--sm{padding:9px 16px;min-height:38px;font-size:13.5px}
.btn--lg{padding:16px 32px;min-height:56px;font-size:16.5px}
.btn--primary,.promo .btn--primary{background:var(--gl-hi),var(--gl-red);background-color:rgba(10,10,12,.35);border:.5px solid var(--gl-edge);box-shadow:var(--gl-shadow);color:#fff}
.btn--primary:hover,.promo .btn--primary:hover{background:var(--gl-hi),var(--gl-red-hover);background-color:rgba(10,10,12,.35);box-shadow:var(--gl-shadow),0 14px 34px -14px rgba(var(--red-rgb),.8)}
.btn--ghost{background:var(--gl-hi),rgba(118,118,128,.2);border:.5px solid rgba(255,255,255,.14);color:#fff}
.btn--ghost:hover{color:#fff;border-color:rgba(255,255,255,.24);background:var(--gl-hi),rgba(118,118,128,.3)}
.pick{font-family:var(--sys);font-weight:700;text-transform:none;letter-spacing:0;font-size:14.5px;color:#fff;padding:9px 16px;border-radius:999px;
  background:var(--gl-hi),var(--gl-red);border:.5px solid var(--gl-edge);box-shadow:var(--gl-shadow)}
.pick:hover{color:#fff;background:var(--gl-hi),var(--gl-red-hover)}
.linkbtn,.fine a{color:var(--gold)}

/* ---------- glass cards, hairlines, no strips ---------- */
.card,.steps li,.promo-grid article,.callout,.sent,.aside,.home-club__card,.merch,.mirror__bubble,.faq,.contact > div:first-child{
  background:var(--glass);border:.5px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
}
.card::before,.card::after{content:none !important}
.card:hover,.steps li:hover,.promo-grid article:hover{border-color:rgba(var(--red-rgb),.4);transform:translateY(-2px)}
.card,.steps li,.promo-grid article{transition:border-color .25s,transform .25s var(--ease)}
.card h3,.steps h3,.promo-grid h3,.callout h3,.sent h3,.aside h3{font-family:"Varsity",sans-serif;font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.card__num{color:rgba(var(--gold-rgb),.7);font-family:"Varsity",sans-serif;letter-spacing:.14em}
.callout{background:linear-gradient(180deg,rgba(var(--gold-rgb),.1),rgba(var(--gold-rgb),.02)),var(--glass);border-color:rgba(var(--gold-rgb),.3)}
.aside{padding:clamp(20px,2.4vw,28px)}
.aside__img{border:0;background:transparent}
.ticks li{color:rgba(235,235,245,.82)}
.ticks li::before{border-color:var(--red)}
/* section backgrounds go flat black; hairline dividers instead of bands */
.section,.section--tint,.section--register,.section--contact,.promo-mirror{background:transparent;border:0}
.section + .section{border-top:.5px solid var(--sep)}

/* ---------- inputs: iOS fill ---------- */
input,select,textarea,.copybox{border-radius:12px;font-family:var(--sys)}
.check--block{border-radius:12px}

/* ---------- FAQ as one grouped inset list (iOS settings) ---------- */
.faq{padding:6px;margin-top:clamp(20px,3vw,30px)}
.faq details{border:0;border-bottom:.5px solid var(--sep);border-radius:0;background:transparent;box-shadow:none;margin:0}
.faq details:last-child{border-bottom:0}
.faq details[open]{background:transparent;border-color:var(--sep)}
.faq summary{font-family:var(--sys);font-weight:600;text-transform:none;letter-spacing:0;font-size:16.5px;padding:15px 16px;position:relative}
.faq summary::before{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--label-3);border-bottom:2px solid var(--label-3);transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::before{transform:translateY(-30%) rotate(-135deg);border-color:#fff}
.faq summary{padding-right:44px}
.faq details p{padding:0 16px 16px;margin:0}

/* ---------- contact: grouped list ---------- */
.contact > div:first-child{padding:clamp(22px,2.6vw,32px)}
.contact__list{border-radius:var(--radius);overflow:hidden;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.contact__list li{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.contact__list a{color:var(--gold)}

/* ---------- device frames for every app screen ---------- */
.device,.promo-phone,.promo-frame,.promo-shots figure{
  position:relative;margin:0;padding:7px;border-radius:44px;
  background:linear-gradient(160deg,#3a3a40,#121214 40%,#1d1d21);
  border:0;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.35),0 0 0 1px #000,0 40px 80px -30px rgba(0,0,0,.95),0 24px 60px -30px rgba(var(--red-rgb),.55);
}
.device img,.promo-phone img,.promo-frame > img,.promo-shots img{display:block;width:100%;height:auto;border-radius:37px;border:0;box-shadow:none}
.device::after,.promo-phone::after{content:"";position:absolute;top:15px;left:50%;width:28%;height:3.1%;min-height:14px;transform:translateX(-50%);border-radius:999px;background:#000;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.06)}
.promo-frame{padding:7px;border-radius:40px;background:linear-gradient(160deg,#3a3a40,#121214 40%,#1d1d21)}
.promo-frame > img{border-radius:33px;width:min(320px,74vw)}
.compare__now,.compare__alt{padding:6px;border:0;border-radius:40px;background:linear-gradient(160deg,#3a3a40,#121214 40%,#1d1d21);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.35),0 0 0 1px #000,0 30px 60px -30px rgba(0,0,0,.95),0 18px 44px -28px rgba(var(--red-rgb),.5)}
.shots__s{border-radius:22px;border:3px solid #1c1c20;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3),0 22px 44px -24px rgba(0,0,0,.95)}

/* ---------- the-app page ---------- */
.promo-hero__court{background:radial-gradient(60% 70% at 78% 40%,rgba(var(--red-rgb),.28),transparent 62%),transparent}
main.promo{background:transparent}
.promo-grid{gap:14px}
.promo-grid article{padding:clamp(20px,2.2vw,28px)}
.mirror__bubble{border-radius:20px 20px 20px 6px;background:var(--glass-2)}
.mirror__bubble--parent{border-radius:20px 20px 6px 20px;background:linear-gradient(180deg,rgba(var(--gold-rgb),.16),rgba(var(--gold-rgb),.03)),var(--glass-2);border-color:rgba(var(--gold-rgb),.3)}
.promo-close__mark{filter:drop-shadow(0 20px 40px rgba(var(--red-rgb),.45))}

/* ---------- merch: glass card over the glowing Thunder mark ---------- */
.section--merch .merch{padding:clamp(28px,4vw,44px) clamp(22px,4vw,48px);max-width:560px;background:rgba(20,20,24,.55)}
.section--merch .merch .h2,.section--merch .merch .lead{text-shadow:none}
.merch__logo{opacity:.55;filter:drop-shadow(0 0 60px rgba(var(--red-rgb),.55)) saturate(1.1)}

/* ---------- join ---------- */
.join-intro__mark{filter:drop-shadow(0 20px 40px rgba(var(--red-rgb),.4))}
.steps__n{font-family:"Varsity",sans-serif}

/* ---------- footer: bar like the app tab bar ---------- */
.footer{background:rgba(14,14,16,.7);border-top:.5px solid var(--sep);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.footer__nav h3{font-family:var(--sys);font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--label-2);font-size:13px}
.footer__nav a{color:rgba(235,235,245,.85)}
.footer__base p{color:var(--label-3)}
.footer__crest{filter:drop-shadow(0 8px 24px rgba(var(--red-rgb),.35))}

/* =========================== Home: team gate =========================== */
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero.gate{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:auto;max-height:none;min-height:100svh;
  padding:calc(var(--nav-h,52px) + 24px) var(--gutter) 64px;overflow:hidden;isolation:isolate}
.gate .hero__fit{width:100%;max-width:420px;transform:none;margin:0 auto}
.gate .hero__squad{position:relative;inset:auto;left:auto;transform:none;width:100%;max-width:420px;margin:0 auto;opacity:1;pointer-events:auto;z-index:2}
.gate__glow{position:absolute;z-index:0;left:50%;top:55%;width:min(760px,130vw);height:min(560px,90vw);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%,rgba(var(--red-rgb),.55),rgba(var(--red-rgb),.18) 45%,transparent 72%);filter:blur(40px);transition:background .6s ease}
.gate__ecg{position:absolute;z-index:1;left:0;right:0;top:56%;height:120px;transform:translateY(-50%);pointer-events:none;line-height:0;color:var(--red);opacity:.85;transition:color .6s ease}
.gate__ecg svg{display:block;overflow:visible;filter:drop-shadow(0 0 6px rgba(var(--red-rgb),.85))}
.gate__card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:30px 28px 26px;text-align:center;
  background:rgba(28,28,32,.58);border:.5px solid rgba(255,255,255,.14);border-radius:28px;
  -webkit-backdrop-filter:saturate(180%) blur(28px);backdrop-filter:saturate(180%) blur(28px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 80px -30px rgba(0,0,0,.95),0 0 0 .5px rgba(0,0,0,.6)}
.gate__crest{width:112px;height:auto;margin:0 auto 2px;filter:drop-shadow(0 10px 26px rgba(var(--red-rgb),.5))}
.gate__card img.gate__crest[src^="https:"]{width:96px;height:96px;object-fit:contain;border-radius:24px}
/* r14: the crest sits inside .hero__squad, so the old hero-photo rule (3:2 aspect-ratio, object-fit:cover, edge mask)
   was cropping the top and bottom of the logo. Undo all of that: whole logo, never cut off, at every width. */
.gate .gate__crest{aspect-ratio:auto;max-width:100%;max-height:none;object-fit:contain;object-position:center;-webkit-mask-image:none;mask-image:none}
/* r14: the red glow hugs the card. The old .gate__glow was 760x560 on the whole section and spilled far past the card;
   now it sits inside the card's own footprint (inset + blur stays within the edges) and shows through the glass. */
.gate__glow{display:none}
/* r16: the glow now sits behind the crest at the top of the card. It covers the card's own box (inset:0, same radius)
   and the soft radial gradient fades to nothing before the edges, so no blur is needed and nothing spills out.
   --crest-y = card top padding + half the crest height (measured: 197px desktop, 170px phone; 78px for a 96px team crest). */
.gate__stage{--crest-y:197px}
.gate__stage::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:28px;pointer-events:none;
  background:radial-gradient(ellipse 46% 190px at 50% var(--crest-y),rgba(var(--red-rgb),.62),rgba(var(--red-rgb),.26) 45%,rgba(var(--red-rgb),.08) 72%,transparent 100%);
  transition:background .6s ease}
.gate__stage:has(img.gate__crest[src^="https:"]){--crest-y:78px}
.gate__eyebrow{margin:0;justify-content:center}
.gate__title{margin:0;font-size:clamp(34px,8vw,46px);color:#fff;overflow-wrap:anywhere}
.gate.is-themed .gate__title{color:#fff;text-shadow:0 0 30px rgba(var(--red-rgb),.6)}
.gate__lead{margin:0 0 6px;color:var(--label-2);font-size:15.5px}
.gate__form{display:flex;flex-direction:column;gap:10px;margin:0}
.gate__form input{text-align:center;font-family:"Varsity",sans-serif;font-size:22px;letter-spacing:.24em;text-transform:uppercase;padding:15px 14px;border-radius:14px}
.gate__form input::placeholder{font-size:16px;letter-spacing:.2em;color:var(--label-3)}
.gate__go{width:100%;min-height:52px}
.gate__step,.gate__panel{display:flex;flex-direction:column;gap:10px}
.gate__step[hidden],.gate__panel[hidden],.gate__form[hidden]{display:none !important}
.gate__fine{margin:4px 0 0;font-size:13px}
.gate__back{align-self:center;margin-top:4px;font-size:14px}
.gate__code{margin:0;padding:12px;border-radius:14px;background:var(--fill);font-family:"Varsity",sans-serif;font-size:24px;letter-spacing:.24em;color:#fff}
.gate__mock{position:absolute;top:-12px;left:50%;transform:translateX(-50%);margin:0;padding:4px 12px;border-radius:999px;background:#ffcc00;color:#000;font-size:11.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.gate .err{text-align:center}
.gate__coach{align-self:center;margin-top:6px;font-size:12.5px;font-weight:500;color:var(--label-3);text-decoration:none}
.gate__coach:hover{color:var(--label-2);text-decoration:underline}
.gate__more{position:relative;z-index:2;margin-top:22px;font-size:13.5px;font-weight:600;color:var(--label-2);padding:8px 14px;border-radius:999px;background:rgba(118,118,128,.18);border:.5px solid rgba(255,255,255,.08)}
.gate__more:hover{color:#fff}

/* Home: club section */
.home-club__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;overflow:visible}
.home-club__card{padding:clamp(24px,3vw,40px)}
.home-club__card .hero__tagline{margin:0 0 .3em}
.home-club__card .ticks--hero{margin:16px 0 0;max-width:none}
.home-club__card .hero__cta{justify-content:flex-start;margin:24px 0 0}
.home-club__card .hero__meta{margin-top:16px}
.devices{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:clamp(380px,46vw,560px)}
.devices .device{width:clamp(150px,15vw,220px);flex:0 0 auto}
.devices .device--l{transform:translateX(18%) rotate(-7deg) translateY(18px);z-index:1}
.devices .device--c{z-index:2;width:clamp(170px,17vw,250px)}
.devices .device--r{transform:translateX(-18%) rotate(7deg) translateY(18px);z-index:1}
html.intro-seen .gate__card,.gate__card{animation:gate-in .9s var(--ease) both}
@keyframes gate-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .home-club__grid{grid-template-columns:1fr}
  .devices{min-height:0;padding-top:10px}
  .devices .device{width:min(32vw,150px)}
  .devices .device--c{width:min(38vw,180px)}
  .hero.gate{padding-top:calc(var(--nav-h,52px) + 18px);padding-bottom:40px}
  .nav__links{display:none}
}
@media (max-width:600px){
  .gate__card{padding:26px 20px 22px;border-radius:24px}
  .gate__stage{--crest-y:170px}
  .gate__stage::before{border-radius:24px}
  .gate__stage:has(img.gate__crest[src^="https:"]){--crest-y:74px}
  .home-club__card .hero__cta .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .gate__card{animation:none}
  .card:hover,.steps li:hover,.promo-grid article:hover{transform:none}
}

/* =========================== r11: slim footer, coaches, legal =========================== */
.footer--slim{padding:18px 0 calc(18px + env(safe-area-inset-bottom))}
.footer__slim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;overflow:visible}
.footer__copy{margin:0;font-size:12.5px;color:var(--label-3)}
.footer__legal{display:flex;flex-wrap:wrap;gap:4px 20px}
.footer__legal a{font-size:13.5px;color:rgba(235,235,245,.85);min-height:26px;display:inline-flex;align-items:center;transition:color .2s}
.footer__legal a:hover{color:#fff}
@media (max-width:520px){.footer__slim{flex-direction:column-reverse;align-items:flex-start}}

/* coaches */
.coach-hero{position:relative;padding:calc(var(--nav-h,52px) + clamp(40px,7vw,96px)) 0 clamp(28px,4vw,48px);text-align:center;overflow:hidden;isolation:isolate}
.coach-hero::before{content:"";position:absolute;z-index:-1;left:50%;top:60%;width:min(760px,130vw);height:min(460px,80vw);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(ellipse at 50% 55%,rgba(var(--red-rgb),.45),rgba(var(--red-rgb),.12) 45%,transparent 72%);filter:blur(40px);pointer-events:none}
.coach-hero__inner{display:flex;flex-direction:column;align-items:center;overflow:visible}
.coach-hero .eyebrow{justify-content:center}
.coach-hero__title{margin:0 0 .3em;font-size:clamp(40px,7vw,76px);color:#fff}
.coach-hero__lead{margin:0 auto;max-width:34em;font-size:clamp(16px,1.6vw,19px);color:var(--label-2)}
.coach-hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.coach-vip .h2,.coach-vip__lead{text-align:center}
.coach-vip__lead{margin:0 auto 28px;max-width:40em;color:var(--label-2)}
.coach-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.coach-feat,.coach-how__card,.legal-card,.pillar{
  background:var(--glass);border:.5px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.coach-feat{padding:22px 22px 20px}
.coach-feat h3{margin:0 0 8px;font-family:var(--sys);font-weight:700;font-size:17px;letter-spacing:0;text-transform:none;color:#fff}
.coach-feat p{margin:0;color:var(--label-2);font-size:15px;line-height:1.55}
.coach-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;color:#fff;background:rgba(255,255,255,.08);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}
.coach-how__card{max-width:760px;margin:0 auto;padding:clamp(24px,3.4vw,40px)}
.coach-how__card .h2{text-align:center}
.coach-steps{margin:8px 0 18px;padding:0;list-style:none;counter-reset:cs;display:grid;gap:14px}
.coach-steps li{position:relative;padding-left:44px;color:var(--label-2);line-height:1.55;counter-increment:cs}
.coach-steps li::before{content:counter(cs);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--red);color:#fff;font:700 14px/1 var(--sys)}
.coach-steps strong{color:#fff}
.coach-how__card .fine{text-align:center}
.coach-how__card .coach-hero__cta{margin-top:18px}

/* legal (content from the app repo's public/ pages) */
.legal{padding:calc(var(--nav-h,52px) + clamp(28px,5vw,64px)) 0 clamp(40px,6vw,80px)}
.legal__wrap{max-width:880px;overflow:visible}
.legal-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;margin:0 0 clamp(24px,4vw,40px)}
.legal-hero:not(:has(.legal-hero__visual)){grid-template-columns:1fr}
.legal-hero h1{margin:.2em 0 .3em;font-size:clamp(34px,5.4vw,58px);color:#fff;line-height:1.05}
.legal-hero__badge{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(var(--red-rgb),.18);border:.5px solid rgba(var(--red-rgb),.5);color:#fff;font:600 12.5px/1.2 var(--sys);letter-spacing:.02em}
.legal-hero__tagline{margin:0 0 .6em;color:var(--label-2);font-size:clamp(16px,1.6vw,18px);line-height:1.55}
.legal .meta{margin:0;color:var(--label-3);font-size:13px}
.legal-hero__visual img{display:block;width:100%;height:auto;border-radius:var(--radius);border:.5px solid var(--stroke);box-shadow:var(--shadow)}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;margin:0 0 16px}
.pillar{padding:18px}
.pillar__icon{font-size:24px;line-height:1;display:block;margin-bottom:8px}
.pillar h3{margin:0 0 6px;font-family:var(--sys);font-weight:700;font-size:16px;text-transform:none;letter-spacing:0;color:#fff}
.pillar p{margin:0;font-size:14px;line-height:1.5;color:var(--label-2)}
.legal-card{padding:clamp(20px,3vw,30px);margin:0 0 12px}
.legal-card h2{margin:0 0 .5em;font-family:var(--sys);font-weight:700;font-style:normal;font-size:clamp(19px,2vw,22px);text-transform:none;letter-spacing:0;color:#fff}
.legal-card p,.legal-card li{color:var(--label-2);font-size:15.5px;line-height:1.65}
.legal-card p{margin:0 0 .8em}
.legal-card p:last-child,.legal-card ul:last-child{margin-bottom:0}
.legal-card ul{margin:0 0 .8em;padding-left:1.2em}
.legal-card li{margin:.25em 0}
.legal-card strong{color:#fff}
.legal-card a{color:#fff;text-decoration:underline;text-decoration-color:rgba(var(--red-rgb),.8);text-underline-offset:3px;overflow-wrap:anywhere}
@media (max-width:720px){.legal-hero{grid-template-columns:1fr}}

/* =========================== r12: header with no bar =========================== */
/* Logo left, links right, sitting straight on the page: no panel, blur, border or shadow.
   Absolute (not fixed) so it scrolls away with the page and never floats over body text. */
.nav{position:absolute;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none}
.nav__links{background:transparent;border:0;padding:0;gap:2px}
.nav__links a,.nav__home-title{text-shadow:0 1px 10px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6)}
.nav__links a{color:rgba(255,255,255,.88)}
.nav__links a[aria-current="page"]{text-shadow:none}
.brand__mark{filter:drop-shadow(0 2px 10px rgba(0,0,0,.7))}
.navpanel{position:absolute}
/* r13: Back / App / Privacy / Terms / Delete account use the exact same pills as Sign up / Coaches / The App. */
.nav__links a{white-space:nowrap}

/* =========================== r16: coaches hero glow, coaches VIP + steps, The App showcase =========================== */
/* Coaches hero: no more flat cut under the buttons. The hero no longer clips; the glow runs past its bottom edge
   and a mask fades it to nothing before "What VIP gives you". main clips sideways only, so no horizontal scroll. */
main.coaches{overflow-x:clip}
.coach-hero{overflow:visible}
.coach-hero::before{top:0;bottom:calc(-1 * clamp(36px,5vw,72px));height:auto;transform:translateX(-50%);width:min(1040px,150vw);border-radius:0;
  background:radial-gradient(58% 52% at 50% 56%,rgba(var(--red-rgb),.5),rgba(var(--red-rgb),.2) 46%,rgba(var(--red-rgb),.06) 70%,transparent 86%);
  filter:blur(26px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 58%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 58%,transparent 100%)}
.coach-vip{padding-top:clamp(40px,6vw,80px)}

/* shared: icon tile + arrow */
.ico{flex:0 0 auto;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:var(--gl-hi),var(--gl-red);background-color:rgba(10,10,12,.35);border:.5px solid var(--gl-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 10px 24px -12px rgba(var(--red-rgb),.95)}
.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.go{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:#fff}
.go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}

/* shared: the poppier glass card (team colour edge, corner glow, lift on hover) */
.pop{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;color:inherit;text-decoration:none;
  padding:22px 22px 20px;border-radius:22px;border:.5px solid rgba(255,255,255,.12);
  background:linear-gradient(165deg,rgba(var(--red-rgb),.14),rgba(28,28,32,.62) 38%,rgba(20,20,24,.7));
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -26px rgba(0,0,0,.95);
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.pop::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent 4%,rgba(var(--red-rgb),.95) 50%,transparent 96%);opacity:.75}
.pop::after{content:"";position:absolute;z-index:-1;right:-30%;top:-40%;width:80%;height:90%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--red-rgb),.32),transparent);opacity:.55;transition:opacity .4s}
.pop h3{margin:16px 0 8px;font-family:var(--sys);font-weight:700;font-size:17.5px;letter-spacing:0;text-transform:none;color:#fff}
.pop p{margin:0;color:var(--label-2);font-size:15px;line-height:1.55}
.pop .go{margin-top:auto;padding-top:16px}
a.pop:hover,a.pop:focus-visible{transform:translateY(-5px);border-color:rgba(var(--red-rgb),.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 26px 50px -24px rgba(var(--red-rgb),.7)}
a.pop:hover::after,a.pop:focus-visible::after{opacity:1}
a.pop:hover .go svg,a.pop:focus-visible .go svg{transform:translateX(4px)}
a.pop:focus-visible{outline:2px solid rgba(var(--red-rgb),.9);outline-offset:3px}

/* coaches: feature grid */
.coach-feats{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.coach-feat--wide{grid-column:span 2}
.coach-feat--wide .coach-feat__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:center;flex:1}
.coach-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.coach-chips li{padding:6px 11px;border-radius:999px;font-size:13px;font-weight:600;color:#fff;
  background:rgba(var(--red-rgb),.16);border:.5px solid rgba(var(--red-rgb),.45)}
.url-pill{display:flex;align-items:center;gap:8px;margin:14px 0 0;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.4);border:.5px solid rgba(255,255,255,.12);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:#fff;overflow-wrap:anywhere}
.url-pill::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#30d158;box-shadow:0 0 8px #30d158}
.url-pill b{color:rgba(var(--red-rgb),1);font-weight:700;filter:brightness(1.5)}
/* coach desk mock (CSS only) */
.desk-mock{border-radius:14px;overflow:hidden;background:#0b0b0e;border:.5px solid rgba(255,255,255,.14);box-shadow:0 20px 40px -24px #000}
.desk-mock__bar{display:flex;gap:6px;padding:9px 10px;background:rgba(255,255,255,.05);border-bottom:.5px solid rgba(255,255,255,.08)}
.desk-mock__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}
.desk-mock__tabs{display:flex;flex-wrap:wrap;gap:5px;padding:10px 10px 0}
.desk-mock__tabs span{font-size:10.5px;font-weight:600;padding:4px 8px;border-radius:999px;color:var(--label-2);background:rgba(118,118,128,.18)}
.desk-mock__tabs span.on{color:#fff;background:var(--gl-hi),var(--gl-red)}
.desk-mock__body{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;padding:12px 10px 12px}
.desk-mock__chart{display:flex;align-items:flex-end;gap:5px;height:74px;padding:8px;border-radius:10px;background:rgba(255,255,255,.04)}
.desk-mock__chart b{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,rgba(var(--red-rgb),.95),rgba(var(--red-rgb),.25));height:40%;transform-origin:bottom}
.desk-mock__chart b:nth-child(2){height:62%}.desk-mock__chart b:nth-child(3){height:48%}.desk-mock__chart b:nth-child(4){height:82%}
.desk-mock__chart b:nth-child(5){height:58%}.desk-mock__chart b:nth-child(6){height:94%}.desk-mock__chart b:nth-child(7){height:70%}
.desk-mock__rows{display:flex;flex-direction:column;gap:7px;padding:8px;border-radius:10px;background:rgba(255,255,255,.04)}
.desk-mock__rows i{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.12)}
.desk-mock__rows i:nth-child(1){width:90%}.desk-mock__rows i:nth-child(2){width:70%}.desk-mock__rows i:nth-child(3){width:82%;background:rgba(var(--red-rgb),.5)}.desk-mock__rows i:nth-child(4){width:56%}
html.promo-motion .rise.is-in .desk-mock__chart b{animation:bar-up .9s var(--ease) both}
html.promo-motion .rise.is-in .desk-mock__chart b:nth-child(n){animation-delay:calc(var(--i,0) * 70ms)}
.desk-mock__chart b:nth-child(2){--i:1}.desk-mock__chart b:nth-child(3){--i:2}.desk-mock__chart b:nth-child(4){--i:3}.desk-mock__chart b:nth-child(5){--i:4}.desk-mock__chart b:nth-child(6){--i:5}.desk-mock__chart b:nth-child(7){--i:6}
@keyframes bar-up{from{transform:scaleY(.05)}to{transform:none}}

/* coaches: How to get VIP, numbered steps */
.coach-how__card{max-width:1040px;background:linear-gradient(170deg,rgba(var(--red-rgb),.12),rgba(28,28,32,.6) 40%);border-color:rgba(255,255,255,.12)}
.coach-how__lead{margin:0 auto 26px;max-width:40em;text-align:center;color:var(--label-2)}
.price-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 30px;padding:0;list-style:none}
.price-strip li{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;font-size:14px;font-weight:600;color:#fff;background:rgba(255,255,255,.06);border:.5px solid rgba(255,255,255,.12)}
.price-strip li b{font-family:"Varsity",sans-serif;font-weight:400;letter-spacing:.04em;font-size:15px}
.price-strip li.hot{background:var(--gl-hi),var(--gl-red);border-color:var(--gl-edge)}
.vip-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 22px;padding:0;list-style:none}
.vip-steps::before{content:"";position:absolute;z-index:0;left:12%;right:12%;top:50px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(var(--red-rgb),.15),rgba(var(--red-rgb),.85),rgba(var(--red-rgb),.15))}
.vip-step{position:relative;z-index:1;display:flex}
.vip-step > .pop{flex:1;align-items:center;text-align:center;padding:22px 16px 18px}
.vip-step__num{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-family:"Varsity",sans-serif;font-size:24px;color:#fff;
  background:var(--gl-hi),radial-gradient(circle at 35% 30%,rgba(var(--red-rgb),1),rgba(var(--red-rgb),.45));border:.5px solid var(--gl-edge);
  box-shadow:0 0 0 6px rgba(var(--red-rgb),.14),0 12px 28px -10px rgba(var(--red-rgb),.95)}
.vip-step h3{margin:14px 0 6px}
.vip-step p{font-size:14.5px}
.vip-step .tag{display:inline-block;margin-top:auto;padding-top:14px;font-size:12.5px;font-weight:600;color:var(--label-3)}
@media (max-width:980px){
  .coach-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vip-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vip-steps::before{display:none}
}
@media (max-width:640px){
  .coach-feats{grid-template-columns:1fr}
  .coach-feat--wide{grid-column:auto}
  .coach-feat--wide .coach-feat__row{grid-template-columns:1fr}
  .vip-steps{grid-template-columns:1fr;gap:12px}
  .vip-steps::before{display:block;left:43px;right:auto;top:28px;bottom:28px;width:2px;height:auto;
    background:linear-gradient(180deg,rgba(var(--red-rgb),.15),rgba(var(--red-rgb),.85),rgba(var(--red-rgb),.15))}
  .vip-step > .pop{flex-direction:row;align-items:flex-start;text-align:left;gap:14px;padding:16px}
  .vip-step__num{flex:0 0 auto;width:48px;height:48px;font-size:20px}
  .vip-step h3{margin:2px 0 6px}
  .vip-step .tag{padding-top:8px}
}

/* stagger for grids that reveal on scroll */
html.promo-motion .stagger > .rise:nth-child(2){transition-delay:70ms}
html.promo-motion .stagger > .rise:nth-child(3){transition-delay:140ms}
html.promo-motion .stagger > .rise:nth-child(4){transition-delay:210ms}
html.promo-motion .stagger > .rise:nth-child(5){transition-delay:280ms}
html.promo-motion .stagger > .rise:nth-child(6){transition-delay:350ms}
html.promo-motion .stagger > .rise:nth-child(7){transition-delay:420ms}
html.promo-motion .stagger > .rise:nth-child(8){transition-delay:490ms}
html.promo-motion .stagger > .rise:nth-child(9){transition-delay:560ms}
html.promo-motion .stagger > .rise.is-in{transition-property:opacity,transform,border-color,box-shadow}
html.promo-motion .stagger > .rise.is-in:hover{transition-delay:0s}

/* ---- The App showcase ---- */
.sx-jump{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.sx-jump a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:#fff;text-decoration:none;
  background:rgba(118,118,128,.2);border:.5px solid rgba(255,255,255,.12);transition:background .2s,border-color .2s,transform .2s var(--ease)}
.sx-jump a:hover,.sx-jump a:focus-visible{background:var(--gl-hi),var(--gl-red);border-color:var(--gl-edge);transform:translateY(-2px)}
.sx-sec{position:relative;padding:clamp(56px,8vw,108px) 0;scroll-margin-top:calc(var(--nav-h,52px) + 8px)}
.sx-sec--glow::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 40%,rgba(var(--red-rgb),.14),transparent 70%)}
.sx-head{max-width:62ch;margin:0 0 clamp(24px,3.4vw,40px)}
.sx-head .lead--sm{color:var(--label-2)}
.sx-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 12px;border-radius:999px;font-family:"Varsity",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(var(--red-rgb),.18);border:.5px solid rgba(var(--red-rgb),.5)}
.sx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sx-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx-grid .pop h3{margin-top:14px}
.sx-how{margin:12px 0 0;padding:10px 12px;border-radius:12px;font-size:13.5px;line-height:1.5;color:var(--label-2);background:rgba(0,0,0,.32);border:.5px solid rgba(255,255,255,.08)}
.sx-how b{color:#fff;font-weight:700}
.sx-badge{position:absolute;top:18px;right:18px;z-index:2;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--gl-hi),var(--gl-red);border:.5px solid var(--gl-edge)}
.sx-badge--free{background:rgba(48,209,88,.18);border-color:rgba(48,209,88,.5);color:#7ef0a0}
.sx-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.sx-split--rev > :first-child{order:2}
.sx-list{display:grid;gap:12px;margin:22px 0 0;padding:0;list-style:none}
.sx-list li{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:16px;background:rgba(28,28,32,.5);border:.5px solid rgba(255,255,255,.08)}
.sx-list li .ico{width:40px;height:40px;border-radius:12px}
.sx-list li .ico svg{width:20px;height:20px}
.sx-list b{display:block;color:#fff;margin-bottom:2px}
.sx-list span{color:var(--label-2);font-size:14.5px;line-height:1.5}
.sx-phone{justify-self:center;width:min(300px,72vw);margin:0;padding:8px;border-radius:36px;background:linear-gradient(180deg,rgba(var(--red-rgb),.55),rgba(255,255,255,.06));box-shadow:0 40px 80px -36px #000,0 0 60px -20px rgba(var(--red-rgb),.6)}
.sx-phone img{display:block;width:100%;height:auto;border-radius:29px}

/* Locker Room mock post */
.lr-feed{display:grid;gap:14px;justify-self:center;width:min(380px,100%)}
.lr-post{border-radius:20px;overflow:hidden;background:rgba(28,28,32,.75);border:.5px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -30px #000}
.lr-post__head{display:flex;align-items:center;gap:10px;padding:12px 14px}
.lr-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;background:var(--gl-hi),var(--gl-red)}
.lr-av--g{background:linear-gradient(135deg,#ffcc00,#ff9500)}
.lr-post__who b{display:block;color:#fff;font-size:14.5px}
.lr-post__who span{font-size:12px;color:var(--label-3)}
.lr-post__text{margin:0;padding:0 14px 12px;color:#fff;font-size:14.5px;line-height:1.45}
.lr-post__img{display:block;width:100%;height:190px;object-fit:cover;object-position:center 30%}
.lr-post__bar{display:flex;gap:18px;padding:10px 14px;border-top:.5px solid rgba(255,255,255,.08);font-size:13px;font-weight:600;color:var(--label-2)}
.lr-post__bar span{display:inline-flex;align-items:center;gap:6px}
.lr-post__bar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lr-post__bar .liked{color:#ff375f}.lr-post__bar .liked svg{fill:currentColor;stroke:currentColor}
.lr-comment{margin:0 14px 12px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.06);font-size:13.5px;color:var(--label-2)}
.lr-comment b{color:#fff}
.lr-voice{display:flex;align-items:center;gap:10px;margin:0 14px 14px;padding:10px 12px;border-radius:999px;background:rgba(var(--red-rgb),.16);border:.5px solid rgba(var(--red-rgb),.4)}
.lr-voice i{display:block;width:3px;border-radius:2px;background:#fff;opacity:.85;height:10px}
.lr-voice i:nth-child(3n){height:18px}.lr-voice i:nth-child(4n){height:6px}.lr-voice i:nth-child(5n){height:14px}
.lr-voice span{margin-left:auto;font-size:12px;color:#fff}
html.promo-motion .lr-voice i{animation:wave 1.2s ease-in-out infinite}
html.promo-motion .lr-voice i:nth-child(2n){animation-delay:.15s}html.promo-motion .lr-voice i:nth-child(3n){animation-delay:.3s}
@keyframes wave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.2)}}

/* Readiness ring (Apple Health) */
.ring-card{justify-self:center;width:min(340px,100%);padding:24px;border-radius:26px;text-align:center;background:rgba(28,28,32,.7);border:.5px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -30px #000}
.ring{position:relative;width:180px;height:180px;margin:0 auto 14px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:14;stroke-linecap:round}
.ring .bg{stroke:rgba(255,255,255,.08)}
.ring .fg{stroke:url(#ringGrad);stroke-dasharray:440;stroke-dashoffset:79}
html.promo-motion .rise .ring .fg{stroke-dashoffset:440}
html.promo-motion .rise.is-in .ring .fg{stroke-dashoffset:79;transition:stroke-dashoffset 1.6s var(--ease) .2s}
.ring b{position:absolute;inset:0;display:grid;place-content:center;font-family:"Varsity",sans-serif;font-weight:400;font-size:46px;color:#fff;line-height:1}
.ring b small{display:block;margin-top:6px;font-family:var(--sys);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--label-3)}
.ring-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ring-stats div{padding:10px 6px;border-radius:12px;background:rgba(255,255,255,.05)}
.ring-stats b{display:block;color:#fff;font-size:16px}
.ring-stats span{font-size:11.5px;color:var(--label-3)}

/* VIP colour changer demo */
.cc{justify-self:center;width:min(380px,100%);padding:20px;border-radius:26px;background:rgba(28,28,32,.7);border:.5px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -30px #000;transition:box-shadow .6s ease}
.cc__preview{position:relative;overflow:hidden;padding:18px;border-radius:18px;background:linear-gradient(160deg,rgba(var(--cc-rgb,209,0,35),.55),rgba(var(--cc-rgb,209,0,35),.12) 55%,#0b0b0e);border:.5px solid rgba(255,255,255,.14);transition:background .6s ease}
.cc__preview p{margin:0;font-family:"Varsity",sans-serif;font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.75)}
.cc__preview h4{margin:6px 0 14px;font-family:"Varsity",sans-serif;font-weight:400;font-size:26px;color:#fff}
.cc__btn{display:inline-flex;padding:9px 16px;border-radius:999px;font-size:13px;font-weight:700;color:#fff;
  background:var(--gl-hi),linear-gradient(100deg,rgba(var(--cc-rgb,209,0,35),.9),rgba(var(--cc-rgb,209,0,35),.4) 60%,rgba(var(--cc-rgb,209,0,35),.15));border:.5px solid var(--gl-edge);transition:background .6s ease}
.cc__acc{display:inline-block;margin-left:10px;width:12px;height:12px;border-radius:50%;background:var(--cc-acc,#fff);vertical-align:middle;box-shadow:0 0 10px var(--cc-acc,#fff)}
.cc__sw{display:flex;gap:10px;justify-content:center;margin:16px 0 0;padding:0;list-style:none}
.cc__sw button{width:38px;height:38px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.2);background:var(--sw);transition:transform .2s var(--ease),border-color .2s}
.cc__sw button:hover{transform:scale(1.1)}
.cc__sw button[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.15)}
.cc__note{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--label-3)}

/* VIP vs free table */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(24px,3vw,36px)}
.tiers ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.tiers li{padding:6px 11px;border-radius:999px;font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.07);border:.5px solid rgba(255,255,255,.12)}
.tiers .pop--vip li{background:rgba(var(--red-rgb),.16);border-color:rgba(var(--red-rgb),.45)}
.tiers .pop h3{margin-top:0}

/* DOC voice orb */
.doc-chat{display:grid;gap:10px;margin:22px 0 0;max-width:460px}
.doc-chat p{margin:0;padding:11px 14px;border-radius:18px;font-size:14.5px;line-height:1.45;max-width:88%}
.doc-chat .me{justify-self:end;background:var(--gl-hi),var(--gl-red);color:#fff;border-bottom-right-radius:6px}
.doc-chat .doc{justify-self:start;background:rgba(44,44,50,.85);color:#fff;border:.5px solid rgba(255,255,255,.1);border-bottom-left-radius:6px}
.doc-chat .doc b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--label-3);margin-bottom:3px}

.sx-more{margin:26px 0 0;padding:16px 18px;border-radius:18px;text-align:center;color:var(--label-2);background:rgba(255,255,255,.04);border:.5px dashed rgba(255,255,255,.18)}
.sx-more b{color:#fff}

html.promo-motion a.pop.rise.is-in:hover,html.promo-motion a.pop.rise.is-in:focus-visible{transform:translateY(-5px);transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
@media (max-width:980px){
  .sx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .sx-grid,.sx-grid--2,.tiers{grid-template-columns:1fr}
  .sx-split{grid-template-columns:1fr}
  .sx-split--rev > :first-child{order:0}
}
@media (prefers-reduced-motion:reduce){
  .pop,a.pop:hover,a.pop:focus-visible,.sx-jump a:hover,html.promo-motion a.pop.rise.is-in:hover{transform:none !important;transition:none}
  .go svg{transition:none}
  html.promo-motion .lr-voice i,html.promo-motion .rise.is-in .desk-mock__chart b{animation:none}
  .cc,.cc__preview,.cc__btn{transition:none}
}

/* r17: "New" pill for 1.0.7 features (inline, sits beside the title; tier badge stays top-right) */
.sx-new,.sx-list .sx-new,.sx-how .sx-new,.sx-kicker .sx-new{display:inline-block;vertical-align:middle;margin:0 0 2px 6px;padding:2px 8px;border-radius:999px;font-size:10.5px;line-height:1.4;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#ffd66b;background:rgba(255,196,0,.14);border:.5px solid rgba(255,196,0,.5);white-space:nowrap}
.sx-how .sx-new{margin:0 6px 2px 0}
.sx-list b .sx-new{margin-left:8px}
.pop h3 .sx-new{position:relative;top:-1px}
.sx-new{font-family:var(--sys)}
.sx-kicker .sx-new{margin:0;letter-spacing:.08em}
/* One login, app and web (r19) */
.callout--sm{padding:16px 18px;margin-top:18px}.callout--sm h3{font-size:15px;margin-bottom:6px}.callout--sm p{font-size:14.5px;line-height:1.55}
.callout a{color:var(--gold);text-decoration:underline}
.onelogin-line{max-width:40em;margin:16px auto 0;text-align:center}.onelogin-line b,.sent .fine b{color:var(--gold-hi)}

/* r20: reCAPTCHA notice. App Check renders Google's badge at 0x0, so Google's required text sits by the submit buttons. */
.rc-note{display:flex;align-items:flex-start;gap:8px;margin:2px 0 0;font-size:12px;line-height:1.45;color:var(--muted);text-align:left;max-width:52ch}
.rc-note a{color:var(--label-2);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(var(--gold-rgb),.5)}
.rc-note a:hover{color:var(--gold-hi)}
.rc-mark{flex:none;width:16px;height:16px;margin-top:1px;fill:rgba(var(--gold-rgb),.14);stroke:var(--gold);stroke-width:1.6;stroke-linejoin:round}
.rc-mark .tick{fill:none;stroke-linecap:round}
.rc-note--center{align-self:center;justify-content:center;margin:4px auto 0;max-width:34ch}
#codeForm .rc-note{margin-top:10px}

/* r21: official reCAPTCHA mark, small, in the bottom-right corner of the sign-up cards. Decorative only. */
.gate__card,.formwrap{position:relative}
.gate__card{padding-bottom:46px}
.formwrap{padding-bottom:44px}
.rc-logo{position:absolute;right:14px;bottom:12px;width:30px;height:30px;opacity:.78;pointer-events:none;user-select:none}
.hero__squad img.rc-logo{width:30px;height:30px;max-width:none;max-height:none;aspect-ratio:1;object-fit:contain;filter:none;-webkit-mask-image:none;mask-image:none;margin:0}

/* r22: VIP page + vibrant legal pages. Shared season-style stat strip. */
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;width:100%;max-width:880px;margin:28px auto 0;padding:0;list-style:none}
.stat-strip li{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;padding:16px 12px 14px;border-radius:18px;text-align:center;
  background:linear-gradient(165deg,rgba(var(--red-rgb),.14),rgba(28,28,32,.62) 45%,rgba(20,20,24,.72));border:.5px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 36px -26px #000}
.stat-strip li::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:linear-gradient(90deg,transparent 6%,rgba(var(--red-rgb),.95) 50%,transparent 94%);opacity:.75}
.stat-strip b{display:block;font-family:"Varsity",sans-serif;font-weight:400;font-size:clamp(26px,3.4vw,36px);line-height:1;letter-spacing:.02em;color:#fff;overflow-wrap:anywhere}
.stat-strip span{font-size:12.5px;line-height:1.35;color:var(--label-2)}
.stat-strip li.hot{background:var(--gl-hi),var(--gl-red);border-color:var(--gl-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 16px 36px -18px rgba(var(--red-rgb),.9)}
.stat-strip li.hot span{color:rgba(255,255,255,.88)}

.vip-hero::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(50% 40% at 18% 20%,rgba(var(--red-rgb),.22),transparent 70%),radial-gradient(40% 36% at 86% 30%,rgba(var(--gold-rgb),.10),transparent 70%)}
.vip-page .coach-hero__title{background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.72));-webkit-background-clip:text;background-clip:text;color:transparent}
.desk-mock__body{position:relative}
.desk-mock__cap{grid-column:1/-1;margin:0;font-size:11px;font-weight:600;color:var(--label-2);min-height:1.4em}
.desk-mock__chart b{transition:height .7s var(--ease)}
.desk-mock__tabs span{transition:background .4s,color .4s}
.vip-unlocks{align-items:center}
.vip-unlocks .coach-feat--wide{grid-column:auto}
@media (max-width:760px){.vip-unlocks .sx-phone{order:2}}

/* legal pages: hero glow, stat strip, icon cards */
.legal--vivid{position:relative;isolation:isolate;overflow:hidden}
.legal-glow{position:absolute;z-index:-1;left:0;right:0;top:0;height:min(820px,140vw);pointer-events:none;
  background:radial-gradient(60% 55% at 82% 14%,rgba(var(--red-rgb),.30),transparent 62%),radial-gradient(45% 40% at 8% 30%,rgba(var(--red-rgb),.14),transparent 70%)}
.legal--vivid .legal-hero{margin-bottom:0}
.legal--vivid .legal-hero h1{text-shadow:0 10px 40px rgba(var(--red-rgb),.45)}
.legal--vivid .legal-hero__visual img{box-shadow:0 40px 80px -36px #000,0 0 60px -20px rgba(var(--red-rgb),.6)}
.legal-hero__visual--phone{justify-self:center;width:min(240px,62vw);padding:7px;border-radius:32px;background:linear-gradient(180deg,rgba(var(--red-rgb),.55),rgba(255,255,255,.06));box-shadow:0 40px 80px -36px #000,0 0 60px -20px rgba(var(--red-rgb),.6)}
.legal-hero__visual--phone img{border-radius:26px;border:0;box-shadow:none;max-height:420px;object-fit:cover;object-position:top}
.legal--vivid .legal-hero__visual--phone img{box-shadow:none}
.legal-hero__visual--mark{justify-self:center;width:min(260px,56vw)}
.legal-hero__visual--mark img,.legal--vivid .legal-hero__visual--mark img{border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 20px 40px rgba(var(--red-rgb),.5))}
.legal--vivid .stat-strip{max-width:none;margin:clamp(20px,3vw,32px) 0 clamp(20px,3vw,28px)}
.legal--vivid .pillar{border-radius:22px;background:linear-gradient(165deg,rgba(var(--red-rgb),.14),rgba(28,28,32,.62) 40%,rgba(20,20,24,.7))}
.pillar__ico{width:42px;height:42px;border-radius:12px;margin-bottom:12px}
.pillar__ico svg{width:21px;height:21px}
.legal-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.legal-cards .legal-card{margin:0}
.legal-card--wide{grid-column:1/-1}
.legal--vivid .legal-card{position:relative;overflow:hidden;isolation:isolate;border-radius:22px;
  background:linear-gradient(165deg,rgba(var(--red-rgb),.12),rgba(28,28,32,.62) 34%,rgba(20,20,24,.72));border:.5px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -26px rgba(0,0,0,.95)}
.legal--vivid .legal-card::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:linear-gradient(90deg,transparent 4%,rgba(var(--red-rgb),.95) 50%,transparent 96%);opacity:.7}
.legal--vivid .legal-card::after{content:"";position:absolute;z-index:-1;right:-25%;top:-45%;width:70%;height:90%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(var(--red-rgb),.22),transparent);opacity:.6}
.legal-card__head{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.legal-card__head .ico{width:40px;height:40px;border-radius:12px}
.legal-card__head .ico svg{width:20px;height:20px}
.legal-card__head h2{margin:0}
@media (max-width:760px){.legal-cards{grid-template-columns:1fr}.legal-hero__visual--phone{width:min(200px,56vw)}.legal-hero__visual--phone img{max-height:340px}}

/* r22b: VIP "your team gets its own sign-up page" + desk analytics + the-app callout */
.flow4{counter-reset:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;position:relative}
.flow4::before{content:"";position:absolute;left:8%;right:8%;top:46px;height:2px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--red-rgb),.8) 12%,rgba(var(--red-rgb),.8) 88%,transparent);opacity:.55}
.flow4__step{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;padding:20px 18px 18px;border-radius:22px;border:.5px solid rgba(255,255,255,.12);
  background:linear-gradient(165deg,rgba(var(--red-rgb),.16),rgba(28,28,32,.66) 40%,rgba(20,20,24,.74));
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -26px #000}
.flow4__n{position:absolute;top:14px;right:16px;font-family:"Varsity",sans-serif;font-size:34px;line-height:1;color:rgba(255,255,255,.14)}
.flow4__step h3{margin:14px 0 6px;font-family:var(--sys);font-weight:700;font-size:16.5px;letter-spacing:0;text-transform:none;color:#fff}
.flow4__step p{margin:0;color:var(--label-2);font-size:14.5px;line-height:1.5}
.flow4__step p b{color:#fff}
.flow4__step .url-pill{font-size:12px;margin-top:auto;padding-top:10px}
.flow4__step p + .url-pill,.flow4__step p + .flow4__tag{margin-top:14px}
.flow4__tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:7px 11px;border-radius:999px;font-size:12.5px;font-weight:600;color:#fff;
  background:rgba(0,0,0,.4);border:.5px solid rgba(255,255,255,.14)}
.flow4__tag img{width:16px;height:16px}
@media (max-width:980px){.flow4{grid-template-columns:repeat(2,minmax(0,1fr))}.flow4::before{display:none}}
@media (max-width:560px){.flow4{grid-template-columns:1fr}}

.su-show{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,4vw,44px);align-items:center;margin-top:clamp(28px,4vw,44px)}
.su-show__copy .h3{margin:6px 0 12px;font-family:var(--sys);font-weight:800;font-size:clamp(22px,2.6vw,28px);letter-spacing:-.01em;text-transform:none;color:#fff}
.su-show__list{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:10px}
.su-show__list li{position:relative;padding-left:24px;color:var(--label-2);font-size:15px;line-height:1.5}
.su-show__list li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--gl-hi),rgba(var(--red-rgb),1);box-shadow:0 0 10px rgba(var(--red-rgb),.8)}
.su-show .coach-hero__cta{justify-content:flex-start;margin-top:16px}
.su-mock{min-width:0;border-radius:18px;overflow:hidden;border:.5px solid rgba(255,255,255,.14);background:#0b0b0d;
  box-shadow:0 40px 80px -36px #000,0 0 70px -24px rgba(var(--red-rgb),.65)}
.su-mock__bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:rgba(255,255,255,.05);border-bottom:.5px solid rgba(255,255,255,.08)}
.su-mock__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.su-mock__bar i:first-child{background:#ff5f57}.su-mock__bar i:nth-child(2){background:#febc2e}.su-mock__bar i:nth-child(3){background:#28c840}
.su-mock__bar span{margin-left:8px;font-size:11.5px;color:var(--label-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-mock__body{padding:14px 14px 16px;background:radial-gradient(600px 200px at 90% -20%,rgba(var(--red-rgb),.18),transparent 60%)}
.su-mock__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.su-mock__head b{font-family:"Varsity",sans-serif;font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);font-size:15px}
.su-mock__seg{display:inline-flex;gap:2px;padding:2px;border-radius:10px;background:rgba(118,118,128,.24)}
.su-mock__seg span{padding:5px 9px;border-radius:8px;font-size:11.5px;font-weight:600;color:var(--label-2);white-space:nowrap}
.su-mock__seg .on{color:#fff;background:var(--gl-hi),var(--gl-red)}
.su-mock__row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.2fr) minmax(0,.8fr);gap:8px;align-items:center;padding:9px 6px;border-top:.5px solid rgba(255,255,255,.07);font-size:12.5px;color:var(--label-2)}
.su-mock__row > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-mock__row--h{border-top:0;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:rgba(235,235,245,.5)}
.su-mock__p{display:flex;align-items:center;gap:8px}
.su-mock__p i{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-style:normal;font-size:10.5px;font-weight:700;color:#fff;background:var(--gl-hi),rgba(var(--red-rgb),.7)}
.su-mock__p b{color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.su-mock .st{font-style:normal;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.su-mock .st--new{color:#fff;background:rgba(var(--red-rgb),.35);border:.5px solid rgba(var(--red-rgb),.7)}
.su-mock__row.is-new{animation:suIn 1.2s var(--ease) both;animation-delay:.4s;background:linear-gradient(90deg,rgba(var(--red-rgb),.14),transparent 70%);border-radius:10px}
@keyframes suIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.su-mock__row.is-new{animation:none}}
@media (max-width:860px){.su-show{grid-template-columns:1fr}}
@media (max-width:560px){
  .su-mock__row{grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr) minmax(0,.8fr)}
  .su-mock__row > span:nth-child(3),.su-mock__row > span:nth-child(4){display:none}
}

.an-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.an-grid .pop h3{margin-top:14px}
.an-grid .pop p{font-size:14.5px}
.an-grid .pop:last-child{grid-column:span 2}
@media (max-width:980px){.an-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.an-grid .pop:last-child{grid-column:auto}}
@media (max-width:560px){.an-grid{grid-template-columns:1fr}}

.site-callout{flex-direction:row;align-items:center;gap:20px;margin:16px 0}
.site-callout__copy{flex:1;min-width:0}
.site-callout h3{margin:0 0 6px;font-size:clamp(18px,2vw,21px)}
.site-callout__steps{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none;counter-reset:sc}
.site-callout__steps li{counter-increment:sc;display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 6px;border-radius:999px;font-size:13px;font-weight:600;color:#fff;
  background:rgba(var(--red-rgb),.16);border:.5px solid rgba(var(--red-rgb),.45)}
.site-callout__steps li::before{content:counter(sc);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11px;background:var(--gl-hi),var(--gl-red)}
.site-callout .go{margin:0;padding:0;flex:none}
@media (max-width:640px){.site-callout{flex-direction:column;align-items:flex-start}.site-callout .go{padding-top:12px}}

/* =========================== r23 =========================== */
/* 1. One page, one scroller. overflow-x:hidden makes overflow-y compute to auto, so html, body, main, .wrap and
   .section each became their own scroll container. A wheel or swipe that landed on one scrolled that box instead
   of the page. overflow-x:clip cuts sideways overflow without creating a scroll container (Safari 16+). */
@supports (overflow-x:clip){
  html,body,main,.wrap,.section,.faq,.faq details,.faq details p,.faq summary,.grid.grid--3,.steps,main.coaches,.legal__wrap{
    overflow-x:clip !important;overflow-y:visible !important}
}

/* 2. Sign-up card fits one screen: reCAPTCHA mark sits inline at the end of Google's notice, not in a corner,
   and the crest scales with the window height so card + nav + footer fit without scrolling. */
.gate__card{padding-bottom:26px}
.formwrap{padding-bottom:0}
.rc-note .rc-logo--inline,.hero__squad .rc-note img.rc-logo--inline{position:static;display:inline-block;width:16px;height:16px;max-width:none;max-height:none;
  aspect-ratio:1;margin:0 0 0 4px;vertical-align:-3px;opacity:.85;object-fit:contain;filter:none;-webkit-mask-image:none;mask-image:none;pointer-events:none;user-select:none}
.hero.gate{min-height:0;flex:1 0 auto;padding-bottom:28px}
.gate__stage{--crest-h:clamp(132px,calc(100svh - 606px),332px);--crest-y:calc(30px + var(--crest-h) / 2)}
.gate .gate__card > img.gate__crest:not([src^="https:"]){width:auto;height:var(--crest-h);max-width:100%;margin:0 auto 2px}
.gate__stage:has(img.gate__crest[src^="https:"]){--crest-y:78px}
@media (max-width:600px){
  .hero.gate{padding-bottom:16px}
  .gate__stage{--crest-h:clamp(120px,calc(100svh - 604px),286px);--crest-y:calc(26px + var(--crest-h) / 2)}
  .gate__card{padding-bottom:20px}
  .gate__stage:has(img.gate__crest[src^="https:"]){--crest-y:74px}
}

/* 3. iOS glass with a bright, top-lit edge, same finish as the glass pills and buttons. */
.gate__card,.section--register .aside,.section--register .sent{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 38%,rgba(255,255,255,0) 62%),rgba(26,26,30,.5);
  border:0;-webkit-backdrop-filter:saturate(180%) blur(28px);backdrop-filter:saturate(180%) blur(28px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.04),0 30px 80px -30px rgba(0,0,0,.95),0 0 0 .5px rgba(0,0,0,.55)}
.section--register .aside,.section--register .sent{position:relative;isolation:isolate}
.gate__card::after,.section--register .aside::after,.section--register .sent::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.14) 22%,rgba(255,255,255,.05) 55%,rgba(255,255,255,.12) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* /register on desktop: padding follows the window height so the code step fits one screen at 1280x800 and up. */
@media (min-width:901px){
  .section--register{padding:calc(var(--nav-h,52px) + clamp(16px,3svh,56px)) 0 clamp(24px,4svh,108px)}
}

/* =========================== r24 =========================== */
/* /support: the form gets the same iOS glass card + bright top-lit edge as the sign-up aside. */
.section--support .formwrap{position:relative;isolation:isolate;padding:clamp(22px,3vw,34px);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 38%,rgba(255,255,255,0) 62%),rgba(26,26,30,.5);
  -webkit-backdrop-filter:saturate(180%) blur(28px);backdrop-filter:saturate(180%) blur(28px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.04),0 30px 80px -30px rgba(0,0,0,.95),0 0 0 .5px rgba(0,0,0,.55)}
.section--support .formwrap::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.14) 22%,rgba(255,255,255,.05) 55%,rgba(255,255,255,.12) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.section--support .formwrap .sent{margin-top:0}
.section--support .aside h3{margin-top:0}
.support-mail{display:flex;flex-direction:column;gap:2px;margin:14px 0 18px}
.support-mail span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#9a958f)}
.support-mail a{font-size:17px;font-weight:600;word-break:break-all}
.support-count{margin:6px 0 0;text-align:right}
.support-kids{margin:4px 0 14px}
/* Phones: the form comes first, the "other ways" card under it. */
@media (max-width:940px){.section--support .aside{order:2}}

/* r25: Sign up with Apple / Google on register */
.social-signup{margin:6px 0 22px}
.social-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.social-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%}
.social-btn svg{flex:0 0 auto}
.social-signup .fine{margin-top:10px}
.or-line{display:flex;align-items:center;gap:12px;margin:18px 0 0;color:var(--muted,#9a958d);font-size:13px}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
.social-profile{margin-top:6px}
.link-btn{background:none;border:0;padding:0;color:var(--gold-hi,#e8c27a);text-decoration:underline;cursor:pointer;font:inherit}
@media (max-width:520px){.social-row{grid-template-columns:1fr}}