/* Rumble San Ramon — light + dark (?theme=dark previews dark on preview builds).
   Fonts are open-licensed (SIL OFL, licences in /fonts/) and self-hosted:
   - Display: a static Roboto Flex instance (wght 1000, wdth 125, opsz 96, GRAD 0; word spacing built in), made by
     tools/fonts/build_fonts.py. size-adjust gives it Titling Gothic Black's cap height at the same font-size
     (cap heights 0.7937 vs 0.7125 of the em), so the approved sizes, the hero's --fit and its two lines carry over.
   - Labels: DM Mono. Body: IBM Plex Sans Condensed. */
@font-face { font-family: "RumbleDisplay"; src: url("/fonts/roboto-flex-display.woff2") format("woff2"); font-weight: 400; font-display: swap; size-adjust: 111.4%; }
@font-face { font-family: "DMMono"; src: url("/fonts/dm-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* DM Mono Medium under its own name, so only labels that ask for it change (heavier label weights keep rendering as before). */
@font-face { font-family: "DMMonoMedium"; src: url("/fonts/dm-mono-500.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PlexCond"; src: url("/fonts/plex-r.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PlexCond"; src: url("/fonts/plex-sb.ttf"); font-weight: 600; font-display: swap; }

:root {
  --glove: #030912; --red: #fa2a17; --blood: #831a0d; --stone1: #dfd8bd; --stone2: #c9c3ae; --stone3: #a59c8b; --near-white: #f4f4f4; --mat: #588ef9;
  --bg: #f4f4f4; --surface: #ffffff; --surface-2: #ebe8df; --text: #030912; --muted: #45423c; --faint: #66625a;
  --line: rgba(3,9,18,.12); --line-strong: #030912; --accent-text: #831a0d;
  --glass: rgba(248,247,244,.55); --glass-solid: rgba(248,247,244,.82); --glass-line: rgba(3,9,18,.06); --glass-shadow: 0 8px 30px rgba(3,9,18,.08);
  --input-bg: #ffffff; --input-line: #a59c8b; --sheet: #f7f6f2; --scrim: rgba(3,9,18,.5); --chip: #ebe8df;
  --offer-tint: #fbf1ec; --offer-line: rgba(131,26,13,.16);
  --display: "RumbleDisplay", "Arial Black", sans-serif;
  --label: "DMMono", "PlexCond", ui-monospace, monospace;
  --body: "PlexCond", "IBM Plex Sans Condensed", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px); --max: 1280px; --r-lg: 22px; --r-md: 16px; --r-sm: 10px;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #030912; --surface: #0c121c; --surface-2: #101826; --text: #f4f4f4; --muted: #c9c3ae; --faint: #a59c8b;
  --line: rgba(201,195,174,.18); --line-strong: #c9c3ae; --accent-text: #ff6b5b;
  --glass: rgba(12,18,28,.5); --glass-solid: rgba(12,18,28,.84); --glass-line: rgba(201,195,174,.14); --glass-shadow: 0 10px 34px rgba(0,0,0,.45);
  --input-bg: #070d16; --input-line: #a59c8b; --sheet: #0c121c; --scrim: rgba(0,0,0,.62); --chip: #16202f;
  --offer-tint: #1c1316; --offer-line: rgba(255,107,91,.2);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
/* Links carry no underline anywhere. They stay recognizable by placement (nav, buttons, footers), by colour and weight
   in running text, and by the external-link icon; every link keeps the visible focus ring. */
a { color: inherit; text-decoration: none; }
:where(p, li, dd, .meta) a:not(.btn):not(.plain):not(.soc):not(.soc-pill) { color: var(--accent-text); font-weight: 600; }
a:not(.btn):hover { color: var(--accent-text); }
:focus-visible { outline: 3px solid var(--mat); outline-offset: 3px; border-radius: 6px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--glove); color: #fff; padding: 10px 14px; z-index: 60; border-radius: 8px; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.label { font-family: var(--label); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; line-height: 1.5; }
.display { font-family: var(--display); text-transform: uppercase; font-weight: 400; letter-spacing: -0.01em; line-height: .92; }
.confirm { display: inline-block; background: #ffe58a; color: #3a2c00; font: 600 10.5px/1.4 var(--body); text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }

/* Buttons: pill shapes; Rumble Red with Glove Black text for AA contrast. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; font: 400 13.5px/1 var(--label); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; border: 1.5px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; }
.btn-primary { background: var(--red); border-color: var(--red); color: var(--glove); }
.btn-primary:hover { background: #ff4a39; border-color: #ff4a39; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 12.5px; }

/* Identity: metallic Jab + understated "San Ramon" in the label face */
.brandmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brandmark img { width: 34px; height: auto; }
.brandmark .studio { font: 400 12.5px/1 var(--label); text-transform: uppercase; letter-spacing: .22em; padding-left: 12px; border-left: 1px solid var(--line); color: var(--muted); }

/* Inset floating header: transparent at the top, glass once the page scrolls */
.site-header { position: fixed; top: 14px; left: 0; right: 0; z-index: 40; pointer-events: none; }
.site-header .bar { pointer-events: auto; max-width: calc(var(--max) - 2 * var(--gutter) + 28px); width: calc(100% - 2 * var(--gutter) + 28px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; padding: 0 10px 0 14px; border-radius: 999px; background: var(--glass); border: 1px solid transparent; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.site-header.scrolled .bar { background: var(--glass-solid); border-color: var(--glass-line); box-shadow: var(--glass-shadow); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header .bar { background: var(--glass-solid); } }
.nav { display: flex; align-items: center; gap: 24px; }
.nav a:not(.btn) { font-family: var(--label); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; text-decoration: none; }
.nav a:not(.btn):hover { color: var(--accent-text); }
.nav .btn { white-space: nowrap; } /* "Book a class" stays on one line; see the ≤360px rule at the end */

/* Hero */
.hero { padding-top: clamp(120px, 13vw, 160px); }
.hero .eyebrow { color: var(--muted); margin-bottom: 18px; }
/* Two deliberate lines. The size follows the headline box width (cqi) so the longest line just fits;
   --fit = 100 / (longest line width at 100px) × 98, measured for the display face. Capped for large screens. */
.hl-box { container-type: inline-size; }
.hero h1 { font-size: min(84px, calc(var(--fit, 6.924) * 1cqi)); line-height: .92; letter-spacing: -0.012em; }
.hero h1 .line { display: block; white-space: nowrap; }
.hero h1 .plus { color: var(--red); }
/* Square red full stops, as in the original design. The period stays in the text (screen readers, copy, search) but
   is drawn as a red square sized from Titling Gothic Black's own period: 0.301 × 0.288 em with 0.036/0.034 em side
   space, so the line keeps its width. overflow: hidden puts an inline-block's baseline at its bottom edge, so the
   square sits on the text baseline at every size. */
.hero h1 .dot { display: inline-block; width: .301em; height: .288em; margin: 0 .034em 0 .036em; overflow: hidden; vertical-align: baseline; background: var(--red); color: transparent; }
.hero .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-top: 26px; }
.hero .lede { font-size: clamp(17px, 1.45vw, 19px); color: var(--muted); max-width: 52ch; }
.hero .lede strong { color: var(--text); font-weight: 600; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Compact intro offer in the hero: offer copy on the left, one action on the right, vertically centred. The full offer
   (with Book a class) stays in Pricing. Flex-wrap decides from the actual content: when the copy (at its natural width)
   and the button can't share a line, the button moves underneath and fills the width. */
.hero-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 16px 18px 16px 22px; background: var(--offer-tint); border: 1px solid var(--offer-line); border-left: 3px solid var(--red); border-radius: var(--r-md); }
/* "New to Rumble? · Limited-time intro offer": the question leads (accent, a touch larger); each part stays whole and
   the line wraps between them on narrow screens. The separator is drawn in the gap before the second part, so when that
   part wraps to its own line the separator falls outside the box and is clipped instead of dangling. */
.ho-eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.5em; overflow: hidden; color: var(--muted); }
.ho-new { font-size: 13px; color: var(--accent-text); }
.ho-new, .ho-kind { white-space: nowrap; }
.ho-sep { display: none; }
.ho-kind { position: relative; }
.ho-kind::before { content: "·"; position: absolute; left: -1em; color: var(--faint); }
.ho-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 6px; }
.ho-name { font-size: clamp(20px, 1.8vw, 24px); line-height: 1; white-space: nowrap; }
.ho-price { font-size: clamp(30px, 2.8vw, 38px); line-height: .9; color: var(--accent-text); }
.ho-terms { margin-top: 6px; font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.ho-copy { flex: 999 1 auto; min-width: 0; }
.ho-cta { flex: 1 1 auto; text-align: center; line-height: 1.25; padding-block: 8px; }
@media (max-width: 900px) { .hero-offer { justify-self: stretch; } }
/* Highlight, about every 13.5 s: a short red trace runs once around the strip's border and settles into its left accent,
   then the button glints. site.js adds these decorative layers (never with reduced motion) and runs, holds and stops
   them; none of them changes the strip's size. Used only here. */
.hero-offer { position: relative; }
.ho-trace { position: absolute; top: -1px; left: -3px; width: calc(100% + 4px); height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.ho-trace rect { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 3px rgba(250,42,23,.75)) drop-shadow(0 0 7px rgba(250,42,23,.35)); }
/* The settle glow is drawn as the strip's own left border (same widths and radius), so it curves exactly where the red
   line does, with a warm wash just inside. */
.ho-glow { position: absolute; inset: -1px -1px -1px -3px; border: 1px solid transparent; border-left: 3px solid #ff6a58; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(250,42,23,.2), rgba(250,42,23,0) 56px) padding-box; }
.hero-offer .ho-cta { position: relative; overflow: hidden; isolation: isolate; }
.ho-glint { position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.6) 48%, rgba(255,255,255,.6) 52%, transparent 70%); }
@media (prefers-reduced-motion: reduce) { .ho-trace, .ho-glow, .ho-glint { display: none; } }
@media (max-width: 560px) {
  .hero-offer { gap: 12px; padding: 14px 16px; }
  /* Sized so "1 Week Unlimited $39" stays on one line from 360px up (it wraps below that by design). */
  .ho-name { font-size: clamp(16px, 4.8vw, 19.25px); }
  .ho-price { font-size: clamp(25px, 7.1vw, 29px); }
}
}
.stage { margin-top: clamp(28px, 4vw, 44px); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: var(--r-lg); overflow: hidden; background: var(--bg); }
.split video { width: 100%; aspect-ratio: 9 / 8; object-fit: cover; background: #0c121c; }
.stage-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; padding: 12px 6px 0; }
.stage-meta .label { color: var(--muted); }
.stage-meta .right { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Icon-only round controls (video, slideshows, week arrows): 44px targets, names via aria-label */
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 999px; cursor: pointer; font: 400 16px/1 var(--body); }
.icon-btn:hover { border-color: var(--line-strong); }
.icon-btn:disabled { opacity: .35; cursor: default; }
html[data-theme="dark"] .icon-btn { border-color: rgba(201,195,174,.45); }
html[data-theme="dark"] .icon-btn:hover { border-color: var(--line-strong); }
.icon-btn[hidden] { display: none; }

/* Facts */
.facts { margin-top: clamp(48px, 7vw, 88px); }
.facts ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.facts li { background: var(--surface-2); border-radius: var(--r-md); padding: 20px 22px; }
.facts .label { color: var(--muted); }
.facts strong { display: block; font: 400 clamp(22px, 2.1vw, 30px)/1 var(--display); text-transform: uppercase; margin-top: 8px; }

section.block { padding: clamp(72px, 10vw, 128px) 0 0; }
.sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head .label { color: var(--accent-text); }
.sec-head h2 { font-size: clamp(32px, 4vw, 56px); margin-top: 12px; }
/* Under 352px a long single word ("Memberships") would be wider than the screen; scale the floor with the width. */
@media (max-width: 351px) { .sec-head h2 { font-size: 9.1vw; } }
.sec-head p { margin-top: 14px; font-size: 18px; color: var(--muted); max-width: 120ch; }

/* Bag / floor galleries */
.halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.gallery { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); touch-action: pan-y; }
.gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.gallery img.on { opacity: 1; }
.gallery.slow img { transition-duration: 1.2s; }
@media (prefers-reduced-motion: reduce) { .gallery img { transition: none; } }
.sec-head.with-ctrl { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.sec-head.with-ctrl > div:first-child { min-width: 0; }
.g-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.g-ctrl .dots { display: flex; gap: 6px; }
.g-ctrl .dots button { width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: 999px; }
.g-ctrl .dots button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--line-strong); opacity: .3; }
.g-ctrl .dots button[aria-current="true"]::before { opacity: 1; width: 22px; }
.g-ctrl .arrows { display: flex; gap: 6px; }
.g-ctrl .arrows button { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; font: 400 16px/1 var(--body); }
html[data-theme="dark"] .g-ctrl .arrows button { border-color: var(--line-strong); }
.half-card .cap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; color: var(--muted); }
.half-card h3 { font: 400 clamp(24px, 2.4vw, 32px)/.95 var(--display); text-transform: uppercase; margin-top: 10px; }
.half-card p { margin-top: 10px; max-width: 48ch; color: var(--muted); }

/* Find your Rumble */
/* Four cards; subgrid rows keep image, chips, heading, description and "What's different" aligned across a row. */
.formats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 24px); }
.fmt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; margin-bottom: clamp(16px, 2vw, 24px); }
.fmt img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fmt > :not(img) { margin-inline: 20px; }
.fmt .meta { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding-top: 18px; }
.fmt .meta span { background: var(--chip); color: var(--muted); border-radius: 999px; padding: 4px 10px; font: 400 11.5px/1.3 var(--label); text-transform: uppercase; letter-spacing: .04em; }
.fmt h3 { font: 400 clamp(24px, 2vw, 30px)/.95 var(--display); text-transform: uppercase; padding-top: 14px; }
.fmt p { color: var(--muted); }
.fmt .desc { padding-top: 10px; padding-bottom: 14px; font-size: 16px; }
.fmt .diff { font-size: 15px; color: var(--text); border-top: 1px solid var(--line); padding: 12px 0 22px; }
.fmt .diff b { font: 400 11.5px/1 var(--label); text-transform: uppercase; letter-spacing: .05em; color: var(--accent-text); display: block; margin-bottom: 6px; }
@supports not (grid-template-rows: subgrid) { .fmt { display: flex; flex-direction: column; } .fmt .desc { flex: 1; } }

/* External-link marker */
.ext { display: inline-block; margin-left: 5px; vertical-align: -1px; opacity: .8; }
.btn .ext { margin-left: 0; }

/* Upcoming classes: compact card with a sensible max width; time · class · trainer · length · Book line up in columns. */
.sched { container: sched / inline-size; max-width: 880px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px clamp(16px, 3vw, 28px) 16px; }
.sched-stale { margin-bottom: 14px; border-left: 3px solid #b58500; background: rgba(255,229,138,.22); border-radius: 10px; padding: 10px 14px; font-size: 15px; }
.sched-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sched-head[hidden], .days[hidden], .datebar[hidden] { display: none; }
.date-range { font-size: 14px; color: var(--muted); white-space: nowrap; }
.day-title { font: 600 18px/1.3 var(--body); }
.day-title .today { color: var(--accent-text); }
/* Date strip: arrows sit directly beside it; the strip holds every published date and pages a full view at a time. */
.datebar { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.datebar .icon-btn { width: 40px; height: 40px; }
.days { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 5px 4px; margin: -5px 0; scroll-padding-inline: 4px; }
.day:focus-visible { outline-offset: 1px; }
.days::-webkit-scrollbar { display: none; }
.days > .day { flex: 0 0 var(--tile, 58px); scroll-snap-align: start; }
.datebar.more-right .days { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.datebar.more-left.more-right .days { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent); }
.datebar.more-left:not(.more-right) .days { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px); mask-image: linear-gradient(90deg, transparent, #000 20px); }
.day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 50px; padding: 4px 0 7px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; }
.day .dow { font: 400 10.5px/1.2 var(--label); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.day .dnum { font: 600 16.5px/1.15 var(--body); font-variant-numeric: tabular-nums; }
.day.none .dnum { color: var(--faint); font-weight: 400; }
.day:hover { border-color: var(--line-strong); }
.day[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.day[aria-pressed="true"] .dow, .day[aria-pressed="true"] .dnum { color: inherit; }
/* Today: a short red line under the date, inside the tile, whatever is selected (the label also says "today"). */
.day.is-today::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 14px; height: 2px; margin-left: -7px; border-radius: 2px; background: var(--red); }
.day.is-today .dow { color: var(--accent-text); font-weight: 600; }
.day.is-today[aria-pressed="true"] .dow { color: inherit; }
.classes { list-style: none; margin-top: 14px; }
.row { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(112px, 156px) 52px 136px; gap: 2px 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.row time { font: 600 15.5px/1.3 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-main { display: grid; gap: 1px; min-width: 0; justify-items: start; }
.c-meta { display: contents; }
/* Format name: a button that opens the class description (the four workout formats and Run Club); new formats are plain text. */
.c-fmt { display: block; text-align: left; font: 600 16px/1.3 var(--body); color: var(--text); background: none; border: 0; padding: 2px 0 2px 17px; text-indent: -17px; }
.c-fmt .fk { margin-right: 9px; vertical-align: 1px; }
.c-lead, .c-focus { white-space: nowrap; }
/* FREE: only for formats the server lists as free to everyone (Run Club). Accent text on the card surface. */
.c-free { display: inline-block; margin-left: 4px; padding: 3px 7px 2px; border: 1px solid currentColor; border-radius: 999px; font: 400 11.5px/1 var(--label); letter-spacing: .06em; text-transform: uppercase; text-indent: 0; color: var(--accent-text); white-space: nowrap; vertical-align: 2px; }
.row.past .c-free { color: var(--muted); }
.c-focus { font-weight: 400; }
button.c-fmt { cursor: pointer; border-radius: 6px; }
button.c-fmt, button.c-coach { transition: background-color .15s ease, color .15s ease; margin-left: -6px; padding-left: calc(var(--pl, 0px) + 6px); padding-right: 6px; }
button.c-fmt { --pl: 17px; }
button.c-fmt:hover, button.c-coach:hover { background: var(--surface-2); color: var(--accent-text); }
button.c-fmt:focus-visible, button.c-coach:focus-visible { outline: 3px solid var(--mat); outline-offset: 1px; }
.c-title { font-size: 14.5px; line-height: 1.35; color: var(--accent-text); font-weight: 600; padding-left: 17px; }
.c-coach { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; font: 400 15px/1.3 var(--body); color: var(--text); background: none; border: 0; padding: 2px 0; text-align: left; justify-self: start; }
button.c-coach { cursor: pointer; border-radius: 999px; }
.c-cname { min-width: 0; overflow-wrap: break-word; }
.av { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; flex: none; background: var(--surface-2); }
.av-i { display: inline-grid; place-items: center; font: 600 12.5px/1 var(--body); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); background: transparent; }
.c-len { font-size: 14.5px; color: var(--muted); white-space: nowrap; }
.row .book { min-height: 40px; padding: 0 18px; justify-self: end; }
/* Earlier classes stay listed in order: muted grey, details readable, a status instead of Book. */
.row.past time, .row.past .c-fmt, .row.past .c-title, .row.past .c-coach { color: var(--muted); }
.row.past .fk { background: var(--stone3); box-shadow: none; }
.row.past .av:not(.av-i) { filter: grayscale(1); opacity: .8; }
.c-closed { font: 400 11.5px/1.2 var(--label); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 0 4px; white-space: nowrap; justify-self: end; }
/* Format marks: small dots from the existing palette (red, blood-red ring, The Mat blue, ink); the class name always carries the meaning. */
.fk { display: inline-block; width: 8px; height: 8px; border-radius: 999px; flex: none; background: var(--stone3); }
.fk-signature { background: var(--red); }
.fk-versus { background: transparent; box-shadow: inset 0 0 0 2px var(--red); }
.fk-strong { background: var(--mat); }
.fk-boxing { background: var(--text); }
.fk-runclub, .fk-other { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.fmt-key li[hidden] { display: none; }
/* Narrower schedule card (phones, and tablets in between): time | class and session | Book, with the trainer and length
   on their own line under the class. Decided by the card's width, not the window's, so the class column never gets
   squeezed under the trainer column. Names wrap rather than being cut off. */
@container sched (max-width: 660px) {
  .classes .row { grid-template-columns: 70px minmax(0, 1fr) auto; grid-template-areas: "time main act" "time meta act"; gap: 4px 10px; padding: 10px 0; align-items: start; }
  .row time { grid-area: time; padding-top: 3px; }
  .c-main { grid-area: main; }
  .c-lead { white-space: normal; }
  .c-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding-left: 17px; min-width: 0; }
  .c-meta .c-coach { font-size: 14.5px; }
  .c-meta .av { width: 24px; height: 24px; }
  .c-meta .c-len::before { content: "· "; }
  .row > .book, .row > .c-closed { grid-area: act; align-self: center; }
  .row .book { padding: 0 14px; }
  .skel-row { grid-template-columns: 70px minmax(0, 1fr) auto; }
}
/* Narrowest cards: the class name gets the full width; Book (or the status) sits at the end of the trainer line. */
@container sched (max-width: 480px) {
  .classes .row { grid-template-areas: "time main main" "time meta act"; align-items: center; }
  .row time, .c-main { align-self: start; }
}
/* Very narrow cards (small phones, large text): Book goes on its own line under the trainer. */
@container sched (max-width: 290px) {
  .classes .row { grid-template-areas: "time main main" "time meta meta" "time act act"; }
  .row > .book, .row > .c-closed { justify-self: start; }
}
.sched-state { padding: 16px 0 8px; display: grid; gap: 8px; justify-items: start; color: var(--muted); }
.sched-state strong { color: var(--text); }
.sched-state[hidden] { display: none; }
.sched-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.sched-foot > a.full-link { font-size: 14.5px; font-weight: 400; color: var(--text); }
.sched-foot > a.full-link .ext { opacity: .7; margin-left: 3px; }
.fmt-key { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--muted); }
.fmt-key li { display: inline-flex; align-items: center; gap: 6px; }
.skel { display: block; background: var(--surface-2); border-radius: 8px; animation: skel 1.4s ease-in-out infinite; }
.day.skel { flex: 0 0 var(--tile, 58px); min-height: 50px; border: 0; }
.skel-line { width: 220px; height: 20px; }
.skel-row .skel { height: 16px; }
.skel-row .skel:nth-child(2) { width: 70%; }
.skel-row .skel:nth-child(3) { width: 72px; height: 40px; border-radius: 999px; }
.skel-row { grid-template-columns: 76px minmax(0, 1fr) auto; }
@keyframes skel { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Trainers: any number of profiles; fixed-width tracks so 4 or 14 cards keep the same size and rhythm */
.rail { position: relative; }
.rail-nav { display: flex; gap: 8px; justify-content: flex-end; margin: -64px 0 20px; position: relative; z-index: 1; }
/* The scroller clips on every side, so it carries 12px of inner room for the hover scale, ring and focus ring; the negative
   margin keeps the first portrait aligned with the heading. */
.trainers { list-style: none; display: flex; gap: clamp(14px, 2vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; padding: 12px 12px 14px; margin-inline: -12px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.trainers li { position: relative; flex: 0 0 clamp(124px, 13vw, 164px); scroll-snap-align: start; }
/* Edge fades say "there's more" without hiding anyone */
.rail.more-right .trainers { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
.rail.more-left.more-right .trainers { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 64px), transparent); }
.rail.more-left:not(.more-right) .trainers { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
html:not(.js) .rail-nav { display: none; }
.trainer { display: grid; gap: 10px; justify-items: center; width: 100%; padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; font: 600 16px/1.2 var(--body); border-radius: var(--r-md); }
.trainer img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 999px; background: var(--surface-2); transition: transform .2s ease; }
.trainer:hover img { transform: scale(1.03); }
.trainer:hover img { outline: 2px solid var(--red); outline-offset: 3px; }
.trainer:focus-visible { outline: none; }
.trainer:focus-visible img { outline: 3px solid var(--mat); outline-offset: 3px; }
.fixture-note { display: inline-block; margin-bottom: 16px; background: #ffe58a; color: #3a2c00; font: 600 13px/1.3 var(--body); border-radius: 999px; padding: 4px 12px; }
.fixture-note[hidden] { display: none; }
dialog.modal { margin: auto; padding: 0; border: 0; width: min(560px, calc(100vw - 32px)); max-height: min(86dvh, 760px); background: var(--sheet); color: var(--text); border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(3,9,18,.3); }
dialog.modal::backdrop { background: var(--scrim); }
.modal-in { position: relative; padding: 24px 26px 28px; }
.modal-in .close { position: absolute; top: 16px; right: 16px; }
.t-head { display: flex; align-items: center; gap: 18px; padding-right: 110px; }
.t-head img { width: 88px; height: 88px; border-radius: 999px; object-fit: cover; }
.t-head h2 { font-size: 38px; }
.t-bio { margin-top: 18px; display: grid; gap: 10px; color: var(--muted); font-size: 16px; }
.modal-in h3.label { margin-top: 22px; color: var(--accent-text); }
.t-classes { list-style: none; margin-top: 8px; }
.t-classes li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.t-classes li span:first-child { color: var(--muted); }
.t-classes[hidden], .modal-in h3.label[hidden], .t-none[hidden] { display: none; }
.t-none { margin-top: 20px; font-weight: 600; }

/* Format dialog: the class card's own copy, re-laid out for the dialog */
.f-body h2 { font-size: 38px; padding-right: 110px; }
.f-session { margin-top: 8px; color: var(--muted); font-size: 15.5px; }
.f-session b { color: var(--text); font-weight: 600; }
/* Run Club: tags, short paragraphs, then Join free for the session it was opened from. */
.f-tags { margin-top: 10px; color: var(--muted); }
.f-tags .c-free { margin: 0 2px 0 0; vertical-align: 1px; }
.f-about { margin-top: 16px; display: grid; gap: 10px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.f-about strong { color: var(--text); font-weight: 600; }
.f-about .f-lead { color: var(--text); font-size: 18px; font-weight: 600; line-height: 1.35; }
.f-join { margin-top: 22px; }
.f-status { margin-top: 20px; font: 400 12.5px/1.4 var(--label); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.f-foot[hidden] { display: none; }
.f-title { margin-top: 2px; color: var(--accent-text); font-weight: 600; font-size: 15.5px; }
.fmt-dialog { display: block; margin: 16px 0 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.fmt-dialog > :not(img) { margin-inline: 0; }
.fmt-dialog img { height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-md); }
.fmt-dialog .diff { padding-bottom: 0; }

/* Reviews */
.rating { text-align: right; display: grid; gap: 4px; justify-items: end; }
.r-num { display: inline-flex; align-items: center; gap: 6px; font: 400 48px/1 var(--display); }
.r-star { color: var(--red); display: inline-flex; } .r-star svg { width: 28px; height: 28px; }
.r-count { font-size: 15px; color: var(--muted); }
.r-asof { color: var(--faint); }
.rating a { font-weight: 600; font-size: 15px; }
.sec-head .rating-line { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 15px; color: var(--muted); }
.rating-line strong { color: var(--text); font-weight: 700; }
.rating-line .r-star svg { width: 16px; height: 16px; }
.rating-line .sep { color: var(--faint); }
.rating-line a { font-weight: 600; color: var(--text); }
/* Reviews rail: 3 per view on desktop, 2 on tablet, 1 plus a peek on phones. Manual only. */
.reviews { --g: clamp(14px, 2vw, 22px); position: relative; list-style: none; display: flex; align-items: stretch; gap: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 2px 2px 14px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.js .reviews { align-items: flex-start; }
.reviews > li { flex: 0 0 calc((100% - 2 * var(--g)) / 3); min-width: 0; display: flex; scroll-snap-align: start; }
.rail.more-right .reviews { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.rail.more-left.more-right .reviews { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 48px), transparent); }
.rail.more-left:not(.more-right) .reviews { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.review { width: 100%; background: var(--surface-2); border-radius: var(--r-lg); padding: 22px 22px 20px; display: grid; grid-template-rows: auto 1fr auto auto; gap: 12px; }
.review blockquote { font-size: 16.5px; line-height: 1.55; }
.review blockquote p + p { margin-top: .7em; }
/* With scripts: every quote reserves the same height, so cards line up; longer ones clamp with a fade and "Read more". */
.js .review blockquote { min-height: calc(7 * 1.55em); }
.review blockquote.clamp { max-height: calc(7 * 1.55em); overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 2.4em), transparent); mask-image: linear-gradient(#000 calc(100% - 2.4em), transparent); }
.r-more-slot { min-height: 30px; margin-top: -6px; }
.r-more { padding: 4px 0; border: 0; background: none; color: var(--accent-text); font: 600 14.5px/1.3 var(--body); cursor: pointer; }
.r-more::after { content: " ›"; }
.r-more[aria-expanded="true"]::after { content: " ‹"; }
.r-more:hover { color: var(--text); }
.stars { display: flex; gap: 2px; color: var(--red); }
.review figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; }
.review .author { font-weight: 600; }
.review .src { color: var(--muted); }

/* Pass + Find us */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.visit { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(20px, 4vw, 56px); }
.visit-side { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; align-content: start; min-width: 0; }
/* Hours and map share a row only when each gets its comfortable width; otherwise hours sit above the map. */
.visit-side > .visit-hours { flex: 1 1 320px; min-width: 0; }
.visit-side > .visit-map { flex: 1.4 1 320px; }
.visit-hours { background: var(--surface); border-radius: var(--r-md); padding: 20px 22px; }
.visit-map { container: vmap / inline-size; width: 100%; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--surface);
  --m-bg: #ece8df; --m-area: #e3ded2; --m-plaza: rgba(250,42,23,.08); --m-bldg: #d8d1c3; --m-water: #b6cad6; --m-svc: #faf8f3; --m-road: #ffffff; --m-case: #cbc3b3;
  --m-mway: #f0dfbd; --m-mway-case: #c4ae86; --m-label: #3b3832; --m-halo: #ece8df; }
html[data-theme="dark"] .visit-map { --m-bg: #101826; --m-area: #142033; --m-plaza: rgba(250,42,23,.13); --m-bldg: #1a2538; --m-water: #28455a; --m-svc: #1f2939;
  --m-road: #2c3648; --m-case: #080d16; --m-mway: #4b4232; --m-mway-case: #080d16; --m-label: #d6d0bb; --m-halo: #101826; }
/* Static map drawn from OpenStreetMap data (no third-party request). Sizes are in map units: the map is 600 wide. */
.map-link { position: relative; display: block; width: 100%; aspect-ratio: 2 / 1; min-height: 160px; max-height: 240px; background: var(--m-bg); color: var(--text); }
/* The ring is drawn above the drawing (an inset outline would sit underneath it). */
.map-link:focus-visible { outline: none; }
.map-link:focus-visible::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--mat); border-radius: var(--r-md) var(--r-md) 0 0; pointer-events: none; }
.m-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.m-bg { fill: var(--m-bg); } .m-area { fill: var(--m-area); } .m-plaza { fill: var(--m-plaza); } .m-bldg { fill: var(--m-bldg); }
.m-water { fill: none; stroke: var(--m-water); stroke-width: 2.5; }
.m-svc, .m-minor, .m-major, .m-mway, .m-minor-c, .m-major-c, .m-mway-c { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-svc { stroke: var(--m-svc); stroke-width: 2.2; }
.m-minor-c { stroke: var(--m-case); stroke-width: 7; } .m-minor { stroke: var(--m-road); stroke-width: 4.5; }
.m-major-c { stroke: var(--m-case); stroke-width: 11.5; } .m-major { stroke: var(--m-road); stroke-width: 8.5; }
.m-mway-c { stroke: var(--m-mway-case); stroke-width: 12; } .m-mway { stroke: var(--m-mway); stroke-width: 9; }
.m-label, .m-place, .m-place-sub { paint-order: stroke; stroke: var(--m-halo); stroke-linejoin: round; }
.m-label { font: 600 16px var(--body); fill: var(--m-label); stroke-width: 4.5px; }
.m-place { font: 700 19px var(--body); fill: var(--text); stroke-width: 5px; }
.m-place-sub { font: 500 15px var(--body); fill: var(--m-label); stroke-width: 4.5px; }
.m-shield rect { fill: var(--m-road); stroke: var(--m-label); stroke-width: 1.2; } .m-shield text { font: 700 14px var(--body); fill: var(--m-label); text-anchor: middle; }
.m-pin path { fill: var(--red); stroke: #fff; stroke-width: 2.2; } .m-pin circle { fill: #fff; }
.map-open { position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 0; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(3,9,18,.12); }
.map-open .mo-long { margin-right: .3em; } .map-open svg { margin-left: 6px; }
.map-link:hover .map-open { border-color: var(--line-strong); }
/* The OpenStreetMap credit has its own strip under the drawing, so nothing on the map can cover it. */
.map-credit { display: block; padding: 4px 10px 5px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.3; text-align: right; color: var(--muted); }
.map-credit:hover { color: var(--accent-text); }
/* The drawing is always shown whole, so it scales with the map's width; smaller maps get larger label sizes (in map
   units) to stay readable, and the chip shortens to "Google Maps". */
.m-sh { transform: scale(var(--sh, 1.15)); }
@container vmap (max-width: 400px) { .map-open .mo-long { display: none; } .m-label { font-size: 20px; } .m-place { font-size: 23px; } .m-place-sub { font-size: 19px; } .m-shield { --sh: 1.4; } }
/* Narrow phones: a closer drawing (pin, Crow Canyon Rd, San Ramon Valley Blvd) in a taller box, so labels stay ≥11px. */
.m-compact { display: none; }
@container vmap (max-width: 330px) {
  .map-link { aspect-ratio: 6 / 5; max-height: 200px; }
  .m-wide { display: none; } .m-compact { display: block; }
  .m-compact .m-label { font-size: 27px; } .m-compact .m-place { font-size: 30px; } .m-compact .m-place-sub { font-size: 26px; }
}
.visit-hours .hours { margin-top: 10px; }
.card { border-radius: var(--r-lg); padding: clamp(24px, 3vw, 38px); background: var(--surface-2); }
.card .label { color: var(--accent-text); }
.card h2 { font-size: clamp(28px, 3vw, 40px); margin: 12px 0 14px; }
.card p { color: var(--muted); }
.card dl { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px 14px; margin: 18px 0 24px; }
.card dt { font-family: var(--label); text-transform: uppercase; font-size: 12px; padding-top: 3px; color: var(--muted); letter-spacing: .05em; }
.card dd { overflow-wrap: anywhere; }
.card .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.card .fine { font-size: 13.5px; color: var(--faint); margin-top: 14px; }
.card .price { font: 400 30px/1 var(--display); color: var(--text); }
/* Phone and email: plain text styling; colour changes on hover, and keyboard focus shows the ring. */
a.plain:hover { color: var(--accent-text); }
.hours { list-style: none; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; }
/* Every day shares one label column sized to the widest label, so all times line up. Times wrap between ranges, never
   inside one. If the panel is too narrow for the longest range beside the labels, every row stacks the same way. */
.visit-hours { container: hours / inline-size; }
.hours li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.hours li > span:first-child { color: var(--muted); }
@supports not (grid-template-columns: subgrid) { .hours li { grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; } }
@container hours (max-width: 12.9em) { .hours { grid-template-columns: minmax(0, 1fr); row-gap: 10px; } .hours li { row-gap: 1px; } }
@media (max-width: 380px) { .visit-hours { padding-inline: 18px; } }
.card dd .src-note { margin-top: 6px; font-size: 12.5px; }
.holiday { margin-top: 6px; font-weight: 600; color: var(--accent-text); }

/* Closing: metallic Jab + Get in touch + compact first-visit questions */
.touch { margin: clamp(72px, 10vw, 128px) auto 0; }
.touch .panel { background: #030912; color: #f4f4f4; border-radius: var(--r-lg); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: auto minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
html[data-theme="dark"] .touch .panel { background: radial-gradient(120% 140% at 10% 30%, #142033 0%, #0a101a 55%); border: 1px solid var(--glass-line); }
.touch .jab { width: clamp(96px, 10vw, 140px); }
.touch h2 { font-size: clamp(32px, 3.6vw, 52px); }
.touch p.copy { margin: 14px 0 24px; font-size: 18px; color: #dcd8cc; max-width: 42ch; }
.touch .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.touch .btn:not(.btn-primary) { border-color: #c9c3ae; color: #f4f4f4; }
.faq h3 { font: 400 12px/1.4 var(--label); text-transform: uppercase; letter-spacing: .08em; color: #c9c3ae; margin-bottom: 8px; }
.faq details { border-top: 1px solid rgba(201,195,174,.28); }
.faq details:last-of-type { border-bottom: 1px solid rgba(201,195,174,.28); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 2px; font: 600 16px/1.35 var(--body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 20px/1 var(--body); color: #c9c3ae; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 2px 14px; color: #dcd8cc; font-size: 15.5px; }

.site-footer { padding: 40px 0 44px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; color: var(--muted); }
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer a { font-size: 14px; }
.attrib { flex-basis: 100%; font-size: 12.5px; color: var(--faint); }

/* ---------- Form ---------- */
.form-head { display: grid; gap: 10px; margin-bottom: 26px; }
.form-head h1, .form-head h2 { font: 400 clamp(30px, 3.2vw, 42px)/.95 var(--display); text-transform: uppercase; }
.form-head p { color: var(--muted); font-size: 17px; }
.inq { display: grid; gap: 18px; }
.inq[hidden] { display: none; }   /* after a successful send only the thank-you shows */
.field { display: grid; gap: 7px; min-width: 0; }
.field > label { font: 600 15px/1.3 var(--body); }
.field .hint { font-weight: 400; color: var(--faint); }
.inq input[type=text], .inq input[type=email], .inq input[type=tel], .inq textarea { width: 100%; font: 400 16px/1.4 var(--body); padding: 13px 14px; border: 1px solid var(--input-line); border-radius: 12px; background: var(--input-bg); color: var(--text); }
.inq input::placeholder, .inq textarea::placeholder { color: var(--faint); opacity: 1; }
.inq input:focus, .inq textarea:focus { border-color: var(--mat); outline: 2px solid var(--mat); outline-offset: 0; }
.inq textarea { min-height: 96px; resize: vertical; }
.inq [aria-invalid=true] { border-color: #c4260f; }
.err { color: #b3200b; font-size: 13.5px; font-weight: 600; }
html[data-theme="dark"] .err { color: #ff8a7a; }
html[data-theme="dark"] .inq [aria-invalid=true] { border-color: #ff8a7a; }
.err:empty { display: none; }
.req-note { font-size: 14px; color: var(--muted); margin-bottom: -4px; }
/* First and last name side by side when there's room for both (about 180px each), otherwise stacked. */
.name-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 18px 16px; }
/* Consent: notice, required Terms box, optional marketing box, shared disclosures. All visible, never collapsed. */
.consent { display: grid; gap: 14px; margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--line); }
.consent-notice { font-size: 14.5px; line-height: 1.5; color: var(--text); }
.cb { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px 12px; align-items: start; }
.cb input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--red); cursor: pointer; }
.cb input:focus-visible { outline: 3px solid var(--mat); outline-offset: 2px; }
.cb input[aria-invalid=true] { outline: 2px solid #c4260f; outline-offset: 2px; }
html[data-theme="dark"] .cb input[aria-invalid=true] { outline-color: #ff8a7a; }
.cb label { font: 400 14.5px/1.5 var(--body); color: var(--text); overflow-wrap: break-word; cursor: pointer; }
.cb label a { color: var(--accent-text); font-weight: 600; }
.cb .err { grid-column: 2; }
.consent-disc { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 2px; }
.form-actions .btn-primary { min-width: 190px; }
.ready-hint { flex: 1 1 200px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.mock-note { font-size: 12px; color: var(--faint); }
.error-summary { border-left: 3px solid #c4260f; background: rgba(208,52,31,.08); border-radius: 10px; padding: 12px 14px; font-size: 14.5px; }
.error-summary:empty { display: none; }
.error-summary:not(:empty) { margin-bottom: 22px; }
.error-summary ul { margin: 6px 0 0 18px; }
.status h3 { font: 400 30px/1 var(--display); text-transform: uppercase; }
.status p { margin-top: 12px; color: var(--muted); }

/* Panel: slide-in on desktop, full screen on mobile */
dialog.sheet { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0; height: 100dvh; max-height: 100dvh; width: min(540px, 100vw); max-width: 100vw; background: var(--sheet); color: var(--text); box-shadow: -24px 0 60px rgba(3,9,18,.25); border-radius: var(--r-lg) 0 0 var(--r-lg); }
dialog.sheet[open] { display: flex; flex-direction: column; }
dialog.sheet::backdrop { background: var(--scrim); }
.sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 16px 26px; }
.close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: 400 12.5px/1 var(--label); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; border-radius: 999px; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 28px 40px; }
body.sheet-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  dialog.sheet[open] { animation: sheet-in .26s cubic-bezier(.2,.7,.2,1); }
  dialog.sheet.closing { animation: sheet-out .18s ease-in forwards; }
  @keyframes sheet-in { from { transform: translateX(48px); } to { transform: none; } }
  @keyframes sheet-out { to { transform: translateX(48px); } }
}

/* Standalone and legal pages */
.page-main { padding: clamp(120px, 13vw, 150px) 0 clamp(48px, 7vw, 88px); }
.narrow { max-width: 760px; }
.form-page { max-width: 620px; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px); }
.legal h1 { font-size: clamp(36px, 4.4vw, 56px); }
.legal h2 { font: 400 clamp(22px, 2.2vw, 28px)/1 var(--display); text-transform: uppercase; margin: 40px 0 10px; }
.legal p, .legal li { margin-top: 10px; color: var(--muted); }
.legal strong { color: var(--text); }
.legal ul { margin-left: 22px; }
.legal .meta { font-size: 14px; color: var(--faint); margin-top: 10px; }
.draft-banner { background: #ffe58a; color: #3a2c00 !important; padding: 10px 14px; font-size: 14px; border-radius: 12px; margin: 18px 0 8px; }

/* Responsive */
@media (max-width: 1060px) { .nav .hide-md { display: none; } .touch .panel { grid-template-columns: auto minmax(0, 1fr); } .touch .faq { grid-column: 1 / -1; } }
@media (max-width: 1179px) { .formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .hero .row { grid-template-columns: 1fr; } .facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reviews > li { flex-basis: calc((100% - var(--g)) / 2); } .sec-head.with-ctrl { flex-wrap: wrap; } }
@media (max-width: 639px) { .formats { grid-template-columns: 1fr; } .fmt img { aspect-ratio: 16 / 10; } }
@media (max-width: 760px) {
  body { font-size: 16px; }
  .site-header { top: 10px; }
  .site-header .bar { height: 56px; width: calc(100% - 20px); padding: 0 8px 0 12px; }
  .brandmark { gap: 10px; } .brandmark img { width: 28px; } .brandmark .studio { font-size: 11px; letter-spacing: .18em; padding-left: 10px; }
  .nav { gap: 8px; }
  .nav a:not(.btn) { display: none; }
  .hero { padding-top: 100px; }
  .hero .actions .btn { flex: 1 1 auto; }
  .split { gap: 6px; border-radius: var(--r-md); }
  .split video { aspect-ratio: 3 / 4; }
  .facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .facts li { padding: 16px; min-width: 0; }
  .facts strong { font-size: clamp(15.5px, 4.4vw, 25px); } /* "45 minutes" stays on one line in the two-column grid */
  .halves, .duo, .visit { grid-template-columns: 1fr; }
  .card dl { grid-template-columns: 1fr; gap: 2px 0; }
  .card dd { margin-bottom: 10px; }
  .touch { padding: 0 10px; }
  .touch .panel { grid-template-columns: 1fr; padding: 28px 22px; }
  .touch .jab { width: 84px; }
  dialog.sheet { width: 100vw; border-radius: 0; box-shadow: none; }
  .sheet-body { padding: 12px 18px 40px; }
  .sheet-bar { padding: 12px 12px 12px 18px; }
  .page-main { padding-top: 100px; }
  .form-card { border: 0; padding: 0; background: transparent; }
}
@media (max-width: 560px) {
  .stage-meta { align-items: start; }
  .stage-meta .right { display: contents; }
  .stage-meta .vctrl { grid-column: 1 / -1; justify-self: end; margin-top: 2px; }
  .sched { padding: 16px 14px 14px; }
  .datebar .icon-btn, .date-range { display: none; }
  .day .dow { font-size: 10px; letter-spacing: .02em; }
  dialog.modal { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 90dvh; border-radius: 22px 22px 0 0; }
  .f-body h2 { padding-right: 0; padding-top: 44px; font-size: 34px; }
  .trainers li { flex-basis: 36%; }
  .rail-nav { margin: -8px 0 14px; }
  .t-head { padding-right: 0; padding-top: 44px; }
}

/* Offer, Find us */
.offer-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 16px 0 22px; }
.offer-price span { color: var(--text); font-size: 15.5px; }
.nw { white-space: nowrap; }

/* One page-level preview notice (removed in production once live data is wired) */
.preview-note { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 35; display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 24px); padding: 6px 14px; border-radius: 999px; background: #ffe58a; color: #3a2c00; font: 400 13px/1.35 var(--body); box-shadow: 0 6px 20px rgba(3,9,18,.18); }
.pv-dot { width: 7px; height: 7px; border-radius: 999px; background: #8a6a00; flex: none; }
body:has(.preview-note) { padding-bottom: 52px; }

/* Community: one photo and a few warm lines, between the team and the reviews */
.comm { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 4vw, 64px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.comm img { width: 100%; height: 100%; max-height: 560px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 35% 55%; }
.comm-copy { padding: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 56px) clamp(24px, 4vw, 48px) 0; }
.comm-copy .label { color: var(--accent-text); }
.comm-copy h2 { font-size: clamp(32px, 4vw, 56px); margin-top: 12px; }
.comm-copy h2 .ln { display: block; }
.comm-copy h2 + p { margin-top: 16px; font-size: 18px; color: var(--muted); max-width: 46ch; }
.follow { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.comm-copy .follow .label { color: var(--muted); }
.follow .handle { margin-left: 6px; font: 400 14px/1.5 var(--body); text-transform: none; letter-spacing: 0; color: var(--muted); }
.follow-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.soc-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; }
.soc-pill:hover { border-color: var(--line-strong); background: var(--surface-2); }
.site-footer .social { display: flex; gap: 8px; }
.soc { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); }
.soc:hover { border-color: var(--line-strong); }
html[data-theme="dark"] .soc, html[data-theme="dark"] .soc-pill { border-color: rgba(201,195,174,.45); }
@media (max-width: 760px) {
  .comm { grid-template-columns: 1fr; gap: 0; }
  .comm img { aspect-ratio: 4 / 3; max-height: none; object-position: 30% 45%; }
  .comm-copy { padding: 22px 20px 26px; }
}

/* Entrances: added by script only when motion is welcome, so nothing is hidden without JS or with reduced motion. */
.motion .reveal { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .55s ease-out, transform .6s cubic-bezier(.22, .8, .24, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.motion .reveal.float { transform: translate3d(0, 28px, 0) scale(.985); transition-duration: .6s, .7s; }
.motion .reveal.in { opacity: 1; transform: none; }
.motion-init .reveal { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .motion .reveal { opacity: 1; transform: none; transition: none; } }
@media print { .motion .reveal { opacity: 1; transform: none; } }
.modal h2[tabindex="-1"]:focus { outline: none; }
.t-classes li span:last-child { text-align: right; }
.t-title { display: block; color: var(--accent-text); font-weight: 600; font-size: 13.5px; }

/* First-timer offer: featured at the top of pricing, stronger than the standard cards */
.offer-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-bottom: clamp(22px, 3vw, 32px); border-radius: var(--r-lg); overflow: hidden; background: var(--blood); color: var(--near-white); box-shadow: inset 0 0 0 1px rgba(250,42,23,.35); }
.of-img { position: relative; min-height: 280px; background: #5e1309; }
.of-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 40%; }
.of-body { padding: clamp(24px, 3.6vw, 48px); align-self: center; }
.offer-feature .label { color: #ffd2cc; margin-top: 4px; }
/* One line where it fits; on narrow screens the second part wraps and its "·" is clipped, as in the hero strip. */
.offer-feature .of-eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.5em; margin-top: 0; overflow: hidden; }
.of-kicker { font-family: "DMMonoMedium", var(--label); font-size: 14px; color: #fff; }
.of-kicker, .of-kind { white-space: nowrap; }
.of-kind { position: relative; }
.of-kind::before { content: "·"; position: absolute; left: -1em; color: rgba(255,210,204,.7); }
/* Title and price share one row: the price is its own block at the right, never a separator-led fragment. */
.of-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px clamp(16px, 3vw, 36px); margin-top: 12px; }
.offer-feature h3 { font-size: clamp(30px, 3.4vw, 46px); line-height: .95; text-wrap: balance; }
.of-price { font: 400 clamp(60px, 6.6vw, 92px)/.8 var(--display); color: #fff; letter-spacing: -.01em; }
.of-benefit { margin-top: 16px; font-size: 18px; line-height: 1.4; color: #fff; max-width: 48ch; text-wrap: pretty; }
.of-terms { margin-top: 10px; font-size: 14.5px; line-height: 1.45; color: #ffd2cc; }
.offer-feature .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 22px; }
/* Quiet secondary route to the schedule: a text link in the site's link style (colour and weight, no underline). */
.of-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15.5px; font-weight: 600; color: #fff; }
.offer-feature .of-link:hover { color: #ffd2cc; }
.btn-light { background: var(--near-white); border-color: var(--near-white); color: var(--glove); }
.btn-light:hover { background: #fff; }
.offer-feature :focus-visible { outline-color: var(--near-white); }

/* Memberships and class packs: tabs with a sliding indicator; both groups share one stable viewport, each a card rail */
.pricing { position: relative; }
.pbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.pbar .rail-nav { margin: 0; }
.ptabs { position: relative; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); }
.ptabs[hidden], .rail-nav[hidden] { display: none; }
.ptab { position: relative; z-index: 1; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 15.5px/1 var(--body); cursor: pointer; transition: color .25s ease; }
.ptab[aria-selected="true"] { color: var(--bg); }
.ptab-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--text); transition: transform .32s cubic-bezier(.3,.7,.2,1), width .32s cubic-bezier(.3,.7,.2,1); }
.ptab-skel { width: 130px; height: 44px; border-radius: 999px; }
.ppanels { display: grid; }
.js .ppanels > .plans { grid-area: 1 / 1; display: flex; flex-direction: column; }
.plans { min-width: 0; }
.js .plans { visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity .26s ease, transform .3s ease, visibility 0s linear .3s; }
.js .plans.on { visibility: visible; opacity: 1; transform: none; transition: opacity .32s ease .08s, transform .38s cubic-bezier(.2,.7,.2,1) .08s, visibility 0s; }
.pgroup { font: 400 22px/1 var(--display); text-transform: uppercase; margin: 8px 0 12px; }
.js .pgroup { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Cards share rows (subgrid), so titles, prices, terms and Buy line up across a group even when a title wraps. */
.plan-track { --g: clamp(12px, 1.6vw, 18px); position: relative; flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--g)) / 3); grid-template-rows: auto auto 1fr auto; column-gap: var(--g); row-gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 12px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.plan { grid-row: span 4; scroll-snap-align: start; display: grid; grid-template-rows: auto auto 1fr auto; grid-template-rows: subgrid; row-gap: 10px; align-items: start; min-height: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 22px 20px; }
.pricing.more-right .plans.on .plan-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.plan h4 { font: 400 clamp(20px, 1.7vw, 24px)/1 var(--display); text-transform: uppercase; }
.plan-price { display: flex; align-items: baseline; gap: 4px; }
.plan-price strong { font: 400 40px/1 var(--display); }
.plan-price span { color: var(--muted); font-size: 15px; }
.plan-terms { display: grid; gap: 4px; color: var(--muted); font-size: 15px; }
.plan .btn { justify-self: start; margin-top: 6px; }
.plan-skel { min-height: 230px; border: 0; }
/* No subgrid (or ?nosubgrid=1): each card keeps its own rows; the script equalises title and price heights per group. */
.no-subgrid .plan { grid-template-rows: auto auto 1fr auto; }
.no-subgrid .plan h4 { min-height: 2em; }
html:not(.js) .ptabs, html:not(.js) [data-pnav] { display: none; }
@media (prefers-reduced-motion: reduce) { .js .plans, .js .plans.on, .ptab-ind, .ptab { transition: none; } }
@media (max-width: 900px) { .plan-track { grid-auto-columns: calc((100% - var(--g)) / 2.2); } }
/* minmax(0, …) and min-width: 0: an auto minimum lets the 2:1 photo widen the column past the card in some browsers,
   and the card's rounded edge then clips the price. */
.of-img, .of-body { min-width: 0; }
@media (max-width: 900px) { .offer-feature { grid-template-columns: minmax(0, 1fr); } .of-img { min-height: 0; aspect-ratio: 2 / 1; } .of-img img { object-position: 45% 35%; } .visit { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .of-img { aspect-ratio: 16 / 9; } .of-head { grid-template-columns: 1fr; row-gap: 16px; } }
@media (max-width: 560px) { .ptab { padding: 0 14px; } .plan-track { grid-auto-columns: 82%; } .plan h4 { font-size: 19px; } .plan-price strong { font-size: 34px; } .pbar .rail-nav { display: none; } .offer-feature .actions .btn { flex: 1 1 auto; } .reviews > li { flex-basis: 86%; } }
.f-foot { margin-top: 20px; }

/* HSA/FSA: a quiet secondary note under the pricing cards, never louder than prices or Buy. */
.hsa-note { margin-top: 18px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.hsa-note a { color: var(--accent-text); font-weight: 600; }
.hsa-fine { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--muted); }

/* Appearance control (footer): understated, labelled, keyboard reachable; the selected option is filled. */
.appearance { display: inline-flex; align-items: center; gap: 6px; }
.ap-label { margin-right: 4px; font-size: 13px; color: var(--muted); }
.ap-opt { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font: 600 13px/1 var(--body); cursor: pointer; }
.ap-opt:hover { border-color: var(--line-strong); }
.ap-opt[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
html[data-theme="dark"] .ap-opt { border-color: rgba(201,195,174,.45); }
html[data-theme="dark"] .ap-opt[aria-pressed="true"] { border-color: var(--text); }
html:not(.js) .appearance { display: none; }

/* Inquiry form while saving is out of scope: the status notice sits above the fields, so nobody fills in a form that can't send. */
.mode-note { margin: -8px 0 24px; padding: 12px 14px; border-left: 3px solid var(--accent-text); border-radius: 8px; background: var(--surface-2); font-size: 15px; line-height: 1.45; color: var(--text); }
.form-actions .btn[disabled], .form-actions .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.form-actions .btn-primary[aria-disabled=true]:hover { background: var(--red); border-color: var(--red); }
.legal .note, .narrow p.note { margin: 10px 0 14px; padding: 12px 14px; border-left: 3px solid var(--accent-text); border-radius: 8px; background: var(--surface-2); }

/* Book a class chooser: two equal cards (members first), stacked on phones; compact on short phone screens. */
#schedule { position: relative; }
.book-anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; } /* /#book without JS lands where #schedule does */
dialog.chooser { width: min(760px, calc(100vw - 32px)); max-height: min(90dvh, 760px); overflow-y: auto; overscroll-behavior: contain; }
.ch-in { padding: 0 26px 26px; }
.ch-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 0 18px; background: var(--sheet); }
.ch-head h2 { font-size: clamp(30px, 4.2vw, 40px); padding-top: 6px; }
.ch-head h2:focus { outline: none; }
.ch-head .close { flex: none; }
.ch-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; } /* side by side only when each card fits its button on one line */
.ch-card { display: flex; flex-direction: column; padding: 20px 20px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.ch-card h3 { font: 600 19px/1.25 var(--body); }
.ch-card p { margin-top: 8px; color: var(--muted); font-size: 15.5px; line-height: 1.45; }
.ch-offer { border-left: 3px solid var(--red); }
.ch-offer h3.label { font: 400 13px/1.5 var(--label); color: var(--accent-text); }
/* "1 Week Unlimited · $39" on one line where the card allows; otherwise $39 wraps under the name and the "·" (set in
   the gap at the name's size, on the shared baseline) falls outside the box and is clipped instead of dangling. Clipped horizontally only, so the display face's
   tall glyphs are never cut. */
.ch-offer .ch-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 22px; margin-top: 6px; overflow-x: clip; color: var(--text); }
.ch-name { font-size: 17px; line-height: 1; white-space: nowrap; }
.ch-price { font-size: 26px; line-height: .9; color: var(--accent-text); }
.ch-price::before { content: "·"; display: inline-block; width: 22px; margin-left: -22px; font-size: 17px; line-height: 1; text-align: center; color: var(--text); }
.ch-card .ch-benefit { margin-top: 10px; color: var(--text); text-wrap: pretty; }
.ch-offer .ch-terms { margin-top: 6px; font-size: 14px; } /* eligibility and limited-time: secondary */
.ch-act { margin-top: auto; padding-top: 18px; }
.ch-act .btn { width: 100%; }
@media (max-width: 560px) {
  dialog.chooser { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 92dvh; border-radius: 22px 22px 0 0; }
  .ch-in { padding: 0 16px 18px; }
  .ch-head { padding: 14px 0 12px; align-items: center; }
  .ch-head h2 { font-size: 28px; padding-top: 2px; }
  .ch-cards { grid-template-columns: 1fr; gap: 10px; }
  .ch-card { padding: 16px; }
  .ch-card h3 { font-size: 18px; }
  .ch-card p { margin-top: 6px; font-size: 15px; }
  .ch-price { font-size: 24px; }
  .ch-act { padding-top: 14px; }
}
@media (max-width: 703px) and (max-height: 700px) { /* stacked cards on a short screen */
  .ch-head { padding: 10px 0; }
  .ch-head h2 { font-size: 24px; }
  .ch-card { padding: 14px 14px 12px; }
  .ch-card p { margin-top: 4px; line-height: 1.4; }
  .ch-card .ch-benefit { margin-top: 6px; }
  .ch-offer .ch-terms { margin-top: 4px; }
  .ch-act { padding-top: 10px; }
}

/* Narrowest phones: keep the header's and the chooser's buttons on one line (after the phone header rules). */
@media (max-width: 360px) {
  .nav .btn { padding: 0 13px; letter-spacing: .03em; } .brandmark { gap: 8px; } .brandmark .studio { letter-spacing: .12em; padding-left: 8px; }
  .ch-act .btn { gap: 8px; padding: 0 14px; letter-spacing: .03em; } /* "Get 1 Week Unlimited" stays on one line at 300px */
}
/* "CONDITIONS" in the display face is wider than a 300px screen at 36px. */
@media (max-width: 340px) { .legal h1 { font-size: 30px; } }

/* Homepage footer: the site's supplemental role, the franchise relationship and Rumble's corporate policies. Kept quiet:
   small muted text, links in the body text colour at regular weight (the ↗ icon and the darker shade mark them; accent
   only on hover), no underlines, the site's focus ring. Inline links carry .plain to opt out of the bold accent links
   used in body copy. Two balanced columns on wider screens, stacked on phones. */
.ft-grid { flex-basis: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px clamp(32px, 5vw, 72px); padding-top: 18px; border-top: 1px solid var(--line); }
.ft-about, .ft-legal { display: grid; align-content: start; gap: 6px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.ft-about a, .ft-legal a { color: var(--text); font-weight: 500; white-space: nowrap; } /* the ↗ never strands on its own line */
.ft-about a:hover, .ft-legal a:hover { color: var(--accent-text); }
/* The policy links continue the note's sentence ("…Rumble's corporate policies: Terms of Use ↗ …") as one flowing
   paragraph rather than starting their own row. */
.ft-legal { display: block; }
.ft-legal p, .site-footer .ft-legal nav { display: inline; }
.ft-legal nav a { margin-right: 14px; } /* spacing after each link, so a link that starts a line sits flush */
.site-footer .ft-legal nav a { font-size: 13.5px; }
/* min-width: 0 and minmax(0, …): a flex or grid item's automatic minimum width can otherwise let its content widen it
   past the screen in some browsers. */
.ft-about, .ft-legal { min-width: 0; }
@media (max-width: 900px) { .ft-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
@media (max-width: 560px) { .site-footer .wrap { gap: 14px 20px; } }

/* "Most popular" (the studio's designation for Unlimited membership). The badge sits on the card's top edge, inside
   the track's top padding, so it never covers the title at any width, adds no grid row (title, price, terms and Buy stay
   aligned across cards) and can't be clipped by the scrolling track. Every track gets the same top room, so switching
   tabs never changes the height; the emphasis is colour only, so the card's size never changes. */
.plan { position: relative; }
.plan-track { padding-top: 14px; }
.plan.popular { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.plan-badge { position: absolute; top: -11px; right: 18px; padding: 4px 9px 3px; border-radius: 999px; background: var(--accent-text); color: var(--surface); font-size: 11px; line-height: 1.2; white-space: nowrap; }

/* ---- Campaign top card and pricing card (lib/render/promo.ts): rendered only while a campaign is live, each linking to
   the campaign page; site.js also hides them at the end time on a page left open. ---- */
.bf-top[hidden], .bf-promo[hidden] { display: none; }

/* Top card, above the homepage headline: a compact version of the pricing card (same dark-to-red ground and display
   type) that says the campaign is live and points to the campaign page; the offers themselves are on that page and in
   the Pricing card. One row on wide screens, stacked on phones. The whole card is one link; the pause/resume button
   for its animation sits at the trailing edge, outside the link. */
.bf-top {
  position: relative; overflow: hidden; isolation: isolate; margin: 0 0 22px; border-radius: var(--r-lg); color: #f4f4f4;
  background: radial-gradient(70% 190% at 100% 0%, rgba(250, 42, 23, .5), transparent 62%), #030912;
}
.bf-top-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 28px;
  padding: 18px 68px 18px 24px; border-radius: inherit; color: inherit; text-decoration: none;
}
a.bf-top-link:hover, a.bf-top-link:focus-visible { color: #f4f4f4; } /* names the element: beats the site's a:not(.btn):hover */
.bf-top-link:focus-visible { outline-offset: -4px; } /* drawn inside: the card clips its overflow */
.bf-top-head { display: grid; gap: 6px; min-width: 0; }
.bf-top-label { display: flex; align-items: center; gap: 8px; color: #ff8a7d; }
.bf-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.bf-top-title { font-size: clamp(26px, 2.8vw, 38px); line-height: .95; text-wrap: balance; }
.bf-top-text { color: #dcd8cc; font-size: 16px; line-height: 1.4; }
.bf-top-go { white-space: nowrap; }
.bf-arrow { display: inline-block; }

/* Pause/resume: a quiet icon at the trailing edge, a 24px ring inside a 44px touch target. */
.bf-top-pause {
  position: absolute; z-index: 2; top: 50%; right: 12px; transform: translateY(-50%); display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(244, 244, 244, .6); cursor: pointer;
}
.bf-top-pause::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(244, 244, 244, .3); border-radius: 50%; }
.bf-top-pause:hover { color: #f4f4f4; }
.bf-top-pause:hover::before { border-color: rgba(244, 244, 244, .65); }
.bf-top-pause:focus-visible { outline: 3px solid var(--mat); outline-offset: -3px; }
.bf-top-pause svg { width: 10px; height: 10px; }
.bf-ico-play, .bf-top[data-paused] .bf-ico-pause { display: none; }
.bf-top[data-paused] .bf-ico-play { display: block; }

@media (max-width: 640px) {
  .bf-top-link { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 16px 18px; }
  .bf-top-head { padding-right: 36px; } /* clears the pause button in the corner */
  .bf-top-go { width: 100%; }
  .bf-top-pause { top: 6px; right: 6px; transform: none; }
}

/* Motion: the card settles in once; then a light sheen sweeps across it every 5 seconds and the dot pings every 2, on a
   loop, while it's on screen (site.js pauses it off screen and replays it on return). Hover or focus adds a sweep and
   nudges the arrow. The button pauses all of it until the visitor resumes; nothing is remembered. With reduced motion
   nothing moves and the button isn't shown. */
@media (prefers-reduced-motion: no-preference) {
  .bf-top { animation: bf-in .5s cubic-bezier(.2, .8, .2, 1) both; }
  .bf-top::after, .bf-top::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-110%);
    background: linear-gradient(105deg, transparent 35%, rgba(250, 42, 23, .38) 50%, transparent 65%);
  }
  .bf-top::after { animation: bf-glint 5s ease-in-out infinite; }
  .bf-top[data-alt]::after { animation-name: bf-glint-b; }
  .bf-top:has(a.bf-top-link:hover, a.bf-top-link:focus-visible)::before { animation: bf-sheen .9s ease-in-out 1 both; }
  .bf-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--red); animation: bf-ping 2s ease-out infinite; }
  a.bf-top-link:hover .bf-arrow, a.bf-top-link:focus-visible .bf-arrow { animation: bf-nudge .8s ease-in-out infinite; }
  .bf-top[data-offscreen]::after, .bf-top[data-offscreen] .bf-live::after { animation-play-state: paused; }
  .bf-top[data-paused]::after, .bf-top[data-paused]::before, .bf-top[data-paused] .bf-live::after, .bf-top[data-paused] .bf-arrow { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-top-pause { display: none; }
  .bf-top-link { padding-right: 24px; }
  .bf-top-head { padding-right: 0; }
}
@keyframes bf-glint { 0%, 12% { transform: translateX(-110%); } 38%, 100% { transform: translateX(110%); } }
@keyframes bf-glint-b { 0%, 12% { transform: translateX(-110%); } 38%, 100% { transform: translateX(110%); } }
@keyframes bf-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes bf-sheen { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes bf-ping { 0% { transform: scale(1); opacity: .8; } 60%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes bf-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(4px); } }

.bf-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-bottom: clamp(14px, 2vw, 20px); padding: clamp(20px, 3vw, 30px) clamp(20px, 3.4vw, 40px); border-radius: var(--r-lg); color: #f4f4f4; text-decoration: none;
  background: radial-gradient(90% 160% at 100% 0%, rgba(250, 42, 23, .45), transparent 60%), #030912; }
a.bf-promo:hover, a.bf-promo:focus-visible { color: #f4f4f4; }
.bf-tix { transition: transform .15s ease; }
a.bf-promo:hover .bf-tix { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .bf-tix { transition: none; } a.bf-promo:hover .bf-tix { transform: none; } }
.bf-promo-l { display: grid; gap: 6px; min-width: 0; flex: 1 1 380px; }
.bf-promo .label { display: block; color: #ff8a7d; }
.bf-promo-t { font-size: clamp(30px, 3.4vw, 46px); }
.bf-promo-t { text-wrap: balance; }
/* The page's tear-off savings tickets, in miniature (decorative spans: the whole card is one link). */
.bf-promo-deals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.bf-tix {
  display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px 9px 16px; border-radius: 9px; background: var(--red); color: #030912;
  -webkit-mask: radial-gradient(circle 6px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 6px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
}
.bf-tix b { font: 400 clamp(24px, 2.4vw, 30px) / .9 var(--display); text-transform: uppercase; white-space: nowrap; }
.bf-tix > span { flex: 1 1 auto; min-width: 0; padding-left: 12px; border-left: 2px dashed rgba(3, 9, 18, .45); font-size: 14px; font-weight: 700; line-height: 1.2; }
.bf-tix small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; }
@media (max-width: 560px) { .bf-promo .btn { flex: 1 1 100%; } .bf-tix { flex: 1 1 100%; flex-wrap: wrap; gap: 6px 12px; padding: 12px 20px; } .bf-tix b { font-size: 30px; } .bf-tix > span { flex-basis: 100%; } }