/* ==========================================================================
   Tiny Tees Golf — production stylesheet
   Rebuilt as standard CSS from the Claude Design export.
   ========================================================================== */

/* ---- Fonts ----
   Values below are taken verbatim from the Tiny Tees Golf design system
   (_ds/tiny-tees-golf-design-system-9bb2e93f.../tokens/*.css). Do not hand-tune:
   change the design system and re-copy. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ---- Design tokens (tokens/colors.css) ---- */
:root {
  /* base palette */
  --green-900: #0F3520; --green-800: #123F22; --green-700: #17512C; --green-600: #1C6135;
  --green-500: #2B7D46; --green-400: #4E9C64; --green-300: #8CC29C; --green-200: #C8E0CF;
  --green-100: #E7F1E7; --green-050: #F2F7F0;
  --navy-800: #0E1A42; --navy-700: #17265E; --navy-600: #22357C; --navy-300: #8E9AC4; --navy-100: #E4E8F4;
  --blue-600: #1D6FBF; --blue-500: #2F86D8; --blue-100: #E3EEF9;
  --teal-600: #12909C; --teal-500: #17A2AF; --teal-100: #DFF3F4;
  --orange-600: #CE7208; --orange-500: #E08214; --orange-100: #FBEEDC;
  --red-600: #B3261E; --red-100: #FBE7E5;
  --yellow-500: #F2C230; --yellow-100: #FDF4DC;
  --cream-100: #FBFAF5; --cream-200: #F6F5EE; --cream-300: #EDEBDF;
  --ink-900: #111111; --ink-800: #1F2320; --ink-700: #333834;
  --gray-600: #5A605B; --gray-500: #7C837D; --gray-400: #A7ADA8;
  --gray-300: #CFD3CF; --gray-200: #E4E7E3; --gray-100: #F2F4F1;
  --white: #FFFFFF;

  /* semantic: text */
  --text-heading: var(--green-800); --text-body: var(--ink-800);
  --text-muted: var(--gray-600); --text-subtle: var(--gray-500);
  --text-on-dark: var(--white); --text-on-dark-muted: var(--green-200);
  --text-link: var(--green-600); --text-link-hover: var(--green-800);

  /* semantic: surfaces */
  --surface-page: var(--cream-200); --surface-page-alt: var(--white); --surface-card: var(--white);
  --surface-sunken: var(--gray-100); --surface-wash: var(--green-050);
  --surface-dark: var(--green-800); --surface-ink: var(--ink-900);

  /* semantic: lines */
  --border-subtle: var(--gray-200); --border-default: var(--gray-300);
  --border-strong: var(--green-600); --border-dark: var(--green-800);

  /* semantic: actions */
  --action-primary: var(--green-600); --action-primary-hover: var(--green-700); --action-primary-active: var(--green-800);
  --action-secondary: var(--navy-700); --action-secondary-hover: var(--navy-800);
  --action-accent: var(--orange-500); --action-accent-hover: var(--orange-600);
  --focus-ring: var(--yellow-500);

  /* semantic: package lanes — fixed meanings, never reassign */
  --lane-start: var(--blue-600); --lane-smaller: var(--teal-500);
  --lane-value: var(--green-500); --lane-flexible: var(--orange-500);

  /* semantic: status */
  --status-success: var(--green-500); --status-success-bg: var(--green-100);
  --status-info: var(--blue-600); --status-info-bg: var(--blue-100);
  --status-warning: var(--orange-500); --status-warning-bg: var(--orange-100);
  --status-danger: var(--red-600); --status-danger-bg: var(--red-100);

  /* tokens/typography.css */
  --font-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --font-core: "Poppins", system-ui, -apple-system, sans-serif;
  --font-ui: "Source Sans 3", "Poppins", system-ui, sans-serif;

  --text-hero: clamp(2.75rem, 6vw, 4.5rem);
  --text-h1: clamp(2.125rem, 4vw, 3rem);
  --text-h2: 1.75rem;
  --text-h3: 1.3125rem;
  --text-h4: 1.0625rem;
  --text-lead: 1.1875rem;
  --text-body-size: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-eyebrow: 0.8125rem;
  --text-price: 2.75rem;

  --leading-tight: 1.02; --leading-snug: 1.18; --leading-normal: 1.5; --leading-loose: 1.65;
  --leading-relaxed: 1.65;
  --tracking-display: -0.015em; --tracking-normal: 0;
  --tracking-eyebrow: 0.12em; --tracking-caps: 0.06em;

  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --weight-bold: 700; --weight-heavy: 800;

  /* tokens/spacing.css */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-9: 40px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --gutter: 24px;
  --section-y: 80px;
  --section-y-tight: 48px;
  --container-max: 1200px;
  --container-narrow: 760px;
  --control-h-sm: 36px; --control-h-md: 44px; --control-h-lg: 54px; --tap-min: 44px;

  /* tokens/radii.css */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --radius-xl: 20px; --radius-card: 14px; --radius-pill: 999px;
  --border-w-hairline: 1px; --border-w-default: 2px; --border-w-heavy: 3px;

  /* tokens/elevation.css — shadows are green-tinted, never neutral grey */
  --shadow-xs: 0 1px 2px rgba(15,53,32,.08);
  --shadow-sm: 0 2px 6px rgba(15,53,32,.10);
  --shadow-md: 0 6px 18px rgba(15,53,32,.12);
  --shadow-lg: 0 16px 40px rgba(15,53,32,.16);
  --shadow-press: inset 0 2px 4px rgba(15,53,32,.18);
  --ring-focus: 0 0 0 3px rgba(242,194,48,.65);
  --overlay-scrim: rgba(15,53,32,.55);
  --gradient-fairway: linear-gradient(180deg, var(--green-700) 0%, var(--green-800) 100%);
  --gradient-protect: linear-gradient(180deg, rgba(15,53,32,0) 0%, rgba(15,53,32,.72) 100%);
  --gradient-wash: linear-gradient(180deg, var(--cream-100) 0%, var(--green-050) 100%);

  /* tokens/motion.css */
  --ease-standard: cubic-bezier(.2,.7,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 340ms;
  --lift-hover: -2px; --press-scale: .97;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  font-family: var(--font-core);
  font-size: var(--text-body-size);
  color: var(--text-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: var(--leading-normal);
}
img { max-width: 100%; display: block; }
a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }
p { text-wrap: pretty; }
h1, h2 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
}
h3, h4 {
  font-family: var(--font-core);
  color: var(--text-heading);
  line-height: var(--leading-snug);
  letter-spacing: 0;
}
h3 { font-weight: var(--weight-bold); }
h4 { font-weight: var(--weight-semibold); }
button { font-family: inherit; }
main { flex: 1; }

/* design-system utility: uppercase eyebrow lockup */
.tt-eyebrow {
  font-family: var(--font-core);
  font-weight: var(--weight-bold);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

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

/* Visible, high-contrast focus ring everywhere — keyboard-first */
:focus-visible {
  outline: 3px solid var(--yellow-500);
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible { border-radius: var(--radius-xs); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--white);
  color: var(--green-800);
  font-family: var(--font-core);
  font-weight: 700;
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

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

@keyframes ttRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ttOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- Layout helpers ---- */
/* The design system sizes its containers content-box: max-width is the CONTENT
   width and the 24px gutter sits outside it. This site is border-box, so add the
   gutters back to keep the measured content column at exactly 1200 / 760px. */
.container {
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container--narrow {
  max-width: calc(var(--container-narrow) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--tight { padding-top: var(--section-y-tight); padding-bottom: var(--section-y-tight); }
.section--border-top { border-top: 1px solid var(--border-subtle); }
.section--border-bottom { border-bottom: 1px solid var(--border-subtle); }
.section--white { background: var(--white); }
.section--wash { background: var(--surface-wash); }
.section--dark { background: var(--surface-dark); color: var(--white); }
.section--fairway { background: var(--gradient-fairway); color: var(--white); }
.section--navy { background: var(--navy-700); color: var(--white); }

/* ---- Buttons ---- */
/* Mirrors components/core/Button.jsx: pill, uppercase, 2px transparent border,
   -2px lift on hover, .97 press scale, hover darkens one step within the hue. */
.btn {
  /* The design system sizes controls content-box: --control-h-* is the inner
     height and the 2px border sits outside it (36 -> 40, 44 -> 48, 54 -> 58). */
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h-md);
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-core);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: var(--border-w-default) solid transparent;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
  line-height: 1;
}
.btn:hover { transform: translateY(var(--lift-hover)); }
.btn:active { transform: scale(var(--press-scale)); }
.btn:focus-visible { outline-offset: 3px; }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

.btn--primary { background: var(--action-primary); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--action-primary-hover); color: var(--white); }

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

.btn--inverse { background: var(--white); color: var(--green-800); }
.btn--inverse:hover { background: var(--green-100); color: var(--green-800); }

.btn--accent { background: var(--action-accent); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--accent:hover { background: var(--action-accent-hover); }

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

.btn--lg { height: var(--control-h-lg); padding: 0 var(--space-8); font-size: var(--text-body-size); }
.btn--lg svg { width: 20px; height: 20px; }
.btn--sm { height: var(--control-h-sm); padding: 0 var(--space-4); font-size: var(--text-xs); }
.btn--full { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn-row--center { justify-content: center; }

/* ---- Top enrolling banner ---- */
.enroll-banner {
  background: var(--action-accent);
  color: var(--white);
  font-family: var(--font-core);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-align: center;
  padding: 10px var(--gutter);
}

/* ---- Header ---- */
.site-header { background: var(--surface-dark); color: var(--text-on-dark); position: relative; }
.site-header__bar {
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--space-4) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}
.brand__logo { height: 46px; width: auto; flex: 0 0 auto; }
.brand__word {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.nav-desktop {
  display: none;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-left: auto;
  align-items: center;
  justify-content: flex-end;
}
.nav-desktop a:not(.btn) {
  font-family: var(--font-core);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--green-200);
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
}
.nav-desktop a:not(.btn):hover,
.nav-desktop a:not(.btn)[aria-current="page"] { color: var(--white); }
.nav-desktop a:not(.btn)[aria-current="page"] { border-bottom-color: var(--yellow-500); }

.nav-mobile-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.menu-toggle {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: var(--radius-pill);
  color: var(--white);
  cursor: pointer;
}
.menu-toggle svg { width: 22px; height: 22px; }

.nav-mobile {
  border-top: 1px solid rgba(255,255,255,.16);
  padding: var(--space-3) var(--gutter) var(--space-5);
  display: flex;
  flex-direction: column;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile a {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-family: var(--font-core);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--green-200);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.nav-mobile a:hover,
.nav-mobile a[aria-current="page"] { color: var(--white); }

@media (min-width: 1040px) {
  .nav-desktop { display: flex; }
  .nav-mobile-controls { display: none; }
  .nav-mobile { display: none !important; }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  background: var(--green-800);
  overflow: hidden;
}
.hero__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 60%;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(18,63,34,.92) 0%, rgba(18,63,34,.78) 42%, rgba(18,63,34,.30) 78%, rgba(18,63,34,.18) 100%);
}
.hero__content {
  position: relative;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 110px var(--gutter) 96px;
}
.hero__inner {
  max-width: 36ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  animation: ttRise 500ms var(--ease-standard) both;
}
/* Default eyebrow is the on-light green; dark bands override below. */
.eyebrow {
  font-family: var(--font-core);
  font-weight: var(--weight-bold);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--green-500);
}
.section--dark .eyebrow,
.section--fairway .eyebrow,
.section--navy .eyebrow,
.page-hero .eyebrow { color: var(--green-300); }
.hero .eyebrow { color: var(--green-200); }
.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
}
.hero p.lead {
  margin: 0;
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--white);
  max-width: 48ch;
}
.hero .fine-print {
  margin: 0;
  font-family: var(--font-core);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white);
}

/* Simple page header for interior pages (no photo) */
.page-hero {
  background: var(--gradient-fairway);
  color: var(--white);
}
.page-hero__inner { max-width: calc(var(--container-max) + 2 * var(--gutter)); margin: 0 auto; padding: var(--section-y) var(--gutter); }
.page-hero h1 {
  margin: var(--space-4) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--white);
}
.page-hero p.lead { margin: 0; font-size: var(--text-lead); line-height: var(--leading-normal); color: var(--white); max-width: 58ch; }
.page-hero--navy { background: var(--navy-700); }

/* ---- Counters ---- */
.counters {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: var(--space-10) 0;
}
.counter { text-align: center; }
.counter__value {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--green-700);
}
.counter__label { margin-top: var(--space-2); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--ink-900); }
.counter__note { margin-top: 2px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); min-height: 1em; }

/* ---- Section heading — mirrors components/marketing/SectionHeading.jsx ---- */
.section-heading { margin-bottom: var(--space-8); }
.section-heading--center { max-width: var(--container-narrow); margin-left: auto; margin-right: auto; text-align: center; }
/* Inside an already-narrow column the centred heading must not shrink again. */
.container--narrow .section-heading--center { max-width: none; }
.section-heading .eyebrow { display: block; margin-bottom: var(--space-2); }
.section-heading h2, .section-heading h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-heading);
}
.section--dark .section-heading h2,
.section--fairway .section-heading h2,
.section--navy .section-heading h2 { color: var(--white); }
.section-heading .lead {
  margin: var(--space-3) 0 0;
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}
.section--dark .section-heading .lead,
.section--fairway .section-heading .lead,
.section--navy .section-heading .lead { color: var(--green-200); }
.section-heading--center .lead { margin-left: auto; margin-right: auto; }

/* ---- Steps (Home: how it works) ---- */
.steps { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.step-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--green-600);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: var(--space-4);
  align-items: flex-start;
  transition: box-shadow 200ms var(--ease-standard), transform 200ms var(--ease-standard);
}
.step-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.step-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: var(--green-100); color: var(--green-800);
  font-family: var(--font-display); font-size: 1.1rem;
  flex: 0 0 auto;
}
.step-card h3 { margin: 0 0 6px; font-weight: 700; font-size: var(--text-h4); color: var(--navy-700); }
.step-card p { margin: 0; font-size: var(--text-body-size); line-height: var(--leading-normal); max-width: 70ch; }

/* ---- Player path levels (home preview strip) ---- */
.level-rows { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.level-row {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: var(--space-4);
  align-items: center;
}
.level-row__chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 84px; height: 32px; padding: 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.16);
  font-family: var(--font-display); font-size: .85rem;
  letter-spacing: var(--tracking-caps);
  color: var(--white);
}
.level-row__title { font-family: var(--font-core); font-weight: 700; font-size: var(--text-body-size); color: var(--white); }
.level-row p { margin: 4px 0 0; font-size: var(--text-body-size); line-height: var(--leading-normal); color: var(--white); max-width: 70ch; }

/* ---- Pack / pricing cards ----
   A 1:1 encoding of the printed class-package comparison sheet, per
   components/marketing/PackCard.jsx: full-width coloured lane banner instead of
   a top rule, no hairline border, copy column + 168px buy column. */
.pack-grid { margin-top: var(--space-8); display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0,1fr)); }
.pack-card {
  --lane: var(--lane-value);
  background: var(--surface-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
  font-family: var(--font-core);
  display: flex;
  flex-direction: column;
}
.pack-card:hover { box-shadow: var(--shadow-md); transform: translateY(var(--lift-hover)); }
.pack-card[data-lane="start"] { --lane: var(--lane-start); }
.pack-card[data-lane="smaller"] { --lane: var(--lane-smaller); }
.pack-card[data-lane="value"] { --lane: var(--lane-value); }
.pack-card[data-lane="flexible"] { --lane: var(--lane-flexible); }

.pack-card__lane {
  background: var(--lane);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.pack-card__body { display: flex; gap: var(--space-5); padding: var(--space-5); flex: 1; }
.pack-card__main { flex: 1; min-width: 0; }
.pack-card__kicker { font-weight: var(--weight-bold); font-size: var(--text-h4); color: var(--text-heading); }
.pack-card h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-core);
  font-weight: var(--weight-bold);
  font-size: var(--text-h4);
  letter-spacing: 0;
  text-transform: none;
  color: var(--lane);
}
.pack-card__price-row { display: flex; align-items: baseline; gap: var(--space-3); }
.pack-card__price { font-family: var(--font-display); font-size: var(--text-price); line-height: 1; color: var(--ink-900); }
.pack-card__meta { font-size: var(--text-sm); }
.pack-card__credits { display: block; font-weight: var(--weight-bold); }
.pack-card__perclass { color: var(--text-muted); }
.pack-card__rule { border: none; border-top: var(--border-w-hairline) solid var(--border-subtle); margin: var(--space-4) 0; }
.pack-card__who { color: var(--lane); font-size: var(--text-xs); margin-bottom: 4px; }
.pack-card__audience { font-weight: var(--weight-bold); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.pack-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pack-card li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--text-body); }
.pack-card li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lane); margin-top: 7px; flex: 0 0 auto;
}
.pack-card__expiry { margin-top: var(--space-4); }
.pack-card__expiry-label { color: var(--text-subtle); font-size: var(--text-xs); }
.pack-card__expiration { font-weight: var(--weight-bold); font-size: var(--text-sm); }
.pack-card__buy {
  width: 168px; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.pack-card__buy .btn { border-color: var(--lane); color: var(--lane); }
.pack-card__buy .btn:hover { background: var(--green-050); color: var(--lane); }

/* ---- Reason cards ---- */
.reason-grid { margin-top: var(--space-8); display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0,1fr)); }
/* Plain Card, tone="plain": an even hairline on all four edges. The accent prop
   is set on these in the design but the tone's `border` shorthand wins, so no
   coloured top rule renders — matched here deliberately. */
.reason-card {
  background: var(--surface-card);
  border: var(--border-w-hairline) solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.reason-card:hover { box-shadow: var(--shadow-md); transform: translateY(var(--lift-hover)); }
.reason-card svg { color: var(--text-body); width: 28px; height: 28px; }
.reason-card h3 { margin: var(--space-4) 0 var(--space-2); font-weight: var(--weight-bold); font-size: var(--text-h4); color: var(--navy-700); }
.reason-card p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-body); }

/* ---- Split layouts (image + text) ---- */
.split {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  align-items: center;
}
.split__figure { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); background: var(--surface-wash); }
.split__figure img { width: 100%; height: 100%; object-fit: cover; }
.split__figure--square { aspect-ratio: 1/1; }
/* Flyer/poster art is shown whole, not cropped to a frame. */
.split__figure--plain {
  aspect-ratio: auto; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); background: var(--white);
}
.split__figure--plain img { height: auto; object-fit: fill; }
.badge-chip {
  display: inline-block;
  background: var(--status-warning-bg);
  color: var(--orange-600);
  font-weight: 700; font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-xs);
}
.split h2 { margin: var(--space-4) 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-h2); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--green-800); }
.split p.lead { margin: 0 0 var(--space-5); font-size: var(--text-lead); line-height: var(--leading-normal); max-width: 48ch; }
.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-6); }
.stat-row__value { font-family: var(--font-display); font-size: var(--text-price); color: var(--ink-900); line-height: 1; }
.stat-row__label { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }

/* ---- Homeschool point list ---- */
.point-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.point-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-body-size); }
.point-list svg { color: var(--green-600); width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.point-list--sm li { font-size: var(--text-sm); }
/* The After School "Program includes" list is set in semibold navy. */
.point-list--strong li { font-weight: var(--weight-semibold); color: var(--navy-700); align-items: center; }
.point-list--sm svg { width: 16px; height: 16px; }

/* ---- Event cards ---- */
.event-grid { margin-top: var(--space-8); display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.event-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--lane-start);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.event-card[data-color="value"] { border-top-color: var(--lane-value); }
.event-card[data-color="smaller"] { border-top-color: var(--lane-smaller); }
.event-card[data-color="flexible"] { border-top-color: var(--lane-flexible); }
.event-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.event-kind { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--green-700); }
/* Mirrors components/core/Badge.jsx */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 5px 10px; border-radius: var(--radius-xs);
  font-family: var(--font-core); font-weight: var(--weight-bold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.badge--neutral { background: var(--gray-100); color: var(--gray-600); }
.badge--value { background: var(--lane-value); color: var(--white); }
.badge--start { background: var(--lane-start); color: var(--white); }
.badge--smaller { background: var(--lane-smaller); color: var(--white); }
.badge--flexible { background: var(--lane-flexible); color: var(--white); }
.badge--success { background: var(--status-success-bg); color: var(--green-800); }
.badge--info { background: var(--status-info-bg); color: var(--navy-700); }
.badge--warning { background: var(--status-warning-bg); color: var(--orange-600); }
.event-card h3 { margin: 0; font-weight: 700; font-size: var(--text-h4); color: var(--navy-700); }

/* Homepage "what is on the calendar" strip: the design uses a shorter card than
   the Events page — kind, name, when, blurb, one shared green rule, no CTA. */
.event-card--compact { border-top-color: var(--green-600); gap: var(--space-2); }
.event-card--compact .event-when { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }

.event-meta { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }
.event-meta span { display: flex; align-items: center; gap: 8px; }
.event-meta svg { width: 15px; height: 15px; flex: 0 0 auto; }
.event-card p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); }
.event-card__cta { margin-top: auto; padding-top: var(--space-3); }

/* Mirrors components/navigation/Tabs.jsx: one grey pill track, the active tab a
   white pill inside it. */
.event-filters {
  margin-top: var(--space-6);
  display: flex; gap: var(--space-1); padding: 4px;
  background: var(--gray-100); border-radius: var(--radius-pill);
}
.event-filters button {
  flex: 1;
  min-height: var(--control-h-sm);
  padding: 0 var(--space-5);
  border: none; cursor: pointer;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-core); font-weight: var(--weight-bold); font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.event-filters button[aria-pressed="true"] {
  background: var(--white); box-shadow: var(--shadow-xs); color: var(--green-800);
}
@media (max-width: 720px) {
  .event-filters { flex-wrap: wrap; border-radius: var(--radius-card); }
  .event-filters button { flex: 1 1 40%; }
}
.event-card[hidden] { display: none; }

/* ---- Final CTA band ---- */
.final-cta { text-align: center; }
.final-cta h2 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-h2); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--white); }
.final-cta p { margin: 0 auto var(--space-6); font-size: var(--text-lead); line-height: var(--leading-normal); color: var(--white); max-width: 52ch; }

/* ---- Player Path page ---- */
.path-stepper {
  position: relative;
  margin-top: var(--space-9);
  display: none;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
}
.path-stepper::before {
  content: '';
  position: absolute; left: 10%; right: 10%; top: 21px; height: 4px;
  background: var(--green-100); border-radius: var(--radius-pill);
}
.path-stepper a {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  text-decoration: none; position: relative; padding: 0 var(--space-2);
}
.path-stepper__dot {
  width: 46px; height: 46px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.1rem; color: var(--white);
  border: 4px solid var(--surface-page);
}
.path-stepper__label { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; color: var(--navy-700); text-align: center; }
@media (min-width: 900px) { .path-stepper { display: grid; } }

.level-cards { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.level-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--green-600);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.level-card__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  align-items: center;
}
.level-card__summary::-webkit-details-marker { display: none; }
.level-card__head { display: flex; align-items: center; gap: var(--space-3); }
.level-card__chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: var(--radius-pill); background: var(--green-600); color: var(--white);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; white-space: nowrap;
}
.level-card__summary h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--green-800); }
.level-card__summary p { margin: var(--space-3) 0 0; font-size: var(--text-lead); line-height: var(--leading-normal); max-width: 50ch; }
.level-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; align-items: center; }
/* The design renders this as a ghost Button, not plain text. */
.level-card__toggle-label {
  box-sizing: content-box;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  height: var(--control-h-md);
  padding: 0 var(--space-6);
  border: var(--border-w-default) solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-core);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--green-700);
  transition: background var(--dur-base) var(--ease-standard);
}
.level-card__summary:hover .level-card__toggle-label { background: var(--green-100); }
.level-card__toggle-label .lbl-hide { display: none; }
.level-card[open] .level-card__toggle-label .lbl-show { display: none; }
.level-card[open] .level-card__toggle-label .lbl-hide { display: inline; }
.level-card[open] .level-card__toggle-label .chev { transform: rotate(180deg); }
.chev { transition: transform var(--dur-base) var(--ease-standard); width: 16px; height: 16px; flex: 0 0 auto; }
.level-card__body {
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-wash);
  padding: var(--space-6);
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  animation: ttOpen 260ms var(--ease-standard) both;
}
.level-card__body p { margin: 0 0 var(--space-3); font-size: var(--text-body-size); line-height: var(--leading-normal); max-width: 62ch; }
.level-card__kicker { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--green-700); margin-top: var(--space-4); }
.level-card__body ul.skills { margin: var(--space-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); }
.level-card__body ul.skills li { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: var(--text-sm); }
.level-card__body ul.skills svg { color: var(--green-600); width: 16px; height: 16px; }

.callout {
  margin-top: var(--space-6);
  background: var(--green-100);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex; align-items: flex-start; gap: var(--space-3);
}
.callout svg { color: var(--green-700); width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.callout p { margin: 0; font-size: var(--text-body-size); line-height: var(--leading-normal); color: var(--green-800); }

/* ---- Program cards (Classes page) ---- */
.program-grid { margin-top: var(--space-8); display: grid; gap: var(--space-5); grid-template-columns: repeat(2, minmax(0,1fr)); }
.program-card {
  text-decoration: none;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--lane-start);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: box-shadow 200ms var(--ease-standard), transform 200ms var(--ease-standard);
}
.program-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.program-card[data-color="smaller"] { border-top-color: var(--lane-smaller); }
.program-card[data-color="value"] { border-top-color: var(--lane-value); }
.program-card[data-color="flexible"] { border-top-color: var(--lane-flexible); }
.program-card svg { color: var(--green-700); width: 26px; height: 26px; }
.program-card h3 { margin: var(--space-2) 0 0; font-weight: 700; font-size: var(--text-h4); color: var(--navy-700); }
.program-card p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-body); }

/* ---- Location cards ---- */
.location-grid { margin-top: var(--space-8); display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); align-items: stretch; }
.location-card {
  background: var(--surface-card);
  border: var(--border-w-hairline) solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-family: var(--font-core);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
  display: flex; flex-direction: column;
}
.location-card:hover { box-shadow: var(--shadow-md); transform: translateY(var(--lift-hover)); }
/* Mirrors components/marketing/LocationCard.jsx: the venue name and address sit
   ON the photo under --gradient-protect; facts are pill Tags, not a bullet list. */
.location-card__figure { position: relative; aspect-ratio: 16/9; background: var(--green-100); }
.location-card__figure img { width: 100%; height: 100%; object-fit: cover; }
.location-card__figure::after {
  content: ""; position: absolute; inset: 0; background: var(--gradient-protect);
}
.location-card--soon .location-card__figure::after { content: none; }
.location-card__caption {
  position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-4);
  color: var(--white); z-index: 1;
}
.location-card__venue {
  font-family: var(--font-display); font-size: var(--text-h3);
  text-transform: uppercase; letter-spacing: var(--tracking-display);
}
.location-card__addr {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); opacity: .92;
}
.location-card__addr svg { width: 14px; height: 14px; flex: 0 0 auto; }
.location-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.location-card h3 { margin: 0; font-weight: 700; font-size: var(--text-h4); color: var(--navy-700); }
.location-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.location-facts li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--white);
  border: var(--border-w-hairline) solid var(--border-default);
  color: var(--text-body);
  font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.location-facts svg { width: 14px; height: 14px; color: var(--green-600); flex: 0 0 auto; }
.location-card__price-row { display: flex; align-items: baseline; gap: var(--space-2); }
.location-card__price { font-family: var(--font-display); font-size: 2rem; color: var(--ink-900); }
.location-card__price-note { font-size: var(--text-sm); color: var(--text-muted); }
.location-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.location-card--soon { background: var(--surface-sunken); }
.location-card--soon .location-card__figure { background: var(--green-100); }
.location-card--soon img { filter: grayscale(1); opacity: .55; }
.location-card--soon .location-card__body { gap: var(--space-2); }
.location-card--soon .location-card__addr { color: var(--text-muted); opacity: 1; font-family: var(--font-ui); }
.soon-tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--orange-600); color: var(--white);
  font-family: var(--font-core); font-weight: 700; font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-xs);
}
.location-card--soon { border: var(--border-w-default) dashed var(--border-default); box-shadow: none; }
.location-card--soon:hover { box-shadow: none; transform: none; }

/* ---- Register card (Classes page) ---- */
.register-card {
  margin-top: var(--space-6);
  background: var(--surface-card);
  border: var(--border-w-hairline) solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.register-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.register-steps li { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-core); font-size: var(--text-body-size); color: var(--text-body); }
.register-steps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--green-100); color: var(--green-800);
  font-family: var(--font-display); font-size: .95rem;
}
.register-card__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Scoped to this card only — .btn / .btn--primary are shared and untouched.
   "Open Upper Hand Registration" plus icon is wider than a phone-width card, so
   below 480px these two buttons stack full-width and allow the label to wrap. */
@media (max-width: 480px) {
  .register-card__actions { flex-direction: column; }
  .register-card__actions .btn {
    /* .btn is content-box (border/padding sit outside height/width); box-sizing
       is overridden here only, so width:100% doesn't add padding+border on top
       of the container and overflow the card. */
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: var(--control-h-md);
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: normal;
    text-align: center;
  }
}
.register-card__note { margin: var(--space-3) 0 0; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }

/* ---- Quiz ---- */
.quiz { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.quiz__q { font-family: var(--font-core); font-weight: 700; font-size: var(--text-body-size); color: var(--navy-700); margin-bottom: var(--space-3); }
.quiz__opts { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.quiz__opts button {
  min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-pill); cursor: pointer;
  font-family: var(--font-core); font-weight: 600; font-size: var(--text-sm);
  background: var(--white); color: var(--green-800); border: 2px solid var(--border-default);
  transition: background 120ms var(--ease-standard), color 120ms var(--ease-standard), border-color 120ms var(--ease-standard);
}
.quiz__opts button[aria-pressed="true"] { background: var(--green-600); color: var(--white); border-color: var(--green-600); }
.quiz__result {
  margin-top: var(--space-8);
  background: var(--green-100); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); padding: var(--space-6);
  animation: ttOpen 280ms var(--ease-standard) both;
}
.quiz__result[hidden] { display: none; }
.quiz__result .eyebrow-label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--green-700); }
.quiz__result h3 { margin: var(--space-2) 0; font-family: var(--font-display); font-size: var(--text-h3); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--green-800); }
.quiz__result p { margin: 0 0 var(--space-5); font-size: var(--text-body-size); line-height: var(--leading-normal); max-width: 60ch; }
.quiz-note { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--text-muted); }

/* ---- FAQ (native details/summary — keyboard accessible with zero JS) ---- */
/* Mirrors components/marketing/FAQItem.jsx — a hairline rule under each row,
   no card, no radius, no padding gutter. */
.faq-list { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item { border-bottom: var(--border-w-hairline) solid var(--border-subtle); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) 0;
  min-height: var(--tap-min);
  display: flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-core); font-weight: var(--weight-bold);
  font-size: var(--text-h4); color: var(--text-heading);
  text-align: left;
}
.faq-item summary .chev { margin-left: auto; width: 20px; height: 20px; color: var(--green-600); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item p {
  margin: 0;
  padding: 0 0 var(--space-5);
  font-family: var(--font-core);
  font-size: var(--text-body-size);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  max-width: 62ch;
}
.faq-cta { margin-top: var(--space-8); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-6); text-align: center; }
.faq-cta p { margin: 0 0 var(--space-4); }

/* ---- Forms ---- */
.form-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
/* Mirrors components/forms/Input.jsx */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-core); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text-heading); }
.field .hint { font-weight: 400; font-size: var(--text-xs); color: var(--text-muted); }
.field input,
.field select,
.field textarea {
  font-family: var(--font-ui); font-size: var(--text-body-size);
  padding: 0 var(--space-4); height: var(--control-h-md);
  border-radius: var(--radius-md); border: var(--border-w-default) solid var(--border-default);
  color: var(--ink-900); background: var(--white);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
/* Input with a leading glyph (the newsletter email field) */
.field--icon { position: relative; }
.field--icon input { padding-left: 42px; }
.field--icon > svg {
  position: absolute; left: var(--space-4); bottom: 14px;
  width: 16px; height: 16px; color: var(--gray-500); pointer-events: none;
}
.field textarea { height: auto; padding: var(--space-3); resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-600); }
.checkbox-field { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-core); font-size: var(--text-sm); color: var(--text-body); }
.checkbox-field input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-note {
  border: 1px dashed var(--border-default);
  background: var(--surface-wash);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.confirm-box {
  margin-bottom: var(--space-4);
  background: var(--green-100); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); padding: var(--space-5);
  display: flex; align-items: flex-start; gap: var(--space-3);
}
.confirm-box svg { color: var(--green-700); width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.confirm-box p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--green-800); }
.confirm-box h3 { margin: 0 0 6px; font-weight: 700; font-size: var(--text-h4); color: var(--green-800); }
[hidden] { display: none !important; }

/* ---- Required-field marker + note ---- */
.req-mark { color: var(--status-danger); font-weight: var(--weight-bold); }
.field-req-note { margin: 0; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); }

/* ---- Live-region submit feedback (Contact / Homeschool forms) ----
   role="status" + aria-live="polite" is set in the HTML; these rules only
   handle the two visual states once JS adds data-state. */
.form-status {
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-core);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.form-status[data-state="success"] {
  background: var(--status-success-bg);
  color: var(--green-800);
  border: var(--border-w-hairline) solid var(--green-300);
}
.form-status[data-state="error"] {
  background: var(--status-danger-bg);
  color: var(--status-danger);
  border: var(--border-w-hairline) solid var(--red-600);
}
.form-status:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) { border-color: var(--status-danger); }
.btn[aria-busy="true"] { opacity: .7; cursor: wait; }

/* ---- Contact page ---- */
.contact-grid { display: grid; gap: var(--space-10); grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }
.contact-links { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.contact-links a { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-core); font-weight: 600; font-size: var(--text-body-size); text-decoration: none; color: var(--green-700); }
.contact-links svg { width: 20px; height: 20px; }
.contact-locations { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.contact-location {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
}
.contact-location svg { color: var(--green-600); width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }
.contact-location__venue { font-family: var(--font-core); font-weight: 700; font-size: var(--text-h4); color: var(--navy-700); }
.contact-location__addr { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }
.contact-form-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  padding: var(--space-6); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.contact-form-card h2 { margin: 0; font-weight: 700; font-size: var(--text-h3); color: var(--green-800); }

/* ---- Milestones (About) ---- */
.milestones { margin-top: var(--space-8); display: flex; flex-direction: column; gap: 0; }
.milestone { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: flex-start; }
.milestone__rail { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.milestone__dot { width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--green-600); margin-top: 6px; }
.milestone__line { flex: 1; width: 2px; background: var(--green-100); }
.milestone__body { padding-bottom: var(--space-6); }
.milestone__label { font-family: var(--font-display); font-size: var(--text-h4); letter-spacing: var(--tracking-display); color: var(--green-700); }
.milestone__body p { margin: 6px 0 0; font-size: var(--text-body-size); line-height: var(--leading-normal); max-width: 60ch; }

/* ---- Statement block (About: "Hold your pose") ---- */
.statement-block {
  margin: var(--space-9) auto 0;
  max-width: 62ch;
  text-align: center;
  padding: var(--space-6) var(--space-5);
  border-top: var(--border-w-hairline) solid var(--border-subtle);
  border-bottom: var(--border-w-hairline) solid var(--border-subtle);
}
.statement-block p {
  margin: 0;
  font-family: var(--font-core);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--green-800);
}

/* ---- About page: Trapper / Channing photo sections ---- */
.split__figure--channing img {
  object-position: 55% 48%;
  transform: scale(1.85);
  transform-origin: 55% 48%;
}
.badge-row { margin-bottom: var(--space-3); }

/* ---- Resource / article cards ---- */
.resource-grid { margin-top: var(--space-8); display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.resource-card {
  text-decoration: none; background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--green-600); border-radius: var(--radius-card); padding: var(--space-5);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-2);
  transition: box-shadow 200ms var(--ease-standard), transform 200ms var(--ease-standard);
}
.resource-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.resource-card h3 { margin: 0; font-weight: 700; font-size: var(--text-h4); color: var(--navy-700); }
.resource-card p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); }
.resource-card__link { margin-top: var(--space-2); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; color: var(--green-700); }
/* JS adds this once a card's answer is wired to a modal — purely a hint
   that the interaction is "open a popup" rather than "leave the page";
   the href and full navigation behaviour are unchanged either way. */
.resource-card[data-resource-trigger] { cursor: pointer; }

/* ---- Resource popups (Parent Resources) ----
   Native <dialog> + showModal(): the browser handles focus containment,
   Escape-to-close and the top-layer stacking; this file only styles it and
   adds backdrop-click-to-close / scroll-lock / focus-return in JS. */
.resource-modal {
  border: none;
  padding: 0;
  width: calc(100% - 48px);
  max-width: 560px;
  max-height: calc(100% - 64px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--surface-card);
  color: var(--text-body);
}
.resource-modal::backdrop { background: var(--overlay-scrim); }
@media (prefers-reduced-motion: no-preference) {
  .resource-modal { animation: ttOpen 200ms var(--ease-standard) both; }
}
.resource-modal__inner { position: relative; padding: var(--space-6); overflow-y: auto; max-height: calc(90vh - 0px); }
.resource-modal__close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 36px; height: 36px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); border: none;
  background: var(--gray-100); color: var(--text-body); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.resource-modal__close:hover { background: var(--gray-200); }
.resource-modal__close svg { width: 18px; height: 18px; }
.resource-modal h2 {
  margin: 0 var(--space-10) var(--space-4) 0;
  font-family: var(--font-display); font-size: var(--text-h3);
  letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--green-800);
}
.resource-modal__section { margin-bottom: var(--space-4); }
.resource-modal__section:last-of-type { margin-bottom: 0; }
.resource-modal__section h3 { margin: 0 0 4px; font-weight: 700; font-size: var(--text-body-size); color: var(--navy-700); }
.resource-modal__section p { margin: 0 0 var(--space-2); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-body); }
.resource-modal__section p:last-child { margin-bottom: 0; }
.resource-modal__link {
  margin-top: var(--space-5); display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; color: var(--green-700); text-decoration: none;
}
.resource-modal__link:hover { color: var(--green-800); }
.resource-modal__link svg { width: 15px; height: 15px; }
body.modal-open { overflow: hidden; }

.article-layout { display: grid; gap: var(--space-8); grid-template-columns: minmax(0,2fr) minmax(220px,1fr); align-items: start; }
.article-back { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; color: var(--green-700); text-decoration: none; }
.article-layout h1 { margin: var(--space-4) 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--green-800); }
.article-layout > div > p.lead { margin: 0 0 var(--space-8); font-size: var(--text-lead); line-height: var(--leading-normal); max-width: 62ch; }
.article-section { margin-bottom: var(--space-8); scroll-margin-top: 100px; }
.article-section h2 { margin: 0 0 var(--space-3); font-weight: 700; font-size: var(--text-h3); color: var(--navy-700); }
.article-section p { margin: 0 0 var(--space-3); font-size: var(--text-body-size); line-height: var(--leading-relaxed); max-width: 62ch; }
.article-next { background: var(--green-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-6); }
.article-next .eyebrow-label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--green-700); }
.article-next p { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-body-size); line-height: var(--leading-normal); color: var(--green-800); max-width: 56ch; }
.article-aside { position: sticky; top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.aside-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-5); }
.aside-card__title { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); }
.aside-card a { display: block; font-family: var(--font-core); font-size: var(--text-sm); color: var(--green-700); text-decoration: none; padding: 4px 0; }
@media (max-width: 760px) { .article-layout { grid-template-columns: 1fr; } .article-aside { position: static; } }

/* ---- Videos ---- */
.video-grid { margin-top: var(--space-8); display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.video-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.video-card__thumb {
  position: relative; aspect-ratio: 16/9; background: var(--green-100);
  display: flex; align-items: center; justify-content: center; color: var(--green-700);
}
.video-card__thumb svg { width: 40px; height: 40px; opacity: .6; }
.video-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.video-card h3 { margin: 0; font-weight: 700; font-size: var(--text-h4); color: var(--navy-700); }
.video-card p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); }
.video-card__soon { margin-top: auto; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); }

/* ---- Plain photo row (Summer camps) ---- */
.photo-row {
  margin-top: var(--space-8);
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.photo-row img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}

/* ---- Gallery ---- */
.gallery-grid { margin-top: var(--space-8); display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.gallery-grid figure { margin: 0; aspect-ratio: 4/3; border-radius: var(--radius-card); overflow: hidden; position: relative; background: var(--surface-wash); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; }
/* The design shows the gallery as clean frames with no caption bar. The text is
   kept in the DOM for screen readers; delete this rule to show it again. */
.gallery-grid figcaption {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Newsletter ---- */
.newsletter-hero { background: var(--white); }
.newsletter-banner {
  width: 100%; height: auto;
  border-radius: var(--radius-lg);
  border: var(--border-w-hairline) solid var(--border-subtle);
}
.newsletter-split { margin-top: var(--space-10); display: grid; gap: var(--space-10); grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.newsletter-split h1 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display); font-size: var(--text-h1);
  letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--green-800);
}
.newsletter-split .lead { max-width: 50ch; }
.newsletter-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.newsletter-form .field { flex: 1 1 220px; }
.newsletter-note { margin-top: var(--space-3); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); }

/* Simple standalone email-capture form (camps notify) */
.notify-form { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; align-items: center; }
.notify-form input[type="email"] {
  height: var(--control-h-md); min-width: 240px; padding: 0 var(--space-4);
  border-radius: var(--radius-md); border: 2px solid var(--white);
  font-family: var(--font-core); font-size: var(--text-body-size); color: var(--ink-900);
}

/* ---- Legal pages ---- */
.legal-body { margin-top: var(--space-6); }
.legal-body p { font-size: var(--text-body-size); line-height: var(--leading-relaxed); max-width: 68ch; }
.legal-updated { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-8); }

/* ---- 404 ---- */
.error-page { text-align: center; padding-top: calc(var(--section-y) + 20px); }
.error-page .error-code { font-family: var(--font-display); font-size: clamp(4rem,12vw,7rem); color: var(--green-700); line-height: 1; }
.error-page h1 { font-family: var(--font-display); font-size: var(--text-h2); text-transform: uppercase; color: var(--green-800); }
.error-page p { font-size: var(--text-lead); max-width: 52ch; margin: var(--space-3) auto var(--space-6); }

/* ---- After school ---- */
.fact-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
.fact-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); }
.fact-tile svg { color: var(--text-body); width: 26px; height: 26px; }
.fact-tile__value { font-family: var(--font-core); font-weight: 700; font-size: var(--text-h4); color: var(--navy-700); }
.fact-tile__label { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.qr-panel {
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  padding: var(--space-6); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center;
}
.qr-code { width: 180px; height: auto; }
.qr-placeholder {
  width: 180px; height: 180px; border: 2px dashed var(--border-default); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
  font-family: var(--font-ui); font-size: var(--text-xs); text-align: center; padding: var(--space-3);
}

/* ---- Camps ---- */
.camp-card-grid { margin-top: var(--space-8); display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.info-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-top: 4px solid var(--lane-start); border-radius: var(--radius-card); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.info-card[data-accent="smaller"] { border-top-color: var(--lane-smaller); }
.info-card[data-accent="value"] { border-top-color: var(--lane-value); }
.info-card h3 { margin: 0 0 var(--space-2); font-weight: 700; font-size: var(--text-h4); color: var(--navy-700); }
.info-card p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); }

/* ---- Homeschool blocks / after-includes ---- */
.block-grid { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); }
.block-grid h2 { margin: 0 0 var(--space-3); font-weight: 700; font-size: var(--text-h4); color: var(--navy-700); }

/* ---- Private events banner ---- */
.banner-card {
  margin-top: var(--space-8); background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); padding: var(--space-6);
  display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); align-items: center;
}
.banner-card h3 { margin: 0 0 var(--space-2); font-weight: 700; font-size: var(--text-h4); color: var(--navy-700); }
.banner-card p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); }

/* ---- Footer ---- */
.site-footer { background: var(--surface-ink); color: var(--white); margin-top: auto; }
.footer-top { padding: var(--section-y-tight) var(--gutter); display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); max-width: calc(var(--container-max) + 2 * var(--gutter)); margin: 0 auto; }
.footer-brand p { margin: var(--space-4) 0 0; font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--gray-300); max-width: 34ch; }
.footer-brand .brand__logo { height: 64px; width: auto; }
.footer-col-title { font-family: var(--font-core); font-weight: 700; font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gray-400); margin-bottom: var(--space-3); }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-family: var(--font-core); font-size: var(--text-sm); color: var(--white); text-decoration: none; }
.footer-links a:hover { color: var(--green-200); }
.footer-register p { margin: 0 0 var(--space-4); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--gray-300); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); }
.footer-bottom__inner {
  max-width: calc(var(--container-max) + 2 * var(--gutter)); margin: 0 auto; padding: var(--space-5) var(--gutter);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  font-family: var(--font-ui); font-size: var(--text-xs); color: var(--gray-400);
}

/* ---- Responsive ---- */
/* DELIBERATE DEVIATION FROM THE DESIGN.
   The design system pins these grids to `repeat(2, minmax(0,1fr))` at every
   width, which collapses to one-word-per-line on a phone. Production keeps a
   single-column fallback instead. Remove this block for literal parity. */
@media (max-width: 900px) {
  .pack-grid, .reason-grid, .program-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pack-card__body { flex-direction: column; }
  .pack-card__buy { width: 100%; align-items: flex-start; }
}
/* The design keeps the hero's 110/96 padding and the 40px split gap at every
   width — no narrow-screen overrides. */

/* Header logo carries the full brand name. */
.site-header .brand__logo { height: 72px; width: auto; }
@media (max-width: 600px) { .site-header .brand__logo { height: 64px; } }