/* FiercePitch landing page — brand tokens from docs/00-CANON.md.
   Legal/support pages keep styles.css; this file styles index.html only. */

/* Self-hosted variable fonts (latin subset). One file per family covers the
   whole weight range used on the page — Inter 400-600, Sora 600-800. */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('assets/fonts/inter.woff2') format('woff2');
}
@font-face{
  font-family:'Sora';font-style:normal;font-weight:600 800;font-display:swap;
  src:url('assets/fonts/sora.woff2') format('woff2');
}

:root{
  --bg-900:#0B0E13; --bg-800:#11151C; --surface-700:#161B22; --surface-600:#1E2530;
  --border:#2A3340; --text-hi:#F5F7FA; --text-mid:#AEB9C7; --text-lo:#6B7686;
  --optic:#C5FF2E; --optic-press:#A8E01E; --teal:#00E0C6; --coral:#FF4D6D;
  --gold:#FFC83D; --violet:#8B7BFF;
  --r-lg:20px; --r-md:16px; --max:1120px;
  --font-display:'Sora',sans-serif;
  --font-body:'Inter',-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg-900); color:var(--text-hi);
  font-family:var(--font-body); line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-0.02em;line-height:1.08;text-wrap:balance}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

.skip{position:absolute;left:-9999px;top:0;background:var(--optic);color:var(--bg-900);
  padding:10px 18px;border-radius:0 0 12px 0;font-weight:600;z-index:100}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--optic);outline-offset:3px;border-radius:4px}

/* ---------- Nav ---------- */
nav{position:sticky;top:0;z-index:20;background:rgba(11,14,19,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s}
nav.scrolled{border-bottom-color:var(--border)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:18px}
.seam{width:26px;height:26px;border-radius:50%;background:var(--optic);position:relative;flex:none}
.seam::after{content:'';position:absolute;inset:5px;border-radius:50%;
  border:2px solid var(--bg-900);border-left-color:transparent;border-right-color:transparent;transform:rotate(24deg)}
.nav-links{display:flex;gap:26px;font-size:14.5px;font-weight:500;color:var(--text-mid)}
/* Padding gives the links a ≥24px (WCAG 2.5.8) target inside the 68px bar. */
.nav-links a{padding:8px 0}
.nav-links a:hover{color:var(--text-hi)}
.nav-right{display:flex;align-items:center;gap:10px}

/* Mobile section menu — hidden on desktop, shown once .nav-links drops out. */
.nav-menu{display:none;position:relative}
.nav-menu summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:12px;
  border:1px solid var(--border);display:grid;place-items:center;background:var(--surface-700)}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu .bars,.nav-menu .bars::before,.nav-menu .bars::after{
  content:'';display:block;width:18px;height:2px;border-radius:2px;background:var(--text-hi);position:relative}
.nav-menu .bars::before{position:absolute;top:-6px}
.nav-menu .bars::after{position:absolute;top:6px}
.nav-menu[open] summary{border-color:var(--optic)}
.nav-menu-panel{position:absolute;top:52px;right:0;min-width:200px;
  background:var(--surface-700);border:1px solid var(--border);border-radius:14px;
  padding:8px;display:flex;flex-direction:column;
  box-shadow:0 20px 50px -16px rgba(0,0,0,.75);z-index:30}
.nav-menu-panel a{padding:12px 14px;border-radius:10px;font-size:15px;font-weight:500;color:var(--text-mid);min-height:44px;display:flex;align-items:center}
.nav-menu-panel a:hover{background:var(--surface-600);color:var(--text-hi)}
@media(max-width:820px){
  .nav-links{display:none}
  .nav-menu{display:block}
}

/* ---------- Buttons ---------- */
.btn{display:inline-block;background:var(--optic);color:#0B0E13;font-weight:600;
  padding:13px 24px;border-radius:var(--r-md);font-size:15.5px;white-space:nowrap;
  transition:transform .15s ease,background .15s ease;will-change:transform}
.btn:hover{background:var(--optic-press);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:9px 18px;font-size:14px;border-radius:12px}
.btn-lg{padding:16px 32px;font-size:17px}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-hi)}
.btn-ghost:hover{background:var(--surface-700);border-color:var(--text-lo)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.cta-center{justify-content:center}

/* ---------- Type helpers ---------- */
.kicker{color:var(--optic);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:12.5px;margin-bottom:14px}
.lead{font-size:clamp(17px,2.2vw,20px);color:var(--text-mid);max-width:560px}
.fine{color:var(--text-lo);font-size:13.5px;margin-top:18px}
.aside{color:var(--text-mid);font-size:15px;border-left:2px solid var(--optic);
  padding-left:16px;margin-top:28px;max-width:520px}
.aside strong{color:var(--text-hi)}

/* ---------- Hero ---------- */
/* overflow-x:clip contains the .glow (its -20% inset would otherwise extend the
   document past the viewport at stacked widths — a phantom horizontal scroll). */
.hero{padding:72px 0 40px;position:relative;overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.hero-copy .pill{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  color:var(--text-hi);background:var(--surface-700);border:1px solid var(--border);
  padding:7px 14px;border-radius:999px;margin-bottom:26px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--optic);flex:none;
  animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(197,255,46,.5)}70%{box-shadow:0 0 0 9px rgba(197,255,46,0)}100%{box-shadow:0 0 0 0 rgba(197,255,46,0)}}
.hero h1{font-size:clamp(40px,5.6vw,68px);font-weight:800;margin-bottom:22px}
.hero .lead{margin-bottom:32px}
.hero-shot{position:relative;display:flex;justify-content:center}
.glow{position:absolute;inset:-8% -20%;background:
  radial-gradient(45% 42% at 60% 40%,rgba(197,255,46,.13),transparent 70%),
  radial-gradient(38% 36% at 30% 70%,rgba(0,224,198,.08),transparent 70%);
  pointer-events:none;filter:blur(2px)}
.phone{position:relative;width:min(300px,78vw);border-radius:44px;padding:9px;flex:none;
  background:linear-gradient(160deg,#232B36,#12161D 60%);
  border:1px solid #313B49;
  box-shadow:0 24px 70px -18px rgba(0,0,0,.75),0 4px 18px rgba(0,0,0,.4)}
.phone img{border-radius:36px}

/* ---------- Stat strip ---------- */
.strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--bg-800);margin-top:48px}
.strip-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:30px 24px}
.stat strong{display:block;font-family:var(--font-display);font-weight:700;
  font-size:26px;color:var(--text-hi);letter-spacing:-0.01em}
.stat span{font-size:13.5px;color:var(--text-lo)}
@media(max-width:760px){.strip-row{grid-template-columns:repeat(2,1fr);gap:20px}}

/* ---------- Manifesto ---------- */
.manifesto{padding:130px 0 120px}
.manifesto-inner{max-width:780px}
.manifesto h2{font-size:clamp(30px,4.6vw,52px);font-weight:800;margin-bottom:26px}
.manifesto p:not(.kicker){font-size:clamp(16.5px,2vw,19px);color:var(--text-mid);max-width:640px}

/* ---------- Split sections ---------- */
.split{padding:60px 0 90px}
.split-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.split-flip .split-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split-shot{display:flex;justify-content:center}
.split h2{font-size:clamp(28px,3.8vw,42px);font-weight:800;margin-bottom:22px}
.split-copy > p:not(.kicker):not(.aside){color:var(--text-mid);font-size:17px;max-width:540px}

.steps{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:22px}
.steps li{display:flex;gap:18px;align-items:flex-start}
.step-num{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:15px;
  background:var(--surface-700);border:1px solid var(--border);color:var(--optic)}
.steps h3{font-size:17.5px;font-weight:700;margin-bottom:3px}
.steps p{color:var(--text-mid);font-size:15px;max-width:440px}

/* ---------- Positions ---------- */
.positions{border-top:1px solid var(--border);background:var(--bg-800);padding:100px 0}
.pos-head{max-width:640px;margin-bottom:54px}
.pos-head h2{font-size:clamp(28px,4vw,44px);font-weight:800}
.pos-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0;border-top:1px solid var(--border)}
.pos-list li{padding:28px 22px 32px 0;border-bottom:1px solid var(--border);position:relative}
@media(min-width:1040px){
  .pos-list{grid-template-columns:repeat(5,1fr)}
  .pos-list li{border-bottom:0;border-right:1px solid var(--border);padding:32px 24px 8px 0}
  .pos-list li:last-child{border-right:0}
  .pos-list li:not(:first-child){padding-left:24px}
}
.pos-num{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--optic);
  display:block;margin-bottom:16px;letter-spacing:.08em}
.pos-list h3{font-size:19px;font-weight:700;margin-bottom:8px}
.pos-list p{color:var(--text-mid);font-size:14.5px;line-height:1.55}
.pos-foot{margin-top:44px;color:var(--text-mid);font-size:16px;max-width:560px}
.pos-foot em{color:var(--text-hi);font-style:italic}

/* ---------- Ladder ---------- */
.ladder{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.rung{background:var(--surface-700);border:1px solid var(--border);border-radius:12px;
  padding:10px 16px;font-family:var(--font-display);font-weight:700;font-size:14px}
.rung span{display:block;font-size:10.5px;letter-spacing:.1em;color:var(--text-lo);
  font-family:var(--font-body);font-weight:600;margin-bottom:2px}
.rung-hi{background:rgba(255,200,61,.09);border-color:rgba(255,200,61,.4);color:var(--gold)}
.rung-hi span{color:rgba(255,200,61,.6)}

/* ---------- Coaches ---------- */
.coaches{border-top:1px solid var(--border);padding:100px 0}
.checks{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:12px}
.checks li{color:var(--text-mid);padding-left:30px;position:relative;font-size:15.5px}
.checks li::before{content:'';position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;
  background:rgba(197,255,46,.12);border:1px solid rgba(197,255,46,.45)}
.checks li::after{content:'';position:absolute;left:4.5px;top:9px;width:7px;height:4px;
  border-left:1.8px solid var(--optic);border-bottom:1.8px solid var(--optic);transform:rotate(-45deg)}

.dash{width:min(430px,100%);background:linear-gradient(170deg,var(--surface-600),var(--surface-700) 70%);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
.dash-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:8px}
.dash-team{font-family:var(--font-display);font-weight:700;font-size:17px}
.dash-sub{font-size:12.5px;color:var(--text-lo)}
.dash-code{font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--optic);
  background:rgba(197,255,46,.08);border:1px solid rgba(197,255,46,.3);
  padding:5px 10px;border-radius:999px;white-space:nowrap}
.dash-row{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid rgba(42,51,64,.6);font-size:14.5px}
.dash-row:last-of-type{border-bottom:0}
.dash-name{font-weight:600;flex:1}
.dash-meta{color:var(--text-lo);font-size:12.5px}
.dash-streak{font-size:13px;color:var(--coral);font-weight:600;min-width:44px;text-align:right}
.dash-dim .dash-name,.dash-dim .dash-streak{color:var(--text-lo)}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot-teal{background:var(--teal)} .dot-gold{background:var(--gold)} .dot-coral{background:var(--coral)}
.dash-foot{margin-top:10px;padding-top:14px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--text-lo);text-align:center;letter-spacing:.02em}

/* ---------- Parents ---------- */
.parents{border-top:1px solid var(--border);background:var(--bg-800);padding:100px 0}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.trust{background:var(--surface-700);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px}
.trust h3{font-size:17.5px;font-weight:700;margin-bottom:10px}
.trust p{color:var(--text-mid);font-size:14.5px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--border);padding:100px 0}
.faq-inner{max-width:760px}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:20px 2px;font-family:var(--font-display);font-weight:600;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-weight:600;font-size:22px;color:var(--text-lo);
  transition:transform .2s ease;flex:none;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--optic)}
.faq details p{color:var(--text-mid);font-size:15.5px;padding:0 2px 22px;max-width:640px}
.faq details a{color:var(--teal)}
.faq details a:hover{text-decoration:underline}

/* ---------- Final CTA ---------- */
.cta-final{border-top:1px solid var(--border);text-align:center;padding:120px 0;position:relative;overflow:hidden}
.cta-final::before{content:'';position:absolute;inset:auto -10% -60% -10%;height:120%;
  background:radial-gradient(50% 55% at 50% 100%,rgba(197,255,46,.1),transparent 70%);pointer-events:none}
.cta-final h2{font-size:clamp(34px,5.4vw,58px);font-weight:800;margin-bottom:16px}
.cta-final .lead{margin:0 auto 34px}
.cta-final .wrap{position:relative}

/* Waitlist form */
.waitlist{max-width:440px;margin:38px auto 0}
.waitlist-label{display:block;font-size:14px;color:var(--text-mid);margin-bottom:12px}
.waitlist-row{display:flex;gap:10px}
.waitlist input[type=email]{flex:1;min-width:0;height:50px;padding:0 16px;
  background:var(--surface-700);border:1px solid var(--border);border-radius:var(--r-md);
  color:var(--text-hi);font-family:var(--font-body);font-size:15px}
.waitlist input[type=email]::placeholder{color:var(--text-lo)}
.waitlist input[type=email]:focus-visible{outline:2px solid var(--optic);outline-offset:2px}
.waitlist .btn{height:50px;padding-block:0;display:inline-flex;align-items:center}
.waitlist-msg{margin-top:14px;font-size:14.5px}
.waitlist-ok{color:var(--optic);font-weight:500}
.waitlist-err{color:var(--coral)}
.waitlist-err a{color:var(--coral);text-decoration:underline}
/* Honeypot — off-screen, not display:none (bots skip display:none). */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:460px){.waitlist-row{flex-direction:column}.waitlist .btn{width:100%}}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--border);padding:48px 0;color:var(--text-lo);font-size:14px}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:28px}
.foot-tag{margin-top:12px;max-width:260px;color:var(--text-lo)}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a{color:var(--text-mid);padding:6px 0}
.foot-links a:hover{color:var(--text-hi)}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .pulse{animation:none}
  .btn{transition:none}
}
/* No-JS fallback: never hide content */
.no-observer .reveal{opacity:1;transform:none}

/* ---------- Responsive ---------- */
/* Stack to one column below 1024px. Above 900 but under ~1024 the two-column
   hero left too little room for the display headline, so it collided with the
   phone (worse under browser zoom, which shrinks the effective viewport into
   exactly that band). Stacking early is clean; a cramped two-column isn't. */
@media(max-width:1024px){
  .hero{padding-top:48px}
  .hero-grid,.split-grid,.split-flip .split-grid{grid-template-columns:1fr;gap:48px}
  .split-flip .split-shot{order:2}
  .hero h1{font-size:clamp(36px,9vw,56px)}
  .manifesto{padding:90px 0}
  .positions,.coaches,.parents,.faq{padding:76px 0}
  .cta-final{padding:90px 0}
}