/*
  Sporting Blue Valley season pages (sbvfall.com, sbvspring.com, sbvsummer.com)
  Look: Sporting KC's club layout in SBV's own brand (2026 brand guide): navy #061A33, sky #64BCFF, yellow #FFD100.
  White pages, headlines between rules, navy-header tables with light rows, the crest's star as the marker,
  and small staggered checker marks. A few places get a faint checkerboard texture; star fields never share a background with checkers.
  Type: Inter Black headlines and Inter body (brand guide), Barlow Condensed for short labels, Instrument Serif italic for the script line.
*/

/* ---------- Page ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 12px; }
body { margin: 0; background: #fff; }

.sbv {
  --navy: #061A33;
  --navy-2: #0B2A4A;
  --navy-3: #030F1F;
  --sky: #64BCFF;
  --sky-2: #CDE8FF;
  --sky-deep: #2A7FC4;
  --blue: #1B6FB8;
  --ice: #EEF6FD;
  --gray: #F1F4F7;
  --ink: #1D3A5C;
  --muted: #4A6785;
  --label: #41618A;
  --line: #DCE7F1;
  --line-strong: #C3D5E6;
  --link: #0B4C86;
  --green: #0E7A36;
  --red: #C8102E;
  --yellow: #FFD100;
  --pumpkin: #FF6421;
  --cond: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --script: "Instrument Serif", Georgia, "Times New Roman", serif;
  --star-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.1 6.5 7.1.9-5.2 4.9 1.3 7.1L12 17.6l-6.3 3.4 1.3-7.1L1.8 9l7.1-.9z'/%3E%3C/svg%3E");
  /* Checker mark (three on top, three on the bottom, staggered) and faint checkerboard textures */
  --checker-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 2' shape-rendering='crispEdges'%3E%3Cpath fill='%23061A33' d='M0 0h1v1H0zM2 0h1v1H2zM4 0h1v1H4zM1 1h1v1H1zM3 1h1v1H3zM5 1h1v1H5z'/%3E%3C/svg%3E");
  --checker-sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 2' shape-rendering='crispEdges'%3E%3Cpath fill='%2364BCFF' d='M0 0h1v1H0zM2 0h1v1H2zM4 0h1v1H4zM1 1h1v1H1zM3 1h1v1H3zM5 1h1v1H5z'/%3E%3C/svg%3E");
  --tex-white: conic-gradient(rgba(255, 255, 255, .16) 25%, transparent 0 50%, rgba(255, 255, 255, .16) 0 75%, transparent 0);
  --tex-sky: conic-gradient(rgba(100, 188, 255, .09) 25%, transparent 0 50%, rgba(100, 188, 255, .09) 0 75%, transparent 0);
  --tex-navy: conic-gradient(rgba(6, 26, 51, .035) 25%, transparent 0 50%, rgba(6, 26, 51, .035) 0 75%, transparent 0);

  background: #fff;
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.sbv *, .sbv *::before, .sbv *::after { box-sizing: border-box; }
.sbv [hidden] { display: none !important; }
/* Resets use :where() so they never outweigh the component styles below. */
.sbv :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
.sbv :where(ul, ol) { padding: 0; list-style: none; }
.sbv :where(img) { max-width: 100%; height: auto; display: block; }
.sbv button { font: inherit; }
.sbv :where(a) { color: var(--link); }
.sbv :where(a:hover) { color: var(--navy); }
.sbv :where(strong) { color: var(--navy); font-weight: 700; }
.sbv :focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.sbv .on-dark :focus-visible, .sbv .stickybar :focus-visible, .sbv .prog__final :focus-visible, .sbv .footer :focus-visible { outline-color: var(--sky); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.wrap--narrow { max-width: 820px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 12px 16px; background: var(--navy); color: #fff; font-weight: 800;
}
.skip:focus { top: 12px; color: #fff; }

/* ---------- Type ---------- */
.h2 {
  color: var(--navy); font-size: clamp(30px, 5vw, 46px); line-height: 1.08;
  font-weight: 900; letter-spacing: -.02em; text-wrap: balance;
}
/* Centered headline with one staggered checker mark under it (no long divider lines), like the hero */
.h2--rules { text-align: center; }
.h2--rules::after { content: ""; display: block; width: 36px; height: 12px; margin: 14px auto 0; background: var(--checker-sky) center / 36px 12px no-repeat; }
.sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sec-head > p { max-width: 760px; }

.h4 { color: var(--navy); font-size: 23px; line-height: 1.25; font-weight: 800; margin-bottom: 14px; }

/* Highlighter in Sporting sky */
.hl { background: linear-gradient(transparent 52%, rgba(100, 188, 255, .5) 52%); color: inherit; padding: 0 2px; }

/* The checker mark, as an inline SVG (see CHECKER in page.mjs) */
.checker { display: block; flex: none; width: 42px; height: 14px; fill: currentColor; }

/* The crest star as a marker (scarcity lines, bullets) */
.star-mark {
  display: inline-block; flex: none; width: 15px; height: 15px; margin-right: 8px; vertical-align: -1px;
  background: currentColor; -webkit-mask: var(--star-svg) center / contain no-repeat; mask: var(--star-svg) center / contain no-repeat;
}
/* The crest star in a program's color, outlined in navy */
.star { flex: none; width: 20px; height: 20px; overflow: visible; }
.star path { stroke: var(--navy); stroke-width: 1.6; stroke-linejoin: round; }

/* Live dot: a pulsing red dot for "happening now" */
.live-dot { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--red); vertical-align: 1px; animation: sbv-pulse 1.8s infinite; }
@keyframes sbv-pulse {
  0% { box-shadow: 0 0 0 0 rgba(200, 16, 46, .55); }
  70% { box-shadow: 0 0 0 9px rgba(200, 16, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); }
}

/* ---------- Buttons ---------- */
.btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; padding: 12px 18px; border-radius: 4px; text-align: center; text-decoration: none; line-height: 1.15;
  transition: background-color .12s, box-shadow .12s, transform .12s;
}
.btn__main { font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
.btn__sub { font-size: 14px; font-weight: 600; line-height: 1.3; }

/* SBV yellow: the brightest thing on the page, so the register button never blends into the navy text */
.btn--primary { background: var(--yellow); color: var(--navy); box-shadow: inset 0 -5px 0 #C7A300; padding-bottom: 16px; }
.btn--primary .btn__sub { color: #4A3800; }
.btn--primary:hover { background: #FFDC3D; color: var(--navy); }
.btn--primary:active { transform: translateY(1px); }
.sbv .btn--primary:focus-visible { outline-color: var(--navy); }

.btn--pumpkin { /* event programs use the same navy button */ }
.btn--secondary { background: #fff; border: 2px solid var(--navy); color: var(--navy); }
.btn--secondary:hover { background: var(--ice); color: var(--navy); }
.btn--pending { background: #fff; border: 2px dashed var(--sky-deep); color: var(--navy); }
.btn--pending .btn__sub { color: var(--muted); }
.btn--pending:hover { background: var(--ice); color: var(--navy); }
.btn--dark { background: var(--navy); color: #fff; box-shadow: inset 0 -5px 0 var(--navy-2); padding-bottom: 16px; }
.btn--dark .btn__sub { color: var(--sky); }
.btn--dark:hover { background: var(--navy-2); color: #fff; }

.btn--sm { width: auto; min-height: 44px; padding: 8px 16px 11px; }
.btn--sm .btn__main { font-size: 15px; }
.btn--md { min-height: 64px; }
.btn--md .btn__main { font-size: 17px; }
.btn--lg { min-height: 74px; }
.btn--lg .btn__main { font-size: 19px; }
.btn--xl { min-height: 80px; padding: 14px 22px 18px; }
.btn--xl .btn__main { font-size: clamp(18px, 2.4vw, 22px); }
.btn--xl .btn__sub { font-size: 15px; }

.linkbtn {
  min-height: 44px; margin-top: 10px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  color: var(--link); font-size: 17px; font-weight: 700; text-decoration: underline;
}
.linkbtn:hover { color: var(--navy); }

/* Status pills */
.pill {
  display: inline-flex; align-items: center; padding: 5px 11px 4px; border-radius: 3px;
  font-family: var(--cond); font-weight: 800; font-size: 17px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase;
}
.pill--soon { background: var(--navy); color: #fff; }
.pill--week { background: var(--sky); color: var(--navy); }
.pill--neutral { background: var(--ice); color: var(--navy); box-shadow: inset 0 0 0 1px var(--sky-2); }
.pill--deadline { background: var(--red); color: #fff; }
.pill--done { background: var(--gray); color: var(--muted); }

/* ---------- Urgency bar ---------- */
.topbar { background: var(--navy-3); color: #fff; font-size: 16px; line-height: 1.45; text-align: center; }
.topbar__inner { padding-top: 10px; padding-bottom: 10px; }
.topbar strong { color: #fff; }
.topbar__timer { display: inline-block; margin: 0 4px; padding: 0 7px; border-radius: 3px; background: var(--red); color: #fff; font-family: var(--cond); font-weight: 800; font-size: 17px; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.topbar a { display: inline-block; padding: 11px 2px; margin: -11px 0; color: var(--sky); font-weight: 800; }
.topbar a:hover { color: #fff; }
.topbar .live-dot { margin-right: 10px; }
@media (max-width: 599px) { .topbar__extra { display: none; } .topbar { font-size: 15px; } }

/* ---------- Header ---------- */
.masthead { background: var(--navy); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.brand { display: flex; align-items: center; min-width: 0; min-height: 44px; color: #fff; text-decoration: none; }
.brand:hover { color: #fff; }
.brand__name { display: flex; flex-direction: column; font-family: var(--cond); font-weight: 800; font-size: 21px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.brand__since { margin-top: 3px; color: var(--sky); font-size: 14px; letter-spacing: .14em; }
.masthead__call { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #fff; font-weight: 800; font-size: 16px; text-decoration: none; white-space: nowrap; }
.masthead__call:hover { color: #fff; text-decoration: underline; }
.masthead__callLabel { color: var(--sky); font-weight: 500; }
@media (max-width: 520px) {
  .masthead__callLabel { display: none; }
  .masthead__inner { min-height: 60px; }
  .brand__name { font-size: 17px; white-space: nowrap; }
  .brand__since { font-size: 12px; }
  .masthead__call { font-size: 15px; }
}

/* The SBV wordmark ("lockup"), the same on every SBV site (Joe, 6 Oct 2026: "needs to be bold all the time"):
   the crest, SPORTING BLUE VALLEY in Barlow Condensed italic 800 with BLUE VALLEY in sky, then the yellow node
   and the season's name in Inter bold. Copied from the SBV Suite's look.css. */
.lockup { --lockup-sky: #64BCFF; --lockup-node: #FFD100; display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: #fff; }
.lockup .crest { flex: none; width: 30px; height: auto; }
.lockup__words { display: grid; gap: 3px; min-width: 0; }
.lockup__club { color: #fff; font: italic 800 23px/.92 "Barlow Condensed", "Arial Narrow", sans-serif; font-synthesis: none; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.lockup__club > span { font: inherit; }
.lockup__sky { color: var(--lockup-sky); }
.lockup__app { display: flex; align-items: center; gap: 6px; color: #fff; font: 700 13px/1.1 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.lockup__product { color: rgb(255 255 255 / 72%); }
.lockup__node { display: block; flex: none; shape-rendering: crispEdges; }
.lockup__node rect { fill: var(--lockup-node); }
@media (max-width: 520px) {
  .lockup { gap: 8px; }
  .lockup .crest { width: 26px; }
  .lockup__club { display: grid; gap: 0; font-size: 18px; line-height: .95; }
  .lockup__app { display: none; }
}

/* ---------- Hero: Step 1, pick an age ---------- */
/* Plain white (Joe: a checkerboard behind the hero looked like a transparent PNG). Words on the left, the team photo
   with the SPORTING BLUE VALLEY banner on the right, age buttons across the bottom. Phones: words, ages, then photo. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: #fff; color: var(--navy); border-bottom: 1px solid var(--line); }
.hero__inner { display: flex; flex-direction: column; padding-top: clamp(26px, 4.4vw, 60px); padding-bottom: clamp(30px, 5vw, 56px); }
.hero__kicker {
  align-self: flex-start; display: inline-flex; align-items: center; padding: 6px 14px 5px; border-radius: 999px; background: var(--navy); color: #fff;
  font-family: var(--cond); font-weight: 800; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
}
.hero__script { margin: 16px 0 0; color: var(--blue); font-family: var(--script); font-style: italic; font-weight: 400; font-size: clamp(32px, 4.2vw, 52px); line-height: 1; letter-spacing: -.01em; }
.hero__title { max-width: 860px; margin: 4px 0 14px; color: var(--navy); font-size: clamp(36px, 5.6vw, 62px); line-height: 1.02; font-weight: 900; letter-spacing: -.03em; text-wrap: balance; }
.hero__check { margin: 0 0 16px; color: var(--sky); }
.hero__sub { max-width: 640px; margin-bottom: 26px; color: var(--ink); font-size: clamp(17px, 1.9vw, 20px); line-height: 1.55; }
.hero__stepline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 18px; }
.hero__step {
  display: inline-block; padding: 5px 12px 4px; border-radius: 3px; background: var(--navy); color: #fff;
  font-family: var(--cond); font-weight: 800; font-size: 19px; letter-spacing: .08em; text-transform: uppercase;
}
.hero__ask { color: var(--navy); font-size: clamp(26px, 3.4vw, 36px); font-weight: 900; line-height: 1.1; letter-spacing: -.015em; }
.hero__tap { flex-basis: 100%; color: var(--blue); font-size: 18px; font-weight: 700; }
.hero__all { align-self: flex-start; display: inline-block; margin-top: 18px; padding: 11px 0; color: var(--navy); font-weight: 700; font-size: 17px; }

/* The photo, framed like sbvfall.com's photos, with the navy banner and checker marks across the bottom */
.hero__photo { position: relative; order: 5; margin: 26px 12px 12px 0; overflow: hidden; border-radius: 6px; background: var(--navy); box-shadow: 12px 12px 0 var(--sky); }
.hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 35%; }
.hero__banner { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.6vw, 18px); padding: 11px 14px; background: var(--navy); color: var(--sky); }
.hero__banner img { width: min(64%, 250px); height: auto; aspect-ratio: 551 / 61; }
.hero__bannerCheck { width: 30px; height: 10px; }

@media (min-width: 900px) {
  .hero__inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "text photo" "step step" "ages ages" "all all"; column-gap: 56px; align-items: center; }
  .hero__text { grid-area: text; }
  .hero__photo { grid-area: photo; margin: 0 12px 12px 0; }
  .hero__stepline { grid-area: step; margin-top: 30px; }
  .ages { grid-area: ages; }
  .hero__all { grid-area: all; }
}

@media (max-width: 599px) {
  .hero__kicker { font-size: 15px; padding: 5px 12px 4px; }
  .hero__script { margin-top: 12px; font-size: 32px; }
  .hero__title { margin: 2px 0 12px; font-size: 36px; }
  .hero__check { width: 36px; height: 12px; margin-bottom: 14px; }
  .hero__sub { margin-bottom: 20px !important; font-size: 17px; }
  .hero__stepline { gap: 6px 10px !important; margin-bottom: 14px !important; }
  .hero__step { font-size: 16px; padding: 4px 9px 3px; }
  .hero__ask { font-size: 25px; }
  .hero__tap { font-size: 16px; }
  .hero__banner { padding: 9px 10px; }
  .hero__banner img { width: min(62%, 200px); }
  .hero__bannerCheck { width: 21px; height: 7px; }
}

/* Age buttons */
.ages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 1080px; text-align: left; }
@media (min-width: 900px) { .ages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.age {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 132px; padding: 16px;
  text-align: left; cursor: pointer; background: #fff; color: var(--navy);
  border: 2px solid var(--line-strong); border-bottom: 0; border-radius: 5px; box-shadow: inset 0 -5px 0 var(--navy);
  transition: transform .12s, background-color .12s;
}
.age:hover { transform: translateY(-2px); }
.age__star { width: 28px; height: 28px; margin-bottom: 6px; }
.age__label { font-size: clamp(19px, 2.3vw, 23px); line-height: 1.12; font-weight: 900; }
.age__sub { color: var(--muted); font-size: 15px; line-height: 1.3; }
.age__count { margin-top: auto; padding-top: 6px; color: var(--link); font-family: var(--cond); font-weight: 800; font-size: 18px; letter-spacing: .05em; text-transform: uppercase; }
.age[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: inset 0 -5px 0 var(--sky); }
.age[aria-pressed="true"] .age__sub, .age[aria-pressed="true"] .age__count { color: var(--sky); }
.age[aria-pressed="true"] .star path { stroke: #fff; }

/* Proof tiles */
.proof { position: relative; background: var(--navy); }
/* Every tile in view, never a strip that scrolls sideways (Joe, 5 Oct 2026: "This cannot happen on ANY page that is
   front facing"): two to a row on a phone, four on a tablet, eight on a computer. */
.proof__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; padding-top: 12px; padding-bottom: 12px; }
@media (min-width: 700px) { .proof__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 8px; } }
@media (min-width: 1100px) { .proof__tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.proof__tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px 14px; border-left: 1px solid rgba(100, 188, 255, .35); }
.proof__tile:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 699px) { .proof__tile:nth-child(2n + 1) { border-left: 0; padding-left: 0; } }
@media (min-width: 700px) { .proof__tile:nth-child(4n + 1) { border-left: 0; padding-left: 0; } }
@media (min-width: 1100px) { .proof__tile:nth-child(4n + 1) { border-left: 1px solid rgba(100, 188, 255, .35); padding-left: 14px; } .proof__tile:first-child { border-left: 0; padding-left: 0; } }
.proof__big { color: var(--sky); font-family: var(--cond); font-weight: 800; font-size: 22px; line-height: 1.05; text-transform: uppercase; }
.proof__small { color: #E6EEF8; font-size: 12px; line-height: 1.3; }

/* ---------- Step 2 ---------- */
.step { background: #fff; padding: clamp(40px, 6vw, 72px) 0; }
.step__badge {
  display: inline-block; margin-bottom: 14px; padding: 5px 12px 4px; border-radius: 3px; background: var(--navy); color: #fff;
  font-family: var(--cond); font-weight: 800; font-size: 18px; letter-spacing: .08em; text-transform: uppercase;
}
.step .h2 { width: 100%; }
.step__lede { margin: 14px 0 26px; color: var(--label); font-size: 18px; }
.step .linkbtn { margin: -16px 0 18px; }

/* Program cards (Sporting KC promo cards) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; }
.card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 2px solid var(--line-strong); border-radius: 5px; box-shadow: 0 2px 10px rgba(6, 26, 51, .06); }
.card__bar { display: block; height: 10px; background: var(--sky); box-shadow: inset 0 -4px 0 var(--navy); }
.card__img { display: block; border-bottom: 5px solid var(--navy); background: var(--navy); }
.card__img img { width: 100%; aspect-ratio: 1100 / 809; object-fit: cover; }
.card__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 22px; }
.card__kicker { display: flex; align-items: center; gap: 8px; color: var(--label); font-family: var(--cond); font-weight: 800; font-size: 17px; letter-spacing: .05em; text-transform: uppercase; }
.card__name { margin-top: -4px; font-size: clamp(29px, 3vw, 34px); line-height: 1.08; font-weight: 900; letter-spacing: -.02em; }
.card__name a { display: inline-block; padding: 10px 0; margin: -10px 0; color: var(--navy); text-decoration: none; }
.card__name a:hover { text-decoration: underline; }
.card__line { color: var(--ink); font-size: 16px; line-height: 1.5; }
.card__price { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.card__amount { color: var(--navy); font-family: var(--cond); font-weight: 800; font-size: 50px; line-height: .95; }
.card__note { display: flex; flex-direction: column; color: var(--muted); font-size: 15px; line-height: 1.35; }
.card__note b { align-self: flex-start; margin-top: 3px; padding: 2px 10px 3px; border-radius: 999px; background: #E3F4E9; color: var(--green); font-weight: 800; }
.card__cta { margin-top: auto; padding-top: 4px; }
.card__scarcity { display: flex; align-items: flex-start; color: var(--red); font-size: 15px; font-weight: 800; line-height: 1.35; }
.card__scarcity .star-mark { margin-top: 1px; }
/* A nudge at the very first register button */
.card__cue { display: flex; align-items: flex-start; gap: 8px; margin-top: -2px; color: var(--link); font-size: 15px; font-weight: 700; line-height: 1.35; }
.card__cue svg { flex: none; width: 26px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1); }
.card__more { align-self: flex-start; display: inline-block; padding: 11px 0; margin: -11px 0; font-size: 16px; font-weight: 700; }
.was { color: var(--muted); font-family: var(--cond); font-weight: 700; font-size: 26px; text-decoration-thickness: 2px; }

.facts-mini { display: flex; flex-direction: column; gap: 8px; color: var(--ink); font-size: 15px; line-height: 1.4; }
.facts-mini li { display: flex; gap: 10px; }
.facts-mini svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--link); stroke-width: 1.7; }

/* Leagues and teams, under the program cards */
.leagues { margin-top: clamp(48px, 7vw, 76px); }
.leagues__title { width: 100%; color: var(--navy); font-size: clamp(26px, 3.6vw, 38px); line-height: 1.1; font-weight: 900; letter-spacing: -.02em; }
.leagues__lede { max-width: 760px; margin: 12px 0 24px; color: var(--label); font-size: 18px; }

/* Shown only on previews of a season that isn't live yet */
.preview-note { margin: 0; padding: 10px 16px; background: var(--sky); color: var(--navy); font-size: 16px; text-align: center; }

/* Countdown timers */
.timer { padding: 12px 10px 12px; border-radius: 5px; background: var(--ice); box-shadow: inset 0 0 0 1px var(--sky-2); text-align: center; }
.timer__label { display: block; margin-bottom: 8px; color: var(--navy); font-family: var(--cond); font-weight: 800; font-size: 18px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; text-wrap: balance; }
.timer__label::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--red); vertical-align: 2px; animation: sbv-pulse 1.8s infinite; }
.timer__boxes { display: flex; justify-content: center; gap: 6px; }
.timer__box { display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 7px 4px 5px; border-radius: 4px; background: var(--navy); }
.timer__box b { color: #fff; font-family: var(--cond); font-weight: 800; font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.timer__box small { margin-top: 3px; color: var(--sky); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.timer--lg .timer__box { min-width: 66px; }
.timer--lg .timer__box b { font-size: 40px; }
.timer.is-done .timer__boxes { display: none; }
.timer.is-done .timer__label { margin: 0; }
.timer.is-done .timer__label::before { display: none; }

/* ---------- What happens next ---------- */
.next { padding: clamp(52px, 7vw, 92px) 0; background: var(--ice); }
.next__inner { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .next__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 60px; } }
.next__steps { display: flex; flex-direction: column; gap: 18px; margin: 26px 0; }
.next__steps li { display: flex; gap: 16px; align-items: flex-start; }
.next__num {
  flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: var(--navy); color: var(--sky); font-family: var(--cond); font-size: 30px; font-weight: 800; line-height: 1;
}
.next__steps p { font-size: 18px; }
.next__close { margin-bottom: 24px; font-size: 19px; }
.next__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 5px; box-shadow: -12px 12px 0 var(--sky); }
@media (max-width: 899px) { .next__photo { margin-left: 12px; } }

/* ---------- Photo gallery ---------- */
.gallery { padding: clamp(52px, 7vw, 88px) 0; background: #fff; }
.gallery .h2 { width: 100%; }
.gallery__lede { margin: 14px 0 28px; color: var(--label); font-size: 19px; }
/* Every photo in view, never a strip that scrolls sideways (Joe, 5 Oct 2026): two to a row on a phone, four on a
   tablet, seven on a computer, a short last row centred. */
.gallery__strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gallery__strip li { flex: 0 0 calc((100% - 8px) / 2); min-width: 0; }
@media (min-width: 700px) { .gallery__strip { gap: 12px; } .gallery__strip li { flex-basis: calc((100% - 3 * 12px) / 4); } }
@media (min-width: 1000px) { .gallery__strip li { flex-basis: calc((100% - 6 * 12px) / 7); } }
.gallery__strip img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; border-radius: 5px; }

/* ---------- Coaches ---------- */
.coaches { padding: clamp(52px, 7vw, 92px) 0; background: var(--gray); }
.coaches .h2 { width: 100%; }
.coaches__lede { max-width: 760px; margin: 14px 0 32px; color: var(--label); font-size: 19px; }
.coaches__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.coach-card { display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--line-strong); border-radius: 5px; background: #fff; font-size: 16px; line-height: 1.55; }
.coach-card__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 18%; background: #E9EEF3; border-bottom: 5px solid var(--navy); }
/* Headshots start at the top of the hat/hair, so pin them to the top edge */
.coach-card__photo:not(.coach-card__photo--wide) { object-position: center top; }
.coach-card__body { padding: 18px 20px 22px; }
.coach-card__name { color: var(--navy); font-size: 22px; font-weight: 900; line-height: 1.2; }
.coach-card__role { margin: 4px 0 10px; color: var(--link); font-family: var(--cond); font-weight: 800; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25; }

/* ---------- Where ---------- */
.where { padding: clamp(52px, 7vw, 88px) 0; background: #fff; }
.where__inner { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .where__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; } }
.where__logos { width: 100%; max-width: 440px; margin: 0 auto; }
.where__copy > p { margin: 16px 0; font-size: 19px; }
.where__list { margin: 16px 0 26px; }
.where__btn { max-width: 420px; }

/* ---------- Program sections ---------- */
.full-intro { padding: clamp(52px, 7vw, 92px) 0 clamp(30px, 4vw, 48px); background: #fff; }
.full-intro .h2 { width: 100%; }
.full-intro p { margin-top: 16px; font-size: 19px; }
.full-intro--leagues { padding-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }
.filter-note { padding: 12px 16px; border-radius: 5px; background: var(--ice); box-shadow: inset 0 0 0 1px var(--sky); font-size: 17px; }
.filter-note .linkbtn { margin: 0; min-height: 44px; font-size: 17px; }

.prog { padding: 0 0 clamp(52px, 7vw, 88px); background: #fff; }
.prog__band { position: relative; isolation: isolate; overflow: hidden; margin-bottom: clamp(26px, 4vw, 44px); background: var(--sky); }
.prog__band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--tex-white); background-size: 36px 36px;
  -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000); mask-image: linear-gradient(90deg, transparent 45%, #000);
}
.prog__bandInner { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); min-height: clamp(96px, 12vw, 160px); padding-top: 18px; padding-bottom: 18px; }
.prog__star { width: clamp(44px, 6vw, 84px); height: auto; }
.prog__star path { stroke-width: 1.1; }
.prog__name { color: var(--navy); font-size: clamp(30px, 5.4vw, 62px); line-height: 1.02; font-weight: 900; letter-spacing: -.03em; text-wrap: balance; }

.prog__title { max-width: 960px; margin: 0 0 16px; color: var(--navy); font-size: clamp(27px, 4.2vw, 44px); line-height: 1.1; font-weight: 900; letter-spacing: -.02em; text-wrap: balance; }
.prog__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.prog__for { color: var(--label); font-size: 16px; font-weight: 600; }

/* One column as wide as the screen: an unset column took its widest piece's width and ran 10px off a 360px phone. */
.prog__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "buy" "body"; gap: 28px; margin-top: 26px; }
.prog__lead { grid-area: lead; }
.prog__buy { grid-area: buy; }
.prog__body { grid-area: body; display: flex; flex-direction: column; gap: 40px; min-width: 0; }
@media (min-width: 900px) {
  .prog__grid { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "lead buy" "body buy"; column-gap: 52px; row-gap: 34px; }
  .prog__buy { align-self: start; position: sticky; top: 20px; }
}

.lead { max-width: 760px; color: var(--ink); font-size: clamp(19px, 2vw, 21px); line-height: 1.6; }
.lead + .lead { margin-top: 16px; }

.buy {
  display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 22px; border: 2px solid var(--line-strong); border-top: 7px solid var(--navy);
  border-radius: 5px; background: #fff; box-shadow: 0 12px 32px rgba(6, 26, 51, .12);
}
.buy__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.buy__amount { color: var(--navy); font-family: var(--cond); font-weight: 800; font-size: 62px; line-height: .92; }
.buy__note { color: var(--ink); font-size: 18px; font-weight: 600; }
.buy__math { align-self: flex-start; margin-top: -2px; padding: 3px 12px 4px; border-radius: 999px; background: #E3F4E9; color: var(--green); font-size: 18px; font-weight: 800; }
.buy__table li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; font-size: 17px; }
.buy__table li:nth-child(odd) { background: var(--ice); }
.buy__scarcity { display: flex; align-items: flex-start; color: var(--red); font-size: 16px; font-weight: 800; line-height: 1.35; }
.buy__scarcity .star-mark { margin-top: 1px; }
.buy__risk { position: relative; padding-left: 28px; color: var(--ink); font-size: 16px; line-height: 1.45; }
.buy__risk::before { content: "✔"; position: absolute; left: 0; top: -1px; color: var(--green); font-weight: 900; font-size: 18px; }
.buy__over { color: var(--navy); font-size: 19px; font-weight: 700; }
.is-over .buy { background: var(--gray); border-top-color: #6B7F95; box-shadow: none; }

/* Banners, photos, and extra info inside a program */
.prog__banner { margin-bottom: 26px; }
.prog__banner img { width: 100%; border-radius: 5px; box-shadow: 10px 10px 0 var(--sky); }
@media (max-width: 899px) { .prog__banner { margin-right: 10px; } }

.photos { display: grid; gap: 14px; align-items: start; }
.photos figure { display: flex; flex-direction: column; min-width: 0; }
.photos--2, .photos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photos--3 figure:first-child { grid-column: 1 / -1; }
.photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; border-radius: 5px; }
.photos--1 img, .photos--3 figure:first-child img { aspect-ratio: 16 / 9; }
.photos figcaption { margin-top: 7px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.photos figcaption strong { color: var(--navy); }

.extra p { font-size: 18px; }
.extra > :not(h4) + p, .who > :not(h4) + p { margin-top: 12px; }
.extra .dots, .extra .numbered, .extra .mini-table { margin-top: 12px; }

.numbered { counter-reset: step; }
.numbered li { counter-increment: step; position: relative; min-height: 34px; margin-bottom: 12px; padding-left: 48px; font-size: 17px; line-height: 1.5; }
.numbered li::before {
  content: counter(step); position: absolute; left: 0; top: -3px; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--sky); font-family: var(--cond); font-size: 21px; font-weight: 800;
}

/* Sporting KC tables: light rows, navy words */
.mini-table { overflow: hidden; border: 2px solid var(--line-strong); border-radius: 5px; background: #fff; }
.mini-table > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 14px; padding: 11px 16px; }
.mini-table > div:nth-child(even) { background: var(--ice); }
.mini-table dt { padding-top: 1px; color: var(--navy); font-family: var(--cond); font-weight: 800; font-size: 17px; letter-spacing: .05em; text-transform: uppercase; }
.mini-table dd { color: var(--ink); font-size: 16px; line-height: 1.45; }
@media (max-width: 479px) { .mini-table > div { grid-template-columns: 1fr; } }

.checks li { position: relative; margin-bottom: 12px; padding-left: 38px; font-size: 18px; line-height: 1.55; }
.checks li::before {
  content: "✔"; position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 14px; font-weight: 900; line-height: 1;
}

/* Before and after */
.ba__cols { display: grid; gap: 12px; }
@media (min-width: 640px) { .ba__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ba__col { padding: 18px 20px 8px; border-radius: 5px; }
.ba__col--before { background: var(--gray); }
.ba__col--after { background: var(--sky-2); box-shadow: inset 0 5px 0 var(--navy); }
.ba__head { margin-bottom: 12px; color: var(--navy); font-family: var(--cond); font-weight: 800; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; }
.ba__col li { position: relative; margin-bottom: 12px; padding-left: 28px; font-size: 17px; line-height: 1.5; }
.ba__col--before li { color: var(--muted); }
.ba__col--before li::before { content: "✕"; position: absolute; left: 2px; top: 0; color: #6B7F95; font-weight: 900; }
.ba__col--after li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; background: var(--navy);
  -webkit-mask: var(--star-svg) center / contain no-repeat; mask: var(--star-svg) center / contain no-repeat;
}

.coach--photo { display: grid; gap: 18px; }
@media (min-width: 560px) { .coach--photo { grid-template-columns: auto minmax(0, 1fr); align-items: start; } }
.coach__photos { display: flex; gap: 10px; }
.coach__photos img { width: 118px; height: 150px; object-fit: cover; object-position: center top; border-radius: 5px; border-bottom: 5px solid var(--navy); background: #E9EEF3; }

.who p { font-size: 18px; }
.who .dots { margin-top: 12px; }
.who--warning { padding: 20px 22px; border-left: 6px solid var(--red); border-radius: 5px; background: var(--ice); }
.dots li { position: relative; margin-bottom: 9px; padding-left: 28px; font-size: 17px; line-height: 1.5; }
.dots li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; background: var(--navy);
  -webkit-mask: var(--star-svg) center / contain no-repeat; mask: var(--star-svg) center / contain no-repeat;
}

.details dl { display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--line-strong); border-top: 0; border-radius: 0 0 5px 5px; }
.details dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 16px; padding: 12px 16px; }
.details dl > div:nth-child(even) { background: var(--ice); }
.details dt { padding-top: 2px; color: var(--navy); font-family: var(--cond); font-weight: 800; font-size: 17px; letter-spacing: .05em; text-transform: uppercase; }
.details dd { color: var(--navy); font-size: 17px; font-weight: 600; line-height: 1.45; }
.details__sub { display: block; color: var(--muted); font-size: 15px; font-weight: 400; }
@media (max-width: 479px) { .details dl > div { grid-template-columns: 1fr; } }
/* Table headers: navy bar, white condensed caps */
.details > .h4, .schedule > .h4 {
  margin: 0; padding: 11px 16px 9px; border-radius: 5px 5px 0 0; background: var(--navy); color: #fff;
  font-family: var(--cond); font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase;
}
.note { margin-top: 14px; padding: 10px 14px; border-radius: 5px; background: var(--sky-2); color: var(--navy); font-size: 16px; line-height: 1.45; }

.schedule ul { overflow: hidden; border: 2px solid var(--line-strong); border-top: 0; border-radius: 0 0 5px 5px; }
.schedule li { display: flex; align-items: baseline; gap: 16px; padding: 12px 16px; }
.schedule li:nth-child(even) { background: var(--ice); }
.schedule__when { flex: none; width: 70px; display: flex; flex-direction: column; }
.schedule__dow { color: var(--label); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.schedule__date { color: var(--navy); font-family: var(--cond); font-weight: 800; font-size: 26px; line-height: 1; }
.schedule__what { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.schedule__title { color: var(--navy); font-size: 17px; font-weight: 700; line-height: 1.4; }
.schedule__sub { color: var(--muted); font-size: 15px; line-height: 1.45; }
/* A full date (the SBV Suite): red for a real spot limit, and its waitlist. */
.schedule__full { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; color: var(--red); font-weight: 800; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.schedule__none { padding: 14px 16px; border: 1px solid var(--line); border-top: 0; color: var(--muted); }

.coach { padding: 22px; border-left: 6px solid var(--navy); border-radius: 5px; background: var(--ice); color: var(--ink); }
.coach__label { color: var(--link); font-family: var(--cond); font-weight: 800; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; }
.coach__name { margin-top: 2px; color: var(--navy); font-size: 24px; font-weight: 900; line-height: 1.2; }
.coach__role { margin: 4px 0 10px; color: var(--label); font-size: 15px; font-weight: 700; }
.coach__bio { font-size: 17px; line-height: 1.6; }

/* Questions: open one at a time */
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 0;
  cursor: pointer; list-style: none; color: var(--navy); font-size: 18px; font-weight: 800; line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--link); }
.faq__sign { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); }
.faq__sign::before, .faq__sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; background: #fff; transform: translate(-50%, -50%); }
.faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .15s; }
.faq__item[open] .faq__sign { background: var(--sky); }
.faq__item[open] .faq__sign::before, .faq__item[open] .faq__sign::after { background: var(--navy); }
.faq__item[open] .faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__item p { padding: 0 48px 18px 0; color: var(--ink); font-size: 17px; line-height: 1.6; }

/* The last push at the end of each program */
.prog__final {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 3.4vw, 34px); border-radius: 5px;
  background: var(--navy); color: #E6EEF8; text-align: center;
}
/* Sky star field behind the box (a star background, so no checkers here) */
.prog__final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("brand/stars-sky.png") center 30% / 1000px auto no-repeat; opacity: .09; pointer-events: none; }
.prog__ready { color: #fff; font-size: clamp(26px, 3.6vw, 36px); line-height: 1.1; font-weight: 900; letter-spacing: -.02em; text-wrap: balance; }
.prog__final .timer { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(100, 188, 255, .35); }
.prog__final .timer__label { color: #fff; }
.prog__final .timer__box { background: rgba(255, 255, 255, .1); }
.prog__scarcity { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 800; }
.prog__scarcity .star-mark { color: var(--red); width: 17px; height: 17px; }
.prog__back { color: var(--muted); font-size: 16px; }
.prog__back a { display: inline-block; padding: 11px 0; margin: -11px 0; font-weight: 700; }
.prog__final .prog__back { color: #CFDDEE; }
.prog__final .prog__back a { color: #fff; }

/* ---------- Visual calendar ---------- */
.calv { padding: clamp(44px, 6vw, 80px) 0; background: #fff; }
.calv .h2 { width: 100%; }
.calv__lede { margin: 14px 0 22px; color: var(--label); font-size: 18px; }
.calv__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 20px; margin-bottom: 20px; }
@media (max-width: 699px) { .calv__legend { flex-direction: column; align-items: flex-start; } }
.calv__ringkey .calv__swatch--ring { --ring: var(--navy); }
.calv__legend a, .calv__ringkey { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--navy); font-size: 16px; font-weight: 700; text-decoration: none; }
.calv__legend a:hover { text-decoration: underline; }
.calv__ringkey { font-weight: 600; color: var(--muted); }
.calv__star { width: 22px; height: 22px; }
.calv__swatch { flex: none; width: 20px; height: 20px; border-radius: 3px; }
.calv__swatch--ring { background: #fff; box-shadow: inset 0 0 0 3px var(--ring, var(--navy)); }

.calv__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.calv__navlabel { color: var(--navy); font-weight: 800; font-size: 17px; text-align: center; }
.calv__arrow {
  width: 48px; height: 48px; border: 2px solid var(--navy); border-radius: 50%; background: #fff; color: var(--navy);
  font-size: 28px; line-height: 1; font-weight: 700; cursor: pointer;
}
.calv__arrow:hover:not(:disabled) { background: var(--navy); color: #fff; }
.calv__arrow:disabled { border-color: #C6D3E2; color: #9DADC0; cursor: default; }

.calv__months { display: grid; gap: 18px; }
@media (max-width: 699px) { .calv__month:not(.is-active) { display: none; } }
@media (min-width: 700px) {
  .calv__nav { display: none; }
  .calv__months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .calv__months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.calv__month { overflow: hidden; border: 2px solid var(--line-strong); border-radius: 5px; background: #fff; box-shadow: 0 2px 10px rgba(6, 26, 51, .06); }
.calv__mname { padding: 9px 10px 7px; background: var(--navy); color: #fff; font-family: var(--cond); font-weight: 800; font-size: 26px; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.calv__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calv__table th { padding: 5px 0 4px; background: var(--sky); color: var(--navy); font-family: var(--cond); font-weight: 800; font-size: 16px; }
.calv__table abbr { text-decoration: none; }
.calv__table td { padding: 2px; text-align: center; border-top: 1px solid var(--line); }
.calv__day {
  position: relative; display: grid; place-items: center; width: 100%; max-width: 48px; height: 44px; margin: 0 auto;
  overflow: hidden; border-radius: 3px; color: var(--navy); font-family: var(--cond); font-weight: 800; font-size: 20px; line-height: 1;
}
button.calv__day { min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--cond); }
.calv__num { position: relative; z-index: 1; }
.calv__day.has-events .calv__num { text-shadow: 0 0 3px #fff, 0 0 3px #fff; }

/* Color blocks: 1 = whole tile, 2 = halves, 3 = top half + two quarters, 4 = quarters */
.calv__fills { position: absolute; inset: 0; display: grid; gap: 2px; }
.calv__fills--1 { grid-template-columns: 1fr; }
.calv__fills--2 { grid-template-columns: 1fr 1fr; }
.calv__fills--3, .calv__fills--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.calv__fills--3 span:first-child { grid-column: 1 / -1; }

button.calv__day:hover { box-shadow: inset 0 0 0 3px var(--navy); }
.calv__day.has-ring { box-shadow: inset 0 0 0 4px var(--ring); }
.calv__day.has-ring:hover { box-shadow: inset 0 0 0 4px var(--ring), 0 0 0 2px var(--navy); }
.calv__day[aria-pressed="true"] { outline: 3px solid var(--navy); outline-offset: 1px; }
.calv__day.is-today { box-shadow: inset 0 0 0 2px var(--navy); }
.calv__day.is-today.has-events { outline: 2px dashed var(--navy); outline-offset: 1px; box-shadow: none; }
.calv__day.is-past { color: #6B7F95; }
.calv__day.is-past .calv__fills { filter: saturate(.35); opacity: .7; }

.calv__detail { margin-top: 18px; padding: 16px 18px; border-radius: 5px; background: var(--ice); box-shadow: inset 0 5px 0 var(--navy); }
.calv__dtitle { margin: 4px 0 8px; color: var(--navy); font-size: 20px; font-weight: 900; }
.calv__dtitle span { color: var(--red); }
.calv__dlist li { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--sky-2); }
.calv__dlist li:first-child { border-top: 0; }
.calv__dlist .calv__star, .calv__dlist .calv__swatch { margin-top: 2px; }
.calv__dlist strong { display: block; font-size: 17px; line-height: 1.35; }
.calv__dsub { display: block; color: var(--muted); font-size: 15px; line-height: 1.4; }
.calv__dlist a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; font-size: 16px; }
.calv .cal__box { margin-top: 22px; }

/* ---------- Calendar list ---------- */
.cal__box { border: 2px solid var(--line-strong); border-radius: 5px; background: #fff; }
.cal__heading { font-size: inherit; }
.cal__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 76px; padding: 16px 20px;
  border: 0; border-radius: 5px; background: none; color: var(--navy); text-align: left; cursor: pointer;
}
.cal__toggle:hover { background: var(--ice); }
.cal__title { display: block; font-size: 21px; font-weight: 900; line-height: 1.25; }
.cal__sub { display: block; color: var(--muted); font-size: 16px; font-weight: 400; }
.cal__sign { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 26px; font-weight: 700; line-height: 1; }
.cal__body { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 24px; padding: 4px 20px 24px; }
.cal__monthTitle { margin-bottom: 8px; padding: 6px 10px 5px; border-radius: 3px; background: var(--navy); color: #fff; font-family: var(--cond); font-weight: 800; font-size: 19px; letter-spacing: .08em; text-transform: uppercase; }
.cal__days li { display: flex; gap: 12px; padding: 6px 10px; font-size: 15px; line-height: 1.4; }
.cal__days li:nth-child(even) { background: var(--ice); }
.cal__date { flex: none; min-width: 58px; color: var(--navy); font-family: var(--cond); font-weight: 800; font-size: 18px; line-height: 1.2; }
.cal__items { display: flex; flex-direction: column; gap: 2px; color: var(--ink); }

/* ---------- Everything open (a Sporting KC price table) ---------- */
.stack { padding: clamp(52px, 7vw, 88px) 0 clamp(28px, 4vw, 44px); background: #fff; }
.stack__box { overflow: hidden; border: 2px solid var(--line-strong); border-radius: 5px; background: #fff; box-shadow: 0 12px 32px rgba(6, 26, 51, .1); }
.stack__title {
  padding: 18px 20px 16px; background: var(--navy);
  color: #fff; text-align: center; text-wrap: balance; font-size: clamp(24px, 3.6vw, 34px); line-height: 1.12; font-weight: 900; letter-spacing: -.02em;
}
.stack__item { display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
.stack__item:nth-child(even) { background: var(--ice); }
.stack__star { width: 24px; height: 24px; }
.stack__text { flex: 1; min-width: 0; }
.stack__text a { display: inline-block; padding: 11px 0; margin: -11px 0; color: var(--navy); font-size: 18px; line-height: 1.3; text-decoration: none; }
.stack__text a:hover { text-decoration: underline; }
.stack__meta { color: var(--muted); font-size: 15px; line-height: 1.4; }
.stack__item .btn { flex: none; min-width: 120px; }
.stack__list > li:only-child:not(.stack__item) { padding: 18px 20px; }
@media (max-width: 479px) {
  .stack__item { flex-wrap: wrap; }
  .stack__item .btn { width: calc(100% - 38px); margin-left: 38px; }
  .stack__star { align-self: flex-start; margin-top: 2px; }
}

/* ---------- Letter ---------- */
.letter { padding: clamp(28px, 4vw, 44px) 0 clamp(56px, 8vw, 96px); background: #fff; }
.letter p { margin-bottom: 18px; font-size: 19px; line-height: 1.7; }
.letter a { font-weight: 700; }
.letter__sign { margin-top: 28px; }
.letter__name { display: inline-block; margin: 4px 0; color: var(--navy); font-family: var(--cond); font-style: italic; font-weight: 800; font-size: 40px; line-height: 1; }
.letter__ps { margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--navy); }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: #D6E2F0; font-size: 16px; line-height: 1.55; }

.sitebar { background: var(--sky); color: var(--navy); }
.sbv .sitebar :focus-visible { outline-color: var(--navy); }
.sitebar__inner { display: grid; gap: 16px; align-items: center; padding-top: 24px; padding-bottom: 26px; }
@media (min-width: 800px) { .sitebar__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; } }
.sitebar__text { font-size: 18px; line-height: 1.45; }
.sitebar__text strong { display: block; margin-bottom: 4px; font-size: 22px; font-weight: 900; line-height: 1.2; }
.sitebar__btn { min-width: 280px; }

.footer__heading { margin-bottom: 14px; color: #fff; font-family: var(--cond); font-weight: 800; font-size: 22px; letter-spacing: .05em; text-transform: uppercase; }
.footer__programs { padding-top: clamp(38px, 6vw, 58px); padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer__plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.footer__plist a {
  display: flex; flex-direction: column; gap: 2px; min-height: 44px; height: 100%; padding: 12px 14px;
  border-radius: 5px; background: var(--navy-2); color: #fff; text-decoration: none; box-shadow: inset 0 -4px 0 rgba(100, 188, 255, .35);
}
.footer__plist a:hover { background: #1E416D; color: #fff; }
.footer__pname { display: flex; align-items: flex-start; gap: 8px; font-weight: 800; font-size: 17px; line-height: 1.3; }
.footer__pname .star { margin-top: 1px; }
.footer__pname .star path { stroke: #fff; }
.footer__pline { color: #D6E2F0; font-size: 14px; }
.footer__pstatus { color: var(--sky); font-size: 14px; font-weight: 700; }

.footer__cols { display: grid; gap: 32px; padding-top: 32px; padding-bottom: 32px; }
@media (min-width: 800px) { .footer__cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.footer__brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; color: #fff; text-decoration: none; }
.footer__brand:hover { color: #fff; }
.footer__brand img { width: 56px; }
.footer__about p { max-width: 460px; }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy-2); color: #fff; }
.social a:hover { background: var(--sky); color: var(--navy); }
.social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social svg .fill { fill: currentColor; stroke: none; }
.footer__links li { font-size: 16px; }
.footer__links a { display: flex; align-items: center; min-height: 44px; color: #fff; text-decoration: none; }
.footer__links a:hover { color: var(--sky); text-decoration: underline; }
.footer__links strong { color: var(--sky); font-family: var(--cond); font-size: 26px; font-weight: 800; }
.footer__addr { padding: 6px 0; color: #D6E2F0; }

.footer__bottom { background: var(--navy-3); padding-bottom: 76px; }
@media (min-width: 900px) { .footer__bottom { padding-bottom: 0; } }
.footer__bottomInner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 20px; padding-top: 10px; padding-bottom: 10px; color: #A9BCD3; font-size: 14px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0 18px; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; color: #D6E2F0; }
.footer__legal a:hover { color: #fff; }
.footer__text { flex-wrap: wrap; gap: 0 8px; }
.footer__text > span { color: #D6E2F0; font-weight: 700; }

/* The SBV Support text line: the last line of every page (Joe, 6 Oct 2026; build/page.mjs's supportLine) */
.sbv-support { margin: 0; padding: 4px 16px 14px; color: #A9BCD3; font-size: 14px; line-height: 1.5; text-align: center; }
.sbv-support svg { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sbv-support a { display: inline-block; padding: 12px 0; margin: -12px 0; color: #fff; font-weight: 700; white-space: nowrap; }
.sbv-support a:hover { color: var(--sky); }
@media print { .sbv-support { display: none; } }

/* ---------- Sticky register bar (phones) ---------- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--navy); border-top: 4px solid var(--sky); box-shadow: 0 -6px 20px rgba(6, 26, 51, .25);
}
.stickybar__inner { display: flex; align-items: center; gap: 12px; max-width: 700px; margin: 0 auto; }
.stickybar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; color: #D6E2F0; font-size: 14px; line-height: 1.3; }
.stickybar__text strong { color: #fff; font-size: 17px; }
.stickybar .btn { flex: none; }
@media (min-width: 900px) { .stickybar { display: none !important; } }

/* ---------- Reading room: more space between lines, lists, and blocks (phones and tablets) ---------- */
@media (max-width: 899px) {
  .sbv { line-height: 1.7; }
  .hero__sub { line-height: 1.6; margin-bottom: 30px; }
  .hero__stepline { gap: 10px 12px; margin-bottom: 20px; }
  .step__lede, .calv__lede, .gallery__lede, .coaches__lede, .leagues__lede { margin-top: 14px; margin-bottom: 28px; line-height: 1.65; }

  .cards { gap: 28px; }
  .card__body { gap: 16px; padding: 22px 20px 24px; }
  .card__line { font-size: 17px; line-height: 1.65; }
  .facts-mini { gap: 12px; font-size: 16px; line-height: 1.5; }
  .card__cta { padding-top: 8px; }

  .next__steps { gap: 26px; margin: 28px 0 30px; }
  .next__steps p { line-height: 1.65; }
  .next__close { margin-bottom: 30px; line-height: 1.65; }

  .coaches__list { gap: 22px; }
  .coach-card__body { padding: 22px 22px 26px; }
  .coach-card p { line-height: 1.65; }

  .where__copy > p { line-height: 1.65; margin: 18px 0; }
  .where__list li { margin-bottom: 14px; }

  .full-intro p { line-height: 1.65; }

  .prog__title { margin: 0 0 20px; line-height: 1.14; }
  .prog__status { gap: 12px 14px; }
  .prog__grid { gap: 36px; margin-top: 30px; }
  .prog__banner { margin-bottom: 30px; }
  .lead { line-height: 1.75; }
  .prog__body { gap: 52px; }

  .h4 { font-size: 23px; margin-bottom: 18px; }
  .checks li { margin-bottom: 20px; line-height: 1.65; }
  .dots li { margin-bottom: 14px; line-height: 1.65; }
  .who p, .extra p { line-height: 1.7; }
  .who .dots, .extra .dots, .extra .numbered, .extra .mini-table { margin-top: 18px; }
  .extra > :not(h4) + p, .who > :not(h4) + p { margin-top: 18px; }
  .who--warning { padding: 26px 22px; }
  .numbered li { margin-bottom: 20px; line-height: 1.65; }
  .mini-table > div { padding: 14px 16px; }
  .mini-table dd { line-height: 1.55; }
  .ba__col li { margin-bottom: 16px; line-height: 1.6; }

  .buy { gap: 16px; padding: 24px 22px; }
  .buy__risk { line-height: 1.6; }

  .details dl > div { padding: 14px 16px; }
  .details dd { line-height: 1.55; }
  .details__sub { margin-top: 4px; line-height: 1.55; }

  .schedule li { padding: 16px; }
  .schedule__sub { margin-top: 2px; line-height: 1.55; }

  .coach { padding: 26px 22px; }
  .coach__role { margin: 6px 0 14px; }
  .coach__bio { line-height: 1.75; }

  .faq__item summary { padding: 18px 0; }
  .faq__item p { padding-right: 0; line-height: 1.75; }

  .prog__final { gap: 18px; }

  .calv__detail { padding: 20px; }
  .calv__dlist li { padding: 12px 0; }

  .stack__item { padding: 18px 20px; }
  .stack__meta { margin-top: 4px; line-height: 1.55; }

  .letter p { margin-bottom: 24px; line-height: 1.8; }

  .footer__plist { gap: 14px; }
  .footer__plist a { padding: 16px 16px; gap: 4px; }
  .footer__cols { gap: 40px; }
  .footer__about p { line-height: 1.7; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sbv *, .sbv *::before, .sbv *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}