/* =======================================================================
   Konia — "For clubs" and "For athletes" pages (clubs.html, athletes.html)
   Photo hero · sticky chapter index · six feature chapters · cross-link
   card · Perfect For (clubs only) · CTA. .fp-hero/.cta carry .band-dark in
   markup, so their fixed colours hold in both themes.

   Built from design_handoff_clubs_athletes/. The handoff was dark-only with
   about ten fixed colours; everything below the hero here reads from tokens,
   and the three values the design tuned for dark get their own token pair.
   ======================================================================= */

:root{
  --fp-list:var(--text);                      /* key-feature text */
  --fp-hover:rgba(15,23,42,.05);              /* index link hover */
  --fp-shot-shadow:0 34px 70px -34px rgba(15,23,42,.45);
}
[data-theme="dark"]{
  --fp-list:#D3D9E2;
  --fp-hover:rgba(255,255,255,.03);
  --fp-shot-shadow:0 40px 80px -34px rgba(0,0,0,.85);
}

/* ============================ HERO ============================ */
.fp-hero{position:relative;min-height:min(62vh,600px);display:flex;align-items:center;overflow:hidden;padding:80px 0 72px;background:var(--bg)}
.fp-hero-bg{position:absolute;inset:0}
.fp-hero-bg img{width:100%;height:100%;object-fit:cover;filter:var(--photo-filter)}
.fp-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,14,20,.97) 0%,rgba(11,14,20,.86) 42%,rgba(11,14,20,.45) 100%),linear-gradient(0deg,var(--bg) 2%,transparent 36%)}
.fp-hero .wrap{position:relative;z-index:1;width:100%}
.fp-hero-content{max-width:620px}
.fp-hero h1{font-size:clamp(40px,5.6vw,74px);line-height:1.06;letter-spacing:-.02em;margin-top:22px;text-wrap:balance;color:var(--text)}
.fp-hero h1 .accent{color:var(--green-bright)}
.fp-hero p{margin-top:20px;font-size:clamp(17px,1.5vw,20px);color:#C3CAD6;max-width:500px;text-wrap:pretty}
.fp-hero .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ============================ BODY: INDEX + CHAPTERS ============================ */
.fp-body{display:grid;grid-template-columns:232px minmax(0,1fr);gap:clamp(36px,5vw,72px);padding:clamp(48px,6vw,80px) 0 var(--section-py)}
.fp-side{position:sticky;top:96px;align-self:start}
.fp-side .ttl{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px 12px}
.idx{display:flex;flex-direction:column;gap:2px}
.idx a{display:flex;gap:12px;align-items:baseline;padding:9px 12px;border-radius:10px;font-size:15px;font-weight:500;color:var(--text-dim);transition:background .18s,color .18s}
.idx a b{font-family:var(--display);font-weight:400;font-size:13px;color:var(--muted);width:20px;flex:none}
.idx a:hover{color:var(--text);background:var(--fp-hover)}
.idx a.on{background:var(--green-soft);color:var(--text)}
.idx a.on b{color:var(--green-bright)}
.idx a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.xl{margin:22px 0 0 12px;padding-top:18px;border-top:1px solid var(--border);font-size:14px;color:var(--text-dim);line-height:1.6}
.xl a{color:var(--green-bright);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.xl a svg{width:15px;height:15px}
.mbar{display:none}

.ch{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(28px,4vw,56px);align-items:start;padding:0 0 clamp(56px,6vw,80px);margin-bottom:clamp(56px,6vw,80px);border-bottom:1px solid var(--border);scroll-margin-top:96px}
.ch:last-of-type{border-bottom:0;margin-bottom:0}
.ch .num{font-family:var(--display);font-size:14px;color:var(--green-bright);letter-spacing:.04em}
.ch h2{font-size:clamp(28px,3.2vw,40px);margin-top:10px;text-wrap:balance;color:var(--text)}
.ch .lead{margin-top:12px;font-size:17px;color:var(--text-dim);max-width:46ch;text-wrap:pretty}
.ck{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:26px;padding:0}
.ck li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--fp-list);line-height:1.45}
.ck li .chk{flex:none;margin-top:2px;width:19px;height:19px;border-radius:6px;background:var(--green-soft);display:grid;place-items:center;color:var(--green-bright)}
.ck li .chk svg{width:11px;height:11px}

/* "All details" expander: native <details>, one per chapter */
.more{margin-top:26px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card)}
.more summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;font-size:14.5px;font-weight:600;color:var(--text)}
.more summary::-webkit-details-marker{display:none}
.more summary .cnt{color:var(--muted);font-weight:500;margin-left:6px}
.more summary svg{width:16px;height:16px;flex:none;color:var(--text-dim);transition:transform .2s}
.more[open] summary svg{transform:rotate(45deg)}
.more summary:hover{color:var(--green-bright)}
.more summary:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:var(--radius-sm)}
.more ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin:0;padding:16px 18px 18px;border-top:1px solid var(--border)}
.more li{font-size:14px;color:var(--text-dim);display:flex;gap:10px;line-height:1.45}
.more li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--green);margin-top:8px}

/* Screenshots. The bezel is a phone, so it stays dark in both themes. */
.shot{width:100%;max-width:260px;justify-self:end;border-radius:38px;padding:8px;background:#05070B;border:1px solid rgba(255,255,255,.13);box-shadow:var(--fp-shot-shadow)}
.shot img{display:block;width:100%;border-radius:31px;aspect-ratio:9/19.5;object-fit:cover;object-position:top}
.shot.ph .ph-in,.shot-wide .ph-in{display:grid;place-items:center;border-radius:31px;aspect-ratio:9/19.5;background-color:rgba(255,255,255,.02);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 11px)}
.shot-wide{width:100%;justify-self:end;border-radius:14px;padding:6px;background:#05070B;border:1px solid rgba(255,255,255,.13);box-shadow:var(--fp-shot-shadow)}
.shot-wide img{display:block;width:100%;border-radius:9px;aspect-ratio:4/3;object-fit:cover;object-position:top}
.shot-wide .ph-in{aspect-ratio:4/3;border-radius:9px}
.ph-lbl{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9AA3B2;background:rgba(7,9,13,.6);padding:6px 11px;border-radius:7px;border:1px solid rgba(255,255,255,.07);text-align:center}

/* Cross-link card to the other page */
.xcard{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(56px,6vw,80px);padding:28px 30px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.xcard h3{font-size:22px;color:var(--text)}
.xcard p{color:var(--text-dim);font-size:15px;margin-top:6px}

/* ============================ PERFECT FOR (clubs only) ============================ */
.perfect{padding:var(--section-py) 0;background:var(--bg-band);border-top:1px solid var(--border)}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:54px}
.cat{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;display:flex;align-items:flex-end;border:1px solid var(--border)}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--photo-filter);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,9,13,.92) 4%,rgba(7,9,13,.25) 55%,rgba(7,9,13,.5) 100%)}
.cat:hover img{transform:scale(1.07)}
.cat-body{position:relative;z-index:1;padding:22px;color:#EEF1F6}
.cat-body .k{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8DE2B4}
.cat-body h3{font-size:21px;font-weight:700;margin-top:9px;color:#fff}
.cat-body p{font-size:13px;color:#C3CAD6;margin-top:7px}

/* ============================ CTA ============================ */
.cta{position:relative;overflow:hidden;padding:clamp(86px,11vw,150px) 0;text-align:center;background:var(--bg)}
.cta-bg{position:absolute;inset:0;z-index:0}
.cta-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:var(--photo-filter)}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,20,.82),rgba(11,14,20,.9)),radial-gradient(120% 80% at 50% 120%,var(--green-soft),transparent 60%)}
.cta .wrap{position:relative;z-index:1}
.cta h2{font-size:clamp(32px,4.6vw,58px);font-weight:800;text-wrap:balance;color:var(--text)}
.cta p{margin:18px auto 0;color:#C3CAD6;font-size:clamp(16px,1.5vw,20px);max-width:520px}
.store-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:38px}

/* ============================ RESPONSIVE ============================ */
@media(max-width:980px){
  .fp-body{grid-template-columns:1fr;gap:0;padding-top:0}
  .fp-side{display:none}
  .mbar{display:block;position:sticky;top:64px;z-index:50;margin:0 -28px 40px;background:var(--header-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
  .mbar-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 28px;background:none;border:0;color:var(--text);font:600 15px var(--font-family);cursor:pointer;text-align:left}
  .mbar-btn b{font-family:var(--display);font-weight:400;color:var(--green-bright);margin-right:10px}
  .mbar-btn svg{width:16px;height:16px;flex:none;color:var(--text-dim);transition:transform .2s}
  .mbar-btn:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
  .mbar.open .mbar-btn svg{transform:rotate(180deg)}
  .mbar .idx{display:none;padding:0 16px 14px}
  .mbar.open .idx{display:flex}
  .ch{grid-template-columns:1fr;scroll-margin-top:130px}
  .shot{justify-self:start;max-width:230px}
  .shot-wide{justify-self:start;max-width:420px}
  .cat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){.more ul{grid-template-columns:1fr}}
@media(max-width:560px){.mbar{margin:0 -20px 36px}.mbar-btn{padding:14px 20px}}
@media(prefers-reduced-motion:reduce){.cat img,.more summary svg,.mbar-btn svg{transition:none}}