/* Sport landing pages (/soccer/, /soccer/leagues/, /sports/ ...). GENERATED SITE FILE - edit the source in
   my-athlete/scripts/site/sport-pages/sports.css and run build.py. Palette and type follow the premium coach
   pages (coach-premium.css) so a prospect moving to /programs sees one product. Everything is scoped under .sp. */
.sp {
  --ink:#0c1712; --ink-2:#10251c; --ink-3:#152720; --moss:#21392a; --paper:#f4f3ed; --paper-2:#e9e8df;
  --text:#f8f7f2; --muted:#c3cec6; --muted-2:#9fb0a4; --paper-ink:#15271f; --paper-muted:#5d6e62;
  --gold:#e2c990; --gold-2:#f0dba9; --gold-ink:#172218; --line:rgba(208,222,209,.17); --paper-line:#d3dbd1;
  margin:0; background:var(--ink); color:var(--text); font-family:Inter,Arial,sans-serif; -webkit-font-smoothing:antialiased;
}
.sp *, .sp *::before, .sp *::after { box-sizing:border-box; }
.sp img, .sp video { max-width:100%; }
.sp img { height:auto; }
.sp a { color:inherit; text-underline-offset:4px; }
.sp :focus-visible { outline:3px solid #b88d43; outline-offset:4px; }
.sp [hidden] { display:none !important; }
.sp section[id] { scroll-margin-top:84px; }
.sp-shell { max-width:1280px; margin:0 auto; padding:0 40px; }
.sp-kicker { font:600 11px/1.5 Inter,Arial,sans-serif; letter-spacing:.19em; text-transform:uppercase; color:#d9c28e; margin:0 0 18px; }
.sp-h2 { font:500 clamp(30px,3.3vw,46px)/1.12 Inter,Arial,sans-serif; letter-spacing:-1.6px; margin:0; }
.sp-h2 em { font-style:normal; color:#adc1a9; }
.sp-paper { background:var(--paper); color:var(--paper-ink); }
.sp-paper .sp-kicker { color:#62765f; }
.sp-paper .sp-h2 em { color:#6e816c; }
.sp-lede { font-size:16px; line-height:1.75; color:var(--muted); max-width:560px; margin:18px 0 0; }
.sp-paper .sp-lede { color:var(--paper-muted); }
.sp-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:44px; }
.sp-head > p { max-width:360px; margin:0; font-size:14px; line-height:1.75; color:var(--muted-2); }
.sp-paper .sp-head > p { color:var(--paper-muted); }
.sp-btn { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:52px; padding:15px 24px; border-radius:6px;
  background:var(--gold); color:var(--gold-ink); border:1px solid var(--gold); font:600 14px/1.3 Inter,Arial,sans-serif; text-decoration:none;
  cursor:pointer; transition:background .18s, transform .18s; }
.sp-btn:hover { background:var(--gold-2); transform:translateY(-2px); }
.sp-btn-ghost { background:rgba(13,27,20,.35); color:var(--text); border-color:rgba(242,245,235,.45); }
.sp a.sp-btn { color:var(--gold-ink); }
.sp a.sp-btn-ghost { color:var(--text); }
.sp .sp-paper a.sp-btn-ghost { color:var(--paper-ink); }
.sp-btn-ghost:hover { background:rgba(224,237,225,.14); }
.sp-paper .sp-btn-ghost { color:var(--paper-ink); border-color:#9fae9f; background:transparent; }
.sp-link { font-weight:600; font-size:13px; text-decoration:none; border-bottom:1px solid currentColor; padding:6px 0; }

/* Nav */
.sp-nav { position:fixed; inset:0 0 auto 0; z-index:50; background:rgba(9,17,14,.9); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.1); }
.sp-nav .sp-shell { height:72px; display:flex; align-items:center; gap:28px; }
.sp-brand { display:flex; align-items:center; gap:10px; text-decoration:none; font:700 19px/1 Inter,Arial,sans-serif; letter-spacing:-.5px; }
.sp-brand img { width:40px; height:30px; object-fit:contain; }
.sp-nav-links { display:flex; align-items:center; gap:24px; margin-left:auto; }
.sp-nav-links a { font:500 13px/1.3 Inter,Arial,sans-serif; text-decoration:none; color:#dfe5dc; }
.sp-nav-links a:hover { color:#fff; }
.sp-nav-links .sp-btn { min-height:42px; padding:10px 18px; font-size:13px; color:var(--gold-ink); }

/* Hero */
.sp-hero { position:relative; min-height:min(900px,100vh); display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; overflow:hidden; background:#06100c; }
.sp-hero-media { position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; }
.sp-hero-shade { position:absolute; inset:0; z-index:-2; background:
  linear-gradient(90deg,rgba(5,12,10,.94) 0%,rgba(5,12,10,.82) 32%,rgba(5,12,10,.35) 62%,rgba(5,12,10,.1) 100%),
  linear-gradient(0deg,rgba(5,12,10,.96) 0%,rgba(5,12,10,0) 45%); }
.sp-hero-inner { padding-top:150px; padding-bottom:40px; }
.sp-hero-copy { max-width:660px; }
.sp-mono { width:64px; height:auto; margin:0 0 22px; opacity:.95; }
.sp-hero h1 { margin:0 0 24px; font:500 clamp(42px,5.4vw,78px)/1.03 Inter,Arial,sans-serif; letter-spacing:-3px; color:#fffdf6; }
.sp-hero h1 em { font-style:normal; color:#e0c58b; display:block; }
.sp-hero-intro { max-width:540px; margin:0 0 30px; font-size:17px; line-height:1.7; color:#dee3dc; }
.sp-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.sp-hero-note { font-size:12px; line-height:1.7; color:#c6cec4; margin:18px 0 0; max-width:520px; }
.sp-proof { display:grid; grid-template-columns:repeat(3,1fr); margin-top:56px; border-top:1px solid rgba(227,235,218,.22); }
.sp-proof p { margin:0; padding:22px 28px 6px 0; }
.sp-proof p + p { padding-left:28px; border-left:1px solid rgba(227,235,218,.18); }
.sp-proof strong { display:block; font:500 20px/1.25 Inter,Arial,sans-serif; letter-spacing:-.4px; }
.sp-proof span { display:block; font-size:12px; color:#b3c1b5; margin-top:6px; line-height:1.5; }

/* Audience switch */
.sp-switch { background:var(--paper); color:var(--paper-ink); border-bottom:1px solid var(--paper-line); }
.sp-switch .sp-shell { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 10px; padding-top:18px; padding-bottom:18px; }
.sp-switch-label { white-space:nowrap; font:600 10px/1.5 Inter,Arial,sans-serif; letter-spacing:.19em; text-transform:uppercase; color:#607165; margin-right:8px; }
.sp-switch a { font:500 13px/1.3 Inter,Arial,sans-serif; text-decoration:none; color:#395144; padding:10px 14px; border-radius:5px; }
.sp-switch a:hover { background:#e6e9de; }
.sp-switch a[aria-current="page"] { background:#dce4d9; color:#142a1c; font-weight:600; }

/* Film */
.sp-film { background:var(--ink-2); padding:96px 0; }
.sp-player { position:relative; border-radius:10px; overflow:hidden; background:#000; box-shadow:0 30px 80px rgba(0,0,0,.45); aspect-ratio:16/9; }
.sp-player video { display:block; width:100%; height:100%; object-fit:cover; background:#000; }
.sp-player-cover { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,.05) 60%);
  border:0; padding:0; cursor:pointer; color:#fff; width:100%; }
.sp-play { width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(226,201,144,.95); color:var(--gold-ink);
  font-size:26px; padding-left:5px; box-shadow:0 12px 40px rgba(0,0,0,.4); transition:transform .2s; }
.sp-player-cover:hover .sp-play { transform:scale(1.07); }
.sp-sound { position:absolute; left:18px; bottom:18px; z-index:2; border:0; border-radius:999px; padding:11px 18px; background:rgba(226,201,144,.96); color:var(--gold-ink);
  font:600 13px/1 Inter,Arial,sans-serif; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.sp-film-meta { display:flex; justify-content:space-between; gap:20px; margin-top:18px; font-size:13px; color:var(--muted-2); }
.sp-film-meta strong { color:var(--text); font-weight:600; }

/* Tests */
.sp-tests { padding:100px 0; }
.sp-tests-grid { display:grid; grid-template-columns:1.25fr .9fr; gap:56px; align-items:start; }
.sp-pitch { font-size:17px; line-height:1.75; margin:0 0 30px; color:#34463b; }
.sp-cats { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sp-cat { background:#fbfaf6; border:1px solid var(--paper-line); border-radius:8px; padding:18px 18px 16px; }
.sp-cat h3 { margin:0 0 8px; font:600 11px/1.4 Inter,Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#50654f; }
.sp-cat p { margin:0; font-size:14px; line-height:1.6; color:#2a3a30; }
.sp-demands { list-style:none; margin:28px 0 0; padding:0; display:grid; gap:10px; }
.sp-demands li { position:relative; padding-left:26px; font-size:14px; line-height:1.55; color:#34463b; }
.sp-demands li::before { content:""; position:absolute; left:0; top:6px; width:12px; height:7px; border-left:2px solid #6e8a5f; border-bottom:2px solid #6e8a5f; transform:rotate(-45deg); }
.sp-side img { display:block; width:100%; border-radius:10px; border:1px solid var(--paper-line); cursor:zoom-in; background:#0c1712; }
.sp-side figcaption { font-size:12px; color:var(--paper-muted); margin-top:10px; line-height:1.5; }
.sp-side figure { margin:0 0 22px; }

/* Cards filmstrip */
.sp-cards { padding:96px 0 100px; background:var(--ink); }
.sp-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.sp-tabs button { border:1px solid rgba(208,222,209,.28); background:transparent; color:#dfe5dc; border-radius:999px; padding:10px 16px; font:500 13px/1 Inter,Arial,sans-serif; cursor:pointer; }
.sp-tabs button[aria-selected="true"] { background:var(--gold); color:var(--gold-ink); border-color:var(--gold); font-weight:600; }
.sp-strip { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 18px; scrollbar-width:thin; }
.sp-strip button { flex:0 0 auto; width:250px; padding:0; border:0; background:none; cursor:zoom-in; scroll-snap-align:start; text-align:left; color:var(--text); }
.sp-strip img { display:block; width:250px; aspect-ratio:4/5; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:#101a16; }
.sp-strip span { display:block; font-size:13px; color:var(--muted); margin-top:10px; }
.sp-strip-hint { font-size:12px; color:var(--muted-2); margin:6px 0 0; }

/* Steps */
.sp-how { padding:100px 0; }
.sp-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.sp-step { border-top:1px solid #c9d2c6; padding-top:22px; }
.sp-step b { display:block; font:500 12px/1 Inter,Arial,sans-serif; color:#6d7f69; margin-bottom:16px; }
.sp-step h3 { margin:0 0 10px; font:600 20px/1.3 Inter,Arial,sans-serif; letter-spacing:-.4px; }
.sp-step p { margin:0; font-size:14px; line-height:1.7; color:var(--paper-muted); }

/* Audience block */
.sp-aud { padding:96px 0; background:var(--ink-3); }
.sp-feats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.sp-feat { border:1px solid var(--line); border-radius:10px; padding:22px; background:rgba(255,255,255,.02); }
.sp-feat h3 { margin:0 0 10px; font:600 16px/1.35 Inter,Arial,sans-serif; }
.sp-feat p { margin:0; font-size:14px; line-height:1.65; color:var(--muted); }
.sp-aud-links { display:flex; flex-wrap:wrap; gap:22px; margin-top:28px; }
.sp-aud-links a { color:var(--gold-2); }

/* Families */
.sp-fam { padding:100px 0; }
.sp-fam-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.sp-fam ul { list-style:none; margin:28px 0 0; padding:0; display:grid; gap:18px; }
.sp-fam li strong { display:block; font:600 16px/1.35 Inter,Arial,sans-serif; margin-bottom:4px; }
.sp-fam li span { font-size:14px; line-height:1.65; color:var(--paper-muted); }
.sp-fam .sp-film-meta { color:var(--paper-muted); }
.sp-fam .sp-film-meta strong { color:var(--paper-ink); }

.sp-fam .sp-side img { max-width:440px; margin:0 auto; }

/* Social clips */
.sp-clips { padding:96px 0; background:var(--ink-2); }
.sp-clip-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; }
.sp-clip { position:relative; border-radius:12px; overflow:hidden; background:#000; aspect-ratio:9/16; }
.sp-clip video { width:100%; height:100%; object-fit:cover; display:block; }
.sp-clip .sp-player-cover { align-items:flex-end; justify-content:flex-start; padding:16px; }
.sp-clip .sp-play { width:52px; height:52px; font-size:17px; }
.sp-clip-title { font-size:13px; color:var(--muted); margin-top:10px; }

/* Pricing */
.sp-price { padding:100px 0; }
.sp-plans { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sp-plan { border:1px solid var(--paper-line); background:#fbfaf6; border-radius:12px; padding:30px; }
.sp-plan h3 { margin:0 0 12px; font:600 22px/1.3 Inter,Arial,sans-serif; letter-spacing:-.5px; }
.sp-plan p { margin:0; font-size:15px; line-height:1.7; color:#34463b; }
.sp-plan-free { background:#15271f; color:#f8f7f2; border-color:#15271f; }
.sp-plan-free p { color:#d7dfd5; }
.sp-plan-free .sp-tag { color:#e2c990; }
.sp-tag { display:block; font:600 10px/1.4 Inter,Arial,sans-serif; letter-spacing:.19em; text-transform:uppercase; color:#62765f; margin-bottom:14px; }
.sp-price-note { margin:22px 0 0; font-size:14px; line-height:1.7; color:var(--paper-muted); max-width:760px; }

/* FAQ */
.sp-faq { padding:96px 0; background:var(--ink); }
.sp-faq-list { max-width:880px; }
.sp-faq details { border-bottom:1px solid var(--line); }
.sp-faq summary { list-style:none; cursor:pointer; padding:22px 40px 22px 0; font:500 18px/1.4 Inter,Arial,sans-serif; position:relative; }
.sp-faq summary::-webkit-details-marker { display:none; }
.sp-faq summary::after { content:"+"; position:absolute; right:4px; top:18px; font-size:24px; color:var(--gold); }
.sp-faq details[open] summary::after { content:"\2013"; }
.sp-faq details p { margin:0 0 22px; font-size:15px; line-height:1.75; color:var(--muted); max-width:760px; }

/* Final CTA */
.sp-final { padding:110px 0; background:var(--moss); text-align:center; }
.sp-final .sp-h2 { margin:0 auto 16px; max-width:760px; }
.sp-final p { color:#d7dfd5; margin:0 auto 28px; max-width:560px; line-height:1.7; }
.sp-final .sp-actions { justify-content:center; }
.sp-human { font-size:13px; color:#c8d2c6 !important; margin-top:26px !important; }
.sp-human a { color:var(--gold-2); }

/* Footer */
.sp-foot { background:#0a1310; padding:64px 0 40px; border-top:1px solid var(--line); font-size:13px; color:var(--muted-2); }
.sp-foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.sp-foot h4 { margin:0 0 14px; font:600 11px/1.4 Inter,Arial,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#dfe5dc; }
.sp-foot a { display:block; text-decoration:none; color:#b9c6bb; margin:0 0 9px; }
.sp-foot a:hover { color:#fff; }
.sp-foot-sports { margin-top:40px; padding-top:26px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 18px; }
.sp-foot-sports a { display:inline; margin:0; }

/* Lightbox */
.sp-lb { position:fixed; inset:0; z-index:9000; background:rgba(4,9,7,.94); display:flex; align-items:center; justify-content:center; padding:56px 64px; }
.sp-lb img { max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.sp-lb button { position:absolute; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.35); color:#fff; border-radius:50%; width:48px; height:48px; font-size:20px; cursor:pointer; }
.sp-lb .sp-lb-x { top:16px; right:16px; }
.sp-lb .sp-lb-prev { left:14px; top:50%; transform:translateY(-50%); }
.sp-lb .sp-lb-next { right:14px; top:50%; transform:translateY(-50%); }
.sp-lb-count { position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#c3cec6; font-size:13px; }

/* Hub */
.sp-hub { padding:150px 0 100px; }
.sp-hub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; margin-top:46px; }
.sp-hub-card { position:relative; display:block; border-radius:12px; overflow:hidden; text-decoration:none; aspect-ratio:4/3; background:#06100c; border:1px solid var(--line); }
.sp-hub-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; transition:opacity .2s, transform .4s; }
.sp-hub-card:hover img { opacity:.95; transform:scale(1.04); }
.sp-hub-card span { position:absolute; left:18px; bottom:16px; right:18px; font:600 20px/1.2 Inter,Arial,sans-serif; letter-spacing:-.4px; text-shadow:0 2px 14px rgba(0,0,0,.6); }
.sp-hub-card small { display:block; font:500 12px/1.4 Inter,Arial,sans-serif; color:#d9e0d6; letter-spacing:0; margin-top:4px; }

@media (max-width: 980px) {
  .sp-tests-grid, .sp-fam-grid { grid-template-columns:1fr; gap:40px; }
  .sp-feats { grid-template-columns:1fr 1fr; }
  .sp-foot-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px) {
  .sp-shell { padding:0 20px; }
  .sp-nav-links a:not(.sp-btn):not(.sp-nav-keep) { display:none; }
  .sp-nav .sp-shell { height:64px; }
  .sp-hero { min-height:auto; }
  .sp-hero-inner { padding-top:120px; padding-bottom:24px; }
  .sp-hero h1 { letter-spacing:-1.8px; }
  .sp-hero-intro { font-size:16px; }
  .sp-actions .sp-btn { width:100%; }
  .sp-proof { grid-template-columns:1fr; margin-top:36px; }
  .sp-proof p, .sp-proof p + p { padding:16px 0 12px; border-left:0; border-bottom:1px solid rgba(227,235,218,.14); }
  .sp-head { flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:32px; }
  .sp-film, .sp-tests, .sp-cards, .sp-how, .sp-aud, .sp-fam, .sp-clips, .sp-price, .sp-faq { padding:68px 0; }
  .sp-final { padding:76px 0; }
  .sp-cats, .sp-steps, .sp-feats, .sp-plans { grid-template-columns:1fr; }
  .sp-steps { gap:26px; }
  .sp-strip button, .sp-strip img { width:210px; }
  .sp-clip-row { grid-template-columns:1fr 1fr; gap:12px; }
  .sp-switch .sp-shell { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; }
  .sp-switch a { white-space:nowrap; }
  .sp-lb { padding:56px 10px; }
  .sp-foot-grid { grid-template-columns:1fr 1fr; }
  .sp-hub { padding-top:110px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-btn, .sp-hub-card img, .sp-play { transition:none; }
}