/* =================================================================
   ChiCity Tennis — styles
   Palette and voice taken from the logo: deep navy, lime green,
   white, with the Chicago skyline as a motif. Athletic, not clubby.

   Tokens live in :root. Change those first — everything follows.
   ================================================================= */

:root {
  /* brand, sampled from the logo */
  --navy-900:  #101B36;   /* deepest — footer, hero panels */
  --navy-800:  #16233F;   /* the logo's own background */
  --navy-700:  #1E3059;
  --blue-500:  #2E5088;   /* the skyline silhouette */
  --lime:      #B7E83B;   /* racket + "TENNIS" */
  --lime-lift: #C8F455;   /* hover */

  /* paper — white pages, a very light grey for alternating bands */
  --paper:     #FFFFFF;
  --paper-2:   #F1F4F9;
  --ink:       #101B36;
  --ink-soft:  #56617C;

  --rule:       rgba(16, 27, 54, .14);
  --rule-light: rgba(245, 247, 250, .18);

  --display: "Montserrat", "Noto Sans SC", "PingFang SC",
             -apple-system, BlinkMacSystemFont, sans-serif;
  --sans:    "Inter", "Noto Sans SC", "PingFang SC", -apple-system,
             BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius:    5px;
  --radius-lg: 10px;

  --pad:  22px;
  --maxw: 1180px;
}

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

/* Full-bleed colour bands. The page alternates navy / light grey / white
   so it never reads as one long white scroll. */
.band--dark { background: var(--navy-900); color: #fff; }
.band--tint { background: var(--paper-2); }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* Room for the sticky mobile CTA, plus the home-indicator area on
     notched iPhones (the page uses viewport-fit=cover). */
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.05;
  /* h1 gets looser leading below, so stacked .mark blocks keep a clean gap */
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0 0 .45em;
}
h1 { font-size: clamp(2.4rem, 8vw, 4.2rem); line-height: 1.22; }
h2 { font-size: clamp(1.85rem, 5vw, 2.9rem); }
h3 { font-size: 1.3rem; font-weight: 700; }
p  { margin: 0 0 1em; }
a  { color: inherit; }

/* uppercase italic label — echoes "TENNIS" in the logo */
.label {
  font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-500);
  margin: 0 0 14px;
}
.label--light { color: var(--lime); }

/* ------------------------------ draft bar ---------------------- */
.draft-bar {
  display: flex; align-items: center; gap: 12px;
  background: var(--blue-500); color: #fff;
  font-size: .78rem; line-height: 1.45;
  padding: 9px 18px;
}
.draft-bar__x {
  margin-left: auto; flex: none; background: none; border: 0;
  color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 2px 6px;
}

/* ------------------------------ header ------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 11px calc(var(--pad) + env(safe-area-inset-right, 0px))
           11px calc(var(--pad) + env(safe-area-inset-left, 0px));
  background: rgba(16, 27, 54, .92);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: #fff;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-height: 44px; }
/* The real logo already contains the wordmark, so it stands alone in the
   header — no text lockup beside it to duplicate and compete with it. */
.brand__mark {
  width: 56px; height: 56px; flex: none;
  border-radius: 10px; display: block; object-fit: contain;
}
/* Both fallbacks only appear if images/logo.png fails to load, in which case
   onerror removes the <img> and these selectors stop matching. */
img.brand__mark + .brand__mark--fallback { display: none; }
img.brand__mark ~ .brand__name { display: none; }
.brand__name {
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: 1.06rem; line-height: 1; letter-spacing: -0.01em;
  display: flex; flex-direction: column; gap: 4px;
  text-transform: uppercase;
}
.brand__name em {
  font-style: italic; font-size: .6rem; font-weight: 700;
  letter-spacing: .22em; color: var(--lime);
}

.site-nav { display: none; }
.site-nav a {
  text-decoration: none; color: rgba(255,255,255,.72);
  font-size: .89rem; font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: #fff; border-bottom-color: var(--lime); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.header-actions .btn {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.32);
}
.header-actions .btn:hover { background: var(--lime); color: var(--navy-900); border-color: var(--lime); }

.lang-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; padding: 5px 13px;
  min-height: 44px;                     /* was 32px — too small to tap */
  font: inherit; font-size: .76rem; font-weight: 500;
  cursor: pointer; color: rgba(255,255,255,.65);
}
.lang-toggle:hover { border-color: rgba(255,255,255,.55); }
.lang-toggle__opt.is-on { color: #fff; font-weight: 700; }
.lang-toggle__sep { width: 1px; height: 11px; background: rgba(255,255,255,.28); }

/* ------------------------------ buttons ------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; text-decoration: none; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: .93rem;
  padding: 13px 22px; border-radius: var(--radius);
  min-height: 44px;                     /* thumb-sized on phones */
  background: var(--navy-900); color: #fff;
  border: 1px solid var(--navy-900);
  transition: background .16s ease, color .16s ease,
              border-color .16s ease, transform .1s ease;
}
.btn:hover { background: var(--navy-700); border-color: var(--navy-700); }
.btn:active { transform: translateY(1px); }
.btn--sm   { padding: 9px 16px; font-size: .84rem; }
.btn--lg   { padding: 16px 28px; font-size: 1rem; }
.btn--full { width: 100%; }

.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--quiet:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
/* on a dark band the quiet button needs light strokes */
.band--dark .btn--quiet, .section--dark .btn--quiet {
  color: #fff; border-color: rgba(255,255,255,.34);
}
.band--dark .btn--quiet:hover, .section--dark .btn--quiet:hover {
  color: var(--navy-900); background: #fff; border-color: #fff;
}

.btn--ball { background: var(--lime); color: var(--navy-900); border-color: var(--lime); }
.btn--ball:hover { background: var(--lime-lift); border-color: var(--lime-lift); color: var(--navy-900); }

/* ------------------------------ hero --------------------------- */
.hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: 40px var(--pad) 46px;
}

.eyebrow {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: .76rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--lime); margin: 0 0 20px;
}
.eyebrow__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lime); flex: none;
}

.hero h1 span { display: inline; }
.mark {
  background-image: linear-gradient(transparent 58%, var(--lime) 58%,
                                    var(--lime) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* On navy the half-height highlight would leave white text on lime.
   Use a solid lime block with navy text instead.

   All four sides are PADDING, never box-shadow: a shadow is a copy of the whole
   padding box, so it ignored the gradient below and left a solid lime ear
   sticking up above the block at both ends of every line.

   Vertical padding on an inline box paints without changing the line box, so
   it buys clearance under the y-tails for free. The top is still cut by the
   gradient: an inline background fills the font's whole content area, which is
   taller than the line box, and all of that slack sits above the capitals. 18%
   of the padded box leaves ~.09em of lime over the caps and ~.10em under the
   descenders — an even band, instead of the old one that hugged the y-tails. */
.band--dark .mark, .section--dark .mark {
  background: linear-gradient(to bottom,
              transparent 0, transparent 18%,
              var(--lime) 18%, var(--lime) 100%);
  color: var(--navy-900);
  padding: .06em .2em;
}
/* Chinese. CJK glyphs fill almost the whole em box, so the Latin top inset was
   slicing their tops clean off. They also have no descenders to clear, so the
   band can close in from BOTH ends and sit evenly around the characters. */
:root[lang="zh-Hans"] .band--dark .mark,
:root[lang="zh-Hans"] .section--dark .mark {
  background: linear-gradient(to bottom,
              transparent 0, transparent 7%,
              var(--lime) 7%, var(--lime) 90%,
              transparent 90%);
}

.hero__sub {
  font-size: 1.08rem; color: rgba(255,255,255,.76);
  max-width: 44ch; margin-top: 22px;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 24px; }

.trust {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 0; margin: 0; font-size: .85rem; color: rgba(255,255,255,.68);
}
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--lime); flex: none;
}

.hero__frame { position: relative; margin: 36px 0 0; }
.hero__frame .court,
.hero__frame img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px rgba(16,27,54,.12), 0 26px 60px rgba(16,27,54,.24);
}
.hero__frame img { aspect-ratio: 4 / 5; object-fit: cover; }
/* When the real photo loads, hide the illustrated court that follows it.
   If the photo is missing, onerror removes the <img> and this never matches. */
.hero__frame img + .court { display: none; }

/* floating "call or text" card over the hero image */
.next-up {
  position: absolute; left: 14px; bottom: -22px;
  background: #fff; border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 13px 17px;
  box-shadow: 0 14px 34px rgba(16,27,54,.20);
  display: grid; gap: 2px;
  border-left: 4px solid var(--lime);
}
.next-up__label {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.next-up__when {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--display); font-size: 1.3rem; font-weight: 800;
  line-height: 1.2; color: var(--ink); text-decoration: none;
  letter-spacing: -0.02em;
}
.next-up__when:hover { color: var(--blue-500); }
.next-up__spots { font-size: .78rem; font-weight: 500; color: var(--ink-soft); }

/* ------------------------------ stats -------------------------- */
.stats {
  max-width: var(--maxw); margin: 0 auto;
  padding: 8px var(--pad);
  display: grid; grid-template-columns: repeat(2, 1fr);
}
/* Three cells: two side by side, the third spanning the full row below. */
.stats > div { padding: 26px 4px; border-bottom: 1px solid var(--rule); }
.stats > div:nth-child(odd):not(:last-child) {
  border-right: 1px solid var(--rule); padding-right: 18px;
}
.stats > div:nth-child(even) { padding-left: 18px; }
.stats > div:last-child { grid-column: 1 / -1; padding-left: 4px; border-right: 0; border-bottom: 0; }
.stats strong {
  display: block; font-family: var(--display);
  font-size: clamp(1.5rem, 4.6vw, 2.05rem); font-weight: 800;
  font-style: italic; line-height: 1.05;
  letter-spacing: -0.025em; margin-bottom: 8px;
}
.stats span { font-size: .82rem; color: var(--ink-soft); line-height: 1.4; display: block; }

/* ------------------------------ sections ----------------------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: 64px var(--pad); }
/* Cap the CONTENT, not the header box: in full-bleed sections `.section--dark
   > *` overrides the header's own max-width (and its auto margins are what line
   it up with the content column), so the intro text was running to ~95
   characters a line — roughly a third too wide to read comfortably. */
.section__head { margin-bottom: 34px; max-width: 56ch; }
.section__head > * { max-width: 56ch; }
.section__head h2 { margin-bottom: .3em; }
.section__lede { color: var(--ink-soft); font-size: 1.02rem; margin: 0; }

.section--tint {
  max-width: none; background: var(--paper-2);
  border-block: 1px solid var(--rule);
}
.section--dark { max-width: none; background: var(--navy-900); color: #fff; }
/* Full-bleed sections have no max-width of their own, so their children carry
   it. Subtract the section padding so their content lines up with the content
   inside plain .section blocks, which are capped at --maxw *including* padding. */
.section--tint > *, .section--dark > * {
  max-width: calc(var(--maxw) - var(--pad) * 2);
  margin-inline: auto;
}
.section--dark .section__lede { color: rgba(255,255,255,.66); }

/* ---------------------------- flagship lesson ------------------ */
.flagship {
  background: var(--navy-800); color: #fff;
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  box-shadow: 0 2px 6px rgba(16,27,54,.12), 0 24px 56px rgba(16,27,54,.20);
  position: relative; overflow: hidden;
}
/* faint racket-string grid, top-right */
.flagship::after {
  content: ""; position: absolute; top: -30px; right: -50px;
  width: 210px; height: 210px; border-radius: 50%;
  border: 1px solid rgba(183,232,59,.18);
}
.flagship h3 {
  font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 800; margin-bottom: .35em;
}
.flagship__desc { color: rgba(255,255,255,.74); max-width: 48ch; }

.tag {
  display: inline-block; background: var(--lime); color: var(--navy-900);
  font-family: var(--display); font-style: italic; font-weight: 800;
  font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
  margin: 0 0 16px;
}

/* flagship call-to-action row */
.flagship__cta {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.flagship__link {
  font-size: .88rem; font-weight: 600; color: var(--lime);
  text-decoration: none; border-bottom: 1px solid rgba(183,232,59,.4);
  display: inline-flex; align-items: center; min-height: 44px;
}
.flagship__link:hover { border-bottom-color: var(--lime); }

/* --------------------------- price tiers ----------------------- */
.tiers { display: grid; gap: 0; margin-top: 28px; }
.tier { padding: 20px 0; border-top: 1px solid var(--rule-light); }
.tier__who {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.58);
  margin: 0 0 6px;
}
.tier__save {
  font-size: .72rem; letter-spacing: .1em;
  color: var(--navy-900); background: var(--lime);
  padding: 3px 8px; border-radius: 999px;
}
.tier__price {
  font-family: var(--display); font-size: 2.7rem; font-weight: 800;
  font-style: italic; line-height: 1; letter-spacing: -0.035em; margin: 0;
}
.tier__price em {
  font-family: var(--sans); font-style: normal;
  font-size: .78rem; font-weight: 500; letter-spacing: .02em;
  color: rgba(255,255,255,.6); margin-left: 10px;
}
.tier--deal .tier__price { color: var(--lime); }
.tier__note {
  margin: 8px 0 0; font-size: .84rem; line-height: 1.45;
  color: rgba(255,255,255,.72); max-width: 30ch;
}

/* the standalone Pricing section: three columns, not a side panel */
.tiers--wide { margin-top: 0; }
.tiers--wide .tier { padding: 26px 0; }
/* In the three-column layout the column is already narrow; the 30ch cap from
   the side-panel version squeezed these to ~27 characters a line. */
.tiers--wide .tier__note { max-width: none; }
/* A block wrapper, because .btn is inline-flex and inline-level boxes ignore
   the `margin-inline: auto` that lines section children up with the content
   column — the button would otherwise sit at the section's padding edge. */
.pricing__cta { margin-top: 34px; }

/* ------------------------- what we work on --------------------- */
.focus { margin-top: 54px; }
.focus__title {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: .74rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--blue-500); margin: 0 0 6px;
}
.focus ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; border-top: 1px solid var(--rule);
}
.focus li { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.focus h4 {
  font-family: var(--display); font-size: 1.2rem; font-weight: 800;
  letter-spacing: -0.02em; margin: 0 0 .35em;
}
.focus p { margin: 0; color: var(--ink-soft); font-size: .96rem; max-width: 46ch; }

/* ------------------------------ coaches ------------------------ */
/* Two coaches only, so cap the COLUMN width rather than the grid width.
   Capping the grid would fight .section--dark > *, which centres children
   inside the page container, and knock this out of line with the heading. */
.coaches { display: grid; gap: 34px; }
.coach h3 { margin-bottom: .1em; font-size: 1.5rem; }
.coach__photo {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg); margin-bottom: 18px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, var(--navy-700), var(--navy-900));
  border: 1px solid var(--rule-light);
  display: grid; place-items: center;
  color: rgba(255,255,255,.28); font-size: .95rem; letter-spacing: .2em;
}
.coach__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}
/* `.coach p` below is more specific, so this needs the extra class to win */
.coach .coach__role {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: .74rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--lime); margin: 0 0 .9em;
}
.coach p { color: rgba(255,255,255,.68); font-size: .95rem; margin: 0; }

/* ------------------------------ steps -------------------------- */
/* margin-inline stays auto: a plain `margin: 0` here would override the
   centring that .section--tint > * applies, and shunt the grid left. */
.steps { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 30px; }
.steps li { position: relative; padding-left: 60px; }
.steps__n {
  position: absolute; left: 0; top: -8px;
  font-family: var(--display); font-size: 2.5rem; font-weight: 800;
  font-style: italic; line-height: 1; color: var(--blue-500);
  letter-spacing: -0.04em;
}
.steps__n::after {
  content: ""; display: block; width: 28px; height: 5px;
  background: var(--lime); margin-top: 6px;
}
.steps h3 { margin-bottom: .3em; }
.steps p { color: var(--ink-soft); margin: 0; }

/* ------------------------------- faq --------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 1.06rem; font-weight: 700;
  letter-spacing: -0.015em;
  padding: 20px 34px 20px 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans); font-size: 1.4rem; font-weight: 300;
  color: var(--blue-500); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
/* 48ch, not 62: the ch unit is the width of "0", which is wider than the
   average letter, so a 62ch box was actually fitting 92 characters a line. */
.faq p { margin: -4px 0 22px; color: var(--ink-soft); font-size: .98rem; max-width: 48ch; }

/* ------------------------------ booking ------------------------ */
.book { display: grid; gap: 26px; }

.book__intro {
  background: var(--navy-900); color: #fff;
  border-radius: var(--radius-lg); padding: 30px 24px;
}
.book__intro h2 { margin-bottom: .35em; }
.book__intro > p { color: rgba(255,255,255,.72); max-width: 42ch; }

.book__direct { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule-light); }
.book__direct-title { font-weight: 600; margin-bottom: 14px; }
.book__direct ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.book__direct li { display: flex; gap: 14px; align-items: baseline; font-size: 1.02rem; }
.book__direct li > span {
  width: 62px; flex: none; color: rgba(255,255,255,.52);
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
}
.book__direct a {
  color: var(--lime); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid rgba(183,232,59,.35);
  display: inline-flex; align-items: center; min-height: 44px;  /* tap size */
}
.book__direct a:hover { border-bottom-color: var(--lime); }

.book__form {
  background: #fff; border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 26px 22px;
}
.field { margin-bottom: 18px; }
.field-pair { display: grid; gap: 0; }
.field label {
  display: block; font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 8px; color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 16px;  /* 16px stops iOS zoom */
  padding: 12px 0; border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0; background: transparent; color: var(--ink);
}
.field select {
  padding-right: 22px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2356617C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
  background-size: 11px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-bottom-color: var(--blue-500); border-bottom-width: 2px;
  padding-bottom: 11px;
}
.field textarea { resize: vertical; }
.field.is-invalid input { border-bottom-color: #C0442E; }
.field__err { color: #C0442E; font-size: .8rem; margin: 7px 0 0; }

.book__note { font-size: .82rem; color: var(--ink-soft); margin: 14px 0 0; text-align: center; }

/* --------------------- sent / failed panels --------------------- */
/* Honeypot: off-screen for people, still fillable by bots. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sent {
  margin-top: 28px; text-align: center;
  background: #fff; border: 1px solid var(--lime);
  border-left: 5px solid var(--lime);
  border-radius: var(--radius-lg); padding: 32px 24px;
}
.sent__tick {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--lime); color: var(--navy-900);
  font-size: 1.3rem; font-weight: 800;
}
.sent h3 { margin-bottom: .35em; font-size: 1.45rem; font-weight: 800; }
.sent p { margin: 0; color: var(--ink-soft); font-size: .96rem; }
.sent strong { color: var(--ink); }

.sent--err { border-color: #C0563A; border-left-color: #C0563A; }
.sent--err .btn { margin-top: 14px; }

/* Button while the message is in flight */
.book__form button[type=submit][disabled] { opacity: .6; cursor: progress; }

/* ---------------------------- handoff -------------------------- */
.handoff {
  margin-top: 28px; background: #fff;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 26px 22px;
}
.handoff h3 { margin-bottom: .6em; }
.handoff__text {
  white-space: pre-wrap; word-break: break-word;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 18px;
  font-family: var(--sans); font-size: .93rem;
  color: var(--ink); margin: 0 0 20px;
}
.handoff__actions { display: grid; gap: 10px; }
.handoff__back {
  display: block; margin: 18px auto 0; background: none; border: 0;
  font: inherit; font-size: .86rem; color: var(--ink-soft);
  text-decoration: underline; cursor: pointer;
}

/* ------------------------- skyline divider --------------------- */
.skyline {
  display: block; width: 100%; height: auto;
  margin-bottom: -1px; color: var(--navy-900);
}

/* ------------------------------ footer ------------------------- */
.site-footer { background: var(--navy-900); color: #fff; padding: 46px var(--pad) 40px; }
.site-footer__top, .site-footer__bottom { max-width: var(--maxw); margin-inline: auto; }
.site-footer__top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-footer__logo { width: 66px; height: 66px; border-radius: 10px; flex: none; }
.site-footer__brand {
  font-family: var(--display); font-size: clamp(1.7rem, 6vw, 2.4rem);
  font-weight: 800; font-style: italic; line-height: 1; letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 6px; display: flex; flex-direction: column; gap: 7px;
}
.site-footer__brand em {
  font-style: italic; font-size: .68rem; font-weight: 700;
  letter-spacing: .26em; color: var(--lime);
}
.site-footer__where { color: rgba(255,255,255,.62); margin: 0; }
.site-footer__bottom {
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--rule-light);
  display: flex; flex-direction: column; gap: 14px; font-size: .88rem;
}
.site-footer__bottom nav { display: flex; gap: 20px; }
.site-footer__bottom a {
  color: rgba(255,255,255,.78); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.site-footer__bottom a:hover { color: var(--lime); }
.site-footer__bottom p { margin: 0; color: rgba(255,255,255,.42); }

/* --------------------------- sticky CTA ------------------------ */
.sticky-cta {
  position: fixed; z-index: 50;
  /* Sit clear of the home indicator and of landscape notches. */
  left:   calc(14px + env(safe-area-inset-left, 0px));
  right:  calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-height: 56px; justify-content: center;   /* comfortable thumb target */
  padding: 12px 13px; border-radius: var(--radius);
  background: var(--navy-900); color: #fff; text-decoration: none;
  box-shadow: 0 12px 30px rgba(16,27,54,.34);
  border-bottom: 3px solid var(--lime);
}
.sticky-cta span { font-weight: 600; font-size: .97rem; }
.sticky-cta em {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lime);
}

/* ============================ tablet+ =========================== */
@media (min-width: 720px) {
  :root { --pad: 38px; }

  .site-nav { display: flex; gap: 26px; margin-left: 16px; }
  .brand__mark { width: 64px; height: 64px; }

  .hero { padding-top: 58px; }
  .hero__sub { font-size: 1.18rem; }

  /* Three across: dividers between columns only. The row rule from the
     mobile layout has to be cleared or it runs under the first two cells
     and stops dead before the third. */
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats > div,
  .stats > div:nth-child(odd):not(:last-child) {
    padding: 26px 22px;
    border-right: 1px solid var(--rule);
    border-bottom: 0;
  }
  .stats > div:first-child { padding-left: 0; }
  .stats > div:last-child { grid-column: auto; border-right: 0; border-bottom: 0; }

  .flagship { padding: 40px 36px; }
  .tiers { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .tiers--wide { grid-template-columns: repeat(3, 1fr); column-gap: 46px; }
  .tiers--wide .tier:first-child { border-top: 1px solid var(--rule-light); }

  .focus ul { grid-template-columns: 1fr 1fr; column-gap: 48px; }

  .coaches { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 36px; }

  .field-pair { grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .handoff__actions { grid-auto-flow: column; justify-content: start; }

  .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ============================ desktop =========================== */
@media (min-width: 1000px) {
  body { padding-bottom: 0; }
  .sticky-cta { display: none; }

  .hero {
    display: grid; grid-template-columns: 1.08fr .92fr;
    gap: 64px; align-items: center;
    padding-top: 72px; padding-bottom: 60px;
  }
  .hero__frame { margin-top: 0; }
  .next-up { left: -30px; bottom: 34px; padding: 15px 20px; }

  .section { padding-block: 92px; }
  .section__head { margin-bottom: 46px; }

  .flagship { display: grid; grid-template-columns: 1.12fr .88fr; gap: 56px; padding: 48px 44px; }
  .flagship__main { align-self: center; }
  .tiers { grid-template-columns: 1fr; margin-top: 0; align-self: center; }
  .tier:first-child { border-top: 0; padding-top: 0; }
  .tiers--wide { grid-template-columns: repeat(3, 1fr); column-gap: 52px; }
  .tiers--wide .tier, .tiers--wide .tier:first-child {
    border-top: 1px solid var(--rule-light); padding-top: 26px;
  }

  .focus ul { grid-template-columns: repeat(4, 1fr); column-gap: 34px; }
  .focus li { border-bottom: 0; padding-bottom: 0; }

  /* Two coaches across the full column would make a portrait photo ~660px
     tall, so the card turns horizontal: photo beside the text instead of
     above it. Fills the column without a dead strip on the right. */
  .coach {
    display: grid; grid-template-columns: 230px 1fr;
    column-gap: 26px; align-items: start;
  }
  /* The card has three text children after the photo; without an explicit
     span they alternate between the two columns instead of stacking beside
     the photo. */
  .coach__photo { grid-row: 1 / span 3; margin-bottom: 0; }

  /* align-items:start keeps the navy panel its natural height. Stretching it
     to match the taller form, with the contact block pinned to the bottom,
     opened a ~380px void in the middle of it. */
  .book { grid-template-columns: .95fr 1.05fr; gap: 34px; align-items: start; }
  .book__intro { padding: 44px 38px; }
  .book__form { padding: 44px 38px; }
}

/* --------------------------- preferences ----------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}