/* ==========================================================================
   Open Play PPC - site styles
   Brand palette (Sherwin-Williams): Dynamic Blue #0192C6, Lemon Twist #FED95D, Grizzle Gray #636562, Snowbound #EDEAE5.
   (Outfit stands in until BC Civitas is licensed). Aesthetic: Electric
   Athleticism, Cobalt & Volt, Modern Court-Club, Pill-Shaped Geometry.
   Home page layout follows a Pomelli reference capture (see HOMEPAGE.md).
   Mobile first. Breakpoints: 640px (two columns), 1024px (full layout).
   Tokens are CSS custom properties; components use BEM naming.
   ========================================================================== */
/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Official club colours (Sherwin-Williams, hex from the SW colour API) */
  --sw-dynamic-blue: #0192c6;   /* SW 6958, primary */
  --sw-lemon-twist: #fed95d;    /* SW 6909, secondary accent */
  --sw-grizzle-gray: #636562;   /* SW 7068, dark grounding surfaces and text */
  --sw-snowbound: #edeae5;      /* SW 7004, light backgrounds */

  /* Derived shade. Dynamic Blue itself reaches only 3.54:1 under white text and 2.95:1 as text
     on Snowbound, so actions, links, and small text use this same-hue deeper step (hue 196,
     lightness 30%): 5.57:1 under white, 4.64:1 on Snowbound. Set it to var(--sw-dynamic-blue)
     to revert to the official hex everywhere. */
  --color-blue-deep: #017098;

  /* Semantic tokens */
  --color-cobalt: var(--color-blue-deep);        /* primary actions, active states, text-bearing blue surfaces */
  --color-cobalt-bright: var(--sw-dynamic-blue); /* decorative blue: icon discs, display numbers, rules, bands */
  --color-cobalt-hover: #015a7a;                 /* blue-deep, one step darker, for hover */
  --color-cobalt-text: #015f80;                  /* blue-deep for text: 5.9:1 on Snowbound, 5.3:1 on the alt surface */
  --color-volt: var(--sw-lemon-twist);           /* accent fills and large display words; never small text */
  --color-white: #ffffff;                        /* text on dark surfaces and card faces (neutral, not a brand colour) */

  --color-ink: var(--sw-grizzle-gray);           /* header, footer, dark sections, body text */
  --color-bg: var(--sw-snowbound);
  --color-surface: #ffffff;                      /* cards lift off Snowbound */
  --color-surface-alt: #e4e2dd;                  /* Snowbound with 8% Grizzle: alternating sections */
  --color-border: #c6c5c1;                       /* Snowbound with 35% Grizzle */
  --color-input-border: var(--sw-grizzle-gray);  /* 4.9:1 on Snowbound, 5.9:1 on white */

  --color-text: var(--sw-grizzle-gray);          /* 4.9:1 on Snowbound, 5.9:1 on white */
  --color-text-muted: var(--sw-grizzle-gray);    /* no lighter grey passes AA on Snowbound; weight carries hierarchy */
  --color-text-on-dark: #ffffff;                 /* 5.9:1 on Grizzle */
  --color-muted-on-dark: var(--sw-snowbound);    /* 4.9:1 on Grizzle */
  --color-error: #a3271c;                        /* functional red, not a brand colour: 5.1:1 on Snowbound */
  --color-error-on-dark: #ffd3cc;                /* functional red tint: 4.7:1 on Grizzle */

  /* Typography */
  --font-brand: "BC Civitas", "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-score: "Barlow Condensed", "Arial Narrow", Impact, var(--font-brand);

  /* Type scale */
  --fs-display-xl: 76px; --lh-display-xl: 0.95;
  --fs-display-lg: 52px;
  --fs-headline-md: 22px; --lh-headline-md: 1.2;
  --fs-headline-sm: 19px;
  --fs-body-lg: 18px; --lh-body-lg: 1.6;
  --fs-body-md: 16px; --lh-body-md: 1.6;
  --fs-body-sm: 14px; --lh-body-sm: 1.45;
  --fs-label: 15px;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --margin: 1.25rem;
  --container-max: 1200px;
  --header-h: 72px;

  /* Shape: pill geometry for actions and chips, generous radius for cards */
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-input: 12px;
  --skew: -12deg;
  --badge-tilt: -3deg;

  /* Edge: hard, zero-blur offset shadows */
  --shadow-hard: 6px 6px 0 0 var(--color-ink);
  --shadow-hard-cobalt: 6px 6px 0 0 var(--color-cobalt);

  /* Motion */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layers */
  --z-band: 2;
  --z-header: 100;
  --z-skip: 1000;

  /* Focus ring colour adapts per surface (ink on light, volt on cobalt/ink) */
  --focus-ring: var(--color-ink);

  color-scheme: light;
}
@media (min-width: 768px) {
  :root { --margin: 2rem; --header-h: 80px; }
}
@media (min-width: 1200px) {
  :root { --margin: 3rem; }
}
/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-md));
}
/* Smooth scrolling only for anchor clicks. When focus moves (keyboard, programmatic focus on an
   invalid field) jump instantly so the focused control is not a moving target. */
html:focus-within { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-brand);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* belt-and-braces against the rotated tagline band at 320px */
}
img,
svg { display: block; max-width: 100%; }
img { height: auto; }
h1,
h2,
h3,
p,
ul,
dl,
dd,
fieldset { margin: 0; }
ul { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
address { font-style: normal; }
a { color: inherit; }
button { font: inherit; color: inherit; }
/* Headline voice: brand geometric sans, heavy, uppercase, tight */
h1,
h2,
h3 {
  font-family: var(--font-brand);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
/* Visually hidden but available to assistive tech */
.sr-only {
  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;
}
/* Focus: 3px zero-blur ring, colour set per surface via --focus-ring (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
::selection { background: var(--color-volt); color: var(--color-ink); }
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.icon {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
/* --------------------------------------------------------------------------
   3. Skip link
   -------------------------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: var(--space-sm); left: var(--space-sm);
  z-index: var(--z-skip);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink);
  color: var(--color-white);
  box-shadow: inset 0 0 0 2px var(--color-volt);
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
/* --------------------------------------------------------------------------
   4. Buttons: pill geometry, italic condensed label, hard offset shadow on hover
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 30px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: var(--fs-headline-sm);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.btn .icon { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }
/* Edge: the pill "lifts" off a hard ink shadow */
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 var(--color-ink); }
.btn:active { transform: translate(0, 0); box-shadow: 0 0 0 0 var(--color-ink); }
.btn--primary { background: var(--color-cobalt); color: var(--color-white); }
.btn--primary:hover { background: var(--color-cobalt-hover); }
/* Volt is reserved for the hero CTA on cobalt, where it is the loudest action on the page */
.btn--volt { background: var(--color-volt); color: var(--color-ink); }
.btn--ink { background: var(--color-ink); color: var(--color-white); }
.btn--ink:hover { box-shadow: 4px 4px 0 0 var(--color-cobalt); }

.btn--outline {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.btn--outline:hover { background: var(--color-white); color: var(--color-ink); }
.btn--sm { min-height: 44px; padding: 10px 22px; font-size: 16px; }
.btn--block { width: 100%; }
.btn[disabled],
.btn[aria-busy="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* --------------------------------------------------------------------------
   5. Badges: tilted pills
   -------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(var(--badge-tilt));
}
.badge--volt { background: var(--color-ink); color: var(--color-white); box-shadow: inset 0 0 0 2px var(--color-volt); }
.badge--static { transform: none; }
.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.eyebrow__text {
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* --------------------------------------------------------------------------
   6. Header / navigation (ink bar behind the volt and white logo)
   -------------------------------------------------------------------------- */
.site-header {
  --focus-ring: var(--color-volt);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(99, 101, 98, 0.97);
  color: var(--color-text-on-dark);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-h);
}
/* Wordmark modelled on the logo: volt rounded caps over a tracked sub-line */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-volt);
}
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px; height: 48px;
  padding: 13px 12px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--color-white);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile: nav panel drops below the bar, toggled by [data-open] */
.site-nav {
  position: absolute;
  top: 100%; left: 0; right: 0;
  display: none;
  background: var(--color-ink);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding: var(--space-md) var(--margin) var(--space-lg);
}
.site-nav[data-open] { display: block; }
.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.site-nav__link {
  display: block;
  min-height: 44px;
  padding: 12px 0;
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-muted-on-dark);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover { color: var(--color-white); }
.site-nav__cta { margin-top: var(--space-sm); }
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static;
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
  
  }
  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
  
  }
  .site-nav__link { font-size: 16px; }
  .site-nav__cta { margin: 0 0 0 var(--space-sm); }
}
@media (min-width: 1024px) {
  .site-nav__list { gap: var(--space-xl); }
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
#club { padding-top: calc(var(--space-2xl) + 34px); }
@media (min-width: 1024px) {
  #club { padding-top: calc(var(--space-2xl) * 1.5 + 34px); }
}
/* --------------------------------------------------------------------------
   7. Checklist
   -------------------------------------------------------------------------- */
.checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: 12px;
  font-weight: 500;
}
.checklist li + li { border-top: 1.5px solid var(--color-border); }
.checklist .icon {
  width: 26px; height: 26px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-cobalt-bright);
  color: var(--color-white);
  stroke-width: 2.5;
}
/* --------------------------------------------------------------------------
   8. Sign-up form
   Pattern: top-aligned labels on a two-column field grid. Every control shares one height
   (52px, the button height) and one radius (--radius-input). Each field reserves a single
   message line so hints and errors never move the rows below them.
   -------------------------------------------------------------------------- */
.form {
  --focus-ring: var(--color-cobalt);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  padding: var(--home-card-pad);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--home-radius);
}
.form__field,
.form__fieldset {
  display: grid;
  gap: var(--space-sm);
  align-content: start; /* rows never stretch, so inputs sit on a shared line */
  min-width: 0;
}
.form__label {
  padding: 0;
  font-weight: 600;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-text);
}
.form__req { color: var(--color-cobalt-text); }
.form__optional { font-weight: 400; color: var(--color-text-muted); }

.form__input {
  width: 100%;
  height: 52px;
  padding: 0 var(--space-md);
  background: var(--color-bg);
  color: var(--color-text);
  border: 1.5px solid var(--color-input-border);
  border-radius: var(--radius-input);
  font-family: var(--font-brand);
  font-size: var(--fs-body-md); /* 16px prevents iOS zoom-on-focus */
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.form__input::placeholder { color: var(--color-text-muted); }
.form__input:hover { border-color: var(--color-ink); }
.form__input:focus-visible { border-color: var(--color-cobalt); background: var(--color-surface); outline-offset: 2px; }
.form__input[aria-invalid="true"] { border-color: var(--color-error); }

/* One message line per field: the hint shows until an error replaces it */
.form__hint,
.form__error {
  min-height: var(--lh-body-sm);
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}
.form__hint { color: var(--color-text-muted); }
.form__error { display: block; font-weight: 600; color: var(--color-error); }
.form__field:has(.form__error:not(:empty)) .form__hint { display: none; }
.form__error:not(:empty)::before { content: "\26A0  "; } /* warning glyph so error is not color-only */

/* Sport choice: three tiles with the same height, radius, and border as the inputs */
.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}
.segmented__option {
  position: relative;
  display: block;
  cursor: pointer;
}
.segmented__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.segmented__option span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 var(--space-sm);
  border: 1.5px solid var(--color-input-border);
  border-radius: var(--radius-input);
  background: var(--color-bg);
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.segmented__option:hover span { border-color: var(--color-ink); }
.segmented__option input:checked + span {
  background: var(--color-cobalt);
  border-color: var(--color-cobalt);
  color: var(--color-white);
}
.segmented__option input:focus-visible + span {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 2px;
}
.segmented__option input[aria-invalid="true"] + span { border-color: var(--color-error); }

/* Honeypot: off-screen, not display:none, so naive bots still fill it */
.form__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The conversion point: full width, separated from the fields by a larger step */
.form .btn--block { margin-top: var(--space-md); }
.form__fine {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-text-muted);
  text-align: center;
}

.form__status { grid-column: 1 / -1; }
.form__status:not(.sr-only) {
  margin-bottom: var(--space-sm);
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-surface-alt);
  font-weight: 500;
}
.form__status--success { border-color: var(--color-cobalt); }
.form__status--error { border-color: var(--color-error); color: var(--color-error); }

/* Phones: the label scale steps down to --fs-label so "Pickleball" fits its tile; very narrow screens stack the tiles */
@media (max-width: 479px) {
  .segmented__option span { font-size: var(--fs-label); }
}
@media (max-width: 359px) {
  .segmented { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 640px) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Row 1: name + email. Row 2: phone (its hint needs the full width). Then sport and submit. */
  .form__field:has(#phone),
  .form__fieldset,
  .form .btn--block,
  .form__fine { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   9. Footer: ink surface, link columns, labelled social links
   -------------------------------------------------------------------------- */
.site-footer {
  --focus-ring: var(--color-volt);
  background: var(--color-ink);
  color: var(--color-text-on-dark);
  border-top: 6px solid var(--color-volt); /* clean break from the header-dark tone and light sections */
  padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem) var(--space-lg);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* phones: two link columns side by side */
  gap: var(--space-xl) var(--space-lg);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-bottom: 1px solid var(--home-ink-border);
}
.site-footer .brand__logo { height: 72px; }
.site-footer__tagline { margin-top: var(--space-md); max-width: 30ch; color: var(--color-muted-on-dark); }
.site-footer__heading {
  margin-bottom: 0.75rem;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-on-dark);
}
.site-footer__brand,
.site-footer__col--social { grid-column: 1 / -1; }
.site-footer__list { display: grid; }
.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  line-height: 1.4;
  text-decoration: none;
  color: var(--color-muted-on-dark);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer__link:hover { color: var(--color-white); text-decoration: underline; text-underline-offset: 4px; }
.site-footer__col { min-width: 0; }
.site-footer__link { overflow-wrap: anywhere; } /* long email address must wrap at 320px */

/* Updates sign-up: pill input + volt pill button, as in the reference footer */
.footer-signup { margin-top: var(--space-lg); max-width: 26rem; }
.footer-signup__label { display: block; margin-bottom: 0.75rem; font-size: 1.0625rem; }
.footer-signup__row { display: flex; gap: 0.6rem; }
.footer-signup__input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 1.25rem;
  border: 1.5px solid var(--color-input-border);
  border-radius: var(--radius-pill);
  background: var(--home-ink-card);
  color: var(--color-text-on-dark);
  font: inherit;
  font-size: var(--fs-body-md);
}
.footer-signup__input::placeholder { color: var(--color-muted-on-dark); }
.footer-signup__input:hover { border-color: var(--color-muted-on-dark); }
.footer-signup__input:focus-visible { border-color: var(--color-volt); outline-offset: 2px; }
.footer-signup__input[aria-invalid="true"] { border-color: var(--color-error-on-dark); border-width: 2px; }
.footer-signup .btn--sm { min-height: 52px; padding-inline: 1.6rem; }
.footer-signup .form__error { margin-top: 0.4rem; color: var(--color-error-on-dark); }
.footer-signup__note { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--color-muted-on-dark); }

/* Social links: icon in an outlined circle, label beside it */
.social { display: grid; grid-template-columns: repeat(2, max-content); gap: 0.5rem 2rem; }
.social__link {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 48px;
  text-decoration: none;
  color: var(--color-muted-on-dark);
  transition: color var(--dur-fast) var(--ease-out);
}
.social__icon-wrap {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--color-input-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-on-dark);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.social__icon { width: 18px; height: 18px; fill: currentColor; }
.social__link:hover { color: var(--color-text-on-dark); }
.social__link:hover .social__icon-wrap { background: var(--color-volt); border-color: var(--color-volt); color: var(--color-ink); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--color-muted-on-dark);
}
.site-footer__credit::before { content: "\00B7"; margin-inline: 0.35rem; }
.site-footer__heart { display: inline-block; width: 13px; height: 13px; vertical-align: -1px; fill: var(--color-volt); }
/* Inline credit link: 44px tall hit area without changing the line box */
.site-footer__bottom a { display: inline-block; padding-block: 13px; margin-block: -13px; text-underline-offset: 3px; }
.site-footer__bottom a { color: var(--color-text-on-dark); }
.site-footer__bottom a:hover { color: var(--color-white); }

@media (max-width: 359px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .social { grid-template-columns: 1fr; }
}
@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer__col--social { grid-column: auto; }
  .social { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: auto; padding-right: var(--space-xl); }
}

/* --------------------------------------------------------------------------
   10. Motion: reveal on scroll (opacity/transform only; disabled under reduced motion)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
  
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
*::before,
*::after {
    animation-duration: 0.01ms !important; /* justified: global kill switch for motion-sensitive users */
    transition-duration: 0.01ms !important;
  
  }
  .btn:hover { transform: none; }
}

/* ==========================================================================
   Home page sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   11. Self-hosted fonts (OFL, see assets/fonts/LICENSE.md)
   -------------------------------------------------------------------------- */
/* Outfit: static 400 / 600 / 800 instances cut from the variable font. Static files render the
   same weight in every engine; other weights (500, 700) resolve to the nearest face. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/outfit-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/outfit-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/outfit-latin-800.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/barlow-condensed-latin-700-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/barlow-condensed-latin-800-italic.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   12. Home page tokens
   -------------------------------------------------------------------------- */
:root {
  --home-section-y: clamp(4rem, 3rem + 5vw, 7rem);
  --home-gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  --home-card-pad: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --home-radius: 20px;
  --home-radius-inner: 14px;
  --home-ink-card: #585a57;   /* Grizzle, one step darker, for cards on Grizzle */
  --home-ink-border: rgba(255, 255, 255, 0.28);
}

/* --------------------------------------------------------------------------
   13. Component sizing
   Touch targets: every interactive element reaches 48 by 48 px.
   -------------------------------------------------------------------------- */
.skip-link { display: inline-flex; align-items: center; min-height: 48px; }
.btn--sm { min-height: 48px; }
.site-nav__link { display: flex; align-items: center; min-height: 48px; padding-block: 0; }
.segmented__option span { min-height: 48px; }

/* Official logo in the shared brand link */
.brand { min-height: 48px; gap: 12px; }
.brand picture { display: block; flex-shrink: 0; }
/* The logo artwork already includes "Pickleball & Padel Club", so no text line sits beside it */
.brand__logo { display: block; width: auto; height: 54px; }


/* --------------------------------------------------------------------------
   14. Type
   -------------------------------------------------------------------------- */
.home-h1 {
  font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.home-h1 .hl { color: var(--color-volt); } /* 3.9:1 on cobalt, display size only */

.home-h2 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.home-h3 {
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.home-lede {
  max-width: 52ch;
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
}
.home-sub,
.home-body {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.65;
  color: var(--color-text-muted);
}
.home-sub { margin-top: 1rem; }

/* Section kicker: outlined pill, as in the reference, in the brand's condensed italic */
.home-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.45rem 1.1rem;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cobalt-text);
}
.home-kicker--volt { color: var(--color-white); }
.home-kicker--fill { background: var(--color-ink); border-color: var(--color-volt); color: var(--color-white); }

/* Text link with arrow, 48px tall hit area */
.home-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  margin-top: auto;
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  color: var(--color-cobalt-text);
}
.home-link .icon { transition: transform var(--dur-fast) var(--ease-out); }
.home-link:hover .icon { transform: translateX(3px); }
.home-link--volt { color: var(--color-white); }

/* Shared image treatment: full-bleed inside its frame, fixed ratio, no layout shift */
.home-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--home-radius-inner);
}

.home-tag {
  align-self: flex-start;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-white);
  box-shadow: inset 0 0 0 1.5px var(--color-volt);
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-tag--ink { background: var(--color-white); color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-volt); }

/* --------------------------------------------------------------------------
   15. Sections
   -------------------------------------------------------------------------- */
.home-section { padding-block: var(--home-section-y); background: var(--color-bg); }
.home-section--alt { background: var(--color-surface-alt); }
.home-section--ink {
  --focus-ring: var(--color-volt);
  background: var(--color-ink);
  color: var(--color-white);
}
.home-section--ink .home-sub { color: var(--color-muted-on-dark); }

.home-head {
  max-width: 46rem;
  margin: 0 auto clamp(2.5rem, 2rem + 2vw, 3.5rem);
  text-align: center;
}

/* --------------------------------------------------------------------------
   16. Hero
   -------------------------------------------------------------------------- */
.home-hero {
  --focus-ring: var(--color-volt);
  /* Overlay strength. Text sits on the left, so the left side is darkest. Tuned so white and volt
     text clear WCAG AA against the brightest pixels of both photos (see LAUNCH-CHECKLIST.md). */
  --hero-overlay-text: 0.95;
  --hero-overlay-far: 0.7;
  --hero-overlay-bottom: 0.9;
  --hero-slide-cycle: 12s;   /* two photos, 6s each */
  --hero-slide-fade: 1.4s;
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
  background: var(--color-ink); /* fallback behind the photos */
  color: var(--color-white);
}
.home-hero__grid { position: relative; z-index: 2; }

/* Background slideshow */
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg__layer { position: absolute; inset: 0; display: block; }
.hero-bg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: opacity, transform;
}
.hero-bg__layer--a .hero-bg__img { object-position: 50% 60%; } /* lobby render: keep the desk and wordmark */
.hero-bg__layer--b .hero-bg__img { object-position: 50% 55%; } /* outdoor courts render: courts, not just trees */
.hero-bg__layer--b { opacity: 0; }

/* Crossfade (opacity) + gentle Ken Burns (transform). Each layer is visible 6s, fade 1.4s. */
@keyframes hero-fade-a {
  0%, 44%   { opacity: 1; }
  56%, 94%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes hero-fade-b {
  0%, 44%   { opacity: 0; }
  56%, 94%  { opacity: 1; }
  100%      { opacity: 0; }
}
@keyframes hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}
.hero-bg.is-ready .hero-bg__layer--a { animation: hero-fade-a var(--hero-slide-cycle) ease-in-out infinite; }
.hero-bg.is-ready .hero-bg__layer--b { animation: hero-fade-b var(--hero-slide-cycle) ease-in-out infinite; }
.hero-bg.is-ready .hero-bg__img { animation: hero-zoom var(--hero-slide-cycle) ease-in-out infinite alternate; }
.hero-bg.is-paused .hero-bg__layer,
.hero-bg.is-paused .hero-bg__img { animation-play-state: paused; }

/* Overlay: dark on the text side, lighter on the right, plus a bottom tint for the chips and buttons */
.hero-bg__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(99, 101, 98, 0) 55%, rgba(99, 101, 98, var(--hero-overlay-bottom)) 100%),
    linear-gradient(90deg, rgba(99, 101, 98, var(--hero-overlay-text)) 0%, rgba(99, 101, 98, var(--hero-overlay-text)) 58%, rgba(99, 101, 98, var(--hero-overlay-far)) 100%);
}
/* Phones: the copy spans the full width, so the overlay is even across it */
@media (max-width: 767px) {
  .hero-bg__overlay {
    background: linear-gradient(180deg, rgba(99, 101, 98, var(--hero-overlay-text)) 0%, rgba(99, 101, 98, 0.96) 100%);
  }
}

/* Pause / play: WCAG 2.2.2 control for auto-advancing content, kept quiet in the corner */
.hero-bg__toggle {
  position: absolute;
  right: var(--margin);
  bottom: 1rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-pill);
  background: rgba(99, 101, 98, 0.9);
  color: var(--color-white);
  cursor: pointer;
}
.hero-bg__toggle .icon { width: 18px; height: 18px; }
.hero-bg__toggle:hover { background: var(--sw-grizzle-gray); }

@media (prefers-reduced-motion: reduce) {
  .hero-bg .hero-bg__layer,
  .hero-bg .hero-bg__img { animation: none; }
  .hero-bg__layer--b { display: none; } /* static first photo only */
  .hero-bg__toggle { display: none; }
}
.home-hero__grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: center;
}
.home-hero .hero__actions { margin-top: 2rem; }

.home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}
.home-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.72); /* 3.44:1 on cobalt (was 0.6: 2.86:1) */
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
}
.home-chip .icon { width: 16px; height: 16px; color: var(--color-volt); fill: currentColor; stroke: none; }

/* Media card: ink frame, inset image, caption bar (reference treatment) */
.home-hero__media {
  margin: 0;
  padding: clamp(0.6rem, 0.4rem + 0.6vw, 0.9rem);
  background: var(--color-ink);
  border-radius: calc(var(--home-radius) + 6px);
}
.home-hero__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--home-radius-inner);
  background: var(--home-ink-card);
}
.home-hero__img,
.home-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-hero__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.home-hero__video.is-playing { opacity: 1; }
.home-video-toggle {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-pill);
  background: rgba(99, 101, 98, 0.9);
  color: var(--color-white);
  cursor: pointer;
}
.home-video-toggle[hidden] { display: none; }
.icon--fill { fill: currentColor; stroke: none; }
.home-hero__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.9rem 0.4rem 0.3rem;
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Hero is a single column: copy, email capture, one CTA */
.home-hero__copy { max-width: 46rem; }

/* Why Open Play: video card beside the club statement */
.why { background: var(--color-bg); }
.why__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: center;
}
.why__media { max-width: 60rem; width: 100%; margin: 0 auto; }
.why__copy > * + * { margin-top: 1.25rem; }
.why__copy .home-kicker { margin-bottom: 0; }
.why__em { font-style: normal; color: var(--color-cobalt-text); }
/* Three concise pillars use the existing heading and body styles. */
.why .home-duo { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.why__pillars { display: grid; gap: 1.25rem; }
.why__pillars > div { padding-left: 1rem; border-left: 3px solid var(--color-cobalt-bright); }
.why__pillars dd { margin: 0.5rem 0 0; color: var(--color-text-muted); line-height: 1.6; }
.why__video { display: block; width: 100%; height: 100%; object-fit: contain; color: var(--color-white); }
.why__media .home-hero__frame { aspect-ratio: 16 / 9; }
@media (min-width: 1024px) {
  .why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .why__media { max-width: none; }
}

.home-memberships__offer {
  max-width: 56rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1.5px solid var(--color-border);
  border-radius: var(--home-radius);
  background: var(--color-surface);
  text-align: center;
}
.home-memberships__price { display: block; margin-top: 0.5rem; color: var(--color-cobalt-text); }
.home-memberships__offer .home-sub { max-width: 52ch; margin-inline: auto; }
.home-memberships__offer .btn { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   17. Memberships: numbered value cards + captioned photo cards
   -------------------------------------------------------------------------- */
.home-values {
  display: grid;
  gap: var(--home-gap);
  margin: 0;
  padding: 0;
}
.home-value {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--home-card-pad);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--home-radius);
  color: var(--color-text-muted);
}
.home-value .home-h3 { color: var(--color-text); }
.home-num {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-cobalt);
  color: var(--color-white); /* 5.57:1 on blue-deep */
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
}
.home-value--price {
  background: var(--color-cobalt);
  border-color: var(--color-cobalt);
  color: var(--color-white);
}
.home-value--price .home-h3 { color: var(--color-white); }
.home-value--price .home-num { background: var(--color-volt); color: var(--color-ink); }
.home-value--price .home-link { color: var(--color-white); }
.home-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}
.home-price__from,
.home-price__unit {
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-price__value {
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 60px;
  line-height: 0.9;
  color: var(--color-volt);
}

.home-duo {
  display: grid;
  gap: var(--home-gap);
  margin-top: var(--home-gap);
}
.home-photo-card {
  padding: 0.75rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--home-radius);
}
.home-photo-card__body { padding: 1rem 0.5rem 0.5rem; }
.home-photo-card__body p { margin-top: 0.35rem; color: var(--color-text-muted); }

@media (min-width: 640px) {
  .home-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .home-values { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   18. Ways to Play: product cards on ink
   -------------------------------------------------------------------------- */
.home-products {
  display: grid;
  gap: var(--home-gap);
}
.home-product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--home-ink-card);
  border: 1.5px solid var(--home-ink-border);
  border-radius: var(--home-radius);
}
.home-product .home-img { border-radius: 0; }
.home-product__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem var(--home-card-pad) var(--home-card-pad);
}
.home-product__body p { color: var(--color-muted-on-dark); }

@media (min-width: 640px) {
  .home-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-product:last-child { grid-column: 1 / -1; } /* five cards: the odd one spans */
  .home-product:last-child .home-img { aspect-ratio: 21 / 9; }
}
/* Reference shows 3 + 2 with an empty slot; the second row widens to fill it */
@media (min-width: 1024px) {
  .home-products { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .home-product { grid-column: span 2; }
  .home-product--wide,
  .home-product:last-child { grid-column: span 3; }
  .home-product--wide .home-img { aspect-ratio: 21 / 9; }
}

/* --------------------------------------------------------------------------
   19. Club: bento of amenities
   -------------------------------------------------------------------------- */
.home-bento {
  display: grid;
  gap: var(--home-gap);
}
.home-amenity {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--home-radius);
}
.home-amenity__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 0.5rem 0.4rem;
}
.home-amenity--feature {
  background: var(--color-cobalt);
  border-color: var(--color-cobalt);
  color: var(--color-white);
}
.home-amenity--feature .home-amenity__body { padding: 1.25rem 0.75rem 0.75rem; }
.home-amenity--feature p { max-width: 60ch; font-size: 1.0625rem; line-height: 1.6; }

.home-also {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: var(--home-gap);
  padding: 1.1rem var(--home-card-pad);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--home-radius);
}
.home-also__title {
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--color-cobalt-text);
}
.home-also__list { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.home-also__list li { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.home-also__list .icon { width: 24px; height: 24px; color: var(--color-cobalt-text); }

@media (min-width: 640px) {
  .home-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-amenity--feature { grid-column: 1 / -1; }
  .home-amenity:last-child { grid-column: 1 / -1; }
  .home-amenity:last-child .home-img { aspect-ratio: 21 / 9; }
}
@media (min-width: 1024px) {
  .home-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-amenity--feature { grid-column: span 2; }
  /* Mirrored bento: wide feature + Pro Shop, then Table Tennis + wide Hall of Fame */
  .home-amenity--wide,
  .home-amenity:last-child { grid-column: span 2; }
  .home-amenity--wide .home-img,
  .home-amenity:last-child .home-img { aspect-ratio: 16 / 9; }
  /* The narrow card in each row grows its image so both cards share a height */
  .home-amenity:nth-child(2) picture,
  .home-amenity--tt picture { display: flex; flex: 1; }
  .home-amenity:nth-child(2) .home-img,
  .home-amenity--tt .home-img { height: 100%; aspect-ratio: auto; min-height: 200px; }
}

/* --------------------------------------------------------------------------
   20. Community: copy + three-image collage
   -------------------------------------------------------------------------- */
.home-split {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: center;
}
.home-split__copy > * + * { margin-top: 1.25rem; }
.home-split__copy .home-kicker { margin-bottom: 0; }
.home-collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.home-collage > picture:first-child { grid-column: 1 / -1; }
.home-collage > picture:not(:first-child) .home-img { aspect-ratio: 4 / 3; }

@media (min-width: 1024px) {
  .home-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   21. Sign-up panel
   -------------------------------------------------------------------------- */
.home-panel {
  --focus-ring: var(--color-volt);
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  background: var(--color-cobalt);
  color: var(--color-white);
  border-radius: clamp(20px, 2vw + 12px, 32px);
}
.home-panel__copy > * + * { margin-top: 1.25rem; }
.home-panel__copy .home-kicker { margin-bottom: 0; }
.home-panel .home-body { color: var(--color-white); }
.home-ticks { display: grid; gap: 0.4rem; }
.home-ticks li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.3rem;
  font-weight: 600;
}
.home-ticks .icon {
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-volt);
  color: var(--color-ink);
  stroke-width: 2.5;
}

@media (min-width: 1024px) {
  .home-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  #signup .home-panel__copy { padding-top: var(--home-card-pad); } /* kicker lines up with the first form label */
}

/* --------------------------------------------------------------------------
   22. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .home-hero__video { display: none; }
  .home-link:hover .icon { transform: none; }
}

/* --------------------------------------------------------------------------
   23. 404 page
   -------------------------------------------------------------------------- */
.notfound { min-height: 70vh; display: flex; align-items: center; }
.notfound__inner { position: relative; max-width: 52rem; }
.notfound__links { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.notfound__title {
  margin-bottom: 0.75rem;
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--color-white);
}
.notfound__links ul { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.notfound__links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.25rem;
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.notfound__links a:hover { background: var(--color-white); color: var(--color-ink); }

/* Real renders reused in two places get different framing */
.home-img--golf { object-position: 22% 50%; }   /* golf simulator screen */
.home-img--tt { object-position: 50% 80%; }     /* table tennis table */
.home-img--alt-crop { object-position: 50% 70%; } /* courts and players, not the roof */

/* --------------------------------------------------------------------------
   24. Memberships page: plan cards
   -------------------------------------------------------------------------- */
.home-plans-link { margin-top: var(--home-gap); text-align: center; }

.plans-hero { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.plans-hero__inner { position: relative; max-width: 52rem; }
.plans-jump { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.plans-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.25rem;
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.plans-jump a:hover { background: var(--color-white); color: var(--color-ink); }

.plans {
  display: grid;
  gap: var(--home-gap);
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: var(--home-card-pad);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--home-radius);
}
.plan--visitor { background: var(--color-surface-alt); }
.plan--featured {
  --focus-ring: var(--color-volt);
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
}
/* Tilted volt flag, same language as the site's badges */
.plan__badge {
  position: absolute;
  top: -14px;
  right: 1.25rem;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-white);
  box-shadow: inset 0 0 0 2px var(--color-volt);
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(var(--badge-tilt));
}
.plan__head { display: grid; gap: 0.5rem; }
.plan__tag {
  justify-self: start;
  padding: 0.3rem 0.75rem;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cobalt-text);
}
.plan__tag--muted { color: var(--color-text-muted); }
.plan--featured .plan__tag { color: var(--color-white); }
.plan__name {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.plan__variant { display: block; margin-top: 0.2rem; color: var(--color-cobalt-text); }
.plan--featured .plan__variant { color: var(--color-white); }
.plan__sub {
  font-weight: 600;
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}
.plan--featured .plan__sub { color: var(--color-muted-on-dark); }
.plan__via {
  margin-top: -0.6rem;
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}
.plan--featured .plan__via { color: var(--color-muted-on-dark); }
.plan__hours {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.plan__hours .icon { width: 18px; height: 18px; }
.plan--featured .plan__hours { color: var(--color-muted-on-dark); }

.plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  padding-block: 1rem;
  border-block: 1.5px solid var(--color-border);
}
.plan--featured .plan__price { border-color: rgba(255, 255, 255, 0.28); }
.plan__was {
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 700;
  font-size: 26px;
  color: var(--color-text-muted);
  text-decoration-thickness: 2px;
}
.plan--featured .plan__was { color: var(--color-muted-on-dark); }
.plan__now {
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 60px;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--color-cobalt-text);
  font-variant-numeric: tabular-nums;
}
.plan--visitor .plan__now { color: var(--color-text); }
.plan--featured .plan__now { color: var(--color-volt); /* 60px display, 4.29:1 */ }
.plan__per {
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.plan--featured .plan__per { color: var(--color-muted-on-dark); }

.plan__cta { margin-top: 0.1rem; }
.plan__note {
  margin-top: -0.4rem;
  text-align: center;
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cobalt-text);
}
.plan--featured .plan__note { color: var(--color-white); }

.plan__features { display: grid; gap: 0.7rem; margin-top: 0.4rem; }
.plan__feature {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.65rem;
  align-items: start;
  line-height: 1.45;
}
.plan__feature .icon {
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: var(--radius-pill);
  stroke-width: 2.5;
}
.plan__feature--check .icon { background: var(--color-cobalt-bright); color: var(--color-white); }
.plan--featured .plan__feature--check .icon { background: var(--color-volt); color: var(--color-ink); }
.plan__feature--x .icon { background: var(--color-surface-alt); color: var(--color-text-muted); }
.plan__feature--x { color: var(--color-text-muted); }
.plan__feature--minus .icon { background: var(--color-surface-alt); color: var(--color-text); }

.plans-cta { align-items: center; }
.plans-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

@media (min-width: 768px) {
  .plans--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; margin-inline: auto; }
}
@media (min-width: 1024px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plans--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-cta__actions { justify-content: flex-end; }
}

/* --------------------------------------------------------------------------
   25. App section (PlayByPoint)
   -------------------------------------------------------------------------- */
.home-app {
  --focus-ring: var(--color-volt);
  background: var(--color-cobalt);
  color: var(--color-white);
  overflow: hidden;
}
.home-app__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: center;
}
.home-app__copy > * + * { margin-top: 1.25rem; }
.home-app__copy .home-kicker { margin-bottom: 0; }
.home-app .home-body { color: var(--color-white); max-width: 34rem; }

/* Phone mock-up */
.home-app__visual { position: relative; display: grid; justify-items: center; }
.phone {
  width: min(100%, 300px);
  padding: 10px;
  background: var(--color-ink);
  border-radius: 44px;
}
.phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2.4rem 1rem 0.9rem;
  min-height: 520px;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 34px;
}
.phone__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 84px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  transform: translateX(-50%);
}
.phone__top { display: grid; justify-items: center; gap: 0.2rem; text-align: center; }
.phone__logo { width: 84px; height: auto; margin-bottom: 0.3rem; }
.phone__club { font-weight: 800; font-size: 15px; line-height: 1.2; }
.phone__addr { font-size: 12px; color: var(--color-text-muted); }
.phone__label {
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cobalt-text);
}
.phone__plans { display: grid; gap: 0.6rem; }
.phone__tabs {
  display: flex;
  justify-content: space-around;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
}
.phone__tabs .icon { width: 22px; height: 22px; }
.phone__tabs .icon:first-child { color: var(--color-cobalt-text); }
.phone__plans li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-input);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}
.phone__plans small { font-weight: 400; font-size: 12px; color: var(--color-text-muted); }
.phone__plans b {
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 22px;
  color: var(--color-cobalt-text);
}
.phone__plans i {
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-cobalt);
  color: var(--color-white);
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
}

/* Feature pills: stacked under the phone on small screens, overlapping it on wide ones */
.app-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; }
.app-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-input);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
}
.app-pill .icon { width: 20px; height: 20px; }
.app-pill--volt { background: var(--color-white); color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-volt); }
.app-pill--ink { background: var(--color-ink); color: var(--color-white); }
.app-pill--white { background: var(--color-surface); color: var(--color-text); }

.app-features { display: grid; gap: 1.1rem; }
.app-feature { display: grid; grid-template-columns: 52px 1fr; gap: 1rem; align-items: start; }
.app-feature > .icon {
  width: 52px;
  height: 52px;
  padding: 13px;
  border-radius: var(--radius-pill);
  background: var(--color-volt);
  color: var(--color-ink);
}
.app-feature__title {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.app-feature p { margin-top: 0.25rem; }

.app-find {
  display: grid;
  gap: 0.15rem;
  padding: 1rem 1.25rem;
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-input);
  max-width: 26rem;
}
.app-find__label {
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white); /* volt at 13px was 3.7:1 on cobalt; white is 4.95:1 */
}
.app-find__name { font-weight: 800; }
.app-find__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  font-weight: 600;
  color: var(--color-white);
  text-underline-offset: 4px;
}
.app-find__tel .icon { width: 20px; height: 20px; color: var(--color-volt); }

.app-badges { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.app-badge { display: inline-flex; border-radius: 10px; }
.app-badge img { display: block; width: auto; height: 52px; }

/* Small screens: lead with the heading and download badges, then the illustration */
@media (max-width: 1023px) {
  .home-app__copy { order: -1; }
}
@media (min-width: 1024px) {
  .home-app__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Wide screens: pills sit beside the phone and overlap only its bezel, like a floating feature list */
@media (min-width: 1280px) {
  .home-app__visual { display: flex; align-items: center; justify-content: flex-end; }
  .app-pills {
    position: relative;
    z-index: 1;
    order: -1;
    display: grid;
    justify-items: end;
    margin: 0 -18px 0 0;
  }
}

/* --------------------------------------------------------------------------
   26. Hero email capture
   -------------------------------------------------------------------------- */
.hero-email { margin-top: 2rem; max-width: 36rem; }
.hero-email__label {
  margin-bottom: 0.75rem;
  font-family: var(--font-score);
  font-style: italic;
  font-weight: 800;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
}
.hero-email__row { display: flex; flex-direction: column; gap: 0.6rem; }
.hero-email__input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 1.25rem;
  border: 1.5px solid var(--color-surface);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-body-md);
}
.hero-email__input::placeholder { color: var(--color-text-muted); }
.hero-email__input:focus-visible { outline-offset: 2px; }
.hero-email__input[aria-invalid="true"] { border-color: var(--color-error); border-width: 2px; }
.hero-email__btn { white-space: nowrap; }
.hero-email__msg {
  min-height: var(--lh-body-sm);
  margin-top: 0.5rem;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: 600;
  color: var(--color-white);
}
.hero-email__msg--error { color: var(--color-error-on-dark); }
.hero-email__msg--error::before { content: "\26A0  "; }
.hero-email__msg--success::before { content: "\2713  "; color: var(--color-volt); }
.home-hero .hero__actions { margin-top: 1.5rem; }

@media (min-width: 480px) {
  .hero-email__row { flex-direction: row; }
}

/* Keep both hero actions in view on laptops, including reduced browser heights.
   Content remains in normal flow so zoom and validation messages can grow the hero. */
@media (min-width: 768px) and (max-height: 900px) {
  .home-hero { padding-block: 1.5rem 2rem; }
  .home-hero__copy { max-width: 60rem; }
  .home-hero .eyebrow { margin-bottom: 1rem; }
  .home-hero .home-h1 {
    max-width: 18ch;
    font-size: clamp(2.5rem, 7vh, 3.75rem);
    line-height: 1;
  }
  .home-hero .home-lede {
    max-width: 70ch;
    margin-top: 0.75rem;
    font-size: 1.0625rem;
    line-height: 1.4;
  }
  .home-hero .hero__actions { margin-top: 1rem; }
  .home-hero .hero-email { margin-top: 1rem; }
  .home-hero .hero-email__label { margin-bottom: 0.5rem; }
}

/* --------------------------------------------------------------------------
   27. Free Intro landing page
   -------------------------------------------------------------------------- */
.intro-hero {
  --focus-ring: var(--color-volt);
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 6rem) clamp(3rem, 2rem + 4vw, 5rem);
  background: var(--color-ink);
  color: var(--color-white);
}
.intro-hero__bg { position: absolute; inset: 0; z-index: 0; }
.intro-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
/* Ink block behind the copy, easing to a light scrim on the photo side */
.intro-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* above the photo (later in the DOM), below the copy grid */
  background: linear-gradient(90deg, rgba(99, 101, 98, 0.96) 0%, rgba(99, 101, 98, 0.95) 56%, rgba(99, 101, 98, 0.5) 80%, rgba(99, 101, 98, 0.3) 100%);
}
@media (max-width: 1023px) {
  .intro-hero::before { background: linear-gradient(180deg, rgba(99, 101, 98, 0.96) 0%, rgba(99, 101, 98, 0.95) 100%); }
}
.intro-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: start;
}
.intro-hero__copy > * + * { margin-top: 1.25rem; }
.intro-hero__copy .home-h1 { max-width: 11ch; }
.intro-facts { display: grid; gap: 0.5rem; margin-top: 1.5rem; }
.intro-facts li { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; }
.intro-facts .icon { width: 28px; height: 28px; padding: 5px; border-radius: var(--radius-pill); background: var(--color-volt); color: var(--color-ink); stroke-width: 2.5; }
.intro-hero__cta { margin-top: 1.75rem; }

/* Form card */
.intro-form-wrap { scroll-margin-top: calc(var(--header-h) + 1rem); }
.intro-form__head { grid-column: 1 / -1; margin-bottom: 0.25rem; }
.intro-form__head .home-kicker { margin-bottom: 0.75rem; }
.intro-form__title { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); line-height: 1; letter-spacing: -0.02em; }
.intro-form__sub { margin-top: 0.5rem; color: var(--color-text-muted); }
.form__field--full { grid-column: 1 / -1; }
.form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.75rem;
}
.form__select:invalid { color: var(--color-text-muted); } /* placeholder option */
.tel-field { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); }
.tel-field__country {
  height: 52px;
  padding: 0 2.25rem 0 0.9rem;
  border: 1.5px solid var(--color-input-border);
  border-radius: var(--radius-input);
  background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 16px;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  appearance: none;
}
.tel-field__country:focus-visible { border-color: var(--color-cobalt); outline-offset: 2px; }
.consent { grid-template-columns: 24px minmax(0, 1fr); column-gap: 0.85rem; align-items: start; }
.consent__box { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--color-cobalt); cursor: pointer; }
.consent__box:focus-visible { outline: 3px solid var(--color-cobalt); outline-offset: 2px; }
.consent__label { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--color-text-muted); cursor: pointer; }
.consent .form__error { grid-column: 1 / -1; }
.form--sent .form__field, .form--sent .consent, .form--sent .btn--block, .form--sent .form__fine { display: none; }
.form--sent .form__status:not(.sr-only) { margin: 0; padding: 1.5rem; font-size: var(--fs-body-lg); }

/* Sections */
.intro-steps .home-value p { color: var(--color-text-muted); }
.intro-split { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); align-items: center; }
.intro-split__copy > * + * { margin-top: 1.25rem; }
.intro-split__copy .home-kicker { margin-bottom: 0; }
.intro-split__copy .home-body { color: var(--color-muted-on-dark); }
.intro-volt { color: var(--color-volt); }
.intro-trust { display: grid; gap: 1rem; margin-top: 1.75rem; }
.intro-trust li { display: grid; grid-template-columns: 48px 1fr; gap: 1rem; align-items: start; }
.intro-trust .icon { width: 48px; height: 48px; padding: 12px; border-radius: var(--radius-pill); background: var(--color-volt); color: var(--color-ink); }
.intro-trust strong { display: block; font-size: 1.0625rem; }
.intro-trust span { color: var(--color-muted-on-dark); }
.intro-split__media .home-img { border-radius: var(--home-radius); }
.intro-duo { display: grid; gap: var(--home-gap); }
.intro-card { padding: var(--home-card-pad); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--home-radius); }
.intro-card--cobalt { --focus-ring: var(--color-volt); background: var(--color-cobalt); border-color: var(--color-cobalt); color: var(--color-white); }
.home-kicker--on-cobalt { color: var(--color-white); }
.intro-card__title { margin-top: 0.5rem; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.intro-address { margin-top: 1rem; font-weight: 600; }
.intro-address a { display: inline-flex; align-items: center; min-height: 48px; color: inherit; text-underline-offset: 4px; }
.intro-list { display: grid; gap: 0.6rem; margin-top: 1.25rem; }
.intro-list li { display: flex; align-items: center; gap: 0.75rem; min-height: 32px; }
.intro-list .icon { width: 32px; height: 32px; padding: 6px; border-radius: var(--radius-pill); background: rgba(1, 146, 198, 0.14); color: var(--color-cobalt-text); flex-shrink: 0; }
.intro-list--light .icon { background: rgba(255, 255, 255, 0.16); color: var(--color-white); }
.intro-list--light a { color: inherit; display: inline-flex; align-items: center; min-height: 48px; text-underline-offset: 4px; }
.intro-closing { align-items: center; }
.intro-closing__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

@media (min-width: 640px) {
  .intro-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .intro-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
  .intro-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .intro-closing__actions { justify-content: flex-end; }
}

:root { --color-lemon-twist: var(--sw-lemon-twist); } /* alias kept for the free-intro band; single source is the SW token */
.court-support { max-width: 70ch; margin: var(--space-lg) auto 0; text-align: center; }
.home-products--options .home-product { grid-column: auto; }
.home-products--options .home-product .home-img { aspect-ratio: 16 / 9; }
.home-bento .home-amenity:last-child { grid-column: auto; }
.home-amenity--text .home-amenity__body { padding: var(--home-card-pad); }
.home-amenity--text .icon { width: 52px; height: 52px; color: var(--color-cobalt-text); }
.free-intro-band { background: var(--color-surface); color: var(--color-ink); border-top: 10px solid var(--color-volt); border-bottom: 10px solid var(--color-volt); }
.free-intro-band .home-kicker { background: var(--color-ink); border-color: var(--color-volt); color: var(--color-white); }
.free-intro-band .home-sub { color: var(--color-ink); }
.section-action { margin-top: var(--space-lg); text-align: center; }
.app-preview-note { margin-top: var(--space-lg); text-align: center; }
.sponsor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--home-gap); }
.sponsor-logo { display: grid; align-items: center; padding: var(--home-card-pad); border: 1.5px solid var(--color-border); border-radius: var(--home-radius); background: var(--color-surface); }
.sponsor-logo img { width: 100%; height: 80px; object-fit: contain; }
.sponsor-logo a { display: block; }
textarea.form__input { height: auto; padding-block: var(--space-md); resize: vertical; }
[data-inquiry-form] > .btn { grid-column: 1 / -1; }
.site-nav__more { position: relative; }
.site-nav__more summary { cursor: pointer; }
.site-nav__submenu { display: grid; gap: var(--space-sm); padding: var(--space-md); border: 1.5px solid var(--home-ink-border); border-radius: var(--radius-input); background: var(--color-ink); }
@media (min-width: 640px) {
  .home-products--options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sponsor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plans--memberships { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .sponsor-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.home-app .app-preview-note { color: var(--color-white); }

@media (min-width: 768px) {
  .site-nav__submenu { position: absolute; top: 100%; right: 0; min-width: 200px; }
}
.app-badges { align-items: center; }
.app-badge img[alt^="Get Open Play"] { height: calc(52px + var(--space-lg)); }

/* Sponsorship page: benefit cards carry an icon disc instead of a step number, three per row on desktop. */
.spons-benefit .icon { width: 52px; height: 52px; padding: 13px; margin-bottom: 0.5rem; border-radius: var(--radius-pill); background: var(--color-cobalt); color: var(--color-white); flex-shrink: 0; }
@media (min-width: 1024px) {
  .spons-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sponsor detail pages (sponsors/<id>.html, generated by backend/build-sponsors.mjs) */
.sponsor-page__back a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; font-weight: 600; color: var(--color-cobalt-text); text-underline-offset: 4px; }
.sponsor-page__back .icon { width: 18px; height: 18px; transform: rotate(180deg); }
.sponsor-page__grid { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; margin-top: var(--space-md); }
.sponsor-page__logo { display: grid; place-items: center; padding: clamp(2rem, 1.5rem + 3vw, 4rem); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--home-radius); }
.sponsor-page__logo img { width: 100%; max-width: 420px; height: auto; max-height: 240px; object-fit: contain; }
.sponsor-page__copy > * + * { margin-top: 1.25rem; }
.sponsor-page__copy .home-kicker { margin-bottom: 0; }
.sponsor-offer { padding: var(--home-card-pad); background: var(--color-surface); border: 1.5px solid var(--color-border); border-left: 6px solid var(--color-volt); border-radius: var(--home-radius); }
.sponsor-offer > * + * { margin-top: 0.75rem; }
.sponsor-offer__text { font-size: var(--fs-body-lg); font-weight: 600; color: var(--color-text); }
.sponsor-offer__note { color: var(--color-text-muted); font-size: 0.9375rem; }
.sponsor-logo a { border-radius: var(--radius-input); }
@media (min-width: 900px) {
  .sponsor-page__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* Legal pages (privacy-policy.html): Grizzle band, numbered scoreboard sections, sticky contents on desktop */
.site-footer__legal a { font-weight: 600; }
.legal-hero {
  --focus-ring: var(--color-volt);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) clamp(2.5rem, 2rem + 3vw, 4rem);
  background: var(--color-ink);
  color: var(--color-white);
  border-bottom: 10px solid var(--color-volt);
}
.legal-hero .container > * + * { margin-top: 1.25rem; }
.legal-hero .home-lede { max-width: 52ch; }
.legal-wrap { padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.legal { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 60rem; }
.legal__toc { scroll-margin-top: calc(var(--header-h) + 1rem); }
.legal__toc { padding: var(--home-card-pad); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--home-radius); }
.legal__toc-title { font-family: var(--font-score); font-style: italic; font-weight: 800; font-size: 0.9375rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text); }
.legal__toc ol { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.15rem; counter-reset: toc; }
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; padding-block: 0.45rem; min-height: 44px; align-content: center;
  color: var(--color-text); text-decoration: none; font-size: 0.9375rem; line-height: 1.35; border-radius: 6px;
}
.legal__toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-score); font-style: italic; font-weight: 800; color: var(--color-cobalt-text); }
.legal__toc a:hover { color: var(--color-cobalt-text); text-decoration: underline; text-underline-offset: 3px; }
.legal__body { max-width: 70ch; }
.legal__section { padding-block: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); border-top: 1.5px solid var(--color-border); scroll-margin-top: calc(var(--header-h) + 1rem); }
.legal__section:first-child { border-top: 0; padding-top: 0; }
.legal__h2 { display: flex; align-items: baseline; gap: 0.85rem; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); line-height: 1.15; color: var(--color-text); }
.legal__num { flex-shrink: 0; font-family: var(--font-score); font-style: italic; font-weight: 800; font-size: 0.85em; color: var(--color-cobalt-text); }
.legal__body p, .legal__body li { line-height: 1.7; color: var(--color-text); }
.legal__section > * + * { margin-top: 1rem; }
.legal__body ul { display: grid; gap: 0.5rem; padding-left: 1.25rem; list-style: none; }
.legal__body ul ul { margin-top: 0.5rem; }
.legal__body li { position: relative; }
.legal__body li::before { content: ""; position: absolute; left: -1.05rem; top: 0.72em; width: 7px; height: 7px; border-radius: 2px; background: var(--color-cobalt-bright); }
.legal__body a { color: var(--color-cobalt-text); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal__body strong { font-weight: 700; }
.legal-contact { font-style: normal; padding: var(--home-card-pad); background: var(--color-surface); border: 1.5px solid var(--color-border); border-left: 6px solid var(--color-volt); border-radius: var(--home-radius); line-height: 1.8; }
/* Contents sit above the text in normal page flow. Never give them (or anything else) a max-height with
   its own scrollbar: a nested scroll region is easy to miss and fights the page scroll. tests/server.test.js
   fails the build if one comes back. The floating "Contents" button (main.js initLegalContents) brings
   readers back to the list from deep in the page. */
@media (min-width: 768px) {
  .legal__toc ol { display: block; columns: 2; column-gap: 2.5rem; } /* reads down column one, then column two */
  .legal__toc li { break-inside: avoid; }
}
@media print {
  .site-header, .site-footer, .legal__toc, .skip-link { display: none !important; }
  .legal-hero { background: none; color: #000; border: 0; padding: 0 0 1rem; }
  .legal__body { max-width: none; }
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.legal__caps { font-size: 0.875rem; line-height: 1.75; letter-spacing: 0.01em; color: var(--color-text); }

/* Floating "Contents" button on legal pages: shown by main.js once the contents list has scrolled out of view */
.legal-contents-btn {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0 1.1rem;
  border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-white);
  box-shadow: inset 0 0 0 2px var(--color-volt), 0 6px 18px rgba(99, 101, 98, 0.35);
  font-family: var(--font-score); font-style: italic; font-weight: 800; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 200ms ease-out, transform 200ms ease-out;
  --focus-ring: var(--color-volt);
}
.legal-contents-btn .icon { width: 18px; height: 18px; transform: rotate(-90deg); }
.legal-contents-btn.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.legal-contents-btn:hover { background: #585a57; }
@media (prefers-reduced-motion: reduce) { .legal-contents-btn { transition: none; } }
@media print { .legal-contents-btn { display: none !important; } }
.legal__lead { font-size: var(--fs-body-lg); font-weight: 600; color: var(--color-text); }

/* Breadcrumbs: a slim Grizzle strip that continues the header on every inner page */
.breadcrumbs { --focus-ring: var(--color-volt); background: var(--color-ink); color: var(--color-muted-on-dark); font-size: 0.875rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumbs li + li::before { content: ""; width: 6px; height: 6px; margin-inline: 0.7rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.8; flex-shrink: 0; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-muted-on-dark); text-underline-offset: 3px; }
.breadcrumbs a:hover { color: var(--color-white); }
.breadcrumbs [aria-current="page"] { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-white); font-weight: 600; overflow-wrap: anywhere; }
@media print { .breadcrumbs { display: none; } }

/* FAQ (faq.html): grouped native <details> accordions. No JS needed to open or close; main.js only opens
   the question named in the URL hash. */
.faq-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; padding: 0; list-style: none; }
.faq-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: var(--radius-pill); border: 1.5px solid rgba(255, 255, 255, 0.45); color: var(--color-white); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.faq-chips a:hover { border-color: var(--color-volt); }
.faq-wrap { padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.faq { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); max-width: 52rem; }
.faq-group { scroll-margin-top: calc(var(--header-h) + 1rem); }
.faq-group__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.1; color: var(--color-text); }
.faq-list { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.faq-item { background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--home-radius); scroll-margin-top: calc(var(--header-h) + 1rem); transition: border-color 200ms ease-out; }
.faq-item[open] { border-color: var(--color-cobalt-bright); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: 1rem var(--home-card-pad); cursor: pointer; list-style: none; border-radius: var(--home-radius); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover .faq-q { color: var(--color-cobalt-text); }
.faq-q { font-size: 1.0625rem; line-height: 1.35; font-weight: 700; color: var(--color-text); text-transform: none; letter-spacing: 0; }
.faq-icon { position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--color-surface-alt); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--color-text); border-radius: 2px; transition: transform 200ms ease-out; }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon { background: var(--color-cobalt); }
.faq-item[open] .faq-icon::before, .faq-item[open] .faq-icon::after { background: var(--color-white); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-a { padding: 0 var(--home-card-pad) var(--home-card-pad); color: var(--color-text); }
.faq-a > * + * { margin-top: 0.85rem; }
.faq-a p, .faq-a li { line-height: 1.7; }
.faq-a ul { display: grid; gap: 0.4rem; padding-left: 1.25rem; list-style: none; }
.faq-a li { position: relative; }
.faq-a li::before { content: ""; position: absolute; left: -1.05rem; top: 0.72em; width: 7px; height: 7px; border-radius: 2px; background: var(--color-cobalt-bright); }
.faq-a a { color: var(--color-cobalt-text); text-underline-offset: 3px; }
.faq-more a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-weight: 700; }
.faq-more .icon { width: 18px; height: 18px; }
.faq-help { padding: var(--home-card-pad); background: var(--color-surface); border: 1.5px solid var(--color-border); border-left: 6px solid var(--color-volt); border-radius: var(--home-radius); }
.faq-help > * + * { margin-top: 0.75rem; }
.faq-help a { color: var(--color-cobalt-text); text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .faq-item, .faq-icon::before, .faq-icon::after { transition: none; } }
@media print { .faq-item:not([open]) .faq-a { display: block; } .faq-chips { display: none; } }