/* =========================================================================
   Athlo.ai — shared styles (landing page + docs)
   Design reference: document(10).pdf (light mode), sampled palette below.
   Dark mode derived from the same tokens to match the app's own dark theme.
   ========================================================================= */


:root {
  /* Brand (fixed across themes) */
  --brand-orange: #F44A01;
  --brand-red: #CF0007;
  --brand-cyan: #16EEEE;

  /* Light theme */
  --ink: #0A3B49;
  --ink-soft: rgba(10, 59, 73, 0.76);
  --ink-faint: rgba(10, 59, 73, 0.70);
  --ink-on-panel: rgba(10, 59, 73, 0.88);
  /* Coloured text and focus rings: the brand cyan is 1.4:1 on white, so light
     mode uses a deep teal of the same hue (4.9:1). */
  --accent-text: #077E7E;
  --soon-bg: #D13F00; /* brand orange, deepened so white 11px text reaches 4.75:1 */
  --bg: #FFFFFF;
  --bg-alt: #F7F7F7;
  --bg-tint: #E9F1F3;
  --band-blue: #CAE0E6;
  --panel: #A9C0C4;
  --panel-strong: #7B9599;
  --surface: #FFFFFF;
  --surface-border: rgba(10, 59, 73, 0.10);
  --pill-outline: rgba(10, 59, 73, 0.28);
  --btn-primary-bg: #005973;
  --btn-primary-text: #FFFFFF;
  --shadow: 0 1px 2px rgba(10,59,73,0.06), 0 16px 32px -20px rgba(10,59,73,0.28);
  --wave-gradient: linear-gradient(115deg, #F44A01 0%, #E22B03 45%, #CF0007 100%);
  --code-bg: #F1F6F7;
  --hero-scrim: transparent;
  --league-bg: url('../img/league_background_light.jpg');
  --club-bg: url('../img/club_background_light.jpg');
  --hero-bg2: url('../img/hero-bg2.jpg');
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  /* placeholder — overridden below; kept so un-stamped root still resolves */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #EAF4F5;
    --ink-soft: rgba(234, 244, 245, 0.72);
    --ink-faint: rgba(234, 244, 245, 0.56);
    --ink-on-panel: rgba(234, 244, 245, 0.78);
    --accent-text: #16EEEE;
    --bg: #071A1D;
    --bg-alt: #0B2226;
    --bg-tint: #0E2A2E;
    --band-blue: #0F3038;
    --panel: #123840;
    --panel-strong: #1B4750;
    --surface: #0D262A;
    --surface-border: rgba(234, 244, 245, 0.10);
    --pill-outline: rgba(234, 244, 245, 0.28);
    --btn-primary-bg: #16EEEE;
    --btn-primary-text: #052224;
    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 20px 40px -20px rgba(0,0,0,0.6);
    --wave-gradient: linear-gradient(115deg, #F44A01 0%, #B32206 55%, #7A0A08 100%);
    --code-bg: #0A2024;
    --hero-scrim: transparent; /* hero-bg2-dark.jpg is already darkened — no extra overlay */
    --league-bg: url('../img/league_background_dark.jpg');
    --club-bg: url('../img/club_background_dark.jpg');
    --hero-bg2: url('../img/hero-bg2-dark.jpg');
  }
}

:root[data-theme="dark"] {
  --ink: #EAF4F5;
  --ink-soft: rgba(234, 244, 245, 0.72);
  --ink-faint: rgba(234, 244, 245, 0.56);
  --ink-on-panel: rgba(234, 244, 245, 0.78);
  --accent-text: #16EEEE;
  --bg: #071A1D;
  --bg-alt: #0B2226;
  --bg-tint: #0E2A2E;
  --band-blue: #0F3038;
  --panel: #123840;
  --panel-strong: #1B4750;
  --surface: #0D262A;
  --surface-border: rgba(234, 244, 245, 0.10);
  --pill-outline: rgba(234, 244, 245, 0.28);
  --btn-primary-bg: #16EEEE;
  --btn-primary-text: #052224;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 20px 40px -20px rgba(0,0,0,0.6);
  --wave-gradient: linear-gradient(115deg, #F44A01 0%, #B32206 55%, #7A0A08 100%);
  --code-bg: #0A2024;
  --hero-scrim: transparent; /* hero-bg2-dark.jpg is already darkened — no extra overlay */
  --league-bg: url('../img/league_background_dark.jpg');
  --club-bg: url('../img/club_background_dark.jpg');
  --hero-bg2: url('../img/hero-bg2-dark.jpg');
}

* { box-sizing: border-box; }
html { color-scheme: light dark; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: 'Sora', 'Manrope', ui-sans-serif, sans-serif; margin: 0; text-wrap: balance; color: var(--ink); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 4px; }
/* Keyboard users can jump past the header; hidden until focused. */
.skip-link {
  position: absolute; left: 16px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-weight: 700; font-size: 14px; text-decoration: none;
  transform: translateY(-160%); transition: transform .15s ease;
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }
/* Wide reference tables (legal pages) scroll sideways on a phone instead of being clipped. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 560px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

.container { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.wide { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px;
  padding: 11px 22px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); box-shadow: var(--shadow); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--pill-outline); }
.btn-outline:hover { border-color: var(--ink); }
.btn-wave { background: #fff; color: var(--brand-red); font-weight: 800; }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--surface-border);
}
.site-header .row { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand .logo-lockup { height: 30px; width: auto; max-width: none; display: block; }
.brand .logo-lockup.dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-lockup.light { display: none; }
  :root:not([data-theme="light"]) .brand .logo-lockup.dark { display: block; }
}
:root[data-theme="dark"] .brand .logo-lockup.light { display: none; }
:root[data-theme="dark"] .brand .logo-lockup.dark { display: block; }
.nav-actions { display: flex; align-items: center; gap: 10px; position: relative; }
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--pill-outline);
  background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
.main-nav { display: flex; align-items: center; gap: 28px; margin: 0 auto; }
.main-nav a { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.main-nav a:hover { color: var(--ink); }
.menu-btn { display: none; }

/* ---- Icon-style nav buttons + dropdown (matches the PDF header) ---- */
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--pill-outline);
  background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .15s ease;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { border-color: var(--ink); }
.btn-login { background: transparent; color: var(--brand-orange); border: 1.5px solid var(--brand-orange); }
.btn-signup { background: var(--ink); color: var(--bg); }
.btn-with-soon { position: relative; display: inline-flex; }
.mini-soon {
  position: absolute; top: -8px; right: -8px; z-index: 2; pointer-events: none;
  background: var(--soon-bg); color: #fff; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px;
  line-height: 1.5; box-shadow: 0 2px 5px rgba(0,0,0,.3); white-space: nowrap;
}
.inline-soon {
  display: inline-block; vertical-align: middle; margin-left: 6px; transform: translateY(-1px);
  background: var(--soon-bg); color: #fff; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px;
}
.nav-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30;
  background: #0A3B49; color: #fff; border-radius: 18px; padding: 18px 24px;
  box-shadow: var(--shadow); min-width: 230px; display: none; flex-direction: column; gap: 12px;
}
.nav-dropdown[data-open] { display: flex; }
.nav-dropdown a { color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.nav-dropdown a:hover { color: var(--accent-text); }
.nav-dropdown-divider { height: 1px; background: rgba(255,255,255,.16); margin: 2px 0; }

/* ---- Hero + Sports (shared photo background, extracted from the PDF) ---- */
.hero-combo {
  position: relative; overflow: hidden; background: var(--bg);
  background-image: var(--hero-bg2);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 981px) {
  .hero-combo { aspect-ratio: 1600 / 1979; } /* matches hero-bg2.jpg exactly, so cover never crops it */
}
.hero-combo::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--hero-scrim); }
.hero-combo > .container { position: relative; z-index: 1; }
.hero-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 560px; padding-top: 64px; }
.hero-copy { max-width: 480px; padding-top: 24px; }
.hero-copy h1 { font-size: clamp(34px, 4.4vw, 50px); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.hero-copy .sub { margin-top: 18px; color: var(--ink); font-size: 16px; font-weight: 700; }
.store-badges { margin-top: 16px; display: flex; gap: 10px; }
.store-badges img { height: 40px; width: auto; }
.hero-visual { flex: none; width: 44%; max-width: 460px; min-height: 520px; }
#sports { padding: 220px 0 96px; }
@media (min-width: 981px) {
  /* hero-combo's height scales as 123.7% of viewport width (matching hero-bg2.jpg's
     1600:1979 aspect-ratio); scale this padding the same way so the cards track the
     bottom of the image at any desktop width instead of only at one fixed width. */
  #sports { padding-top: max(340px, calc(123.7vw - 1240px)); }
}

/* ---- Sport cards ---- */
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.eyebrow { text-align: center; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-orange); margin-bottom: 10px; }
h2.section-title { text-align: center; font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; }
p.section-sub { max-width: 62ch; margin: 16px auto 0; text-align: center; color: var(--ink-soft); font-size: 16px; }

.sport-cards {
  display: flex; align-items: center; justify-content: safe center; gap: 20px; margin-top: 48px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; padding: 8px 4px;
}
.sport-cards::-webkit-scrollbar { display: none; }
.sport-card { scroll-snap-align: center; }
.sport-card { position: relative; border-radius: 28px; overflow: hidden; width: 230px; box-shadow: var(--shadow); flex: none; }
.sport-card.is-featured { transform: translateY(-16px); width: 250px; z-index: 1; }
.sport-card img { width: 100%; display: block; }
.sport-card.is-soon img { filter: grayscale(.25); opacity: .82; }
.sport-card .soon-badge {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(10,20,22,.72); color: #fff; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px;
  backdrop-filter: blur(3px); white-space: nowrap;
}
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.carousel-dots button {
  position: relative; width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: var(--panel); cursor: pointer; transition: background-color .15s ease, transform .15s ease;
}
/* The dot stays 8px; the tap area around it is 24px. */
.carousel-dots button::before { content: ""; position: absolute; inset: -8px; }
.carousel-dots button.on { background: var(--panel-strong); transform: scale(1.25); }

/* ---- Testimonials ---- */
.testi-band { background: var(--band-blue); padding: 72px 0; }
.testi-row-wrap { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 40px; }
.testi-row {
  display: flex; align-items: flex-start; justify-content: safe center; gap: 20px; flex: 1; min-width: 0; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px;
}
.testi-row::-webkit-scrollbar { display: none; }
.testi-card {
  background: var(--surface); border-radius: 18px; padding: 24px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; flex: none; scroll-snap-align: start;
  width: calc((100% - 40px) / 3);
}
.testi-card .name { font-weight: 800; margin-bottom: 8px; }
.testi-card p { color: var(--ink-soft); font-size: 14.5px; }
.testi-card .foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; }
.stars { color: var(--brand-orange); font-size: 15px; letter-spacing: 2px; }
.testi-arrow {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink);
  background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.testi-arrow svg { width: 18px; height: 18px; }
/* Every card already fits: nothing to scroll to (theme.js toggles this). */
.testi-arrow.is-idle { visibility: hidden; }
.testi-row { overflow-y: hidden; transition: height .35s cubic-bezier(.16,1,.3,1); }
.testi-dots { margin-top: 8px; }
.testi-dots button { color: var(--ink); background: currentColor; opacity: .35; }
.testi-dots button.on { background: currentColor; opacity: 1; }
.testi-dots[hidden] { display: none; }

/* ---- Photo band ---- */
.photo-band { border-radius: 32px; overflow: hidden; position: relative; box-shadow: var(--shadow); }
.photo-band img { width: 100%; display: block; aspect-ratio: 21/8; object-fit: cover; }

/* ---- Club management / League management (shared promo-band pattern) ---- */
.league-section {
  margin-top: 110px; margin-bottom: 56px; padding: 88px 0 112px;
  /* The copy sits on the photo's left side; a wash of the page colour keeps
     it readable while the right side of the photo stays clear. */
  --copy-wash: linear-gradient(90deg,
    color-mix(in srgb, var(--bg) 90%, transparent) 0%,
    color-mix(in srgb, var(--bg) 84%, transparent) 50%,
    transparent 70%);
  background-image: var(--copy-wash), var(--league-bg); background-size: cover; background-position: right center; background-repeat: no-repeat;
}
/* Club management reuses the whole pattern — same section, just its own
   background and no device-shot visual (the background art itself fills
   that space, same approach as .hero-combo). Sits right after the
   testimonials band, which already has its own bottom padding, so it
   doesn't need League's extra top margin. */
.club-section { margin-top: 0; background-image: var(--copy-wash), var(--club-bg); }
/* Club Management sits directly above League Management now — both carry
   generous margins tuned for sitting next to a plain section, so stacked
   together they'd leave a huge dead gap. Collapse League's top margin here. */
.club-section + .league-section { margin-top: 0; }
.league-inner { display: flex; align-items: center; gap: 48px; }
.league-copy { flex: 1 1 560px; max-width: 560px; }
.league-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 18px;
}
.league-eyebrow .dash { width: 22px; height: 2px; background: var(--accent-text); border-radius: 1px; }
.league-title { font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; line-height: 1.1; }
.league-lede { margin-top: 18px; max-width: 46ch; color: var(--ink-soft); font-size: 16px; }

.league-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 28px; margin-top: 40px; }
.league-feature { display: flex; gap: 14px; align-items: flex-start; }
.league-feature-icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.league-feature-icon svg { width: 20px; height: 20px; }
.league-feature h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.league-feature p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }

.league-cta { display: flex; align-items: center; gap: 20px; margin-top: 40px; flex-wrap: wrap; }
.league-cta .btn svg { margin-left: 2px; }
.league-cta-caption { font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }

.league-visual { position: relative; flex: 1 1 380px; max-width: 460px; height: 460px; }
.league-shots-row { position: relative; width: 100%; height: 100%; }
.league-shots-dots { display: none; }
.league-device {
  position: absolute; border-radius: 22px; background: var(--surface); border: 1px solid var(--surface-border);
  box-shadow: 0 1px 2px rgba(10,59,73,0.08), 0 30px 60px -24px rgba(10,59,73,0.38);
  padding: 8px; overflow: hidden;
}
.league-device img { width: 100%; display: block; border-radius: 15px; }
.league-device--tablet { width: 78%; top: 0; left: 0; }
.league-device--phone { width: 40%; bottom: 0; right: 4%; z-index: 2; box-shadow: 0 1px 2px rgba(10,59,73,0.1), 0 26px 46px -18px rgba(10,59,73,0.45); }
.league-device--standings2 { display: none; } /* mobile-only 3rd slide; desktop keeps the 2-device overlap composition */
.league-shot.dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .league-shot.light { display: none; }
  :root:not([data-theme="light"]) .league-shot.dark { display: block; }
}
:root[data-theme="dark"] .league-shot.light { display: none; }
:root[data-theme="dark"] .league-shot.dark { display: block; }

/* ---- Wave CTA ---- */
.wave-cta { position: relative; margin-top: 90px; padding: 130px 0 90px; text-align: center; color: #fff; overflow: hidden; }
.wave-cta::before {
  content: ""; position: absolute; inset: 0; background: var(--wave-gradient);
  border-radius: 55% 45% 0 0 / 110px 110px 0 0;
}
.wave-cta .content { position: relative; z-index: 1; }
.wave-cta h2 { color: #fff; font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin-top: 28px; }
.wave-phone { position: relative; z-index: 1; width: 100%; max-width: 460px; margin: 0 auto; }
.wave-phone img { width: 100%; display: block; }

/* ---- Feature gallery ---- */
.gallery-wrap { padding-top: 110px; display: flex; flex-direction: column; gap: 18px; }
/* Still rows: centred when they fit, swipe/scroll sideways when they don't.
   (They used to scroll forever in opposite directions, with no way to stop
   them on touch or keyboard.) */
.gallery-track {
  display: flex; justify-content: safe center; gap: 18px; overflow-x: auto; padding: 4px 20px 12px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-item { width: 200px; height: 340px; border-radius: 22px; overflow: hidden; position: relative; flex: none; box-shadow: var(--shadow); scroll-snap-align: center; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
/* This photo has its caption baked in at the bottom; crop from the top instead. */
.gallery-item img[src$="sport-basketball.jpg"] { object-position: center bottom; }
.gallery-item.card { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px; color: #fff; }
.gallery-item.card h3 { color: #fff; font-size: 21px; font-weight: 800; }
.gallery-item.teal { background: linear-gradient(160deg, #0B4B57, #04181C); }
.gallery-item.peach { background: linear-gradient(160deg, #F8C9A8, #F2A487); color: #5A2A0E; }
.gallery-item.peach h3 { color: #5A2A0E; }

/* ---- FAQ ---- */
.faq-panel { background: var(--panel); border-radius: 28px; padding: 56px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: start; }
.faq-panel h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; }
.faq-list { border-top: 1px solid var(--surface-border); }
.faq-item { border-bottom: 1px solid var(--surface-border); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 4px; background: none; border: none; text-align: left; font-family: inherit; font-size: 15.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.faq-q .plus { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; flex: none; transition: transform .2s ease; }
.faq-item[open] .plus { transform: rotate(45deg); }
.faq-a { padding: 0 4px 18px; color: var(--ink-on-panel); font-size: 14.5px; }

/* ---- Footer ---- */
.site-footer {
  position: relative; margin-top: 96px; padding: 72px 0 32px; overflow: hidden; background: var(--bg-tint);
  background-image: url('../img/footer-watermark.jpg'); background-size: cover; background-position: center;
}
:root[data-theme="dark"] .site-footer { background-image: none; }
.footer-mark { position: absolute; right: -6%; bottom: -10%; width: 46%; opacity: .35; display: none; }
:root[data-theme="dark"] .footer-mark { display: block; }
.footer-mark path { fill: var(--panel-strong); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer { background-image: none; }
  :root:not([data-theme="light"]) .footer-mark { display: block; }
}
.footer-row { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 220px; font-size: 13.5px; color: var(--ink-faint); }
.footer-links { display: flex; gap: 24px; }
.footer-links a:hover { color: var(--ink); }

/* ---- Docs shell ---- */
.docs-shell { display: grid; grid-template-columns: 260px 1fr; gap: 0; align-items: start; }
.docs-side {
  position: sticky; top: 88px; padding: 40px 28px 40px 0; border-right: 1px solid var(--surface-border);
  height: calc(100vh - 88px); overflow-y: auto;
}
.docs-side .grp { margin-bottom: 26px; }
.docs-nav > summary { display: none; }
.docs-side .grp-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin-bottom: 10px; }
.docs-side a, .docs-side .soon { display: block; padding: 7px 12px; margin: 1px 0; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.docs-side a:hover { background: var(--bg-alt); color: var(--ink); }
.docs-side a.active { background: var(--bg-tint); color: var(--ink); }
.docs-side .soon { color: var(--ink-faint); }
.docs-side .soon .tag { float: right; font-size: 11px; font-weight: 800; text-transform: uppercase; background: var(--panel); color: var(--ink); padding: 1px 6px; border-radius: 5px; }
.docs-main { padding: 48px 0 96px 56px; max-width: 780px; }
.legal-main { margin: 0 auto; padding: 56px 24px 96px; max-width: 760px; }
.legal-updated { color: var(--ink-faint); font-size: 13.5px; margin-top: 10px; }
.docs-kicker { font-weight: 700; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-orange); }
.docs-main h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; margin-top: 10px; }
.docs-lede { margin-top: 16px; font-size: 17.5px; color: var(--ink-soft); max-width: 62ch; }
.docs-main h2 { font-size: 24px; font-weight: 800; margin-top: 52px; padding-top: 8px; border-top: 1px solid var(--surface-border); }
.docs-main h2:first-of-type { border-top: none; margin-top: 40px; padding-top: 0; }
.docs-main h3 { font-size: 18px; font-weight: 700; margin-top: 28px; }
.docs-main p { margin-top: 14px; color: var(--ink-soft); font-size: 15.5px; max-width: 66ch; }
.docs-main ul, .docs-main ol { margin-top: 14px; padding-left: 22px; color: var(--ink-soft); font-size: 15.5px; }
.docs-main li + li { margin-top: 6px; }
.docs-main strong { color: var(--ink); }
.docs-main code { font-family: ui-monospace, 'SFMono-Regular', monospace; background: var(--code-bg); padding: 2px 6px; border-radius: 5px; font-size: 0.88em; }
.callout { margin-top: 20px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--surface-border); background: var(--bg-alt); font-size: 14.5px; color: var(--ink-soft); }
.callout strong { color: var(--ink); }
.callout.warn { background: color-mix(in srgb, var(--brand-orange) 10%, var(--bg-alt)); border-color: color-mix(in srgb, var(--brand-orange) 30%, var(--surface-border)); }
.callout.tip { background: color-mix(in srgb, var(--brand-cyan) 12%, var(--bg-alt)); border-color: color-mix(in srgb, var(--brand-cyan) 35%, var(--surface-border)); }

.step-list { counter-reset: step; margin-top: 24px; display: flex; flex-direction: column; gap: 28px; }
.step { position: relative; padding-left: 44px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: var(--bg); font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { margin-top: 0; font-size: 16.5px; }
.step p { margin-top: 8px; }
.step-actor {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--surface-border); margin-bottom: 8px; color: var(--ink-soft);
}
.step-shot { margin-top: 14px; max-width: 300px; border-radius: 16px; overflow: hidden; border: 1px solid var(--surface-border); box-shadow: var(--shadow); }
.step-shot img { width: 100%; height: auto; }
/* Landscape captures (tablet / 14" screen) and phone + large-screen pairs */
.step-shot.wide { max-width: 720px; }
.step-shots { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
/* A definite basis, not the image's own width: lazy images have no size until
   they load, and a shrink-to-fit card would collapse to 0 and never load. */
.step-shots .step-shot { flex: 0 1 300px; }
.step-shots .step-shot.wide { flex-basis: 720px; }
.step-shot-caption { margin-top: 6px; font-size: 12.5px; color: var(--ink-faint); }

.status-flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; font-size: 13px; font-weight: 700; }
.status-pill { padding: 6px 13px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--surface-border); color: var(--ink-soft); }
.status-pill.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.status-arrow { color: var(--ink-faint); }

table.doc-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; }
table.doc-table th, table.doc-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--surface-border); }
table.doc-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 800; }

.docs-mobile-nav { display: none; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .main-nav { display: none; }
  .hero-inner { flex-direction: column; text-align: center; }
  .hero-copy { max-width: 100%; }
  /* Phone visitors mostly arrive from a message link: the download badges
     sit right under the headline, inside the first screen, and the photo
     (whose phone frame would otherwise run under the copy) starts lower. */
  .hero-inner { justify-content: flex-start; min-height: 600px; padding-top: 28px; }
  .hero-copy { padding-top: 0; }
  .hero-combo::before { background: linear-gradient(var(--bg) 120px, transparent 240px); }
  .store-badges { justify-content: center; flex-wrap: wrap; margin-top: 20px; }
  .store-badges img { height: 44px; }
  .hero-visual { display: none; }
  .hero-combo { background-size: 240% auto; background-position: center 120px; }
  /* Tablets: 240% of the width blows the photo up so far that the sports
     heading and cards land on the shirt. A fixed width keeps the phone-sized
     composition, with the cards below the photo. */
  @media (min-width: 641px) { .hero-combo { background-size: 900px auto; } }
  .sport-card.is-featured { transform: none; }
  .league-section {
    margin-top: 72px; margin-bottom: 48px; padding: 64px 0 72px; background-size: cover, 340% auto; background-position: center, right 30%;
    /* Stacked: the wash runs down from the top, behind the heading, intro
       and (for League) the button and caption; the cards carry their own
       surfaces. */
    --copy-wash: linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 88%, transparent) 0,
      color-mix(in srgb, var(--bg) 82%, transparent) var(--wash-end, 300px),
      transparent calc(var(--wash-end, 300px) + 160px));
  }
  #league { --wash-end: 620px; }
  .club-section { margin-top: 0; background-size: cover; background-position: center; }
  /* Landscape and portrait shots side by side: cap the tall portrait one
     (its top holds what matters) and centre them, so a landscape slide
     doesn't sit above a blank band the height of a phone screen. */
  .league-shots-row { align-items: center; }
  .league-device img { max-height: 440px; object-fit: cover; object-position: top; }
  .club-section + .league-section { margin-top: 0; }
  .league-inner { flex-direction: column; }
  .league-copy { max-width: 100%; text-align: center; }
  .league-eyebrow, .league-cta { justify-content: center; }
  .league-lede { margin-left: auto; margin-right: auto; }

  /* Feature cards become a swipeable row — plain text on the busy photo
     background is unreadable in dark mode, so each one gets a surface card. */
  .league-features {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; margin: 32px -20px 0; padding: 4px 20px 10px;
    text-align: left;
  }
  .league-feature {
    flex: 0 0 auto; width: 78vw; max-width: 280px; scroll-snap-align: center;
    background: var(--surface); border: 1px solid var(--surface-border); border-radius: 16px;
    padding: 18px; box-shadow: var(--shadow);
  }
  .league-features::-webkit-scrollbar { display: none; }

  /* Device shots become a swipeable row too, instead of the overlapping
     desktop composition (which relies on room this narrow doesn't have). */
  .league-visual { width: 100%; max-width: 100%; height: auto; margin-top: 8px; }
  .league-shots-row {
    position: static; height: auto; display: flex; gap: 16px; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 4px 12px;
  }
  .league-device {
    position: static; flex: 0 0 auto; width: 78vw; max-width: 320px; scroll-snap-align: center;
    box-shadow: 0 1px 2px rgba(10,59,73,0.08), 0 30px 60px -24px rgba(10,59,73,0.38);
  }
  .league-device--standings2 { display: block; }
  .league-shots-row::-webkit-scrollbar { display: none; }
  .league-shots-dots { display: flex; }
  .testi-card { width: 82%; }
  .testi-arrow { width: 36px; height: 36px; }
  .faq-panel { grid-template-columns: 1fr; padding: 32px; }
  .docs-shell { grid-template-columns: 1fr; }
  /* On a phone the guide comes first: the guide list folds into one
     "All guides" row above it (theme.js closes it below this width). */
  .docs-side { position: static; height: auto; border-right: none; padding: 16px 0 0; }
  .docs-nav > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 48px; padding: 0 16px; border: 1px solid var(--surface-border); border-radius: 12px;
    background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 700;
    cursor: pointer; list-style: none;
  }
  .docs-nav > summary::-webkit-details-marker { display: none; }
  .docs-nav > summary::after {
    content: ""; width: 8px; height: 8px; margin-top: -4px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .2s cubic-bezier(.16,1,.3,1);
  }
  .docs-nav[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
  .docs-nav[open] > summary { margin-bottom: 20px; }
  .docs-nav[open] { padding-bottom: 8px; border-bottom: 1px solid var(--surface-border); }
  .docs-side a, .docs-side .soon { padding: 11px 12px; }
  .docs-main { padding: 32px 0 72px; }
  .footer-row { padding-top: 120px; }
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .sport-cards { justify-content: safe flex-start; padding: 8px 24px 4px; margin-left: -24px; margin-right: -24px; }
  .sport-card { width: 68vw; max-width: 240px; }
  .sport-card.is-featured { width: 72vw; max-width: 260px; }
  .league-cta { flex-direction: column; }
}
@media (max-width: 480px) {
  /* Not enough room for the logo + theme toggle + home icon + more icon +
     two account buttons side by side — fold Home and Login/Sign up into
     the "more" dropdown instead of letting them overflow (and get clipped
     by the site-wide overflow-x:hidden) off the edge of the header.
     Sign up stays: it's the one action a new visitor came for. */
  .nav-home-btn, .nav-account-btns.btn-login { display: none; }
  .nav-actions { gap: 8px; }
}
@media (max-width: 360px) {
  /* The smallest phones still need logo + menu + Sign up on one row; the
     theme follows the system setting there. */
  .theme-toggle { display: none; }
  .brand .logo-lockup { height: 26px; }
  .nav-dropdown { min-width: 200px; }
}

/* Language switcher (EN / PL) in the header */
.lang-switch { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); padding: 6px 8px; border-radius: 8px; text-decoration: none; }
.lang-switch:hover { color: var(--ink); background: var(--bg-alt); }
.footer-langs { flex-basis: 100%; display: flex; gap: 8px; }
.footer-langs a:hover { color: var(--ink); }
.footer-lang-current { color: var(--ink); font-weight: 600; }
/* Narrow phones: the header has no room for the switcher (it pushed the
   login / sign-up buttons off-screen), so languages live in the footer. */
@media (max-width: 480px) { .nav-actions .lang-switch { display: none; } }

/* Touch screens: header icon buttons at the 44px minimum. */
@media (pointer: coarse) {
  .theme-toggle, .icon-btn { width: 44px; height: 44px; }
}
/* Browser surfaces in the palette. */
::selection { background: var(--btn-primary-bg); color: var(--btn-primary-text); }