/* ==========================================================================
   Josh's School of Soccer
   Mobile-first. Warm, friendly, parent-safe. No framework, no build step.

   Design intent: a parent in their 40s lands on this from a Facebook ad on
   their phone and thinks "these are good, safe, local guys." That means
   generous whitespace, large legible type, soft corners, and a calm green.
   Deliberately NOT high-pressure: no pulsing badges, no countdowns, no
   all-caps shouting.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* Greens — the brand colour, used for trust and calm rather than energy */
  --green-900: #0f3d23;
  --green-800: #16572f;
  --green-700: #1d7040;
  --green-600: #268a4e;
  --green-100: #dcefe1;
  --green-50:  #f1f8f3;

  /* Warm neutrals — cream instead of white keeps it friendly, not clinical */
  --cream:     #fbf8f2;
  --white:     #ffffff;
  --ink:       #1b2420;
  --ink-700:   #3d4a43;
  --ink-500:   #566459;
  --line:      #e4ded1;

  /* Accent — a soft amber for highlights. Used sparingly, never for alarm. */
  --amber-600: #b7761a;
  --amber-500: #e5a33c;
  --amber-100: #fdf1dc;

  --focus:     #0b5cd5;

  /* Conversion accent. Used ONLY on the "Claim My Free Spot" button on the
     tryout page and nowhere else, so the eye has exactly one thing to land
     on. This specific orange was picked because white 18px bold text on it
     measures 4.9:1, which clears WCAG AA; lighter oranges look punchier but
     fail it. */
  --accent:      #c9430f;
  --accent-dark: #a83609;

  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Type scale. Base is 17px, not 16px — this audience is 35-55 and mostly
     on phones, and the extra point of body size measurably helps. */
  --fs-xs:   0.875rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.625rem;
  --fs-3xl:  2rem;
  --fs-4xl:  2.375rem;

  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 5.5rem;

  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(27, 36, 32, 0.06), 0 2px 8px rgba(27, 36, 32, 0.05);
  --shadow-md: 0 2px 6px rgba(27, 36, 32, 0.07), 0 12px 28px rgba(27, 36, 32, 0.09);
  --shadow-lg: 0 4px 12px rgba(27, 36, 32, 0.08), 0 24px 56px rgba(27, 36, 32, 0.13);

  --wrap:        1120px;
  --wrap-narrow: 680px;
  /* Must match the real rendered header height, or anchor links (#signup)
     scroll their target underneath it. Measured, not guessed. Re-measure
     after changing the nav: it was 127px while the 4-item nav wrapped to two rows; nowrap on the
     nav labels brought it back to 107px. */
  --header-h:    107px;
  /* The call bar above the header. Not sticky, but it still occupies the
     top of the first screen, so the tryout hero has to subtract it. */
  --callbar-h:   36px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor links land below the sticky header instead of underneath it */
  scroll-padding-top: calc(var(--header-h) + var(--sp-2));
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

strong { font-weight: 650; }

/* One consistent, high-visibility focus ring everywhere. Keyboard users and
   anyone tabbing through the form on a phone keyboard depend on this. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -100px;
  z-index: 200;
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: var(--sp-2);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

.wrap--narrow {
  max-width: var(--wrap-narrow);
}

.section {
  padding-block: var(--sp-6);
}

.section--tight { padding-block: var(--sp-5); }

.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--mint  { background: var(--green-50); }

.section--green {
  background: var(--green-800);
  color: var(--white);
}

.section--green h2,
.section--green h3 { color: var(--white); }

.section-head {
  max-width: 44ch;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--sp-4);
}

/* When a section heading is also the page's h1 (About), it should read as a
   section heading, not a hero headline. */
.section-head h1 { font-size: var(--fs-3xl); }

.section-head p {
  margin-top: var(--sp-2);
  color: var(--ink-500);
  font-size: var(--fs-lg);
}

.section--green .section-head p { color: var(--green-100); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-700);
  background: var(--green-100);
  padding: 0.35em 0.9em;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-2);
}

.section--green .eyebrow {
  color: var(--green-900);
  background: var(--amber-500);
}

.lede {
  font-size: var(--fs-lg);
  color: var(--ink-700);
}

.center-cta {
  text-align: center;
  margin-top: var(--sp-4);
}

.figure-wide {
  margin: var(--sp-5) auto 0;
  max-width: 900px;
}

.figure-wide img {
  width: 100%;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

/* A lead image that opens a section rather than closing one. */
.figure-lead {
  margin-top: 0;
  margin-bottom: var(--sp-5);
}

.figure-wide figcaption {
  margin-top: var(--sp-2);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

/* ==========================================================================
   4. Header + navigation
   No hamburger. Every destination is one tap away at every screen size —
   hidden menus cost conversions and this audience shouldn't have to hunt.
   ========================================================================== */

/* ==========================================================================
   3b. Call bar
   Sits above everything, on every page. Scrolls away with the page rather
   than sticking, because on a phone the sticky header is already using
   enough of the screen.
   ========================================================================== */

.callbar {
  background: var(--green-800);
  text-align: center;
}

.callbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--callbar-h);
  padding: 0 var(--sp-2);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  text-decoration: none;
}

.callbar a:hover { background: var(--green-900); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 242, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

/* One grid, two arrangements. On phones the brand and the Sign up button
   share the top row and the nav sits underneath; from 800px everything is
   on one line. Same DOM either way — no duplicated markup, no JS. */
.site-header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-3);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand cta"
    "nav   nav";
  align-items: center;
  column-gap: var(--sp-2);
  padding-block: var(--sp-1) 0;
}

.brand      { grid-area: brand; }
.site-nav   { grid-area: nav; }
.site-header__cta { grid-area: cta; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}

/* Padding rather than a fixed height, so the tap target clears 44px without
   the logo itself getting bigger. */
.brand {
  padding-block: 0.35rem;
  min-height: 44px;
}

/* The crest artwork sits on white, so it's framed as a white tile rather
   than floated straight onto the cream header, where its corners would show
   as a pale square. */
.brand__mark {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--white);
  border: 1px solid var(--line);
  object-fit: contain;
  padding: 2px;
}

/* Hidden on phones — the sticky header is already using enough of a small
   screen, and "Hicksville, NY" is repeated in the hero and the footer. */
.brand__text small {
  display: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

@media (min-width: 800px) {
  .brand__text small { display: block; }
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-block: 2px 4px;
  border-top: 1px solid var(--line);
  /* Safety valve. If a label is ever added or lengthened past what fits,
     the row scrolls sideways rather than silently growing the header and
     breaking every anchor offset that depends on --header-h. */
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
  text-decoration: none;
  font-weight: 550;
  /* Five items have to share a 375px phone. Nowrap keeps each label on one
     line: without it "Free session" and "About" each wrapped to two, which
     is what made the header 127px tall. The narrow-screen rule further down
     tightens the spacing so the fifth item fits rather than being clipped by
     the overflow-x safety valve above. */
  white-space: nowrap;
  font-size: 0.82rem;
  color: var(--ink-700);
  padding: 0.35em 0.62em;
  border-radius: var(--r-full);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

@media (min-width: 800px) {
  .site-nav a { font-size: var(--fs-sm); padding: 0.35em 0.8em; }
}

.site-nav a:hover {
  background: var(--green-50);
  color: var(--green-800);
}

.site-nav a[aria-current="page"] {
  color: var(--green-800);
  background: var(--green-100);
  font-weight: 650;
}

/* The Free Tryout tab, made to read as the important one. Filled green
   rather than the orange accent on purpose: the accent stays exclusive to
   the "Claim My Free Spot" button so it never has to compete for attention
   with a nav item. */
.site-nav a.nav-cta {
  background: var(--green-700);
  color: var(--white);
  font-weight: 700;
}

.site-nav a.nav-cta:hover {
  background: var(--green-800);
  color: var(--white);
}

.site-nav a.nav-cta[aria-current="page"] {
  background: var(--green-800);
  color: var(--white);
}

@media (min-width: 800px) {
  :root { --header-h: 74px; }

  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav cta";
    min-height: 72px;
    column-gap: var(--sp-3);
    padding-block: 0;
  }

  .site-nav {
    border-top: none;
    padding-block: 0;
    justify-content: flex-end;
  }
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--fs-base);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--r-full);
  /* 52px min height — comfortably above the 44px accessibility floor, which
     matters for the older end of this audience tapping on a phone. */
  padding: 0.9em 1.6em;
  min-height: 52px;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              transform 0.1s ease, box-shadow 0.15s ease;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--green-700);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn--primary:hover { background: var(--green-800); }

.btn--secondary {
  background: var(--white);
  color: var(--green-800);
  border-color: var(--green-100);
  box-shadow: var(--shadow-sm);
}

.btn--secondary:hover {
  border-color: var(--green-700);
  background: var(--green-50);
}

/* The one conversion button. Deliberately the only thing on its page
   wearing this colour. */
.btn--accent {
  background: var(--accent);
  color: var(--white);
  box-shadow: var(--shadow-md);
  font-size: 18px;
  font-weight: 800;
  min-height: 52px;
  min-width: 280px;
  padding-inline: 1.75em;
}

.btn--accent:hover { background: var(--accent-dark); }

.btn--ghost {
  background: transparent;
  color: var(--green-800);
  border-color: var(--green-700);
}

.btn--ghost:hover { background: var(--green-50); }

/* Any dark surface, not just .section--green. The image bands are dark too,
   and a green-on-green ghost button on them is unreadable. */
.section--green .btn--ghost,
.band .btn--ghost {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}

.section--green .btn--ghost:hover,
.band .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
}

.btn--lg {
  font-size: var(--fs-lg);
  padding: 1em 1.9em;
  min-height: 58px;
}

.btn--full { width: 100%; }

.btn--sm {
  font-size: var(--fs-sm);
  padding: 0.6em 1.1em;
  min-height: 44px;
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.hero__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-4) var(--sp-3) var(--sp-5);
  display: grid;
  gap: var(--sp-4);
}

.hero__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--green-100);
}

.hero__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.hero__badge {
  position: absolute;
  left: var(--sp-2);
  bottom: var(--sp-2);
  background: rgba(255, 255, 255, 0.95);
  color: var(--green-900);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--fs-xs);
  padding: 0.5em 1em;
  border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.hero__headline {
  margin-bottom: var(--sp-2);
}

.hero__sub {
  font-size: var(--fs-lg);
  color: var(--ink-700);
  margin-bottom: var(--sp-3);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: stretch;
}

.hero__reassure {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  text-align: center;
}

@media (min-width: 860px) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--sp-5);
    padding-block: var(--sp-6);
  }

  .hero__content { order: -1; }

  .hero__media img { aspect-ratio: 4 / 3; }

  .hero__actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .hero__reassure { text-align: left; width: 100%; }
}

/* ==========================================================================
   7. Spots-left note
   Deliberately calm. It's a real number, so it's stated as a fact, not
   dressed up as an alarm. Hidden until JS fills it in so a broken sentence
   or a wrong number can never appear.
   ========================================================================== */

.spots {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--green-800);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  padding: 0.5em 1em;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-3);
}

/* Wins over the .spots display rule regardless of source order, so the
   note genuinely disappears until JS has a number to put in it. */
.spots[hidden] { display: none !important; }

.spots--center {
  display: flex;
  margin: 0 auto var(--sp-3);
  width: fit-content;
}

.spots__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1em;
}

.section--green .spots {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

/* ...but the signup card sitting inside that green section is white, so the
   light-on-dark treatment has to be undone again inside it. Must come after
   the rule above — same specificity, source order decides. */
.signup__card .spots {
  color: var(--green-800);
  background: var(--green-50);
  border-color: var(--green-100);
}

/* ==========================================================================
   8. Facts strip — the five things every parent checks first
   ========================================================================== */

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.facts__item {
  background: var(--white);
  padding: var(--sp-2);
  text-align: center;
}

.facts__item:last-child:nth-child(odd) { grid-column: span 2; }

.facts__label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-500);
  margin-bottom: 0.2em;
}

.facts__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: 1.3;
}

/* These read as standalone controls rather than links inside a sentence, so
   they get a real tap target rather than the height of one line of text. */
.facts__value a {
  color: var(--green-700);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.25em;
}

@media (min-width: 760px) {
  .facts { grid-template-columns: repeat(5, 1fr); }
  .facts__item:last-child:nth-child(odd) { grid-column: auto; }
  .facts__item { padding: var(--sp-3) var(--sp-2); }
}

.facts-note {
  max-width: 46ch;
  margin: var(--sp-2) auto 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

/* ==========================================================================
   9. Cards — benefits / what they'll work on
   ========================================================================== */

.cards {
  display: grid;
  gap: var(--sp-2);
}

@media (min-width: 700px) {
  .cards--2 { grid-template-columns: repeat(2, 1fr); }
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
}

@media (min-width: 1000px) {
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
}

.card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  margin-bottom: var(--sp-2);
}

.card h3 {
  font-size: var(--fs-lg);
  margin-bottom: 0.35em;
}

.card p {
  color: var(--ink-500);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   10. Timeline — what actually happens in the 1.5 hours
   ========================================================================== */

.timeline {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  display: grid;
  gap: 0;
}

.timeline__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  position: relative;
}

.timeline__item:last-child { padding-bottom: 0; }

.timeline__marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline__dot {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--green-700);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  display: grid;
  place-items: center;
  z-index: 1;
}

.timeline__item:not(:last-child) .timeline__marker::after {
  content: "";
  position: absolute;
  top: 44px;
  bottom: calc(var(--sp-4) * -1);
  width: 2px;
  background: var(--green-100);
}

.timeline__body h3 {
  font-size: var(--fs-lg);
  margin-bottom: 0.25em;
}

.timeline__time {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 0.3em;
}

.timeline__body p { color: var(--ink-500); }

/* ==========================================================================
   11. Coaches
   ========================================================================== */

.coaches {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 760px) {
  .coaches { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}

.coach {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.coach__photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  background: var(--green-50);
}

.coach__body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

.coach__name {
  font-size: var(--fs-2xl);
  margin-bottom: 0.1em;
}

.coach__role {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-700);
}

.coach__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  align-self: flex-start;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--r-full);
  padding: 0.4em 1em;
  font-size: var(--fs-sm);
  color: var(--green-800);
}

.coach__stat b {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.coach p { color: var(--ink-700); }

/* ==========================================================================
   12. Stats row
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  max-width: var(--wrap-narrow);
  margin-inline: auto;
}

.stats--spaced { margin-top: var(--sp-4); }

.stat {
  text-align: center;
  padding: var(--sp-2) var(--sp-1);
}

.stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--amber-500);
  margin-bottom: 0.25em;
}

.stat__label {
  display: block;
  /* 15px minimum. The old design used 11.5px here, which failed contrast
     and was too small for this audience regardless. */
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--green-100);
}

.section--white .stat__num,
.section--cream .stat__num,
.section--mint .stat__num { color: var(--green-700); }

.section--white .stat__label,
.section--cream .stat__label,
.section--mint .stat__label { color: var(--ink-500); }

/* ==========================================================================
   13. Q&A — the "what's the catch" block
   ========================================================================== */

.qa {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  display: grid;
  gap: var(--sp-2);
}

.qa__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}

.qa__item h3 {
  font-size: var(--fs-lg);
  margin-bottom: 0.4em;
  display: flex;
  gap: 0.5em;
}

.qa__item h3::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--amber-500);
}

.qa__item p { color: var(--ink-700); }

.qa__item p + p { margin-top: 0.7em; }

/* A photo answering the question it sits under, rather than decoration. */
.qa__figure {
  margin: var(--sp-2) 0 0;
}

.qa__figure img {
  width: 100%;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

.qa__figure figcaption {
  margin-top: 0.6em;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

/* ==========================================================================
   14. Social proof
   ========================================================================== */

/* Tiles are 16:9 because every source image is 16:9 — so nothing is cropped
   and nobody loses a head to a portrait crop. One column on phones, since a
   half-width landscape thumbnail is too small to read. */
.proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}

@media (min-width: 560px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .proof-grid { grid-template-columns: repeat(3, 1fr); }
}

.proof-grid figure {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--green-50);
  box-shadow: var(--shadow-sm);
}

.proof-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* The crest is square artwork on white, so it gets contained and padded
   rather than cropped to fill the tile like a photograph. */
.proof-logo {
  background: var(--white) !important;
  border: 1px solid var(--line);
}

.proof-logo img {
  object-fit: contain;
  padding: var(--sp-2);
}

/* ==========================================================================
   14a. Tryout page (image-ad destination)

   The whole hero has to fit one mobile viewport with nothing cut off and
   nothing to scroll for. That's the constraint everything here bends to:
   svh units rather than vh (so mobile browser chrome is accounted for),
   type that scales with the viewport, and a second scale-down for short
   screens like an iPhone SE.
   ========================================================================== */

.tryout-hero {
  min-height: calc(100svh - var(--header-h) - var(--callbar-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--white);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  overflow: hidden;
}

.tryout-hero__headline {
  font-size: clamp(2.25rem, 10.5vw, 4rem);   /* ~40px phone, 64px desktop */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  /* Brief asked for ~15ch "so it wraps to two punchy lines". With this
     45-character headline 15ch actually forces three or four lines, so the
     measure is set to the width that genuinely produces two lines on a
     wide screen. Intent honoured over the number. */
  max-width: 23ch;
  color: var(--ink);
  margin: 0 auto;
}

.tryout-hero__sub {
  font-size: clamp(1.05rem, 4.5vw, 1.6rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-500);
  max-width: 45ch;
  margin: 14px auto 0;
}

/* The ad is 9:16, so this box is driven by viewport height rather than
   width. Width follows from the aspect ratio. Sized by width instead, it
   would be 667px tall on a phone and swallow the whole hero. */
.tryout-video {
  display: block;
  aspect-ratio: 9 / 16;
  height: clamp(240px, 46svh, 460px);
  width: auto;
  max-width: 92vw;
  margin: 16px auto 0;
  object-fit: cover;
  background: var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

@media (min-width: 760px) {
  .tryout-video { height: clamp(300px, 52svh, 520px); }
}

/* Short laptops. At 1440x900 the hero cleared the fold by only 7px, so a
   1440x800 screen would have pushed the button under it. */
@media (min-width: 760px) and (max-height: 940px) {
  .tryout-hero__headline { font-size: clamp(2rem, 4.4vw, 3rem); }
  .tryout-video { height: clamp(280px, 44svh, 440px); }
}

.tryout-cta {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tryout-cta__note {
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

/* Short screens (iPhone SE and similar) need real savings, not a nudge: the
   header alone is 19% of a 667px screen. Measured at 375x667 the hero was
   5px over, so everything here is trimmed to leave roughly 45px of room. */
@media (max-height: 740px) {
  .tryout-hero { padding: 4px var(--sp-3) 8px; }
  .tryout-hero__headline { font-size: clamp(1.75rem, 7.8vw, 2.75rem); }
  .tryout-hero__sub {
    font-size: clamp(0.94rem, 3.7vw, 1.15rem);
    line-height: 1.35;
    margin-top: 10px;
  }
  /* A vertical video is the single biggest block on a short screen, so it
     takes the biggest cut. Below about 240px tall the burned-in captions
     stop being readable, which is the floor here. */
  .tryout-video {
    height: clamp(210px, 38svh, 300px);
    margin: 10px auto 0;
  }
  .tryout-cta { margin-top: 10px; gap: 6px; }
  .tryout-cta__note { font-size: var(--fs-xs); }
}

/* Very short screens (an iPhone SE with Safari's chrome showing is about
   553px). The header, the nav row and the call bar together are 163px of
   chrome, which no amount of trimming the hero can absorb. On THIS page
   only, the nav row folds away so the hero clears the fold. Every nav
   destination is still in the footer, and the call bar and Sign up button
   both stay. Scoped by body class so no other page loses its navigation. */
@media (max-height: 620px) {
  body.page-tryout .site-nav { display: none; }
}

/* The repeated CTA that closes every section below the fold. Same words,
   same colour, same size, every time. */
.cta-block {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.section--green .cta-block .tryout-cta__note { color: var(--green-100); }

/* Sticky bar on this page carries the accent, matching the hero button. */
.sticky-cta--accent {
  background: rgba(255, 255, 255, 0.97);
}

.video-vertical {
  display: block;
  aspect-ratio: 9 / 16;
  width: min(340px, 88vw);
  height: auto;
  margin: 0 auto var(--sp-3);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  background: var(--ink);
}

/* ==========================================================================
   14b. Watch page (video-first ad destination)
   ========================================================================== */

.watch__video,
.watch__embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-md);
  background: var(--ink);
}

.watch__embed iframe,
video.watch__video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Placeholder state keeps the dashed treatment so it reads as unfinished. */
.video-placeholder.watch__video {
  box-shadow: none;
}

.watch__cta {
  text-align: center;
  display: grid;
  gap: var(--sp-2);
}

.watch .spots {
  margin: 0 auto var(--sp-3);
  display: flex;
  width: fit-content;
}

.testimonial-slot {
  max-width: var(--wrap-narrow);
  margin: var(--sp-4) auto 0;
  border: 2px dashed var(--green-100);
  border-radius: var(--r-md);
  background: var(--white);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  color: var(--ink-500);
}

.testimonial-slot h3 {
  font-size: var(--fs-lg);
  color: var(--ink);
  margin-bottom: 0.4em;
}

/* ==========================================================================
   15. Image band — the one real photo, used as atmosphere
   ========================================================================== */

.band {
  position: relative;
  isolation: isolate;
  background: var(--green-900);
  color: var(--white);
  padding-block: var(--sp-6);
  text-align: center;
}

.band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay is what makes the text readable over a photo. Without it the
   contrast ratio is unpredictable and depends on where the crop lands. */
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg, rgba(15, 61, 35, 0.86) 0%, rgba(15, 61, 35, 0.93) 100%
  );
}

.band h2 { margin-bottom: var(--sp-2); }

.band p {
  max-width: 46ch;
  margin-inline: auto;
  color: var(--green-100);
  font-size: var(--fs-lg);
}

.band .btn { margin-top: var(--sp-3); }

/* ==========================================================================
   16. Prose — About and Legal body copy
   ========================================================================== */

.prose {
  max-width: 62ch;
  margin-inline: auto;
}

.prose > * + * { margin-top: var(--sp-3); }

.prose h2 {
  font-size: var(--fs-2xl);
  margin-top: var(--sp-5);
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  font-size: var(--fs-lg);
  margin-top: var(--sp-4);
}

.prose p { color: var(--ink-700); }

.prose ul {
  list-style: disc;
  padding-left: 1.3em;
  color: var(--ink-700);
}

.prose ul li + li { margin-top: 0.5em; }

.prose a {
  color: var(--green-700);
  text-underline-offset: 3px;
}

.prose strong { color: var(--ink); }

.pull-quote {
  border-left: 4px solid var(--amber-500);
  padding-left: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

.notice {
  border: 1px solid var(--amber-500);
  background: var(--amber-100);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  color: var(--ink);
}

.notice h2,
.notice h3 { margin-top: 0; }

.notice p { color: var(--ink); }

.updated {
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

/* ==========================================================================
   17. Signup form
   ========================================================================== */

.signup__card {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4) var(--sp-3);
  color: var(--ink);
}

@media (min-width: 700px) {
  .signup__card { padding: var(--sp-5) var(--sp-4); }
}

.event-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 360px;
  margin: 0 auto var(--sp-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  color: var(--ink);
}

.event-card__date {
  background: var(--green-700);
  color: var(--white);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.event-card__day,
.event-card__month {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.event-card__num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
}

.event-card__meta {
  flex: 1;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15em;
  text-align: left;
}

.event-card__time {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--fs-lg);
}

.event-card__place {
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.event-card__place a {
  color: var(--green-700);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.form-grid {
  display: grid;
  gap: var(--sp-2);
}

@media (min-width: 560px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .field--wide { grid-column: 1 / -1; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.field label {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
}

.field .hint {
  font-weight: 400;
  color: var(--ink-500);
}

.field input,
.field select {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.7em 0.85em;
  min-height: 52px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23566459' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9em center;
  padding-right: 2.4em;
}

.field input:hover,
.field select:hover { border-color: var(--green-100); }

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px var(--green-100);
}

.field input:focus-visible,
.field select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

/* Invalid state is applied by JS only after a field has been interacted
   with, so nobody gets yelled at for fields they haven't reached yet. */
.field--invalid input,
.field--invalid select {
  border-color: #b3261e;
}

.field__error {
  font-size: var(--fs-sm);
  font-weight: 550;
  color: #b3261e;
  display: none;
}

.field--invalid .field__error { display: block; }

.field--check {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
}

.field--check.field--invalid {
  border-color: #b3261e;
  background: #fdf1f0;
}

/* The box itself is 28px; the real tap target is the label next to it, which
   is full width and toggles the box. */
.field--check input {
  width: 28px;
  height: 28px;
  min-height: 28px;
  min-width: 28px;
  margin-top: 1px;
  accent-color: var(--green-700);
  flex-shrink: 0;
}

.field--check label {
  font-weight: 550;
  font-size: var(--fs-base);
  line-height: 1.4;
  cursor: pointer;
}

.field--check .field__error { margin-top: 0.3em; }

.consent {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  color: var(--ink-500);
  text-align: center;
  line-height: 1.5;
}

.consent a { color: var(--green-700); }

.form-submit { grid-column: 1 / -1; }

.reassurance {
  grid-column: 1 / -1;
  text-align: center;
  font-weight: 600;
  color: var(--green-800);
  background: var(--green-50);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
}

.form-error {
  grid-column: 1 / -1;
  text-align: center;
  font-weight: 600;
  color: #b3261e;
  background: #fdf1f0;
  border: 1px solid #f3c9c6;
  border-radius: var(--r-sm);
  padding: var(--sp-2);
}

.form-error[hidden] { display: none; }

/* ==========================================================================
   18. Confirmation state
   ========================================================================== */

.confirm { text-align: center; }

.confirm__mark {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--sp-3);
  border-radius: var(--r-full);
  background: var(--green-50);
  border: 2px solid var(--green-100);
  display: grid;
  place-items: center;
  font-size: 2rem;
}

.confirm__headline {
  font-size: var(--fs-3xl);
  color: var(--green-800);
  margin-bottom: var(--sp-2);
}

.confirm__sub {
  color: var(--ink-700);
  font-size: var(--fs-lg);
  max-width: 42ch;
  margin: 0 auto var(--sp-3);
}

.confirm__details {
  text-align: left;
  max-width: 420px;
  margin: 0 auto var(--sp-3);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: grid;
  gap: 0.6em;
}

.confirm__details li {
  display: flex;
  gap: 0.7em;
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

.confirm__details b { color: var(--ink); }

.confirm__videolead {
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: var(--sp-2);
}

/* Vertical video sits a little smaller inside the confirmation card. */
.confirm__video { width: min(300px, 82vw); }

.video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  border: 2px dashed var(--green-100);
  background: var(--green-50);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.4em;
  color: var(--ink-500);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
}

.video-placeholder__icon {
  font-size: 2rem;
  color: var(--green-700);
}

.confirm__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
}

@media (min-width: 560px) {
  .confirm__actions { flex-direction: row; justify-content: center; }
}

/* ==========================================================================
   19. Footer
   ========================================================================== */

.site-footer {
  background: var(--green-900);
  color: var(--green-100);
  padding-block: var(--sp-5) var(--sp-4);
  /* Clears the sticky CTA on phones so the legal link is never covered */
  padding-bottom: calc(var(--sp-4) + 84px);
}

@media (min-width: 860px) {
  .site-footer { padding-bottom: var(--sp-4); }
}

.site-footer__top {
  display: grid;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 760px) {
  .site-footer__top { grid-template-columns: 1.3fr 1fr 1fr; }
}

.site-footer h2 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-2);
  color: var(--white);
}

.site-footer p { font-size: var(--fs-sm); }

.site-footer a { color: var(--white); }

.footer-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--white);
  margin-bottom: var(--sp-1);
}

.footer-list { display: grid; gap: 0.2em; }

.footer-list a {
  display: inline-block;
  padding: 0.45em 0;
  font-size: var(--fs-sm);
  text-decoration: none;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.footer-list a:hover { text-decoration: underline; }

.site-footer__bottom {
  padding-top: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.72);
}

.site-footer__bottom a {
  color: rgba(255, 255, 255, 0.85);
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.4em;
}

/* ==========================================================================
   20. Sticky CTA
   ========================================================================== */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: var(--sp-2) var(--sp-3);
  padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 248, 242, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  /* Hidden position must clear the element's own height AND whatever bottom
     offset it sits at, or a sliver stays stuck on screen. The desktop rule
     below overrides --cta-offset for exactly this reason. */
  --cta-offset: 0px;
  transform: translateY(calc(100% + var(--cta-offset)));
  transition: transform 0.25s ease;
  will-change: transform;
}

.sticky-cta--visible { transform: translateY(0); }

.sticky-cta[hidden] { display: none; }

@media (min-width: 860px) {
  .sticky-cta {
    --cta-offset: var(--sp-3);
    left: auto;
    right: var(--sp-3);
    bottom: var(--sp-3);
    width: min(360px, calc(100vw - var(--sp-5)));
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-1);
  }
}

/* ==========================================================================
   21. Scroll reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal--visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   22. Reduced motion
   ========================================================================== */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   23. Pricing (home page)
   ========================================================================== */

.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  max-width: var(--wrap);
  margin-inline: auto;
}

@media (min-width: 620px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  .price-grid { grid-template-columns: repeat(3, 1fr); }
}

.price {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
}

/* The pack we want people to land on. Green rather than the tryout page's
   orange: that accent is reserved for the one free-session button and
   should not start appearing next to prices. */
.price--featured {
  border: 2px solid var(--green-700);
  box-shadow: var(--shadow-md);
}

.price__flag {
  position: absolute;
  top: -12px;
  left: var(--sp-3);
  background: var(--green-700);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--fs-xs);
  padding: 0.25em 0.8em;
  border-radius: var(--r-full);
}

.price__name {
  font-size: var(--fs-lg);
  margin-bottom: 0.1em;
}

.price__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--green-800);
}

.price__per {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
}

.price__note {
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

/* Push every button to the bottom so the cards line up despite different
   amounts of copy. */
.price .btn {
  margin-top: auto;
  padding-top: 0.8em;
}

.price > .btn { margin-top: var(--sp-2); }

@media (min-width: 620px) {
  .price > .btn { margin-top: auto; }
}

.card__price {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--fs-lg);
  color: var(--green-800);
  margin-top: auto;
  padding-top: var(--sp-2);
}

.cards--2 .card { display: flex; flex-direction: column; }

.guarantee {
  max-width: var(--wrap-narrow);
  margin: var(--sp-4) auto 0;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  text-align: center;
}

.guarantee h3 {
  font-size: var(--fs-lg);
  margin-bottom: 0.4em;
  color: var(--green-800);
}

.guarantee p { color: var(--ink-700); }

/* ==========================================================================
   24. Yes / No choice (Saturday attendance)
   Radios, so the browser enforces "exactly one" on its own. Styled as two
   large tappable cards rather than bare dots: this sits at the end of a
   form on a phone, and a 20px radio is a poor target for a parent in a
   hurry.
   ========================================================================== */

.field--choice {
  grid-column: 1 / -1;
  border: 1px solid var(--green-100);
  background: var(--green-50);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
  margin: 0;
}

.field--choice.field--invalid {
  border-color: #b3261e;
  background: #fdf1f0;
}

.field__legend {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
  padding: 0;
  margin-bottom: var(--sp-1);
}

.choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1);
}

.choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 52px;
  padding: 0.5em 0.75em;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.choice:hover { border-color: var(--green-100); }

.choice input {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 0;
  accent-color: var(--green-700);
}

/* The whole card reads as selected, not just the dot. */
.choice:has(input:checked) {
  border-color: var(--green-700);
  background: var(--green-50);
}

.choice:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}


/* ==========================================================================
   The booking and payment page (/pay)
   ========================================================================== */

.pay-step {
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-5);
}

.pay-step__title {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
}

.pay-step__num {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  flex: 0 0 auto;
  background: var(--green-700);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 0.75em;
  font-weight: 700;
}

/* --- The plan cards ------------------------------------------------------
   Each card is a label wrapping a visually-hidden radio. The radio stays in
   the accessibility tree and keeps full keyboard behaviour (arrow keys move
   between plans); the card is what you actually see and tap. */

.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 560px) {
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
}

.plan {
  position: relative;
  display: flex;
}

.plan__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.plan__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  width: 100%;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 2px);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease,
              box-shadow 0.15s ease;
}

.plan__body:hover { border-color: var(--green-100); }

.plan__flag {
  align-self: flex-start;
  margin-bottom: 0.4em;
  padding: 0.25em 0.7em;
  background: var(--amber-100);
  color: var(--amber-600);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.plan__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
}

.plan__amount {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--green-700);
}

.plan__per {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-500);
}

.plan__note {
  margin-top: 0.5em;
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

/* The tick sits in the corner and only appears once the card is chosen, so
   an unselected grid isn't a wall of empty circles. */
.plan__tick {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--green-700);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.plan__radio:checked + .plan__body {
  border-color: var(--green-700);
  background: var(--green-50);
  box-shadow: var(--shadow-sm);
}

.plan__radio:checked + .plan__body .plan__tick {
  opacity: 1;
  transform: scale(1);
}

.plan__radio:focus-visible + .plan__body {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.plan--featured .plan__body { border-color: var(--amber-500); }

.plan--featured .plan__radio:checked + .plan__body { border-color: var(--green-700); }

.field--invalid .plan__body { border-color: #c0392b; }

/* --- Total and payment buttons ------------------------------------------ */

.pay-total {
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--green-50);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--green-800);
  text-align: center;
}

.pay-total[hidden] { display: none !important; }

.pay-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.pay-actions .btn[hidden] { display: none !important; }

.pay-note {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-500);
  text-align: center;
}

/* --- The reference shown after booking in person ------------------------- */

.pay-reference {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  margin: var(--sp-3) auto;
  padding: var(--sp-3);
  max-width: 320px;
  background: var(--white);
  border: 2px dashed var(--green-700);
  border-radius: var(--r-md);
}

.pay-reference span {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.pay-reference b {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--green-800);
}

/* --- Sale pricing --------------------------------------------------------
   The struck-through regular price. Deliberately quieter than the price
   being charged: smaller, lighter, and never the first thing read. */

.price__was,
.plan__was {
  font-size: 0.55em;
  font-weight: 600;
  color: var(--ink-500);
  text-decoration-thickness: 2px;
  white-space: nowrap;
}

.price__was { margin-left: 0.15em; }

/* A sale flag has to shout, but NOT in the orange accent: that is reserved
   for the single free-session button and is deliberately kept away from
   prices (see .price--featured). Amber is the site's sparing accent, and
   dark ink on it clears AA comfortably where white would not. */
.plan__flag--sale {
  background: var(--amber-500);
  color: var(--ink);
}

.plan--sale .plan__body { border-color: var(--amber-500); }

.plan--sale .plan__radio:checked + .plan__body { border-color: var(--green-700); }

/* The home page's price table flags a sale too. Ships hidden and empty, so
   nothing flashes on a page with no sale running. */
.price__flag[hidden] { display: none !important; }

/* --- "Not ready for a whole pass?" --------------------------------------
   The four legacy options. Deliberately NOT price cards: they have no card
   checkout, so dressing them like the Fall passes would promise a Book-now
   button that doesn't exist. A quiet list reads as "also available", which
   is what they are. */

.other-ways {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.other-ways h3 {
  font-size: var(--fs-xl);
  margin-bottom: 0.4em;
}

.other-ways > p {
  color: var(--ink-700);
  max-width: 58ch;
}

.other-ways__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0;
}

@media (min-width: 640px) {
  .other-ways__list { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-4); }
}

.other-ways__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 0.7em 0;
  border-bottom: 1px solid var(--line);
}

.other-ways__name { color: var(--ink-700); }

.other-ways__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--green-800);
  white-space: nowrap;
}

.other-ways__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* The expiry date and terms link under the guarantee. Quiet, but present:
   an expiry a buyer only discovers in the terms reads as a trap. */
.guarantee__terms {
  margin-top: 0.8em;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

/* Five nav items on a phone.

   At 375px the row measured 349px inside a 327px space, so "Home" and
   "About" were both sliced in half. The overflow-x safety valve on .site-nav
   stopped that from breaking the header height, but a clipped nav with no
   visible scroll affordance just looks broken. Tightening the spacing here
   keeps all five whole, and keeps --header-h at 107px so every anchor offset
   on the site stays correct. */
@media (max-width: 430px) {
  .site-nav { gap: 1px; }
  .site-nav a {
    font-size: 0.78rem;
    padding: 0.35em 0.44em;
  }
}

/* The Fall-clinics bridge on the confirmation screen.

   Set apart from the confirmation itself with a rule and cooler colour: the
   signup is the news, this is a footnote to it. Anything louder would read
   as an upsell landing the moment someone accepted something free. */
.confirm__next {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  text-align: center;
}

.confirm__next h3 {
  font-size: var(--fs-lg);
  margin-bottom: 0.3em;
}

.confirm__next p {
  max-width: 46ch;
  margin: 0 auto var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

/* The Fall clinic dates on /pay. */
.dates {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--green-50);
  border-radius: var(--r-sm);
}

.dates__day {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--green-800);
  margin-bottom: 0.4em;
}

.dates__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 0.5em;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dates__list li {
  padding: 0.15em 0.55em;
  background: var(--white);
  border: 1px solid var(--green-100);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-700);
  white-space: nowrap;
}

.dates__pending {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}