/* ============================================================
   Go Badminton — site.css
   Hand-written, no framework, no build step, no external fonts.
   Mobile-first. Everything below 720px is the default; wider
   screens are progressive enhancement.
   ============================================================ */

:root {
  /* ---------- Brand ----------
     Sampled directly from the master logo artwork:
     Owner's Section/Marketing/FINALS - GO BADMINTON LOGO/Blue Text.png
     The six values below are the literal pixel colours of the wordmark and
     the five shuttle strokes. They are pastel by design, so each one has a
     darkened "-ink" partner for anything that carries white text or needs to
     be readable as text — the raw logo colours are for fills and decoration
     only. Every -ink value is annotated with its contrast ratio on white and
     clears WCAG AA (4.5:1). Don't use a raw brand colour for small text. */

  --blue:         #3082F3;   /* wordmark blue — THE brand colour */
  --blue-strong:  #296FCF;   /* 4.92:1 — buttons, fills carrying white text */
  --blue-ink:     #1F559E;   /* 7.36:1 — links and emphasis text */
  --blue-deep:    #163A6D;   /* 11.29:1 — dark CTA bands */
  --blue-tint:    #eaf3fe;   /* pale wash — hover states, soft panels */

  --teal:         #79CFD4;   /* shuttle head */
  --teal-ink:     #437275;   /* 5.38:1 */
  --lime:         #AFD48B;   /* shuttle stroke */
  --lime-ink:     #60754C;   /* 5.06:1 */
  --orange:       #F9A64B;   /* shuttle stroke */
  --orange-ink:   #895B29;   /* 5.85:1 */
  --coral:        #F47C72;   /* shuttle stroke */
  --coral-ink:    #9F514A;   /* 5.60:1 */
  --purple:       #AF68B6;   /* shuttle stroke */
  --purple-ink:   #834E89;   /* 6.15:1 */

  /* Text + surfaces — cool grey, tinted toward the wordmark blue */
  --ink:          #16202E;
  --body:         #37424F;
  --muted:        #5A6675;
  --line:         #DCE3EC;
  --bg:           #ffffff;
  --bg-alt:       #F4F7FB;

  --radius:       12px;
  --radius-lg:    18px;
  --shadow:       0 1px 2px rgba(20, 32, 26, .06), 0 6px 20px rgba(20, 32, 26, .06);
  --wrap:         1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.01em;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; margin-top: 0; }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1.1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--blue-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-strong); }

/* The raw logo teal is only 1.8:1 on white — far too pale to be a visible
   focus indicator. The wordmark blue is 3.74:1, which clears the 3:1 that
   WCAG 2.2 requires of a non-text focus indicator, and is more on-brand. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* ---------- Layout helpers ---------- */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 760px; }

.section { padding: 44px 0; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section--tight { padding: 30px 0; }

/* Keep long-form text at a readable measure even inside a full-width .wrap */
.lede { font-size: 1.12rem; color: var(--body); max-width: 46em; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--blue-strong); color: #fff; padding: 10px 16px; z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-block: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand img { width: 42px; height: 42px; }
.brand span {
  font-weight: 800; font-size: 1.05rem; color: var(--ink);
  letter-spacing: -.02em; white-space: nowrap;
}

.site-nav { order: 3; width: 100%; }
.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 18px;
}
.site-nav a {
  display: inline-block; padding: 4px 0;
  color: var(--body); text-decoration: none; font-size: .96rem; font-weight: 600;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--blue-strong); border-bottom-color: var(--blue-strong); }
.site-nav a[aria-current="page"] { color: var(--blue-ink); border-bottom-color: var(--blue-strong); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  background: var(--blue-strong);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  padding: 13px 22px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 2px solid var(--blue-strong);
  text-align: center;
}
.btn:hover { background: var(--blue-ink); border-color: var(--blue-ink); color: #fff; }
.btn--lg { font-size: 1.08rem; padding: 16px 28px; }
.btn--ghost { background: transparent; color: var(--blue-ink); }
.btn--ghost:hover { background: var(--blue-tint); color: var(--blue-ink); border-color: var(--blue-ink); }
.btn--on-dark { background: #fff; color: var(--blue-deep); border-color: #fff; }
.btn--on-dark:hover { background: var(--blue-tint); color: var(--blue-deep); border-color: var(--blue-tint); }
.btn--small { font-size: .95rem; padding: 9px 16px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }
.btn-note { font-size: .93rem; color: var(--muted); margin-top: .8em; }

/* ---------- Hero ---------- */

.hero { padding: 36px 0 40px; }
.hero h1 { font-size: 2.05rem; margin-bottom: .45em; }
.hero .lede { font-size: 1.14rem; max-width: 34em; }

.hero-media {
  position: relative;               /* anchors the .hero-logo badge */
  margin-top: 28px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--blue-tint);
}
.hero-media img { width: 100%; }
.hero-media .hero-photo { width: 100%; display: block; }

/* The logo badge, top-left of the hero media.
   The master logo artwork has a WHITE background (rgb24, no alpha), so it is
   deliberately set on a white chip rather than floated over the photo — that
   is what the artwork was drawn for, and it keeps the wordmark legible over
   whatever the frame happens to be behind it. Positioned against the figure,
   so it sits identically over the photo now and over the VSL video later.
   The .hero-media img width rule above is more specific than a bare
   .hero-logo, hence the two-class selector. */
.hero-media .hero-logo {
  position: absolute;
  top: 12px; left: 12px;
  width: 104px; height: auto;
  padding: 7px 9px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(22, 32, 46, .10), 0 4px 14px rgba(22, 32, 46, .14);
}

.hero-media figcaption {
  font-size: .9rem; color: var(--muted);
  padding: 10px 14px; background: #fff; border-top: 1px solid var(--line);
}

/* ---------- Cards / grids ---------- */

.grid { display: grid; gap: 18px; }
.grid--3 { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: 1fr; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card--flat { background: var(--bg-alt); border-color: transparent; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  font-weight: 800;
  color: var(--blue-strong);
  margin: 0 0 .5em;
}

/* Numbered steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: step; }
.steps > li {
  position: relative;
  padding-left: 52px;
  counter-increment: step;
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--blue-strong); color: #fff;
  font-weight: 800; font-size: 1rem;
  display: grid; place-items: center;
}
.steps h3 { margin-bottom: .25em; }

/* Session run-sheet */
.runsheet { list-style: none; margin: 0; padding: 0; }
.runsheet li {
  border-left: 3px solid var(--blue-tint);
  padding: 0 0 16px 18px;
  position: relative;
}
.runsheet li::before {
  content: ""; position: absolute; left: -7px; top: 8px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--blue-strong);
}
.runsheet li:last-child { padding-bottom: 0; }
.runsheet strong { color: var(--ink); display: block; }

/* Level ladder cards.
   Note: the parent-facing ladder is the NAMED-SHOT level system (Clearing
   Level 1 → 2, etc). Red/Yellow/Green are coach-internal feeding tiers and
   never appear in parent copy, so there are deliberately no colour
   modifiers here. */
.levels { display: grid; gap: 16px; }
.level {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  border-left: 6px solid var(--blue-strong);
  background: #fff;
}
.level h3 { margin-bottom: .2em; color: var(--blue-ink); }

/* Price block */
.price-box {
  background: var(--blue-tint);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  text-align: center;
}
.price-box .price {
  font-size: 2.6rem; font-weight: 800; color: var(--blue-deep);
  line-height: 1.1; display: block; letter-spacing: -.02em;
}
.price-box .price-sub { font-size: 1.02rem; color: var(--body); margin: .35em 0 0; }

.fact-list { list-style: none; margin: 0; padding: 0; }
.fact-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between;
}
.fact-list li:last-child { border-bottom: 0; }
.fact-list .fact-label { font-weight: 700; color: var(--ink); }

/* Venues */
.venue {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  background: #fff;
}
.venue h3 { margin-bottom: .1em; }
.venue .suburb { color: var(--blue-strong); font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .7em; }
.venue address { font-style: normal; color: var(--muted); margin: 0 0 .9em; }
.sessions { list-style: none; margin: 0 0 1em; padding: 0; }
.sessions li {
  padding: 7px 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 2px 14px;
}
.sessions .day { font-weight: 700; color: var(--ink); min-width: 6.5em; }

/* A tappable session row: the whole row goes to book.html with that class
   preselected. Padded to a comfortable thumb target on a phone. */
.sessions li:has(> .session-link) { padding: 0; }
.session-link {
  display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline;
  padding: 12px 10px 12px 0;
  margin-right: -10px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius);
}
.session-link::after {
  content: "Book →";
  margin-left: auto;
  font-weight: 700;
  font-size: .92rem;
  color: var(--blue-ink);
  text-decoration: underline;
}
.session-link:hover,
.session-link:focus-visible { background: var(--blue-tint); padding-left: 10px; margin-left: -10px; }
.session-link:hover::after,
.session-link:focus-visible::after { text-decoration: none; }
.badge {
  display: inline-block; font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--orange-ink); color: #fff;
  padding: 2px 8px; border-radius: 20px; vertical-align: 2px;
}

/* A "New" badge on a single session row rather than a whole venue.
   Smaller than the standalone .badge so a session row still fits one line on a
   390px phone alongside the day, the time and the "Book →" affordance.

   WHICH SESSIONS CARRY IT IS WILL'S CALL, NOT A DERIVED FACT — there is no
   start-date field anywhere that this could be generated from. As set
   2026-08-06: NP Thursday, Moorabbin Tuesday, Moorabbin Wednesday, Victory
   Monday. Moorabbin Sunday deliberately does NOT carry one. Both index.html and
   venues.html list every session, so a change means editing the row in BOTH. */
.badge--session {
  font-size: .68rem; padding: 1px 7px; vertical-align: 1px;
}

/* Body-copy lists (any list in <main> without its own class) */
main ul:not([class]),
main ol:not([class]) { padding-left: 1.25em; margin: 0 0 1.1em; }
main ul:not([class]) li,
main ol:not([class]) li { margin-bottom: .5em; }
main ul:not([class]) li::marker { color: var(--blue-strong); }

/* Jump menu at the top of the FAQ */
.jump-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.jump-nav li { margin: 0; }
.jump-nav a {
  display: block;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--blue-ink);
  text-decoration: none;
  font-weight: 600;
}
.jump-nav a:hover { background: var(--blue-tint); border-color: var(--blue-strong); }

/* FAQ */
.faq { margin: 0; }
.faq h3 { margin-bottom: .3em; }
.faq > div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.faq > div:first-child { padding-top: 0; }

/* Nothing on this site should ever out-specify the hidden attribute — the
   prefill note on book.html starts hidden and is only revealed by script. */
[hidden] { display: none !important; }

/* Callouts */
.note {
  background: var(--bg-alt);
  max-width: 46em;
  border-left: 4px solid var(--blue-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px;
  margin: 1.5em 0;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--ink); }

/* CTA band */
.cta-band {
  background: var(--blue-deep);
  color: #E7EEF9;
  padding: 40px 0;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #C6D6EE; max-width: 40em; }
.cta-band a:not(.btn) { color: #fff; }

/* Form embed */
.form-embed {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
}
.form-embed iframe {
  display: block;
  width: 100%;
  /* Fixed height by necessity — a cross-origin Google Form can't report its
     own height. Generous enough that the form rarely needs its inner
     scrollbar; if it does, it scrolls rather than clipping, and book.html
     offers a full-screen link above and below the embed. */
  height: 1450px;
  min-height: 90vh;
  border: 0;
}

/* Sticky mobile CTA */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  z-index: 50;
  box-shadow: 0 -2px 12px rgba(22, 32, 46, .08);
}
.sticky-cta .btn { display: block; width: 100%; }
body.has-sticky-cta { padding-bottom: 78px; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding: 36px 0 44px;
  font-size: .95rem;
  color: var(--muted);
}
.site-footer h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); margin-bottom: .8em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 3px 0; }
.site-footer a { color: var(--body); text-decoration: none; }
.site-footer a:hover { color: var(--blue-strong); text-decoration: underline; }
.footer-grid { display: grid; gap: 26px; grid-template-columns: 1fr; }
.footer-bottom {
  margin-top: 28px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: .88rem;
}
.footer-bottom--bare { margin-top: 0; padding-top: 0; border-top: 0; }

/* ============================================================
   Roadmap (roadmap.html)
   ============================================================ */

/* Level accent colours.
   IMPORTANT: these are the four logo shuttle strokes used as level markers,
   ordered teal → lime → orange → purple. That ordering is deliberate. The
   coach-internal FEEDING TIERS are Red → Yellow → Green, and a level scale
   that ran green→yellow→red would read as those tiers to anyone who has seen
   the coaching material. Feeding tiers are never parent-facing. Keep coral
   out of the level scale for the same reason. */
.lvl-1 { --lvl: var(--teal);   --lvl-ink: var(--teal-ink); }
.lvl-2 { --lvl: var(--lime);   --lvl-ink: var(--lime-ink); }
.lvl-3 { --lvl: var(--orange); --lvl-ink: var(--orange-ink); }
.lvl-4 { --lvl: var(--purple); --lvl-ink: var(--purple-ink); }

/* The level key across the top of the roadmap */
.lvl-key { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lvl-key > li {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 5px solid var(--lvl);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0;
}
.lvl-key h3 { margin-bottom: .25em; color: var(--lvl-ink); font-size: 1.05rem; }
.lvl-key p { font-size: .95rem; margin-bottom: 0; }
.lvl-key .lk-num {
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  color: var(--lvl-ink); margin: 0 0 .15em;
}

/* A shot's row on the ladder */
.shot {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.shot > h3 { margin-bottom: .15em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.shot .shot-range {
  font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px;
}
.shot > p { color: var(--body); font-size: .97rem; }

/* The always-checked fundamentals for a shot */
.shot-core {
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 16px;
  font-size: .95rem;
}
.shot-core strong { color: var(--ink); display: block; margin-bottom: .3em; }
.shot-core ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.shot-core li {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 3px 11px; font-size: .88rem; margin: 0;
}

/* THE CONTRAST RULE FOR EVERYTHING BELOW.
   The raw logo colours are pastel. Their darkened ink on their own pale fill
   tops out around 3:1, and purple is only 1.6:1 — unreadable. So anywhere a
   NUMBER or LABEL sits on a level-coloured fill, it goes inside a white chip
   and takes var(--lvl-ink), which clears 5:1 on white. The colour carries the
   level; the white chip carries the text. Don't "simplify" any of these back
   to plain --lvl-ink on a --lvl background. */

/* Proportional bar — how one ladder's drills spread across its levels.
   Decorative: the numbers are also in the element's aria-label. */
.shot-bar {
  display: flex; gap: 3px; margin: 0 0 16px;
  border-radius: 8px; overflow: hidden;
}
.shot-bar .sb-seg {
  background: var(--lvl);
  display: grid; place-items: center;
  min-width: 38px; height: 32px;
}
.shot-bar .sb-seg b {
  background: #fff; color: var(--lvl-ink);
  border-radius: 20px; padding: 1px 8px;
  font-size: .8rem; font-weight: 800; line-height: 1.5;
}
/* Segment width is proportional to that level's drill count. Data-driven
   (build-roadmap.mjs), so it's a flex-grow class rather than inline style —
   the house no-inline-style rule. 12 covers every count the pathway
   currently produces (max 6) with headroom; the generator clamps to it. */
.shot-bar .sb-flex-1  { flex: 1; }
.shot-bar .sb-flex-2  { flex: 2; }
.shot-bar .sb-flex-3  { flex: 3; }
.shot-bar .sb-flex-4  { flex: 4; }
.shot-bar .sb-flex-5  { flex: 5; }
.shot-bar .sb-flex-6  { flex: 6; }
.shot-bar .sb-flex-7  { flex: 7; }
.shot-bar .sb-flex-8  { flex: 8; }
.shot-bar .sb-flex-9  { flex: 9; }
.shot-bar .sb-flex-10 { flex: 10; }
.shot-bar .sb-flex-11 { flex: 11; }
.shot-bar .sb-flex-12 { flex: 12; }

/* The ladder itself: one column per level, left to right = feed gets harder */
.shot-flow { display: grid; gap: 12px; }
.flow-col {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-top: 4px solid var(--lvl);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
}
.flow-head {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px;
}
.flow-head .flow-num {
  flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: var(--lvl-ink);
  display: grid; place-items: center;
  font-weight: 800; font-size: .85rem;
  border: 3px solid var(--lvl);
}
.flow-head .flow-cap {
  font-weight: 800; color: var(--ink); font-size: .95rem; line-height: 1.25;
}
.flow-head .flow-cap small {
  display: block; font-weight: 600; color: var(--muted); font-size: .8rem;
}
.flow-list { margin: 0; padding-left: 1.25em; display: grid; gap: 9px; }
.flow-list li { margin: 0; color: var(--muted); font-size: .85rem; }
.flow-list .fd-name {
  display: block; font-weight: 700; color: var(--ink); font-size: .95rem;
}
.flow-list .fd-note { display: block; font-size: .85rem; color: var(--muted); }

/* THE MATRIX — ladders down, levels across */
.lvl-matrix { display: grid; gap: 8px; min-width: 560px; }
.lm-row {
  display: grid;
  grid-template-columns: minmax(116px, 1.3fr) repeat(4, 1fr);
  gap: 8px; align-items: stretch;
}
.lm-row .lm-name {
  align-self: center;
  font-weight: 700; color: var(--ink); font-size: .95rem;
  text-decoration: none; border-bottom: 1px dotted var(--line);
}
.lm-row .lm-name:hover { color: var(--blue-ink); border-bottom-color: currentColor; }
.lm-head .lm-col {
  text-align: center; align-self: end;
  font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--lvl-ink); padding-bottom: 4px;
  border-bottom: 3px solid var(--lvl);
}
.lm-cell { border-radius: 10px; display: grid; place-items: center; padding: 9px 4px; }
.lm-cell.is-on { background: var(--lvl); }
/* Number AND unit both live in the white chip — the unit was previously set
   straight onto the pastel fill, where "drills" on level 4 purple came out at
   about 1.6:1. See the contrast rule at the top of this block. */
.lm-cell.is-on .lm-chip {
  background: #fff; color: var(--lvl-ink);
  border-radius: 20px; padding: 2px 10px;
  font-size: .78rem; font-weight: 700; line-height: 1.5;
  white-space: nowrap;
}
.lm-cell.is-on .lm-chip b { font-size: 1rem; font-weight: 800; }
/* Where a ladder STARTS — the fact parents ask about most ("when does my
   child start smashing?"), so it gets a ring rather than just a colour. */
.lm-cell.is-start { box-shadow: inset 0 0 0 3px var(--lvl-ink); }
.lm-cell.is-off {
  border: 1px dashed var(--line);
  background: repeating-linear-gradient(
    -45deg, transparent 0 6px, rgba(22, 32, 46, .035) 6px 12px);
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Screen-reader-only text */
.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Quiz (quiz.html)
   ============================================================ */

.quiz { margin: 0; }
.quiz fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0 0 16px;
  background: #fff;
}
.quiz legend {
  font-weight: 700; color: var(--ink); font-size: 1.08rem;
  padding: 0 8px; margin-left: -8px;
}
.quiz .q-help { font-size: .93rem; color: var(--muted); margin: .1em 0 1em; }

.opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.opts li { margin: 0; }
.opts label {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; cursor: pointer; background: #fff;
}
.opts label:hover { background: var(--blue-tint); border-color: var(--blue); }
.opts input { margin: 3px 0 0; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--blue-strong); }
.opts input:checked + span { font-weight: 600; color: var(--ink); }
.opts label:has(input:checked) { border-color: var(--blue-strong); background: var(--blue-tint); box-shadow: inset 0 0 0 1px var(--blue-strong); }

/* Result panel — revealed by quiz.js */
.quiz-result {
  border: 1px solid var(--line);
  border-top: 6px solid var(--lvl, var(--blue));
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  background: #fff;
  box-shadow: var(--shadow);
}
.quiz-result .result-eyebrow {
  text-transform: uppercase; letter-spacing: .08em; font-size: .78rem;
  font-weight: 800; color: var(--muted); margin: 0 0 .4em;
}
.quiz-result .result-level {
  font-size: 2.1rem; font-weight: 800; color: var(--lvl-ink, var(--blue-ink));
  line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .35em;
}
.quiz-result h3 { font-size: 1.02rem; margin: 1.4em 0 .4em; }
.quiz-result .result-shots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.quiz-result .result-shots li {
  display: flex; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding: 9px 0; margin: 0;
}
.quiz-result .result-shots li:last-child { border-bottom: 0; }
.quiz-result .result-shots .rs-shot { font-weight: 700; color: var(--ink); }
.quiz-result .result-shots .rs-at { color: var(--muted); font-size: .95rem; }

.quiz-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5em; }

/* Progress dots */
.quiz-progress { font-size: .9rem; color: var(--muted); margin: 0 0 1.2em; }

/* ---------- Spacing utilities ---------- */

.mt-s { margin-top: 1.4em; }
.mt-m { margin-top: 1.6em; }
.mt-l { margin-top: 2.4em; }

/* ---------- Wider screens ---------- */

/* Two-up media + text rows. Base (mobile) declaration MUST come before the
   media queries below — it used to sit after them and silently overrode the
   desktop 40px gutter. */
.split { display: grid; gap: 24px; }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .levels  { gap: 18px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .lvl-key { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
  body { font-size: 17px; }
  h1 { font-size: 2.6rem; }
  h2 { font-size: 1.85rem; }
  .hero { padding: 60px 0 56px; }
  .hero h1 { font-size: 2.8rem; }
  .hero .lede { font-size: 1.2rem; }
  .section { padding: 64px 0; }
  .section--tight { padding: 40px 0; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 36px; }
  .site-nav { order: 0; width: auto; }
  .site-nav ul { gap: 22px; }
  .sticky-cta { display: none; }
  body.has-sticky-cta { padding-bottom: 0; }

  .split { grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .split--media-right .split-media { order: 2; }

  .lvl-key { grid-template-columns: repeat(4, 1fr); }
  /* The ladder columns sit side by side, so the staircase reads left to right.
     auto-fit, not repeat(4), because a ladder that only runs at two levels
     should fill the row rather than leave two empty tracks. */
  .shot-flow { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
}

@media (min-width: 1024px) {
  /* Scoped to the photo, never the logo badge. object-position holds the crop
     high so the trim comes off the empty court at the bottom of the frame
     rather than off the coach's head or the children's faces. */
  .hero-media .hero-photo {
    max-height: 560px; object-fit: cover; object-position: 50% 28%;
  }
  .hero-media .hero-logo { top: 18px; left: 18px; width: 132px; padding: 9px 11px; }
}

/* ---------- Print / reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================
   THE LEVEL MAP (levels.html)
   A parent-report view of the nine ladders. Tooltips are CSS-only:
   every trigger is a real <button> (so it works on tap, not just
   hover) and the tip text lives in a panel BELOW the grid rather
   than floating next to the trigger. That is deliberate — a
   floating tooltip anchored to a ~55px column overflows the right
   edge of a 390px phone, and this page is tested for zero
   horizontal overflow.
   ============================================================ */

.ladder-map { margin-top: 1.5rem; }

/* The grid can out-width a small phone; let IT scroll, never the page. */
.ladder-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ladder-grid {
  width: 100%; border-collapse: collapse; min-width: 340px;
  font-size: .96rem;
}
.ladder-grid th,
.ladder-grid td { border-bottom: 1px solid var(--line); padding: 0; }
.ladder-grid thead th { border-bottom-width: 2px; vertical-align: bottom; }
.ladder-grid tbody th { text-align: left; font-weight: 700; width: 40%; }
.ladder-grid td { text-align: center; width: 15%; }

/* A tooltip trigger. Dotted underline is the affordance; cursor:help
   says "this explains itself" rather than "this navigates". */
.tip-trigger {
  display: block; width: 100%;
  font: inherit; color: inherit; text-align: inherit;
  background: none; border: 0; border-radius: var(--radius);
  padding: 12px 8px; cursor: help;
  text-decoration: underline dotted var(--muted);
  text-underline-offset: 3px;
}
.tip-trigger:hover,
.tip-trigger:focus-visible { background: var(--blue-tint); color: var(--blue-ink); }

/* Level column headers: big number, small parent-facing name beneath. */
.ladder-grid thead .tip-trigger { text-align: center; font-weight: 800; }
.lvl-name {
  display: block; font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-top: 2px;
}
.tip-trigger:hover .lvl-name,
.tip-trigger:focus-visible .lvl-name { color: var(--blue-ink); }

/* Does this ladder have this level? Filled dot = yes. The empty state
   is an explicit hollow ring, not blank space, so "no level 4 here" reads
   as a deliberate fact rather than missing data. */
.ladder-grid td.on::after,
.ladder-grid td.off::after {
  content: ""; display: inline-block;
  width: 13px; height: 13px; border-radius: 50%;
}
.ladder-grid td.on::after  { background: var(--blue-strong); }
.ladder-grid td.off::after { border: 2px solid var(--line); }

/* The tip panel. min-height reserves room for the longest tip so the
   page does not jump as the parent moves across the grid. */
.ladder-tips {
  position: relative; margin-top: 1rem;
  padding: 14px 16px;
  background: var(--blue-tint); border-radius: var(--radius);
  min-height: 8.5em;
}
.ladder-tip { display: none; margin: 0; }
.ladder-tip--default { display: block; color: var(--body); }

/* Show the tip whose trigger is hovered or focused, and retire the
   default hint while any trigger is active. */
.ladder-map:has(#trig-l1:hover)  #tip-l1,
.ladder-map:has(#trig-l1:focus)  #tip-l1,
.ladder-map:has(#trig-l2:hover)  #tip-l2,
.ladder-map:has(#trig-l2:focus)  #tip-l2,
.ladder-map:has(#trig-l3:hover)  #tip-l3,
.ladder-map:has(#trig-l3:focus)  #tip-l3,
.ladder-map:has(#trig-l4:hover)  #tip-l4,
.ladder-map:has(#trig-l4:focus)  #tip-l4,
.ladder-map:has(#trig-clearing:hover)  #tip-clearing,
.ladder-map:has(#trig-clearing:focus)  #tip-clearing,
.ladder-map:has(#trig-netting:hover)   #tip-netting,
.ladder-map:has(#trig-netting:focus)   #tip-netting,
.ladder-map:has(#trig-smashing:hover)  #tip-smashing,
.ladder-map:has(#trig-smashing:focus)  #tip-smashing,
.ladder-map:has(#trig-dropping:hover)  #tip-dropping,
.ladder-map:has(#trig-dropping:focus)  #tip-dropping,
.ladder-map:has(#trig-lifting:hover)   #tip-lifting,
.ladder-map:has(#trig-lifting:focus)   #tip-lifting,
.ladder-map:has(#trig-driving:hover)   #tip-driving,
.ladder-map:has(#trig-driving:focus)   #tip-driving,
.ladder-map:has(#trig-lunging:hover)   #tip-lunging,
.ladder-map:has(#trig-lunging:focus)   #tip-lunging,
.ladder-map:has(#trig-backcourt:hover) #tip-backcourt,
.ladder-map:has(#trig-backcourt:focus) #tip-backcourt,
.ladder-map:has(#trig-frontmid:hover)  #tip-frontmid,
.ladder-map:has(#trig-frontmid:focus)  #tip-frontmid { display: block; }

.ladder-map:has(.tip-trigger:hover) .ladder-tip--default,
.ladder-map:has(.tip-trigger:focus) .ladder-tip--default { display: none; }

/* No :has() support (older Safari/Firefox): show every tip stacked as a
   plain readable list instead of a panel that never changes. Degrades to
   a glossary, which is still the information the parent came for. */
@supports not selector(:has(*)) {
  .ladder-tips { min-height: 0; }
  .ladder-tip { display: block; margin-bottom: .6em; }
  .ladder-tip--default { font-weight: 700; }
  .tip-trigger { cursor: default; text-decoration: none; }
}

@media (max-width: 460px) {
  .ladder-grid { font-size: .9rem; }
  .ladder-grid tbody th { width: 44%; }
  .tip-trigger { padding: 11px 4px; }
  .ladder-tips { min-height: 11em; }
}