/* assistant hebrew (self-hosted) */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400 800;
  font-display: block;
  src: url(../fonts/assistant-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* assistant latin (self-hosted) */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400 800;
  font-display: block;
  src: url(../fonts/assistant-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* karantina hebrew (self-hosted) */
@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(../fonts/karantina-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* karantina latin (self-hosted) */
@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(../fonts/karantina-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =====================================================================
   tokens.css · Studio Ms Fitness design system · v1.0
   Layout concept: warm blush floors lit from above, and ONE bold plane per
   section: the studio's own hot-pink wall. Pink is a signal or that one
   plane, never wallpaper. White cards stand on the floor.

   Tier 1 · primitives  raw values. The ONLY place a hex code may live.
   Tier 2 · semantic    roles. Re-brand or re-theme by editing this tier.
   Tier 3 · component   per-component knobs, built from tier 2.
   Rule: colours come from tier 2/3 only, never a primitive or a literal colour.
   The shared scales (space, size, weight, radius, shadow, motion, z) may be read
   directly; any other recurring value gets a tier-3 knob (e.g. --tap-min).
   ===================================================================== */
:root {
  color-scheme: light;

  /* ---------- Tier 1 · primitives ---------- */

  /* Pink: OKLCH ramp on the logo's hue (350°). 500 is the logo itself. */
  --pink-50:  #FFF3F8;
  --pink-100: #FFE6F0;
  --pink-200: #FECFE4;
  --pink-300: #FFA9D1;
  --pink-400: #FF6DBA;
  --pink-500: #E61198;
  --pink-600: #CB0185;
  --pink-700: #A7006D;
  --pink-800: #7F0652;
  --pink-900: #570C38;

  /* Neutral: grey biased toward the pink hue, so it reads warm, not office-cold */
  --gray-0:   #FFFFFF;
  --gray-25:  #FDFAFC;
  --gray-50:  #F9F6F8;
  --gray-100: #F1EDF0;
  --gray-200: #E5DFE3;
  --gray-300: #D3CBD0;
  --gray-400: #AAA2A7;
  --gray-500: #867D83;
  --gray-600: #696066;
  --gray-700: #4D454A;
  --gray-800: #322C30;
  --gray-900: #1E191C;

  /* Type families */
  --font-display: "Karantina", "Assistant", "Arial Hebrew", system-ui, sans-serif;
  --font-body: "Assistant", "Segoe UI", "Arial Hebrew", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale: min at 360px viewport → max at 1280px */
  --size-xs:  clamp(0.8125rem, 0.788rem + 0.1087vw, 0.875rem);  /* 13→14 */
  --size-sm:  clamp(0.9375rem, 0.913rem + 0.1087vw, 1rem);      /* 15→16 */
  --size-md:  clamp(1.0625rem, 1.038rem + 0.1087vw, 1.125rem);  /* 17→18 */
  --size-lg:  clamp(1.1875rem, 1.114rem + 0.3261vw, 1.375rem);  /* 19→22 */
  --size-xl:  clamp(1.375rem, 1.228rem + 0.6522vw, 1.75rem);    /* 22→28 */
  --size-2xl: clamp(1.75rem, 1.505rem + 1.087vw, 2.375rem);     /* 28→38 */
  --size-3xl: clamp(2.125rem, 1.685rem + 1.957vw, 3.25rem);     /* 34→52 */
  --size-4xl: clamp(2.875rem, 1.75rem + 5vw, 5.75rem);          /* 46→92 */

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-display: 0.98;
  --leading-snug: 1.3;
  --leading-body: 1.65;

  /* Space: 4px base */
  --space-1: 0.25rem;  /*   4 */
  --space-2: 0.5rem;   /*   8 */
  --space-3: 0.75rem;  /*  12 */
  --space-4: 1rem;     /*  16 */
  --space-5: 1.5rem;   /*  24 */
  --space-6: 2rem;     /*  32 */
  --space-7: 3rem;     /*  48 */
  --space-8: 4rem;     /*  64 */
  --space-9: 6rem;     /*  96 */
  --space-10: 8rem;    /* 128 */

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* Elevation: shadows tinted with pink-900, never pure black */
  --shadow-1: 0 1px 2px color-mix(in srgb, var(--pink-900) 7%, transparent);
  --shadow-2: 0 2px 4px color-mix(in srgb, var(--pink-900) 5%, transparent),
              0 8px 20px -6px color-mix(in srgb, var(--pink-900) 14%, transparent);
  --shadow-3: 0 6px 14px color-mix(in srgb, var(--pink-900) 6%, transparent),
              0 28px 56px -18px color-mix(in srgb, var(--pink-900) 26%, transparent);

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layers */
  --z-header: 50;
  --z-sticky: 60;
  --z-menu: 70;

  /* ---------- Tier 2 · semantic ---------- */

  --color-bg: var(--gray-0);
  --color-bg-subtle: var(--gray-50);       /* light-grey sections */
  --color-bg-tint: var(--pink-50);         /* pink-washed sections & blocks */
  --color-surface: var(--gray-0);          /* cards */
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-600);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-border-brand: var(--pink-200);

  --color-brand: var(--pink-500);          /* logo pink: graphics & icons only, never body text */
  --color-brand-strong: var(--pink-700);   /* pink TEXT: links, eyebrows, emphasis */
  --color-brand-soft: var(--pink-100);
  --color-highlight: var(--pink-200);      /* marker behind key words */

  /* The wall: the studio's hot-pink feature wall, the ONE bold plane per section.
     Text on it uses only --color-on-wall / --color-on-wall-muted, and never sits on
     the lit top edge (--color-wall-lit: white is 4.29:1, fails). The lightest point
     text may touch is --color-wall: white 5.41:1, pink-100 4.59:1. */
  --color-wall-lit: var(--pink-500);
  --color-wall: var(--pink-600);
  --color-wall-shade: var(--pink-700);
  --color-on-wall: var(--gray-0);
  --color-on-wall-muted: var(--pink-100);

  /* The floor: a lit blush surface, pink-100 fading to pink-50 */
  --color-bg-tint-lit: var(--pink-100);
  --color-text-muted-on-tint: var(--gray-700);   /* 7.87:1 on pink-100, 8.57:1 on pink-50 */

  --color-cta: var(--pink-600);
  --color-cta-hover: var(--pink-700);
  --color-cta-active: var(--pink-800);
  --color-on-cta: var(--gray-0);

  --color-focus: var(--pink-700);
  --focus-width: 3px;
  --focus-offset: 3px;

  --font-heading: var(--font-display);
  --font-text: var(--font-body);

  --container-max: 75rem;
  --container-gutter: clamp(1rem, 0.6087rem + 1.739vw, 2rem);   /* 16→32 */
  --measure: 62ch;
  --section-pad-block: clamp(4rem, 3.217rem + 3.478vw, 6rem);  /* 64→96 */

  /* ---------- Tier 3 · component ---------- */

  --btn-height: 3rem;              /* 48px touch target */
  --btn-height-lg: 3.5rem;         /* 56px */
  --tap-min: 2.75rem;              /* 44px: smallest touch target anywhere */
  --btn-height-sm: var(--tap-min);  /* header only */
  --btn-pad-inline: var(--space-5);
  --btn-pad-inline-lg: var(--space-6);
  --btn-radius: var(--radius-pill);
  --btn-gap: var(--space-2);
  --btn-font-size: var(--size-md);
  --btn-font-weight: var(--weight-bold);
  --btn-cta-bg: var(--color-cta);
  --btn-cta-bg-hover: var(--color-cta-hover);
  --btn-cta-bg-active: var(--color-cta-active);
  --btn-cta-fg: var(--color-on-cta);
  --btn-cta-shadow: 0 8px 20px -8px color-mix(in srgb, var(--color-cta) 60%, transparent);
  --btn-secondary-bg: var(--color-surface);
  --btn-secondary-fg: var(--color-brand-strong);
  --btn-secondary-border: var(--color-border-brand);

  --chip-height: 2.25rem;
  --chip-radius: var(--radius-pill);
  --chip-pad-inline: var(--space-3);
  --chip-bg: var(--color-brand-soft);
  --chip-fg: var(--color-brand-strong);

  --card-radius: var(--radius-lg);
  --card-pad: var(--space-5);
  --card-shadow: var(--shadow-2);

  --header-height: 4rem;
  --header-bg: var(--color-surface);   /* opaque: no backdrop blur to pay for */

  --media-radius: var(--radius-xl);
  --promise-tick-bg: var(--color-cta);
  --promise-tick-fg: var(--color-on-cta);

  /* Conversion layer (human-first law): the knobs that keep every section scannable */
  --sub-max: 34ch;                               /* a section subtitle never wraps past ~2 lines */
  --proof-size: var(--size-md);                  /* hero proof chips */
  --foot-gap: var(--space-3);                    /* section-end action row */

  /* Hero: blush floor, pink-wall masthead (< 60em), wall plate behind the arch (>= 60em).
     var() inside these resolves on :root, so override --wall-lit-reach on :root only. */
  --floor-reach: 22rem;
  --floor-bg: linear-gradient(to bottom, var(--color-bg-tint-lit), var(--color-bg-tint) var(--floor-reach));
  --hero-bg: var(--floor-bg);
  --hero-text-muted: var(--color-text-muted-on-tint);
  --hero-rule: var(--color-border-brand);
  --hero-frame-shadow: var(--shadow-3);
  --wall-lit-reach: var(--space-6);   /* text never starts above this line: masthead padding-top == reach */
  --wall-bg: linear-gradient(to bottom, var(--color-wall-lit) 0, var(--color-wall) var(--wall-lit-reach), var(--color-wall-shade) 160%);
  --wall-pad-block: var(--wall-lit-reach) var(--space-6);
  --wall-fg: var(--color-on-wall);
  --wall-fg-muted: var(--color-on-wall-muted);
  --wall-mark-bg: var(--color-on-wall);
  --wall-mark-fg: var(--color-brand-strong);
  --plate-bg: linear-gradient(to bottom, var(--color-wall-lit), var(--color-wall-shade));
  --plate-overhang: var(--space-7);
  --nc-overhang: var(--space-5);
  --wall-focus: var(--color-on-wall);   /* 5.41:1 on --color-wall; pink-700 would be 1.36:1 */

  /* Sections: white (deliberate) or the lit blush floor; at most one wall plane each */
  --section-white-bg: var(--color-bg);
  --section-floor-bg: var(--floor-bg);
  --section-muted: var(--color-text-muted);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-lift: var(--shadow-2);

  /* Schedule */
  --day-bg: var(--color-surface);
  --day-head-bg: var(--color-surface);
  --day-head-fg: var(--color-text);
  --day-today-bg: var(--wall-bg);
  --day-today-fg: var(--color-on-wall);
  --slot-rule: var(--color-border);
  --slot-time-fg: var(--color-brand-strong);
  --tab-bg: var(--color-surface);
  --tab-fg: var(--color-text);
  --tab-border: var(--color-border-brand);
  --tab-selected-bg: var(--color-brand-soft);   /* soft: the today header is the section's one bold plane */
  --tab-selected-fg: var(--color-brand-strong); /* 6.23:1 on pink-100 */
  --tab-dot: var(--color-brand);

  /* Pricing */
  --trial-bg: var(--color-brand-soft);          /* soft: the featured tier is the section's one wall */
  --trial-border: var(--color-border-brand);
  --trial-price-fg: var(--color-brand-strong);  /* 6.23:1 on pink-100 */
  --tier-bg: var(--card-bg);
  --tier-border: var(--card-border);
  --tier-featured-bg: var(--wall-bg);
  --tier-featured-fg: var(--color-on-wall);
  --tier-featured-muted: var(--color-on-wall-muted);
  --tier-featured-lift: -0.5rem;                /* desktop: the featured tier stands taller */
  --badge-bg: var(--color-cta);
  --badge-fg: var(--color-on-cta);

  /* Classes (goal cards) */
  --goal-bg: var(--color-bg-tint);
  --goal-wall-bg: var(--wall-bg);
  --chip-btn-bg: var(--color-surface);
  --chip-btn-border: var(--color-border-brand);
  --chip-btn-on-bg: var(--color-cta);
  --chip-btn-on-fg: var(--color-on-cta);

  /* Reviews */
  --quote-featured-bg: var(--wall-bg);
  --quote-featured-fg: var(--color-on-wall);
  --quote-mark: var(--color-on-wall-muted);
  --carousel-btn-border: var(--color-border-brand);

  /* Team */
  --coach-lead-bg: var(--wall-bg);
  --coach-lead-fg: var(--color-on-wall);
  --coach-lead-muted: var(--color-on-wall-muted);
  --coach-mono-bg: var(--color-brand-soft);
  --coach-mono-fg: var(--color-brand-strong);
  --coach-mono-size: 3.5rem;
  --coach-mono-size-lead: 5rem;

  /* FAQ */
  --faq-accent: var(--color-border-brand);      /* closed: a quiet pink edge */
  --faq-accent-open: var(--color-cta);          /* open: the brand pink marks where you are */
  --faq-accent-width: 4px;

  /* Inner pages (classes, hub, areas, articles) */
  --crumbs-fg: var(--color-text-muted);
  --page-hero-bg: var(--floor-bg);
  --fact-bg: var(--wall-bg);                      /* the page header's one wall plane */
  --fact-fg: var(--color-on-wall);
  --fact-muted: var(--color-on-wall-muted);
  --when-offer-bg: var(--wall-bg);
  --article-measure: 42rem;
  --faq-item-bg: var(--color-bg-tint);           /* FAQ sits on white: tinted rows, not white on white */
  --faq-q-open-fg: var(--color-brand-strong);   /* 7.33:1 on white */
  --ask-bg: var(--wall-bg);
  --ask-fg: var(--color-on-wall);
  --ask-fg-muted: var(--color-on-wall-muted);

  /* Gallery */
  --tile-row: 9.5rem;                           /* bento row unit; 13rem from 64em */
  --gallery-strip-h: 17rem;                     /* phones: the single swipe row */
  --tile-radius: var(--card-radius);
  --tile-shadow: var(--shadow-2);
  --tile-label-bg: var(--color-surface);        /* solid chip: legible on any photo */
  --tile-label-fg: var(--color-brand-strong);   /* 7.33:1 */
  --tile-play-bg: var(--color-surface);
  --tile-play-fg: var(--color-cta);
  --tile-play-size: 3.5rem;
  --tile-quote-bg: var(--wall-bg);
  --tile-quote-fg: var(--color-on-wall);
  --tile-quote-muted: var(--color-on-wall-muted);
  --lightbox-scrim: color-mix(in srgb, var(--color-text) 88%, var(--color-wall-shade));   /* plum-black, not grey */
  --lightbox-fg: var(--color-on-wall);
  --lightbox-fg-muted: var(--color-on-wall-muted);
  --lightbox-btn-border: color-mix(in srgb, var(--color-on-wall) 45%, transparent);

  /* Contact */
  --reach-bg: var(--card-bg);
  --reach-icon-bg: var(--color-brand-soft);
  --reach-icon-fg: var(--color-brand-strong);
  --reach-icon-size: 2.75rem;
  --tag-bg: var(--color-brand-soft);
  --tag-fg: var(--color-brand-strong);
  --lead-bg: var(--wall-bg);
  --lead-fg: var(--color-on-wall);
  --lead-fg-muted: var(--color-on-wall-muted);
  --field-height: var(--btn-height);
  --field-bg: var(--color-surface);
  --field-fg: var(--color-text);
  --field-border: var(--color-border-strong);
  --field-radius: var(--radius-md);
  --field-invalid: var(--color-text);            /* on the wall a dark ring reads; red on pink would not */

  /* Footer */
  --footer-bg: color-mix(in srgb, var(--color-text) 86%, var(--color-wall-shade));
  --footer-fg: var(--color-on-wall);
  --footer-muted: var(--color-on-wall-muted);
  --footer-rule: color-mix(in srgb, var(--color-on-wall) 18%, transparent);
  --tick-size-sm: 1.4rem;
  --tick-icon-sm: 0.8rem;
  --tick-nudge: 0.1em;
  --pill-pad-block: 2px;
  --link-underline-offset: 0.25em;

  --action-bar-height: calc(var(--btn-height) + 2 * var(--space-3) + 1px);   /* derived: 12 + 48 + 12 + 1px border */
}


/* =====================  base  ===================== */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); }
/* Keep focused elements and anchor targets clear of the sticky header and the fixed action bar */
html { scroll-padding-block: calc(var(--header-height) + var(--space-3)) var(--space-3); }
@media (max-width: 47.99em) {
  html { scroll-padding-block-end: calc(var(--action-bar-height) + env(safe-area-inset-bottom, 0px) + var(--space-3)); }
}
.site {
  font-family: var(--font-text);
  font-size: var(--size-md);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.site img { max-inline-size: 100%; display: block; }
.site :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
.site :where(h1, h2, h3) { text-wrap: balance; }
.site p { text-wrap: pretty; }
/* zero specificity, so every component class (.btn, .nav__link…) wins over it */
:where(.site a) { color: var(--color-brand-strong); }
.site :where(a, button, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
code, pre { font-family: var(--font-mono); }
code { direction: ltr; unicode-bidi: isolate; }
.ltr { direction: ltr; unicode-bidi: isolate; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.container {
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.icon { inline-size: 1.25em; block-size: 1.25em; flex: none; }
.icon--stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Direction-aware icons: drawn pointing "forward" in LTR, mirrored in RTL */
[dir="rtl"] .icon--forward { transform: scaleX(-1); }
.icon--back { transform: scaleX(-1); }
[dir="rtl"] .icon--back { transform: none; }

.skip-link {
  position: absolute; inset-inline-start: var(--space-4); inset-block-start: var(--space-2);
  z-index: calc(var(--z-menu) + 1);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--color-cta); color: var(--color-on-cta); font-weight: var(--weight-bold);
  text-decoration: none; transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* =====================  components  ===================== */

/* Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap);
  min-block-size: var(--btn-height);
  padding-inline: var(--btn-pad-inline);
  border: 2px solid transparent; border-radius: var(--btn-radius);
  font: inherit; font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn--cta { background: var(--btn-cta-bg); color: var(--btn-cta-fg); box-shadow: var(--btn-cta-shadow); }
.btn--cta:hover { background: var(--btn-cta-bg-hover); }
.btn--cta:active { background: var(--btn-cta-bg-active); transform: translateY(1px); }
.btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); }
.btn--secondary:hover { background: var(--color-bg-tint); border-color: var(--color-brand-strong); }
.btn--ghost { background: transparent; color: var(--color-brand-strong); }
.btn--ghost:hover { background: var(--color-bg-tint); }
.btn--lg { min-block-size: var(--btn-height-lg); padding-inline: var(--btn-pad-inline-lg); font-size: var(--size-lg); }
.btn--sm { min-block-size: var(--btn-height-sm); padding-inline: var(--space-4); font-size: var(--size-sm); }

/* Chip */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-block-size: var(--chip-height); padding-inline: var(--chip-pad-inline);
  border-radius: var(--chip-radius); background: var(--chip-bg); color: var(--chip-fg);
  font-size: var(--size-sm); font-weight: var(--weight-bold);
}

/* Stars */
.stars { display: inline-flex; gap: 2px; color: var(--color-brand); }
.stars .icon { inline-size: 1.05rem; block-size: 1.05rem; fill: currentColor; }

/* Proof chips: the three reasons to say yes, readable in one glance */
.proof { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; margin: 0; padding: 0; }
.proof__item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--proof-size); font-weight: var(--weight-black); color: var(--color-text); }
.promise__tick {
  display: grid; place-items: center; flex: none;
  inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%;
  background: var(--promise-tick-bg); color: var(--promise-tick-fg);
}
.promise__tick .icon { inline-size: 1rem; block-size: 1rem; stroke-width: 3; }

/* Next-class card */
.next-class {
  display: grid; gap: var(--space-1);
  inline-size: min(100%, 20rem);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-3);
}
.next-class__label {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--size-xs); font-weight: var(--weight-bold); color: var(--color-brand-strong);
}
.next-class__name {
  font-family: var(--font-heading); font-size: var(--size-2xl); line-height: 1;
  color: var(--color-text); padding-block-start: var(--space-1);
}
.next-class__meta { font-size: var(--size-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.next-class__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-block-size: var(--tap-min); justify-self: start;
  font-size: var(--size-sm); font-weight: var(--weight-bold); text-decoration: none;
}
.next-class__link:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.pulse {
  inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--color-brand);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-brand) 55%, transparent);
  animation: pulse 2.2s var(--ease-out) 2;   /* 4.4s total, under the 5s limit of WCAG 2.2.2 */
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 0.5rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* =====================  header  ===================== */
.site-header {
  position: sticky; inset-block-start: env(safe-area-inset-top, 0px); z-index: var(--z-header);
  background: var(--header-bg);
  border-block-end: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-4);
  min-block-size: var(--header-height);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-inline-end: auto; color: inherit; text-decoration: none;
  min-block-size: var(--tap-min);
}
.brand__mark { block-size: 2.6rem; inline-size: auto; }
.brand__text { display: grid; line-height: 1; }
.brand__name { font-family: var(--font-heading); font-size: 1.9rem; color: var(--color-brand-strong); line-height: 0.9; }
.brand__latin {
  font-size: 0.625rem; font-weight: var(--weight-bold); letter-spacing: 0.2em;
  color: var(--color-text-muted); direction: ltr; unicode-bidi: isolate; text-align: end;
}
.nav { display: none; }
.nav__list { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; min-block-size: var(--tap-min);
  color: var(--color-text); font-size: var(--size-sm); font-weight: var(--weight-semibold); text-decoration: none;
}
.nav__link { min-inline-size: var(--tap-min); justify-content: center; }
.nav__link:hover { color: var(--color-brand-strong); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
.header-cta { display: none; }
.menu-btn {
  display: grid; place-items: center;
  inline-size: var(--tap-min); block-size: var(--tap-min); padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
}
.menu-btn .icon { inline-size: 1.4rem; block-size: 1.4rem; }
.mobile-menu {
  position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: var(--z-menu);
  background: var(--color-bg); border-block-end: 1px solid var(--color-border); box-shadow: var(--shadow-3);
  padding-block: var(--space-3) var(--space-5);
}
/* Open menu: dim the page below it (a downward-only shadow) and stop it scrolling */
.mobile-menu:not([hidden]) { box-shadow: var(--shadow-3), 0 0 0 100vmax rgb(20 10 16 / 0.45); clip-path: inset(0 0 -100vmax 0); }
html:has(.mobile-menu:not([hidden])) { overflow: hidden; }
.mobile-menu__list { list-style: none; margin: 0; padding: 0; display: grid; }
.mobile-menu__link {
  display: flex; align-items: center; justify-content: space-between;
  min-block-size: 3.25rem; padding-inline: var(--space-2);
  border-block-end: 1px solid var(--color-border);
  color: var(--color-text); font-size: var(--size-lg); font-weight: var(--weight-bold); text-decoration: none;
}
.mobile-menu__link .icon { color: var(--color-text-muted); }
.mobile-menu__cta { margin-block-start: var(--space-4); inline-size: 100%; }

@media (min-width: 48em) {
  .header-cta { display: inline-flex; }
}
@media (min-width: 64em) {
  :root { --header-height: 4.5rem; }
  .nav { display: block; }
  .menu-btn, .mobile-menu { display: none; }
}

/* =====================  hero  ===================== */
.hero { padding-block: 0 var(--section-pad-block); overflow-x: clip; background: var(--hero-bg); }
.hero__grid { display: grid; gap: var(--space-7); align-items: center; }
.hero__copy { display: grid; gap: var(--space-5); min-inline-size: 0; }
.hero__masthead { display: grid; gap: var(--space-5); }
.eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2);
  font-size: var(--size-sm); font-weight: var(--weight-bold); color: var(--color-brand-strong);
}
.eyebrow .icon { inline-size: 1.1em; block-size: 1.1em; }
.eyebrow__sep { inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--color-border-strong); }
.hero__title { display: grid; gap: var(--space-2); }
.hero__brand {
  font-family: var(--font-text); font-size: var(--size-lg); font-weight: var(--weight-black);
  color: var(--hero-text-muted); line-height: var(--leading-snug);
}
.hero__headline {
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  font-size: var(--size-4xl); line-height: var(--leading-display);
  color: var(--color-text);
}
.hero__headline mark {
  color: var(--color-brand-strong);
  background: linear-gradient(transparent 62%, var(--color-highlight) 62% 90%, transparent 90%);
  padding-inline: 0.06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero__lead { font-size: var(--size-lg); line-height: 1.55; color: var(--hero-text-muted); max-inline-size: var(--measure); }
.hero__lead strong { color: var(--color-text); font-weight: var(--weight-bold); white-space: nowrap; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__actions .btn { flex: 1 1 auto; }
.hero__price { font-size: var(--size-sm); color: var(--hero-text-muted); margin-block-start: calc(var(--space-2) - var(--space-5)); }
.hero__price strong { color: var(--color-text); }
.hero__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5);
  padding-block-start: var(--space-4); border-block-start: 1px solid var(--hero-rule);
  font-size: var(--size-sm); color: var(--hero-text-muted);
}
.hero__trust strong { color: var(--color-text); font-weight: var(--weight-black); }
.hero__reviews-link { color: inherit; text-decoration: underline; text-decoration-color: var(--color-border-brand); text-underline-offset: var(--link-underline-offset); }
.hero__reviews-link:hover { color: var(--color-brand-strong); }

.hero__media { position: relative; isolation: isolate; min-inline-size: 0; }
.hero__frame {
  position: relative; overflow: hidden;
  border-radius: var(--media-radius);
  background: var(--color-brand-soft);
  aspect-ratio: 4 / 3; max-inline-size: 100%;
}
.hero__frame picture { display: contents; }
.hero__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero__media .next-class {
  position: relative; z-index: 1;
  margin-block-start: calc(-1 * var(--space-8));
  margin-inline-start: var(--space-4);
}

/* Mobile + tablet: the eyebrow and H1 stand on the pink wall, full bleed under the header */
@media (max-width: 59.99em) {
  .hero__masthead {
    gap: var(--space-4);
    margin-inline: calc(-1 * var(--container-gutter));
    padding-block: var(--wall-pad-block);
    padding-inline: var(--container-gutter);
    background: var(--wall-bg);
    color: var(--wall-fg);
  }
  .hero__masthead .eyebrow,
  .hero__masthead .hero__headline { color: var(--wall-fg); }
  .hero__masthead .hero__brand { color: var(--wall-fg-muted); }
  .hero__masthead .eyebrow__sep { background: var(--wall-fg-muted); }
  .hero__masthead .hero__headline mark {
    color: var(--wall-mark-fg); background: var(--wall-mark-bg);
    padding-inline: 0.12em; border-radius: var(--radius-xs);
  }
  .hero__masthead :focus-visible { outline-color: var(--wall-focus); }
  /* The lit floor starts under the wall, not behind it */
  .hero { background: var(--color-bg-tint); }
  .hero__copy { isolation: isolate; }
  .hero__masthead { position: relative; }
  .hero__masthead::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset-inline: 0; inset-block-start: 100%;
    block-size: var(--floor-reach);
    background: var(--floor-bg);
  }
}
@media (min-width: 40em) {
  .hero__actions .btn { flex: 0 0 auto; }
}
@media (min-width: 60em) {
  .hero { padding-block-start: var(--space-8); }
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-8); }
  .hero__media { justify-self: end; inline-size: min(100%, 30rem); }
  /* The arch: semicircular top (50% of width = 40% of a 4:5 height) */
  .hero__frame {
    aspect-ratio: 4 / 5;
    border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 40% 40% var(--radius-lg) var(--radius-lg);
    box-shadow: var(--hero-frame-shadow);
  }
  /* Offset plate behind the arch: the pink wall, scaled to the photo (no text on it) */
  .hero__media::before {
    content: ""; position: absolute; z-index: -1;
    inset-block: var(--space-6) calc(-1 * var(--plate-overhang));
    inset-inline: var(--space-6) calc(-1 * var(--plate-overhang));
    border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 40% 40% var(--radius-lg) var(--radius-lg);
    background: var(--plate-bg);
    pointer-events: none;
  }
  .hero__media .next-class {
    position: absolute; margin: 0;
    inset-block-end: var(--space-7);
    inset-inline-start: calc(-1 * var(--nc-overhang));
  }
}


/* =====================  sections  ===================== */
.section { padding-block: var(--section-pad-block); background: var(--section-white-bg); }
.section--floor { background: var(--section-floor-bg); --section-muted: var(--color-text-muted-on-tint); }
.section__inner { display: grid; gap: var(--space-7); }
.section__head { display: grid; gap: var(--space-3); max-inline-size: var(--measure); }
.section__eyebrow { font-size: var(--size-sm); font-weight: var(--weight-bold); color: var(--color-brand-strong); }
.section__title {
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  font-size: var(--size-3xl); line-height: var(--leading-display); color: var(--color-text);
}
.section__sub { font-size: var(--size-lg); font-weight: var(--weight-semibold); color: var(--section-muted); max-inline-size: var(--sub-max); }
.section__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--foot-gap) var(--space-5); }
.section__foot-note { font-size: var(--size-sm); color: var(--section-muted); }
@media (max-width: 47.99em) { .section__foot .btn { inline-size: 100%; } }

/* Text on any wall plane */
.on-wall :focus-visible, .goal--wall :focus-visible, .price-tier--featured :focus-visible, .ask :focus-visible { outline-color: var(--wall-focus); }
.btn--on-wall { background: var(--color-on-wall); color: var(--color-brand-strong); }
.btn--on-wall:hover { background: var(--color-brand-soft); }
.chip--quiet { background: var(--color-bg-subtle); color: var(--color-text); font-weight: var(--weight-semibold); }
.chip--on-wall { background: var(--color-on-wall); color: var(--color-brand-strong); }

/* ---------- classes: goal cards ---------- */
.goals { display: grid; gap: var(--space-4); align-items: start; }
.goal {
  display: grid; gap: var(--space-2); align-content: start; min-inline-size: 0;
  padding: var(--card-pad); background: var(--goal-bg); border-radius: var(--card-radius);
}
.goal__count { font-size: var(--size-xs); font-weight: var(--weight-bold); color: var(--color-brand-strong); }
.goal__title { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-3xl); line-height: 1; }
.goal__tagline { font-size: var(--size-sm); color: var(--color-text-muted-on-tint); }
.goal__classes { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.cls {
  display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--tap-min); padding-inline: var(--space-4);
  border: 1px solid var(--chip-btn-border); border-radius: var(--radius-pill); background: var(--chip-btn-bg); color: var(--color-text);
  font: inherit; font-size: var(--size-sm); font-weight: var(--weight-bold); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cls:hover { border-color: var(--color-brand-strong); }
.cls[aria-expanded="true"] { background: var(--chip-btn-on-bg); border-color: var(--chip-btn-on-bg); color: var(--chip-btn-on-fg); }
.cls__flag { padding-inline: var(--space-1); border-radius: var(--radius-pill); background: var(--color-brand-soft); color: var(--color-brand-strong); font-size: var(--size-xs); }
.cls-panel {
  display: grid; gap: var(--space-2); justify-items: start; margin-block-start: var(--space-1);
  padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-2);
}
.cls-panel[hidden] { display: none; }
.cls-panel__name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-2xl); line-height: 1; }
.cls-panel__desc { margin: 0; font-size: var(--size-md); }
.cls-panel__tags { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); list-style: none; margin: 0; padding: 0; }
.cls-panel__tags li {
  padding-block: var(--pill-pad-block); padding-inline: var(--space-3); border-radius: var(--radius-pill);
  background: var(--color-brand-soft); color: var(--color-brand-strong); font-size: var(--size-xs); font-weight: var(--weight-bold);
}
.cls-panel__who { margin: 0; font-size: var(--size-sm); color: var(--color-text-muted); }
.cls-panel__when { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--tap-min); font-size: var(--size-sm); font-weight: var(--weight-bold); color: var(--color-brand-strong); text-decoration: none; }
.cls-panel__when:hover { text-decoration: underline; text-underline-offset: var(--link-underline-offset); }
.goal--wall .cls-panel :focus-visible { outline-color: var(--color-focus); }
/* The section's one wall plane: the goal that holds the flagship class */
.goal--wall { padding-block-start: var(--wall-lit-reach); background: var(--goal-wall-bg); color: var(--wall-fg); box-shadow: var(--shadow-3); }
.goal--wall .goal__count, .goal--wall .goal__tagline { color: var(--wall-fg-muted); }
.goal--wall .cls { border-color: transparent; }
.goal--wall .cls[aria-expanded="true"] { background: var(--color-brand-strong); color: var(--color-on-wall); box-shadow: inset 0 0 0 2px var(--color-on-wall); }
@media (min-width: 64em) { .goals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- schedule ---------- */
.week { display: grid; gap: var(--space-4); }
.week__tabs { display: flex; gap: var(--space-2); }
.week__tab {
  flex: 1 1 0; display: grid; justify-items: center; gap: 2px;
  min-block-size: var(--btn-height-lg); padding-block: var(--space-2); padding-inline: var(--space-1);
  border: 1px solid var(--tab-border); border-radius: var(--radius-md);
  background: var(--tab-bg); color: var(--tab-fg); font: inherit; cursor: pointer;
}
.week__tab-letter { font-family: var(--font-heading); font-size: var(--size-xl); line-height: 1; }
.week__tab-name { font-size: var(--size-xs); }
.week__tab--today .week__tab-letter::after {
  content: ""; display: block; inline-size: 6px; block-size: 6px; margin-block-start: 2px; margin-inline: auto;
  border-radius: 50%; background: var(--tab-dot);
}
.week__tab[aria-selected="true"] { background: var(--tab-selected-bg); color: var(--tab-selected-fg); border-color: var(--tab-selected-fg); box-shadow: inset 0 0 0 1px var(--tab-selected-fg); }
@media (max-width: 22.49em) { .week__tabs { gap: var(--space-1); } }
.week__tab[aria-selected="true"].week__tab--today .week__tab-letter::after { background: var(--tab-selected-fg); }
.week__grid { display: grid; gap: var(--space-4); }
.day {
  display: grid; align-content: start;
  background: var(--day-bg); border-radius: var(--card-radius); box-shadow: var(--shadow-1);
  overflow: clip;
}
.day__title {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding-block: var(--space-3); padding-inline: var(--space-4);
  border-block-end: 1px solid var(--slot-rule);
  background: var(--day-head-bg); color: var(--day-head-fg);
  font-size: var(--size-md); font-weight: var(--weight-black);
}
.day__today {
  font-size: var(--size-xs); font-weight: var(--weight-bold);
  padding-block: var(--pill-pad-block); padding-inline: var(--space-2); border-radius: var(--radius-pill);
  background: var(--color-on-wall); color: var(--color-brand-strong);
}
.day--today .day__title { background: var(--day-today-bg); color: var(--day-today-fg); padding-block-start: var(--wall-lit-reach); border-block-end-color: transparent; }
.day__part { container-type: inline-size; display: grid; align-content: start; padding-block: var(--space-3) var(--space-2); padding-inline: var(--space-4); }  /* container here, not on .day: containment disables subgrid */
.day__part + .day__part { border-block-start: 1px dashed var(--slot-rule); }
.day__part-title {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--size-xs); font-weight: var(--weight-bold); color: var(--color-text-muted);
}
.day__part-title .icon { inline-size: 1rem; block-size: 1rem; }
.day__empty { font-size: var(--size-sm); color: var(--color-text-muted); padding-block: var(--space-2); }
.slots, .slot__alts { list-style: none; margin: 0; padding: 0; }
.slot {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-1) var(--space-3);
  padding-block: var(--space-2); border-block-end: 1px solid var(--slot-rule); min-block-size: var(--tap-min);
}
.slot:last-child { border-block-end: 0; }
.slot__time { font-weight: var(--weight-bold); color: var(--slot-time-fg); font-variant-numeric: tabular-nums; font-size: var(--size-sm); }
.slot__body { display: grid; min-inline-size: 0; }
.slot__name { font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.slot__coach { font-size: var(--size-xs); color: var(--color-text-muted); }
.slot--alt { align-items: start; }
.slot--alt > .slot__body { grid-column: 2 / -1; gap: var(--space-1); }
.slot__alt-label {
  justify-self: start; font-size: var(--size-xs); font-weight: var(--weight-bold);
  padding-block: var(--pill-pad-block); padding-inline: var(--space-2); border-radius: var(--radius-pill); background: var(--color-brand-soft); color: var(--color-brand-strong);
}
.slot__alts { display: grid; gap: var(--space-2); }
.slot__alts > li { display: grid; }
/* Narrow day columns: time on its own line */
@container (max-width: 15rem) {
  .slot { grid-template-columns: minmax(0, 1fr); }
  .slot__time { grid-column: 1 / -1; }
  .slot--alt > .slot__body { grid-column: 1 / -1; }
}
@media (min-width: 48em) {
  .week__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
  .day { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; background: none; box-shadow: none; overflow: visible; }
  /* Title and parts are separate sheets: the morning band lines up across days, and each
     evening sheet ends at its last class instead of stretching to the tallest day. */
  .day__title, .day__part { background: var(--day-bg); box-shadow: var(--shadow-1); }
  .day__title { background: var(--day-head-bg); padding-block-start: var(--wall-lit-reach); border-start-start-radius: var(--card-radius); border-start-end-radius: var(--card-radius); }
  .day--today .day__title { background: var(--day-today-bg); }
  .day__part:last-child { align-self: start; border-end-start-radius: var(--card-radius); border-end-end-radius: var(--card-radius); }
}
@media (min-width: 75em) {
  .week__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
}

/* ---------- pricing: trial first, then a 4-tier table ---------- */
.trial {
  display: grid; gap: var(--space-4); align-items: center;
  padding: var(--space-5); border: 1px solid var(--trial-border); border-radius: var(--card-radius); background: var(--trial-bg);
}
.trial__eyebrow { font-size: var(--size-xs); font-weight: var(--weight-bold); color: var(--color-brand-strong); }
.trial__title { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-3xl); line-height: 1; }
.trial__price { color: var(--trial-price-fg); }
.trial__note { font-size: var(--size-sm); color: var(--color-text-muted-on-tint); margin-block-start: var(--space-1); }
.price-tiers { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; padding-block-start: var(--space-3); }
.price-tier {
  position: relative; display: grid; gap: var(--space-1); justify-items: center; align-content: start; text-align: center; min-inline-size: 0;
  padding-block: var(--space-6) var(--space-5); padding-inline: var(--space-3);
  background: var(--tier-bg); border: 1px solid var(--tier-border); border-radius: var(--card-radius);
}
.price-tier__badge {
  position: absolute; inset-block-start: 0; inset-inline: 0; margin-inline: auto; inline-size: max-content; transform: translateY(-50%);
  padding-block: var(--pill-pad-block); padding-inline: var(--space-3); border-radius: var(--radius-pill);
  background: var(--badge-bg); color: var(--badge-fg); font-size: var(--size-xs); font-weight: var(--weight-black); box-shadow: var(--shadow-1);
}
.price-tier__name { font-size: var(--size-md); font-weight: var(--weight-black); }
.price-tier__price { display: flex; align-items: baseline; gap: var(--space-1); }
.price-tier__amount { font-family: var(--font-text); font-weight: var(--weight-black); font-size: var(--size-3xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.price-tier__per { font-size: var(--size-xs); color: var(--color-text-muted); }
.price-tier__entries { font-size: var(--size-sm); font-weight: var(--weight-bold); }
.price-tier__rate { font-size: var(--size-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* The section's one wall plane: the most recommended tier */
.price-tier--featured { background: var(--tier-featured-bg); color: var(--tier-featured-fg); border-color: transparent; box-shadow: var(--shadow-3); padding-block-start: var(--wall-lit-reach); }
.price-tier--featured .price-tier__per, .price-tier--featured .price-tier__rate { color: var(--tier-featured-muted); }
.price-tier__nudge {
  margin-block-start: var(--space-2); padding-block: var(--pill-pad-block); padding-inline: var(--space-3); border-radius: var(--radius-pill);
  background: var(--color-on-wall); color: var(--color-brand-strong); font-size: var(--size-sm); font-weight: var(--weight-black);
}
.price-tier--featured .price-tier__badge { background: var(--color-on-wall); color: var(--color-brand-strong); }
.pricing__foot { display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.perks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; }
.perks li { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); }
.perks .promise__tick { inline-size: var(--tick-size-sm); block-size: var(--tick-size-sm); }
.perks .promise__tick .icon { inline-size: var(--tick-icon-sm); block-size: var(--tick-icon-sm); }
.pricing__fine { font-size: var(--size-sm); color: var(--color-text-muted); }
@media (min-width: 48em) {
  .trial { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--space-6); }
  .price-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); align-items: end; }
  .price-tier--featured { transform: translateY(var(--tier-featured-lift)); }
}
@media (max-width: 47.99em) {
  .trial .btn { inline-size: 100%; }
  /* Phones: the recommended tier leads, full width; the other three sit in one compact row */
  .price-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .price-tier--featured { grid-column: 1 / -1; order: -1; margin-block-end: var(--space-3); }
  .price-tier:not(.price-tier--featured) { padding-block: var(--space-4); padding-inline: var(--space-1); }
  .price-tier:not(.price-tier--featured) .price-tier__name { font-size: var(--size-xs); }
  .price-tier:not(.price-tier--featured) .price-tier__amount { font-size: var(--size-xl); }
  .price-tier:not(.price-tier--featured) .price-tier__price { flex-direction: column; align-items: center; gap: 0; }
}

/* ---------- reviews ---------- */
.reviews { display: grid; gap: var(--space-4); align-items: stretch; }
.quote {
  display: grid; gap: var(--space-3); align-content: space-between; margin: 0; block-size: 100%;
  padding: var(--card-pad); background: var(--card-bg); border-radius: var(--card-radius); box-shadow: var(--shadow-1);
}
.quote__text { margin: 0; font-size: var(--size-md); line-height: var(--leading-body); }
.quote__text p { margin: 0; }
.quote__by { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.quote__name { font-style: normal; font-weight: var(--weight-bold); font-size: var(--size-sm); }
/* The section's one wall plane: the featured quote */
.quote--featured {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block-start: var(--wall-lit-reach);
  background: var(--quote-featured-bg); color: var(--quote-featured-fg); box-shadow: var(--shadow-3);
}
.quote--featured::before {
  content: "”" / ""; position: absolute; z-index: -1; inset-block-start: var(--space-2); inset-inline-end: var(--space-4);
  font-family: var(--font-heading); font-size: calc(var(--size-4xl) * 1.6); line-height: 1; color: var(--quote-mark); opacity: 0.35;
}
.quote--featured .quote__text { font-size: var(--size-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.quote--featured .stars { color: var(--quote-featured-fg); }
.carousel { display: grid; gap: var(--space-3); min-inline-size: 0; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: var(--space-3);
  margin: 0; padding-block: var(--space-1) var(--space-3); padding-inline: 2px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: thin;
}
.carousel__item { display: grid; scroll-snap-align: start; }
.carousel__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.carousel__btn {
  display: grid; place-items: center; inline-size: var(--tap-min); block-size: var(--tap-min); padding: 0;
  border: 1px solid var(--carousel-btn-border); border-radius: 50%;
  background: var(--color-surface); color: var(--color-brand-strong); cursor: pointer;
}
.carousel__btn:hover:not(:disabled) { background: var(--color-bg-tint); }
.carousel__btn:disabled { opacity: 0.4; cursor: default; }
.carousel__status { font-size: var(--size-xs); color: var(--section-muted); font-variant-numeric: tabular-nums; }
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.rating__num { font-family: var(--font-text); font-weight: var(--weight-black); font-size: var(--size-3xl); line-height: 1; }
.rating .stars .icon { inline-size: 1.4rem; block-size: 1.4rem; }
.rating__count { font-size: var(--size-sm); font-weight: var(--weight-bold); color: var(--section-muted); }
.reviews__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.reviews__sources { font-size: var(--size-sm); color: var(--section-muted); }
@media (min-width: 40em) {
  .carousel__track { grid-auto-columns: calc((100% - var(--space-3)) / 2); }
}
@media (min-width: 64em) {
  .reviews { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}


/* ---------- team ---------- */
.team { display: grid; gap: var(--space-4); align-items: start; }
.coach {
  display: grid; gap: var(--space-2); align-content: start; min-inline-size: 0;
  padding: var(--card-pad); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius);
}
.coach__mono {
  display: grid; place-items: center; inline-size: var(--coach-mono-size); block-size: var(--coach-mono-size);
  border-radius: 50%; background: var(--coach-mono-bg); color: var(--coach-mono-fg);
  font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-2xl); line-height: 1;
}
.coach__name { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-2xl); line-height: 1; }
.coach__role { font-size: var(--size-sm); font-weight: var(--weight-bold); color: var(--color-brand-strong); }
/* The section's one wall plane: the owner */
.coach--lead {
  gap: var(--space-3); padding-block: var(--wall-lit-reach) var(--card-pad); padding-inline: var(--card-pad);
  background: var(--coach-lead-bg); color: var(--coach-lead-fg); border-color: transparent; box-shadow: var(--shadow-3);
}
/* Michal's portrait bleeds to the card's top edge; the photo is the wall's lit top, text starts below it */
.coach__photo { margin: calc(-1 * var(--wall-lit-reach)) calc(-1 * var(--card-pad)) var(--space-2); border-radius: var(--card-radius) var(--card-radius) 0 0; overflow: hidden; background: var(--color-text); }
.coach__photo img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
/* Michal's intro video: a poster tile on the wall, the video opens in the shared viewer */
.intro-tile {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4);
  inline-size: 100%; margin-block-start: var(--space-2); padding: var(--space-2); padding-inline-end: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-on-wall) 35%, transparent); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-on-wall) 12%, transparent); color: var(--color-on-wall);
  font: inherit; text-align: start; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.intro-tile:hover { background: color-mix(in srgb, var(--color-on-wall) 20%, transparent); }
.intro-tile:hover .intro-tile__thumb img { transform: scale(1.05); }
.intro-tile__thumb { position: relative; display: block; inline-size: 4.5rem; aspect-ratio: 9 / 14; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-2); background: var(--color-text); }
.intro-tile__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.intro-tile__play {
  position: absolute; inset: 0; margin: auto; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%;
  background: var(--color-surface); color: var(--color-cta); box-shadow: var(--shadow-2);
}
.intro-tile__play .icon { inline-size: 1rem; block-size: 1rem; margin-inline-end: 0.1rem; }
.intro-tile__text { display: grid; gap: var(--space-1); }
.intro-tile__title { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-2xl); line-height: 1; }
.intro-tile__meta { font-size: var(--size-sm); color: var(--coach-lead-muted); }
.intro-transcript { justify-self: center; inline-size: min(100%, 36rem); color: var(--lightbox-fg); }
.intro-transcript summary { cursor: pointer; min-block-size: var(--tap-min); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); color: var(--lightbox-fg-muted); }
.intro-transcript__text { max-block-size: 30vh; overflow-y: auto; display: grid; gap: var(--space-2); padding: var(--space-3); font-size: var(--size-sm); line-height: var(--leading-body); }
.intro-transcript__text p { margin: 0; }
#intro-dialog .lightbox__frame { grid-template-rows: auto minmax(0, 1fr) auto; }
#intro-dialog .lightbox__media video { max-inline-size: 30rem; margin-inline: auto; inset-inline: 0; }
.hero__coach { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; vertical-align: middle; }
.hero__avatar { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-border-brand); }
.coach--lead .coach__mono { inline-size: var(--coach-mono-size-lead); block-size: var(--coach-mono-size-lead); font-size: var(--size-3xl); background: var(--color-on-wall); color: var(--color-brand-strong); }
.coach--lead .coach__name { font-size: var(--size-3xl); }
.coach--lead .coach__role { color: var(--coach-lead-muted); }
.coach__stat { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--size-md); font-weight: var(--weight-bold); }
/* Karantina's lone digits read poorly at display size: numbers use the body face */
.coach__num { font-family: var(--font-text); font-weight: var(--weight-black); font-size: var(--size-3xl); line-height: 0.9; font-variant-numeric: tabular-nums; }
.coach__story { font-size: var(--size-md); }
.coach--lead .btn { justify-self: start; margin-block-start: var(--space-2); }
.coaches { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (max-width: 22.49em) { .coaches { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 64em) {
  .team { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* ---------- gallery ---------- */
/* Bento: tile sizes come from gallery.json; dense flow packs them with no holes at 2 and 4 columns. */
.gallery {
  display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--tile-row); grid-auto-flow: row dense; list-style: none; margin: 0; padding: 0;
}
.tile { position: relative; min-inline-size: 0; border-radius: var(--tile-radius); overflow: hidden; box-shadow: var(--tile-shadow); background: var(--color-brand-soft); }
.tile--big { grid-column: span 2; grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile__link { position: absolute; inset: 0; display: block; border-radius: inherit; color: inherit; }
.tile__link picture, .tile__link img { display: block; inline-size: 100%; block-size: 100%; }
.tile__link img { object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.tile__link:hover img { transform: scale(1.04); }
.tile__link:focus-visible { outline-offset: -4px; }
.tile__label {
  position: absolute; inset-block-end: var(--space-3); inset-inline-start: var(--space-3);
  padding-block: var(--pill-pad-block); padding-inline: var(--space-3); border-radius: var(--radius-pill);
  background: var(--tile-label-bg); color: var(--tile-label-fg); font-size: var(--size-xs); font-weight: var(--weight-bold);
  max-inline-size: calc(100% - 2 * var(--space-3)); box-shadow: var(--shadow-1);
}
.tile__play {
  position: absolute; inset: 0; margin: auto; display: grid; place-items: center;
  inline-size: var(--tile-play-size); block-size: var(--tile-play-size); border-radius: 50%;
  background: var(--tile-play-bg); color: var(--tile-play-fg); box-shadow: var(--shadow-3);
}
.tile__play .icon { inline-size: 1.5rem; block-size: 1.5rem; margin-inline-start: 0.15rem; }
[dir="rtl"] .tile__play .icon { margin-inline-start: 0; margin-inline-end: 0.15rem; }   /* the play glyph points right in every language */
/* The section's one wall plane */
.tile--quote { background: var(--tile-quote-bg); color: var(--tile-quote-fg); box-shadow: var(--shadow-3); }
.tile-quote { block-size: 100%; display: grid; gap: var(--space-3); align-content: end; margin: 0; padding-block: var(--wall-lit-reach) var(--card-pad); padding-inline: var(--card-pad); }
.tile-quote__text { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-2xl); line-height: 1.05; }
.tile-quote__text p { margin: 0; }
.tile-quote__text p::before { content: "״"; }
.tile-quote__text p::after { content: "״"; }
.tile-quote__by { display: flex; align-items: center; gap: var(--space-2); font-size: var(--size-sm); color: var(--tile-quote-muted); }
.tile-quote__by cite { font-style: normal; font-weight: var(--weight-bold); }
.tile-quote .stars { color: var(--tile-quote-fg); }
@media (min-width: 48em) and (max-width: 63.99em) { .tile--quote { grid-row: span 2; } }
/* Phones: one swipeable row instead of nine stacked tiles (2.2 screens → under one) */
@media (max-width: 47.99em) {
  .gallery {
    grid-template-columns: none; grid-template-rows: var(--gallery-strip-h); grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--container-gutter)); padding-inline: var(--container-gutter); scroll-padding-inline: var(--container-gutter);
  }
  .gallery::-webkit-scrollbar { display: none; }
  .tile { scroll-snap-align: start; }
  .tile--big, .tile--wide, .tile--tall { grid-column: auto; grid-row: auto; }
}
@media (min-width: 64em) {
  :root { --tile-row: 13rem; }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
}

/* Viewer */
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox {
  inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none; margin: 0; padding: 0; border: 0;
  background: var(--lightbox-scrim); color: var(--lightbox-fg);
}
.lightbox::backdrop { background: var(--lightbox-scrim); }
.lightbox__frame {
  block-size: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: var(--space-3);
  padding-block: max(var(--space-3), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-bottom));
  padding-inline: var(--space-4); max-inline-size: var(--container-max); margin-inline: auto;
}
.lightbox__top, .lightbox__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.lightbox__nav { justify-content: center; gap: var(--space-5); }
.lightbox__count { margin: 0; font-size: var(--size-sm); color: var(--lightbox-fg-muted); font-variant-numeric: tabular-nums; }
.lightbox__btn {
  display: inline-grid; place-items: center; inline-size: var(--tap-min); block-size: var(--tap-min); padding: 0;
  border: 1px solid var(--lightbox-btn-border); border-radius: 50%; background: transparent; color: var(--lightbox-fg); cursor: pointer;
}
.lightbox__btn:hover { background: color-mix(in srgb, var(--lightbox-fg) 14%, transparent); }
.lightbox :focus-visible { outline-color: var(--wall-focus); }
.lightbox__media { position: relative; min-block-size: 0; touch-action: pan-y; }
.lightbox__media picture { display: contents; }
.lightbox__media img {
  position: absolute; inset: 0; margin: auto; inline-size: auto; block-size: auto;
  max-inline-size: 100%; max-block-size: 100%; border-radius: var(--radius-md);
}
/* Clips are small (≤1024px): the player fills the stage and letterboxes, so controls stay full width */
.lightbox__media video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; }
.lightbox__caption { margin: 0; text-align: center; font-size: var(--size-sm); color: var(--lightbox-fg); max-inline-size: 60ch; justify-self: center; }

/* ---------- contact ---------- */
.contact { display: grid; gap: var(--space-5); align-items: start; }
.reach { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.reach__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start;
  padding: var(--space-4); background: var(--reach-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius);
}
.reach__icon { display: grid; place-items: center; inline-size: var(--reach-icon-size); block-size: var(--reach-icon-size); border-radius: 50%; background: var(--reach-icon-bg); color: var(--reach-icon-fg); }
.reach__body { display: grid; gap: var(--space-1); min-inline-size: 0; }
.reach__label { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: var(--size-sm); font-weight: var(--weight-bold); color: var(--color-text-muted); }
.reach__tag { padding-block: var(--pill-pad-block); padding-inline: var(--space-2); border-radius: var(--radius-pill); background: var(--tag-bg); color: var(--tag-fg); font-size: var(--size-xs); }
.reach__value { margin: 0; font-size: var(--size-lg); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.reach__value a { display: inline-flex; align-items: center; min-block-size: var(--tap-min); color: var(--color-text); text-underline-offset: var(--link-underline-offset); }
.reach__value a:hover { color: var(--color-brand-strong); }
.reach__note { margin: 0; font-size: var(--size-sm); color: var(--color-text-muted); }
.reach__line { margin: 0; display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--size-sm); }
.reach__line a { display: inline-flex; align-items: center; min-block-size: var(--tap-min); color: var(--color-text); font-size: var(--size-lg); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; text-underline-offset: var(--link-underline-offset); }
.reach__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-1); }
.pill-link {
  display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--tap-min); padding-inline: var(--space-4);
  border: 1px solid var(--color-border-brand); border-radius: var(--radius-pill); background: var(--color-surface);
  color: var(--color-brand-strong); font-size: var(--size-sm); font-weight: var(--weight-bold); text-decoration: none;
}
.pill-link:hover { background: var(--color-bg-tint); border-color: var(--color-brand-strong); }
.reach__item--social { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-2); }
.reach__social {
  display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--tap-min); padding: var(--space-2);
  border-radius: var(--radius-md); color: var(--color-text); font-weight: var(--weight-bold); text-decoration: none;
}
.reach__social:hover { background: var(--color-bg-tint); }
.reach__social .icon { flex: none; color: var(--reach-icon-fg); }
.reach__handle { display: block; font-size: var(--size-xs); font-weight: var(--weight-regular); color: var(--color-text-muted); }
/* The section's one wall plane: the form */
.lead {
  display: grid; gap: var(--space-3); align-content: start;
  padding-block: var(--wall-lit-reach) var(--card-pad); padding-inline: var(--card-pad);
  background: var(--lead-bg); color: var(--lead-fg); border-radius: var(--card-radius); box-shadow: var(--shadow-3);
}
.lead :focus-visible { outline-color: var(--wall-focus); }
.lead__title { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-3xl); line-height: 1; }
.lead__text { margin: 0; color: var(--lead-fg-muted); font-size: var(--size-md); }
.lead__form { display: grid; gap: var(--space-4); margin-block-start: var(--space-2); }
.field { display: grid; gap: var(--space-1); }
.field__label { font-size: var(--size-sm); font-weight: var(--weight-bold); }
.field__input {
  inline-size: 100%; min-block-size: var(--field-height); padding-inline: var(--space-4);
  border: 1px solid var(--field-border); border-radius: var(--field-radius); background: var(--field-bg); color: var(--field-fg);
  font: inherit; font-size: var(--size-md);
}
.ltr-field { direction: ltr; text-align: end; }
.num { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }      /* phone/email typed LTR, aligned with the RTL labels */
.field__input[aria-invalid="true"] { border-color: var(--field-invalid); box-shadow: 0 0 0 2px var(--field-invalid); }
.field__error { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--size-sm); font-weight: var(--weight-bold); }
.field__error:empty { display: none; }
/* Not colour alone: every message carries a mark (WCAG 1.4.1) */
.field__error::before {
  content: "!"; flex: none; display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%;
  background: var(--color-on-wall); color: var(--color-brand-strong); font-size: var(--size-xs); font-weight: var(--weight-black);
}
.lead__submit { inline-size: 100%; margin-block-start: var(--space-1); }
.lead__consent { margin: 0; font-size: var(--size-xs); color: var(--lead-fg-muted); line-height: var(--leading-body); }
.lead__consent a { color: var(--lead-fg); }
.lead__done { display: grid; gap: var(--space-2); justify-items: start; padding-block: var(--space-4); }
.lead__done:focus { outline: none; }
.lead__done-icon { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--color-on-wall); color: var(--color-brand-strong); }
.lead__done-title { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-2xl); line-height: 1; }
.lead__done-text { margin: 0; }
.lead__preview { margin: 0; font-size: var(--size-xs); color: var(--lead-fg-muted); }
@media (min-width: 64em) {
  .contact { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .reach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- footer ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-fg); padding-block: var(--space-8) var(--space-5); }
.site-footer a { color: var(--footer-fg); text-underline-offset: var(--link-underline-offset); }
.site-footer :focus-visible { outline-color: var(--wall-focus); }
.site-footer__inner { display: grid; gap: var(--space-6); }
.site-footer__name { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-3xl); line-height: 1; }
.site-footer__tagline { margin: var(--space-1) 0 var(--space-3); color: var(--footer-muted); }
.site-footer__nap { font-style: normal; line-height: 2; color: var(--footer-muted); }
.site-footer__nap a { display: inline-block; min-block-size: var(--tap-min); line-height: var(--tap-min); font-weight: var(--weight-bold); }
.site-footer__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); list-style: none; margin: 0; padding: 0; }
.site-footer__nav a { display: flex; align-items: center; min-block-size: var(--tap-min); text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; }
.news { display: grid; gap: var(--space-2); }
.news__label { font-weight: var(--weight-bold); }
.news__row { display: flex; gap: var(--space-2); }
.news__row .field__input { flex: 1; min-inline-size: 0; border-color: transparent; }
.news__row .field__input[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--color-cta); }
.news__msg { margin: 0; min-block-size: 1.5em; font-size: var(--size-sm); color: var(--footer-muted); }
.site-footer__social { display: flex; gap: var(--space-2); margin-block-start: var(--space-3); }
.site-footer__social a { display: grid; place-items: center; inline-size: var(--tap-min); block-size: var(--tap-min); border: 1px solid var(--footer-rule); border-radius: 50%; }
.site-footer__social a:hover { background: color-mix(in srgb, var(--footer-fg) 12%, transparent); }
.site-footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); align-items: center;
  margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: 1px solid var(--footer-rule);
  font-size: var(--size-sm); color: var(--footer-muted);
}
.site-footer__legal a { display: inline-flex; align-items: center; min-block-size: var(--tap-min); color: var(--footer-muted); }
@media (min-width: 64em) {
  .site-footer__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); }
}

/* ---------- inner pages ---------- */
.subpage .section:first-child { padding-block-start: var(--space-6); }
.crumbs { padding-block: var(--space-3) 0; }
.crumbs ol { display: flex; flex-wrap: nowrap; min-inline-size: 0; gap: var(--space-1) var(--space-2); list-style: none; margin: 0; padding: 0; font-size: var(--size-sm); color: var(--crumbs-fg); }
.crumbs li + li::before { content: "›"; margin-inline-end: var(--space-2); }
.crumbs li { white-space: nowrap; }
.crumbs li:last-child { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }   /* one line: a long title never re-wraps when the webfont arrives */
.crumbs a { color: var(--crumbs-fg); text-underline-offset: var(--link-underline-offset); }
.page-hero { background: var(--page-hero-bg); padding-block: var(--space-6) var(--section-pad-block); }
.page-hero__inner { display: grid; gap: var(--space-6); align-items: center; }
.page-hero__copy { display: grid; gap: var(--space-4); justify-items: start; min-inline-size: 0; }
.page-hero__title { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-4xl); line-height: var(--leading-display); }
.page-hero__where { display: block; color: var(--color-brand-strong); font-size: 0.6em; }
.page-hero__lead { margin: 0; font-size: var(--size-lg); color: var(--color-text-muted-on-tint); max-inline-size: 38ch; }
.fact-card { padding-block: var(--wall-lit-reach) var(--card-pad); padding-inline: var(--card-pad); border-radius: var(--card-radius); background: var(--fact-bg); color: var(--fact-fg); box-shadow: var(--shadow-3); }
.fact-card dl { display: grid; gap: var(--space-3); margin: 0; }
.fact-card div { display: grid; gap: 2px; }
.fact-card dt { font-size: var(--size-xs); font-weight: var(--weight-bold); color: var(--fact-muted); }
.fact-card dd { margin: 0; font-size: var(--size-lg); font-weight: var(--weight-black); }
@media (max-width: 63.99em) {
  .fact-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
  .fact-card dd { font-size: var(--size-md); }
}
.duo { display: grid; gap: var(--space-4); }
.duo__card { display: grid; gap: var(--space-3); align-content: start; padding: var(--card-pad); border-radius: var(--card-radius); background: var(--color-bg-tint); }
.duo__title { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-2xl); line-height: 1; }
.ticks { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.ticks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: start; font-size: var(--size-md); }
.ticks .promise__tick { inline-size: var(--tick-size-sm); block-size: var(--tick-size-sm); margin-block-start: var(--tick-nudge); }
.ticks .promise__tick .icon { inline-size: var(--tick-icon-sm); block-size: var(--tick-icon-sm); }
.who-line { margin: 0; font-size: var(--size-lg); }
.when { display: grid; gap: var(--space-4); align-items: start; }
.when__list { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.when__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--card-bg); box-shadow: var(--shadow-1); }
.when__day { font-weight: var(--weight-black); min-inline-size: 5.5em; }
.when__time { font-weight: var(--weight-bold); color: var(--slot-time-fg); font-variant-numeric: tabular-nums; }
.when__who { font-size: var(--size-sm); color: var(--color-text-muted); }
.when__offer { display: grid; gap: var(--space-2); justify-items: start; padding-block: var(--wall-lit-reach) var(--card-pad); padding-inline: var(--card-pad); border-radius: var(--card-radius); background: var(--when-offer-bg); color: var(--fact-fg); box-shadow: var(--shadow-3); }
.when__offer .trial__eyebrow, .when__offer .trial__price { color: var(--fact-muted); }
.when__note { margin: 0 0 var(--space-2); color: var(--fact-muted); }
.when__offer :focus-visible, .fact-card :focus-visible { outline-color: var(--wall-focus); }
.related { display: grid; gap: var(--space-2); }
.related__title { margin: 0; font-weight: var(--weight-black); }
.related ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
a.cls { text-decoration: none; }
.class-links { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (max-width: 47.99em) { .class-links .class-link { --card-pad: var(--space-4); } .class-links .class-link__name { font-size: var(--size-xl); } }
.class-link {
  display: grid; gap: var(--space-1); block-size: 100%; padding: var(--card-pad); border-radius: var(--card-radius);
  background: var(--card-bg); border: 1px solid var(--card-border); color: var(--color-text); text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.section--white .class-link { background: var(--color-bg-tint); border-color: transparent; }
.class-link:hover { box-shadow: var(--card-lift); transform: translateY(-2px); }
.class-link__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-2xl); line-height: 1.05; }
.class-link__desc { font-size: var(--size-sm); color: var(--color-text-muted); }
.class-link__more { display: inline-flex; align-items: center; gap: var(--space-1); margin-block-start: var(--space-2); font-size: var(--size-sm); font-weight: var(--weight-bold); color: var(--color-brand-strong); }
.class-link--wall, .section--white .class-link--wall { background: var(--wall-bg); color: var(--wall-fg); padding-block-start: var(--wall-lit-reach); box-shadow: var(--shadow-3); }
.class-link--wall .class-link__desc, .class-link--wall .class-link__more { color: var(--wall-fg-muted); }
.perk-cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.perk-cards li { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-4); border-radius: var(--card-radius); background: var(--color-bg-tint); }
.perk-cards strong { font-size: var(--size-lg); font-weight: var(--weight-black); }
.perk-cards span { font-size: var(--size-sm); color: var(--color-text-muted); }
.section__foot--start { justify-content: flex-start; }
.text-link { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--tap-min); font-weight: var(--weight-bold); color: var(--color-brand-strong); text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: var(--link-underline-offset); }
.cls-panel__more { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--tap-min); font-size: var(--size-sm); font-weight: var(--weight-bold); color: var(--color-brand-strong); text-decoration: none; }
.cls-panel__more:hover { text-decoration: underline; text-underline-offset: var(--link-underline-offset); }
.site-footer__more { margin-block-start: var(--space-3) !important; padding-block-start: var(--space-3) !important; border-block-start: 1px solid var(--footer-rule); }
/* Articles: one readable column, answer first */
.article__head { display: grid; gap: var(--space-3); max-inline-size: var(--article-measure); }
.article__answer { font-weight: var(--weight-semibold); color: var(--color-text); max-inline-size: none; }
.article__answer a, .article__body a:not(.btn):not(.pill-link) { color: var(--color-brand-strong); text-underline-offset: var(--link-underline-offset); }
.article__meta { margin: 0; font-size: var(--size-sm); color: var(--color-text-muted-on-tint); }
.article__body { display: grid; gap: var(--space-7); max-inline-size: var(--article-measure); padding-block: var(--space-7) var(--section-pad-block); }
.article__body section { display: grid; gap: var(--space-3); }
.article__body h2 { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-3xl); line-height: 1; }
.article__body p { margin: 0; font-size: var(--size-md); line-height: var(--leading-body); }
.article__source { font-size: var(--size-sm) !important; color: var(--color-text-muted); }
.article__cta { justify-items: start; }
.coach__quote { margin: 0; padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--color-brand-strong); display: grid; gap: var(--space-1); }
.coach__quote blockquote { margin: 0; }
.coach__quote p { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-xl); line-height: 1.2; color: var(--color-brand-strong); }
.coach__quote figcaption { font-size: var(--size-sm); color: var(--color-text-muted); }
.coach__quote cite { font-style: normal; }
.coach--lead .coach__quote { border-inline-start-color: color-mix(in srgb, var(--color-on-wall) 60%, transparent); }
.coach--lead .coach__quote p { color: var(--color-on-wall); }
.coach--lead .coach__quote figcaption { color: var(--coach-lead-muted); }
.who-line--note { border-inline-start: 3px solid var(--color-brand-strong); padding-inline-start: var(--space-3); }
.class-link__meta { font-size: var(--size-sm); color: var(--color-text-muted); }
.coach__teaches { margin: 0; font-size: var(--size-sm); color: var(--color-text-muted); }
.cls-panel__freq { background: var(--color-brand-strong) !important; color: var(--btn-cta-fg) !important; }
/* Legal pages: same reading measure as articles */
.doc__list { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); font-size: var(--size-md); line-height: var(--leading-body); }
.doc a { color: var(--color-brand-strong); text-underline-offset: var(--link-underline-offset); }
/* Thank-you page */
.thanks__icon { display: inline-grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 50%; background: var(--btn-cta-bg); color: var(--btn-cta-fg); }
.thanks__icon .icon { inline-size: 32px; block-size: 32px; }
.thanks__steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: var(--space-4); max-inline-size: var(--article-measure); }
.thanks__steps li { counter-increment: step; position: relative; padding-inline-start: calc(40px + var(--space-3)); font-size: var(--size-md); line-height: var(--leading-body); }
.thanks__steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 40px; block-size: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--color-bg-tint); color: var(--color-brand-strong); font-weight: var(--weight-bold); }
.thanks__save { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--tap-min); color: var(--color-brand-strong); font-weight: var(--weight-semibold); }
.site-footer--minimal { padding-block: var(--space-4); }
.site-footer--minimal .site-footer__legal { border-block-start: 0; padding-block-start: 0; margin-block-start: 0; }
.thanks + .section { padding-block-start: var(--space-6); }
.site-footer--minimal:has(+ .action-bar) { padding-block-end: calc(var(--action-bar-height) + env(safe-area-inset-bottom, 0px) + var(--space-4)); }
.page-photo { margin-block-start: calc(-1 * var(--space-7)); position: relative; z-index: 1; }
.page-photo img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--card-radius); box-shadow: var(--shadow-3); }
@media (min-width: 48em) { .page-photo img { aspect-ratio: 21 / 8; } }
.cmp { inline-size: 100%; border-collapse: collapse; font-size: var(--size-sm); }
.cmp caption { text-align: start; font-weight: var(--weight-bold); padding: var(--space-3) var(--space-4) var(--space-2); color: var(--color-text-muted); }
.cmp th, .cmp td { padding: var(--space-2) var(--space-3); text-align: start; border-block-end: 1px solid var(--color-border); vertical-align: top; }
.cmp thead th { background: var(--color-bg-tint); font-weight: var(--weight-black); }
.cmp tbody th { font-weight: var(--weight-bold); white-space: nowrap; }
@media (min-width: 30em) { .class-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48em) {
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perk-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .page-hero__inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .page-hero__inner--solo { grid-template-columns: minmax(0, 1fr); }
  .when { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .class-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- FAQ ---------- */
/* Native <details>: zero JS, every answer is in the HTML for crawlers and assistants. */
.faq { display: grid; gap: var(--space-5); align-items: start; }
.faq__list { display: grid; gap: var(--space-3); }
.faq__more { display: grid; gap: var(--space-3); }
.faq__more-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; min-block-size: var(--tap-min);
  padding-inline: var(--space-4); border: 1px solid var(--color-border-brand); border-radius: var(--radius-pill);
  color: var(--color-brand-strong); font-weight: var(--weight-bold); cursor: pointer; list-style: none;
}
.faq__more-toggle::-webkit-details-marker { display: none; }
.faq__more[open] > .faq__more-toggle .faq__chevron { transform: rotate(180deg); }
.faq__item {
  background: var(--faq-item-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius);
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.faq__item[open] { border-color: var(--faq-accent-open); box-shadow: var(--card-lift); }   /* no side stripe: on a pill it renders as a crescent */
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-block-size: var(--tap-min); padding-block: var(--space-3); padding-inline: var(--space-4);
  cursor: pointer; list-style: none; border-radius: inherit;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 { margin: 0; font-size: var(--size-md); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.faq__q:hover h3, .faq__item[open] .faq__q h3 { color: var(--faq-q-open-fg); }
.faq__chevron { flex: none; color: var(--faq-q-open-fg); transition: transform var(--dur-fast) var(--ease-out); }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__a { margin: 0; padding-inline: var(--space-4); padding-block-end: var(--space-4); max-inline-size: 60ch; }
.faq__hours { display: grid; gap: var(--space-1); margin: 0; }
.faq__hours div { display: grid; grid-template-columns: minmax(6.5em, auto) minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-1); border-block-end: 1px solid var(--color-border); }
.faq__hours div:last-child { border-block-end: 0; }
.faq__hours dt { font-weight: var(--weight-bold); }
.faq__hours dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-5); font-variant-numeric: tabular-nums; }
.faq__hours .ltr { white-space: nowrap; }
/* The section's one wall plane */
.ask {
  display: grid; gap: var(--space-3); justify-items: start;
  padding-block: var(--wall-lit-reach) var(--card-pad); padding-inline: var(--card-pad);
  background: var(--ask-bg); color: var(--ask-fg); border-radius: var(--card-radius); box-shadow: var(--shadow-3);
}
.ask__title { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--size-3xl); line-height: 1; }
.ask__text { margin: 0; font-size: var(--size-md); }
.ask__phone { margin: 0; font-size: var(--size-sm); color: var(--ask-fg-muted); }
.ask__phone a { display: inline-flex; align-items: center; min-block-size: var(--tap-min); color: var(--ask-fg); font-weight: var(--weight-bold); text-underline-offset: var(--link-underline-offset); font-variant-numeric: tabular-nums; }
@media (min-width: 64em) {
  .faq { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .ask { position: sticky; inset-block-start: calc(var(--header-height) + var(--space-5)); }
}

/* =====================  mobile action bar  ===================== */
.action-bar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky);
  display: flex; gap: var(--space-3);
  padding-block: var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  padding-inline: var(--container-gutter);
  background: var(--header-bg);
  border-block-start: 1px solid var(--color-border);
}
.action-bar .btn { flex: 1 1 0; padding-inline: var(--space-3); }
/* Hidden while the hero CTA is on screen (no duplicate CTA); slides in after it scrolls away */
.action-bar[data-animate] { transition: transform var(--dur-base) var(--ease-out); }
.action-bar[data-hidden] { transform: translateY(100%); }
.action-bar .btn--cta { flex-grow: 1.7; }
.site { padding-block-end: calc(var(--action-bar-height) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 48em) {
  .action-bar { display: none; }
  .site { padding-block-end: 0; }
}

/* =====================  design-system reference (/styleguide)  ===================== */
.ds {
  background: var(--color-bg-subtle);
  border-block-start: 2px dashed var(--color-border-strong);
  padding-block: var(--space-8) var(--section-pad-block);
}
.ds__inner { display: grid; gap: var(--space-8); }
.ds__intro { display: grid; gap: var(--space-4); max-inline-size: var(--measure); }
.ds h2 { font-family: var(--font-heading); font-size: var(--size-3xl); line-height: var(--leading-display); font-weight: var(--weight-bold); }
.ds h3 { font-size: var(--size-xl); font-weight: var(--weight-black); line-height: var(--leading-snug); }
.ds__lead { color: var(--color-text-muted); }
.ds-block { display: grid; gap: var(--space-5); min-inline-size: 0; }
.ds-block__head { display: grid; gap: var(--space-1); max-inline-size: var(--measure); }
.ds-block__head p { color: var(--color-text-muted); font-size: var(--size-sm); }
.ds-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-5); min-inline-size: 0;
}

.tiers { display: grid; gap: var(--space-4); }
.tier { display: grid; gap: var(--space-3); align-content: start; }
.tier__num {
  font-family: var(--font-heading); font-size: var(--size-2xl); line-height: 1; color: var(--color-brand-strong);
}
.tier__title { font-weight: var(--weight-black); font-size: var(--size-lg); }
.tier p { font-size: var(--size-sm); color: var(--color-text-muted); }
.tier code {
  justify-self: start; font-size: var(--size-xs); padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs); background: var(--color-bg-subtle); color: var(--color-text);
}
.chain {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-size: var(--size-sm); color: var(--color-text-muted);
}
.chain code { font-size: var(--size-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); }
.chain .icon { inline-size: 1rem; block-size: 1rem; color: var(--color-text-muted); }
@media (min-width: 48em) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ramp { --cols: 5; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--space-3); }
#ramp-gray { --cols: 4; }
@media (min-width: 60em) { #ramp-pink { --cols: 10; } #ramp-gray { --cols: 12; } }
.swatch { display: grid; gap: var(--space-2); font-size: var(--size-xs); min-inline-size: 0; }
.swatch__chip {
  aspect-ratio: 5 / 3; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--space-1) var(--space-2);
  font-weight: var(--weight-bold);
}
.swatch__name { font-weight: var(--weight-bold); color: var(--color-text); overflow-wrap: anywhere; }
.swatch__hex { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.ds-table { inline-size: 100%; min-inline-size: 44rem; border-collapse: collapse; font-size: var(--size-sm); }
.ds-table th, .ds-table td { text-align: start; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--color-border); vertical-align: middle; }
.ds-table th { font-size: var(--size-xs); color: var(--color-text-muted); font-weight: var(--weight-bold); background: var(--color-bg-subtle); }
.ds-table tr:last-child td { border-block-end: 0; }
.ds-table code { font-size: var(--size-xs); }
.pair {
  display: inline-grid; place-items: center; inline-size: 4.5rem; block-size: 2.25rem;
  border-radius: var(--radius-xs); border: 1px solid var(--color-border);
  font-weight: var(--weight-black); font-size: var(--size-md);
}
.ratio { font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); white-space: nowrap; }
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--size-xs); font-weight: var(--weight-bold); white-space: nowrap;
  background: var(--color-brand-soft); color: var(--color-brand-strong);
}
.badge--fail { background: var(--color-text); color: var(--color-bg); }

.type-rows { display: grid; }
.type-row {
  display: grid; gap: var(--space-1) var(--space-5); align-items: baseline;
  padding-block: var(--space-4); border-block-end: 1px solid var(--color-border);
}
.type-row:last-child { border-block-end: 0; }
.type-row__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--size-xs); color: var(--color-text-muted); }
.type-row__meta code { color: var(--color-text); font-weight: var(--weight-bold); }
.type-row__sample { min-inline-size: 0; overflow-wrap: anywhere; }
@media (min-width: 48em) { .type-row { grid-template-columns: 15rem minmax(0, 1fr); } }

.space-rows { display: grid; gap: var(--space-2); }
.space-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: var(--space-4); font-size: var(--size-xs); }
.space-row code { color: var(--color-text); font-weight: var(--weight-bold); min-inline-size: 0; overflow-wrap: anywhere; }
.space-row__bar { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.space-row__bar span:first-child { block-size: 0.75rem; border-radius: 2px; background: var(--color-brand); flex: none; }

.shape-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--space-4); }
.shape { display: grid; gap: var(--space-2); font-size: var(--size-xs); color: var(--color-text-muted); }
.shape__box { aspect-ratio: 4 / 3; background: var(--color-surface); border: 1px solid var(--color-border); }
.shape code { color: var(--color-text); font-weight: var(--weight-bold); }

.demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.demo-grid { display: grid; gap: var(--space-5); }
.ds-card--stack { display: grid; gap: var(--space-4); align-content: start; }
.demo-label { font-size: var(--size-xs); color: var(--color-text-muted); font-weight: var(--weight-bold); }
@media (min-width: 60em) { .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.checklist { display: grid; gap: var(--space-3); list-style: none; padding: 0; }
.checklist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: var(--size-sm); }
.checklist .promise__tick { inline-size: 1.4rem; block-size: 1.4rem; margin-block-start: 0.15em; }
.checklist .promise__tick .icon { inline-size: 0.8rem; block-size: 0.8rem; }
.checklist strong { color: var(--color-text); }
.checklist span { color: var(--color-text-muted); }
@media (min-width: 48em) { .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); } }

.gates { display: grid; gap: var(--space-4); }
.gate { display: grid; gap: var(--space-3); align-content: start; }
.checklist--single { grid-template-columns: minmax(0, 1fr); }
.gate__proof {
  font-size: var(--size-sm); color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-bg-tint);
}
.gate__proof strong { color: var(--color-brand-strong); }
@media (min-width: 48em) { .gates { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gate--lead { grid-column: 1 / -1; } }

.code-panel summary {
  cursor: pointer; font-weight: var(--weight-bold); min-block-size: var(--tap-min);
  display: flex; align-items: center; gap: var(--space-2);
}
.code-panel pre {
  direction: ltr; text-align: left; margin: var(--space-3) 0 0;
  max-block-size: 30rem; overflow: auto;
  padding: var(--space-4); border-radius: var(--radius-sm);
  background: var(--color-text); color: var(--color-bg);
  font-size: var(--size-xs); line-height: 1.6; tab-size: 2;
}

@media (forced-colors: active) {
  .hero__masthead { background: none; }
  .hero__masthead::after, .hero__media::before { display: none; }
  .hero__headline mark { background-color: Mark; color: MarkText; }
  .class-card--featured, .offer, .day--today .day__title, .day, .day__title, .day__part, .quote, .coach--lead { border: 1px solid CanvasText; }
  .quote--featured::before { display: none; }
  .week__tab[aria-selected="true"] { forced-color-adjust: none; background: SelectedItem; color: SelectedItemText; border-color: SelectedItem; }
  .week__tab--today .week__tab-letter::after { forced-color-adjust: none; background: CanvasText; }
  .week__tab[aria-selected="true"].week__tab--today .week__tab-letter::after { background: SelectedItemText; }
}

@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}