/* ============================================================
   TrustedEval — shared styles for index.html, baseball.html, soccer.html
   ============================================================ */
:root{
  /* ---- Brand -------------------------------------------------------------
     Taken from the Sept 2026 logo: navy #2E357E ("TRUSTED" and the T mark)
     and sky #74A8F9 ("EVAL"). Navy is the system colour (buttons, links,
     eyebrows, panels); sky is the accent. Raw sky is only 2.2:1 on paper,
     so it is for navy surfaces (4.5:1) and decoration. --sky-600 is the
     text-safe step for display emphasis (3.8:1: large text only). Navy
     emphasis on ink headings would barely show (1.6:1), so headline <em>s
     go sky, which is also how the wordmark itself splits.
     ---------------------------------------------------------------------- */
  --brand:#2E357E; --brand-700:#242A66; --brand-900:#171B45;
  --brand-300:#8C91C4; --brand-100:#DCDEF0; --brand-50:#EEEFF8;
  --sky:#74A8F9; --sky-600:#3F7BE0; --sky-100:#E4EEFE;

  /* Cool "paper" — the brand blue at ~4% over white. Keeps the card/page
     separation the layout relies on without the warm cream fighting the blue. */
  --paper:#F4F5FA; --surface:#FFFFFF; --surface-2:#F8F9FD;

  --ink:#151A33; --muted:#5A6076; --faint:#696F85;
  --line:#E3E5F0; --line-strong:#CFD3E4;

  /* Gold is the one colour not in the logo, so it only appears where it
     carries meaning, never as decoration:
       1. "the ceiling": the projected tier and the combined average, in the
          scorecard and delivered evals
       2. "heads up": footage requirements and camera notes
     Everything decorative (step numbers, icons, tags, focus rings) is navy
     or sky. --gold is text-safe (4.8:1); --gold-line is decorative only. */
  --gold:#8F6519; --gold-line:#C79A3A; --gold-soft:#F6EFDF;

  --good:#2F7D5B;

  /* Archivo carries the same wide, geometric proportions as the wordmark. */
  --display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:inherit}
.eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--brand);font-weight:700}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.022em;color:var(--ink);
  font-stretch:104%}
em{font-style:italic}
/* In display headings, emphasis is colour, not slant. */
h1 em,h2 em,h3 em{font-style:normal;color:var(--sky-600)}
/* On navy panels the raw logo sky is the one that passes. */
.final h1 em,.final h2 em,.gfinal h2 em,.sc-head em{color:var(--sky)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:15px;font-weight:600;
  padding:13px 22px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:.16s;text-decoration:none}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-700)}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--brand)}
.btn-ghost:hover{border-color:var(--brand);background:var(--surface-2)}
.btn:focus-visible{outline:3px solid var(--sky-600);outline-offset:2px}
.ic svg{width:22px;height:22px;stroke:var(--brand);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.skiplink{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;font-weight:600;font-size:14px;text-decoration:none}
.skiplink:focus{left:0}

/* NAV */
nav{position:sticky;top:0;z-index:40;background:rgba(244,245,250,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.navin{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
/* Always ship the logo as the asset, never re-set it in a webfont.
   .wordmark is the primary lockup; .logo is the circular T mark for tight
   spots (modal headers, favicons). */
.wordmark{display:block;width:158px;height:auto;flex:none}
.wordmark-white{display:none}
.logo{display:block;width:34px;height:34px;flex:none}
.brand b{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.02em}
/* Section label sits beside the wordmark, divided by a hairline. The lockup is
   the widest thing in the bar, so it steps down before the CTA can collide
   with it: label drops at 560px, then the wordmark itself shrinks. */
.brand .ph{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.11em;
  padding-left:11px;border-left:1px solid var(--line-strong);line-height:1.1;white-space:nowrap}
@media(max-width:820px){.wordmark{width:146px}}
@media(max-width:560px){.brand .ph{display:none}.brand{gap:0}.wordmark{width:134px}}
@media(max-width:430px){.wordmark{width:120px}}
@media(max-width:360px){.wordmark{width:106px}}
/* Knockout variant, for any surface dark enough to swallow the blue wordmark
   (the .final / .gfinal panels, dark email headers, slides). Not used on the
   site today — add class="on-dark" to a .brand lockup and ship both <img>s. */
.on-dark .wordmark{display:none}
.on-dark .wordmark-white{display:block}

.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a{font-size:14px;color:var(--muted);text-decoration:none;font-weight:500;transition:.15s}
.navlinks a:hover{color:var(--brand)}
.navlinks a.on{color:var(--brand);font-weight:600}
/* Audience switch, not another parent link: set behind a hairline and a
   step quieter, so it stays findable for a coach without pulling clicks
   out of the $199 funnel. */
.navlinks a.navcoach{font-size:13.5px;color:var(--faint);
  padding-left:26px;border-left:1px solid var(--line-strong)}
.navlinks a.navcoach:hover{color:var(--brand)}
.navright{display:flex;align-items:center;gap:26px}
.navtoggle{display:none;background:transparent;border:1px solid var(--line-strong);border-radius:9px;padding:7px;cursor:pointer;color:var(--brand);line-height:0}
.navtoggle svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
.navtoggle .i-x{display:none}
.navtoggle:hover{border-color:var(--brand)}
.navtoggle:focus-visible{outline:3px solid var(--sky-600);outline-offset:2px}

/* Below 960px the links collapse into a dropdown panel under the bar.
   The CTA and toggle sit outside .navlinks so the CTA stays tappable.

   960, not 820: the homepage nav needs ~935px to hold its six links on one
   line, and at 820 it was already wrapping "How it works" before the coach
   link was added. Keep this in sync with the same number in nav.js, and
   re-measure it if a nav label gets longer — the margin here is ~25px. */
@media(max-width:960px){
  .navright{gap:10px}
  .navtoggle{display:inline-flex;align-items:center;justify-content:center}
  nav.open .navtoggle .i-bars{display:none}
  nav.open .navtoggle .i-x{display:block}
  .navlinks{
    position:absolute;top:100%;left:0;right:0;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:0 14px 28px rgba(21,26,51,.12);
    padding:4px 0 8px;
    max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;
  }
  nav.open .navlinks{display:flex}
  .navlinks a{font-size:16px;padding:14px 24px;border-bottom:1px solid var(--line)}
  .navlinks a:last-child{border-bottom:none}
  .navlinks a:hover,.navlinks a:active{background:var(--surface-2);color:var(--brand)}
  /* In the dropdown the hairline would cut across a full-width row. */
  .navlinks a.navcoach{font-size:15px;padding-left:24px;border-left:none}
}
@media(max-width:430px){
  .navin{padding:12px 18px}
  .navright{gap:8px}
  /* Keep the CTA on one line — wrapping it makes the bar grow to two rows. */
  .navright .btn{font-size:14px;padding:11px 14px;white-space:nowrap}
  .navlinks a{padding-left:18px;padding-right:18px}
}
@media(max-width:360px){
  .brand b{font-size:16px}
  .navright{gap:6px}
  .navright .btn{font-size:13px;padding:10px 11px}
  .navtoggle{padding:6px}
  .navtoggle svg{width:20px;height:20px}
}

/* HERO */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:54px 0 30px}
.hero-intro{text-align:left}
.hero-intro .kick{margin-bottom:18px}
.hero-intro h1{font-size:clamp(33px,4.4vw,50px);line-height:1.07;letter-spacing:-.02em}
.hero-intro .sub{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:480px;margin:20px 0 0}
.hero-intro .cta{display:flex;gap:13px;margin-top:28px;flex-wrap:wrap}
.hero-intro .micro{margin-top:18px;font-size:13.5px;color:var(--faint)}
.hero-intro .micro b{color:var(--muted);font-weight:600}
.hero-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:0 6px 24px rgba(21,26,51,.14);cursor:pointer;background:var(--brand-900)}
.hv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kenburns 24s ease-in-out infinite alternate}
.hv-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(16,20,58,.82),rgba(16,20,58,.05) 45%,rgba(16,20,58,.18))}
.hv-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;animation:hvpulse 2.8s ease-out infinite}
.hero-video:hover .hv-play{background:var(--brand-700)}
.hv-play svg{width:30px;height:30px;fill:#fff;margin-left:5px}
.hv-tag{position:absolute;top:14px;left:14px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#E8EAF7;background:rgba(16,20,58,.55);padding:5px 10px;border-radius:6px}
.hv-cc{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;padding:0 18px;pointer-events:none}
.hv-cc-text{font-family:var(--sans);font-size:clamp(13px,1.9vw,17px);font-weight:500;color:#fff;background:rgba(0,0,0,.62);padding:6px 12px;border-radius:6px;line-height:1.35;text-align:center;max-width:82%;transition:opacity .45s ease}
.hv-cc-text.fade{opacity:0}
.hero-video:focus-visible{outline:3px solid var(--sky-600);outline-offset:2px}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes hvpulse{0%{box-shadow:0 0 0 0 rgba(46,53,126,.5)}70%{box-shadow:0 0 0 18px rgba(46,53,126,0)}100%{box-shadow:0 0 0 0 rgba(46,53,126,0)}}
@media(prefers-reduced-motion:reduce){.hv-poster,.hv-play{animation:none}}
@media(max-width:860px){.hero{grid-template-columns:1fr;gap:26px;padding:34px 0 18px}.hero-intro{text-align:center}.hero-intro .sub{margin:18px auto 0}.hero-intro .cta{justify-content:center}}

/* STAT STRIP */
.stripe{display:flex;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:34px}
.stripe .st{flex:1;padding:22px 10px;text-align:center;border-right:1px solid var(--line)}
.stripe .st:last-child{border-right:none}
.stripe .st b{font-family:var(--display);display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--brand)}
.stripe .st span{font-size:12.5px;color:var(--muted)}
@media(max-width:560px){.stripe{flex-direction:column}.stripe .st{border-right:none;border-bottom:1px solid var(--line)}.stripe .st:last-child{border-bottom:none}}

/* SECTION */
section.wrap{padding-top:clamp(44px,6vw,64px);padding-bottom:clamp(44px,6vw,64px)}
.sec-head{max-width:640px;margin:0 auto 48px;text-align:center}
.sec-head h2{font-size:clamp(27px,3.6vw,38px);line-height:1.12;margin:12px 0 12px}
.sec-head p{color:var(--muted);font-size:16.5px}

/* CARD base */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}

/* SPORT PICKER (dual-sport homepage) */
.sportpick{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:820px;margin:0 auto}
.sportlink{display:flex;align-items:center;gap:16px;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:16px;padding:22px 24px;text-decoration:none;transition:.16s}
.sportlink:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(21,26,51,.08)}
.sportlink .oic{width:46px;height:46px;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex:none}
.sportlink .oic svg{width:24px;height:24px;stroke:var(--brand);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sportlink b{font-family:var(--display);font-size:19px;font-weight:600;display:block;line-height:1.2}
.sportlink span{font-size:13px;color:var(--muted)}
.sportlink .arrow{margin-left:auto;color:var(--brand);font-size:20px;font-weight:600}
@media(max-width:640px){.sportpick{grid-template-columns:1fr}}

.waitlist-card{max-width:820px;margin:18px auto 0;text-align:center}
.waitlist-card h4{font-family:var(--display);font-size:18px;font-weight:600;margin-bottom:6px}
.waitlist-card p{color:var(--muted);font-size:14.5px;margin-bottom:16px}
.waitlist-form{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;justify-content:center;text-align:left}
.waitlist-form .field{margin-bottom:0;flex:1 1 220px}
.waitlist-form .btn{flex:0 0 auto;height:47px;margin-top:22px}
.waitlist-msg{color:var(--brand);font-size:14px;font-weight:600;margin-top:14px}
@media(max-width:640px){.waitlist-form .btn{margin-top:0;width:100%;justify-content:center}}

/* problem */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prob h4{font-family:var(--display);font-size:19px;font-weight:600;margin:14px 0 7px}
.prob p{font-size:14.5px;color:var(--muted)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step .num{font-family:var(--display);font-size:30px;font-weight:700;color:var(--sky-600);line-height:1}
.step h4{font-family:var(--display);font-size:18px;font-weight:600;margin:12px 0 7px}
.step p{font-size:14px;color:var(--muted)}
.step{border-top:2px solid var(--brand);padding-top:18px}

/* what you get */
.get{display:grid;grid-template-columns:.92fr 1.08fr;gap:40px;align-items:center}
.feat{display:flex;gap:15px;margin-bottom:24px}
.feat:last-child{margin-bottom:0}
.feat .ic{flex:none;margin-top:2px}
.feat h4{font-family:var(--display);font-size:19px;font-weight:600;margin-bottom:5px}
.feat p{font-size:14.5px;color:var(--muted)}
@media(max-width:860px){.get{grid-template-columns:1fr;gap:30px}}

/* SCORECARD — box score */
.scorecard{padding:0;overflow:hidden;box-shadow:0 2px 10px rgba(21,26,51,.07)}
.sc-head{display:flex;justify-content:space-between;align-items:flex-end;padding:20px 24px;background:var(--brand);color:#fff}
.sc-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);font-weight:600}
.sc-proj-label{font-family:var(--display);font-size:20px;font-weight:600;margin-top:3px}
.sc-proj-value{font-family:var(--display);font-size:24px;font-weight:700;color:#fff}
.tier{display:flex;border-bottom:1px solid var(--line)}
.tier-seg{flex:1;text-align:center;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--faint);padding:9px 4px;border-right:1px solid var(--line);background:var(--surface-2)}
.tier-seg:last-child{border-right:none}
.tier-seg.on{background:var(--gold-soft);color:var(--brand);box-shadow:inset 0 -3px 0 var(--gold)}
.tier-seg.now{background:rgba(46,53,126,.07);color:var(--brand);box-shadow:inset 0 -3px 0 var(--brand)}
.tier7 .tier-seg{font-size:9.5px;letter-spacing:0;padding:9px 3px;line-height:1.25}
/* baseball runs a six-step scale, so its strip has one fewer segment and a
   little more room per label than soccer's seven */
.tier6 .tier-seg{font-size:10px;letter-spacing:0;padding:9px 4px;line-height:1.25}
.sc-proj{text-align:right}
.sc-proj-sub{font-size:11px;color:#B9BEE8;margin-top:3px}
.sc-foot a{color:var(--brand);font-weight:600;white-space:nowrap}
.sc-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.sc-table th,.sc-table td{padding:12px 14px;font-size:14px;border-bottom:1px solid var(--line)}
.sc-table thead th{font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600;text-align:right;background:var(--surface-2)}
.sc-table thead th:first-child{text-align:left}
.sc-table td{text-align:right;color:var(--muted)}
.sc-table td:first-child{text-align:left;color:var(--ink);font-weight:500}
.sc-table td.cmb{color:var(--brand);font-weight:700;font-size:15px}
.sc-table tbody tr:last-child td{border-bottom:none}
.sc-foot{padding:14px 24px;font-size:12.5px;color:var(--faint);background:var(--surface-2);border-top:1px solid var(--line)}
/* "Coach 1/2/3" headers need more room than "A/B/C" did; on a phone the
   columns tighten rather than spilling past the card's edge. */
@media(max-width:560px){
  .sc-table th,.sc-table td{padding:10px 6px;font-size:13px}
  .sc-table thead th{font-size:10px;letter-spacing:.02em}
  .sc-table td.cmb{font-size:14px}
  .sc-foot{padding:12px 16px}
}

/* TRUST */
.trust{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:46px;text-align:center}
.trust .ic{display:inline-flex;margin-bottom:8px}
.trust h2{font-size:clamp(25px,3.4vw,34px);margin-bottom:14px}
.trust .lead{color:var(--muted);max-width:560px;margin:0 auto;font-size:16px}
.trust .twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px;text-align:left}
.trust .tc{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:20px}
.trust .tc h4{font-family:var(--display);font-size:17px;font-weight:600;margin-bottom:7px;display:flex;align-items:center;gap:9px}
.trust .tc p{font-size:14px;color:var(--muted)}
.trust .closer{margin-top:28px;font-size:15px;color:var(--ink)}
.trust .closer b{color:var(--brand);font-weight:600}
.coachrow{margin-top:26px}
.coachrow .cr-label{font-size:13px;color:var(--muted)}
.coachchips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.coachchips .chip{font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--brand);background:var(--surface-2);border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px}
.coachrow .cr-note{font-size:12.5px;color:var(--faint);margin-top:10px}
@media(max-width:680px){.trust .twocol{grid-template-columns:1fr}.trust{padding:32px 22px}}

/* TESTIMONIAL */
.quote{max-width:780px;margin:0 auto;text-align:center;position:relative}
.quote blockquote{font-family:var(--display);font-size:clamp(21px,3vw,28px);line-height:1.32;color:var(--ink);font-weight:500;letter-spacing:-.018em}
.quote .who{display:flex;align-items:center;justify-content:center;gap:11px;margin-top:24px}
.quote .qav{width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600}
.quote .who b{display:block;font-size:14px;font-weight:600;text-align:left;font-family:var(--sans)}
.quote .who span{font-size:12.5px;color:var(--faint)}
.testi{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;max-width:980px;margin:0 auto}
.testi .quote{text-align:left;max-width:none;margin:0}
.testi .quote .who{justify-content:flex-start}
.testi-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:0 4px 16px rgba(21,26,51,.12);cursor:pointer;background:var(--brand-900)}
.testi-video:hover .hv-play{background:var(--brand-700)}
.testi-video:focus-visible{outline:3px solid var(--sky-600);outline-offset:2px}
@media(max-width:780px){.testi{grid-template-columns:1fr;gap:24px}}

/* PRICING */
.price-solo{max-width:440px;margin:0 auto}
.price{background:var(--surface);border:1px solid var(--line-strong);border-radius:18px;padding:32px;text-align:left;box-shadow:0 2px 10px rgba(21,26,51,.06)}
.price .tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);background:var(--sky-100);padding:4px 11px;border-radius:999px;margin-bottom:14px}
.price h3{font-family:var(--display);font-size:22px;font-weight:600;margin-bottom:4px}
.price .desc{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.price .amt{font-family:var(--display);font-size:50px;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1}
.price .amt .was{font-size:26px;color:var(--faint);font-weight:500;text-decoration:line-through;margin-right:12px}
.price .amt-sub{font-size:13px;color:var(--faint);margin-top:6px}
.price ul{list-style:none;margin:22px 0 24px}
.price li{font-size:14.5px;color:var(--ink);padding:8px 0;display:flex;gap:10px;align-items:flex-start;border-bottom:1px solid var(--line)}
.price li:last-child{border-bottom:none}
.price li .ck{color:var(--good);flex:none;margin-top:3px}
.price li .ck svg{width:16px;height:16px;stroke:var(--good);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.price .btn{width:100%;justify-content:center}
.guarantee{margin-top:16px;font-size:13px;color:var(--muted);display:flex;gap:9px;align-items:flex-start}
.guarantee .ic svg{width:18px;height:18px}
.guarantee b{color:var(--ink);font-weight:600}
.price-note{text-align:center;color:var(--faint);font-size:12.5px;margin-top:18px}
.paynote{font-size:12px;color:var(--faint);text-align:center;margin-top:10px}

/* FAQ */
.faq{max-width:740px;margin:0 auto}
.q{border-bottom:1px solid var(--line)}
.q summary{padding:20px 4px;font-family:var(--display);font-size:18px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.q summary::-webkit-details-marker{display:none}
.q summary:focus-visible{outline:3px solid var(--sky-600);outline-offset:2px;border-radius:6px}
.q summary .pl{color:var(--sky-600);font-size:22px;font-family:var(--sans);transition:.2s;line-height:1}
.q[open] summary .pl{transform:rotate(45deg)}
.q .ans{padding:0 4px 20px;color:var(--muted);font-size:15px;max-width:660px}

/* FINAL CTA */
.final{text-align:center;background:var(--brand);border-radius:20px;padding:58px 30px;color:#fff}
.final h2{color:#fff;font-size:clamp(27px,3.8vw,40px);margin-bottom:14px}
.final p{color:#D5D8F0;font-size:16.5px;max-width:480px;margin:0 auto 28px}
.final .btn-primary{background:#fff;color:var(--brand)}
.final .btn-primary:hover{background:var(--sky-100)}
/* Deeper sky is only 2.7:1 on navy; the raw logo sky passes there. */
.final .btn:focus-visible,.gfinal .btn:focus-visible{outline-color:var(--sky)}

footer{border-top:1px solid var(--line);margin-top:50px;padding:34px 0}
.footin{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footin .small{font-size:12.5px;color:var(--faint)}
.footin a{color:var(--brand);text-decoration:none;font-size:13px;font-weight:600}
.footin .flinks{display:flex;gap:18px}

@media(max-width:900px){.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.grid3{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.grid3,.grid4,.steps{grid-template-columns:1fr}}

/* ===== SIGNUP MODAL ===== */
.overlay{position:fixed;inset:0;z-index:90;background:rgba(21,26,51,.45);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px 18px}
.overlay.open{display:flex}
.modal{background:var(--paper);border:1px solid var(--line-strong);border-radius:18px;width:100%;max-width:560px;box-shadow:0 24px 70px rgba(21,26,51,.3);overflow:hidden;margin:auto}
.modal:focus{outline:none}
.modal-head{padding:20px 26px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:var(--surface)}
.modal-head .brand b{font-size:16px}
.xbtn{background:none;border:none;color:var(--faint);font-size:24px;cursor:pointer;line-height:1}
.xbtn:hover{color:var(--ink)}
.progress{display:flex;gap:6px;padding:18px 26px 0}
.progress .pseg{flex:1;height:4px;border-radius:4px;background:var(--line);transition:.3s}
.progress .pseg.done{background:var(--brand)}
.step-label{padding:14px 26px 0;font-size:11px;color:var(--faint);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.modal-body{padding:10px 26px 8px;min-height:280px}
.modal-body h3{font-family:var(--display);font-size:23px;font-weight:600;margin:6px 0 6px}
.modal-body .lede{font-size:14px;color:var(--muted);margin-bottom:20px}
.fstep{display:none}
.fstep.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field select{width:100%;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:12px 14px;color:var(--ink);font-family:var(--sans);font-size:16px;transition:.15s}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(46,53,126,.12)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:13px;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:12px;padding:15px;cursor:pointer;transition:.15s;font-family:var(--sans);color:var(--ink);text-align:left;width:100%}
.opt:focus-visible{outline:3px solid var(--sky-600);outline-offset:2px}
.opt:hover{border-color:var(--brand)}
.opt.sel{border-color:var(--brand);background:var(--surface-2)}
.opt .oic{width:40px;height:40px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--brand)}
.opt .oic svg{width:21px;height:21px;stroke:var(--brand);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.opt .otx{flex:1}
.opt .otx b{display:block;font-size:15px;font-weight:600}
.opt .otx span{font-size:12.5px;color:var(--faint)}
.opt .opr{font-size:13px;font-weight:700;color:var(--brand)}
.opt.disabled,.opt:disabled{opacity:.5;cursor:not-allowed}
.opt .radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-strong);flex:none;display:flex;align-items:center;justify-content:center}
.opt.sel .radio{border-color:var(--brand)}
.opt.sel .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--brand)}
.field .hint{font-size:12px;color:var(--faint);margin-top:6px;line-height:1.5}
.hint .ok{color:var(--good);font-weight:600}
.req-note{background:var(--gold-soft);border:1px solid #E4D3A8;border-radius:11px;padding:13px 15px;margin-top:14px}
.req-note b{font-size:13px;color:#7A5714;display:block;margin-bottom:5px}
.req-note ul{margin:0;padding-left:18px}
.req-note li{font-size:12.5px;color:var(--muted);margin-bottom:3px}
/* footage guides — links out to the real checklist for the athlete's sport */
.guide-links{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.guide-link{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.72);border:1px solid #E4D3A8;border-radius:9px;
  padding:10px 13px;font-size:13px;font-weight:600;color:var(--brand);text-decoration:none;transition:.15s}
.guide-link:hover{background:#fff;border-color:var(--gold)}
.guide-link:focus-visible{outline:3px solid var(--sky-600);outline-offset:2px}
.guide-link .ext{color:var(--gold);font-weight:700;flex:none}
.guide-empty{font-size:12.5px;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* secondary action on the film step */
.later-btn{width:100%;flex-direction:column;align-items:center;justify-content:center;gap:1px;margin-top:12px;padding:11px 18px}
.later-btn b{font-size:15px;font-weight:600;line-height:1.3}
.later-btn small{font-size:12px;font-weight:500;color:var(--faint)}
/* "more sports" entry point on the sport step */
.moresports{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;margin-top:14px;padding:13px 15px;cursor:pointer;text-align:left;
  background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:12px;font-family:var(--sans);color:var(--ink);transition:.15s}
.moresports:hover{border-color:var(--brand);background:var(--surface)}
.moresports:focus-visible{outline:3px solid var(--sky-600);outline-offset:2px}
.moresports b{font-size:14px;font-weight:600}
.moresports span{font-size:12.5px;color:var(--brand);font-weight:600}
.btn.full{width:100%;justify-content:center;margin-top:4px}
.linkback{display:block;width:100%;margin-top:12px;padding:6px;background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--muted)}
.linkback:hover{color:var(--ink)}
/* ============================================================
   FILM GUIDE PAGES (film-guide-*.html)
   ============================================================ */
.guide-hero{padding-top:46px;padding-bottom:4px}
.guide-hero h1,.guide-hero .sub,.guide-hero .why{max-width:760px}
.crumb{font-size:13px;color:var(--faint);margin-bottom:14px}
.crumb a{color:var(--brand);font-weight:600;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.guide-hero h1{font-size:clamp(29px,4vw,42px);line-height:1.1;margin:10px 0 14px}
.guide-hero .sub{font-size:clamp(16px,2vw,18px);color:var(--muted)}
.guide-hero .why{margin-top:18px;font-size:14px;color:var(--faint)}
.gsec{padding-top:clamp(34px,4.5vw,52px)}
.gsec>h2{font-size:clamp(22px,2.8vw,30px);margin-bottom:8px}
.gsec>.gsub{color:var(--muted);font-size:15.5px;margin-bottom:22px;max-width:660px}
/* A note that follows the numbered steps needs air; without it the line sits
   flush against the last step's text and reads as part of it. */
.gsec>h2+.steps{margin-top:22px}
.steps+.why{margin-top:26px}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.rule{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:19px 21px}
.rule h4{font-size:15px;font-family:var(--sans);font-weight:600;margin-bottom:5px}
.rule p{font-size:13.5px;color:var(--muted)}
.shot{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-bottom:14px}
.shot h3{font-size:19px;margin-bottom:6px}
.shot .cam{display:block;background:var(--gold-soft);border:1px solid #E4D3A8;border-radius:9px;padding:10px 13px;margin:10px 0 14px;
  font-size:13px;color:#7A5714;font-weight:600;line-height:1.5}
.shot ul{margin:0;padding-left:20px}
.shot li{font-size:14.5px;color:var(--muted);margin-bottom:6px}
.shot li b,.shot p b{color:var(--ink);font-weight:600}
.shot p{font-size:14.5px;color:var(--muted)}
.shot .note{font-size:13px;color:var(--faint);margin-top:12px}
.twoup{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.twoup .shot{margin-bottom:0}
@media(max-width:720px){.twoup{grid-template-columns:1fr}}
.sample-empty{background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius);padding:34px 26px;text-align:center}
.sample-empty .ic{display:block;margin:0 auto 12px;width:26px}
.sample-empty h4{font-size:17px;font-family:var(--display);font-weight:600;margin-bottom:6px}
.sample-empty p{font-size:14px;color:var(--muted);max-width:430px;margin:0 auto}
.sample-empty a{color:var(--brand);font-weight:600}
.gfinal{background:var(--brand);color:#fff;border-radius:18px;padding:clamp(30px,5vw,48px);text-align:center;margin-top:clamp(38px,5vw,56px)}
.gfinal h2{color:#fff;font-size:clamp(24px,3vw,32px);margin-bottom:10px}
.gfinal p{color:rgba(255,255,255,.78);font-size:15.5px;max-width:520px;margin:0 auto 22px}
.gfinal .btn-primary{background:var(--paper);color:var(--brand)}
.gfinal .btn-primary:hover{background:#fff}
.summary-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px}
.sline{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.sline:last-child{border-bottom:none}
.sline span{color:var(--faint)}
.sline b{color:var(--ink);font-weight:600;text-align:right;max-width:62%;overflow-wrap:anywhere}
.sline.total{padding-top:12px;font-size:16px}
.sline.total b{color:var(--brand);font-size:19px;font-family:var(--display)}
.modal-foot{padding:16px 26px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.modal-foot .back{background:none;border:none;color:var(--muted);font-weight:600;font-size:14px;cursor:pointer;padding:8px}
.modal-foot .back:hover{color:var(--ink)}
.modal-foot .back.hide{visibility:hidden}
.success{text-align:center;padding:30px 10px}
.success .checkmark{width:64px;height:64px;border-radius:50%;background:#E4F0E9;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.success .checkmark svg{width:30px;height:30px;stroke:var(--good);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.success h3{font-family:var(--display);font-size:23px}
.success p{font-size:14px;color:var(--muted);max-width:380px;margin:8px auto 0}
.err{color:#B4452F;font-size:12.5px;margin-top:5px;display:none}

/* ---- Parental consent gate (intake confirm step) -------------------------
   Deliberately not styled down into fine print: this is the record that a
   guardian agreed, so it reads at body size and the whole row is a hit
   target. The links open in a new tab so an in-progress intake survives. */
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 13px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;cursor:pointer}
.consent:hover{border-color:var(--line-strong)}
.consent input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;accent-color:var(--brand);cursor:pointer}
.consent span{font-size:13px;line-height:1.5;color:var(--muted)}
.consent a{color:var(--brand);text-decoration:underline}
.consent:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}

/* ---- Legal pages (terms, privacy) --------------------------------------- */
.legal{max-width:760px;margin:0 auto;padding:40px 0 72px}
.legal .eyebrow{display:block;margin-bottom:10px}
.legal h1{font-family:var(--display);font-size:clamp(30px,5vw,42px);line-height:1.1;letter-spacing:-.02em;margin:0 0 10px}
.legal .updated{font-size:13px;color:var(--faint);margin:0 0 8px}
.legal .plain{font-size:15px;line-height:1.6;color:var(--muted);background:var(--brand-50);
  border-left:3px solid var(--brand-300);border-radius:0 10px 10px 0;padding:14px 16px;margin:20px 0 32px}
.legal h2{font-family:var(--display);font-size:20px;letter-spacing:-.01em;margin:34px 0 10px;
  padding-top:22px;border-top:1px solid var(--line)}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal h3{font-size:15px;font-weight:700;margin:20px 0 6px;color:var(--ink)}
.legal p,.legal li{font-size:15px;line-height:1.65;color:var(--muted)}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal li{margin-bottom:7px}
.legal strong{color:var(--ink)}
.legal a{color:var(--brand)}
.legal .toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.legal .toc a{font-size:12.5px;padding:6px 11px;border:1px solid var(--line);border-radius:99px;
  background:var(--surface);text-decoration:none;color:var(--muted)}
.legal .toc a:hover{border-color:var(--brand-300);color:var(--brand)}
.legal table{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:14px}
.legal th,.legal td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
.legal th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700}
.legal .note{font-size:13px;color:var(--faint);border:1px dashed var(--line-strong);border-radius:10px;padding:12px 14px;margin:22px 0}
@media(max-width:640px){ .legal{padding:26px 0 56px} }

/* ---- Order confirmation (order-confirmed.html): where Stripe returns a buyer ---- */
.confirm{max-width:860px;padding-top:clamp(34px,6vw,60px);padding-bottom:20px}
.confirm .success{padding:0}
.confirm .success h1{font-size:clamp(30px,5vw,44px);line-height:1.1}
.confirm .success p{font-size:clamp(16px,2vw,18px);max-width:540px;margin-top:12px}
.confirm .order{max-width:480px;margin:28px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px 22px}
.confirm .order .sline b{max-width:74%}
.confirm .next{max-width:540px;margin:clamp(36px,5vw,48px) auto 0;text-align:center}
.confirm .next h2{font-size:clamp(23px,3vw,30px);margin-bottom:14px}
.confirm .next p{font-size:16px;color:var(--muted);margin-top:12px}
.confirm .next p a{color:var(--brand);font-weight:600}
.confirm .next .btn{margin-top:28px}
.confirm [hidden]{display:none}

/* ---- Coach supply: homepage band + coaches.html application form ---------
   The band is deliberately quiet. Parent conversion is what the homepages are
   paid to do, and coach supply is the healthiest side of the marketplace — so
   this routes the occasional coach out to coaches.html without competing with
   the $199 CTA. Selective language ("apply") everywhere, because "vetted
   coaches" is a promise made to families on every other section of the page.
   ------------------------------------------------------------------------ */
.coachband{display:flex;align-items:center;gap:16px;text-decoration:none;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;
  padding:18px 22px;transition:.15s}
.coachband:hover{border-color:var(--brand-300);background:var(--surface)}
.coachband:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.coachband .cb-ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;background:var(--brand-50);border:1px solid var(--brand-100)}
.coachband .cb-ic svg{width:19px;height:19px;stroke:var(--brand);stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.coachband .cb-tx{flex:1 1 auto;min-width:0}
.coachband .cb-tx b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:2px}
.coachband .cb-tx span{display:block;font-size:13px;color:var(--muted);line-height:1.5}
.coachband .cb-go{flex:0 0 auto;font-size:13.5px;font-weight:600;color:var(--brand);white-space:nowrap}
@media(max-width:640px){
  .coachband{align-items:flex-start;flex-wrap:wrap;gap:13px;padding:17px 18px}
  /* line the CTA up under the copy: icon (38) + the mobile gap (13). */
  .coachband .cb-go{width:100%;padding-left:51px;margin-top:-4px}
}

.coachform-card{max-width:720px;margin:0 auto;padding:clamp(22px,3vw,30px)}
.coachform .row2{gap:14px}
.coachform .field textarea{width:100%;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:10px;padding:12px 14px;color:var(--ink);font-family:var(--sans);font-size:16px;
  line-height:1.55;resize:vertical;transition:.15s}
.coachform .field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(46,53,126,.12)}
.coachform .btn.full{margin-top:6px;height:48px}
.opt-tag{font-weight:500;color:var(--faint);font-size:11.5px;letter-spacing:.02em}
.apply-note{font-size:12.5px;color:var(--faint);line-height:1.6;margin-top:14px}
@media(max-width:560px){ .coachform .row2{grid-template-columns:1fr} }