/* =========================================================
   LEVEL FITNESS CLUBS — Design System
   Palette: navy / white / black / grey / wood+steel photography
   Accent: light blue (rare). No yellow / green / anything else.
========================================================= */

:root {
  /* ---------- Color ---------- */
  --ink-900:    #0A0E1A;
  --ink-700:    #141A2C;
  --ink-500:    #1E2640;
  --ink-400:    #2A3350;
  --paper:      #FBFAF7;
  --paper-cream: #F6F3EE;
  --paper-warm: #F6F3EE;
  --paper-2:    #EBE7DF;
  --grey-300:   #C8CCD3;
  --grey-500:   #5C6473; /* darkened from #7A8291 to meet WCAG AA on --paper (4.5:1) */
  --grey-600:   #515967;
  --grey-700:   #2B2F38;
  --steel:      #8C939E;
  --wood:       #8B6F4E;
  --wood-deep:  #4A3724;
  --light-blue: #9AB4D4;
  --light-blue-deep: #6F8FB5;

  /* ---------- Type scale ---------- */
  --fs-display: clamp(48px, 10vw, 156px);
  --fs-h1:      clamp(42px, 7vw, 104px);
  --fs-h2:      clamp(34px, 5vw, 72px);
  --fs-h3:      clamp(22px, 2.4vw, 30px);
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-eyebrow: 11px;

  --ls-display: -0.035em;
  --ls-h2:      -0.02em;
  --ls-eyebrow: 0.22em;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  400ms;
  --dur-med:   600ms;
  --dur-slow:  900ms;

  --max: 1320px;
  --max-narrow: 920px;

  --nav-h: 86px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.serif {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--grey-500);
}
.eyebrow--light { color: var(--light-blue); }
.eyebrow--rule {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow--rule::before {
  content: "";
  width: 36px; height: 1px;
  background: currentColor;
  display: inline-block;
}

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.container-narrow { width: 100%; max-width: var(--max-narrow); margin: 0 auto; padding: 0 32px; }

.display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  letter-spacing: var(--ls-display);
  line-height: 0.98;
}
.display em, .serif em {
  font-style: italic;
  font-weight: 300;
  color: var(--grey-500);
}
.on-dark .display em, .on-dark .serif em { color: var(--light-blue); }

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  padding: 0 32px;
  /* 3-column grid keeps the menu visually centered relative to the
     viewport no matter how wide the logo or the right-hand utility get.
     Logo lives in the left 1fr, menu in the auto-width middle column,
     utility in the right 1fr. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 24px;
  align-items: center;
  background: linear-gradient(180deg, rgba(10,14,26,0.75) 0%, rgba(10,14,26,0.0) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--paper);
  transition: background 280ms ease, color 280ms ease, border-color 280ms ease;
  border-bottom: 1px solid rgba(255,255,255,0.0);
}
.nav > .nav__logo    { justify-self: start; }
.nav > .nav__menu    { justify-self: center; }
.nav > .nav__utility,
.nav > .nav__cta     { justify-self: end; }   /* account pages put a bare .nav__cta directly inside .nav */
.nav--solid {
  background: var(--ink-900);
  border-bottom-color: rgba(255,255,255,0.08);
}
.nav--light {
  background: var(--paper);
  color: var(--ink-900);
  border-bottom-color: var(--grey-300);
}
.nav__logo {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.01em;
}
.nav__logo span { color: var(--light-blue); }
.nav__menu {
  display: flex; gap: 32px; list-style: none;
  font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 500;
}
.nav__menu a { color: rgba(255,255,255,0.82); transition: color 200ms ease; }
.nav--light .nav__menu a { color: var(--grey-700); }
.nav__menu a:hover { color: var(--light-blue); }
.nav__menu a.is-active { color: var(--paper); border-bottom: 1px solid var(--light-blue); padding-bottom: 2px; }
.nav--light .nav__menu a.is-active { color: var(--ink-900); }
.nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 14px 24px;
  color: inherit;
  white-space: nowrap;            /* never let the CTA label wrap to two lines */
  transition: all 250ms ease;
}
.nav--light .nav__cta { border-color: var(--ink-900); }
.nav__cta:hover {
  background: var(--paper); color: var(--ink-900); border-color: var(--paper);
}
.nav--light .nav__cta:hover { background: var(--ink-900); color: var(--paper); }
@media (max-width: 920px) {
  /* Mobile: collapse the centered-grid layout back to flex so the
     hamburger toggle + drawer behave as designed. */
  .nav {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }
  .nav__menu { display: none; }
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: all 250ms ease;
  background: transparent;
}
.btn--primary { background: var(--paper); color: var(--ink-900); }
.btn--primary:hover { background: var(--light-blue); color: var(--ink-900); }
.btn--ink { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }
.btn--ink:hover { background: transparent; color: var(--ink-900); }
.btn--ghost { border-color: rgba(255,255,255,0.65); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); }
.btn--ghost-dark { border-color: var(--ink-900); color: var(--ink-900); }
.btn--ghost-dark:hover { background: var(--ink-900); color: var(--paper); }
.btn__arrow { display: inline-block; transition: transform 250ms ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- SECTIONS ---------- */
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--loose { padding: 128px 0; }
.section--dark { background: var(--ink-900); color: var(--paper); }
.section--ink-700 { background: var(--ink-700); color: var(--paper); }
.section--warm { background: var(--paper-warm); color: var(--ink-900); }
.on-dark { color: var(--paper); }
.on-dark p { color: rgba(255,255,255,0.78); }

/* ---------- HERO (dark cinematic) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  /* iOS Safari measures 100vh as the *largest* viewport including the URL
     bar — causes hero overflow when toolbar is showing. 100svh (small
     viewport height) tracks the visible area. Fall through to 100vh on
     older browsers that don't know svh. */
  min-height: 100svh;
  background: var(--ink-900);
  color: var(--paper);
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 120px 0 96px;
}
.hero--short { min-height: 54vh; padding-bottom: 48px; align-items: flex-end; }
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(0.55) contrast(1.05);
}
.hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,0.35) 0%, rgba(10,14,26,0.88) 100%);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.07; mix-blend-mode: overlay;
}
.hero__content { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.hero__eyebrow { color: var(--light-blue); margin-bottom: 28px; display: inline-flex; align-items: center; gap: 14px; }
.hero__eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--light-blue); }
.hero__headline { font-size: var(--fs-display); max-width: 14ch; margin-bottom: 32px; }
.hero__headline em { color: var(--light-blue); }
.hero__sub {
  max-width: 56ch; color: rgba(255,255,255,0.78);
  font-size: 18px; line-height: 1.6; margin-bottom: 48px;
}
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__ticker {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  z-index: 3;
}
.hero__ticker a {
  color: inherit;
  text-decoration: none;
  position: relative;
  padding: 4px 2px;
  transition: color 200ms ease;
}
.hero__ticker a:hover,
.hero__ticker a:focus-visible { color: var(--paper); }
.hero__ticker a:focus-visible { outline: 1px solid var(--light-blue); outline-offset: 4px; }
.hero__ticker > * + *::before { content: "— "; color: var(--steel); margin-right: 8px; }
@media (max-width: 640px) {
  .hero__ticker { flex-wrap: wrap; gap: 10px; font-size: 10px; padding: 14px 20px; }
}

/* ---------- TOPIC BAR (4 entry-point cards; dramatic dark variant) ----------
 * Dark band that picks up where the hero ends, four distinct cards each with
 * its own accent color from the brand palette. Strong hover lift + arrow
 * micro-motion so it reads as buttons, not a passive section header.
 */
.topic-bar {
  background: var(--ink-900);
  padding: 56px 32px;
  border-top: 1px solid rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}
.topic-bar::before {
  /* subtle ambient gradient — matches the .app-section radial below it */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 12% 30%, rgba(154,180,212,0.08), transparent 55%),
    radial-gradient(ellipse at 88% 70%, rgba(139,111,78,0.05), transparent 55%);
  pointer-events: none;
}
.topic-bar__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.topic-bar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 28px 26px;
  min-height: 188px;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink-700);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 320ms cubic-bezier(.2,.7,.2,1),
    background 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease;
}
/* accent stripe along top edge — set per-variant below */
.topic-bar__item::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--light-blue);
  transform-origin: left;
  transition: height 260ms ease;
}
/* subtle ambient glow on hover — accent color picks this up via the
   ::before height growing slightly */
.topic-bar__item:hover::before,
.topic-bar__item:focus-visible::before { height: 5px; }

.topic-bar__item:hover,
.topic-bar__item:focus-visible {
  background: var(--ink-500);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-4px);
  box-shadow:
    0 32px 64px -16px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.04) inset;
}
.topic-bar__item:focus-visible { outline: 2px solid var(--light-blue); outline-offset: 2px; }

/* per-card accent stripe colors — color-coordinated, brand-palette only */
.topic-bar__item--mainfloor::before { background: var(--light-blue); }
.topic-bar__item--recovery::before  { background: var(--light-blue-deep); }
.topic-bar__item--training::before  { background: var(--wood); }
.topic-bar__item--classes::before   { background: var(--steel); }

.topic-bar__label {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--paper);
  margin-bottom: auto;
}

.topic-bar__arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  transition: color 240ms ease, gap 240ms ease;
}
.topic-bar__chev {
  display: inline-block;
  transition: transform 260ms cubic-bezier(.2,.7,.2,1);
}
.topic-bar__item:hover .topic-bar__arrow,
.topic-bar__item:focus-visible .topic-bar__arrow { gap: 14px; }
.topic-bar__item:hover .topic-bar__chev,
.topic-bar__item:focus-visible .topic-bar__chev { transform: translateX(4px); }

/* per-card hover arrow tint — picks up the accent stripe color */
.topic-bar__item--mainfloor:hover .topic-bar__arrow { color: var(--light-blue); }
.topic-bar__item--recovery:hover  .topic-bar__arrow { color: var(--light-blue); }
.topic-bar__item--training:hover  .topic-bar__arrow { color: var(--wood); }
.topic-bar__item--classes:hover   .topic-bar__arrow { color: var(--paper); }

/* pending link state — still readable but clearly inactive */
.topic-bar__item[data-pending-link] {
  cursor: default;
  opacity: 0.55;
}
.topic-bar__item[data-pending-link]:hover {
  transform: none;
  background: var(--ink-700);
  border-color: rgba(255,255,255,0.06);
  box-shadow: none;
}
.topic-bar__item[data-pending-link]:hover::before { height: 3px; }
.topic-bar__item[data-pending-link]:hover .topic-bar__chev { transform: none; }
.topic-bar__item[data-pending-link]:hover .topic-bar__arrow { gap: 10px; color: rgba(255,255,255,0.55); }

@media (prefers-reduced-motion: reduce) {
  .topic-bar__item,
  .topic-bar__item::before,
  .topic-bar__arrow,
  .topic-bar__chev { transition: none; }
  .topic-bar__item:hover { transform: none; }
}

/* ---------- CLUB CARDS (homepage "Five clubs. One standard." row) ----------
 * Visually mirrors .topic-bar__item — dark card, color-coordinated accent
 * stripe at the top edge, lift on hover, arrow chev micro-motion. Each club
 * gets its own brand-palette accent so the row reads as a curated set, not
 * four interchangeable tiles.
 */
.club-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
}
.club-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  min-height: 220px;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink-700);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 320ms cubic-bezier(.2,.7,.2,1),
    background 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease;
}
.club-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--light-blue);
  transition: height 260ms ease;
}
.club-card:hover::before,
.club-card:focus-visible::before { height: 5px; }

.club-card:hover,
.club-card:focus-visible {
  background: var(--ink-500);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-4px);
  box-shadow:
    0 32px 64px -16px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.04) inset;
}
.club-card:focus-visible { outline: 2px solid var(--light-blue); outline-offset: 2px; }

/* per-card accent colors — brand-palette only */
.club-card--pelham::before       { background: var(--light-blue); }
.club-card--yorktown::before     { background: var(--light-blue-deep); }
.club-card--somers::before       { background: var(--wood); }
.club-card--thornwood::before    { background: var(--steel); }
.club-card--portchester::before  { background: var(--wood-deep); }

.club-card__num {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: rgba(255,255,255,0.40);
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}
.club-card__body {
  display: block;
  margin-bottom: auto;
}
.club-card__name {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--paper);
  margin: 0 0 10px;
}
.club-card__meta {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
}
.club-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  transition: color 240ms ease, gap 240ms ease;
}
.club-card__chev {
  display: inline-block;
  transition: transform 260ms cubic-bezier(.2,.7,.2,1);
}
.club-card:hover .club-card__arrow,
.club-card:focus-visible .club-card__arrow { gap: 14px; }
.club-card:hover .club-card__chev,
.club-card:focus-visible .club-card__chev { transform: translateX(4px); }

/* arrow tint matches the per-card accent on hover */
.club-card--pelham:hover .club-card__arrow       { color: var(--light-blue); }
.club-card--yorktown:hover .club-card__arrow     { color: var(--light-blue); }
.club-card--somers:hover .club-card__arrow       { color: var(--wood); }
.club-card--thornwood:hover .club-card__arrow    { color: var(--paper); }
.club-card--portchester:hover .club-card__arrow  { color: var(--wood); }

/* 5-up variant for /clubs/ (locations) — five clubs in one row on wide
   viewports, then a balanced collapse on narrower screens. */
.club-cards--five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) {
  .club-cards--five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .club-cards--five { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .club-cards--five { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .club-card,
  .club-card::before,
  .club-card__arrow,
  .club-card__chev { transition: none; }
  .club-card:hover { transform: none; }
}

@media (max-width: 900px) {
  .club-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .club-card { min-height: 180px; padding: 26px 22px 22px; }
  .club-card__name { font-size: 26px; }
}
@media (max-width: 520px) {
  .club-cards { grid-template-columns: 1fr; gap: 12px; }
  .club-card {
    min-height: 96px;
    padding: 22px 22px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .club-card__num { margin-bottom: 0; }
  .club-card__body { margin-bottom: 0; }
  .club-card__name { margin-bottom: 4px; font-size: 22px; }
  .club-card__arrow { margin-top: 0; flex-shrink: 0; }
}

@media (max-width: 900px) {
  .topic-bar { padding: 44px 24px; }
  .topic-bar__inner { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .topic-bar__item { min-height: 154px; padding: 26px 22px 22px; }
  .topic-bar__label { font-size: 22px; }
}
@media (max-width: 520px) {
  .topic-bar { padding: 32px 16px; }
  .topic-bar__inner { grid-template-columns: 1fr; gap: 12px; }
  .topic-bar__item {
    min-height: 96px;
    padding: 22px 22px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .topic-bar__label { margin-bottom: 0; font-size: 22px; }
  .topic-bar__arrow { margin-top: 0; }
}

/* ---------- MANIFESTO ---------- */
.manifesto { padding: 140px 0; text-align: center; background: var(--paper); }
.manifesto__inner { max-width: 920px; margin: 0 auto; padding: 0 32px; }
.manifesto__quote {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink-900); margin: 32px 0 40px;
}
.manifesto__quote em { font-style: italic; color: var(--grey-500); }
.manifesto__rule { width: 56px; height: 1px; background: var(--ink-900); margin: 0 auto; opacity: 0.4; }

/* ---------- FEATURE (editorial alternating) ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh; }
.feature--dark { background: var(--ink-900); color: var(--paper); }
.feature--light { background: var(--paper-warm); color: var(--ink-900); }
.feature__media {
  position: relative;
  background-size: cover; background-position: center;
  min-height: 560px;
  filter: saturate(0.55);
}
.feature__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,0.1) 0%, rgba(10,14,26,0.4) 100%);
}
.feature__body {
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 56px; max-width: 620px;
}
.feature__eyebrow { margin-bottom: 24px; }
.feature--dark .feature__eyebrow { color: var(--light-blue); }
.feature__headline {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--fs-h2); font-weight: 400; line-height: 1.05;
  letter-spacing: var(--ls-h2);
  margin-bottom: 28px; max-width: 14ch;
}
.feature__body p { font-size: 17px; line-height: 1.65; margin-bottom: 32px; max-width: 50ch; }
.feature--dark .feature__body p { color: rgba(255,255,255,0.78); }
.feature--light .feature__body p { color: var(--grey-700); }
.feature__list { list-style: none; border-top: 1px solid var(--grey-300); }
.feature--dark .feature__list { border-top-color: rgba(255,255,255,0.2); }
.feature__list li {
  padding: 16px 0; border-bottom: 1px solid var(--grey-300);
  display: flex; justify-content: space-between; gap: 24px;
  align-items: baseline;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}
.feature--dark .feature__list li { border-bottom-color: rgba(255,255,255,0.12); }
.feature__list span:first-child { flex: 1 1 auto; min-width: 0; }
.feature__list span:last-child {
  color: var(--grey-500);
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}
.feature--dark .feature__list span:last-child { color: var(--light-blue); }
.feature--reverse .feature__media { order: 2; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature__body { padding: 56px 24px; }
  .feature__media { min-height: 380px; }
  .feature--reverse .feature__media { order: -1; }
}

/* ---------- CLUB GRID ---------- */
.clubs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px; background: rgba(255,255,255,0.08);
}
.club {
  background: var(--ink-700);
  padding: 40px 32px 32px;
  min-height: 420px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  color: var(--paper);
  transition: background 350ms ease;
}
.club:hover { background: var(--ink-500); }
.club__num { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-style: italic; font-size: 14px; color: var(--light-blue); }
.club__name { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 32px; letter-spacing: -0.01em; margin: 16px 0 10px; }
.club__note { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.5; max-width: 26ch; }
.club__meta {
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 16px; margin-top: 24px;
}
.club__arrow {
  position: absolute; top: 40px; right: 32px;
  width: 24px; height: 24px; color: rgba(255,255,255,0.65);
  transition: color 250ms ease, transform 250ms ease;
}
.club:hover .club__arrow { color: var(--light-blue); transform: translate(3px, -3px); }
@media (max-width: 1100px) { .clubs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .clubs-grid { grid-template-columns: 1fr; } }

.clubs__head {
  max-width: var(--max); margin: 0 auto 72px; padding: 0 32px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.clubs__head h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.05;
  max-width: 14ch; letter-spacing: var(--ls-h2);
}
.clubs__head p { max-width: 40ch; color: rgba(255,255,255,0.7); }
@media (max-width: 640px) { .clubs__head { flex-direction: column; align-items: flex-start; } }

/* ---------- APPLY ---------- */
.apply { padding: 96px 0; text-align: center; background: var(--paper); }
.apply__headline {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400; font-size: clamp(40px, 6vw, 84px);
  line-height: 1; letter-spacing: -0.02em;
  margin: 24px auto 32px; max-width: 16ch;
}
.apply__sub { max-width: 56ch; margin: 0 auto 48px; font-size: 17px; line-height: 1.6; color: var(--grey-700); }

/* ---------- FOOTER ---------- */
footer { background: var(--ink-900); color: rgba(255,255,255,0.72); padding: 80px 0 40px; font-size: 13px; }
footer .container { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 56px; margin-bottom: 64px; }
footer h4 { color: var(--paper); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; margin-bottom: 20px; }
footer ul { list-style: none; }
footer li { margin-bottom: 10px; }
footer a:hover { color: var(--light-blue); }
.footer__brand { font-family: 'Fraunces', Georgia, serif; font-size: 22px; color: var(--paper); margin-bottom: 16px; }
.footer__brand span { color: var(--light-blue); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px;
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.65);
}
@media (max-width: 820px) {
  footer .container { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__bottom { flex-direction: column; gap: 12px; }
}

/* ---------- EDITORIAL TYPE BLOCKS ---------- */
.ed-head { text-align: center; max-width: 760px; margin: 0 auto 48px; padding: 0 32px; }
.ed-head h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.05;
  letter-spacing: var(--ls-h2); margin: 20px 0 16px;
}
.ed-head p { color: var(--grey-600); max-width: 56ch; margin: 0 auto; }
.ed-head--light h2 { color: var(--paper); }
.ed-head--light p { color: rgba(255,255,255,0.7); }

/* ---------- 2-col content (about / pillar pages) ---------- */
.two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 96px; max-width: var(--max); margin: 0 auto; padding: 0 32px;
  align-items: start;
}
.two-col h3 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: 36px; line-height: 1.1; letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.two-col p { margin-bottom: 20px; line-height: 1.7; color: var(--grey-700); }
.on-dark.two-col p, .section--dark .two-col p { color: rgba(255,255,255,0.78); }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- LIST / AMENITY STRIP ---------- */
.amenities {
  list-style: none; border-top: 1px solid var(--grey-300);
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
}
.amenities li {
  display: grid; grid-template-columns: 80px 1fr 1fr 180px;
  gap: 24px; padding: 24px 0;
  border-bottom: 1px solid var(--grey-300);
  align-items: start;
}
.amenities li span:first-child {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 300;
  color: var(--grey-500);
}
.amenities li h4 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 22px; letter-spacing: -0.005em;
}
.amenities li p { color: var(--grey-600); font-size: 15px; }
.amenities li span:last-child {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500);
  justify-self: end;
  /* Even when the label wraps to two lines (e.g. "YORKTOWN + SOMERS"),
     keep every line flush-right so the column reads as one rail. */
  text-align: right;
  white-space: normal;
  line-height: 1.4;
}
.section--dark .amenities { border-top-color: rgba(255,255,255,0.15); }
.section--dark .amenities li { border-bottom-color: rgba(255,255,255,0.1); }
.section--dark .amenities li p { color: rgba(255,255,255,0.7); }
.section--dark .amenities li span:first-child { color: var(--light-blue); }
.section--dark .amenities li span:last-child { color: var(--light-blue); }
@media (max-width: 820px) { .amenities li { grid-template-columns: 1fr; gap: 6px; } .amenities li span:last-child { justify-self: start; } }

/* ---------- TRAINER / TEAM GRID ---------- */
.team {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
}
.trainer {
  background: var(--paper-warm);
}
.trainer__photo {
  aspect-ratio: 3/4;
  background-size: cover; background-position: center;
  background-color: var(--ink-700);
  filter: saturate(0.4) contrast(1.05);
}
.trainer__body { padding: 24px 28px 32px; }
.trainer__name { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 24px; margin-bottom: 4px; }
.trainer__role { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 16px; }
.trainer__bio { font-size: 15px; line-height: 1.6; color: var(--grey-700); }
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team { grid-template-columns: 1fr; } }

/* ---------- CLASS / SCHEDULE TABLE ---------- */
.schedule {
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
  border-top: 1px solid var(--grey-300);
}
.schedule__row {
  display: grid;
  grid-template-columns: 120px 1fr 1fr 1fr 120px;
  gap: 24px; padding: 22px 0;
  border-bottom: 1px solid var(--grey-300);
  align-items: center;
}
.schedule__row--head { color: var(--grey-500); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.schedule__row h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 20px; }
.schedule__row span { font-size: 14px; color: var(--grey-600); }
.schedule__row .tag { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); }
.schedule__row .book { justify-self: end; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 1px solid currentColor; }
@media (max-width: 820px) { .schedule__row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; } }

/* ---------- FORM ---------- */
.form {
  display: grid; gap: 20px;
  max-width: 560px; margin: 0 auto;
}
.form label {
  display: block; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grey-500); margin-bottom: 8px;
}
.form input, .form select, .form textarea {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--grey-300);
  padding: 10px 0;
  font-family: inherit; font-size: 16px; color: var(--ink-900);
  outline: none;
  transition: border-color 200ms ease;
}
.on-dark .form input, .on-dark .form select, .on-dark .form textarea {
  color: var(--paper);
  border-bottom-color: rgba(255,255,255,0.25);
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-bottom-color: var(--ink-900);
}
.on-dark .form input:focus, .on-dark .form select:focus { border-bottom-color: var(--light-blue); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.form__consent { font-size: 12px; color: var(--grey-500); line-height: 1.5; }
.on-dark .form__consent { color: rgba(255,255,255,0.72); }

/* ---------- JOURNAL / PRESS TILES ---------- */
.journal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
}
.journal-card { display: block; }
.journal-card__img {
  aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  background-color: var(--ink-700);
  filter: saturate(0.5);
  margin-bottom: 20px;
}
.journal-card__meta { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 10px; }
.journal-card__title { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; color: var(--ink-900); }
.journal-card:hover .journal-card__title { color: var(--light-blue-deep); }
@media (max-width: 900px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .journal-grid { grid-template-columns: 1fr; } }

/* ---------- MEMBERSHIP / PRICE (concealed pricing posture) ---------- */
.tiers {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--grey-300);
  max-width: var(--max); margin: 0 auto;
}
@media (max-width: 1100px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiers { grid-template-columns: 1fr; } }
.tier__term {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grey-500); font-weight: 500;
  border-top: 1px solid var(--grey-300);
  padding-top: 12px; margin-top: 12px;
}
.tier--featured .tier__term { color: var(--light-blue); border-top-color: rgba(255,255,255,0.15); }
.tier__promo {
  display: inline-block;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  color: var(--light-blue-deep);
  border: 1px solid var(--light-blue-deep);
  padding: 4px 10px;
  margin-bottom: 8px;
}
.tier--featured .tier__promo { color: var(--light-blue); border-color: var(--light-blue); }
.tier__strike { text-decoration: line-through; color: var(--grey-500); margin-right: 6px; font-size: 13px; }
.tier-card .tier__promo { margin-bottom: 12px; }
.tier { background: var(--paper); padding: 36px 28px; display: flex; flex-direction: column; gap: 16px; }
.tier--featured { background: var(--ink-900); color: var(--paper); }
.tier__name { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 32px; letter-spacing: -0.01em; }
.tier__lede { font-size: 15px; color: var(--grey-600); line-height: 1.55; min-height: 60px; }
.tier--featured .tier__lede { color: rgba(255,255,255,0.75); }
.tier ul { list-style: none; border-top: 1px solid var(--grey-300); margin-top: 8px; padding-top: 16px; display: grid; gap: 12px; }
.tier--featured ul { border-top-color: rgba(255,255,255,0.15); }
.tier li { font-size: 14px; letter-spacing: 0.02em; display: flex; gap: 12px; align-items: flex-start; }
.tier li::before { content: "—"; color: var(--grey-500); flex-shrink: 0; }
.tier--featured li::before { color: var(--light-blue); }
.tier__cta { margin-top: auto; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }

/* ---------- IMAGE HERO BACKGROUNDS (swap with your shoot) ---------- */
.hero-bg-flagship { background-image: url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-strength { background-image: url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-recovery { background-image: url('https://images.unsplash.com/photo-1545205597-3d9d02c29597?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-pilates  { background-image: url('https://images.unsplash.com/photo-1518611012118-696072aa579a?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-interior { background-image: url('https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-portrait { background-image: url('https://images.unsplash.com/photo-1594381898411-846e7d193883?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-coach    { background-image: url('https://images.unsplash.com/photo-1518310383802-640c2de311b2?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-sauna    { background-image: url('https://images.unsplash.com/photo-1540497077202-7c8a3999166f?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-club     { background-image: url('https://images.unsplash.com/photo-1571902943202-507ec2618e8f?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-darkgym  { background-image: url('https://images.unsplash.com/photo-1599058945522-28d584b6f0ff?auto=format&fit=crop&w=2400&q=80'); }

/* ---------- TIER EXTRAS ---------- */
.tier__eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-500); }
.tier--featured .tier__eyebrow { color: var(--light-blue); }
.tier__tag { font-size: 15px; color: var(--grey-600); line-height: 1.55; min-height: 60px; }
.tier--featured .tier__tag { color: rgba(255,255,255,0.78); }
.tier__list { list-style: none; border-top: 1px solid var(--grey-300); margin-top: 8px; padding-top: 16px; display: grid; gap: 12px; }
.tier--featured .tier__list { border-top-color: rgba(255,255,255,0.15); }
.tier__list li { font-size: 14px; letter-spacing: 0.02em; display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.tier__list li::before { content: "—"; color: var(--grey-500); flex-shrink: 0; }
.tier--featured .tier__list li::before { color: var(--light-blue); }
.tier .btn { margin-top: auto; align-self: flex-start; }

/* ---------- STEPS ---------- */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--grey-300);
  max-width: var(--max); margin: 0 auto;
}
.step { background: var(--paper); padding: 40px 36px; display: flex; flex-direction: column; gap: 12px; min-height: 260px; }
.step__num { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 300; font-size: 28px; color: var(--grey-500); }
.step h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 24px; letter-spacing: -0.005em; line-height: 1.15; }
.step p { font-size: 15px; color: var(--grey-600); line-height: 1.6; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* ---------- THREE-COL PRINCIPLES ---------- */
.three-col {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px;
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
}
.principle { display: flex; flex-direction: column; gap: 14px; }
.principle__num { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 300; font-size: 24px; color: var(--grey-500); }
.principle h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 26px; letter-spacing: -0.005em; line-height: 1.15; }
.principle p { font-size: 15px; color: var(--grey-700); line-height: 1.65; }
@media (max-width: 820px) { .three-col { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- CONTACT GRID ---------- */
.contact-grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--grey-300);
  max-width: var(--max); margin: 0 auto;
}
.contact-grid > li { background: var(--paper); padding: 28px 28px; display: flex; flex-direction: column; gap: 10px; }
.contact-grid h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 24px; letter-spacing: -0.005em; margin: 4px 0; }
.contact-grid p { font-size: 15px; color: var(--grey-700); line-height: 1.6; }
.contact-grid a { border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.contact-grid a:hover { border-bottom-color: currentColor; }
.micro-link { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-900); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.micro-link:hover { color: var(--light-blue-deep); }
@media (max-width: 1000px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- CAREERS ROLES LIST ---------- */
.roles { list-style: none; display: grid; gap: 2px; background: rgba(255,255,255,0.1); margin-top: 24px; }
.roles li {
  background: var(--ink-700); padding: 28px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
  transition: background 250ms ease;
}
.roles li:hover { background: var(--ink-500); }
.roles h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 22px; letter-spacing: -0.005em; color: var(--paper); margin-bottom: 4px; }
.roles p { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin: 0; }
.roles .micro-link { color: var(--light-blue); border-bottom-color: var(--light-blue); white-space: nowrap; }
@media (max-width: 640px) { .roles li { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* ---------- POLICIES ---------- */
.policies {
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
  display: grid; gap: 0; border-top: 1px solid var(--grey-300);
}
.policy { padding: 32px 0; border-bottom: 1px solid var(--grey-300); display: grid; grid-template-columns: 120px 1fr; gap: 48px; align-items: start; }
.policy .eyebrow { color: var(--grey-500); padding-top: 8px; }
.policy h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 26px; letter-spacing: -0.005em; margin-bottom: 12px; }
.policy p { font-size: 15px; color: var(--grey-700); line-height: 1.7; max-width: 72ch; }
@media (max-width: 820px) { .policy { grid-template-columns: 1fr; gap: 12px; } }

.legal-links {
  list-style: none;
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 48px;
}
.legal-links li { border-bottom: 1px solid var(--grey-300); padding: 16px 0; }
.legal-links a { font-size: 15px; color: var(--ink-900); transition: color 200ms ease; display: flex; justify-content: space-between; }
.legal-links a::after { content: "→"; color: var(--grey-500); transition: transform 200ms ease; }
.legal-links a:hover { color: var(--light-blue-deep); }
.legal-links a:hover::after { transform: translateX(4px); }
@media (max-width: 640px) { .legal-links { grid-template-columns: 1fr; } }

/* ---------- SCHEDULE TABLE (classes.html) ---------- */
table.schedule {
  width: 100%; border-collapse: collapse;
  font-size: 14px; letter-spacing: 0.01em;
}
table.schedule th, table.schedule td {
  padding: 18px 0; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
table.schedule th {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  color: var(--light-blue); padding-bottom: 14px;
}
table.schedule td { color: rgba(255,255,255,0.88); }
table.schedule td:first-child { color: var(--paper); font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 16px; letter-spacing: -0.005em; }
@media (max-width: 640px) {
  table.schedule, table.schedule thead, table.schedule tbody, table.schedule tr, table.schedule th, table.schedule td { display: block; }
  table.schedule thead { display: none; }
  table.schedule tr { border-bottom: 1px solid rgba(255,255,255,0.12); padding: 14px 0; }
  table.schedule td { padding: 2px 0; border: 0; }
  table.schedule td:first-child { font-size: 18px; margin-bottom: 6px; }
}

/* ---------- TEAM (trainer cards - direct content, no body wrap) ---------- */
.team { list-style: none; }
.team .trainer { padding: 0; background: var(--paper-warm); display: flex; flex-direction: column; }
.team .trainer .trainer__photo { aspect-ratio: 3/4; }
.team .trainer h4 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 24px;
  letter-spacing: -0.005em; padding: 24px 28px 4px; margin: 0;
}
.team .trainer .trainer__role { padding: 0 28px; margin-bottom: 14px; }
.team .trainer p:not(.trainer__role):not(.trainer__tags) {
  padding: 0 28px; margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--grey-700);
}
.trainer__tags {
  padding: 16px 28px 24px; margin-top: auto;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grey-500); border-top: 1px solid var(--grey-300);
}

/* ---------- JOURNAL GRID (journal.html detail cards) ---------- */
.journal-grid { list-style: none; }
.journal-grid .journal {
  display: flex; flex-direction: column;
  background: var(--paper-warm); overflow: hidden;
  transition: transform 350ms ease;
}
.journal-grid .journal:hover { transform: translateY(-3px); }
.journal__cover {
  aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  background-color: var(--ink-700);
  filter: saturate(0.45) contrast(1.02);
}
.journal__body { padding: 24px 28px 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.journal__body h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; color: var(--ink-900); }
.journal__body p { font-size: 15px; line-height: 1.6; color: var(--grey-700); }
.journal__meta { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--grey-300); }

/* =========================================================
   PRODUCTION LAYER — Accessibility, Motion, Mobile Nav, SEO polish
   (Added last so it overrides where needed)
========================================================= */

/* ---------- SKIP LINK (a11y) ---------- */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--ink-900); color: var(--paper);
  padding: 14px 22px; z-index: 999;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.skip-link:focus { left: 16px; top: 16px; outline: 2px solid var(--light-blue); }

/* ---------- FOCUS STATES ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--light-blue);
  outline-offset: 3px;
  border-radius: 1px;
}
.btn:focus-visible { outline-offset: 5px; }
a:focus-visible, button:focus-visible { outline-offset: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  /* WCAG 1.4.11 (Non-text Contrast): light-blue on paper = 2.2:1 (fails 3:1).
     Pair the underline color shift with a 2px outline at the same hue so the
     focus state is visible regardless of which background is behind the field. */
  outline: 2px solid var(--light-blue-deep);
  outline-offset: 2px;
  border-bottom-color: var(--light-blue-deep);
}

/* ---------- MOTION — slower, more deliberate (luxury posture) ---------- */
.btn { transition: all var(--dur-fast) var(--ease) !important; }
.btn__arrow { transition: transform var(--dur-fast) var(--ease); }
.nav, .nav__menu a, .nav__cta { transition: all var(--dur-fast) var(--ease) !important; }
.club, .trainer, .journal-grid .journal, .roles li { transition: all var(--dur-med) var(--ease) !important; }
.feature__media, .hero__bg { transition: transform 1.2s var(--ease); }

/* ---------- HERO TIGHTENING (display type) ---------- */
.hero__headline { line-height: 0.94; letter-spacing: -0.038em; max-width: 13ch; }
.hero__sub { font-size: 19px; max-width: 52ch; }
.apply__headline { letter-spacing: -0.035em; line-height: 0.94; }
.display { letter-spacing: -0.035em; }
.feature__headline { letter-spacing: -0.025em; line-height: 1.02; }

/* ---------- SCROLL REVEAL (activated by site.js) ---------- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 120ms; }
.reveal--delay-2 { transition-delay: 240ms; }
.reveal--delay-3 { transition-delay: 360ms; }

/* ---------- MOBILE NAV (hamburger + slide panel) ---------- */
.nav__toggle {
  display: none;
  position: relative;
  width: 40px; height: 40px;
  background: transparent; border: 0;
  padding: 0; cursor: pointer;
  z-index: 100;
}
.nav__toggle span {
  position: absolute; left: 8px; right: 8px;
  height: 1.5px; background: currentColor;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__toggle span:nth-child(1) { top: 14px; }
.nav__toggle span:nth-child(2) { top: 20px; }
.nav__toggle span:nth-child(3) { top: 26px; }
.nav-open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__drawer {
  display: none;
  position: fixed; inset: 0;
  background: var(--ink-900); color: var(--paper);
  z-index: 90;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 36px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease);
}
.nav-open .nav__drawer { opacity: 1; pointer-events: auto; }
.nav__drawer a {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400; font-size: clamp(28px, 6vw, 48px);
  letter-spacing: -0.02em; color: var(--paper);
  transition: color var(--dur-fast) var(--ease);
}
.nav__drawer a:hover { color: var(--light-blue); }
.nav__drawer .drawer__cta {
  margin-top: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.4); padding: 14px 28px;
}

@media (max-width: 920px) {
  .nav__toggle { display: block; }
  .nav__drawer { display: flex; }
  .nav__cta { display: none; }
  body.nav-open { overflow: hidden; }
}

/* ---------- IMAGE TREATMENT (editorial filter sitewide) ---------- */
.hero__bg, .feature__media, .trainer__photo, .journal__cover, .journal-card__img {
  filter: saturate(0.45) contrast(1.08) brightness(0.92);
}

/* ---------- PAGE NUMBER MARGINALIA (magazine sidebar) ---------- */
.page-meta {
  position: fixed; left: 24px; bottom: 24px;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--grey-500); writing-mode: vertical-rl; transform: rotate(180deg);
  z-index: 40; pointer-events: none;
  display: flex; gap: 16px; align-items: center;
}
.page-meta::before { content: ""; display: block; width: 32px; height: 1px; background: currentColor; }
@media (max-width: 1100px) { .page-meta { display: none; } }

/* ---------- TOUCH TARGETS ---------- */
a, button, input[type="submit"], .btn { min-height: 44px; }
.nav__menu a { padding: 10px 0; }

/* ---------- PURCHASE / DIRECT ENROLLMENT ---------- */
.demo-banner {
  background: var(--wood);
  color: var(--paper);
  text-align: center;
  padding: 12px 24px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.demo-banner strong { font-weight: 600; margin-right: 8px; }

.purchase {
  max-width: 1040px;
  margin: 0 auto;
  padding: 80px 32px;
  display: grid;
  gap: 80px;
}

.progress {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--grey-300);
  border-top: 1px solid var(--grey-300);
  border-bottom: 1px solid var(--grey-300);
}
.progress__step {
  background: var(--paper);
  padding: 18px 20px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-500);
  display: flex; align-items: baseline; gap: 10px;
}
.progress__step span {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-weight: 300; font-size: 14px;
  color: var(--grey-500);
}
.progress__step.is-active { color: var(--ink-900); }
.progress__step.is-active span { color: var(--light-blue-deep); }
/* Mobile: tighten so all 4 steps fit on a 375px screen without clipping */
@media (max-width: 600px) {
  .progress__step {
    padding: 14px 8px;
    gap: 6px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .progress__step span { font-size: 12px; }
}

.purchase__step { display: grid; gap: 24px; }

.pick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.pick {
  position: relative;
  border: 1px solid var(--grey-300);
  padding: 24px 28px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  display: block;
}
.pick:hover { border-color: var(--ink-900); background: var(--paper-warm); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:has(input:checked) { border-color: var(--ink-900); background: var(--ink-900); color: var(--paper); }
.pick:has(input:checked) .pick__eyebrow { color: var(--light-blue); }
.pick:has(input:checked) p { color: rgba(255,255,255,0.72); }
.pick--disabled { opacity: 0.55; pointer-events: none; }
.pick--disabled:has(input:disabled) { background: var(--paper-warm); cursor: not-allowed; }
.pick__eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--grey-500); margin-bottom: 10px;
}
.pick h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400; font-size: 26px;
  letter-spacing: -0.005em; margin-bottom: 6px;
}
.pick p { font-size: 14px; color: var(--grey-600); line-height: 1.5; }
@media (max-width: 720px) { .pick-grid { grid-template-columns: 1fr; } }

.tier-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--grey-300);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
  display: block;
}
.tier-card:hover { border-color: var(--ink-900); }
.tier-card input { position: absolute; opacity: 0; pointer-events: none; }
.tier-card:has(input:checked) { border-color: var(--ink-900); outline: 2px solid var(--ink-900); outline-offset: -3px; }
.tier-card--featured { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }
.tier-card--featured:has(input:checked) { outline-color: var(--light-blue); }
.tier-card__body { padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
.tier-card__body .tier__eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-500);
}
.tier-card--featured .tier__eyebrow { color: var(--light-blue); }
.tier-card__body .tier__name {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 28px;
  letter-spacing: -0.01em;
}
.tier__price { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 12px; }
.tier__amt {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: 44px; letter-spacing: -0.02em; line-height: 1;
}
.tier__per { font-size: 13px; color: var(--grey-500); }
.tier-card--featured .tier__per { color: rgba(255,255,255,0.7); }
.tier-card .tier__list {
  list-style: none; border-top: 1px solid var(--grey-300);
  margin-top: 8px; padding-top: 16px; display: grid; gap: 10px;
}
.tier-card--featured .tier__list { border-top-color: rgba(255,255,255,0.15); }
.tier-card .tier__list li {
  font-size: 13px; display: flex; gap: 10px; align-items: flex-start;
}
.tier-card .tier__list li::before { content: "—"; color: var(--grey-500); }
.tier-card--featured .tier__list li::before { color: var(--light-blue); }

.payment {
  display: grid; gap: 24px;
  border: 1px solid var(--grey-300);
  padding: 32px 32px 28px;
  background: var(--paper);
}
.payment__row { display: grid; gap: 8px; }
.payment__row label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500);
}
.payment__field {
  border: 1px solid var(--grey-300);
  padding: 14px 16px;
  background: var(--paper-warm);
  font-size: 16px; letter-spacing: 0.04em;
  color: var(--grey-500);
  min-height: 48px;
  display: flex; justify-content: space-between; align-items: center;
}
.payment__placeholder { font-family: 'SF Mono', Menlo, monospace; }
.payment__brand {
  font-size: 10px; letter-spacing: 0.22em; color: var(--grey-500); font-weight: 600;
}
.payment__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.payment__note {
  font-size: 12px; color: var(--grey-500); line-height: 1.55;
  border-top: 1px solid var(--grey-300); padding-top: 16px; margin-top: 4px;
}
.payment__secure {
  display: flex; justify-content: center;
  border: 1px solid var(--grey-300); padding: 14px;
  background: var(--paper-warm);
}
.payment__lock { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-600); }
@media (max-width: 640px) { .payment__grid { grid-template-columns: 1fr 1fr; } }

.review__summary {
  border: 1px solid var(--ink-900);
  padding: 40px 40px 32px;
  background: var(--paper);
  display: grid; gap: 20px;
}
.review__summary .eyebrow { color: var(--ink-900); }
.review__list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--grey-300); }
.review__list div {
  display: flex; justify-content: space-between;
  border-bottom: 1px solid var(--grey-300);
  padding: 14px 0;
  font-size: 14px;
}
.review__list dt { color: var(--grey-500); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.review__list dd { font-weight: 500; color: var(--ink-900); }
.review__total { border-top: 2px solid var(--ink-900); margin-top: 4px; padding-top: 16px !important; }
.review__total dt { color: var(--ink-900) !important; font-size: 12px !important; font-weight: 500; }
.review__total dd { font-family: 'Fraunces', Georgia, serif !important; font-size: 24px !important; font-weight: 400; }
.review__legal { font-size: 12px; color: var(--grey-500); line-height: 1.6; }
.review__consent {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 13px; line-height: 1.55; color: var(--grey-700);
  border-top: 1px solid var(--grey-300); padding-top: 20px;
}
.review__consent input { margin-top: 3px; flex-shrink: 0; }
.review__consent a { border-bottom: 1px solid currentColor; }
.review__cta { justify-self: start; margin-top: 8px; }
.review__alt { font-size: 13px; color: var(--grey-500); }
.review__alt a { border-bottom: 1px solid currentColor; }

/* =========================================================
   APP SECTION + DOWNLOAD BUTTONS (home page + global footer)
========================================================= */
.app-section {
  background: var(--ink-900);
  color: var(--paper);
  padding: 140px 32px;
  position: relative;
  overflow: hidden;
}
.app-section::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(154,180,212,0.12), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(139,111,78,0.06), transparent 50%);
  pointer-events: none;
}
.app-section__layout {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 96px;
  align-items: center;
  z-index: 2;
}
.app-section .eyebrow { color: var(--light-blue); margin-bottom: 24px; display: inline-block; }
.app-section__headline {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98; letter-spacing: -0.025em;
  margin-bottom: 28px;
}
.app-section__headline em { font-style: italic; color: var(--light-blue); }
.app-section__sub { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.75); max-width: 48ch; margin-bottom: 40px; }

.app-feature-list {
  list-style: none;
  display: grid; gap: 20px;
  margin-bottom: 44px;
}
.app-feature-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  align-items: start;
}
.app-feature-list svg {
  width: 24px; height: 24px;
  color: var(--light-blue);
  margin-top: 3px;
}
.app-feature-list strong {
  display: block;
  font-weight: 500; font-size: 15px;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
  color: var(--paper);
}
.app-feature-list p {
  font-size: 14px; line-height: 1.55;
  color: rgba(255,255,255,0.72);
}

.app-section .download-badges { justify-content: flex-start; margin-bottom: 20px; }
.app-section__alt { font-size: 13px; letter-spacing: 0.08em; color: rgba(255,255,255,0.72); }
.app-section__alt a { color: var(--light-blue); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- Phone mockup ---------- */
.phone-showcase {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 680px;
}
.phone-showcase__glow {
  position: absolute;
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(154,180,212,0.25), transparent 60%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}
.phone {
  position: relative;
  width: 320px; height: 648px;
  background: #1a1d24;
  border-radius: 44px;
  padding: 10px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.08),
    0 40px 80px -20px rgba(0,0,0,0.6),
    0 12px 24px -8px rgba(0,0,0,0.4);
  transform: rotate(-3deg);
  transition: transform var(--dur-slow) var(--ease);
  z-index: 1;
}
.phone:hover { transform: rotate(0deg); }
@media (prefers-reduced-motion: no-preference) {
  .phone { animation: phoneFloat 6s ease-in-out infinite; }
  @keyframes phoneFloat {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50%      { transform: rotate(-2deg) translateY(-10px); }
  }
}
.phone__screen {
  background: var(--ink-900);
  border-radius: 36px;
  width: 100%; height: 100%;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}
.phone__island {
  position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px;
  background: #000;
  border-radius: 14px;
  z-index: 10;
}

/* ---------- App UI inside the phone — matches real Level app ---------- */
/* NOTE: Phone frame stays dark matte; SCREEN is white to match the real app. */
.phone__screen { background: #ffffff; }

.app-ui {
  flex: 1;
  display: flex; flex-direction: column;
  background: #ffffff;
  color: #0F172A;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  position: relative;
  overflow: hidden;
}
.app-ui__status {
  position: absolute;
  top: 18px; left: 0; right: 0;
  z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 22px;
  font-size: 12px; font-weight: 600;
  letter-spacing: -0.01em;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}
.app-ui__time { padding-left: 4px; }
.app-ui__icons { display: inline-flex; align-items: center; gap: 5px; }
.app-ui__status svg { display: block; color: #0F172A; }
.app-ui__signal  { width: 15px; height: 10px; }
.app-ui__wifi    { width: 14px; height: 10px; }
.app-ui__battery { width: 22px; height: 10px; }

/* --- Brand block (top of app) --- */
.app-ui__brand {
  padding: 48px 20px 16px;
  text-align: center;
  border-bottom: 1px solid #F1F5F9;
  background: #ffffff;
}
/* 3-bar E — matches PNG logo letterform:
   top+bottom bars full width, middle bar 75% width (right edge retracts).
   Bar:gap ratio is 2:1 (bars 4px, gaps 2px) — matches real logo 40:20. */
.app-ui__brand-logo {
  display: flex; flex-direction: column;
  align-items: flex-start;        /* so explicit widths are respected */
  gap: 2px;
  width: 12px;
  margin: 0 auto;
}
.app-ui__brand-logo span {
  display: block;
  width: 12px;                     /* top + bottom bars (full width) */
  height: 4px;
  background: #0F172A;
  border-radius: 0.5px;
}
.app-ui__brand-logo span:nth-child(2) {
  width: 9px;                      /* middle bar, 75% of top/bottom */
}
.app-ui__brand-fitness {
  font-size: 6px; font-weight: 700;
  letter-spacing: 0.26em;
  color: #0F172A;
  margin-top: 5px;
}
.app-ui__brand-greeting {
  font-size: 10px; color: #64748B;
  margin: 10px 0 1px;
  font-style: italic;
}
.app-ui__brand-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500; font-size: 22px;
  letter-spacing: -0.01em;
  color: #0F172A;
  line-height: 1.1;
}

/* --- Scroll content region (grey bg like iOS list) --- */
.app-ui__content {
  flex: 1;
  padding: 14px 0 10px;
  background: #F8FAFC;
  overflow: hidden;
  position: relative;
}

/* --- Date header + carousel --- */
.app-ui__date-head {
  padding: 0 18px;
  font-size: 11px; font-weight: 600;
  color: #0F172A;
  margin-bottom: 8px;
}
.app-ui__dates {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 0 14px;
  margin-bottom: 12px;
}
.app-ui__date {
  text-align: center;
  padding: 5px 0 4px;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
}
.app-ui__date-num {
  display: block; font-size: 12px; font-weight: 700;
  color: #0F172A; line-height: 1;
}
.app-ui__date-day {
  display: block; font-size: 7px;
  color: #64748B; letter-spacing: 0.04em;
  margin-top: 2px;
}
.app-ui__date--active {
  background: #FEF3C7;
  border-color: #F59E0B;
}
.app-ui__date--active .app-ui__date-num { color: #78350F; }
.app-ui__date--active .app-ui__date-day { color: #92400E; }
.app-ui__date--active::after {
  content: ""; display: block;
  width: 3px; height: 3px; border-radius: 50%;
  background: #92400E;
  margin: 2px auto 0;
}

/* --- Row card (class / appointment) --- */
.app-ui__card-row {
  display: flex; align-items: flex-start; gap: 10px;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px;
  margin: 0 14px 6px;
  position: relative;
}
.app-ui__card-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: #F1F5F9;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.app-ui__card-icon svg { width: 14px; height: 14px; color: #0F172A; }
.app-ui__card-icon--red { background: #FEE2E2; }
.app-ui__card-icon--red svg { color: #DC2626; }
.app-ui__card-body { flex: 1; min-width: 0; padding-right: 14px; }
.app-ui__card-title {
  font-size: 12px; font-weight: 500;
  color: #0F172A; letter-spacing: -0.005em;
  line-height: 1.2;
}
.app-ui__card-sub {
  font-size: 9px; color: #94A3B8;
  margin: 2px 0 4px;
}
.app-ui__tag {
  display: inline-block;
  padding: 2px 7px;
  font-size: 8px; font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: 4px;
}
.app-ui__tag--class       { background: #FEF3C7; color: #92400E; }
.app-ui__tag--nutrition   { background: #FCE7F3; color: #BE185D; }
.app-ui__tag--appointment { background: #FEF3C7; color: #92400E; }
.app-ui__chevron {
  position: absolute; right: 10px; top: 14px;
  width: 12px; height: 12px; color: #CBD5E1;
}

/* --- Nutrition card (with rings) --- */
.app-ui__card-nutrition {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 12px 11px;
  margin: 0 14px 6px;
  position: relative;
}
.app-ui__nutrition-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  padding-right: 16px;
}
.app-ui__nutrition-head-title {
  font-size: 11px; font-weight: 500;
  color: #0F172A;
  flex: 1;
  letter-spacing: -0.005em;
}
.app-ui__rings {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2px; margin-bottom: 6px;
}
.app-ui__ring { text-align: center; }
.app-ui__ring-circle {
  width: 44px; height: 44px;
  margin: 0 auto 1px;
  position: relative;
}
.app-ui__ring-circle svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.app-ui__ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1;
}
.app-ui__ring-value {
  font-size: 8px; font-weight: 700;
  color: #0F172A;
}
.app-ui__ring-unit {
  font-size: 6px; color: #64748B;
  margin-top: 1px;
  letter-spacing: 0.02em;
}
.app-ui__ring-pct {
  display: block;
  font-size: 7px; color: #94A3B8;
  margin-top: 1px;
}

/* --- Show more --- */
.app-ui__show-more {
  text-align: center;
  font-size: 10px;
  color: #64748B;
  padding: 10px 0 14px;
}
.app-ui__show-more svg {
  display: block;
  width: 10px; height: 10px;
  margin: 3px auto 0;
  color: #94A3B8;
}

/* --- Floating action buttons --- */
.app-ui__fabs {
  position: absolute;
  right: 10px;
  top: 58%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 7px;
  z-index: 4;
}
.app-ui__fab {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 0;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15,23,42,0.12);
  color: white;
}
.app-ui__fab svg { width: 14px; height: 14px; }
.app-ui__fab--add  { background: #64748B; }
.app-ui__fab--user { background: #CBD5E1; color: #475569; }
.app-ui__fab--qr   { background: #334155; }

/* ---------- App-page: centered phone showcase + annotations ---------- */
.app-showcase {
  background: var(--ink-900);
  color: var(--paper);
  padding: 120px 32px 140px;
  position: relative;
  overflow: hidden;
}
.app-showcase::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(154,180,212,0.12), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(139,111,78,0.06), transparent 55%);
  pointer-events: none;
}
.app-showcase__head {
  position: relative; z-index: 2;
  max-width: 760px;
  margin: 0 auto 72px;
  text-align: center;
}
.app-showcase__head .eyebrow {
  color: var(--light-blue);
  display: inline-block;
  margin-bottom: 20px;
}
.app-showcase__headline {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.0; letter-spacing: -0.025em;
  margin-bottom: 20px;
  color: var(--paper);
}
.app-showcase__headline em { font-style: italic; color: var(--light-blue); }
.app-showcase__sub {
  font-size: 17px; line-height: 1.55;
  color: rgba(255,255,255,0.7);
  max-width: 52ch;
  margin: 0 auto;
}

/* Stage: phone centered, annotations flanking on desktop */
.app-showcase__stage {
  position: relative; z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 48px;
  align-items: center;
}
.app-showcase__annotations {
  display: flex; flex-direction: column;
  gap: 64px;
}
.app-showcase__annotations--left { justify-self: end; text-align: right; }
.app-showcase__annotations--right { justify-self: start; text-align: left; }
.phone-showcase--centered { min-height: 680px; }

.annotation {
  display: grid;
  gap: 6px;
  max-width: 220px;
  position: relative;
}
.annotation--right { padding-right: 40px; }
.annotation--left  { padding-left: 40px; }
.annotation--right::after,
.annotation--left::after {
  content: "";
  position: absolute;
  top: 14px;
  width: 28px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(154,180,212,0.5));
}
.annotation--right::after { right: 0; }
.annotation--left::after {
  left: 0;
  background: linear-gradient(to left, transparent, rgba(154,180,212,0.5));
}
.annotation__num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--light-blue);
  font-variant-numeric: tabular-nums;
}
.annotation strong {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: var(--paper);
  line-height: 1.2;
  margin-top: 4px;
}
.annotation p {
  font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,0.72);
  margin-top: 2px;
}
.app-showcase__caption {
  position: relative; z-index: 2;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-top: 56px;
}

@media (max-width: 1080px) {
  .app-showcase__stage { grid-template-columns: 1fr; gap: 40px; }
  .app-showcase__annotations { flex-direction: row; gap: 24px; justify-self: center !important; text-align: left !important; max-width: 680px; }
  .app-showcase__annotations--left  { order: 2; }
  .phone-showcase--centered         { order: 1; }
  .app-showcase__annotations--right { order: 3; }
  .annotation { padding: 0 !important; }
  .annotation--right::after, .annotation--left::after { display: none; }
}
@media (max-width: 640px) {
  .app-showcase { padding: 80px 24px 100px; }
  .app-showcase__annotations { flex-direction: column; }
}

@media (max-width: 900px) {
  .app-section__layout { grid-template-columns: 1fr; gap: 60px; }
  .phone-showcase { min-height: auto; order: 2; }
  .app-section__content { order: 1; text-align: center; }
  .app-section .download-badges { justify-content: center; }
  .app-feature-list { text-align: left; max-width: 420px; margin-left: auto; margin-right: auto; }
  .app-section { padding: 100px 24px; }
  .phone { width: 280px; height: 568px; }
}

/* ---------- "Up next" bridge — keeps eyes moving into the next chapter ---------- */
.up-next {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 96px auto 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
  text-decoration: none;
  color: var(--paper);
  transition: border-color var(--dur-med) var(--ease);
}
.up-next:hover { border-color: rgba(154,180,212,0.45); }
.up-next__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  font-weight: 500;
}
.up-next__chapter {
  display: flex; align-items: baseline; gap: 18px;
  min-width: 0;
}
.up-next__num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--light-blue);
  font-variant-numeric: tabular-nums;
}
.up-next__name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--paper);
  line-height: 1.25;
  transition: color var(--dur-med) var(--ease);
}
.up-next__name em {
  font-style: italic;
  color: rgba(255,255,255,0.72);
  transition: color var(--dur-med) var(--ease);
}
.up-next:hover .up-next__name em { color: var(--light-blue); }
.up-next__arrow {
  width: 36px; height: 36px;
  color: var(--light-blue);
  flex-shrink: 0;
  transition: transform var(--dur-med) var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .up-next__arrow { animation: upNextBounce 2.4s ease-in-out infinite; }
  @keyframes upNextBounce {
    0%, 100% { transform: translateY(0); opacity: 0.85; }
    50%      { transform: translateY(8px); opacity: 1; }
  }
}
.up-next:hover .up-next__arrow {
  animation: none;
  transform: translateY(4px) scale(1.08);
}
@media (max-width: 720px) {
  .up-next {
    grid-template-columns: 1fr auto;
    gap: 16px 24px;
    margin-top: 72px;
  }
  .up-next__label { grid-column: 1 / -1; order: -1; }
  .up-next__chapter { flex-wrap: wrap; gap: 8px 14px; }
  .up-next__arrow { width: 30px; height: 30px; }
}

.download-badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
  margin-bottom: 40px;
}
.download-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 28px;
  background: var(--paper);
  color: var(--ink-900);
  border-radius: 2px;
  min-height: 60px;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.download-btn:hover { transform: translateY(-2px); background: var(--light-blue); }
.download-btn svg { flex-shrink: 0; }
.download-btn__labels { display: flex; flex-direction: column; text-align: left; line-height: 1.1; }
.download-btn__label { font-size: 11px; letter-spacing: 0.08em; font-weight: 400; color: var(--grey-500); text-transform: uppercase; }
.download-btn__name { font-size: 18px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-900); }
/* Inverted version (for dark backgrounds using ink buttons) */
.download-btn--ink {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.35);
}
.download-btn--ink .download-btn__name { color: var(--paper); }
.download-btn--ink .download-btn__label { color: rgba(255,255,255,0.72); }
.download-btn--ink:hover { background: var(--paper); color: var(--ink-900); border-color: var(--paper); }
.download-btn--ink:hover .download-btn__name { color: var(--ink-900); }
.download-btn--ink:hover .download-btn__label { color: var(--grey-500); }

.app-section__alt { font-size: 13px; letter-spacing: 0.1em; color: rgba(255,255,255,0.72); }
.app-section__alt a { color: var(--light-blue); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- Global footer app banner ---------- */
.app-banner {
  background: var(--ink-900);
  color: var(--paper);
  padding: 28px 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.app-banner__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.app-banner__copy .eyebrow { color: var(--light-blue); margin-bottom: 8px; }
.app-banner__copy h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400; font-size: 28px;
  letter-spacing: -0.01em; margin-bottom: 4px;
  color: var(--paper);
}
.app-banner__copy p { font-size: 14px; color: rgba(255,255,255,0.65); }
.app-banner .download-badges { margin-bottom: 0; justify-content: flex-end; text-align: right; }
@media (max-width: 820px) {
  .app-banner__inner { grid-template-columns: 1fr; text-align: center; }
  .app-banner .download-badges { justify-content: center; }
}

/* =========================================================
   ACCOUNT / AUTH PAGES
========================================================= */
.auth {
  min-height: calc(100vh - var(--nav-h));
  background: var(--paper-warm);
  display: grid; place-items: center;
  padding: calc(var(--nav-h) + 48px) 24px 72px;
}
.auth__card {
  background: var(--paper);
  border: 1px solid var(--grey-300);
  padding: 56px 48px;
  width: 100%; max-width: 480px;
}
.auth__eyebrow { margin-bottom: 16px; }
.auth__headline {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400; font-size: 48px; line-height: 1.05;
  letter-spacing: -0.025em; margin-bottom: 16px;
}
.auth__headline em { color: var(--grey-500); font-style: italic; font-weight: 300; }
.auth__sub { font-size: 15px; color: var(--grey-600); line-height: 1.55; margin-bottom: 32px; }
.auth__form { display: grid; gap: 20px; }
.auth__form label {
  display: block; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grey-500); margin-bottom: 8px;
}
.auth__form input[type="text"],
.auth__form input[type="email"],
.auth__form input[type="tel"],
.auth__form input[type="password"] {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--grey-300);
  padding: 10px 0;
  font-family: inherit; font-size: 16px; color: var(--ink-900);
  outline: none;
  transition: border-color 200ms ease;
}
.auth__form input:focus { border-bottom-color: var(--ink-900); }
.auth__hint { font-size: 12px; color: var(--grey-500); margin-top: 6px; line-height: 1.5; }
.auth__remember, .auth__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--grey-700); line-height: 1.55; }
.auth__remember input, .auth__consent input { margin-top: 3px; }
.auth__consent a { border-bottom: 1px solid currentColor; }
.auth__error {
  font-size: 13px; color: #C0392B;
  background: rgba(192, 57, 43, 0.08);
  padding: 10px 14px;
  border-left: 2px solid #C0392B;
}
.auth__success {
  font-size: 13px; color: var(--ink-900);
  background: rgba(154, 180, 212, 0.15);
  padding: 10px 14px;
  border-left: 2px solid var(--light-blue-deep);
}
.auth__submit { justify-self: start; margin-top: 4px; }
.auth__footer {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--grey-300);
  font-size: 14px; color: var(--grey-700); line-height: 1.8;
}
.auth__footer a { border-bottom: 1px solid currentColor; }
.auth__fine { font-size: 12px; color: var(--grey-500); margin-top: 6px; }

/* ---------- Account dashboard ---------- */
.account__hero { padding: calc(var(--nav-h) + 60px) 0 40px; }
.account__welcome { font-size: clamp(40px, 6vw, 84px); line-height: 1; margin: 12px 0 16px; }
.account__meta { font-size: 14px; color: var(--grey-600); letter-spacing: 0.02em; }
.account__amount {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400; font-size: 28px;
  letter-spacing: -0.01em; margin-top: 8px;
}

.tabs {
  display: flex; gap: 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--grey-300);
  margin-bottom: 48px;
}
.tabs .tab {
  padding: 18px 24px;
  background: transparent; border: 0;
  font-family: inherit; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  color: var(--grey-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tabs .tab:hover { color: var(--ink-900); }
.tabs .tab.is-active { color: var(--ink-900); border-bottom-color: var(--ink-900); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }
.tab-panel[hidden] { display: none !important; }

/* ---------- VIDEO HERO BACKGROUND ---------- */
.hero__bg--video {
  background-image: none !important;
  filter: none !important;
  background-color: var(--ink-900);
}
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero__bg--video::before,
.hero__bg--video::after { z-index: 1; }

.feature__media--video {
  background-image: none !important;
  filter: none !important;
  background-color: var(--ink-900);
}
.feature__media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.feature__media--video::after { z-index: 1; }

/* ============================================================
   "A walk through" — cinematic chapter experience (clubs/somers.html)
   Each clip is its own viewport-tall chapter with editorial copy.
   Alternates left/right. Dark theme throughout.
   ============================================================ */
.walk {
  background: var(--ink-900);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.walk::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(154,180,212,0.06), transparent 50%);
  pointer-events: none; z-index: 0;
}
.walk__intro {
  padding: 140px 32px 80px;
  text-align: center;
  position: relative; z-index: 1;
}
.walk__intro .eyebrow { display: inline-block; margin-bottom: 24px; }
.walk__intro h2 { margin-bottom: 18px; }
.walk__intro p {
  font-size: 18px; line-height: 1.6;
  color: rgba(255,255,255,0.72);
  max-width: 56ch; margin: 0 auto;
}

/* Each chapter — alternating left/right layout */
.walk-chapter {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  min-height: 75vh;
  border-top: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.walk-chapter--reverse .walk-chapter__media { order: 2; }
.walk-chapter--reverse .walk-chapter__copy  { order: 1; }

.walk-chapter__media {
  position: relative;
  background: var(--ink-700);
  overflow: hidden;
  min-height: 60vh;
}
.walk-chapter__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.walk-chapter__media::after {
  /* subtle vignette for depth */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(10,14,26,0.35) 100%);
  pointer-events: none;
  z-index: 1;
}

.walk-chapter__copy {
  display: flex;
  align-items: center;
  padding: 80px clamp(40px, 6vw, 96px);
  position: relative;
}
.walk-chapter__copy > div { max-width: 480px; }

.walk-chapter__num {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--light-blue);
  margin-bottom: 28px;
}
.walk-chapter__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  color: var(--paper);
}
.walk-chapter__lede {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
}

/* Outro — closes the experience */
.walk__outro {
  padding: 120px 32px 140px;
  text-align: center;
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.walk__outro .eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  color: rgba(255,255,255,0.55);
}
.walk__outro-headline {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.0; letter-spacing: -0.02em;
  margin-bottom: 36px;
  color: var(--paper);
}
.walk__outro-headline em { font-style: italic; color: var(--light-blue); }

/* Mobile — stack vertically, video on top */
@media (max-width: 900px) {
  .walk__intro { padding: 100px 24px 56px; }
  .walk-chapter {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .walk-chapter--reverse .walk-chapter__media { order: 0; }
  .walk-chapter--reverse .walk-chapter__copy  { order: 1; }
  .walk-chapter__media { aspect-ratio: 16 / 9; min-height: auto; }
  .walk-chapter__copy { padding: 56px 24px 80px; }
  .walk__outro { padding: 80px 24px 100px; }
}

/* ---------- LOGO IMAGES (sharp SVG, sized per context) ---------- */
.nav__logo img, .footer__brand img, .nav__drawer img {
  display: block;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
  color: var(--paper);
}
.nav__logo { line-height: 0; }
/* Heights scaled up 1.56× to keep LEVEL wordmark same visible size now that
   logo.svg includes FITNESS subtitle (viewBox 720×250 vs old 720×160). */
.nav__logo img { height: 38px; color: var(--paper); }
.nav--light .nav__logo img { color: var(--ink-900); }
.footer__brand { line-height: 0; margin-bottom: 20px; }
.footer__brand img { height: 46px; color: var(--paper); }
@media (max-width: 640px) {
  .nav__logo img { height: 32px; }
}

/* ---------- MOTION (reduced) ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   COOKIE CONSENT BANNER — see assets/js/consent.js
   ============================================================ */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(10,14,26,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.08);
  color: var(--paper);
  animation: consentSlide 400ms var(--ease);
}
@keyframes consentSlide { from { transform: translateY(100%); } to { transform: translateY(0); } }
.consent__inner {
  max-width: 1280px; margin: 0 auto;
  padding: 18px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px; align-items: center;
}
.consent__title {
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--light-blue);
  margin-bottom: 4px;
  font-weight: 500;
}
.consent__copy p {
  font-size: 13px; line-height: 1.55;
  color: rgba(255,255,255,0.75);
  margin: 0; max-width: 72ch;
}
.consent__copy a { color: var(--light-blue); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.consent__actions { display: flex; gap: 10px; flex-shrink: 0; }
.consent__btn {
  padding: 10px 22px;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 500;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: var(--paper);
  transition: all var(--dur-med) var(--ease);
}
.consent__btn--ghost { border-color: rgba(255,255,255,0.2); }
.consent__btn--ghost:hover { border-color: rgba(255,255,255,0.72); }
.consent__btn--primary { background: var(--paper); color: var(--ink-900); }
.consent__btn--primary:hover { background: var(--light-blue); }
@media (max-width: 720px) {
  .consent__inner { grid-template-columns: 1fr; gap: 14px; padding: 16px 20px; }
  .consent__actions { justify-content: stretch; }
  .consent__btn { flex: 1; padding: 12px 16px; }
}

/* ============================================================
   MEMBERSHIP MODALS — change tier / freeze / cancel
   Native <dialog> with luxury editorial styling
   ============================================================ */
.modal {
  border: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink-900);
  max-width: 560px;
  width: calc(100vw - 48px);
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(10,14,26,0.45), 0 6px 16px rgba(10,14,26,0.18);
  animation: modal-rise 280ms var(--ease);
}
.modal::backdrop {
  background: rgba(10,14,26,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal__inner {
  position: relative;
  padding: 56px 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.modal__inner .eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--grey-500);
  margin-bottom: 12px;
}
.modal__close {
  position: absolute;
  top: 16px; right: 18px;
  width: 36px; height: 36px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: var(--grey-500);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
.modal__close:hover { background: var(--paper-cream); color: var(--ink-900); }

.modal__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 14px;
}
.modal__lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--grey-600);
  margin: 0 0 28px;
}
.modal__lede strong { color: var(--ink-900); font-weight: 500; }

.modal__field {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}
.modal__field label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-600);
  font-weight: 500;
}
.modal__field input,
.modal__field select,
.modal__field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--grey-300);
  padding: 10px 0;
  font: inherit;
  font-size: 16px;
  color: var(--ink-900);
  border-radius: 0;
  transition: border-color var(--dur-med) var(--ease);
}
.modal__field input:focus,
.modal__field select:focus,
.modal__field textarea:focus {
  border-bottom-color: var(--light-blue-deep);
  outline: none;
}
.modal__field textarea {
  resize: vertical;
  min-height: 70px;
  padding: 8px 0;
}
.modal__hint,
.modal__hint--inline {
  font-size: 12px;
  color: var(--grey-500);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.modal__hint--inline { margin-left: 6px; }

/* Tier picker (radio cards) */
.modal__tiers {
  border: 0; padding: 0; margin: 0 0 18px;
  display: grid; gap: 10px;
}
.modal__tier {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--grey-300);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}
.modal__tier:hover { border-color: var(--ink-900); }
.modal__tier:has(input:checked) {
  border-color: var(--ink-900);
  background: var(--paper-cream);
}
.modal__tier > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
.modal__tier-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  letter-spacing: -0.005em;
}
.modal__tier-price {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--grey-600);
}
.modal__tier input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--ink-900);
}

.modal__effective {
  background: var(--paper-cream);
  padding: 14px 18px;
  border-left: 2px solid var(--light-blue-deep);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-900);
  margin: 0 0 24px;
  border-radius: 0 4px 4px 0;
}
.modal__effective strong {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
}

.modal__error {
  background: rgba(220,38,38,0.08);
  border-left: 2px solid #dc2626;
  color: #b91c1c;
  padding: 10px 14px;
  font-size: 13px;
  margin: 0 0 18px;
  border-radius: 0 4px 4px 0;
}

.modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.modal__actions .btn { padding: 12px 22px; font-size: 11px; }

/* Success state — replaces form contents */
.modal__success {
  text-align: center;
  padding: 16px 0 4px;
}
.modal__success-icon {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border: 2px solid var(--light-blue-deep);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--light-blue-deep);
}
.modal__success-icon svg { width: 26px; height: 26px; }

@media (max-width: 560px) {
  .modal__inner { padding: 48px 28px 32px; }
  .modal__actions { flex-direction: column-reverse; align-items: stretch; }
  .modal__actions .btn { justify-content: center; }
}

/* ============================================================
   NEWSLETTER CAPTURE
   ============================================================ */
.newsletter {
  background: var(--ink-900);
  color: var(--paper);
  padding: 96px 32px;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.newsletter::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(154,180,212,0.08), transparent 50%);
  pointer-events: none;
}
.newsletter__inner {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto;
  text-align: center;
}
.newsletter__eyebrow {
  font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--light-blue);
  margin-bottom: 18px;
  display: inline-block;
}
.newsletter__headline {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.0; letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.newsletter__headline em { font-style: italic; color: var(--light-blue); }
.newsletter__sub {
  font-size: 16px; line-height: 1.55;
  color: rgba(255,255,255,0.65);
  max-width: 52ch;
  margin: 0 auto 36px;
}
.newsletter__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  max-width: 500px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color var(--dur-med) var(--ease);
}
.newsletter__form:focus-within { border-color: rgba(154,180,212,0.5); }
.newsletter__form input {
  background: transparent;
  border: 0;
  padding: 16px 20px;
  color: var(--paper);
  font: inherit;
  font-size: 14px;
  outline: none;
}
.newsletter__form input::placeholder { color: rgba(255,255,255,0.65); }
.newsletter__form button {
  background: var(--paper);
  color: var(--ink-900);
  border: 0;
  padding: 0 28px;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-med) var(--ease);
}
.newsletter__form button:hover { background: var(--light-blue); }
.newsletter__form button[disabled] { opacity: 0.5; cursor: wait; }
.newsletter__fine {
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-top: 18px;
}
.newsletter__success {
  padding: 16px 20px;
  background: rgba(154,180,212,0.1);
  border: 1px solid rgba(154,180,212,0.3);
  border-radius: 8px;
  color: var(--paper);
  font-size: 14px;
  max-width: 500px; margin: 0 auto;
}
.newsletter__error {
  padding: 12px 16px;
  background: rgba(220,38,38,0.1);
  border-left: 2px solid #ef4444;
  color: #fca5a5;
  font-size: 13px;
  margin-top: 16px;
  text-align: left;
  max-width: 500px; margin-left: auto; margin-right: auto;
  display: none;
}
@media (max-width: 640px) {
  .newsletter { padding: 72px 24px; }
  .newsletter__form { grid-template-columns: 1fr; }
  .newsletter__form button { padding: 14px 20px; }
}

/* ============================================================
   A11y helpers
   ============================================================ */
.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;
}

/* Payment fieldset needs to visually look like the old div — remove default
   fieldset chrome (border, padding) */
.payment__stripe[class] {
  border: 0; padding: 0; margin: 0;
  min-width: 0;
}
/* Payment "labels" above Stripe Element placeholders — styled like real <label>s */
.payment__label {
  display: block;
  font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 8px;
  font-weight: 500;
}


/* Account dashboard — quick-action buttons (replaces interactive-li anti-pattern) */
.contact-grid__item {
  display: block; width: 100%; text-align: left;
  background: transparent;
  border: 1px solid var(--grey-300);
  padding: 28px 24px;
  cursor: pointer;
  font-family: inherit; font-size: inherit; color: inherit;
  transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}
.contact-grid__item:hover,
.contact-grid__item:focus-visible {
  border-color: var(--ink-900);
  background: var(--paper-cream);
}
.contact-grid__item:focus-visible { outline: 2px solid var(--light-blue-deep); outline-offset: 2px; }
.contact-grid__item .eyebrow { display: block; margin-bottom: 8px; }
.contact-grid__item h4 { margin-bottom: 8px; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 22px; }
.contact-grid__item p { margin-bottom: 4px; color: var(--grey-600); }
.contact-grid__item .micro-link { display: inline-block; margin-top: 12px; color: var(--light-blue-deep); }


/* === 404 page (added 2026-04) === */
.notfound {
  min-height: calc(100vh - 80px);
  display: grid;
  place-items: center;
  padding: 96px 24px;
  background: var(--ink-900);
  color: var(--paper);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.notfound::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 18%, rgba(154,180,212,0.10), transparent 62%);
  pointer-events: none;
}
.notfound__inner { position: relative; z-index: 1; max-width: 580px; }
.notfound__eyebrow {
  color: var(--light-blue);
  display: inline-block;
  margin-bottom: 32px;
}
.notfound__headline {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: clamp(56px, 10vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.notfound__headline em { font-style: italic; color: var(--light-blue); font-weight: 300; }
.notfound__sub {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.68);
  max-width: 44ch;
  margin: 0 auto 40px;
}
.notfound__actions {
  display: flex; gap: 16px;
  justify-content: center; flex-wrap: wrap;
}
.notfound__links {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; gap: 36px;
  justify-content: center; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
}
.notfound__links a {
  color: rgba(255,255,255,0.70);
  text-decoration: none;
  transition: color var(--dur-med) var(--ease);
}
.notfound__links a:hover { color: var(--light-blue); }
.notfound__quote {
  margin-top: 48px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: rgba(255,255,255,0.6); /* WCAG AA: 7.0:1 against ink-900 (was 0.45 = 4.49:1, fail) */
  letter-spacing: 0.01em;
}
@media (max-width: 600px) {
  .notfound { padding: 72px 20px; }
  .notfound__links { gap: 24px; margin-top: 48px; }
  .notfound__quote { margin-top: 36px; }
}

/* === Club map embed (added 2026-04) === */
.club-map {
  background: var(--paper);
  color: var(--ink-900);
  padding: 120px 0;
}
.club-map__inner {
  width: 100%;
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding: 0 32px;
}
.club-map__inner .eyebrow {
  margin-bottom: 24px;
}
.club-map__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: var(--ls-h2);
  color: var(--ink-900);
  margin-bottom: 32px;
  max-width: 22ch;
}
.club-map__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--grey-500);
}
.club-map__directions {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 56px;
}
.club-map__directions a {
  color: var(--ink-900);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease);
}
.club-map__directions a:hover { color: var(--light-blue-deep); }
.club-map__embed {
  width: 100%;
  border: 1px solid var(--grey-300);
  background: var(--paper-cream);
  overflow: hidden;
  line-height: 0;
}
.club-map__embed iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}
@media (max-width: 640px) {
  .club-map { padding: 80px 0; }
  .club-map__title { margin-bottom: 24px; }
  .club-map__directions { margin-bottom: 40px; }
  .club-map__embed iframe { height: 320px; }
}

/* Port Chester launch list (added 2026-04) */
.port-chester-launch {
  background: var(--ink-900);
  color: var(--paper);
  padding: 120px 0;
}
.port-chester-launch__inner {
  width: 100%;
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding: 0 32px;
}
.port-chester-launch .eyebrow {
  color: var(--light-blue);
  margin-bottom: 24px;
}
.port-chester-launch h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: var(--ls-h2);
  color: var(--paper);
  margin-bottom: 24px;
  max-width: 16ch;
}
.port-chester-launch h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--light-blue);
}
.port-chester-launch__lede {
  color: rgba(251, 250, 247, 0.72);
  max-width: 52ch;
  margin-bottom: 48px;
  font-size: 17px;
  line-height: 1.6;
}
.port-chester-launch__form {
  display: flex;
  gap: 12px;
  max-width: 540px;
  flex-wrap: wrap;
}
.port-chester-launch__form input[type="email"] {
  flex: 1 1 260px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(251, 250, 247, 0.4);
  color: var(--paper);
  font-family: inherit;
  font-size: 17px;
  padding: 14px 0;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.port-chester-launch__form input[type="email"]::placeholder {
  color: rgba(251, 250, 247, 0.45);
}
.port-chester-launch__form input[type="email"]:focus {
  border-bottom-color: var(--light-blue);
}
.port-chester-launch__form button {
  background: var(--paper);
  color: var(--ink-900);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 16px 28px;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.port-chester-launch__form button:hover {
  background: var(--light-blue);
}
.port-chester-launch__form button:disabled {
  opacity: 0.6; cursor: wait;
}
.port-chester-launch__error {
  display: none;
  color: #FF8A8A;
  font-size: 13px;
  margin-top: 16px;
}
.port-chester-launch .newsletter__success {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--light-blue);
  max-width: 540px;
}
@media (max-width: 640px) {
  .port-chester-launch { padding: 80px 0; }
  .port-chester-launch__lede { margin-bottom: 32px; }
  .port-chester-launch__form button { width: 100%; }
}

/* === PWA install banner (added 2026-04) === */
/* Quiet, dismissible "Add to home screen" card.
   Sits below the consent banner (z-index 9999) so it never covers privacy choices.
   See assets/js/pwa-install.js for the show/dismiss logic. */
.pwa-banner {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: min(380px, calc(100vw - 48px));
  z-index: 9000;
  background: var(--paper);
  color: var(--ink-900);
  border: 1px solid var(--grey-300);
  border-radius: 6px;
  padding: 22px 22px 20px;
  box-shadow: 0 30px 80px rgba(10, 14, 26, 0.18), 0 6px 16px rgba(10, 14, 26, 0.08);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  pointer-events: none;
}
.pwa-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pwa-banner.is-leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 150ms var(--ease), transform 150ms var(--ease);
  pointer-events: none;
}
.pwa-banner__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pwa-banner__lockup {
  display: inline-block;
  height: 16px;
  color: var(--ink-900);
}
.pwa-banner__lockup svg {
  height: 100%;
  width: auto;
  display: block;
}
.pwa-banner__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  color: var(--grey-500);
  cursor: pointer;
  border: 0;
  transition: background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
.pwa-banner__close:hover {
  background: var(--paper-cream);
  color: var(--ink-900);
}
.pwa-banner__close svg { width: 16px; height: 16px; }
.pwa-banner__copy { margin-bottom: 18px; }
.pwa-banner__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink-900);
}
.pwa-banner__sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--grey-600);
  margin: 0;
}
.pwa-banner__ios {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey-600);
  background: var(--paper-cream);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 14px;
}
.pwa-banner__ios strong {
  font-weight: 500;
  color: var(--ink-900);
}
.pwa-banner__ios-icon {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--ink-900);
}
.pwa-banner__ios-icon svg { width: 16px; height: 16px; }
.pwa-banner__actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.pwa-banner__btn {
  padding: 12px 20px;
  font-size: 11px;
  letter-spacing: 0.16em;
  flex: 1;
  justify-content: center;
}
@media (max-width: 768px) {
  .pwa-banner {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 18px 20px 20px;
    box-shadow: 0 -8px 24px rgba(10, 14, 26, 0.12);
    transform: translateY(100%);
  }
  .pwa-banner.is-visible { transform: translateY(0); }
  .pwa-banner.is-leaving { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-banner,
  .pwa-banner.is-leaving {
    transition: opacity 0.01ms !important;
    transform: none !important;
  }
  .pwa-banner.is-visible { transform: none !important; }
}
.pwa-banner[data-reduced-motion] {
  transition: opacity 0.01ms !important;
  transform: none !important;
}
.pwa-banner[data-reduced-motion].is-visible { transform: none !important; }

/* === Account banners + empty states + receipts + preferences (added 2026-04) === */
/* Pending-cancellation / active-freeze banners shown above the dashboard tabs */
.account-banners { background: var(--paper-cream); border-bottom: 1px solid var(--paper-2); }
.account-banner { padding: 28px 0; border-top: 1px solid var(--paper-2); }
.account-banner:first-child { border-top: 0; }
.account-banner__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
}
.account-banner h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 6px 0 8px;
}
.account-banner h3 strong { font-weight: 500; font-style: italic; }
.account-banner p {
  color: var(--grey-600);
  font-size: 15px;
  max-width: 62ch;
}
.account-banner__actions { white-space: nowrap; }
.account-banner--cancel { background: linear-gradient(180deg, rgba(154,180,212,0.10), rgba(154,180,212,0.03)); }
.account-banner--freeze { background: linear-gradient(180deg, rgba(140,147,158,0.10), rgba(140,147,158,0.03)); }
@media (max-width: 720px) {
  .account-banner__inner { grid-template-columns: 1fr; }
  .account-banner__actions .btn { width: 100%; justify-content: center; }
}

/* Empty states (bookings + payments) */
.empty-state {
  text-align: center;
  padding: 64px 24px;
  border: 1px dashed var(--grey-300);
  border-radius: 4px;
  background: var(--paper);
  color: var(--grey-600);
}
.empty-state__icon {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--grey-500);
  opacity: 0.7;
}
.empty-state__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--ink-900);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.empty-state__sub { font-size: 14px; max-width: 44ch; margin: 0 auto; }

/* Payment row receipt button */
.policy--payment .policy__actions { margin: 12px 0 0; }
.policy__receipt {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--ink-900);
  border-bottom: 1px solid var(--grey-300);
  cursor: pointer;
  transition: border-color 150ms var(--ease), color 150ms var(--ease);
}
.policy__receipt:hover { color: var(--light-blue-deep); border-bottom-color: var(--light-blue-deep); }

/* Year-1 commitment block in cancel modal */
.modal__commitment {
  background: var(--paper-cream);
  border: 1px solid var(--paper-2);
  border-left: 3px solid var(--light-blue);
  padding: 14px 18px;
  margin: 16px 0 4px;
  border-radius: 2px;
}
.modal__commitment .eyebrow { color: var(--light-blue-deep); margin-bottom: 6px; }
.modal__commitment p { font-size: 14px; color: var(--grey-700); line-height: 1.6; }
.modal__commitment p strong { color: var(--ink-900); }

/* === Preferences page === */
.prefs { display: grid; gap: 56px; }
.prefs__group { display: grid; gap: 16px; }
.prefs__group .ed-head { margin-bottom: 0; }
.prefs__group > p { color: var(--grey-600); font-size: 15px; }
.prefs__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.prefs__row {
  border-top: 1px solid var(--paper-2);
}
.prefs__row:last-child { border-bottom: 1px solid var(--paper-2); }

.prefs__toggle {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 4px;
  cursor: pointer;
}
.prefs__toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.prefs__switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  background: var(--grey-300);
  border-radius: 999px;
  transition: background 200ms var(--ease);
  flex-shrink: 0;
  margin-top: 2px;
}
.prefs__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--paper);
  border-radius: 50%;
  transition: transform 200ms var(--ease);
  box-shadow: 0 1px 3px rgba(10,14,26,0.18);
}
.prefs__toggle input[type="checkbox"]:checked + .prefs__switch { background: var(--ink-900); }
.prefs__toggle input[type="checkbox"]:checked + .prefs__switch::after { transform: translateX(18px); }
.prefs__toggle input[type="checkbox"]:focus-visible + .prefs__switch {
  outline: 2px solid var(--light-blue);
  outline-offset: 3px;
}
.prefs__copy { display: grid; gap: 4px; }
.prefs__name { font-weight: 500; font-size: 16px; color: var(--ink-900); }
.prefs__sub { color: var(--grey-600); font-size: 14px; line-height: 1.5; }

.prefs__radios { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.prefs__radio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--grey-300);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.prefs__radio:hover { border-color: var(--ink-900); }
.prefs__radio input[type="radio"] { grid-row: span 2; accent-color: var(--ink-900); }
.prefs__radio:has(input[type="radio"]:checked) {
  border-color: var(--ink-900);
  background: var(--paper-cream);
}
.prefs__radio-name { font-weight: 500; font-size: 15px; }
.prefs__radio-sub { font-size: 13px; color: var(--grey-600); grid-column: 2; }

.prefs__error {
  background: rgba(176, 60, 60, 0.06);
  border: 1px solid rgba(176, 60, 60, 0.3);
  color: #B03C3C;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 14px;
}
.prefs__success {
  background: rgba(46, 125, 92, 0.06);
  border: 1px solid rgba(46, 125, 92, 0.3);
  color: #2E7D5C;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 14px;
}
.prefs__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 16px;
}
.prefs__legal {
  font-size: 13px;
  color: var(--grey-500);
  text-align: center;
  margin-top: 8px;
}
.prefs__legal a { border-bottom: 1px solid var(--grey-300); }
.prefs__legal a:hover { color: var(--light-blue-deep); border-bottom-color: var(--light-blue-deep); }

@media (max-width: 600px) {
  .prefs { gap: 40px; }
  .prefs__toggle { grid-template-columns: 48px 1fr; gap: 14px; padding: 18px 2px; }
  .prefs__actions { justify-content: stretch; }
  .prefs__actions .btn { flex: 1; justify-content: center; text-align: center; }
}

/* === Visit / Tour + Train Day page (added 2026-04) === */
/* Page-level utilities used on visit.html (and reusable) */
.section--ink {
  background: var(--ink-900);
  color: var(--paper);
}
.section--ink .eyebrow { color: var(--light-blue); }
.section--ink h2, .section--ink h3 { color: var(--paper); }
.section--ink p { color: var(--grey-300); }
.section--ink a:not(.btn) { color: var(--light-blue); border-bottom: 1px solid currentColor; }

.container--narrow {
  max-width: var(--max-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.ed-head--center { text-align: center; }
.ed-head--center .eyebrow { display: inline-block; }

/* Three-step "How it works" list — horizontal cards on dark sections.
   Note: this overrides ol.steps used on visit.html ONLY. The base .steps
   class (used by membership/join-pelham.html as a div) stays untouched. */
ol.steps {
  list-style: none;
  padding: 0;
  margin: 64px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  counter-reset: stepc;
  /* Reset the cell-separator grey background that .steps inherits from
     the base rule (line ~960). On visit.html the ol.steps sits on a dark
     ink section and the grey background otherwise shows through the 56px
     gap as a giant cream strip. */
  background: transparent;
}
.steps__item {
  position: relative;
  padding-top: 36px;
  border-top: 1px solid rgba(154, 180, 212, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.steps__num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--light-blue);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
.steps__item h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--paper);
  margin: 4px 0 4px;
}
.steps__item h3 em { font-style: italic; }
.steps__item p {
  color: var(--grey-300);
  line-height: 1.7;
  font-size: 15.5px;
  margin: 0;
}
@media (max-width: 900px) {
  ol.steps { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }
  .steps__item { padding-top: 28px; }
  .steps__item h3 { font-size: 26px; }
}

/* "What to bring" + "What we provide" checklists */
.checklist { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 8px; }
.checklist li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--grey-700);
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 8px;
  border-left: 1.5px solid var(--ink-900);
  border-bottom: 1.5px solid var(--ink-900);
  transform: rotate(-45deg);
  transform-origin: 0 100%;
  opacity: 0.85;
}
.checklist--given li::before { border-color: var(--light-blue-deep); }

/* Visit form — uniform card, consistent field heights, readable labels.
   Extends .form but overrides nearly all visual rules so every field
   (input / select / textarea / date) renders at the same height + style. */
.form--visit {
  display: grid;
  gap: 26px;
  max-width: 640px;
  margin: 56px auto 0;
  background: var(--paper);
  padding: 40px 36px 36px;
  border: 1px solid var(--paper-2);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(10,14,26,0.05);
}
.form--visit .form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 640px) {
  .form--visit .form__row { grid-template-columns: 1fr; gap: 22px; }
  .form--visit { padding: 28px 22px 24px; gap: 22px; }
}

/* Each labeled field is its own column-stack so labels + inputs align
   regardless of whether a hint follows. */
.form--visit .form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Readable sentence-case labels (overrides the small uppercase .form label) */
.form--visit label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-900);
  margin: 0;
  line-height: 1.4;
}
.form--visit .form__optional {
  font-size: 12px;
  font-weight: 400;
  color: var(--grey-500);
  letter-spacing: 0;
  font-style: italic;
  margin-left: 6px;
}

/* All inputs/selects/textareas share the same box, padding, height */
.form--visit input[type="text"],
.form--visit input[type="email"],
.form--visit input[type="tel"],
.form--visit input[type="date"],
.form--visit select,
.form--visit textarea {
  width: 100%;
  background: var(--paper-cream);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 12px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-900);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), box-shadow 150ms var(--ease);
  /* Establishes a consistent 44px height across browsers */
  min-height: 44px;
  box-sizing: border-box;
}
.form--visit textarea { min-height: 96px; resize: vertical; padding: 12px 14px; }
.form--visit input[type="date"] { font-family: inherit; line-height: 1.2; }

/* Custom select chevron (replaces native dropdown arrow for visual consistency) */
.form--visit select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%237A8291' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.form--visit input::placeholder,
.form--visit textarea::placeholder { color: var(--grey-500); opacity: 1; }

.form--visit input:hover,
.form--visit select:hover,
.form--visit textarea:hover { background: #F1EDE5; }

.form--visit input:focus,
.form--visit select:focus,
.form--visit textarea:focus {
  background: var(--paper);
  border-color: var(--ink-900);
  box-shadow: 0 0 0 3px rgba(154, 180, 212, 0.18);
}

.form--visit input:invalid:not(:placeholder-shown),
.form--visit select:invalid:not(:focus) { /* leave alone — don't shout at users mid-typing */ }

/* Hint sits under a field, half-size of label, italic, grey */
.form--visit .form__hint {
  display: block;
  font-size: 12.5px;
  font-style: italic;
  color: var(--grey-500);
  line-height: 1.45;
  margin-top: 2px;
}

/* "I'd like to bring one guest" checkbox row — aligned baseline with label */
.form--visit .form__check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  color: var(--grey-700);
  cursor: pointer;
  padding: 6px 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0;
}
.form--visit .form__check input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ink-900);
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
}
.form--visit .form__check input[type="checkbox"]:hover { background: transparent; }

/* Submit button alignment — left-aligned like a form CTA, full-width on mobile */
.form--visit .form__submit {
  justify-self: start;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .form--visit .form__submit { width: 100%; justify-content: center; }
}

/* Error banner */
.form__error {
  background: rgba(176, 60, 60, 0.06);
  border: 1px solid rgba(176, 60, 60, 0.3);
  color: #B03C3C;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 14px;
  margin: 0;
}

/* Legal footnote under form */
.form__legal {
  font-size: 13px;
  color: var(--grey-500);
  line-height: 1.6;
  margin: 12px 0 0;
}
.form__legal a { border-bottom: 1px solid var(--grey-300); }
.form__legal a:hover { color: var(--light-blue-deep); border-bottom-color: var(--light-blue-deep); }

/* === Visit cross-link styles (added 2026-04) === */
/* Tertiary link below hero CTA buttons — quiet "or visit first" prompt */
.hero__tertiary {
  margin-top: 18px;
  font-size: 14px;
  color: var(--paper);
  opacity: 0.85;
}
.hero__tertiary a {
  border-bottom: 1px solid rgba(255,255,255,0.4);
  transition: border-color 150ms var(--ease), color 150ms var(--ease);
}
.hero__tertiary a:hover { border-bottom-color: var(--light-blue); color: var(--light-blue); }

/* Apply section dual CTA */
.apply__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 32px;
}
@media (max-width: 600px) {
  .apply__actions { flex-direction: column; align-items: stretch; }
  .apply__actions .btn { width: 100%; justify-content: center; text-align: center; }
}

/* Membership-page bridge card — "before you commit, visit" */
.visit-bridge {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 36px 40px;
  background: var(--paper);
  border: 1px solid var(--paper-2);
  border-left: 3px solid var(--light-blue);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(10,14,26,0.04);
}
.visit-bridge__copy h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
  margin: 6px 0 10px;
}
.visit-bridge__copy p {
  color: var(--grey-700);
  font-size: 16px;
  line-height: 1.6;
  max-width: 56ch;
}
.visit-bridge__action { white-space: nowrap; text-align: right; }
@media (max-width: 720px) {
  .visit-bridge { grid-template-columns: 1fr; padding: 28px 24px; }
  .visit-bridge__action { text-align: left; white-space: normal; }
  .visit-bridge__action .btn { width: 100%; justify-content: center; }
  .visit-bridge__action .auth__hint { text-align: left !important; }
}

/* === Mobile word simplification (added 2026-04-27) ===
   Pattern: keep desktop copy untouched. Hide verbose phrases on mobile,
   reveal terser alternates. Use .desktop-only and .mobile-only inline,
   or wrap whole paragraphs with .mobile-shorter / .desktop-fuller pairs. */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
}
@media (min-width: 769px) {
  .mobile-only { display: none !important; }
}

/* === Nav utility zone (Sign in + Apply CTA, top-right) — added 2026-04-28 === */
.nav__utility {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-left: 40px;
}
.nav__login {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  padding: 8px 0;
  transition: color 200ms ease;
}
.nav__login:hover { color: var(--paper); }
.nav--light .nav__login { color: var(--grey-700); }
.nav--light .nav__login:hover { color: var(--ink-900); }
@media (max-width: 920px) {
  .nav__login { display: none; } /* mobile drawer handles auth links instead */
  .nav__utility { gap: 0; }
}

/* =========================================================
   PORT CHESTER WAITLIST POPUP (.pc-waitlist)
   First-visit modal on homepage. Uses native <dialog>.
========================================================= */
.pc-waitlist {
  /* Reset native dialog chrome */
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0;
  background: transparent;
  color: var(--paper);
  max-width: 520px;
  width: calc(100% - 32px);
  margin: auto;
  border-radius: 4px;
  overflow: visible;
  /* Smooth entrance — opacity only respects reduced motion */
  animation: pcWaitlistFadeIn 320ms ease;
}
.pc-waitlist::backdrop {
  background: rgba(10, 14, 26, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pcWaitlistBackdropFadeIn 240ms ease;
}
@keyframes pcWaitlistFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pcWaitlistBackdropFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-waitlist,
  .pc-waitlist::backdrop { animation: none; }
}

.pc-waitlist__inner {
  background: linear-gradient(180deg, var(--ink-700) 0%, var(--ink-900) 100%);
  padding: 44px 36px 32px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  position: relative;
}
.pc-waitlist__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  background: rgba(255,255,255,0.10);
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
  z-index: 2;
}
.pc-waitlist__close svg {
  width: 18px; height: 18px;
  display: block;
}
.pc-waitlist__close:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.4);
  transform: scale(1.05);
}
.pc-waitlist__close:active { transform: scale(0.95); }
.pc-waitlist__close:focus-visible {
  outline: 2px solid var(--light-blue);
  outline-offset: 2px;
}

.pc-waitlist__eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--light-blue);
  margin-bottom: 16px;
}
.pc-waitlist__headline {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin: 0 0 14px;
}
.pc-waitlist__headline em { font-style: italic; color: rgba(255,255,255,0.85); }

.pc-waitlist__sub {
  color: rgba(255,255,255,0.74);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 22px;
}

.pc-waitlist__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pc-waitlist__input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 2px;
  color: var(--paper);
  font-family: inherit;
  font-size: 16px; /* prevents iOS zoom on focus */
  transition: border-color 200ms ease, background 200ms ease;
}
.pc-waitlist__input::placeholder { color: rgba(255,255,255,0.4); }
.pc-waitlist__input:focus {
  outline: none;
  border-color: var(--light-blue);
  background: rgba(255,255,255,0.06);
}

/* honeypot — visually hidden but still in the DOM */
.pc-waitlist__hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.pc-waitlist__submit {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
}
.pc-waitlist__submit[aria-busy="true"] { opacity: 0.7; cursor: progress; }

.pc-waitlist__fine {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.5);
  text-align: center;
}

.pc-waitlist__error {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: rgba(255,90,90,0.08);
  border: 1px solid rgba(255,90,90,0.32);
  border-radius: 2px;
  color: #FFB5B5;
  font-size: 13px;
  line-height: 1.5;
}

.pc-waitlist__success {
  margin: 18px 0 0;
  padding: 16px;
  background: rgba(154,180,212,0.10);
  border: 1px solid rgba(154,180,212,0.32);
  border-radius: 2px;
  color: var(--paper);
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
}

.pc-waitlist__tertiary {
  margin: 22px 0 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.pc-waitlist__tertiary a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}
.pc-waitlist__tertiary a:hover {
  color: var(--paper);
  border-bottom-color: var(--light-blue);
}

/* mobile — bottom-sheet style */
@media (max-width: 600px) {
  .pc-waitlist {
    width: 100%;
    max-width: none;
    margin: 0;
    margin-top: auto;
    border-radius: 12px 12px 0 0;
    border: 0;
    align-self: end;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
  }
  .pc-waitlist__inner {
    border-radius: 12px 12px 0 0;
    padding: 36px 24px 28px;
    /* respect iOS home-bar safe-area */
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
  .pc-waitlist__headline { font-size: 26px; }
  @keyframes pcWaitlistFadeIn {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* =========================================================
   MOBILE SPACING — iPhone-focused overrides
   Added last so it wins against the desktop rules above.
   Targets: 320 / 375 (SE) / 390 (12-15) / 393 (Pro) / 430 (Pro Max).

   ⚠️  EXTEND THIS BLOCK — don't append a second mobile-spacing pass.
       A future maintainer adding new mobile rules at the bottom of the
       file will create a specificity duel with this one. Add your rule
       inside the matching @media block below (or add a new breakpoint
       inline) so all phone-only spacing lives in one place.
========================================================= */

/* ── 768px and under: tablet → phone shared reductions ── */
@media (max-width: 768px) {
  /* Container side padding — was 32px, makes content cramped at iPhone widths */
  .container,
  .container-narrow { padding: 0 22px; }
  .hero__content { padding: 0 22px; }

  /* Vertical section padding — was 120/80/160 (massive on phone) */
  .section { padding: 72px 0; }
  .section--tight { padding: 48px 0; }
  .section--loose { padding: 96px 0; }

  /* Editorial heading block — was 72px bottom margin */
  .ed-head { margin: 0 auto 48px; padding: 0 22px; }
  .ed-head h2 { margin: 16px 0 12px; }

  /* Hero — heavy desktop padding shrinks; sub-headline tightens */
  .hero { padding: 96px 0 88px; }
  .hero__headline { margin-bottom: 24px; }
  .hero__sub { margin-bottom: 32px; font-size: 17px; }
  .hero__eyebrow { margin-bottom: 20px; }
  .hero--short { padding-bottom: 56px; min-height: 56vh; }

  /* App section — was 140px each side */
  .app-section { padding: 88px 22px; }

  /* App banner — was 40px 32px; tighten + ensure download badges have room */
  .app-banner { padding: 36px 22px; }

  /* Apply CTA section — was 140px vertical, massive on a phone */
  .apply { padding: 88px 0; }
  .apply__sub { margin: 0 auto 32px; }

  /* Tier cards (membership + purchase pages) — was 48px 40px / 40px 32px */
  .tier { padding: 36px 28px; }
  .tier-card__body { padding: 32px 24px; }

  /* Contact + auth cards — were 40px+ all around */
  .contact-grid > li { padding: 32px 26px; min-height: 0; }
  .auth { padding: calc(var(--nav-h) + 32px) 18px 56px; }
  .auth__card { padding: 40px 28px; }
  .auth__headline { font-size: 36px; }

  /* Feature blocks (alternating editorial sections) — already stack at 900px;
     tighten the body padding so stacked images + text don't waste space */
  .feature__body { padding: 44px 22px; }
  .feature__media { min-height: 280px; }

  /* Footer — was 80/40 + 56gap + 64 margin-bottom */
  footer { padding: 56px 0 32px; }
  footer .container { gap: 36px; margin-bottom: 40px; }
}

/* ── 600px and under: true mobile sizing ── */
@media (max-width: 600px) {
  .container,
  .container-narrow { padding: 0 18px; }
  .hero__content { padding: 0 18px; }

  .section { padding: 56px 0; }
  .section--tight { padding: 40px 0; }
  .section--loose { padding: 72px 0; }

  .ed-head { margin: 0 auto 36px; padding: 0 18px; }

  /* ── Hero rebuild for phone ──
     Desktop pins content to the bottom of a 100svh hero — feels cinematic.
     On a phone that pin creates a giant dark sky above the content and
     squeezes the headline / eyebrow / buttons / ticker into a thin strip.
     Switch to vertical-centered content with tight, predictable padding,
     so each element gets clean rhythm and the hero still looks intentional. */
  .hero {
    min-height: 88svh;
    align-items: center;
    padding: 64px 0 88px;     /* extra bottom for the absolute ticker */
  }
  /* Inner-page short hero gets the same vertical-center treatment so
     the headline doesn't pin to the very bottom edge on phones */
  .hero--short {
    min-height: 52vh;
    align-items: center;
    padding: 48px 0 56px;
  }
  .hero__eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
    letter-spacing: 0.2em;
    gap: 10px;
  }
  .hero__eyebrow::before { width: 22px; }

  /* Headline — scale way down from the 48px minimum so it stops wrapping
     into 4 narrow lines on iPhone widths */
  .hero__headline {
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.06;
    max-width: 22ch;
    margin-bottom: 16px;
  }

  .hero__sub {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 24px;
    max-width: 38ch;
  }

  /* Component-level mobile tightening across all pages ────────── */
  .apply { padding: 64px 0; }
  .apply__sub { margin: 0 auto 24px; font-size: 16px; }
  .apply__headline { margin-bottom: 8px; }

  .tier { padding: 28px 22px; gap: 14px; }
  .tier-card__body { padding: 26px 20px; }
  .tier__name { font-size: 26px; }
  .tier__lede { min-height: 0; }

  .contact-grid > li { padding: 26px 22px; }

  .auth { padding: calc(var(--nav-h) + 24px) 16px 48px; }
  .auth__card { padding: 32px 22px; }
  .auth__headline { font-size: 30px; margin-bottom: 12px; }
  .auth__sub { margin-bottom: 24px; }

  .app-banner { padding: 32px 18px; }
  .app-banner__copy h3 { font-size: 22px; }

  .feature__body { padding: 36px 18px; }
  .feature__media { min-height: 240px; }

  /* Demo-banner (debug strip at top of demo deploys) — tighter on mobile */
  .demo-banner { padding: 10px 18px; font-size: 11px; }

  /* Hero CTAs stack full-width — two long labels don't crash into each other */
  .hero__actions {
    flex-direction: column;
    gap: 10px;
  }
  .hero__actions .btn { width: 100%; justify-content: center; }

  /* Hero ticker — clear the iPhone home-bar + give it a touch more breathing room */
  .hero__ticker {
    padding: 12px 18px max(12px, env(safe-area-inset-bottom)) 18px;
    font-size: 9px;
    letter-spacing: 0.16em;
    gap: 8px;
  }

  .app-section { padding: 64px 18px; }

  /* Footer goes single column on real iPhones; clean column flow */
  footer { padding: 48px 0 28px; }
  footer .container {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 18px;
    margin-bottom: 32px;
  }
  footer .container > div { padding: 0; }
  .footer__bottom { padding: 24px 18px 0; }
  .footer__bottom { font-size: 11px; gap: 6px; }
}

/* ── 380px and under: small phones (iPhone SE / Mini) ── */
@media (max-width: 380px) {
  .container,
  .container-narrow { padding: 0 16px; }
  .hero__content { padding: 0 16px; }
  .section { padding: 48px 0; }
  .section--tight { padding: 32px 0; }
  .hero {
    min-height: 86svh;
    padding: 48px 0 80px;
  }
  .hero--short { padding: 40px 0 48px; min-height: 48vh; }
  .hero__headline { font-size: clamp(28px, 9vw, 38px); margin-bottom: 14px; }
  .hero__sub { font-size: 15px; line-height: 1.5; margin-bottom: 22px; }
  .hero__eyebrow { margin-bottom: 12px; font-size: 9.5px; }
  .app-section { padding: 56px 16px; }
  .apply { padding: 48px 0; }
  .tier { padding: 24px 18px; }
  .tier-card__body { padding: 22px 16px; }
  .auth__card { padding: 28px 18px; }
  .auth__headline { font-size: 28px; }
  .app-banner { padding: 28px 16px; }
  .app-banner__copy h3 { font-size: 20px; }
  .feature__body { padding: 32px 16px; }
}

/* ── Consent banner — respect iPhone home-bar (was anchored bottom: 0) ── */
@media (max-width: 600px) {
  .consent {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}