/* ============================================================
   Feel Good — Swiss design system
   Shared by index.html (the company) and day.html (the event)
   Paper white ground · ink type · one purple accent
   ============================================================ */

:root {
  /* Near-black ground so the cards run edge to edge with no light margins. */
  --bg: #0d0d0d;
  --card: #171717;       /* dark feature surfaces (hero card, bento, feature) */
  --paper: #f5f2eb;      /* warm paper — surfaces only, never text */
  --type: #d4cfc6;       /* text on dark — paper stepped down, never #fff */
  --ink: #141414;        /* type on light surfaces */
  --paper-70: rgba(212, 207, 198, 0.74);
  /* Brand purple, two duties:
     --accent        fills (buttons, strip, cta card) — paper text on it: 4.62:1
     --accent-bright TYPE on dark grounds — #5b57f0 as text on ink is only
                     3.65:1, so text/labels on dark use this lifted value (6.2:1) */
  --accent: #5b57f0;
  --accent-bright: #8a87ff;
  --accent-hover: #4a45e6;
  --hairline-inv: rgba(245, 242, 235, 0.24);
  /* Site typeface — Helvetica Neue everywhere; fall back cleanly off Apple */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad: clamp(16px, 3.4vw, 48px);
  --radius: 28px;        /* one corner radius for every card and sheet */
  --gap: clamp(14px, 2vw, 22px);
  --ease: cubic-bezier(0.25, 0, 0, 1);

  /* ---- form controls -------------------------------------------------
     Inputs are filled boxes, never underlines. --paper is a SURFACE and
     must never be used as a border: a 2px --paper underline is what the
     "white lines in the fields" complaint was about. See STYLE-GUIDE.md. */
  --field-bg: rgba(245, 242, 235, 0.045);
  --field-bg-focus: rgba(245, 242, 235, 0.075);
  --field-line: rgba(245, 242, 235, 0.13);
  --field-line-strong: rgba(245, 242, 235, 0.22);
  --field-ring: rgba(138, 135, 255, 0.22);
  --field-radius: 12px;
  /* ---- state ---- */
  --ok: #7fd1a8;
  --warn: #ff9d9d;
  --pending: rgba(212, 207, 198, 0.45);

  /* Offering hues — far apart on the wheel so calendar chips do not
     read as the same mud. Fill for blocks; solid for the 8px swatch.
     Meaning always has a label next to the color. */
  /* Chart roles. These alias the offering hues rather than introducing new
     colour: the four were checked for colour-blind separation against --card
     before being used as a categorical set, and the order is fixed — a series
     keeps its hue when another is filtered out. */
  --viz-1: var(--offer-strength);
  --viz-2: var(--offer-peak);
  --viz-3: var(--offer-glp1);
  --viz-4: var(--offer-breakpoint);
  --viz-ok: var(--ok);
  --viz-soft: var(--accent-bright);
  --offer-glp1: #8a87ff;
  --offer-glp1-fill: rgba(138, 135, 255, 0.36);
  --offer-strength: #e39a2e;
  --offer-strength-fill: rgba(227, 154, 46, 0.34);
  --offer-peak: #17b4c9;
  --offer-peak-fill: rgba(23, 180, 201, 0.32);
  --offer-neuralxp: #e14fb3;
  --offer-neuralxp-fill: rgba(225, 79, 179, 0.32);
  --offer-breakpoint: #2fbe62;
  --offer-breakpoint-fill: rgba(47, 190, 98, 0.32);
  --offer-group: #4d8ee8;
  --offer-group-fill: rgba(77, 142, 232, 0.32);

  --stage-active: #7fd1a8;
  --stage-active-fill: rgba(127, 209, 168, 0.22);
  --stage-paused: #ff8b8b;
  --stage-paused-fill: rgba(255, 139, 139, 0.22);
  --stage-onboard: #e6c44c;
  --stage-onboard-fill: rgba(230, 196, 76, 0.22);
  --stage-pay: #6ea8ff;
  --stage-pay-fill: rgba(110, 168, 255, 0.22);
  --pill-slate: rgba(245, 242, 235, 0.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ============================================================
   SCROLLBAR — hide native rails. A 2px purple custom slider
   (see main.js → hairlineScroll) draws the real control. macOS
   overlay scrollbars ignore CSS width; this is the only reliable thin rail.
   ============================================================ */
* {
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* legacy Edge */
}
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent;
}

/* Drawn hairline — 2px purple filament */
.fg-scroll {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.fg-scroll.is-on { opacity: 1; }
.fg-scroll.is-page {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9998; /* under nav/menu (100/200), over content */
}
.fg-scroll__track {
  position: absolute;
  inset: 0;
  background: rgba(91, 87, 240, 0.12);
  border-radius: 1px;
}
.fg-scroll__thumb {
  position: absolute;
  left: 0;
  width: 2px;
  min-height: 18px;
  background: var(--accent-bright);
  border-radius: 1px;
  will-change: transform, height;
}
html.offer-modal-open .fg-scroll.is-page { opacity: 0; pointer-events: none; }

/* Screen-reader only — keeps an h1 without painting a title. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* No scroll-behavior:smooth — it fights Lenis and makes scrolling feel sticky.
   Lenis owns smoothing; without JS the browser scrolls natively. */

html {
  background: var(--bg);
  font-family: var(--font);
}

body {
  font-family: var(--font);
  font-weight: 500;
  background: var(--bg);
  color: var(--type);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* Browsers default buttons/inputs to system UI fonts — force brand type */
button,
input,
select,
textarea {
  font-family: inherit;
  color: inherit;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
address { font-style: normal; }
em { font-style: normal; border-bottom: 4px solid var(--accent); }

/* ---------- reveals (JS-gated so a dead script never hides content) ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--pad);
  /* No bar: the logo and tabs float directly on the page. Every surface
     they cross is dark, so paper text holds contrast throughout — a page
     that opens on a light image has to clear the nav rather than run under
     it (see .keyart), or scrim it the way .panel__media does. */
  background: transparent;
  border-bottom: none;
}
.nav__logo img { width: clamp(120px, 13vw, 158px); height: auto; }
.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav__member {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(13px, 1.25vw, 16px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: #3a33f2;
  border: 1px solid #4d46ff;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.nav__member:hover {
  color: var(--paper);
  background: #2f28e8;
  border-color: #6a64ff;
}
.nav__member:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.nav__menu {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(13px, 1.25vw, 16px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--type);
  background: transparent;
  border: 1px solid var(--hairline-inv);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav__menu:hover { border-color: var(--paper); }
.nav__menu:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
/* The drawer is above the nav, so the toggle has to stay reachable on top
   of it — the button is the close control once it is open. */
.nav { z-index: 120; }

.menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(8, 8, 8, 0.94);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu__inner {
  width: min(100%, 1100px);
  margin: 0 auto;
  min-height: 100%;
  padding: clamp(90px, 14vh, 150px) var(--pad) clamp(28px, 5vh, 52px);
  display: flex;
  flex-direction: column;
}
/* Auto margins above and below the list, so it centres in whatever space is
   left once the foot has taken the bottom — rather than the two of them
   splitting the drawer between them. */
.menu__list {
  list-style: none;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  /* Air between destinations — no hairline rules */
  gap: clamp(18px, 2.8vh, 32px);
}
/* A row per destination. The parent and its branch share the row: the
   branch reads as an attachment to the page above it rather than a smaller
   sibling floating under it. */
.menu__list > li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 20px);
  border: none;
}
.menu__list > li > a {
  font-weight: 700;
  font-size: clamp(18px, 2.1vw, 27px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  padding: clamp(4px, 0.6vh, 8px) 0;
  transition: color 0.25s var(--ease);
}
.menu__list > li > a:hover { color: var(--accent-bright); }
/* The branch is a tag, not a heading — small, outlined, and clearly a
   second destination on the same row. */
.menu__sub { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.menu__sub a {
  display: inline-block;
  font-weight: 700;
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-70);
  border: 1px solid var(--hairline-inv);
  border-radius: 999px;
  padding: 6px 14px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.menu__sub a:hover { color: var(--type); border-color: var(--accent-bright); }
/* A label, not a link: Jupiter Fit is a partner rather than a Feel Good
   program, so its row is marked without borrowing the branch tag's outline —
   which would read as another place to click. */
.menu__note {
  font-weight: 700;
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-70);
}
/* Centred and low: the icon, then the way in, sitting at the foot of the
   drawer rather than floating beside the list. */
.menu__foot {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 18px);
}
/* Two classes deep on purpose: the menu block sits above the BUTTONS
   section, so a single-class rule loses to .btn on source order. */
.menu .menu__cta { font-size: clamp(12px, 1vw, 14px); padding: 14px 26px; }
.menu__ig {
  margin-bottom: 10px;   /* lifts the icon clear of the button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline-inv);
  border-radius: 999px;
  color: var(--paper-70);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.menu__ig:hover { color: var(--type); border-color: var(--paper); }
.menu__ig:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
html.menu-open, html.menu-open body { overflow: hidden; }
html.offer-modal-open, html.offer-modal-open body { overflow: hidden; }
html.member-sheet-open, html.member-sheet-open body { overflow: hidden; }
html.member-sheet-open .nav { display: none; }
html.ks-ticket-open, html.ks-ticket-open body { overflow: hidden; }
html.ks-ticket-open .nav { display: none; }
/* A takeover takes over. Leaving the site nav floating above it put the
   Menu button on top of the modal's own Close. */
html.offer-modal-open .nav { display: none; }


/* ---------- shared ---------- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--hairline-inv);
  padding-top: 14px;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.section-head__label,
.section-head__index {
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 17px);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ============================================================
   BUTTONS — pill pair used across the dark ground
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 18px);
  padding: 15px 30px;
  border-radius: 999px;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

/* ============================================================
   GLASS BUTTONS
   Frosted panel rather than a solid fill: the backdrop is blurred and
   lifted behind the pill, a hairline rim catches the light, and a soft
   top-lit sheen sits over it. The accent survives as a violet tint in
   the glass instead of a flat block of colour.

   backdrop-filter is progressive — where it's unsupported the tint alone
   still reads as a button, and the label is paper on a violet ground
   either way, so nothing depends on the blur landing.
   ============================================================ */
/* One stroke for every button on the site: the same hairline the nav's Menu
   button and the drawer's icon carry, so a pill reads the same wherever it
   lands. These rules were lost in an earlier edit that spliced across a rule
   boundary — .btn--accent had ended up welded onto the :focus-visible
   selector below, which gave every accent button a permanent 2px ring and
   left focus with nothing of its own to say. */
.btn--accent,
.btn--ghost,
.feature__cta,
.pass__cta,
.mafia__cta,
.join__submit {
  background: transparent;
  border: 1px solid var(--hairline-inv);
  border-radius: 999px;
  color: var(--type);
}
/* Accent pills light purple on hover; ghost keeps the paper rim. */
.btn--accent:hover,
.feature__cta:hover,
.pass__cta:hover,
.mafia__cta:hover,
.join__submit:hover { border-color: var(--accent-bright); }
.btn--ghost:hover { border-color: var(--paper); }

/* Solid accent fill — paper type on purple, as the token is specified. */
.btn--fill {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--paper);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
}
.btn--fill:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--fill:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

/* Solid dark-gray pill — secondary CTA next to glass accent buttons */
.btn--slate {
  background: #2c2c2c;
  border: 1px solid #3a3a3a;
  border-radius: 999px;
  color: var(--type);
}
.btn--slate:hover {
  background: #383838;
  border-color: #4a4a4a;
  color: var(--type);
}

/* Focus is its own signal, not the resting state. */
.btn:focus-visible,
.nav__menu:focus-visible,
.join__submit:focus-visible,
.pass__cta:focus-visible,
.mafia__cta:focus-visible,
.feature__cta:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}


/* ============================================================
   HERO — full-bleed borderless cover. Title sits high and centred;
   a bar along the foot carries the meta, the lede and the CTA.
   The photograph arrives pre-graded (black -> purple baked in), so
   nothing here recolours it — the CSS places it and guarantees
   legibility only.
   ============================================================ */
.hero-stage {
  position: relative;
  margin: 0 0 var(--gap);
  overflow: hidden;
  background: #0d0d0d;
  color: var(--type);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-stage__media { position: absolute; inset: 0; z-index: 0; }
.hero-stage__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 78%;    /* keep the crew in frame; the top is gradient */
}
/* Two darkened bands rather than one flat wash: the title crosses the
   cover's bright upper right, and the foot bar sits over the mid-tone crew.
   Between them the gradient stays sheer so the artwork reads. Values are
   measured — see _dev/measure-title-contrast.py. */
.hero-stage__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(8, 6, 14, 0.34) 0%,
    rgba(8, 6, 14, 0.52) 16%,
    rgba(8, 6, 14, 0.52) 40%,
    rgba(8, 6, 14, 0.22) 58%,
    rgba(8, 6, 14, 0.30) 74%,
    rgba(8, 6, 14, 0.72) 100%);
}

.hero-stage__top {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(112px, 19svh, 210px) clamp(20px, 5vw, 80px) 0;
}
.hero-stage__title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.12em 0.38em;
  margin: 0;
  font-size: clamp(23px, 3.5vw, 58px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.hero-stage__title-line {
  display: block;
  will-change: transform, opacity;
}
/* Desktop: one cinematic row. Mobile: stacked so each drop reads clearly. */
@media (min-width: 760px) {
  .hero-stage__title {
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}
@media (max-width: 759px) {
  .hero-stage__title {
    flex-direction: column;
    align-items: center;
    gap: 0.18em;
  }
  .hero-stage__title-line {
    text-align: center;
  }
}
.hero-stage__label {
  margin-top: clamp(14px, 2.2vh, 26px);
  font-weight: 500;
  font-size: clamp(12px, 1.15vw, 16px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245, 242, 235, 0.82);
}
/* Same type as .hero-stage__label — sits under Wellness Experience, over the venue mark */
.hero-stage__at {
  margin: clamp(10px, 1.4vh, 16px) 0 0;
  font-weight: 500;
  font-size: clamp(12px, 1.15vw, 16px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245, 242, 235, 0.82);
}
.hero-stage__venue {
  display: block;
  margin: clamp(6px, 1vh, 12px) auto 0;
  /* ~20% smaller than first pass (was min(52vw, 280px) / min(68vw, 220px)) */
  width: min(41.6vw, 224px);
  height: auto;
  /* SVG fill is already paper white @ 0.82; filter keeps it bright on the photo */
  filter: none;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 700px) {
  .hero-stage__venue { width: min(54.4vw, 176px); }
}

.hero-stage__bar {
  position: relative;
  z-index: 1;
  display: flex;
  /* The button sits on the lede's last line, not below the block: `last
     baseline` matches the two text baselines exactly. flex-end is declared
     first so a browser that drops the `last` keyword still lands close. */
  align-items: flex-end;
  align-items: last baseline;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 64px);
  padding: clamp(20px, 3vh, 34px) clamp(20px, 4vw, 60px) clamp(24px, 4vh, 44px);
}
.hero-stage__tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 52px);
  font-weight: 700;
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-bottom: clamp(10px, 1.6vh, 18px);
}
.hero-stage__lede {
  font-size: clamp(14px, 1.25vw, 18px);
  max-width: 34em;
  color: var(--type);
}
.hero-stage__cta {
  flex: none;
  font-size: clamp(13px, 1.1vw, 15px);
  padding: 11px 26px;
}

@media (max-width: 700px) {
  .hero-stage__bar { flex-direction: column; align-items: stretch; }
  /* Padding back up on phones: the desktop size lands at 42px tall, just
     under the 44px minimum touch target. */
  .hero-stage__cta { align-self: flex-start; padding: 14px 26px; }
}

/* --- Cover story beats (same contract as .keyart--story / Jupiter Fit) ---
   IMAGE → solid black → centered lede word-brighten → undock.
   Layer stack (bottom→top): media (0) → dim (1) → chrome (2) → story (3).
   Dim is a SIBLING of media (not nested). Nested dim sat under media::after
   and never reached solid black — the intro looked broken. */
.hero-stage--story {
  display: block;              /* override flex stage used by the static hero */
  position: relative;
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  margin: 0;                   /* pin-spacer owns the gap into the duo */
  background: #000;
  overflow: hidden;
}
.hero-stage--story .hero-stage__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-stage--story .hero-stage__dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
/* Opening frame: title / venue / foot bar — fades out as black lands */
.hero-stage--story .hero-stage__chrome {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  will-change: opacity;
  pointer-events: none;        /* let scroll pass; CTA re-enabled via JS when visible */
}
.hero-stage--story .hero-stage__chrome .hero-stage__cta {
  pointer-events: auto;
}
.hero-stage--story .hero-stage__top {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}
.hero-stage--story .hero-stage__bar {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}
/* Story lede — dead centre after black */
.hero-stage--story .hero-stage__story {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vh, 48px);
  padding:
    max(clamp(72px, 12vh, 120px), calc(env(safe-area-inset-top, 0px) + 64px))
    max(var(--pad), clamp(20px, 6vw, 96px))
    max(clamp(40px, 8vh, 80px), env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  text-align: center;
  box-sizing: border-box;
}
/* Cover CTA — home Skip + Jupiter Fit “About Jupiter” share the same shell */
.cover-skip,
.cover-about {
  position: absolute;
  left: 50%;
  bottom: max(clamp(28px, 5vh, 48px), env(safe-area-inset-bottom, 0px));
  z-index: 8;
  transform: translateX(-50%);
  pointer-events: auto;
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--type);
  background: rgba(10, 10, 11, 0.35);
  border: 1px solid rgba(245, 242, 235, 0.32);
  border-radius: 999px;
  padding: 12px 22px;
  min-height: 44px;
  min-width: 7.5em;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s var(--ease),
    visibility 0.35s var(--ease),
    border-color 0.2s var(--ease),
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}
.cover-skip:hover,
.cover-about:hover {
  border-color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.2);
}
.cover-skip:focus-visible,
.cover-about:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}
/* Home: Skip only during the autoplay intro */
.hero-stage--story.is-auto-intro .cover-skip,
.hero-stage--story.is-auto-plate .cover-skip,
.hero-stage--story.is-landing-chrome .cover-skip {
  opacity: 1;
  visibility: visible;
}
.hero-stage--story.is-cover-landed .cover-skip {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Jupiter Fit: About on the cover; Exit while the lede is playing */
.keyart--story.is-cover-idle .cover-about {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.keyart--story.is-about-live .cover-about {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.cover-exit {
  position: absolute;
  left: 50%;
  bottom: max(clamp(28px, 5vh, 48px), env(safe-area-inset-bottom, 0px));
  z-index: 9;
  transform: translateX(-50%);
  pointer-events: auto;
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--type);
  background: rgba(10, 10, 11, 0.35);
  border: 1px solid rgba(245, 242, 235, 0.32);
  border-radius: 999px;
  padding: 12px 22px;
  min-height: 44px;
  min-width: 7.5em;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s var(--ease),
    visibility 0.35s var(--ease),
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}
.cover-exit:hover {
  border-color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.2);
}
.cover-exit:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}
.keyart--story.is-about-live .cover-exit {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.keyart--story.is-cover-idle .cover-exit,
.cover-exit[hidden] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.keyart--story.is-about-live .keyart__copy {
  /* ensure lede layer is ready while dim is black */
  opacity: 1;
}
.hero-stage--story .hero-stage__story-lede {
  margin: 0 auto;
  max-width: 22em;
  width: min(100%, 22em);
  font-size: clamp(20px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--type);
  text-align: center;
}
.hero-stage--story .hero-stage__story-lede .fg-word {
  opacity: 0;
  display: inline;
  white-space: normal;
  transition: none;
  will-change: opacity;
}
/* JOS window — same language as duo cards: perfect square, 20px radius.
   Auto-intro stacks lede + plate on black; after drop, cover chrome owns the frame. */
.hero-stage--story .hero-stage__reveal {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  background: transparent;
  padding: var(--pad);
  box-sizing: border-box;
}
.hero-stage--story .hero-stage__reveal-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vh, 22px);
  max-width: 100%;
}
.hero-stage--story .hero-stage__reveal-card {
  position: relative;
  /* Match duo resting square: min(vw, svh) with a sensible cap */
  width: min(72vw, 58svh, 520px);
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  flex-shrink: 0;
  background: #121212;
  will-change: transform;
}
.hero-stage--story .hero-stage__reveal-addr {
  margin: 0;
  font-size: clamp(11px, 1.15vw, 14px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 242, 235, 0.88);
  text-align: center;
  will-change: opacity, transform;
}

/* —— Home autoplay: text-only beat, then plate-only beat, then landing —— */
html.cover-intro-lock,
html.cover-intro-lock body {
  overflow: hidden !important;
  overscroll-behavior: none;
}
.hero-stage--story.is-auto-intro .hero-stage__dim {
  opacity: 1;
}
.hero-stage--story.is-auto-intro .hero-stage__chrome {
  opacity: 0;
  visibility: hidden;
}
/* Text phase: dead-centre lede on black (plate stays off until JS) */
.hero-stage--story.is-auto-intro .hero-stage__story {
  z-index: 5;
  align-items: center;
  justify-content: center;
  will-change: opacity, transform;
  /* Hidden until JS seeds the timeline (avoids unsplit-text flash) */
  opacity: 0;
}
.hero-stage--story.is-auto-intro .hero-stage__story-lede {
  max-width: 22em;
  font-size: clamp(20px, 2.8vw, 36px);
}
/* Plate phase: full-centre square (sequential after text dissolves) */
.hero-stage--story.is-auto-intro .hero-stage__reveal {
  z-index: 4;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.hero-stage--story.is-auto-intro.is-auto-plate .hero-stage__story {
  visibility: hidden;
  pointer-events: none;
}
.hero-stage--story.is-auto-intro .hero-stage__reveal-card {
  width: min(72vw, 58svh, 520px);
}
.hero-stage--story.is-auto-intro .hero-stage__reveal-logo {
  will-change: transform;
}
/* Landing chrome phase: GSAP still dissolves plate/dim; CSS only kills the lede */
.hero-stage--story.is-landing-chrome .hero-stage__story {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hero-stage--story.is-landing-chrome .hero-stage__reveal {
  pointer-events: none;
}
.hero-stage--story.is-landing-chrome .hero-stage__dim {
  pointer-events: none;
}
.hero-stage--story.is-landing-chrome .hero-stage__chrome {
  visibility: visible;
  opacity: 1;
}
.hero-stage--story.is-cover-landed .hero-stage__story,
.hero-stage--story.is-cover-landed .hero-stage__reveal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hero-stage--story.is-cover-landed .hero-stage__dim {
  opacity: 0;
}
.hero-stage--story.is-cover-landed .hero-stage__chrome {
  opacity: 1;
  visibility: visible;
}
.hero-stage--story.is-cover-landed .hero-stage__title-line,
.hero-stage--story.is-cover-landed .hero-stage__label,
.hero-stage--story.is-cover-landed .hero-stage__at,
.hero-stage--story.is-cover-landed .hero-stage__venue,
.hero-stage--story.is-cover-landed .hero-stage__bar {
  opacity: 1;
  transform: none;
}
@media (max-width: 700px) {
  .hero-stage--story.is-auto-intro .hero-stage__story-lede {
    font-size: clamp(18px, 4.8vw, 26px);
    max-width: 16em;
  }
  .hero-stage--story.is-auto-intro .hero-stage__reveal-card {
    width: min(82vw, 52svh, 400px);
  }
}
.hero-stage--story .hero-stage__reveal-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #0a0a0a;
}
.hero-stage--story .hero-stage__reveal-img {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  /* Imagine-completed square — full bleed cover, slight headroom for parallax */
  width: 108%;
  height: 108%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center center;
  will-change: transform;
}
.hero-stage--story .hero-stage__reveal-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* ~1× bigger than before (was min(58%, 200px)) */
  width: min(90%, 400px);
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.6));
}
@media (max-width: 700px) {
  .hero-stage--story .hero-stage__reveal-card {
    width: min(82vw, 52svh, 400px);
  }
  .hero-stage--story .hero-stage__reveal-img {
    width: 110%;
    height: 110%;
  }
  .hero-stage--story .hero-stage__reveal-logo {
    width: min(92%, 320px);
  }
}
/* GSAP pin class — keep the stage locked to one viewport while scrubbing */
.hero-stage--story.is-pinned {
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
}
html:not(.js) .hero-stage--story .hero-stage__dim,
html.no-anim .hero-stage--story .hero-stage__dim {
  opacity: 0; /* static: land on cover photo */
}
html:not(.js) .hero-stage--story .hero-stage__story,
html:not(.js) .hero-stage--story .hero-stage__reveal,
html.no-anim .hero-stage--story .hero-stage__story,
html.no-anim .hero-stage--story .hero-stage__reveal {
  opacity: 0;
  visibility: hidden;
}
html:not(.js) .hero-stage--story .hero-stage__chrome,
html.no-anim .hero-stage--story .hero-stage__chrome {
  opacity: 1;
  visibility: visible;
}
html:not(.js) .hero-stage--story.is-auto-intro .hero-stage__story,
html.no-anim .hero-stage--story.is-auto-intro .hero-stage__story {
  opacity: 0; /* override auto-intro hide-until-js when JS is off / reduced */
}
@media (max-width: 700px) {
  .hero-stage--story .hero-stage__story-lede {
    font-size: clamp(18px, 4.8vw, 26px);
    max-width: 16em;
    line-height: 1.34;
  }
  .hero-stage--story .hero-stage__top {
    padding-top: max(clamp(88px, 14svh, 120px), calc(env(safe-area-inset-top, 0px) + 56px));
  }
}

/* ============================================================
   GLASS DISPLAY TYPE
   The titles are genuinely transparent, not painted purple: the gradient
   clipped to the glyphs is white with a falling ALPHA, so whatever sits
   behind — video, duotone panel, the cover's purple glow, flat ink —
   shows through and tints the letters. Same word reads warm on the
   Strength panel and violet on the hero because it is literally the
   backdrop coming through.

   Alpha floors at 0.66 rather than going fully sheer: measured against
   the lightest ground any of these titles sits on, that holds the weakest
   stop above the 3:1 large-text floor. Going thinner looked better in
   isolation and failed on the video slides.

   Guarded: without background-clip support, color:transparent would erase
   the titles, so those browsers keep solid paper.
   ============================================================ */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-stage__title,
  .duo__title,
  .rail__title,
  .panel__title,
  .feature__title,
  .mafia__title,
  .bento__title,
  .join__title,
  .group__title,
  .friction__lead,
  .friction__flip,
  .vendors__lead,
  .vendor__title,
  .program__title,
  .pass__price,
  .tile__big {
    background-image: linear-gradient(100deg,
      rgba(245, 242, 235, 0.98) 0%,
      rgba(245, 242, 235, 0.86) 34%,
      rgba(245, 242, 235, 0.74) 68%,
      rgba(245, 242, 235, 0.66) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* Keeps its own accent colour — the purple numerals stay purple. */
  .tile__big em { color: var(--accent-bright); }
}

/* Nav rides over the hero card until the page scrolls past it. */

/* ============================================================
   BENTO — dark stat/fact grid
   ============================================================ */
.bento { padding: clamp(56px, 9vh, 110px) var(--pad); }
.bento__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(24px, 4vh, 44px);
}
.bento__title {
  font-size: clamp(26px, 3.4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.bento__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.tile {
  background: var(--card);
  color: var(--type);
  border-radius: 20px;
  padding: clamp(18px, 1.9vw, 28px);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}
.tile--wide { grid-column: span 2; }
.tile__big {
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.tile__big em { border-bottom: none; color: var(--accent-bright); }
.tile__small { color: var(--paper-70); font-size: clamp(13px, 1.4vw, 15px); }
.tile--logo {
  background: var(--accent);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tile--logo img { width: 64px; height: 64px; }
.tile--logo .tile__small { color: var(--type); font-weight: 700; }

/* ============================================================
   STRIP — full-width accent banner
   ============================================================ */
.strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  background: var(--accent);
  color: var(--type);
  padding: clamp(16px, 2.6vh, 26px) var(--pad);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(17px, 2.6vw, 32px);
  transition: background 0.3s var(--ease);
}
.strip:hover { background: var(--accent-hover); }
.strip__go { white-space: nowrap; }

/* ============================================================
   SHEET — a light section floated as a rounded card on the dark page.
   Inner components keep their ink-on-paper styles.
   ============================================================ */
.sheet {
  background: var(--card);
  color: var(--type);
  border-radius: var(--radius);
  margin: 0 var(--pad) var(--gap);
  padding-left: clamp(22px, 3.4vw, 52px) !important;
  padding-right: clamp(22px, 3.4vw, 52px) !important;
}

/* ============================================================
   STORY PANELS — full-bleed image with type over a scrim.
   The scrim is 0.66 ink at its lightest. Even over pure-white
   photography the composite lands near #616161, so paper-colored
   body text clears WCAG AA (5.1:1) whatever the photo turns out
   to be. Never lighten it below 0.62.
   ============================================================ */
.panel {
  position: relative;
  min-height: clamp(500px, 82svh, 860px);
  display: flex;
  align-items: flex-end;
  padding: clamp(24px, 3.4vw, 52px);
  overflow: hidden;
  color: var(--type);
  background: var(--ink);
  border-radius: var(--radius);
  margin: 0 var(--pad) var(--gap);
}
main > .panel:first-child { margin-top: 86px; }
/* Parallax overscan: main.js adds .is-parallax, then slides the image
   ±9% with GSAP. 122% height keeps the frame covered at both extremes. */
.panel__media img.is-parallax,
.hero-stage__media img.is-parallax { height: 122%; }
.panel__chip {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  background: rgba(12, 12, 12, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--type);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 9px 16px;
  border-radius: 999px;
}
.panel--center { align-items: center; }
/* Type-only panel — no photograph, so it needs less height and no scrim. */
.panel__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* Text never rises above 50% of a panel (measured), so the scrim holds its
   guaranteed 0.66 up to 62% and only then eases off — the sky stays open and
   the photograph reads, while every word still sits on protected ground. */
.panel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 20, 20, 0.90) 0%,
    rgba(20, 20, 20, 0.72) 40%,
    rgba(20, 20, 20, 0.66) 62%,
    rgba(20, 20, 20, 0.30) 100%
  );
}
.panel__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1500px;
}
.panel__title {
  font-size: clamp(34px, 6.4vw, 104px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 15em;
}
.panel__text {
  margin-top: clamp(18px, 2.6vh, 32px);
  font-size: clamp(16px, 1.9vw, 22px);
  max-width: 34em;
  color: var(--type);
}

/* hero variant — the one panel that leads the page */
.panel--hero { align-items: flex-end; min-height: 100svh; }
.panel--hero .panel__title { font-size: clamp(46px, 12vw, 190px); text-transform: uppercase; }
.panel--hero .panel__lede {
  margin-top: clamp(16px, 2.4vh, 28px);
  font-size: clamp(17px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 24em;
}

/* ============================================================
   DUO — problem → solution window sequence.
   Each beat: a square video window with copy in the bottom-left
   corner. Pinned, the window locks and expands to full screen,
   hands back, and the next beat arrives with the same motion.

   Duotone matches the pillar technique: gradient on the card,
   video blended in luminosity. Hot pink for the problem; the
   solution answers it in the brand violet.

   Default (no JS / reduced motion): a plain vertical stack.
   ============================================================ */
.duo { position: relative; }
.duo__slide {
  position: relative;
  padding: clamp(56px, 9vh, 110px) var(--pad);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 4vh, 40px);
}
/* Card = size + (when pinned) GSAP centering transform only.
   Frame = rounded window: gradient, video clip, scrim. Keeping transform
   off the clipping node is what stops WebKit/mobile from painting square
   video/pink corners through the radius. */
.duo__card {
  position: relative;
  width: min(78vw, 52svh, 560px);
  aspect-ratio: 1 / 1;
  align-self: center;
  /* Transparent shell — color lives on .duo__frame so a failed clip never
     flashes a square pink slab under the rounded window. */
  background: transparent;
}
.duo__frame {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  /* Hard clip; more reliable than overflow alone for <video> + blend. */
  clip-path: inset(0px round 20px);
  isolation: isolate;
  /* Compositor path that respects rounded corners on iOS Safari. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.duo__slide--problem .duo__frame  { background: linear-gradient(200deg, #ff9ad1 0%, #f0148c 50%, #550c3b 100%); }
.duo__slide--solution .duo__frame { background: linear-gradient(200deg, #a5a2ff 0%, #5b57f0 50%, #1c1450 100%); }
.duo__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  mix-blend-mode: luminosity;
  filter: contrast(1.06);
  /* Keep the video on its own layer inside the already-clipped frame. */
  transform: translateZ(0);
}
/* Bottom-weighted scrim: at rest it grounds the duotone; expanded, it is
   what keeps the corner copy legible. The 0.55 stop at 40% covers the title
   zone — with the glass type's 0.66 minimum alpha, the brightest frames in
   either video still measure ≥3.2:1 there (large-text floor is 3:1), and
   the body copy lower down sits under ≥0.66 scrim at ≥4.5:1. */
.duo__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top,
    rgba(8, 6, 14, 0.88) 0%,
    rgba(8, 6, 14, 0.55) 40%,
    rgba(8, 6, 14, 0.26) 75%,
    rgba(8, 6, 14, 0.14) 100%);
  pointer-events: none;
  z-index: 1;
}
.duo__copy { max-width: 560px; }
.duo__title {
  font-size: clamp(28px, 4.2vw, 64px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 14em;
}
.duo__text {
  margin-top: clamp(14px, 2vh, 24px);
  font-size: clamp(15px, 1.4vw, 19px);
  max-width: 34em;
}
/* Antidote copy: thin purple underlines on the three pillars */
.duo__slide--solution em {
  border-bottom-color: var(--accent-bright);
  border-bottom-width: 1.5px;
}

/* --- pinned window sequence (JS-enabled only) --- */
.duo.is-pinned {
  height: 100svh;
  overflow: hidden;
  /* Opaque, because the pillars come later in the DOM and would otherwise
     show straight through this section while it is pinned. */
  background: var(--bg);
}
/* The stacking lift belongs to the ACTIVE state, not the pinned class.
   .is-pinned never comes off, so a permanent z-index kept this section above
   the pillars long after it had released — it stayed in flow, still
   overlapping the viewport, and hid the pillar gallery behind it. main.js
   toggles .is-live from the trigger's own active state. */
.duo.is-live { z-index: 2; }
.duo.is-pinned .duo__slide {
  position: absolute;
  inset: 0;
  padding: 0;
  display: block;
}
.duo.is-pinned .duo__card {
  position: absolute;
  top: 50%;
  left: 50%;
  align-self: auto;
  width: min(46svh, 44vw, 520px);
  height: min(46svh, 44vw, 520px);
  /* Size only on the shell. Radius/clip live on .duo__frame (no transform). */
  will-change: width, height;
}
.duo.is-pinned .duo__frame {
  /* Fill the shell; radius is driven by GSAP in lockstep with expand. */
  will-change: border-radius;
}
.duo.is-pinned .duo__copy {
  position: absolute;
  left: var(--pad);
  bottom: clamp(24px, 5vh, 56px);
  z-index: 5;
  max-width: min(560px, 62vw);
}
@media (max-width: 700px) {
  .duo.is-pinned .duo__card { width: min(52svh, 84vw); height: min(52svh, 84vw); }
  .duo.is-pinned .duo__copy { right: var(--pad); max-width: none; }
}

/* ============================================================
   RAIL — the three pillars as an editorial filmstrip.
   Tall portrait panels on a near-black ground, each photo run
   through a duotone (gradient behind + luminosity blend on the
   image), with technical metadata in the margins.

   Vertical stack by default; the pinned gallery takes over
   only once main.js confirms GSAP and adds .is-pinned.
   ============================================================ */
.rail {
  background: #0d0d0d;
  /* Sits below the pinned duo above it; they never overlap once this one
     pins, because by then the duo has scrolled away. */
  position: relative;
  z-index: 1;
  color: var(--type);
  padding: clamp(56px, 9vh, 110px) 0;
  border-radius: var(--radius);
  margin: 0 var(--pad) var(--gap);
  overflow: hidden;
}
.rail__track {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 0 clamp(20px, 3vw, 44px);
}
.rail__slide {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  /* Portrait proportion belongs to the filmstrip. Stacked full-width it would
     make 1800px-tall cards, so the fallback uses a plain height instead. */
  min-height: min(74svh, 640px);
  overflow: hidden;
  isolation: isolate;          /* keep the blend inside this card */
}

/* --- duotone ---------------------------------------------------------
   The gradient sits on the container; the photo blends in luminosity, so
   colour comes from the gradient and light/shade from the photograph.
   Each pillar gets its own gradient, all landing on the brand purple. */
.rail__media { position: absolute; inset: 0; z-index: 0; }
/* These must never be loading="lazy". They sit in a pinned, transformed
   container where the browser's lazy heuristic does not fire, and because
   the blend is luminosity an image with no content composites to solid
   black — the cards render as empty boxes rather than photographs. */
.rail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  mix-blend-mode: luminosity;
  filter: contrast(1.08) brightness(0.94);
}
/* Parallax here is HORIZONTAL: the section is pinned, so a vertical drift
   would fight the sideways travel. Each photo slides against the filmstrip
   as it passes, which reads as depth. 116% width with an -8% offset leaves
   8% of slack either side to cover the ±6% of travel, so no edge shows. */
.rail__media img.is-parallax-x {
  position: absolute;
  top: 0;
  left: -8%;
  width: 116%;
  /* The global img{max-width:100%} caps this back to the card width, which
     kills the overscan and lets the drift expose the card's edge. */
  max-width: none;
  height: 100%;
}
.rail__slide--strength .rail__media   { background: linear-gradient(200deg, #e3a84b 0%, #c0482b 52%, #4a2e6b 100%); }
.rail__slide--recovery .rail__media   { background: linear-gradient(200deg, #cdbf6d 0%, #6e7a3c 48%, #3a2f6b 100%); }
.rail__slide--connection .rail__media { background: linear-gradient(200deg, #e06a3a 0%, #b33a55 46%, #5b57f0 100%); }

/* Reading scrim over the duotone — heaviest at the foot where the copy sits. */
.rail__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(10, 10, 10, 0.90) 0%,
    rgba(10, 10, 10, 0.72) 34%,
    rgba(10, 10, 10, 0.40) 62%,
    rgba(10, 10, 10, 0.28) 100%);
}

/* --- editorial marks -------------------------------------------------- */
.rail__ghost {
  position: absolute;
  right: clamp(6px, 1vw, 18px);
  bottom: clamp(-10px, -1vh, 0px);
  z-index: 1;
  font-size: clamp(120px, 20vw, 260px);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: rgba(245, 242, 235, 0.13);
  pointer-events: none;
}

.rail__inner { position: relative; z-index: 2; width: 100%; }
.rail__kicker {
  font-weight: 500;
  font-size: clamp(13px, 1.3vw, 16px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 242, 235, 0.78);
  margin-bottom: 2px;
}
.rail__title {
  font-size: clamp(34px, 4.4vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Hairline credit rows, like a spec sheet. Real values only. */
.rail__meta {
  margin-top: clamp(14px, 2vh, 22px);
  border-top: 1px solid rgba(245, 242, 235, 0.28);
}
.rail__meta > div {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(245, 242, 235, 0.16);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rail__meta dt { color: rgba(245, 242, 235, 0.62); }
.rail__meta dd { color: var(--type); }


.rail__text {
  margin-top: clamp(12px, 1.8vh, 18px);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.45;
  max-width: 30em;
  color: rgba(245, 242, 235, 0.92);
}

/* --- each pillar is a two-screen page --------------------------------
   Screen one is the photograph, screen two a black classes section built
   from the same .program cards as the classes page. Unpinned they simply
   stack; pinned, the page slides between them. */
.rail__page { display: flex; flex-direction: column; }
/* The view — not the slide — carries the padding and the bottom alignment.
   Once pinned, .rail__page is absolutely positioned, so anything set on the
   slide never reaches the copy: it ended up flush to the top-left corner and
   spilling out of the card. */
.rail__view {
  position: relative;
  min-height: min(74svh, 640px);
  display: flex;
  align-items: flex-end;
  padding: clamp(18px, 2vw, 30px);
  overflow: hidden;
}
.rail__classes {
  background: var(--bg);
  padding: clamp(24px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 3vh, 34px);
}
.rail__classhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--hairline-inv);
  padding-top: 14px;
  font-weight: 700;
  font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Inside a pillar page a class card is a picture — its copy lives in an
   overlay that only appears once the card has expanded into its own page.
   The row is flex rather than grid so the timeline can hand one card the
   whole screen by taking the others' flex-grow to zero; grid columns can't
   be tweened that way. */
.rail.is-pinned .rail__classes { justify-content: stretch; overflow: hidden; }
/* nowrap keeps the head one line at any card width, which is what makes
   its measured resting height trustworthy when the timeline restores it. */
.rail.is-pinned .rail__classhead { overflow: hidden; white-space: nowrap; }
.rail.is-pinned .rail__classgrid {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
@media (max-width: 760px) {
  /* One picture across on a phone, so the expansion runs vertically. */
  .rail.is-pinned .rail__classgrid { flex-direction: column; }
}
.rail.is-pinned .rail__classes .program {
  --card-pad: 0px;             /* the media cancels this, so it must be zero */
  position: relative;
  flex: 1 1 0;
  min-width: 0;                /* without this a flex item won't collapse */
  min-height: 0;
  height: auto;
}
/* A class card is a two-screen page of its own: the picture, then what the
   class actually is. Once expanded it scrolls between them exactly the way
   the pillar above it scrolls down to its classes. */
/* Two screens by default — picture, then detail. A class with a branch of
   its own sets --screens on the wrapper and gets another. main.js reads the
   child count, so the two never drift apart. */
.rail.is-pinned .rail__classes .program__scroll {
  position: absolute;
  inset: 0;
  height: calc(var(--screens, 2) * 100%);
  will-change: transform;
}
.rail.is-pinned .rail__classes .program__scroll > * {
  height: calc(100% / var(--screens, 2));
  min-height: 0;
}
.rail.is-pinned .rail__classes .program__screen {
  position: relative;          /* the copy overlay anchors to this, not the card */
  display: flex;
  flex-direction: column;
}
.rail.is-pinned .rail__classes .program__media {
  aspect-ratio: auto;          /* a square would overflow at full height */
  flex: 1;
  min-height: 0;
  margin: 0;
}

/* The class's own page: the copy over the bottom of its photograph. Held at
   opacity 0 rather than display:none so the card keeps an accessible name
   while it is still just a picture. The scrim is what makes the type legible
   over an unknown photo — measured, not assumed. */
.rail.is-pinned .program__page {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  /* The tall top padding is the scrim's runway, not whitespace: it lets the
     gradient reach full strength well above the type and fade out gently.
     Measured worst case is a blown-white photograph behind it — the titles
     are glass (0.66 alpha floor), so the ground under them has to be dark
     on its own rather than borrowing from the picture. */
  padding: clamp(80px, 18vh, 200px) clamp(22px, 4.5vw, 76px) clamp(22px, 4.5vw, 76px);
  /* Many stops, not three: a short ramp reads as a hard band across a flat
     sky like The Sunny Hour Studio's. The strength is held through the copy
     and only then let go, slowly. */
  background: linear-gradient(
    to top,
    rgba(13, 13, 13, 0.95) 0%,
    rgba(13, 13, 13, 0.93) 52%,
    rgba(13, 13, 13, 0.84) 68%,
    rgba(13, 13, 13, 0.62) 79%,
    rgba(13, 13, 13, 0.36) 88%,
    rgba(13, 13, 13, 0.14) 95%,
    rgba(13, 13, 13, 0) 100%
  );
}
/* A detail row can carry a link out — to a booking page, a profile. */
.detail__row dd a {
  color: var(--type);
  border-bottom: 1px solid var(--accent-bright);
  padding-bottom: 1px;
}
.detail__row dd a:hover { color: var(--accent-bright); }
/* The way through to a class's own page, once it has one. */
.detail__cta {
  align-self: flex-start;
  margin-top: clamp(16px, 2.4vh, 28px);
  font-size: clamp(13px, 1.1vw, 15px);
  padding: 12px 26px;
}
@media (max-width: 760px) { .detail__cta { padding: 14px 26px; } }

.rail.is-pinned .program__page .program__when {
  font-size: clamp(11px, 1.05vw, 14px);
  margin-bottom: clamp(10px, 1.4vh, 16px);
}
.rail.is-pinned .program__page .program__title {
  font-size: clamp(30px, 4.6vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: clamp(12px, 1.8vh, 22px);
}
/* Where a class has its own wordmark, that mark IS the page's title — the
   text heading would repeat it and collide with it. The heading stays in the
   markup, clipped, so the card keeps a real <h3> for assistive tech and the
   mark can be decorative. */
.rail.is-pinned .program__media--layered ~ .program__page .program__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ---------- a class's detail screen ----------
   Deliberately plain: a label column and a description column separated by
   hairlines, on the page ground. Unscoped from .is-pinned so the no-JS and
   reduced-motion stacks get the same rows, just in flow. */
.program__detail {
  background: var(--bg);
  padding: clamp(24px, 4vw, 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
/* The head only earns its place on the pinned page, where the picture and
   its title have already scrolled away. In the no-JS stack the card's own
   <h3> sits directly above these rows, so repeating the name there would
   just be the same words twice. */
.detail__head { display: none; margin-bottom: clamp(16px, 2.6vh, 32px); }
.rail.is-pinned .detail__head { display: block; }
.detail__kicker {
  font-weight: 700;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: clamp(6px, 1vh, 12px);
}
.detail__name {
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
/* Sits outside .detail__head on purpose: the head is a pinned-page nicety,
   this is the class's actual argument and has to survive the no-JS stack. */
.detail__lede {
  font-size: clamp(15px, 1.45vw, 21px);
  line-height: 1.5;
  max-width: 40em;
  color: var(--type);
  margin-bottom: clamp(16px, 2.4vh, 30px);
}
.detail__rows { border-top: 1px solid var(--hairline-inv); }
.detail__row {
  display: grid;
  grid-template-columns: minmax(130px, 0.85fr) 2fr;
  gap: clamp(16px, 3vw, 56px);
  align-items: start;
  padding: clamp(12px, 1.9vh, 26px) 0;
  border-bottom: 1px solid var(--hairline-inv);
}
.detail__row dt {
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 21px);
}
.detail__row dd {
  color: var(--paper-70);
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.55;
  max-width: 46em;
}
@media (max-width: 760px) {
  /* Two columns on a phone leaves slivers; the label sits over its row. And
     the rhythm has to tighten: a detail screen is one viewport, never a
     scroller, so six rows and a lede have to fit inside 812px. */
  .detail__row { grid-template-columns: 1fr; gap: 6px; padding: clamp(9px, 1.2vh, 18px) 0; }
  .detail__lede { margin-bottom: clamp(12px, 1.8vh, 20px); }
  .detail__head { margin-bottom: clamp(12px, 1.8vh, 22px); }
}

/* ---------- a branch of a class ----------
   The key art carries its own wordmark, so it is the title: a band across
   the top, cropped from the middle so the lockup survives every width, with
   the copy beneath it. The trainer appears as a face beside his name rather
   than as the screen's photograph — the program is the subject here. */
.program__branch {
  background: var(--bg);
  display: grid;
  grid-template-rows: 45% 1fr;
  overflow: hidden;
}
.branch__art { overflow: hidden; background: var(--card); }
.branch__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.branch__body {
  padding: clamp(20px, 3vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.branch__body .detail__kicker { margin-bottom: clamp(8px, 1.2vh, 14px); }
.branch__body .detail__lede {
  font-size: clamp(14px, 1.25vw, 19px);
  max-width: 46em;
  margin-bottom: clamp(14px, 2vh, 24px);
}
.branch__by {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  margin-bottom: clamp(14px, 2vh, 24px);
}
.branch__face {
  width: clamp(40px, 3.6vw, 58px);
  height: clamp(40px, 3.6vw, 58px);
  border-radius: 999px;
  object-fit: cover;
  object-position: center 22%;   /* the face sits high in the source frame */
  flex: none;
  background: var(--card);
}
.branch__byline { display: flex; flex-direction: column; line-height: 1.3; }
.branch__byline strong { font-weight: 700; font-size: clamp(14px, 1.15vw, 18px); }
.branch__byline span {
  color: var(--paper-70);
  font-size: clamp(11px, 0.95vw, 14px);
  letter-spacing: 0.06em;
}
.branch__cta {
  align-self: flex-start;
  font-size: clamp(13px, 1.1vw, 15px);
  padding: 12px 26px;
}
@media (max-width: 860px) {
  /* A narrow screen crops the art hardest; give it less height so the copy
     still fits, and the lockup still clears the sides. */
  .program__branch { grid-template-rows: 34% 1fr; }
  .branch__cta { padding: 14px 26px; }   /* clears the 44px touch target */
}

/* Classes read across, not down — one row of equal columns. */
.rail__classgrid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: clamp(12px, 1.4vw, 20px);
}
@media (max-width: 760px) {
  /* Three columns on a phone would be unreadable slivers. */
  .rail__classgrid { grid-auto-flow: row; grid-auto-columns: auto; }
}

/* --- pinned gallery (JS-enabled only) ---
   Cards no longer ride a filmstrip. Each one takes the stage in turn:
   slides in as a portrait card, expands to fill the screen, holds, then
   contracts and leaves as the next arrives. They stack absolutely and
   centre themselves; main.js drives width/height/x, so the sizes here are
   only the resting state before the timeline takes over. */
.rail.is-pinned {
  height: 100svh;
  padding: 0;
  margin: 0 0 var(--gap);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.rail.is-pinned .rail__track {
  display: block;
  height: 100svh;
  padding: 0;
  gap: 0;
}
.rail.is-pinned .rail__slide {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  /* Resting size before the timeline takes over — kept in step with the
     values main.js derives, so the first paint matches. */
  width: min(30vw, 380px);
  height: min(64svh, 620px);
  border-radius: 20px;
  will-change: width, height, transform;
}
@media (max-width: 899px) {
  .rail.is-pinned .rail__slide {
    width: min(84vw, 400px);
    height: min(62svh, 540px);
  }
}
/* Copy has to stay readable at both the resting size and full screen. */
@media (max-width: 899px) {
  }


/* Pinned: the page is two card-heights tall inside the card's own clip, so
   the timeline can slide it from the photograph down to the classes. */
.rail.is-pinned .rail__slide { overflow: hidden; }
.rail.is-pinned .rail__page {
  position: absolute;
  inset: 0;
  height: 200%;
  will-change: transform;
}
.rail.is-pinned .rail__view,
.rail.is-pinned .rail__classes {
  flex: 0 0 50%;
  height: 50%;
  min-height: 0;
}
.rail.is-pinned .rail__view { padding: clamp(18px, 2vw, 34px); }
.rail.is-pinned .rail__title { font-size: clamp(28px, 3.6vw, 60px); }
.rail.is-pinned .rail__text { font-size: clamp(13px, 1vw, 16px); }

/* A trail back — only when the reader arrived from the home-page story
   (?from=home). Menu / direct / external landings hide it so the cover
   owns the full first frame. With JS off, the trail stays visible. */
.crumbs {
  padding: clamp(72px, 8vw, 96px) var(--pad) clamp(14px, 1.6vw, 22px);
}
html.js:not(.from-home) .crumbs { display: none; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before {
  content: "/";
  margin: 0 clamp(8px, 1vw, 12px);
  color: var(--paper-70);
}
.crumbs a, .crumbs span {
  font-weight: 700;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 0;
}
.crumbs a { color: var(--paper-70); }
.crumbs a:hover { color: var(--type); }
.crumbs [aria-current] { color: var(--accent-bright); }

/* ============================================================
   BREAKPOINT — its own page
   A Cowpoke branch with enough of its own substance to need one:
   the argument, who built it, the training, and the lanes.
   ============================================================ */

/* Full-viewport cover: edge-to-edge, no card radius, under the transparent
   nav. The photograph is object-fit: cover so every aspect ratio fills. */
.keyart {
  position: relative;
  margin: 0;
  border-radius: 0;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--card);
}
/* Soft top veil so the paper logo + Menu stay readable on bright covers
   (sky, palm, studio light) without a hard scrim over the whole frame. */
.keyart::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(96px, 18vh, 160px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(13, 13, 13, 0.55) 0%,
    rgba(13, 13, 13, 0.22) 55%,
    rgba(13, 13, 13, 0) 100%
  );
}
/* Scoped through <picture> so it cannot reach the overlaid mark, which is a
   bare <img> sibling — `.keyart img` outranks `.keyart__mark` and was
   stretching the wordmark past the frame. */
.keyart > picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.keyart > picture img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.keyart__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
  background: transparent;
}
.keyart--video::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: clamp(240px, 46vh, 420px);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(13, 13, 13, 0.82) 0%,
    rgba(13, 13, 13, 0.32) 58%,
    rgba(13, 13, 13, 0) 100%
  );
}
.keyart__copy {
  position: absolute;
  left: var(--pad);
  right: max(9.5rem, calc(var(--pad) + 8rem));
  bottom: clamp(20px, 4vh, 36px);
  z-index: 3;
  max-width: 34em;
  pointer-events: none;
}
.keyart__logo {
  display: block;
  width: min(39%, 210px);
  height: auto;
  margin: 0 0 14px;
}
.keyart__copy p {
  margin: 0;
  max-width: 28em;
  font-size: clamp(16px, 1.85vw, 20px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--type);
}
.keyart__sound {
  position: absolute;
  left: auto;
  right: var(--pad);
  bottom: clamp(20px, 4vh, 36px);
  z-index: 3;
  margin: 0;
  min-height: 44px;
  padding: 10px 18px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--type);
  background: rgba(13, 13, 13, 0.55);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.keyart__sound:hover { background: rgba(13, 13, 13, 0.72); }
.keyart__sound:focus-visible {
  outline: 2px solid var(--type);
  outline-offset: 3px;
}
.keyart__sound[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 38%, rgba(13, 13, 13, 0.55));
}
@media (max-width: 560px) {
  .keyart__copy {
    right: var(--pad);
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .keyart__sound {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .keyart__video,
  .keyart__sound,
  .program__media video { display: none; }
}
/* A photograph with no wordmark of its own gets the club's mark set over it. */
.keyart--marked > picture img {
  object-position: center var(--art-y, 42%);
}
/* The palm's crown is in the bottom third of its square. */
.keyart--sunny { --art-y: 100%; }
/* The Cowpoke group shot is wider than the cover frame at most sizes, so it
   crops left-to-right and this value costs nothing. It earns its keep on a
   monitor wider than 1.83:1, where the crop turns vertical and the default
   42% would trade the group away for more brick. */
.keyart--cowpoke { --art-y: 58%; }

/* ============================================================
   RUN STRIP — the Wednesday-night gallery, walked sideways.
   Ported from the sunset strip on The Josephine: the band docks
   full-screen FIRST, then the scroll drives scrollLeft, because
   the tween is the pin. Its own opaque layer so it covers the
   sheet above rather than floating over it.
   ============================================================ */
.runstrip {
  position: relative;
  z-index: 10;
  overflow-x: hidden;        /* the pinned tween drives scrollLeft */
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  padding: 0 var(--pad);
  height: 100svh;
  scrollbar-width: none;
  background: var(--ink);
}
/* No GSAP, or reduced motion: a plain swipeable strip, no pin. */
.runstrip.no-fx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.runstrip::-webkit-scrollbar { display: none; }
.runstrip__card {
  flex: 0 0 auto;
  height: 70svh;
  aspect-ratio: 800 / 1412;  /* the photographs' own ratio — see the note in
                                cowpoke.html about why these stay portrait */
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--card);
}
.runstrip__card picture,
.runstrip__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Zero-width flex child, so the label takes no space in the row and parks
   dead centre while the cards walk under it. */
.runstrip__label {
  position: sticky;
  left: 50%;
  flex: 0 0 0px;
  min-width: 0;
  align-self: stretch;
  overflow: visible;
  z-index: 6;
  pointer-events: none;
}
.runstrip__label i {
  font-style: normal;
  position: absolute;
  bottom: clamp(40px, 7svh, 96px);
  left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 17px);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--type);
  text-shadow: 0 2px 14px rgba(8, 6, 14, 0.55);
}
@media (max-width: 700px) {
  .runstrip__card { height: 60svh; }
}
/* Smaller mark than the shared rule: this cover has forty-odd faces in it and
   the full-width wordmark sat across all of them. left/right + width cannot
   centre a narrower mark — width wins and `right` is dropped — so this centres
   on the 50% line instead. */
.keyart--cowpoke .keyart__mark {
  left: 50%;
  right: auto;
  width: 44%;
  max-height: 22%;
  transform: translateX(-50%);
}
.keyart__mark {
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 10%;
  z-index: 2;
  width: 74%;
  height: auto;
  max-height: 38%;
  object-fit: contain;
  filter: drop-shadow(0 6px 22px rgba(8, 6, 14, 0.45));
}
/* Cover story — pin + scrub beats: image → solid black → word highlight → undock. */
.keyart--story {
  background: #000;
}
.keyart--story::after {
  /* Keep a light nav veil only; the scroll dim does the heavy darkening. */
  height: clamp(80px, 14vh, 120px);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}
.keyart--story .keyart__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.keyart--story .keyart__media picture,
.keyart--story .keyart__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.keyart--story .keyart__dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* True black so the cover fully disappears before type. */
  background: #000;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
/* Dead-centre of the viewport. Symmetric inset so flex centre == screen
   centre (uneven top/bottom padding used to sit the lede too low). */
.keyart--story .keyart__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    max(var(--pad), env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px))
    max(var(--pad), clamp(20px, 6vw, 96px));
  pointer-events: none;
  text-align: center;
  background: none;
}
.keyart--story .keyart__lede {
  font-size: clamp(24px, 3.3vw, 46px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 19em;
  width: min(100%, 19em);
  margin: 0 auto;
  color: var(--type);
  text-align: center;
}
/* Josephine-style word brighten — start invisible so load doesn't grey out the logo */
.keyart--story .keyart__lede .fg-word {
  opacity: 0;
  display: inline;
  white-space: normal;
  transition: none;
  will-change: opacity;
}
/* Idle cover: hide the about lede until "About Jupiter" plays (no FOUC).
   While is-about-live, GSAP owns opacity (incl. the dissolve back). */
html.js .keyart--story:not(.is-about-live) .keyart__copy {
  opacity: 0;
}
html[data-layout="mobile"] .keyart--story .keyart__lede {
  font-size: clamp(19px, 5.2vw, 28px);
  max-width: 15em;
  line-height: 1.34;
}
html:not(.js) .keyart--story .keyart__dim,
html.no-anim .keyart--story .keyart__dim {
  opacity: 0.72;
}
html:not(.js) .keyart--story .keyart__lede .fg-word,
html.no-anim .keyart--story .keyart__lede .fg-word {
  opacity: 1;
}
html:not(.js) .keyart--story .keyart__lede,
html.no-anim .keyart--story .keyart__lede {
  opacity: 1;
}
@media (max-width: 768px) {
  .keyart--story .keyart__lede {
    font-size: clamp(19px, 5.2vw, 28px);
    max-width: 15em;
    line-height: 1.34;
  }
}

/* When crumbs sit above the cover (home trail only), keep a hairline gap
   out of the trail padding rather than a second margin on the art. */
.crumbs + .keyart { margin-top: 0; }

.bp-title {
  font-size: clamp(38px, 7vw, 104px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: clamp(16px, 2.4vw, 28px);
}
.bp-lede {
  font-size: clamp(17px, 2vw, 30px);
  line-height: 1.35;
  max-width: 24em;
  margin-bottom: clamp(14px, 2vw, 22px);
}

/* ---------- Schedule page — flat black, no sheet cards ---------- */
html.schedule-view,
html.schedule-view body,
body.schedule-view {
  background: #000;
  min-height: 100%;
}
/* Always show crumbs on this page (global rule hides them without ?from=home) */
html.js.schedule-view .crumbs {
  display: block !important;
}
.schedule-page {
  background: #000;
  /* Clear fixed nav; horizontal pad; room above footer */
  padding:
    0
    var(--pad)
    clamp(48px, 8vh, 80px);
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.schedule-page .crumbs {
  /* Keep top clearance for fixed nav; kill horizontal pad (page already pads) */
  padding-top: max(clamp(72px, 10vh, 100px), calc(env(safe-area-inset-top, 0px) + 64px));
  padding-bottom: clamp(12px, 1.6vh, 20px);
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  margin: 0;
}
.schedule-hero {
  padding: 0 0 clamp(20px, 3vh, 32px);
  background: transparent;
  margin: 0;
  border-radius: 0;
}
.schedule-hero__kicker {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 10px;
}
.schedule-hero__title {
  max-width: 20em;
  margin: 0 0 12px;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--type);
}
.schedule-hero__lede {
  max-width: 36em;
  margin: 0;
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.5;
  color: var(--paper-70);
  font-weight: 500;
}
.schedule-cal {
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
  width: 100%;
}
/* Cal mount: solid stage so the iframe always has a real box */
.schedule-cal__frame {
  position: relative;
  width: 100%;
  min-height: 720px;
  height: min(820px, 78svh);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: 0;
  background: #000;
  /* Keep native page rail off this nested scroller’s right edge a hair */
  box-sizing: border-box;
}
.schedule-cal__frame iframe {
  display: block;
  width: 100% !important;
  min-height: 720px !important;
  height: 100% !important;
  border: 0 !important;
  background: #000;
}
.schedule-fallback {
  margin: clamp(16px, 2.5vh, 28px) 0 0;
  font-size: clamp(13px, 1.2vw, 15px);
  color: var(--paper-70);
  line-height: 1.5;
}
.schedule-fallback a {
  color: var(--accent-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}
html.schedule-view .footer {
  background: #000;
  border-top: 1px solid rgba(245, 242, 235, 0.1);
}
/* Hide the drawn page hairline over the booking stage (it fights the iframe) */
html.schedule-view .fg-scroll.is-page {
  opacity: 0 !important;
  pointer-events: none !important;
}
@media (max-width: 700px) {
  .schedule-cal__frame {
    min-height: 640px;
    height: min(720px, 72svh);
  }
  .schedule-cal__frame iframe {
    min-height: 640px !important;
  }
  .schedule-hero__title {
    font-size: clamp(20px, 5.5vw, 26px);
  }
}

/* The medical framing is the one line on this page that has to be read, so
   it is set apart rather than folded into the paragraph above it. */
.bp-note {
  color: var(--paper-70);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.5;
  max-width: 34em;
  border-left: 2px solid var(--accent-bright);
  padding-left: clamp(12px, 1.4vw, 20px);
}
/* Module 01 on an offering page — a square of the class on the left, the
   name and the copy on the right. The media is a centred square crop of the
   same clip that runs full-bleed above, so it holds its 1:1 box at every
   width and never letterboxes. Collapses to media-over-copy on narrow. */
.bp-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}
.bp-table__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  background: var(--card);
}
.bp-table__media img,
.bp-table__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* The video sits over the poster image, so a refused autoplay or a
   reduced-motion visit still shows the frame underneath. */
.bp-table__video { z-index: 1; background: transparent; }
.bp-table__copy { min-width: 0; }
/* The display size is tuned for a full-width sheet; in half a sheet it has to
   come down or it sets three words to a line. */
.bp-table__copy .bp-title { font-size: clamp(34px, 4.4vw, 68px); }
@media (prefers-reduced-motion: reduce) {
  .bp-table__video { display: none; }
}
@media (max-width: 720px) {
  .bp-table { grid-template-columns: 1fr; }
}

.ks-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  margin-top: clamp(22px, 3vw, 36px);
}
.ks-table__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  background: var(--card);
}
.ks-table__media picture,
.ks-table__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.ks-table__media img { object-fit: cover; }
.ks-table__copy { min-width: 0; }
.ks-table__copy .bp-lede { margin-bottom: clamp(14px, 2vw, 22px); }
.ks-table__more { margin-top: clamp(28px, 4.2vw, 48px); }
@media (max-width: 720px) {
  .ks-table { grid-template-columns: 1fr; }
}

/* Breakpoint tiers inside Jamar's offerings — Foundation / Peak
   buttons under the description, details in the panel below.
   Rhythm: description → gap → buttons →28px→ panel. */
.bp-pick {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 28px);
  width: 100%;
  margin: 0;
}
.bp-pick__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
.bp-pick__tab {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  min-height: 48px;
  touch-action: manipulation;
}
.bp-pick__tab.is-active {
  border-color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.12);
  color: var(--type);
}
.bp-pick__tab:hover { border-color: var(--accent-bright); }
.bp-pick__panel {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vw, 14px);
}
.bp-pick__panel .svc__list { max-width: 40em; }
/* ============================================================
   RACE CARDS — one per start line, on the Cowpoke page.
   ============================================================ */
.races {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
.racecard {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Both marks are other people's brands and neither was drawn for a dark
   ground — the Austin file is a JPEG with a baked-in white background, and
   would read as a white slab straight on the card. A paper plate gives them
   both the clear space a third-party logo needs and makes the two sit as a
   pair. --paper as a SURFACE, which is what it is for; it is never a border
   here. */
.racecard__mark {
  background: var(--paper);
  padding: clamp(20px, 3vw, 34px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(150px, 17vw, 210px);
}
/* contain, not cover: the two logos are different shapes (SA is a 1.43:1
   badge, Austin a square) and cropping either one damages the mark. */
.racecard__mark img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(110px, 13vw, 150px);
  object-fit: contain;
}
.racecard__body { padding: clamp(20px, 2.6vw, 30px); }
.racecard__when {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 8px;
}
.racecard__name {
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.racecard__text {
  color: var(--paper-70);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 720px) {
  .races { grid-template-columns: 1fr; }
}
/* JS on: only the selected panel. JS off: both panels stack. */
html.js .bp-pick__panel:not(.is-active) { display: none; }
html:not(.js) .bp-pick__panel + .bp-pick__panel {
  margin-top: clamp(20px, 2.6vw, 32px);
  padding-top: clamp(20px, 2.6vw, 32px);
  border-top: 1px solid var(--hairline-inv);
}
@media (max-width: 520px) {
  .bp-pick__tab { flex: 1 1 calc(50% - 6px); text-align: center; }
}

.maker__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 600px) {
}
.maker__media {
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg);
  aspect-ratio: 1 / 1;
}
.maker__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

.maker__name { font-weight: 700; font-size: clamp(22px, 2.6vw, 38px); letter-spacing: -0.02em; }
.maker__role {
  font-weight: 700;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: clamp(14px, 2vw, 24px);
}
.maker__text {
  color: var(--paper-70);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.6;
  max-width: 40em;
}
.maker__text + .maker__text { margin-top: 1em; }
.maker__text a {
  color: var(--type);
  border-bottom: 1px solid var(--accent-bright);
  padding-bottom: 1px;
}
.maker__text a:hover { color: var(--accent-bright); }

@media (max-width: 700px) {
  .maker__media { max-width: 260px; }
}

/* Portrait chef photo — native frame, not the square Jamar crop. */
.maker--portrait .maker__media {
  position: relative;
  aspect-ratio: 1024 / 1404;
}
.maker--portrait .maker__media picture,
.maker--portrait .maker__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
@media (max-width: 720px) {
  .maker--portrait .maker__grid { grid-template-columns: 1fr; }
  .maker--portrait .maker__media { max-width: min(420px, 100%); }
}

.found__lede {
  font-size: clamp(16px, 1.7vw, 25px);
  line-height: 1.4;
  max-width: 30em;
  margin-bottom: clamp(22px, 3vw, 40px);
}
.found__facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 72px);
  border-top: 1px solid var(--hairline-inv);
  border-bottom: 1px solid var(--hairline-inv);
  padding: clamp(16px, 2.2vw, 28px) 0;
  margin-bottom: clamp(26px, 4vw, 48px);
}
.found__facts dt {
  font-weight: 700;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 6px;
}
.found__facts dd { font-weight: 700; font-size: clamp(18px, 2.2vw, 30px); letter-spacing: -0.01em; }

/* The training shot beside the facts. The photograph is a tall portrait framed
   by two runners' legs, so it is NOT cropped to a box — the frame takes the
   picture's own ratio and the column is capped instead, which is what keeps
   that framing intact. The facts sit top-aligned next to it rather than
   centred: four short rows centred against a 4:7 portrait leaves them adrift
   in the middle of the column. */
.found__shot {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  margin-bottom: clamp(26px, 4vw, 48px);
}
.found__shotmedia {
  max-height: 74svh;
  overflow: hidden;
  border-radius: 16px;
  background: var(--card);
}
.found__shotmedia img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* Everything the section says about the session rides in the right column —
   the facts and the assessment note both. The facts alone left most of a
   4:7 portrait's height as empty ground. */
/* Price and Sign up, at the foot of the assessment column in Breakpoint's
   first module — the ask lands once the room and the terms are explained.
   Baseline-aligned so the button sits on the price's own line rather than
   under its sub-line. */
.bp-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(16px, 2.4vw, 32px);
  margin-top: clamp(26px, 3.4vw, 40px);
}
/* .lane__price reserves a sub-line row for the three-lane grid it was built
   for; alone here that empty row reads as a gap under the price. */
.bp-offer__price { min-height: 0; }
.bp-offer__cta { flex: 0 0 auto; }
.bp-offer__note {
  color: var(--paper-70);
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.5;
  max-width: 40em;
  margin-top: clamp(12px, 1.6vw, 18px);
}
/* Separated from the movements list above it, not butted against it. */
.found__assess + .bp-offer { margin-top: clamp(30px, 4vw, 48px); }

/* Breakpoint folds the training into the intro, so a .found__lede can land
   directly under a .bp-note. The note has a left rule and no bottom margin —
   it was always last in its section — so without this the two run together. */
.bp-note + .found__lede { margin-top: clamp(30px, 4.4vw, 56px); }

.found__shotbody { min-width: 0; }
.found__shot .found__facts { margin-bottom: clamp(22px, 3vw, 34px); }
.found__shot .found__assess { margin-bottom: 0; }
@media (max-width: 720px) {
  .found__shot { grid-template-columns: 1fr; }
  .found__shotmedia { max-height: 62svh; }
}

.ks-intro { max-width: 34em; margin-bottom: clamp(24px, 3.2vw, 36px); }
.ks-intro .bp-lede { margin-bottom: 12px; }
.ks-intro__by {
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.4;
  color: var(--type);
}

.ks-dates {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ks-dates__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem 10.75rem;
  align-items: center;
  column-gap: 24px;
  min-height: 64px;
  padding: 12px 16px 12px 36px;
  background: var(--bg);
  border: 0;
  border-radius: var(--radius);
}
.ks-dates__when {
  min-width: 0;
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--type);
}
.ks-dates__seats {
  justify-self: end;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
  white-space: nowrap;
}
.ks-dates__row .btn {
  justify-self: end;
  width: 100%;
  max-width: 10.75rem;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
}
.ks-dates__row .btn:disabled {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}
.ks-dates__row--soon .ks-dates__when {
  color: var(--paper-70);
  font-weight: 500;
}
@media (max-width: 640px) {
  .ks-dates__row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: 24px;
    row-gap: 8px;
  }
  .ks-dates__when { grid-column: 1 / -1; }
  .ks-dates__seats { justify-self: start; }
  .ks-dates__row .btn { width: auto; }
}

.ks-ticket {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.ks-ticket[hidden] { display: none !important; }
.ks-ticket__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  padding: 0;
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.ks-ticket__card {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  max-height: min(90vh, 760px);
  overflow: auto;
  padding: 28px 22px 22px;
  background: var(--card);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ks-ticket__close {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-70);
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: 10px;
  padding: 8px 12px;
  min-height: 44px;
  cursor: pointer;
}
.ks-ticket__close:hover { color: var(--type); border-color: var(--field-line-strong); }
.ks-ticket__close:focus-visible,
.ks-ticket .btn:focus-visible,
.ks-qty__row button:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}
.ks-ticket__kicker {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  padding-right: 88px;
}
.ks-ticket__title {
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--type);
}
.ks-ticket__facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--hairline-inv);
  border-bottom: 1px solid var(--hairline-inv);
  padding: 14px 0;
}
.ks-ticket__facts div { display: flex; flex-direction: column; gap: 2px; }
.ks-ticket__facts dt {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.ks-ticket__facts dd {
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--type);
}
.ks-ticket__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ks-ticket__form[hidden] { display: none !important; }
.ks-ticket__form .btn {
  width: 100%;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.ks-qty { display: flex; flex-direction: column; gap: 8px; }
.ks-qty > span {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.ks-qty__row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  gap: 8px;
  align-items: stretch;
}
.ks-qty__row button {
  min-height: 46px;
  border-radius: var(--field-radius);
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  color: var(--type);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ks-qty__row button:hover { border-color: var(--field-line-strong); }
.ks-qty__row input[type="number"] {
  min-height: 46px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  color: var(--type);
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  appearance: textfield;
  -moz-appearance: textfield;
}
.ks-qty__row input[type="number"]::-webkit-outer-spin-button,
.ks-qty__row input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}
.ks-qty__row input[type="number"]:focus {
  background: var(--field-bg-focus);
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px var(--field-ring);
  outline: none;
}
.ks-ticket__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.ks-ticket__total strong {
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--type);
}
.ks-ticket__err {
  margin: 0;
  font-size: 14px;
  color: var(--warn);
}
.ks-ticket__done {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ks-ticket__done[hidden] { display: none !important; }
.ks-ticket__done p {
  margin: 0;
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.45;
  color: var(--paper-70);
}
.ks-ticket__done p:first-child {
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--type);
}
.ks-ticket__done .btn {
  width: 100%;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.found__sub { font-size: clamp(19px, 2vw, 28px); margin-bottom: clamp(8px, 1.2vw, 14px); }
.found__text {
  color: var(--paper-70);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.6;
  max-width: 34em;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
/* The assessment is a list of movements, not prose — set as a grid so eight
   short items read as one block instead of a long thin column. */
.moves {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 clamp(16px, 2.4vw, 40px);
}
.moves li {
  border-top: 1px solid var(--hairline-inv);
  padding: clamp(10px, 1.3vw, 15px) 0;
  font-size: clamp(14px, 1.15vw, 17px);
}

.lanes__lede {
  font-size: clamp(16px, 1.7vw, 25px);
  line-height: 1.4;
  max-width: 30em;
  margin-bottom: clamp(24px, 3.4vw, 44px);
}
.lanes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  align-items: stretch;
}
.lane {
  border: 1px solid var(--hairline-inv);
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
/* The top lane carries the accent rather than a "most popular" badge — the
   list is already the argument. */
.lane--top { border-color: var(--accent-bright); }
.lane__price {
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 50px);
  letter-spacing: -0.02em;
  line-height: 1;
  /* Only one lane carries a sub-line; reserving its row in all three keeps
     the lane names on one baseline across the row. */
  min-height: calc(clamp(30px, 3.6vw, 50px) + 8px + 1.2 * clamp(11px, 1vw, 13px));
}
.lane__price span {
  display: block;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin-top: 8px;
}
.lane__name {
  font-size: clamp(17px, 1.6vw, 23px);
  margin: clamp(10px, 1.4vw, 16px) 0 clamp(14px, 1.8vw, 20px);
  padding-bottom: clamp(12px, 1.6vw, 18px);
  border-bottom: 1px solid var(--hairline-inv);
}
.lane__list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lane__list li {
  color: var(--paper-70);
  font-size: clamp(13px, 1.02vw, 15px);
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}
.lane__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 1px;
  background: var(--accent-bright);
}
.lanes__fine {
  color: var(--paper-70);
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.6;
  max-width: 46em;
  margin-top: clamp(20px, 2.6vw, 34px);
}
.svc__tab.is-active {
  border-color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.12);
}
.svc__tab.is-active .svc__tab-note,
.svc__tab.is-active .svc__tab-price { color: var(--accent-bright); }
/* With JS only the active panel shows; without JS every panel is open so
   the section still works as a plain vertical list of services. */
html.js .svc__panel:not(.is-active) { display: none; }
html:not(.js) .svc__panel + .svc__panel {
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--hairline-inv);
}

.svc__kicker {
  font-weight: 700;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: clamp(8px, 1vw, 12px);
}
.svc__price {
  font-weight: 700;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: clamp(10px, 1.4vw, 16px);
}
.svc__price span {
  display: block;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin-top: 8px;
}
.svc__name {
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.015em;
  margin-bottom: clamp(10px, 1.4vw, 16px);
  padding-bottom: clamp(12px, 1.6vw, 18px);
  border-bottom: 1px solid var(--hairline-inv);
}
.svc__text {
  color: var(--paper-70);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.55;
  max-width: 36em;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.svc__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.svc__list li {
  color: var(--paper-70);
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}
.svc__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 1px;
  background: var(--accent-bright);
}
/* Hover-highlight rows (Jamar offerings — no bullets) */
.svc__list--rows {
  gap: 0;
  border-top: 1px solid rgba(245, 242, 235, 0.12);
  margin-top: clamp(4px, 0.8vw, 10px);
}
.svc__list--rows li {
  position: relative;
  margin: 0;
  padding: clamp(14px, 1.6vw, 18px) clamp(14px, 1.8vw, 20px);
  padding-left: clamp(14px, 1.8vw, 20px);
  border-bottom: 1px solid rgba(245, 242, 235, 0.12);
  color: var(--paper-70);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.45;
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    padding-left 0.22s ease;
}
.svc__list--rows li::before {
  display: none;
  content: none;
}
@media (hover: hover) and (pointer: fine) {
  .svc__list--rows li:hover {
    background: rgba(91, 87, 240, 0.16);
    color: var(--type);
    border-bottom-color: rgba(138, 135, 255, 0.28);
  }
}
.svc__list--rows li:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: -2px;
  background: rgba(91, 87, 240, 0.16);
  color: var(--type);
}
.svc__meta {
  font-weight: 700;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
.svc__legal {
  color: var(--paper-70);
  font-size: clamp(11px, 0.95vw, 13px);
  line-height: 1.55;
  max-width: 44em;
  margin-bottom: clamp(16px, 2vw, 22px);
  opacity: 0.85;
}
.svc__link {
  display: inline-block;
  align-self: flex-start;
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--accent-bright);
  padding-bottom: 2px;
  transition: color 0.25s var(--ease);
  margin-top: auto;
}
.svc__link:hover { color: var(--accent-bright); }
.svc__join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin: 32px 0 0;
  min-height: 44px;
  padding: 10px 22px;
}
.lane .svc__join { margin-top: 24px; }
.svc__lanes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 14px);
  align-items: stretch;
}
.svc__lanes-grid--1 {
  grid-template-columns: minmax(0, 1fr);
  max-width: 28em;
}
.svc__lanes-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Breakpoint two-tier layout inside offerings */
.svc__tier {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(8px, 1.2vw, 14px);
}
.svc__tier-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(245, 242, 235, 0.12);
}
.svc__tier-label {
  margin: 0;
  font-weight: 700;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.svc__tier-note {
  margin: 0;
  font-size: clamp(12px, 1.05vw, 14px);
  color: var(--paper-70);
}
.svc__lane .svc__list--rows {
  margin-top: 10px;
  margin-bottom: 0;
  border-top-color: rgba(245, 242, 235, 0.1);
}
.svc__lane .svc__list--rows li {
  font-size: clamp(13px, 1.1vw, 15px);
  padding: 10px 12px;
}
.svc__lane {
  border: 1px solid var(--hairline-inv);
  border-radius: 14px;
  padding: clamp(14px, 1.6vw, 18px);
  background: rgba(245, 242, 235, 0.03);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.svc__lane--top { border-color: var(--accent-bright); }
.svc__lane-price {
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.svc__lane-price span {
  display: block;
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin-top: 6px;
}
.svc__lane-tag {
  font-weight: 700;
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 6px;
}
.svc__lane-name {
  font-size: clamp(16px, 1.35vw, 20px);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.svc__lane-blurb {
  margin: 0 0 8px;
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.4;
  color: var(--paper-70);
}
/* Breakpoint tiers side-by-side (Foundation | Peak) */
.svc__tiers-side {
  align-items: start;
}
@media (max-width: 700px) {
  .svc__tiers-side.svc__lanes-grid--2 {
    grid-template-columns: 1fr;
  }
}
.svc__lane .svc__list {
  gap: 8px;
  margin-bottom: 0;
}
.svc__lane .svc__list li {
  font-size: clamp(12px, 0.98vw, 14px);
}

@media (max-width: 980px) {
  .svc__lanes-grid,
  .svc__lanes-grid--2 { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
}

/* ============================================================
   SEQUENTIAL COACHES
   Desktop intro: side-by-side (copy left, large portrait right).
   Mobile intro: image above, copy below (unchanged good path).
   Offerings: full details on stage; floating bar opens a slim picker.
   ============================================================ */

/* —— Intro —— */
.coach-intro {
  /* Docked, not pinned. Each chapter sticks to the top and the next one
     rides up over it — later siblings paint above earlier ones, so the
     stack orders itself without a z-index ladder. Sticky survives a
     media-query flip that a GSAP pin does not, and behaves the same under
     a thumb as under a mouse. */
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  background: var(--bg);
  color: var(--type);
  overflow: hidden;
  box-sizing: border-box;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* Desktop default: balanced two-column (restore the good look) */
html[data-layout="desktop"] .coach-intro,
html:not([data-layout]) .coach-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  grid-template-rows: 1fr;
  align-items: stretch;
  /* modest top inset — not extreme */
  padding-top: max(clamp(56px, 7vh, 72px), calc(env(safe-area-inset-top, 0px) + 40px));
  padding-bottom: max(clamp(20px, 3vh, 36px), env(safe-area-inset-bottom, 0px));
}
html[data-layout="desktop"] .coach-intro__media,
html:not([data-layout]) .coach-intro__media {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  /* Headroom so the face is never under the nav or clipped */
  padding-top: clamp(12px, 2vh, 28px);
  overflow: hidden;
  pointer-events: none;
  align-self: stretch;
  box-sizing: border-box;
}
html[data-layout="desktop"] .coach-intro__media::after,
html:not([data-layout]) .coach-intro__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to left, transparent 55%, var(--bg) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 22%),
    linear-gradient(to bottom, rgba(13, 13, 13, 0.12) 0%, transparent 16%);
}
html[data-layout="desktop"] .coach-intro__media picture,
html:not([data-layout]) .coach-intro__media picture {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  /* Extra width for left→right drift; head stays object-position top */
  top: 0;
  height: 100%;
  width: 118%;
  max-width: none;
  will-change: transform, opacity;
}
html[data-layout="desktop"] .coach-intro__media img,
html:not([data-layout]) .coach-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Anchor on the face — never crop the top of the head */
  object-position: center top;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.4)) saturate(0.95);
}
html[data-layout="desktop"] .coach-intro__copy,
html:not([data-layout]) .coach-intro__copy {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    clamp(12px, 2vh, 24px)
    clamp(16px, 2vw, 28px)
    clamp(12px, 2vh, 24px)
    var(--pad);
  max-width: 36em;
  pointer-events: auto;
  will-change: transform;
}

/* Mobile: stack — portrait first (with top room), copy under */
html[data-layout="mobile"] .coach-intro {
  display: flex;
  flex-direction: column;
  padding-top: max(clamp(64px, 9vh, 80px), calc(env(safe-area-inset-top, 0px) + 48px));
  padding-bottom: max(clamp(20px, 3vh, 32px), env(safe-area-inset-bottom, 0px));
}
html[data-layout="mobile"] .coach-intro__media {
  order: 1;
  flex: 1 1 46%;
  min-height: 0;
  width: 100%;
  max-width: min(380px, 90%);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
html[data-layout="mobile"] .coach-intro__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(13, 13, 13, 0.15) 0%, transparent 20%),
    linear-gradient(to top, var(--bg) 0%, transparent 40%);
}
html[data-layout="mobile"] .coach-intro__media picture {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 116%;
  max-width: none;
  height: 100%;
  will-change: transform, opacity;
}
html[data-layout="mobile"] .coach-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Keep the face in frame on phones too */
  object-position: center top;
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.4)) saturate(0.95);
}
html[data-layout="mobile"] .coach-intro__copy {
  order: 2;
  flex: 0 0 auto;
  max-width: 100%;
  padding: 12px var(--pad) 8px;
  will-change: transform;
}

.coach-intro__kicker {
  font-weight: 700;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 clamp(12px, 1.8vh, 20px);
}
.coach-intro__name {
  font-size: clamp(32px, 5.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin-bottom: 6px;
}
.coach-intro__bio {
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.45;
  color: var(--paper-70);
  max-width: 32em;
}
.coach-intro__label {
  font-weight: 700;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin-bottom: 6px;
}
/* CTA row: See offerings + Schedule side by side — identical proportions */
.coach-intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: clamp(22px, 3.2vh, 36px);
  align-self: flex-start;
  pointer-events: auto;
}
/* Shared box so button vs <a> don’t drift (padding / line-box / border). */
.coach-intro__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 52px;
  height: 52px;
  padding: 0 30px;
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1;
  letter-spacing: 0;
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}
/* Orbiting rim light on “See offerings” — conic highlight walks the stroke.
   --tour-angle is a registered custom prop so the conic-gradient can animate. */
@property --tour-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes tour-orbit {
  to { --tour-angle: 360deg; }
}
.coach-intro__cta {
  position: relative;
  isolation: isolate;          /* keep ::after under the face, not under the section */
  overflow: visible;
  margin-top: 0;
  align-self: auto;
  pointer-events: auto;
  z-index: 1;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.coach-intro__cta:hover {
  border-color: var(--accent-bright);
}
.coach-intro__cta::after {
  content: "";
  position: absolute;
  /* Tighter inset + thin padding + low blur = a fine stroke, not a halo */
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(
    from var(--tour-angle),
    transparent 0deg,
    transparent 118deg,
    rgba(91, 87, 240, 0.55) 130deg,
    rgba(138, 135, 255, 0.9) 142deg,
    rgba(91, 87, 240, 0.55) 154deg,
    transparent 172deg,
    transparent 298deg,
    rgba(91, 87, 240, 0.55) 310deg,
    rgba(138, 135, 255, 0.9) 322deg,
    rgba(91, 87, 240, 0.55) 334deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: blur(2px);
  animation: tour-orbit 5.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .coach-intro__cta::after {
    animation: none;
    /* Soft static rim so the affordance still reads without motion */
    --tour-angle: 40deg;
    opacity: 0.7;
  }
}

/* —— Offerings modal (from coach intro “See offerings”) ——
   Fixed to the viewport so it isn’t clipped by the pinned section.
   Site shell (offer-site): top nav + scrolling body — feels like its own page. */
.offer-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: 0;
  box-sizing: border-box;
  /* Not a flex row — dialog is position:absolute fill */
}
.offer-modal[hidden] { display: none !important; }
.offer-modal__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.offer-modal__dialog {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  /* Default 3-row (legacy); offer-site overrides to 2-row */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  border: 0;
  border-radius: 0;
  background: var(--bg);
  overflow: hidden;
  animation: offerModalIn 0.32s var(--ease) both;
}

/* —— Offerings as a mini website —— */
.offer-site .offer-site__dialog,
.offer-modal.offer-site .offer-modal__dialog {
  grid-template-rows: auto minmax(0, 1fr);
  background: #0a0a0b;
}
.offer-site__nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding:
    max(14px, calc(env(safe-area-inset-top, 0px) + 10px))
    max(clamp(16px, 3vw, 40px), var(--pad))
    14px;
  border-bottom: 1px solid rgba(245, 242, 235, 0.1);
  background: rgba(10, 10, 11, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-height: 0;
}
.offer-site__brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-right: auto;
}
.offer-site__logo {
  display: block;
  width: auto;
  height: clamp(36px, 5.2vw, 52px);
  max-width: min(42vw, 200px);
  object-fit: contain;
  object-position: left center;
}
/* Desktop: horizontal service links in the top bar */
.offer-site__menu {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
.offer-site__menu-head {
  display: none;
}
.offer-site__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  max-width: 100%;
}
.offer-site__link {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.02em;
  color: var(--paper-70);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.offer-site__link:hover {
  color: var(--type);
}
.offer-site__link.is-active {
  color: var(--type);
  border-bottom-color: var(--accent-bright);
}
.offer-site__link:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.offer-site__back {
  flex: 0 0 auto;
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--type);
  background: transparent;
  border: 1px solid rgba(245, 242, 235, 0.28);
  border-radius: 999px;
  padding: 11px 18px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.offer-site__back:hover {
  border-color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.12);
}
.offer-site__back:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
/* Burger — mobile only */
.offer-site__burger {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(245, 242, 235, 0.22);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  color: var(--type);
}
.offer-site__burger:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.offer-site__burger-lines,
.offer-site__burger-lines::before,
.offer-site__burger-lines::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  position: relative;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.offer-site__burger-lines::before,
.offer-site__burger-lines::after {
  content: "";
  position: absolute;
  left: 0;
}
.offer-site__burger-lines::before { top: -6px; }
.offer-site__burger-lines::after { top: 6px; }
.offer-site.is-nav-open .offer-site__burger-lines {
  background: transparent;
}
.offer-site.is-nav-open .offer-site__burger-lines::before {
  top: 0;
  transform: rotate(45deg);
}
.offer-site.is-nav-open .offer-site__burger-lines::after {
  top: 0;
  transform: rotate(-45deg);
}
.offer-site__body {
  min-height: 0;
}

/* Two-stage floating bar (Jamar offerings).
   A solid page-color pad covers the bottom of the screen so no body
   text shows under or below the bar. The grey pill sits inset on it.
   Stage 1: Strength · GLP-1 · Breakpoint · Group Class
   Stage 2: ‹ Breakpoint | Foundation · Peak Performance */
.offer-switch {
  min-width: 0;
  width: 100%;
}
.offer-switch--dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  width: 100%;
  max-width: none;
  /* Page ground — hides any copy that would sit under the float. */
  background: #0a0a0b;
  padding:
    18px
    clamp(16px, 3vw, 28px)
    max(40px, calc(env(safe-area-inset-bottom, 0px) + 36px));
}
.offer-switch--dock::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 36px;
  background: linear-gradient(to top, #0a0a0b, rgba(10, 10, 11, 0));
  pointer-events: none;
}
.offer-switch--dock .offer-switch__track { pointer-events: auto; }
.offer-site:has(.offer-switch--dock) .offer-site__body,
.offer-modal.offer-site:has(.offer-switch--dock) .offer-modal__body {
  padding-bottom: calc(56px + 18px + 40px + 36px + env(safe-area-inset-bottom, 0px) + 28px);
}
.offer-empty {
  display: none;
}
.offer-empty.is-active:not([hidden]) {
  display: block;
}
.offer-empty__text {
  margin: 0;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--paper-70);
  font-weight: 500;
}
.offer-switch__stage[hidden],
.offer-switch:not(.is-tiers) [data-switch-stage="tiers"],
.offer-switch.is-tiers [data-switch-stage="services"] {
  display: none;
}
.offer-switch__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  min-height: 58px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(32, 32, 36, 0.92);
  border: 1px solid rgba(138, 135, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 0 20px rgba(91, 87, 240, 0.28),
    0 0 44px rgba(91, 87, 240, 0.12),
    0 10px 28px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.offer-switch__track--split {
  justify-content: flex-start;
}
.offer-switch__item,
.offer-switch__back {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(15px, 1.55vw, 19px);
  letter-spacing: -0.015em;
  color: rgba(245, 242, 235, 0.78);
  background: transparent;
  border: 0;
  cursor: pointer;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  touch-action: manipulation;
  line-height: 1.15;
  transition:
    color 0.2s var(--ease),
    background 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.offer-switch__item {
  flex: 0 0 auto;
  text-align: center;
  white-space: nowrap;
}
.offer-switch__pack {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: #0c0c0e;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.offer-switch__item:hover,
.offer-switch__back:hover {
  color: var(--type);
  background: rgba(245, 242, 235, 0.06);
}
.offer-switch__item.is-active {
  color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.24);
  box-shadow: inset 0 0 0 1px rgba(138, 135, 255, 0.38);
}
.offer-switch__item:focus-visible,
.offer-switch__back:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.offer-switch__back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(8, 8, 10, 0.45);
  color: var(--type);
  white-space: nowrap;
  padding-left: 14px;
  padding-right: 16px;
}
.offer-switch__back:hover { background: rgba(8, 8, 10, 0.62); }
.offer-switch__chev {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.offer-switch__chev svg { display: block; }
.offer-switch__subs {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.offer-switch__subs .offer-switch__item { min-width: 0; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .offer-switch__track { background: var(--card); }
}
@media (prefers-reduced-transparency: reduce) {
  .offer-switch__track {
    background: var(--card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .offer-switch__item,
  .offer-switch__back { transition: none; }
}

@media (max-width: 700px) {
  .offer-switch--dock {
    padding-left: 12px;
    padding-right: 12px;
  }
  .offer-switch__track { min-height: 54px; gap: 2px; }
  .offer-switch__item,
  .offer-switch__back {
    font-size: 14px;
    padding: 10px 11px;
  }
  .offer-switch__item { flex: 1 1 0; }
  .offer-switch__pack {
    flex: 1.35 1 0;
    min-width: 0;
  }
  .offer-switch__pack .offer-switch__item { flex: 1 1 0; }
}
@media (max-width: 420px) {
  .offer-switch--dock {
    padding-left: 10px;
    padding-right: 10px;
  }
  .offer-switch__item,
  .offer-switch__back {
    font-size: 14px;
    padding: 10px 8px;
  }
}

/* Jupiter Fit member sheet */
.member-sheet {
  position: fixed;
  inset: 0;
  z-index: 210;
}
.member-sheet[hidden] { display: none; }
.member-sheet__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(5, 5, 5, 0.78);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  cursor: pointer;
}
.member-sheet__dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, calc(100% - 32px));
  max-height: min(90svh, 820px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr);
  overflow: hidden;
  background: #101012;
  color: var(--type);
  border: 1px solid rgba(138, 135, 255, 0.22);
  border-radius: 26px;
  box-shadow:
    0 0 40px rgba(91, 87, 240, 0.2),
    0 28px 80px rgba(0, 0, 0, 0.5);
}
.member-sheet__brand {
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(91, 87, 240, 0.22), transparent 62%),
    #0c0c0e;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}
/* The panel is justify-content: flex-end, so everything else sits on the
   floor of it. margin-bottom:auto is what lifts the mark to the ceiling
   without taking the rest of the column with it. The light logo (#D4CFC6)
   is the right one here — the -ink file is #141414 and would vanish. */
.member-sheet__logo {
  display: block;
  width: clamp(84px, 9vw, 118px);
  height: auto;
  margin: 0 0 auto;
}
.member-sheet__kicker {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 12px;
}
.member-sheet__title {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin-bottom: 14px;
}
.member-sheet__lede {
  max-width: 18em;
  color: var(--paper-70);
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.5;
  font-weight: 500;
  /* setCopy writes this with textContent, so the only way to break Step 2
     onto its own line is a \n in the string plus this. */
  white-space: pre-line;
}
.member-sheet__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  font-family: var(--font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--type);
  background: transparent;
  border: 1px solid var(--hairline-inv);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
}
.member-sheet__close:hover { border-color: var(--accent-bright); }
.member-sheet__close:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.member-sheet__body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(28px, 4vw, 44px);
  padding-top: 64px;
}
.member-sheet__tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  padding: 4px;
  margin: 0 0 28px;
  border-radius: 999px;
  background: #1c1c1f;
}
.member-sheet__tab {
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  color: var(--paper-70);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 40px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.member-sheet__tab.is-active {
  color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.22);
}
.member-sheet__form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.member-sheet__form[hidden],
.member-sheet__account[hidden],
.member-sheet__verify[hidden],
.member-sheet__tabs[hidden],
.member-sheet__steps[hidden],
[data-member-guest][hidden] {
  display: none !important;
}
.member-sheet__form > .field,
.member-sheet__form > .member-sheet__pair {
  margin: 0 0 22px;
}
.member-sheet .field { gap: 8px; }
.member-sheet .field span {
  font-size: 12px;
  letter-spacing: 0.12em;
}
.member-sheet .field input,
.member-sheet .field select {
  width: 100%;
  box-sizing: border-box;
  background: #1c1c1f;
  color: var(--type);
  border: 0;
  border-radius: 12px;
  padding: 14px 16px;
  min-height: 48px;
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
}
.member-sheet .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23f5f2eb' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-color: #1c1c1f;
  padding-right: 40px;
}
.member-sheet .field input:focus,
.member-sheet .field select:focus {
  outline: 1px solid var(--accent-bright);
  outline-offset: 1px;
  border: 0;
}
.member-sheet__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.member-sheet__pair.is-solo { grid-template-columns: 1fr; }
/* .field sets display:flex, which outranks the UA [hidden] rule — without
   these the field stays on screen for every program while JS believes it is
   hidden. Same fix the tier field already needed. */
.member-sheet [data-member-tier-wrap][hidden],
.member-sheet [data-member-party-wrap][hidden] { display: none !important; }
.member-sheet__secret {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1c1c1f;
  border-radius: 12px;
  padding: 0 10px 0 0;
  min-height: 48px;
}
.member-sheet__secret input {
  flex: 1;
  background: transparent !important;
  border: 0 !important;
  min-height: 48px;
  padding: 14px 16px !important;
}
.member-sheet__reveal {
  flex: 0 0 auto;
  font-family: var(--font);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
  background: transparent;
  border: 0;
  cursor: pointer;
  min-height: 36px;
  padding: 0 8px;
}
.member-sheet__reveal:hover { color: var(--type); }
/* display:block on the class beats the hidden attribute, which is only a UA
   display:none — so this hint stayed on screen for every offering, showing
   Group Classes copy ("Everyone in the ten seats...") to Strength and GLP-1
   members on their pay step. Same guard the other components here carry. */
.member-sheet__hint[hidden] { display: none; }

.member-sheet__hint {
  display: block;
  /* max-content so the underline hugs a short hint ("At least 6 characters.")
     rather than running the full column. The cap is what stops a long one —
     the Breakpoint offer hint is a full sentence — from sizing to its text and
     overflowing the dialog. */
  width: max-content;
  max-width: 100%;
  font-style: normal;
  font-size: 12px;
  color: var(--paper-70);
  font-weight: 500;
  margin-top: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(138, 135, 255, 0.55);
}
/* The program hint above this can run to three lines, so 10px put the button
   right up against it. */
.member-sheet__go {
  align-self: flex-start;
  cursor: pointer;
  margin: clamp(22px, 3vw, 34px) 0 0;
}
/* Program is the one field that changes what the reader is buying, so it
   carries the brand purple. --accent-bright is the token for type on a dark
   ground; --accent is a fill colour and fails contrast as text here.
   The open menu is drawn by the OS on macOS and Windows and ignores both
   of these — only the closed control is ours to style. */
/* Needs .member-sheet .field select's specificity (0-2-1) to win — a bare
   attribute selector is 0-1-0 and loses however late it is declared. */
.member-sheet .field select[data-member-program] {
  color: var(--accent-bright);
  font-weight: 700;
  /* The chevron is a data-URI, and url() cannot read a custom property, so
     this hex has to be kept in step with --accent-bright by hand. Same
     compromise the paper-coloured chevron above already makes. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238a87ff' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}
.member-sheet .field select[data-member-program] option {
  color: var(--accent-bright);
  font-weight: 700;
}
.member-sheet__go[disabled] { opacity: 0.55; cursor: wait; }
.member-sheet__note {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--paper-70);
}
.member-sheet__note[data-kind="error"] { color: #ffb4b4; }
.member-sheet__note[data-kind="info"] { color: var(--accent-bright); }
.member-sheet__hello {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  font-weight: 700;
}
.member-sheet__who {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 8px 0 20px;
}
.member-sheet__spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
  margin: 0 0 28px;
  padding: 18px 20px;
  background: #1c1c1f;
  border-radius: 14px;
}
.member-sheet__spec dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 6px;
}
.member-sheet__spec dd {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.member-sheet__roster {
  margin: 0 0 28px;
}
.member-sheet__roster-title {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--paper-70);
}
.member-sheet__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 110px;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  margin: 0 0 8px;
  background: #1c1c1f;
  border-radius: 12px;
}
.member-sheet__row strong { display: block; }
.member-sheet__row span {
  display: block;
  color: var(--paper-70);
  font-size: 13px;
  line-height: 1.35;
}
.member-sheet__row select {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--type);
  background: #2a2a2e;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 40px;
}
@media (max-width: 820px) {
  .member-sheet__dialog {
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 100svh;
    border-radius: 0;
    border: 0;
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .member-sheet__brand {
    padding:
      max(22px, calc(env(safe-area-inset-top, 0px) + 18px))
      22px
      20px;
    padding-right: 108px;
  }
  .member-sheet__body {
    padding: 22px;
    padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
  }
  .member-sheet__pair { grid-template-columns: 1fr; }
  .member-sheet__spec { grid-template-columns: 1fr; }
}
html[data-layout="mobile"] .member-sheet__dialog {
  left: 0;
  top: 0;
  transform: none;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 100svh;
  border-radius: 0;
  border: 0;
  grid-template-columns: 1fr;
  overflow: auto;
}
@media (max-width: 560px) {
  .member-sheet__row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .member-sheet__tab { transition: none; }
}

/* Mobile: logo + burger + back; services become a drawer */
@media (max-width: 900px) {
  .offer-site__nav {
    flex-wrap: nowrap;
    gap: 10px;
    padding-top: max(12px, calc(env(safe-area-inset-top, 0px) + 8px));
    padding-bottom: 12px;
  }
  .offer-site__logo {
    height: 34px;
    max-width: min(46vw, 160px);
  }
  .offer-site__burger {
    display: inline-flex;
    order: 2;
  }
  .offer-site__back {
    order: 3;
    font-size: 12px;
    padding: 10px 12px;
    letter-spacing: 0.02em;
  }
  .offer-site__brand {
    order: 1;
    margin-right: auto;
  }
  .offer-site__menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 320px);
    height: 100%;
    z-index: 6;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: #111113;
    border-left: 1px solid rgba(245, 242, 235, 0.12);
    padding:
      max(20px, calc(env(safe-area-inset-top, 0px) + 16px))
      20px
      max(24px, env(safe-area-inset-bottom, 0px));
    transform: translateX(105%);
    transition: transform 0.32s var(--ease);
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.45);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .offer-site.is-nav-open .offer-site__menu {
    transform: translateX(0);
  }
  .offer-site__menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(245, 242, 235, 0.1);
  }
  .offer-site__menu-label {
    margin: 0;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--paper-70);
  }
  .offer-site__menu-close {
    font-family: var(--font);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--type);
    background: transparent;
    border: 1px solid rgba(245, 242, 235, 0.22);
    border-radius: 999px;
    padding: 8px 14px;
    min-height: 40px;
    cursor: pointer;
  }
  .offer-site__links {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .offer-site__link {
    width: 100%;
    text-align: left;
    white-space: normal;
    border-bottom: 0;
    border-left: 2px solid transparent;
    border-radius: 10px;
    padding: 14px 14px;
    font-size: 15px;
  }
  .offer-site__link.is-active {
    border-left-color: var(--accent-bright);
    background: rgba(91, 87, 240, 0.14);
    border-bottom-color: transparent;
  }
  /* Dim page when drawer open */
  .offer-site.is-nav-open .offer-site__body {
    pointer-events: none;
  }
  .offer-site.is-nav-open::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
  }
}
/* Opacity only. A takeover IS the viewport, so it must not translate: any
   offset opens a gap at the top and pushes the offerings bar off the bottom
   for as long as it plays — and if the animation stalls, it stays there. */
@keyframes offerModalIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.offer-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 32px);
  padding:
    max(clamp(22px, 3vw, 36px), calc(env(safe-area-inset-top, 0px) + 12px))
    max(clamp(22px, 3.4vw, 48px), var(--pad))
    clamp(18px, 2.4vw, 28px);
  border-bottom: 1px solid var(--hairline-inv);
  background: var(--bg);
  min-height: 0;
}
.offer-modal__kicker {
  font-weight: 700;
  font-size: clamp(12px, 1.15vw, 14px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 10px;
}
.offer-modal__title {
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.offer-modal__close {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(13px, 1.2vw, 15px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--type);
  background: transparent;
  border: 1px solid var(--hairline-inv);
  border-radius: 999px;
  padding: 12px 20px;
  min-height: 48px;
  cursor: pointer;
  flex-shrink: 0;
}
.offer-modal__close:hover { border-color: var(--accent-bright); }
.offer-modal__close:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
/* Foot bar: “Services” label above the pills — never cramped against them. */
.offer-modal__bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(12px, 1.6vw, 18px);
  padding:
    clamp(16px, 2.2vw, 24px)
    max(clamp(20px, 3.4vw, 48px), var(--pad))
    max(clamp(18px, 2.4vw, 28px), env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hairline-inv);
  background: var(--card);
  min-height: 0;
}
.offer-modal__bar-label {
  margin: 0;
  font-weight: 700;
  font-size: clamp(12px, 1.15vw, 14px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.offer-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* Room so focus rings / hover aren’t clipped */
  padding: 2px 0 8px;
  overscroll-behavior-x: contain;
  /* scrollbar: global * rules (2px purple) */
}
.offer-modal__chip {
  flex: 0 0 auto;
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(13px, 1.25vw, 16px);
  color: var(--paper-70);
  background: rgba(245, 242, 235, 0.04);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 20px;
  min-height: 48px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.offer-modal__chip:hover {
  color: var(--type);
  border-color: rgba(138, 135, 255, 0.45);
}
.offer-modal__chip.is-active {
  color: var(--type);
  border-color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.16);
}
.offer-modal__chip:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
/* THE scroll surface — grid middle row is minmax(0,1fr) so this gets a
   hard height cap and overflow-y can engage (GLP-1 and long panels).
   Scrollbar chrome: global * rules (2px purple hairline). */
.offer-modal__body {
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding:
    clamp(28px, 4.5vw, 72px)
    max(clamp(24px, 4vw, 64px), var(--pad))
    clamp(40px, 6vw, 96px);
  padding-right: max(clamp(24px, 4vw, 64px), calc(var(--pad) + 6px));
}
.offer-modal__body .offer-modal__item {
  max-width: 48em;
  display: none;
}
/* [hidden] must not win with !important over .is-active — we toggle both in JS */
.offer-modal__item[hidden] { display: none !important; }
.offer-modal__item.is-active:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 32px);
}
.offer-modal__body:has(.offer-modal__item--stage.is-active) {
  display: flex;
  flex-direction: column;
  padding-right: 0;
}
.offer-modal__body .offer-modal__item--stage,
.offer-modal__item--stage {
  max-width: none;
}
.offer-modal__item--stage.is-active:not([hidden]) {
  flex: 1 1 auto;
  min-height: 100%;
  gap: 0;
}
.offer-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.95fr);
  align-items: stretch;
  width: 100%;
  min-height: 100%;
  flex: 1 1 auto;
  overflow: hidden;
}
.offer-stage__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    clamp(8px, 1.5vh, 20px)
    clamp(16px, 2vw, 28px)
    clamp(16px, 2vh, 28px)
    0;
  max-width: 36em;
}
.offer-stage__brand {
  display: block;
  height: 28px;
  width: auto;
  margin: 0 0 10px;
}
.offer-stage__title-mark {
  display: block;
  width: min(100%, 22em);
  height: auto;
  margin: 6px 0 8px;
}
.offer-stage__copy .coach-intro__kicker {
  margin-bottom: 14px;
}
.offer-stage__copy .svc__list--rows {
  margin-top: clamp(16px, 2vh, 24px);
  max-width: 32em;
}
.offer-stage__copy .svc__price {
  font-size: clamp(28px, 3.2vw, 42px);
  margin: 4px 0 12px;
}
.offer-stage__copy .svc__price span {
  font-size: 11px;
}
.offer-stage__copy .svc__meta {
  margin-top: clamp(14px, 1.8vh, 20px);
}
.offer-stage__media {
  position: relative;
  width: 100%;
  min-height: 280px;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}
.offer-stage__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to left, transparent 46%, #0a0a0b 100%),
    linear-gradient(to top, #0a0a0b 0%, transparent 30%),
    linear-gradient(to bottom, rgba(10, 10, 11, 0.22) 0%, transparent 22%);
}
.offer-stage__media picture {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.offer-stage__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  background: transparent;
  opacity: 0.78;
  filter: saturate(0.86) brightness(0.88);
}
.offer-stage--peak .offer-stage__media::after {
  background:
    linear-gradient(to left, transparent 28%, #0a0a0b 78%),
    linear-gradient(to top, #0a0a0b 0%, transparent 34%),
    linear-gradient(to bottom, rgba(10, 10, 11, 0.28) 0%, transparent 24%);
}
.offer-stage--peak .offer-stage__media img {
  opacity: 0.64;
  filter: saturate(0.78) brightness(0.78) contrast(0.96);
}
@media (max-width: 720px) {
  .offer-modal__body:has(.offer-modal__item--stage.is-active) {
    padding-right: max(clamp(24px, 4vw, 64px), calc(var(--pad) + 6px));
  }
  .offer-stage {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(240px, 46%) auto;
  }
  .offer-stage__media {
    min-height: 240px;
    max-width: min(420px, 100%);
    margin: 0 auto;
    order: -1;
  }
  .offer-stage__media img { object-position: center bottom; }
  .offer-stage__media::after {
    background:
      linear-gradient(to bottom, rgba(10, 10, 11, 0.2) 0%, transparent 22%),
      linear-gradient(to top, #0a0a0b 0%, transparent 38%);
  }
  .offer-stage__copy {
    max-width: none;
    padding: 12px 0 8px;
  }
}
/* Reset default svc margins inside the modal — gap on the flex column owns rhythm */
.offer-modal__item > * { margin-bottom: 0; }
.offer-modal__item .svc__name {
  font-size: clamp(28px, 4vw, 48px);
  margin-bottom: 0;
  padding-bottom: clamp(16px, 2vw, 24px);
  line-height: 1.08;
}
.offer-modal__item .svc__name--sm {
  font-size: clamp(26px, 3.4vw, 38px);
  padding-bottom: 0;
  border-bottom: 0;
  line-height: 1.12;
}
.offer-modal__item .svc__name--sm + .svc__kicker {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline-inv);
}
.offer-modal__item .svc__text {
  margin-bottom: 0;
  max-width: 40em;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.55;
  color: var(--paper-70);
}
.offer-modal__item .svc__list {
  gap: 16px;
  margin-bottom: 0;
}
.offer-modal__item .svc__list li {
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.5;
  padding-left: 22px;
}
.offer-modal__item .svc__list li::before {
  top: 0.62em;
  width: 8px;
}
/* Row list in the offerings modal — larger type, full-bleed hairlines */
.offer-modal__item .svc__list--rows {
  gap: 0;
  width: 100%;
  max-width: 40em;
  margin-bottom: 0;
  border-top-color: rgba(245, 242, 235, 0.14);
}
.offer-modal__item .svc__list--rows li {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.48;
  padding: clamp(16px, 1.8vw, 20px) clamp(16px, 2vw, 22px);
  padding-left: clamp(16px, 2vw, 22px);
  border-bottom-color: rgba(245, 242, 235, 0.14);
}
.offer-modal__item .svc__list--rows li::before {
  display: none;
  content: none;
}
@media (hover: hover) and (pointer: fine) {
  .offer-modal__item .svc__list--rows li:hover {
    background: rgba(91, 87, 240, 0.18);
    color: var(--type);
    border-bottom-color: rgba(138, 135, 255, 0.32);
  }
}
.offer-modal__item .svc__kicker {
  font-size: clamp(10px, 0.95vw, 12px);
}
.offer-modal__item .svc__meta {
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.45;
}
.offer-modal__item .svc__legal {
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.55;
}
.offer-modal__item .svc__price {
  font-size: clamp(42px, 5.5vw, 68px);
}
.offer-modal__item .svc__meta,
.offer-modal__item .svc__legal,
.offer-modal__item .svc__kicker,
.offer-modal__item .svc__price {
  margin-bottom: 0;
}
.offer-modal__item .svc__link {
  margin-top: 16px;
  align-self: flex-start;
  font-size: clamp(15px, 1.35vw, 18px);
}
.offer-modal__item .svc__join {
  margin-top: 32px;
}
html[data-layout="mobile"] .svc__join {
  width: 100%;
}
.offer-modal__item .svc__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 200px);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  width: 100%;
}
.offer-modal__item .svc__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
}
.offer-modal__item .svc__copy .svc__text { max-width: none; }
.offer-modal__item .svc__figure {
  position: relative;
  margin: 0;
  justify-self: end;
}
.offer-modal__item .svc__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to left, transparent 40%, #0a0a0b 100%),
    linear-gradient(to top, #0a0a0b 0%, transparent 28%),
    linear-gradient(to bottom, rgba(10, 10, 11, 0.18) 0%, transparent 20%);
}
.offer-modal__item .svc__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  opacity: 0.78;
  filter: saturate(0.86) brightness(0.88);
  object-fit: contain;
}
@media (max-width: 720px) {
  .offer-modal__item .svc__split {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .offer-modal__item .svc__figure {
    justify-self: center;
    max-width: 168px;
  }
}
.offer-modal__item .svc__lanes-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  margin: 0;
}
.offer-modal__item .svc__lanes-grid--1 {
  grid-template-columns: minmax(0, 1fr);
  max-width: 32em;
}
.offer-modal__item .svc__lanes-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.offer-modal__item .svc__lane {
  padding: clamp(18px, 2vw, 24px);
  gap: 8px;
}
.offer-modal__item .svc__tier {
  gap: clamp(14px, 1.8vw, 20px);
  margin-top: clamp(12px, 1.6vw, 20px);
}
.offer-modal__item .svc__lane .svc__list--rows li {
  font-size: clamp(14px, 1.25vw, 16px);
  padding: 12px 14px;
}
.offer-modal__item .svc__lane-name {
  font-size: clamp(18px, 1.6vw, 24px);
}
.offer-modal__item .svc__lane-price {
  font-size: clamp(26px, 2.6vw, 36px);
}
.offer-modal__item .svc__lane-tag {
  font-size: clamp(10px, 0.95vw, 12px);
}

.coach-close {
  position: sticky;
  top: 0;
}
/* An unpinned tail would let the last chapter scroll out from under the
   footer; the footer needs its own ground to arrive on. */
.footer { position: relative; z-index: 1; background: var(--bg); }

.coach-close__title {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 8px 0 clamp(16px, 2.4vh, 24px);
}

/* The takeover is the same on a phone: edge to edge, offerings along the
   foot. The old inset-card overrides here were what kept it a floating
   panel at 375px. */
html[data-layout="mobile"] .offer-modal { padding: 0; }
html[data-layout="mobile"] .offer-modal__dialog {
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
html[data-layout="mobile"] .offer-modal.offer-site .offer-modal__dialog,
html[data-layout="mobile"] .offer-site .offer-site__dialog {
  /* Site shell: nav + body only */
  grid-template-rows: auto minmax(0, 1fr);
}
html[data-layout="mobile"] .offer-modal__head {
  padding:
    max(20px, calc(env(safe-area-inset-top, 0px) + 12px))
    var(--pad)
    18px;
  gap: 16px;
}
html[data-layout="mobile"] .offer-modal__title {
  font-size: clamp(26px, 7vw, 34px);
}
html[data-layout="mobile"] .offer-modal__body {
  padding: 24px var(--pad) 40px;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
html[data-layout="mobile"] .offer-modal__bar {
  gap: 14px;
  padding:
    16px
    var(--pad)
    max(18px, env(safe-area-inset-bottom, 0px));
}
html[data-layout="mobile"] .offer-modal__chips {
  flex-wrap: nowrap;
  gap: 12px;
  padding-bottom: 6px;
}
html[data-layout="mobile"] .offer-modal__chip {
  font-size: 14px;
  padding: 12px 16px;
}
html[data-layout="mobile"] .offer-modal__item.is-active {
  gap: 20px;
}
html[data-layout="mobile"] .offer-modal__item .svc__name {
  font-size: clamp(26px, 7vw, 34px);
}
html[data-layout="mobile"] .offer-modal__item .svc__name--sm {
  font-size: clamp(22px, 6vw, 28px);
}
html[data-layout="mobile"] .offer-modal__item .svc__text {
  font-size: clamp(16px, 4.2vw, 19px);
}
html[data-layout="mobile"] .offer-modal__item .svc__list li {
  font-size: clamp(15px, 4vw, 18px);
}
html[data-layout="mobile"] .offer-modal__item .svc__split {
  grid-template-columns: 1fr;
  justify-items: center;
}
html[data-layout="mobile"] .offer-modal__item .svc__figure {
  justify-self: center;
  max-width: 160px;
  order: -1;
}
html[data-layout="mobile"] .offer-modal__item .svc__lanes-grid,
html[data-layout="mobile"] .offer-modal__item .svc__lanes-grid--2 {
  grid-template-columns: 1fr;
  gap: 12px;
}
html[data-layout="mobile"] .offer-modal__body:has(.offer-modal__item--stage.is-active) {
  padding-right: var(--pad);
}
html[data-layout="mobile"] .offer-stage {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(220px, 42%) auto;
}
html[data-layout="mobile"] .offer-stage__media {
  min-height: 220px;
  max-width: min(420px, 100%);
  margin: 0 auto;
}
html[data-layout="mobile"] .offer-stage__copy {
  max-width: none;
  padding: 8px 0 12px;
}
html[data-layout="mobile"] .offer-stage__copy .coach-intro__name {
  font-size: clamp(26px, 7vw, 36px);
}
html[data-layout="mobile"] .coach-intro__name {
  font-size: clamp(30px, 8.5vw, 42px);
}
html[data-layout="mobile"] .coach-intro__bio {
  font-size: clamp(14px, 3.8vw, 16px);
  max-width: 100%;
}

/* —— Close —— */
.coach-close {
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  background: var(--bg);
  color: var(--type);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  box-sizing: border-box;
}
.coach-close__inner {
  width: 100%;
  max-width: 640px;
  will-change: transform;
  padding:
    max(clamp(72px, 10vh, 100px), env(safe-area-inset-top, 0px))
    var(--pad)
    max(clamp(36px, 5vh, 56px), env(safe-area-inset-bottom, 0px));
}
html[data-layout="mobile"] .offer-stage-panel .svc__lanes-grid,
html[data-layout="mobile"] .offer-stage-panel .svc__lanes-grid--2 {
  grid-template-columns: 1fr;
}
html[data-layout="mobile"] .coach-close .bp-next__row {
  flex-direction: column;
  align-items: stretch;
}
html[data-layout="mobile"] .coach-close .bp-next__row .btn {
  width: 100%;
  text-align: center;
  min-height: 48px;
}

@media (max-width: 768px) {
  .coach-intro {
    display: flex !important;
    flex-direction: column !important;
    height: 100svh !important;
    padding-top: max(64px, calc(env(safe-area-inset-top, 0px) + 48px)) !important;
  }
  .coach-intro__media {
    order: 1 !important;
    flex: 1 1 46% !important;
    max-width: min(380px, 90%) !important;
    margin: 0 auto !important;
    grid-column: auto !important;
  }
  .coach-intro__copy {
    order: 2 !important;
    grid-column: auto !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    padding: 12px var(--pad) 8px !important;
  }
  .coach-offers,
  .coach-close {
    height: 100svh !important;
  }
  .offer-stage-panel .svc__lanes-grid,
  .offer-stage-panel .svc__lanes-grid--2 {
    grid-template-columns: 1fr !important;
  }
  .coach-close .bp-next__row {
    flex-direction: column;
    align-items: stretch;
  }
  .coach-close .bp-next__row .btn {
    width: 100%;
    min-height: 48px;
    text-align: center;
  }
}

/* A branch, offered as a card: art, a name, and a way in. One <a> around
   the lot so the whole card is the hit area rather than a link buried in it. */
.branchcard {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(16px, 2.6vw, 40px);
  align-items: center;
  border: 1px solid var(--hairline-inv);
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.branchcard:hover { border-color: var(--accent-bright); transform: translateY(-2px); }
.branchcard:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.branchcard__art { display: block; overflow: hidden; align-self: stretch; }
.branchcard__art img { width: 100%; height: 100%; min-height: clamp(160px, 24vw, 260px); object-fit: cover; display: block; }
.branchcard__body { display: block; padding: clamp(18px, 2.4vw, 34px) clamp(18px, 2.4vw, 34px) clamp(18px, 2.4vw, 34px) 0; }
.branchcard__kicker {
  display: block;
  font-weight: 700;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: clamp(6px, 1vh, 10px);
}
.branchcard__name {
  display: block;
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: clamp(8px, 1.2vh, 14px);
}
.branchcard__text {
  display: block;
  color: var(--paper-70);
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.55;
  max-width: 34em;
  margin-bottom: clamp(12px, 1.8vh, 18px);
}
.branchcard__more {
  display: inline-block;
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--type);
  border-bottom: 1px solid var(--accent-bright);
  padding-bottom: 2px;
}
@media (max-width: 760px) {
  .branchcard { grid-template-columns: 1fr; }
  .branchcard__body { padding: clamp(18px, 2.4vw, 34px); }
}

.bp-next__text {
  font-size: clamp(16px, 1.7vw, 25px);
  line-height: 1.4;
  max-width: 28em;
  margin-bottom: clamp(20px, 2.6vw, 32px);
}
.bp-next__row { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.4vw, 16px); }
/* Off-site places the club actually lives. Set as rows rather than a row of
   buttons: they are destinations, not the page's call to action. */
.links {
  list-style: none;
  margin-top: clamp(26px, 4vw, 44px);
  border-top: 1px solid var(--hairline-inv);
}
.links li { border-bottom: 1px solid var(--hairline-inv); }
.links a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(10px, 2vw, 32px);
  padding: clamp(12px, 1.7vw, 20px) 0;
  transition: color 0.25s var(--ease);
}
.links a:hover { color: var(--accent-bright); }
.links__label {
  flex: 0 0 clamp(90px, 12vw, 160px);
  font-weight: 700;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.links__value { font-weight: 700; font-size: clamp(15px, 1.5vw, 21px); }
.links a::after { content: "↗"; margin-left: auto; opacity: 0.6; }

@media (max-width: 760px) {
  .maker__grid { grid-template-columns: 1fr; }
  .maker__media { max-width: 260px; }
}

.program__link {
  margin-top: clamp(10px, 1.4vw, 16px);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.program__link a {
  color: var(--accent-bright);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ---------- programs, grouped by pillar ---------- */
.programs { padding: 0 var(--pad) clamp(72px, 11vh, 150px); }
.group {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2.6fr;
  gap: clamp(20px, 4vw, 64px);
  border-top: 1px solid var(--hairline-inv);
  padding: clamp(24px, 3vw, 40px) 0 clamp(36px, 5vw, 64px);
}
.group:last-child { padding-bottom: 0; }
.group__num { font-weight: 700; font-size: 14px; }
.group__title {
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 8px 0 12px;
}
.group__text { color: var(--paper-70); font-size: clamp(14px, 1.6vw, 17px); max-width: 26em; }
.group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  align-content: start;
}
.program {
  --card-pad: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--hairline-inv);
  border-radius: 14px;
  overflow: hidden;            /* so the full-bleed image takes the card's radius */
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.program:hover { border-color: var(--paper); transform: translateY(-4px); }
/* Square photograph at the head of every class card. Fixed 1:1 so a row of
   cards lines up regardless of what gets dropped into the slots. */
.program__media {
  position: relative;
  aspect-ratio: 1 / 1;
  /* The card is a flex column, so without this the square gets shrunk to
     whatever height is left over and stops being square. */
  flex: none;
  /* Full bleed: cancel the card's padding on three sides so the picture runs
     to the card edges rather than sitting inset. */
  width: auto;
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1)
          clamp(12px, 1.4vw, 18px);
  overflow: hidden;
  background: var(--card);
}
.program__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.program__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Framing, per photograph — a square is cropped hard at full screen. */
  object-position: center var(--img-y, 50%);
}

/* Layered card (The Sunny Hour Studio): sky behind, logo in front. The two
   drift at different rates as the card crosses the viewport, which is what
   reads as depth. Overscanned so neither layer can expose an edge. */
.program__media--layered { position: relative; }
.program__media--layered .program__sky {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  /* Framing is per photograph. A square shot is cropped hard at full screen,
     so the subject's position in the frame decides where the crop should
     sit — the resting card is portrait and shows the whole height either
     way, so this value only costs anything when the class page is open. */
  object-position: center var(--sky-y, 62%);
}
/* The palm's crown is in the bottom third of its square; anything less than
   the foot of the image and the full-screen page is all sky. */
.program__media--sunny { --sky-y: 100%; }
.program__media--layered .program__mark {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 10%;
  width: 84%;
  height: auto;
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 6px 18px rgba(8, 6, 14, 0.35));
}
/* Schedule line. Reads as provisional on purpose — no real times yet. */
.program__when {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 8px;
}
.program__title {
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.program__text { color: var(--paper-70); font-size: clamp(14px, 1.6vw, 16px); flex: 1; }

/* ---------- feature (A Day to Feel Good on the company page) ---------- */
.feature {
  background: var(--card);
  color: var(--type);
  padding: clamp(56px, 9vh, 120px) clamp(24px, 3.4vw, 52px);
  border-radius: var(--radius);
  margin: 0 var(--pad) var(--gap);
}
.feature__eyebrow {
  font-weight: 700;
  font-size: clamp(12px, 1.4vw, 16px);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--type);
}
.feature__title {
  margin-top: clamp(18px, 3vh, 30px);
  font-size: clamp(34px, 7vw, 108px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-transform: uppercase;
}
.feature__text {
  margin-top: clamp(22px, 3vh, 36px);
  max-width: 34em;
  color: var(--paper-70);
  font-size: clamp(16px, 1.9vw, 21px);
}
.feature__facts {
  margin-top: clamp(32px, 5vh, 56px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 28px);
}
.feature__facts > div { border-top: 1px solid var(--hairline-inv); padding-top: 12px; }
.feature__facts dt {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  color: var(--paper-70);
}
.feature__facts dd {
  font-weight: 700;
  font-size: clamp(15px, 2vw, 26px);
  letter-spacing: -0.015em;
}
.feature__cta {
  display: inline-block;
  margin-top: clamp(28px, 4vh, 46px);
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 19px);
  color: var(--type);
  padding: 16px 34px;
  border-radius: 999px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

/* ---------- friction ---------- */
.friction { padding: clamp(72px, 11vh, 150px) var(--pad); }
.friction__lead {
  font-size: clamp(24px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  max-width: 20em;
}
.friction__body {
  margin-top: clamp(22px, 3vh, 36px);
  font-size: clamp(16px, 1.9vw, 21px);
  color: var(--paper-70);
  max-width: 34em;
}
.friction__flip {
  margin-top: clamp(28px, 4vh, 52px);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 30px);
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--paper);
  padding-bottom: 14px;
  display: inline-block;
}

/* ---------- vendors ---------- */
.vendors { padding: 0 var(--pad) clamp(72px, 11vh, 150px); }
.vendors__lead {
  font-size: clamp(19px, 2.8vw, 34px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.015em;
  max-width: 26em;
  margin-bottom: clamp(36px, 6vw, 72px);
}
.vendors__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
}
.vendor { border-top: 1px solid var(--hairline-inv); padding-top: 16px; }
.vendor__num { font-weight: 700; font-size: 14px; }
.vendor__title {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 10px 0 12px;
}
.vendor__text { color: var(--paper-70); font-size: clamp(14px, 1.6vw, 17px); }

/* ---------- access ---------- */
.access { padding: 0 var(--pad) clamp(72px, 11vh, 150px); }
.access__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 32px);
}
.pass {
  background: var(--ink);
  color: var(--type);
  border-radius: 16px;
  padding: clamp(26px, 3.4vw, 46px);
  display: flex;
  flex-direction: column;
}
.pass--resident { background: transparent; color: var(--type); border: 1px solid var(--hairline-inv); }
.pass__label {
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 16px);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.pass__price {
  font-weight: 700;
  font-size: clamp(48px, 8vw, 108px);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: clamp(14px, 2vh, 26px) 0;
}
.pass__plus {
  display: block;
  font-size: clamp(13px, 1.5vw, 17px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 10px;
}
.pass__text { font-size: clamp(14px, 1.6vw, 17px); flex: 1; max-width: 32em; }
.pass__cta {
  align-self: flex-start;
  margin-top: clamp(22px, 3vh, 34px);
  color: var(--type);
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 18px);
  padding: 16px 34px;
  border-radius: 999px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.pass__note {
  margin-top: clamp(22px, 3vh, 34px);
  font-weight: 700;
  font-size: clamp(11px, 1.3vw, 14px);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ---------- mafia ---------- */
.mafia {
  background: var(--card);
  color: var(--type);
  padding: clamp(56px, 9vh, 120px) clamp(24px, 3.4vw, 52px);
  text-align: center;
  border-radius: var(--radius);
  margin: 0 var(--pad) var(--gap);
}
.mafia__smiley { width: clamp(48px, 6vw, 64px); height: auto; margin: 0 auto clamp(22px, 3vh, 34px); }
.mafia__title {
  font-size: clamp(34px, 7vw, 104px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
}
.mafia__text {
  margin: clamp(20px, 3vh, 32px) auto 0;
  max-width: 34em;
  color: var(--paper-70);
  font-size: clamp(15px, 1.8vw, 19px);
}
.mafia__cta {
  display: inline-block;
  margin-top: clamp(26px, 4vh, 42px);
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 19px);
  color: var(--type);
  padding: 16px 34px;
  border-radius: 999px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

/* ---------- partners ---------- */
.partners {
  padding: clamp(48px, 7vh, 90px) var(--pad);
  color: var(--type);
}
.partners__label {
  font-weight: 700;
  font-size: clamp(12px, 1.4vw, 15px);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: clamp(20px, 3vh, 34px);
  color: var(--paper-70);
}
.partners__list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 56px);
  font-weight: 700;
  font-size: clamp(15px, 2.2vw, 26px);
  letter-spacing: -0.015em;
}

/* ---------- join ---------- */
.join { padding: clamp(72px, 11vh, 150px) var(--pad); }
.join__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.join__title {
  font-size: clamp(28px, 4.4vw, 60px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin-bottom: 16px;
}
.join__text { color: var(--paper-70); font-size: clamp(15px, 1.8vw, 19px); max-width: 30em; }
.join__form { display: flex; flex-direction: column; gap: 22px; }
.hidden-field { display: none; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field span,
.field label {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--paper-70);
}
.field input,
.field select,
.field textarea {
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--type);
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  padding: 13px 14px;
  min-height: 46px;
  width: 100%;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(212, 207, 198, 0.34); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--field-line-strong); }
.field select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23d4cfc6' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  background: var(--field-bg-focus);
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px var(--field-ring);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--warn); }
.join__submit {
  font-family: var(--font);
  font-weight: 700;
  font-size: 17px;
  color: var(--type);
  border-radius: 999px;
  padding: 18px 40px;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

/* ---------- footer ---------- */
.footer {
  background: var(--ink);
  color: var(--type);
  padding: clamp(56px, 9vh, 104px) var(--pad) clamp(28px, 4vh, 40px);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(36px, 5vh, 60px);
  border-bottom: 1px solid var(--hairline-inv);
}
.footer__brand img { width: clamp(150px, 16vw, 190px); height: auto; }
.footer__tagline {
  margin-top: 18px;
  font-weight: 700;
  font-size: clamp(17px, 2vw, 24px);
  letter-spacing: -0.015em;
}
.footer__blurb {
  margin-top: 12px;
  color: var(--paper-70);
  font-size: clamp(14px, 1.5vw, 16px);
  max-width: 28em;
}
.footer__col h2 {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--paper-70);
  margin-bottom: 16px;
}
.footer__col li + li { margin-top: 10px; }
.footer__col a,
.footer__col address {
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 500;
  color: var(--type);
}
.footer__col a:hover { box-shadow: inset 0 -2px 0 var(--accent); }
.footer__col address { color: var(--paper-70); line-height: 1.6; }

.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.footer__social a {
  width: 38px;
  height: 38px;
  border: 1px solid var(--hairline-inv);
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.footer__social a:hover { background: var(--accent); border-color: var(--accent); box-shadow: none; }
.footer__social svg { display: block; }
.footer__handle { margin-top: 14px; font-size: clamp(14px, 1.5vw, 16px); }
.footer__handle a { color: var(--type); font-weight: 700; }
.footer__handle a:hover { box-shadow: inset 0 -2px 0 var(--accent); }

.footer__bar {
  padding-top: clamp(20px, 3vh, 30px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--paper-70);
}
.footer__place {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--type);
  letter-spacing: 0.02em;
}
.footer__flags { display: flex; align-items: center; gap: 7px; }
.footer__flags img {
  height: 17px;
  width: auto;
  border-radius: 2px;
  /* hairline keeps the white stripes from bleeding into the ink ground */
  box-shadow: 0 0 0 1px rgba(245, 242, 235, 0.35);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__legal a:hover { box-shadow: inset 0 -2px 0 var(--accent); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .vendors__grid { grid-template-columns: 1fr; }
  .access__grid { grid-template-columns: 1fr; }
  .join__grid { grid-template-columns: 1fr; }
  .group { grid-template-columns: 1fr; gap: clamp(16px, 3vw, 28px); }
  .feature__facts { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: clamp(28px, 5vw, 44px); }
  .footer__brand { grid-column: 1 / -1; }
  .bento__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .group__grid { grid-template-columns: 1fr; }
  .program { min-height: 0; }
  .bento__grid { grid-template-columns: 1fr; }
  .tile--wide { grid-column: auto; }
  main > .panel:first-child { margin-top: 76px; }
  /* Narrow screens wrap the copy taller, so hold near-uniform cover rather
     than risking text drifting above the gradient's protected zone. */
  .panel__media::after {
    background: linear-gradient(
      to top,
      rgba(20, 20, 20, 0.90) 0%,
      rgba(20, 20, 20, 0.74) 70%,
      rgba(20, 20, 20, 0.66) 100%
    );
  }
}

/* Jupiter Fit staff dashboard */
html:has(.dash-view),
body.dash-view {
  background: var(--bg);
  min-height: 100%;
  color-scheme: dark;
}
body.dash-view {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100svh;
}
.dash__scrim { display: none; }
.dash__side {
  background: var(--card);
  border-right: 1px solid var(--hairline-inv);
  padding:
    max(20px, calc(env(safe-area-inset-top, 0px) + 16px))
    16px
    max(20px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  position: sticky;
  top: 0;
  transition: transform 0.28s var(--ease);
}
.dash__side-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 28px;
}
.dash__side-head .dash__brand { margin-bottom: 0; flex: 1; min-width: 0; }
.dash__side-close {
  flex: 0 0 auto;
  font-family: var(--font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-70);
  background: #2a2a2e;
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  min-height: 34px;
  cursor: pointer;
}
.dash__side-close:hover { color: var(--type); }
.dash__brand {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 28px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.dash__brand:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
  border-radius: 8px;
}
.dash__brand img {
  height: 40px;
  width: auto;
}
.dash__role {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.16);
  border-radius: 999px;
  padding: 7px 11px;
}
.dash__role:empty { display: none; }
.dash__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.dash__nav[hidden] { display: none !important; }
.dash__nav--offer {
  gap: 0;
}
.dash__offer-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--type);
  margin: 4px 4px 18px;
}
.dash__offer-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 18px;
}
.dash__nav--offer .offer-pane__back {
  align-self: flex-start;
  margin: 4px 4px 0;
}
.dash__nav-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 36px 4px 8px;
}
.dash__nav-label:first-child { margin-top: 0; }
.dash__nav-label:not(:first-child) {
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(212, 207, 198, 0.16);
}
.offer-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--paper-70);
}
.offer-dot--glp1 { background: var(--offer-glp1); }
.offer-dot--strength { background: var(--offer-strength); }
.offer-dot--peak { background: var(--offer-peak); }
.offer-dot--neuralxp { background: var(--offer-neuralxp); }
.offer-dot--breakpoint { background: var(--offer-breakpoint); }
.offer-dot--group { background: var(--offer-group); }
.offer-fill--glp1 { background: var(--offer-glp1-fill); }
.offer-fill--strength { background: var(--offer-strength-fill); }
.offer-fill--peak { background: var(--offer-peak-fill); }
.offer-fill--neuralxp { background: var(--offer-neuralxp-fill); }
.offer-fill--breakpoint { background: var(--offer-breakpoint-fill); }
.offer-fill--group { background: var(--offer-group-fill); }
.offer-k--glp1 { color: var(--offer-glp1); }
.offer-k--strength { color: var(--offer-strength); }
.offer-k--peak { color: var(--offer-peak); }
.offer-k--neuralxp { color: var(--offer-neuralxp); }
.offer-k--breakpoint { color: var(--offer-breakpoint); }
.offer-k--group { color: var(--offer-group); }
.dash__link-main,
.dash__tab-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.dash__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  color: var(--paper-70);
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
}
.dash__link:hover { color: var(--type); background: rgba(245, 242, 235, 0.06); }
.dash__link:focus-visible,
.dash__menu:focus-visible,
.dash__side-foot a:focus-visible,
.dash__side-foot button:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.dash__link.is-active {
  color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.16);
}
.dash__pack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding: 6px;
  border-radius: 14px;
  background: #101012;
}
.dash__pack:not(:has(.dash__link:not([hidden]))) { display: none; }
.dash__count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--paper-70);
  background: rgba(245, 242, 235, 0.08);
  border-radius: 999px;
  min-width: 24px;
  padding: 2px 7px;
  text-align: center;
}
.dash__link.is-active .dash__count {
  color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.22);
}
.dash__side-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline-inv);
}
.dash__side-foot a,
.dash__side-foot button {
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  color: var(--paper-70);
  background: transparent;
  border: 0;
  text-align: left;
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
  border-radius: 10px;
}
.dash__side-foot a:hover,
.dash__side-foot button:hover { color: var(--type); background: rgba(245, 242, 235, 0.06); }
.dash__menu {
  display: none;
  align-items: center;
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: 14px;
  z-index: 30;
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--type);
  background: var(--card);
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
}
html.dash-nav-closed body.dash-view {
  grid-template-columns: minmax(0, 1fr);
}
html.dash-nav-closed .dash__side {
  position: fixed;
  inset: 0 auto 0 0;
  width: 260px;
  z-index: 28;
  transform: translateX(-105%);
  pointer-events: none;
}
html.dash-nav-closed .dash__menu { display: inline-flex; }
html.dash-nav-closed .dash { padding-top: 72px; }
@media (min-width: 861px) {
  html.dash-nav-open .dash__menu { display: none; }
}
.dash {
  padding: 32px clamp(20px, 4vw, 48px) 72px;
  min-width: 0;
}
.dash__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
}
.dash__pills[hidden] { display: none !important; }
.dash__pill-tab[hidden] { display: none !important; }
.dash__pill-tab {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--field-line);
  background: var(--pill-slate);
  color: var(--type);
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}
.dash__pill-tab:hover { border-color: var(--field-line-strong); }
.dash__pill-tab:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.dash__pill-tab.is-active {
  position: relative;
  z-index: 1;
}
.dash__pill-tab[data-prospect-tab="all"].is-active {
  background: rgba(245, 242, 235, 0.16);
  border-color: var(--field-line-strong);
}
.dash__pill-tab.is-active.offer-fill--glp1 { border-color: var(--offer-glp1); --pill-stroke: var(--offer-glp1); }
.dash__pill-tab.is-active.offer-fill--strength { border-color: var(--offer-strength); --pill-stroke: var(--offer-strength); }
.dash__pill-tab.is-active.offer-fill--peak { border-color: var(--offer-peak); --pill-stroke: var(--offer-peak); }
.dash__pill-tab.is-active.offer-fill--neuralxp { border-color: var(--offer-neuralxp); --pill-stroke: var(--offer-neuralxp); }
.dash__pill-tab.is-active.offer-fill--breakpoint { border-color: var(--offer-breakpoint); --pill-stroke: var(--offer-breakpoint); }
.dash__pill-tab.is-active.offer-fill--group { border-color: var(--offer-group); --pill-stroke: var(--offer-group); }
.dash__pill-tab.is-active[class*="offer-fill--"] {
  animation: dash-pill-breathe 10s ease-in-out infinite;
}
@keyframes dash-pill-breathe {
  0%, 100% {
    border-color: color-mix(in srgb, var(--pill-stroke) 40%, transparent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--pill-stroke) 28%, transparent);
  }
  50% {
    border-color: var(--pill-stroke);
    box-shadow:
      0 0 10px var(--pill-stroke),
      0 0 22px color-mix(in srgb, var(--pill-stroke) 80%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dash__pill-tab.is-active[class*="offer-fill--"] {
    animation: none;
    border-color: var(--pill-stroke);
    box-shadow: 0 0 8px color-mix(in srgb, var(--pill-stroke) 45%, transparent);
  }
}
.dash__pill-tab .dash__count {
  min-width: 1.4em;
  text-align: center;
}
.dash__search {
  display: block;
  max-width: 420px;
  margin: 0 0 28px;
}
.dash__search[hidden] { display: none !important; }
.dash__search input {
  width: 100%;
  background: var(--card);
  color: var(--type);
  border: 0;
  border-radius: 12px;
  padding: 14px 16px;
  min-height: 48px;
  font-size: 16px;
  font-family: var(--font);
}
.dash__page[hidden] { display: none !important; }
.dash__kicker {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 8px;
}
.dash__title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 8px;
}
.dash__hello {
  color: var(--paper-70);
  margin-bottom: 28px;
}
.dash__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.dash__stats--one {
  grid-template-columns: minmax(0, 220px);
}
.dash__stats--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dash__stats--foot {
  margin-top: 28px;
  margin-bottom: 0;
}
.dash__stat {
  background: var(--card);
  border-radius: 16px;
  padding: 18px 16px;
}
.dash__stat p {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin-bottom: 8px;
}
.dash__stat strong {
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.03em;
}
.dash__note {
  margin: 0 0 16px;
  color: var(--paper-70);
}
.dash__note[data-kind="error"] { color: #ffb4b4; }
.dash__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: var(--card);
  border-radius: 16px;
  padding: 22px;
  max-width: 640px;
}
.dash__card dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 6px;
}
.dash__card dd { font-weight: 700; font-size: 16px; }
.portal-card .dash__card--nested {
  background: transparent;
  padding: 0;
  max-width: none;
  margin: 0 0 4px;
}
.dash__fine {
  max-width: 640px;
  margin-top: 16px;
  color: var(--paper-70);
  font-size: 14px;
}
.dash__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 140px;
  gap: 12px;
  align-items: center;
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
  margin: 0 0 8px;
}
.dash__row strong { display: block; }
.dash__row span {
  display: block;
  color: var(--paper-70);
  font-size: 13px;
  line-height: 1.35;
}
.dash__row select,
.dash__pill {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--type);
  background: #2a2a2e;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
select.dash__pill {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23d4cfc6' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.dash__row .dash__pill {
  display: inline-flex;
}
.dash__pill--active,
select.dash__pill--active,
.dash__row .dash__pill--active {
  background-color: var(--stage-active-fill);
  color: var(--stage-active);
}
.dash__pill--paused,
select.dash__pill--paused,
.dash__row .dash__pill--paused {
  background-color: var(--stage-paused-fill);
  color: var(--stage-paused);
}
.dash__pill--onboard,
.dash__row .dash__pill--onboard {
  background-color: var(--stage-onboard-fill);
  color: var(--stage-onboard);
}
.dash__pill--pending,
.dash__row .dash__pill--pending {
  background-color: var(--stage-pay-fill);
  color: var(--stage-pay);
}
.dash__pill--slate,
.dash__row .dash__pill--slate {
  background-color: var(--pill-slate);
  color: var(--type);
}
.dash__prospect-lead {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.dash__prospect-lead .dash__person { min-width: 0; flex: 1; }
select.dash__pill--active {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%237fd1a8' d='M1 1l5 5 5-5'/></svg>");
}
select.dash__pill--paused {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23ff8b8b' d='M1 1l5 5 5-5'/></svg>");
}
.dash__empty { color: var(--paper-70); padding: 8px 0; }
@media (max-width: 860px) {
  body.dash-view { display: block; }
  .dash__menu,
  html.dash-nav-open .dash__menu { display: inline-flex; }
  .dash__side-close { display: none; }
  .dash__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 27;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
  }
  .dash__scrim[hidden] { display: none !important; }
  .dash__side {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(280px, 86vw);
    z-index: 28;
    transform: translateX(-105%);
    transition: transform 0.28s var(--ease);
    padding-top: calc(env(safe-area-inset-top, 0px) + 64px);
  }
  html.dash-nav-open .dash__side { transform: none; }
  .dash { padding-top: 72px; }
  .dash__stats { grid-template-columns: 1fr 1fr; }
  .dash__stats--one,
  .dash__stats--3 { grid-template-columns: 1fr; }
  .dash__row,
  .dash__row--wide,
  .dash__row--prospects,
  .dash__cols--prospects,
  .dash__card { grid-template-columns: 1fr; }
  .dash__cols--prospects { display: none; }
}

/* Prospect rows + member portal */
.dash__row--wide {
  grid-template-columns: minmax(0, 1fr) auto;
}
.dash__cols--prospects,
.dash__row--prospects {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) minmax(140px, 0.9fr) 120px auto;
  gap: 12px;
  align-items: center;
}
.dash__cols--prospects {
  padding: 0 16px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.dash__cell strong { display: block; }
.dash__cell { color: var(--paper-70); font-size: 14px; font-weight: 700; }
.dash__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dash__btn {
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  color: var(--type);
  background: #2a2a2e;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
}
.dash__btn:hover { color: var(--type); }
.dash__btn--go {
  background: var(--accent);
  color: var(--type);
}
.dash__btn[disabled] { opacity: 0.55; cursor: wait; }
.dash__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 28px;
  padding: 0 0 4px;
  scrollbar-width: none;
}
.dash__tabs::-webkit-scrollbar { display: none; }
.dash__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  color: var(--paper-70);
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
}
.dash__tab:hover { color: var(--type); background: rgba(245, 242, 235, 0.06); }
.dash__tab:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.dash__tab.is-active {
  color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.16);
}
.dash__tab.is-active .dash__count {
  color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.22);
}
.dash__group { margin: 0 0 36px; }
.dash__group h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0 0 12px;
}
.dash__group h2 .dash__pill {
  letter-spacing: 0.04em;
  text-transform: none;
}
.portal-steps ol {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.portal-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--paper-70);
}
.portal-step strong {
  display: block;
  font-size: 15px;
}
.portal-step em {
  display: block;
  font-style: normal;
  border: 0;
  font-size: 12px;
  color: var(--paper-70);
}
.portal-step__n {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: rgba(245, 242, 235, 0.08);
}
.portal-step.is-done { color: var(--type); }
.portal-step.is-done .portal-step__n {
  background: rgba(91, 87, 240, 0.22);
  color: var(--accent-bright);
}
.portal-step.is-on {
  color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.16);
}
.portal-step.is-on .portal-step__n {
  background: var(--accent);
  color: var(--type);
}
.portal-card {
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
  max-width: 640px;
}
.portal-card__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 8px;
}
.portal-card h2 {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.portal-card p {
  color: var(--paper-70);
  margin-bottom: 20px;
}
.billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.billing-actions .dash__btn { margin: 0; }
.portal-card--pay { max-width: 780px; }
.portal-card .dash__btn {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  text-decoration: none;
}
.pay-embed {
  margin: 4px 0 16px;
  min-height: 140px;
}
.billing-invoices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
}
.billing-invoices__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  font-size: 14px;
}
.billing-invoices__row a {
  color: var(--accent-bright);
}

/* ---- member billing console -------------------------------------------
   Plan, card on file, invoice history, and membership controls. One
   surface language with the rest of the member dashboard. */
.bill { display: flex; flex-direction: column; gap: 16px; }
.bill[hidden] { display: none !important; }
.bill-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--hairline-inv);
  position: relative; overflow: hidden;
}
.bill-hero::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--mem-hue, var(--accent));
}
.bill-hero__copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bill-hero__copy h2 {
  font-size: clamp(24px, 3vw, 34px); font-weight: 700;
  letter-spacing: -0.03em; color: var(--type); margin: 0;
}
.bill-hero__copy p { margin: 0; max-width: 56ch; }
.bill-hero .mem-chip { width: fit-content; }
.bill-hero__price {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--type);
  line-height: 1;
}
.bill-hero__price[hidden] { display: none !important; }
.bill-hero__price span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.bill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 860px) {
  .bill-grid { grid-template-columns: 1fr; }
}
.bill .portal-card p { margin-bottom: 14px; }
.bill .portal-card h2 { margin-bottom: 8px; }
.bill-alert {
  border-color: var(--warn);
}
.bill-alert[hidden] { display: none !important; }
.bill-card {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
}
.bill-card[hidden] { display: none !important; }
.bill-card__brand {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-bright);
}
.bill-card__num { font-size: 18px; font-weight: 700; color: var(--type); letter-spacing: 0.04em; }
.bill-card__exp { font-size: 13px; color: var(--paper-70); }
.bill-table-wrap {
  overflow-x: auto;
  margin: 0 0 8px;
  border: 1px solid var(--hairline-inv);
  border-radius: var(--field-radius);
}
.bill-table-wrap[hidden] { display: none !important; }
.bill-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.bill-table th,
.bill-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--hairline-inv);
  vertical-align: baseline;
}
.bill-table th {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--paper-70);
}
.bill-table td { color: var(--type); }
.bill-table tr:last-child th,
.bill-table tr:last-child td { border-bottom: 0; }
.bill-table__amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bill-table__status { font-weight: 700; font-size: 12px; letter-spacing: 0.04em; }
.bill-table__status.is-ok { color: var(--ok); }
.bill-table__status.is-warn { color: var(--warn); }
.bill-table__status.is-muted { color: var(--paper-70); }
.bill-table a { color: var(--accent-bright); font-weight: 700; }
.bill-table a + a { margin-left: 12px; }
.bill-terms {
  margin-top: 18px;
  border-top: 1px solid var(--hairline-inv);
  padding-top: 14px;
}
.bill-terms summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--type);
  min-height: 44px;
  display: flex; align-items: center;
}
.bill-terms summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.bill-terms h3 {
  margin: 16px 0 6px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-bright);
}
.bill-terms p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper-70);
  max-width: 62ch;
}

.bill-confirm {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.bill-confirm[hidden] { display: none !important; }
.bill-confirm__scrim {
  position: absolute; inset: 0; z-index: 0;
  border: 0; padding: 0;
  background: rgba(5, 5, 5, 0.72);
  cursor: pointer;
}
.bill-confirm__card {
  position: relative; z-index: 1;
  width: min(440px, 100%);
  padding: 28px 22px 22px;
  background: var(--card);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 12px;
}
.bill-confirm__card h2 {
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.02em;
  color: var(--type);
  margin: 0;
}
.bill-confirm__card p {
  margin: 0;
  color: var(--paper-70);
  font-size: 15px;
  line-height: 1.5;
}
.bill-confirm .billing-actions { margin: 8px 0 0; }
html.bill-confirm-open, html.bill-confirm-open body { overflow: hidden; }

/* ---- class check-in --------------------------------------------------- */
.room-meter {
  padding: clamp(18px, 2.2vw, 24px);
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--hairline-inv);
}
.room-meter__k {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--paper-70); margin: 0 0 6px;
}
.room-meter__v {
  font-size: clamp(22px, 2.8vw, 30px); font-weight: 700;
  letter-spacing: -0.02em; color: var(--type); margin: 0 0 4px;
}
.room-meter__sub { margin: 0; font-size: 13px; color: var(--paper-70); }
.room-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.room-list li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline-inv);
}
.room-list li:last-child { border-bottom: 0; }
.room-list strong { display: block; color: var(--type); }
.room-list span { display: block; font-size: 13px; color: var(--paper-70); margin-top: 3px; }
.room-policy { margin-top: 8px; }
.room-pick {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 14px 16px;
  margin: 0 0 12px;
  background: var(--card);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
}
.room-pick p {
  width: 100%; margin: 0 0 4px;
  font-size: 13px; font-weight: 700; color: var(--type);
}

.billdoc {
  max-width: 640px;
  margin: 24px auto 80px;
  padding: clamp(22px, 3vw, 36px);
  background: var(--card);
  border: 1px solid var(--hairline-inv);
  border-radius: var(--radius);
}
.billdoc__head { margin-bottom: 22px; }
.billdoc__head img { display: block; width: 140px; height: auto; margin-bottom: 18px; }
.billdoc__kind {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-bright); margin: 0 0 8px;
}
.billdoc h1 {
  font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.03em; margin: 0 0 6px;
}
.billdoc__status { font-weight: 700; color: var(--ok); margin: 0; }
.billdoc__desc { margin: 18px 0 8px; color: var(--paper-70); }
.billdoc__amt {
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 700;
  letter-spacing: -0.03em; color: var(--type); margin: 0 0 16px;
}
.billdoc__fine { font-size: 13px; color: var(--paper-70); max-width: 52ch; }
@media print {
  .profile__back, .dash__note, .group-room__acts, .dash__menu, .dash__side { display: none !important; }
  body.billdoc-view { background: var(--paper); color: var(--ink); }
  .billdoc, .billdoc h1, .billdoc__amt, .billdoc__status { color: var(--ink); }
  .billdoc { border: 0; background: transparent; }
}
.portal-form .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 18px;
}
.portal-form .field span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.portal-form .field input {
  width: 100%;
  background: #2a2a2e;
  color: var(--type);
  border: 0;
  border-radius: 12px;
  padding: 14px 16px;
  min-height: 48px;
  font-size: 16px;
}
.portal-form .field input:focus {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.portal-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.set-tabs { margin: 0 0 28px; max-width: 640px; }
.set-panel { max-width: 680px; }
.set-panel[hidden] { display: none !important; }
.set-lede {
  color: var(--paper-70);
  margin: 0 0 28px;
  max-width: 40em;
}
.set-spec {
  display: grid;
  gap: 22px;
  max-width: 520px;
}
.set-spec dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 6px;
}
.set-spec dd {
  font-size: 20px;
  font-weight: 700;
  color: var(--type);
}
.pass-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 420px;
  margin: 28px 0 0;
}
.pass-form .hours-form__label { margin-bottom: 0; }
.pass-form .field { display: flex; flex-direction: column; gap: 8px; }
.pass-form .field span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.pass-form input {
  width: 100%;
  background: #222226;
  color: var(--type);
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 48px;
  font-size: 15px;
  font-family: var(--font);
}
.pass-form input:focus {
  outline: none;
  background: #2a2a30;
}
.hours-form { margin: 0 0 28px; }
.hours-form__label,
.hours-form .field span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin-bottom: 10px;
}
.hours-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.hours-days label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: #222226;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  color: var(--type);
}
.hours-days label:has(input:checked) {
  background: rgba(91, 87, 240, 0.22);
  color: var(--accent-bright);
}
.hours-days input {
  appearance: none;
  width: 0;
  height: 0;
  margin: 0;
  position: absolute;
}
.hours-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin: 0 0 22px;
}
.hours-form .field { display: flex; flex-direction: column; gap: 8px; }
.hours-form select {
  width: 100%;
  background: #222226;
  color: var(--type);
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 48px;
  font-size: 15px;
  font-family: var(--font);
}
.hours-form select:focus {
  outline: none;
  background: #2a2a30;
}
.hours-list { display: grid; gap: 8px; }
.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: #222226;
  border: 0;
  border-radius: 14px;
}
.hours-row strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
}
.hours-row span { color: var(--paper-70); font-size: 14px; }
.hours-row.is-on { background: rgba(91, 87, 240, 0.16); }
.hours-row__acts { display: flex; gap: 8px; flex-shrink: 0; }
.hours-form__actions { display: flex; align-items: center; gap: 12px; }
.slot-days,
.slot-times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.slot-day,
.slot-chip {
  font-family: var(--font);
  background: transparent;
  border: 1px solid rgba(245, 242, 235, 0.16);
  color: var(--type);
  border-radius: 12px;
  cursor: pointer;
}
.slot-day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 120px;
  padding: 12px 14px;
  text-align: left;
}
.slot-day span { color: var(--paper-70); font-size: 13px; }
.slot-chip {
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
}
.slot-day.is-on,
.slot-chip.is-on {
  border-color: var(--accent);
  background: rgba(91, 87, 240, 0.18);
}
@media (max-width: 720px) {
  .hours-form__row { grid-template-columns: 1fr; }
}
.portal-cal {
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  max-width: 760px;
  margin-bottom: 24px;
}
.member-sheet__account .member-sheet__go {
  display: inline-flex;
  margin-bottom: 12px;
}
.member-sheet__steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 20px;
  list-style: none;
}
.member-sheet__steps li {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-70);
  border-bottom: 2px solid rgba(245, 242, 235, 0.12);
  padding: 0 0 10px;
}
.member-sheet__steps li.is-on {
  color: var(--accent-bright);
  border-bottom-color: var(--accent-bright);
}
.member-sheet__verify-copy {
  color: var(--paper-70);
  margin: 0 0 22px;
  line-height: 1.45;
}
.member-sheet__verify-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.member-sheet__verify .member-sheet__who {
  font-size: clamp(22px, 3vw, 32px);
  margin-bottom: 12px;
  word-break: break-word;
}
@media (max-width: 860px) {
  .portal-form__row { grid-template-columns: 1fr; }
}

/* Member profile — identity up top, work in the dock */
body.profile-view {
  display: block;
  padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
}
html:has(.wa-view),
body.wa-view {
  --wa-ink: rgba(245, 242, 235, 0.72);
  --wa-ink-strong: var(--type);
  background: var(--bg);
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  color: var(--wa-ink);
}
body.wa-view { display: block; }
.wa {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.wa__top {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 16px;
  padding:
    max(20px, calc(env(safe-area-inset-top, 0px) + 12px))
    clamp(20px, 5vw, 72px)
    4px;
}
.wa__back {
  justify-self: start;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  color: var(--wa-ink);
  background: transparent;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
}
.wa__back:hover { color: var(--wa-ink-strong); }
.wa__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 10px;
}
.wa__name {
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px);
  color: var(--wa-ink-strong);
  letter-spacing: -0.02em;
}
.wa__saved {
  justify-self: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--wa-ink);
}
.wa__top-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 12px;
}
.wa__note {
  margin: 4px clamp(20px, 5vw, 72px) 0;
  font-size: 14px;
  color: var(--wa-ink);
}
.wa__note[data-kind="error"] { color: #e0a0a0; }
.wa__stagewrap {
  min-height: 0;
  overflow: hidden;
}
.wa__track {
  display: flex;
  width: 500%;
  height: 100%;
  transition: transform 0.55s var(--ease);
  will-change: transform;
}
.wa__track--3 { width: 300%; }
.wa__track--3 .wa__stage { width: 33.333%; }
.wa__track--4 { width: 400%; }
.wa__track--4 .wa__stage { width: 25%; }
.wa__stage {
  width: 20%;
  height: 100%;
  overflow: auto;
  padding: 20px clamp(20px, 8vw, 120px) 48px;
}
.wa__stage > * { max-width: 560px; }
.wa__stage h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 10px;
  color: var(--wa-ink-strong);
}
.wa__lede {
  color: var(--wa-ink);
  margin: 0 0 28px;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.45;
}
.wa__block { margin-top: 40px; }
.wa__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 16px;
}
.wa__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}
.wa-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wa-field span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wa-ink);
}
.wa-field input,
.wa-field select,
.wa-field textarea {
  width: 100%;
  background: var(--field-bg);
  color: var(--wa-ink-strong);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  padding: 13px 14px;
  min-height: 46px;
  font-size: 16px;
  font-family: var(--font);
  transition: border-color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
}
.wa-field input::placeholder,
.wa-field textarea::placeholder { color: rgba(212, 207, 198, 0.34); }
.wa-field input:hover,
.wa-field select:hover,
.wa-field textarea:hover { border-color: var(--field-line-strong); }
.wa-field input:focus,
.wa-field select:focus,
.wa-field textarea:focus {
  outline: none;
  background: var(--field-bg-focus);
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px var(--field-ring);
}
.wa-field textarea { min-height: 140px; resize: vertical; }
.wa-view .parq { display: grid; gap: 18px; margin-top: 8px; }
.wa-view .parq__row p {
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 8px;
  color: var(--wa-ink-strong);
}
.wa-view .parq__row b {
  font-weight: 700;
  margin-right: 8px;
  color: var(--accent-bright);
}
.wa-view .parq__pick { display: flex; gap: 8px; }
.wa-view .parq__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(245, 242, 235, 0.16);
  color: var(--wa-ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.wa-view .parq__opt input { position: absolute; opacity: 0; pointer-events: none; }
.wa-view .parq__opt.is-on {
  border-color: var(--accent);
  color: var(--type);
  background: rgba(91, 87, 240, 0.18);
}
.wa__bar {
  z-index: 4;
  background: var(--bg);
  padding: 8px clamp(20px, 5vw, 72px) max(18px, env(safe-area-inset-bottom, 0px));
}
.wa__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.wa-view .wa__next {
  background: var(--accent);
  border: 0;
  color: var(--type);
  min-width: 112px;
  text-align: center;
  padding: 12px 22px;
  font-size: 15px;
}
.wa-view .wa__next:hover { background: var(--accent-hover); }
.wa__actions .btn[disabled] { opacity: 0.35; cursor: default; }
.wa__actions .btn[hidden],
.wa__top-actions .btn[hidden] { display: none; }
.wa__line { padding: 0; }
.wa__stops {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(22px, 5vw, 48px);
}
.wa__stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 242, 235, 0.32);
  background: transparent;
  border: 0;
  padding: 0;
  min-width: 52px;
  cursor: pointer;
}
.wa__stop::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(245, 242, 235, 0.18);
}
.wa__stop.is-done { color: var(--accent-bright); }
.wa__stop.is-done::before,
.wa__stop.is-on::before { background: var(--accent); }
.wa__stop.is-on { color: var(--type); }
.wa__sub {
  font-size: 16px;
  font-weight: 700;
  margin: 32px 0 14px;
  color: var(--wa-ink-strong);
}
.wa-legal {
  color: var(--wa-ink);
  line-height: 1.55;
  margin: 0 0 24px;
  font-size: 15px;
}
.wa-legal h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 22px 0 8px;
  color: var(--accent-bright);
}
.wa-legal p { margin: 0 0 12px; }
.wa__acks { display: grid; gap: 4px; margin: 0 0 28px; }
.wa-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--wa-ink);
  cursor: pointer;
}
.wa-check input { margin-top: 3px; accent-color: var(--accent); flex: 0 0 16px; }

/* Onboarding picks — one row, one idea, no boxes */
.wa-view .picklist { display: grid; gap: 2px; }
.wa-view .picklist__rest { display: grid; gap: 2px; }
.wa-view .pick {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  color: var(--wa-ink);
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.wa-view .pick input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.wa-view .pick i {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 242, 235, 0.28);
  background: transparent;
}
.wa-view .pick:hover { color: var(--type); }
.wa-view .pick.is-on { color: var(--type); }
.wa-view .pick.is-on i {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 4px var(--bg);
}
.wa-view .pick--none {
  font-weight: 700;
  min-height: 56px;
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(245, 242, 235, 0.08);
}
.wa-view .pick--note {
  align-items: flex-start;
  min-height: 0;
  padding: 12px 0;
  font-size: 15px;
  line-height: 1.4;
}
.wa-view .pick--note i { margin-top: 2px; }
.wa-view .pick-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
.wa-view .pick-notes[hidden] { display: none; }
.wa-view .pick-notes span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wa-ink);
}
.wa-view .pick-notes input {
  width: 100%;
  background: var(--field-bg);
  color: var(--type);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  padding: 13px 14px;
  min-height: 46px;
  font-size: 16px;
  font-family: var(--font);
}
@media (max-width: 720px) {
  .wa__top { grid-template-columns: 1fr auto; }
  .wa__saved { display: none; }
  .wa-view .wa__next { min-width: 96px; padding: 12px 20px; }
  .wa__fields { grid-template-columns: 1fr; gap: 18px; }
  .wa__stops { gap: 14px; }
  .wa__stop { font-size: 10px; min-width: 44px; }
  .wa__stage { padding: 12px 20px 40px; }
}
.profile__back {
  display: inline-flex;
  margin: 16px var(--pad) 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--paper-70);
}
.profile__back:hover { color: var(--type); }
.profile__back[hidden] { display: none !important; }
.profile__note { margin: 12px var(--pad) 0; }
.profile-view > .preview-bar { margin: 12px var(--pad) 24px; }
.profile {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}
.profile__save {
  position: absolute;
  top: calc(clamp(88px, 12vw, 140px) + 14px);
  right: var(--pad);
  z-index: 3;
  min-width: 96px;
  padding: 12px 22px;
  font-size: 15px;
}
.profile__save[hidden] { display: none; }
.profile__cover {
  height: clamp(88px, 12vw, 140px);
  overflow: hidden;
  background: var(--card);
}
.profile__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px 20px;
  align-items: end;
  padding: 0 var(--pad) 8px;
  margin-top: -40px;
}
.profile__photo {
  position: relative;
  width: 112px;
  height: 112px;
}
.profile__avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 4px solid var(--bg);
  background: #2a2a2e;
  color: var(--type);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.04em;
  overflow: hidden;
}
.profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile__camera {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  background: rgba(13, 13, 13, 0.82);
  color: var(--type);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.profile__camera:hover { background: var(--accent); }
.profile__photo-clear {
  position: absolute;
  top: 8px;
  right: 0;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--type);
  background: rgba(13, 13, 13, 0.82);
  border: 0;
  border-radius: 999px;
  padding: 6px 8px;
  cursor: pointer;
}
.dash__person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
body.dash-view em { border-bottom: 0; }
.dash__person strong {
  font-size: 18px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash__face {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #2a2a2e;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}
.dash__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile__name {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.profile__meta {
  color: var(--paper-70);
  margin-top: 6px;
}
.profile__dot { margin: 0 6px; }
.profile__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 8px;
}
.profile-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.profile-dock__inner {
  pointer-events: auto;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}
.profile-dock__bar {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 0 1 auto;
  width: fit-content;
  min-width: 0;
  gap: 0;
  padding: 4px;
  border-radius: 999px;
  background: rgba(32, 32, 36, 0.92);
  border: 1px solid rgba(138, 135, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(245, 242, 235, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 0 20px rgba(91, 87, 240, 0.22);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.profile-dock__tabs {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  gap: 0;
}
.profile-dock .profile__tab {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--paper-70);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  transition:
    color 0.2s var(--ease),
    background 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.profile-dock .profile__tab:hover {
  color: var(--type);
  background: rgba(245, 242, 235, 0.06);
}
.profile-dock .profile__tab.is-active {
  color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.24);
  box-shadow: inset 0 0 0 1px rgba(138, 135, 255, 0.38);
}
.profile-dock .profile__tab:active {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.28);
}
.profile-dock .profile__tab:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.profile-dock .profile__tab[hidden] { display: none !important; }
.profile-dock .profile__tab.is-locked {
  color: var(--paper-70);
}
.profile-dock__back {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(138, 135, 255, 0.28);
  background: rgba(32, 32, 36, 0.55);
  color: var(--type);
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow:
    inset 0 1px 0 rgba(245, 242, 235, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.profile-dock__back:visited { color: var(--type); }
.profile-dock__back::before {
  content: "←";
  margin-right: 8px;
  font-weight: 700;
}
.profile-dock__back:hover {
  background: rgba(32, 32, 36, 0.78);
  border-color: var(--accent-bright);
  color: var(--type);
}
.profile-dock__back:active {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(245, 242, 235, 0.06);
}
.profile-dock__back:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}
.profile-dock__back[hidden] { display: none !important; }
@media (max-width: 700px) {
  .profile-dock .profile__tab { font-size: 13px; padding: 10px 8px; }
}
@media (max-width: 560px) {
  .profile-dock .profile__tab { font-size: 12px; padding: 10px 7px; }
  .profile-dock__back {
    font-size: 0;
    width: 48px;
    padding: 0;
  }
  .profile-dock__back::before {
    font-size: 16px;
    margin: 0;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .profile-dock__bar,
  .profile-dock__back { background: var(--card); }
}
@media (prefers-reduced-transparency: reduce) {
  .profile-dock__bar,
  .profile-dock__back {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--card);
  }
}
@media (prefers-reduced-motion: reduce) {
  .profile-dock .profile__tab,
  .profile-dock__back { transition: none; }
}
.profile__panel { padding: 20px var(--pad) 0; position: relative; }
.profile__card--gate { position: relative; min-height: 220px; }
.profile-gate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0 16px;
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.profile-gate[hidden] { display: none !important; }
.profile__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.profile__card-head h2 { margin-bottom: 0; }
.profile__unlock-btn {
  flex: 0 0 auto;
  align-self: flex-start;
  min-width: 96px;
  padding: 10px 20px;
  font-size: 14px;
}
.profile__unlock-btn[hidden] { display: none !important; }
.profile__panel.is-gated .sia input:not([readonly]),
.profile__panel.is-gated .sia select,
.profile__panel.is-gated .sia textarea,
.profile__panel.is-gated .sia button {
  pointer-events: none;
}
.profile-gate__k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0;
}
.profile-gate__title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--type);
  margin: 0;
}
.profile-gate__copy {
  color: var(--paper-70);
  font-size: 15px;
  margin: 0 0 8px;
  max-width: 42ch;
}
.profile-unlock {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(13, 13, 13, 0.72);
}
.profile-unlock[hidden] { display: none !important; }
.profile-unlock__card {
  position: relative;
  width: min(400px, 100%);
  background: var(--card);
  border-radius: 16px;
  border: 0;
  padding: 22px 20px 20px;
  display: grid;
  gap: 14px;
}
.profile-unlock__k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0;
  padding-right: 72px;
}
.profile-unlock__card h2 {
  font-size: 22px;
  letter-spacing: -0.03em;
  margin: 0;
}
.profile-unlock__card p { color: var(--paper-70); margin: 0; font-size: 15px; }
.profile-unlock__err { color: var(--warn); font-size: 14px; }
.profile-unlock__err[hidden] { display: none !important; }
.profile-unlock__card .dash__btn {
  align-self: start;
  justify-self: start;
  width: auto;
  min-height: 36px;
  padding: 8px 14px;
  font-size: 13px;
}
.profile-unlock .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-unlock .field span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.profile-unlock .field input {
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  color: var(--type);
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  min-height: 46px;
}
.profile-unlock .field input:focus {
  outline: none;
  border-color: var(--accent-bright);
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 3px var(--field-ring);
}
.profile__panel[hidden] { display: none !important; }
.profile__grid {
  display: grid;
  gap: 16px;
}
.profile__card {
  background: var(--card);
  border-radius: 16px;
  padding: 22px;
}
.profile__card h2 {
  font-size: 20px;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.profile__hint {
  color: var(--paper-70);
  margin-bottom: 16px;
  font-size: 14px;
}
.profile-next {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 20px 0 36px;
}
.profile-next[hidden] { display: none !important; }
.profile-next > .sia__mod {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.profile-next__dials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.profile-next__dials > .mc__tile {
  grid-column: auto;
  min-height: 124px;
  border: 0;
  background: rgba(245, 242, 235, 0.12);
}
.profile-next .mc__v--when {
  font-size: clamp(15px, 2vw, 20px);
  letter-spacing: -0.03em;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.15;
}
.profile-next .mc__v--when small {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--paper-70);
}
.profile-next__go {
  min-height: 168px;
  justify-content: flex-start;
}
.profile-next__go .profile__hint {
  margin: 0;
  max-width: 46ch;
}
.profile-next__btn {
  align-self: flex-end;
  margin-top: auto;
  min-width: 0;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.2;
}
.profile-next__btn[disabled] {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 720px) {
  .profile-next__dials { grid-template-columns: 1fr; }
}
.profile-checks-chart {
  margin: 0 0 20px;
}
.profile-checks-chart .mc { max-width: none; }
.profile-log {
  border: 1px solid var(--hairline-inv);
  border-radius: 14px;
  padding: 0;
  margin: 0 0 20px;
}
.profile-log > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 14px;
  padding: 14px 16px;
  color: var(--type);
}
.profile-log > summary::-webkit-details-marker { display: none; }
.profile-log > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  font-size: 11px;
  color: var(--paper-70);
}
.profile-log[open] > summary::before { content: "▾"; }
.profile-log > summary:hover { color: var(--accent-bright); }
.profile-log [data-checks-table] { padding: 0 16px 16px; }
.profile__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.profile__card .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile__card .field span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.health-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 48px;
}
.health-split h2 { margin-bottom: 16px; }
.health-list {
  display: grid;
  gap: 2px;
}
.health-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  font-size: 15px;
  font-weight: 500;
  color: var(--type);
  cursor: pointer;
}
.health-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex: 0 0 16px;
}
.health-notes span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.profile__card .field input,
.profile__card .field select,
.profile__card .field textarea {
  width: 100%;
  background: transparent;
  color: var(--type);
  border: 0;
  border-bottom: 1px solid var(--hairline-inv);
  border-radius: 0;
  padding: 10px 0;
  min-height: 44px;
  font-size: 15px;
  font-family: var(--font);
}
.profile__card .field textarea { min-height: 88px; resize: vertical; }
.profile__field--full { grid-column: 1 / -1; }
.health-group { margin: 0 0 10px; }
.health-group__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-70);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-inv);
  padding: 8px 0;
  min-height: 40px;
  cursor: pointer;
  text-align: left;
}
.health-group__toggle:hover { color: var(--type); }
.health-group__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.health-group__meta em {
  font-style: normal;
  border: 0;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--accent-bright);
}
.health-group__meta i {
  display: block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.health-group.is-open .health-group__meta i { transform: rotate(-135deg); }
.health-group.is-closed .health-check:not(.is-on) { display: none; }
.health-group.is-closed .health-list:not(:has(.is-on)) { display: none; }
.parq { display: grid; gap: 22px; }
.parq__row p {
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 8px;
  color: inherit;
}
.parq__row b { font-weight: 700; margin-right: 6px; }
.parq__pick {
  display: flex;
  gap: 20px;
}
.parq__pick label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  min-height: 36px;
  cursor: pointer;
}
.profile__card .field input[readonly] { color: var(--paper-70); }
.profile__spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.profile__spec dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 6px;
}
.profile__spec dd { font-weight: 700; }
.profile__save-row { padding-bottom: 8px; }
.profile__save-row[hidden],
.profile__save-row [hidden] { display: none !important; }
.health-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.health-notes input {
  width: 100%;
  background: transparent;
  color: var(--type);
  border: 0;
  border-bottom: 1px solid var(--hairline-inv);
  border-radius: 0;
  padding: 8px 0;
  min-height: 40px;
  font-size: 15px;
}
.dash__row[data-profile-id] { cursor: pointer; }
.dash__row[data-profile-id]:hover { background: #222226; }
.dash__group--notice h2 { color: var(--accent-bright); }
.dash__link[hidden],
.dash__tab[hidden] { display: none !important; }
.member-sheet .health-block { margin: 8px 0 22px; }
.member-sheet .health-block > span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
@media (max-width: 860px) {
  .profile__head { grid-template-columns: 1fr; margin-top: -32px; }
  .profile__photo,
  .profile__avatar { width: 96px; height: 96px; font-size: 28px; }
  .profile__fields,
  .profile__spec,
  .health-split { grid-template-columns: 1fr; }
}

/* ============ DASHBOARD — HOW IT WORKS ============
   Reference reading inside the portal: measured column, quiet rules,
   tables that scroll on their own instead of stretching the page. */
.doc-panel { max-width: 68ch; }
.doc-panel[hidden] { display: none !important; }
.doc-block { margin: 0 0 52px; }
.doc-block:last-child { margin-bottom: 0; }
.doc-block h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--type);
  margin: 0 0 14px;
}
.doc-block p,
.doc-block li { color: var(--paper-70); line-height: 1.62; }
.doc-block p { margin: 0 0 14px; }
.doc-block b { color: var(--type); font-weight: 700; }
.doc-lede {
  font-size: 17px;
  color: var(--type) !important;
  margin-bottom: 22px !important;
}
.doc-note {
  font-size: 14px;
  border-left: 2px solid var(--hairline-inv);
  padding-left: 14px;
}
.doc-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  color: var(--accent-bright);
  background: rgba(138, 135, 255, 0.1);
  border-radius: 5px;
  padding: 1px 5px;
  overflow-wrap: anywhere;
}
.doc-list,
.doc-steps { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 10px; }
.doc-list ul,
.doc-steps ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }

.doc-spec { display: grid; gap: 18px; margin: 0 0 14px; }
.doc-spec dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 5px;
}
.doc-spec dd { margin: 0; color: var(--paper-70); line-height: 1.6; }

/* Tables carry their own scrollbar so a wide row never widens the page. */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}
.doc-table th,
.doc-table td {
  text-align: left;
  vertical-align: top;
  padding: 11px 16px 11px 0;
  border-bottom: 1px solid rgba(245, 242, 235, 0.1);
  line-height: 1.5;
}
.doc-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-bright);
  border-bottom-color: var(--hairline-inv);
  white-space: nowrap;
}
.doc-table td { color: var(--paper-70); }
.doc-table tbody tr:last-child td { border-bottom: 0; }
/* Scoped to td so these beat `.doc-table td`, which sets the row colour. */
.doc-table td.doc-yes,
.doc-table td.doc-no,
.doc-table td.doc-part { font-weight: 700; white-space: nowrap; }
.doc-table td.doc-yes { color: #7fd1a8; }
.doc-table td.doc-no { color: var(--paper-70); opacity: 0.6; }
.doc-table td.doc-part { color: var(--accent-bright); }

.doc-callout {
  border: 1px solid var(--hairline-inv);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 20px 0 14px;
  background: rgba(245, 242, 235, 0.03);
}
.doc-callout p:last-child { margin-bottom: 0; }
.doc-callout--warn {
  border-color: rgba(138, 135, 255, 0.5);
  background: rgba(138, 135, 255, 0.07);
}

/* prospect → approved → active */
.doc-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 14px !important;
}
.doc-flow span {
  border: 1px solid var(--hairline-inv);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 13px;
  font-weight: 700;
  color: var(--type);
}
.doc-flow i {
  font-style: normal;
  color: var(--accent-bright);
  font-weight: 700;
}
@media (max-width: 860px) {
  .doc-panel { max-width: none; }
}

/* ============ PASSWORD RESET ============
   Standalone landing page for a Supabase recovery link. */
.reset-view { background: var(--bg); }
.reset {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--pad);
}
.reset__card {
  width: min(440px, 100%);
  background: var(--card);
  border: 1px solid var(--hairline-inv);
  border-radius: var(--radius);
  padding: clamp(26px, 5vw, 40px);
}
.reset__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 12px;
}
.reset__title {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--type);
  margin: 0 0 10px;
}
.reset__lede {
  color: var(--paper-70);
  line-height: 1.6;
  margin: 0 0 22px;
}
.reset__who {
  font-size: 14px;
  color: var(--paper-70);
  margin: 0 0 4px;
}
.reset__note {
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  background: rgba(245, 242, 235, 0.06);
  color: var(--type);
}
.reset__note[hidden] { display: none !important; }
.reset__note[data-kind="error"] {
  background: rgba(255, 120, 120, 0.12);
  color: #ffb4b4;
}
.reset__form,
.reset__again {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.reset__form[hidden],
.reset__again[hidden] { display: none !important; }
.reset__secret { position: relative; display: block; }
.reset__secret input { width: 100%; padding-right: 66px; }
.reset__reveal {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--accent-bright);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
}
.reset__go { margin-top: 4px; }
.reset__foot {
  margin: 24px 0 0;
  font-size: 14px;
}
.reset__foot a { color: var(--paper-70); text-decoration: underline; }
.reset__foot a:hover { color: var(--type); }

/* Sign-in drawer: quiet link under the button. */
.member-sheet__forgot {
  background: none;
  border: 0;
  padding: 6px 0 0;
  font: inherit;
  font-size: 14px;
  color: var(--paper-70);
  text-decoration: underline;
  cursor: pointer;
  align-self: center;
}
.member-sheet__forgot + .member-sheet__forgot { padding-top: 2px; }
.member-sheet__forgot:hover { color: var(--type); }
.member-sheet__forgot:disabled { opacity: 0.5; cursor: default; }

/* Settings → Staff */
.staff-list { display: grid; gap: 10px; margin: 0 0 34px; max-width: 560px; }
.staff-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--hairline-inv); border-radius: 14px; padding: 14px 16px;
}
.staff-row strong { display: block; color: var(--type); font-weight: 700; }
.staff-row__meta {
  display: block; font-size: 13px; color: var(--paper-70); margin-top: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.set-fine { font-size: 13px; color: var(--paper-70); margin: -4px 0 4px; line-height: 1.5; }
.set-panel .pass-form { margin-bottom: 34px; }
.set-panel .pass-form:last-child { margin-bottom: 0; }

/* Settings → Staff: row actions, and the admin's desk switcher */
.staff-row__act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.staff-row__nomail { font-size: 12px; color: var(--paper-70); opacity: 0.7; }

/* Settings → cards. Grouping identity, details and password so each block
   reads as one decision rather than three loose forms. */
.set-panel { max-width: 720px; display: flex; flex-direction: column; gap: 22px; }
.set-card {
  border: 1px solid var(--hairline-inv);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 26px);
  background: rgba(245, 242, 235, 0.02);
}
.set-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 16px;
}
.set-card__title {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--type); margin: 0;
}
.set-card__lede {
  color: var(--paper-70); font-size: 14px; line-height: 1.6;
  margin: -6px 0 20px; max-width: 52ch;
}
.set-form { display: flex; flex-direction: column; gap: 18px; }
.set-spec--tight { gap: 14px; max-width: none; }
.set-spec--tight dd { font-size: 16px; overflow-wrap: anywhere; }

/* The re-auth gate reads as a threshold, not just another field. */
.set-gate {
  border-top: 1px solid var(--hairline-inv);
  padding-top: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.set-gate__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent-bright); margin: 0;
}
@media (max-width: 700px) {
  .set-card .portal-form__row { grid-template-columns: 1fr; }
}

/* Forms tab: a way through to the real screen, with the caveat beside it. */
.doc-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 18px 0 0 !important;
}
.doc-actions__note {
  font-size: 13px; color: var(--ink-faint, var(--paper-70)); line-height: 1.5;
  flex: 1 1 16rem; min-width: 0;
}
.doc-actions .dash__btn { flex: 0 0 auto; text-decoration: none; }

/* ============ FORM PREVIEW MODULE ============
   A faithful, inert rendering of a real form, shown inside the docs. Built on
   <details> so it needs no JavaScript — the earlier link buttons depended on
   both JS and on pages that redirect anyone without the right account.
   Self-contained: drop .fpv anywhere and it carries its own look. */
.fpv { margin: 18px 0 0; }
.fpv__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--accent-bright); cursor: pointer; list-style: none;
  border: 1px solid var(--hairline-inv); border-radius: 999px;
  padding: 7px 15px; transition: border-color 120ms ease;
}
.fpv__toggle::-webkit-details-marker { display: none; }
.fpv__toggle::before { content: "▸"; font-size: 10px; }
.fpv[open] .fpv__toggle::before { content: "▾"; }
.fpv__toggle:hover { border-color: var(--accent-bright); }
.fpv__toggle:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

.fpv__frame {
  margin-top: 14px;
  border: 1px solid var(--hairline-inv);
  border-radius: 16px;
  overflow: hidden;
  background: #101010;
}
.fpv__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: rgba(245, 242, 235, 0.05);
  border-bottom: 1px solid var(--hairline-inv);
}
.fpv__dots { display: inline-flex; gap: 6px; }
.fpv__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(245,242,235,0.22); }
.fpv__name { font-size: 12px; font-weight: 700; color: var(--type); letter-spacing: 0.02em; }
.fpv__tag {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-bright);
  border: 1px solid rgba(138,135,255,0.45); border-radius: 999px; padding: 3px 9px;
}
/* Inert already blocks interaction where supported; this covers the rest. */
.fpv__body { padding: clamp(16px, 3vw, 24px); pointer-events: none; user-select: none; }
.fpv__body * { pointer-events: none !important; }

.fpv__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fpv__field { display: block; margin-bottom: 14px; }
.fpv__field > span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--paper-70); margin-bottom: 7px;
}
.fpv__field input {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--hairline-inv);
  color: var(--type); font: inherit; font-size: 15px; padding: 6px 0;
}
.fpv__kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-bright); margin: 0 0 6px;
}
.fpv__h { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--type); margin: 0 0 8px; }
.fpv__sub {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-70); margin: 22px 0 10px;
}
.fpv__lede { color: var(--paper-70); margin: 0 0 16px; font-size: 14px; }
.fpv__hint { color: var(--paper-70); font-size: 12px; margin: 12px 0 0; }
.fpv__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fpv__list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
}
.fpv__list em {
  font-style: normal;
  color: var(--paper-70);
  font-size: 12px;
}
.fpv__body .group-track { margin: 8px 0 12px; }

.fpv__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.fpv__chip {
  border: 1px solid var(--hairline-inv); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; color: var(--paper-70);
}
.fpv__chip.is-on {
  border-color: var(--accent-bright); color: var(--type);
  background: rgba(138, 135, 255, 0.14);
}

.fpv__parq {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--hairline-inv); padding: 12px 0;
}
.fpv__parq p { margin: 0; font-size: 14px; color: var(--paper-70); }
.fpv__parq b { color: var(--type); }
.fpv__yn { display: inline-flex; gap: 8px; flex: 0 0 auto; }
.fpv__yn em {
  font-style: normal; font-size: 12px; font-weight: 700;
  border: 1px solid var(--hairline-inv); border-radius: 999px; padding: 5px 12px;
  color: var(--paper-70);
}
.fpv__yn em.is-on { border-color: var(--accent-bright); color: var(--type); background: rgba(138,135,255,0.14); }

.fpv__scroll {
  max-height: 120px; overflow-y: auto;
  border: 1px solid var(--hairline-inv); border-radius: 12px;
  padding: 14px; margin: 0 0 18px;
  font-size: 13px; line-height: 1.6; color: var(--paper-70);
}
.fpv__btn {
  display: inline-block; margin-top: 6px;
  background: var(--accent); color: var(--paper);
  border-radius: 999px; padding: 11px 22px;
  font-size: 14px; font-weight: 700;
}
.fpv-pay {
  margin: 4px 0 8px;
  border: 1px solid var(--hairline-inv);
  border-radius: 12px;
  padding: 16px 16px 14px;
  background: rgba(0, 0, 0, 0.18);
  max-width: 440px;
}
.fpv-pay__brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0 0 14px;
}
.fpv-pay__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.fpv-pay__field { display: block; margin: 0 0 10px; }
.fpv-pay__field span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0 0 6px;
}
.fpv-pay__field em {
  display: block;
  font-style: normal;
  border: 1px solid var(--hairline-inv);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--type);
  background: rgba(245, 242, 235, 0.04);
}
.fpv-pay__submit {
  display: block;
  text-align: center;
  margin: 6px 0 0;
  background: var(--accent);
  color: var(--paper);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
}
.fpv-pay__note {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--paper-70);
  margin: 10px 0 0;
}
.fpv-meet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 16px;
  max-width: 440px;
}
.fpv-meet__card {
  border: 1px solid var(--hairline-inv);
  border-radius: 12px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.18);
}
.fpv-meet__day {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0;
}
.fpv-meet__time {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--type);
  margin: 6px 0 2px;
}
.fpv-meet__len {
  font-size: 13px;
  color: var(--paper-70);
  margin: 0;
}
@media (max-width: 560px) {
  .fpv-meet { grid-template-columns: 1fr; }
}
.fpv__rail { display: flex; gap: 6px; margin: 0 0 18px; }
.fpv__rail i { height: 3px; flex: 1; border-radius: 2px; background: rgba(245,242,235,0.14); }
.fpv__rail i.is-done { background: rgba(138,135,255,0.5); }
.fpv__rail i.is-on { background: var(--accent-bright); }
.fpv__note { font-size: 13px; color: var(--paper-70); margin: 12px 0 0; }

@media (max-width: 640px) {
  .fpv__row { grid-template-columns: 1fr; }
  .fpv__parq { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============ DOCS: USE THE WIDTH ============
   The panel now fills the page, but prose does not. Running text stays near a
   readable measure while tables, previews and diagrams break out to the full
   column — the width is spent on the things that benefit from it. */
.doc-panel { max-width: none; }

.doc-block > p,
.doc-block > ul,
.doc-block > ol,
.doc-block > .doc-lede,
.doc-block > .doc-note { max-width: 74ch; }

.doc-block > .doc-callout { max-width: 88ch; }

/* Definition grids fan out instead of stacking in one narrow column. */
.doc-spec {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px 34px;
}

/* A rule that runs the full width anchors each section without a heavy border. */
.doc-block > h2 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline-inv);
}

/* Tabs stay reachable once the page is long. */
.doc-panel { position: relative; }
.dash__page[data-dash-page="docs"] .set-tabs {
  position: sticky; top: 0; z-index: 3;
  max-width: none;
  background: var(--bg);
  padding: 10px 0;
  margin: 0 0 30px;
  border-bottom: 1px solid var(--hairline-inv);
}

/* Two forms sit side by side on a wide screen; one column on a laptop. */
@media (min-width: 1500px) {
  .doc-panel[data-doc-panel="forms"] .doc-block { max-width: none; }
  .fpv__frame { max-width: 960px; }
}

/* Wide tables get room before they start scrolling inside themselves. */
.doc-table { font-size: 14.5px; }
.doc-table th, .doc-table td { padding-right: 28px; }

/* Sample roster inside a preview frame. Deliberately its own classes rather
   than the live .dash__row ones — sample rows must never be able to inherit
   changes meant for real people, or start looking like real people. */
.fpv__stat {
  display: flex; align-items: baseline; gap: 12px;
  border: 1px solid var(--hairline-inv); border-radius: 12px;
  padding: 12px 16px; margin: 0 0 20px; width: fit-content; min-width: 200px;
}
.fpv__stat span {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--paper-70);
}
.fpv__stat b { margin-left: auto; font-size: 22px; font-weight: 700; color: var(--type); }

.fpv__cols {
  display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 16px;
  padding: 0 4px 10px; border-bottom: 1px solid var(--hairline-inv);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper-70);
}
.fpv__prow {
  display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 16px;
  align-items: center; padding: 13px 4px;
  border-bottom: 1px solid rgba(245, 242, 235, 0.08);
}
.fpv__prow:last-of-type { border-bottom: 0; }
.fpv__face {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(138, 135, 255, 0.16); color: var(--accent-bright);
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
}
.fpv__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fpv__who b { color: var(--type); font-weight: 700; font-size: 14px; }
.fpv__who em { font-style: normal; font-size: 12px; color: var(--paper-70); }
.fpv__pill {
  justify-self: start;
  border: 1px solid var(--hairline-inv); border-radius: 999px;
  padding: 5px 12px; font-size: 12px; font-weight: 700; color: var(--paper-70);
  white-space: nowrap;
}
.fpv__pill.is-warn { border-color: rgba(255, 154, 154, 0.5); color: #ff9a9a; }
.fpv__pill.is-wait { border-color: rgba(138, 135, 255, 0.5); color: var(--accent-bright); }

/* The row is name · service · status; on a narrow screen it stacks. */
@media (max-width: 640px) {
  .fpv__cols { display: none; }
  .fpv__prow { grid-template-columns: auto 1fr; row-gap: 8px; }
  .fpv__pill { grid-column: 2; }
}

/* Sample roster row: avatar sits with the name in column one so the three
   columns line up with their headers, and the service cell carries no
   decoration inherited from elsewhere. */
.fpv__id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.fpv__id b { color: var(--type); font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.fpv__svc {
  font-style: normal; font-size: 13px; color: var(--paper-70);
  text-decoration: none; border: 0; padding: 0; margin: 0;
  overflow-wrap: anywhere;
}
.fpv__face { flex: 0 0 auto; }
@media (max-width: 640px) {
  .fpv__svc { grid-column: 2; }
}

/* Intake: emergency contact is its own required block, not a field lost among
   optional details. */
.wa__req {
  display: inline-block; margin-left: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent-bright);
  border: 1px solid rgba(138, 135, 255, 0.45); border-radius: 999px; padding: 2px 9px;
  vertical-align: middle;
}
.wa__note {
  color: var(--paper-70); font-size: 13px; line-height: 1.55;
  margin: -6px 0 16px; max-width: 46ch;
}

/* ============ MEMBER ONBOARDING CARD ============
   The intake forms, inline at the top of the member dashboard. Everything else
   on the page stays visible and usable while these are outstanding. */
.onb {
  border: 1px solid var(--hairline-inv); border-radius: 20px;
  padding: clamp(20px, 3.5vw, 30px); margin: 0 0 34px;
  background: rgba(245, 242, 235, 0.03);
}
.onb[hidden] { display: none !important; }
.onb__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.onb__kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-bright); margin: 0 0 8px;
}
.onb__title { font-size: clamp(21px, 3vw, 27px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--type); }
.onb__lede { color: var(--paper-70); margin: 0; max-width: 52ch; line-height: 1.6; }
.onb__count { font-size: 13px; color: var(--paper-70); margin: 0; white-space: nowrap; }
.onb__count b { color: var(--type); font-size: 20px; }
.onb__bar { height: 4px; border-radius: 2px; background: rgba(245,242,235,0.1); margin: 20px 0 6px; overflow: hidden; }
.onb__bar i { display: block; height: 100%; width: 0; background: var(--accent-bright); transition: width 260ms var(--ease, ease); }
.onb__note { margin: 14px 0 0; font-size: 14px; color: var(--type); }
.onb__note[hidden] { display: none !important; }
.onb__note[data-kind="error"] { color: #ffb4b4; }

.onb__task { border-top: 1px solid var(--hairline-inv); }
.onb__task:first-of-type { margin-top: 18px; }
.onb__row {
  display: flex; align-items: center; gap: 14px; padding: 16px 2px;
  cursor: pointer; list-style: none;
}
.onb__row::-webkit-details-marker { display: none; }
.onb__tick {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--hairline-strong, rgba(245,242,235,0.3));
}
.onb__task.is-done .onb__tick {
  border-color: #7fd1a8; background: #7fd1a8;
  background-image: linear-gradient(45deg, transparent 45%, #0d0d0d 45%, #0d0d0d 55%, transparent 55%);
}
.onb__name { font-weight: 700; color: var(--type); flex: 1 1 auto; }
.onb__task.is-done .onb__name { color: var(--paper-70); }
.onb__state {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-70); white-space: nowrap;
}
.onb__task.is-done .onb__state { color: #7fd1a8; }
.onb__body { padding: 4px 2px 26px; display: flex; flex-direction: column; gap: 16px; }
.onb__hint { color: var(--paper-70); font-size: 13px; line-height: 1.55; margin: 0; max-width: 48ch; }
.onb__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--type); margin: 10px 0 0;
}
.onb__req {
  margin-left: 8px; font-size: 10px; color: var(--accent-bright);
  border: 1px solid rgba(138,135,255,0.45); border-radius: 999px; padding: 2px 8px;
}
.onb__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.onb__scroll {
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--hairline-inv); border-radius: 12px; padding: 16px;
  font-size: 14px; line-height: 1.6; color: var(--paper-70);
}
.onb__scroll h3 { color: var(--type); font-size: 14px; margin: 0 0 6px; }
.onb__scroll p { margin: 0 0 14px; }
.onb__check { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--paper-70); line-height: 1.5; }
.onb__check input { margin-top: 3px; flex: 0 0 auto; }
.onb__parq {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border-top: 1px solid var(--hairline-inv); padding: 12px 0;
}
.onb__parq p { margin: 0; font-size: 14px; color: var(--paper-70); }
.onb__parq b { color: var(--type); }
.onb__yn { display: inline-flex; gap: 14px; flex: 0 0 auto; }
.onb__yn label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--paper-70); cursor: pointer; }
.onb .btn { align-self: flex-start; }
@media (max-width: 640px) {
  .onb__parq { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
   GUIDED ONBOARDING — stepper + one-step-at-a-time
   Four forms shown all at once read as a wall of work. The member
   sees one open step, a stepper that names the checkpoint it leads
   to, and how many steps are left. See STYLE-GUIDE.md §3.
   ============================================================ */

/* ---------- stepper ---------- */
.steps {
  display: flex;
  list-style: none;
  margin: 24px 0 4px;
  padding: 0;
}
.steps__item {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}
/* connector runs from the previous dot into this one */
.steps__item::before {
  content: '';
  position: absolute;
  top: 13px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--field-line);
  transition: background 260ms var(--ease);
}
.steps__item:first-child::before { display: none; }
.steps__item.is-done::before,
.steps__item.is-current::before { background: var(--accent); }
.steps__dot {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  background: var(--bg);
  border: 2px solid var(--field-line);
  color: var(--pending);
  transition: border-color 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.steps__item.is-done .steps__dot {
  background: var(--ok);
  border-color: var(--ok);
  color: #0d0d0d;
}
.steps__item.is-current .steps__dot {
  border-color: var(--accent-bright);
  color: var(--type);
  box-shadow: 0 0 0 4px var(--field-ring);
}
.steps__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pending);
  line-height: 1.3;
}
.steps__item.is-done .steps__label { color: var(--paper-70); }
.steps__item.is-current .steps__label { color: var(--type); }
.steps__item--goal .steps__dot { border-style: dashed; }
.steps__item--goal.is-done .steps__dot { border-style: solid; }
.steps__item--goal.is-current .steps__dot { border-style: dashed; }
.onb__left {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--paper-70);
  line-height: 1.55;
}
.onb__left b { color: var(--type); font-weight: 700; }
@media (max-width: 560px) {
  .steps__label { font-size: 9.5px; letter-spacing: 0.04em; }
  .steps__dot { width: 24px; height: 24px; font-size: 11px; }
  .steps__item::before { top: 11px; }
}

/* ---------- one step at a time ---------- */
.onb__task {
  border-top: 1px solid var(--hairline-inv);
  transition: opacity 200ms var(--ease);
}
.onb__task.is-locked { opacity: 0.38; }
.onb__task.is-locked .onb__row { cursor: default; }
.onb__task.is-current > .onb__row .onb__name { color: var(--type); }
.onb__row { padding: 18px 2px; }
.onb__row:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
  border-radius: 8px;
}
.onb__num {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid var(--field-line);
  color: var(--pending);
}
.onb__task.is-current .onb__num { border-color: var(--accent-bright); color: var(--type); }
.onb__task.is-done .onb__num { background: var(--ok); border-color: var(--ok); color: #0d0d0d; }
.onb__state { color: var(--pending); }
.onb__task.is-current .onb__state { color: var(--accent-bright); }
.onb__task.is-done .onb__state { color: var(--ok); }

/* ---------- readable bodies ---------- */
.onb__body { padding: 2px 2px 28px; gap: 18px; }
.onb__section {
  border: 1px solid var(--field-line);
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(245, 242, 235, 0.02);
}
.onb__section > .onb__label:first-child { margin-top: 0; }
.onb__check {
  align-items: center;
  gap: 13px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--field-line);
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.onb__check:hover { border-color: var(--field-line-strong); }
.onb__check input { margin-top: 0; width: 17px; height: 17px; accent-color: var(--accent); }
.onb__check:has(input:checked) {
  border-color: rgba(138, 135, 255, 0.5);
  background: rgba(138, 135, 255, 0.07);
}
.onb__check:has(input:checked) span { color: var(--type); }
.onb__parq {
  border-top: 0;
  border: 1px solid var(--field-line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.onb__parq:last-child { margin-bottom: 0; }
.onb__yn label {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}
.onb__yn label:has(input:checked) {
  border-color: var(--accent-bright);
  background: rgba(138, 135, 255, 0.1);
  color: var(--type);
}
.onb__yn input { accent-color: var(--accent); }
.onb__scroll {
  border-color: var(--field-line);
  background: rgba(245, 242, 235, 0.02);
  max-height: 240px;
}

/* ---------- choice rows inside the dashboard onboarding ----------
   .pick was only ever styled under .wa-view, so the allergy and condition
   lists rendered as bare native checkboxes once the forms moved into the
   dashboard. These are the same control, styled for the .onb card. */
.onb .picklist { display: grid; gap: 8px; }
/* Chips, not an endless column — a 10-item list reads as a wall otherwise. */
.onb .picklist__rest {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.onb .pick {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  color: var(--paper-70);
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}
.onb .pick input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.onb .pick i {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--field-line-strong);
  background: transparent;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
}
.onb .pick:hover { border-color: var(--field-line-strong); color: var(--type); }
.onb .pick:focus-within {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px var(--field-ring);
}
.onb .pick.is-on {
  color: var(--type);
  border-color: rgba(138, 135, 255, 0.5);
  background: rgba(138, 135, 255, 0.08);
}
.onb .pick.is-on i {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 4px var(--bg);
}
.onb .pick--none {
  font-weight: 700;
  color: var(--type);
  border-style: dashed;
  margin-bottom: 6px;
}
.onb .pick--note { align-items: flex-start; line-height: 1.45; }
.onb .pick--note i { margin-top: 3px; }
.onb .pick-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.onb .pick-notes[hidden] { display: none; }
.onb .pick-notes span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.onb .pick-notes input {
  width: 100%;
  font-family: var(--font);
  font-size: 16px;
  color: var(--type);
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  padding: 13px 14px;
  min-height: 46px;
  outline: none;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
}
.onb .pick-notes input:focus {
  background: var(--field-bg-focus);
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px var(--field-ring);
}

/* ---------- real checkboxes and radios ----------
   Native controls on a dark ground paint a white box or a white dot. That is
   the "white in the fields" complaint in its last hiding place. These rules
   are GLOBAL on purpose: the same native controls appear in the dashboard
   onboarding, intake.html and the profile PAR-Q, and patching one card at a
   time is how this keeps coming back. Components that hide the input and draw
   their own mark (.pick) are more specific and still win. See STYLE-GUIDE.md.
   ============================================================ */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  border-radius: 50%;
  border: 1.5px solid var(--field-line-strong);
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
}
input[type="radio"]:checked {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg);
}
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--bg), 0 0 0 3px var(--field-ring);
}
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 6px;
  border: 1.5px solid var(--field-line-strong);
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: '\2713';
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #0d0d0d;
}
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--field-ring);
}
/* A checkbox or radio must never inherit the filled-text-box treatment. */
.field input[type="checkbox"],
.field input[type="radio"] {
  min-height: 0;
  padding: 0;
}
/* Legacy PAR-Q rows on intake.html and the profile page get the same pill
   treatment the dashboard uses, so all three read as one product. */
.parq__opt,
.parq__yn label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--paper-70);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}
.parq__opt.is-on,
.parq__opt:has(input:checked),
.parq__yn label:has(input:checked) {
  border-color: var(--accent-bright);
  background: rgba(138, 135, 255, 0.1);
  color: var(--type);
}

/* ---------- staff activation state ----------
   activated_at is stamped when an invited manager sets their password, so
   these two badges answer "has this person actually taken the account?" —
   the one thing the roster could not previously show. Tokens only, per
   STYLE-GUIDE.md: --ok for settled, --pending for waiting. */
.staff-row__ok,
.staff-row__await {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.staff-row__ok {
  color: var(--ok);
  border-color: rgba(127, 209, 168, 0.42);
  background: rgba(127, 209, 168, 0.1);
}
/* U+2713, not an emoji check — an emoji renders at its own colour and size on
   every platform and would fight the token palette. A plain glyph inherits
   ours. A 45deg gradient was the other option but it draws a slash, not a
   tick, which is what .onb__tick already gets slightly wrong. */
.staff-row__ok::before {
  content: '\2713';
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ok);
  color: var(--bg);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
.staff-row__await {
  color: var(--pending);
  border-color: var(--field-line);
}
.staff-row__await::before {
  content: '';
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px dashed var(--field-line-strong);
}

/* ============================================================
   SETTINGS
   Identity first, then one concern per card. The page opens by
   saying whose settings these are, because role and desk decide
   what the rest of the dashboard will let this person do.
   Tokens only — see STYLE-GUIDE.md §1.
   ============================================================ */

.set-panel { max-width: 860px; display: flex; flex-direction: column; gap: 20px; }

/* ---------- identity header ---------- */
.set-id {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 26px);
  max-width: 860px;
  margin: 0 0 26px;
  padding: clamp(18px, 2.6vw, 24px) clamp(20px, 2.8vw, 28px);
  border: 1px solid var(--hairline-inv);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(245, 242, 235, 0.045), rgba(245, 242, 235, 0.015));
}
.set-id__mark {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-bright);
  background: rgba(138, 135, 255, 0.14);
  border: 1px solid rgba(138, 135, 255, 0.34);
}
.set-id__who { min-width: 0; }
.set-id__name {
  margin: 0 0 3px;
  font-size: clamp(19px, 2.4vw, 23px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--type);
  overflow-wrap: anywhere;
}
.set-id__mail {
  margin: 0;
  font-size: 14px;
  color: var(--paper-70);
  overflow-wrap: anywhere;
}
.set-id__facts {
  display: flex;
  gap: clamp(18px, 2.4vw, 34px);
  margin: 0;
  text-align: right;
}
.set-id__facts div { display: flex; flex-direction: column; gap: 5px; }
.set-id__facts dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pending);
}
.set-id__facts dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--type);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .set-id { grid-template-columns: auto 1fr; }
  .set-id__facts {
    grid-column: 1 / -1;
    text-align: left;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--hairline-inv);
  }
}

/* ---------- tabs as a segmented control ----------
   The dashboard's underline tabs are for switching rosters. Settings is a
   small fixed set of concerns, which a contained control says better. */
.set-tabs {
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  margin: 0 0 24px;
  padding: 4px;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  background: var(--field-bg);
  overflow-x: auto;
}
.set-tabs .dash__tab {
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--paper-70);
  background: transparent;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.set-tabs .dash__tab:hover { color: var(--type); }
.set-tabs .dash__tab.is-active {
  color: var(--type);
  background: rgba(138, 135, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(138, 135, 255, 0.34);
}

/* ---------- cards ---------- */
.set-card {
  border: 1px solid var(--hairline-inv);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 28px);
  background: rgba(245, 242, 235, 0.022);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.set-card__head { display: flex; flex-direction: column; gap: 8px; }
.set-card__eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.set-card__title {
  margin: 0;
  font-size: clamp(17px, 2.1vw, 20px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--type);
}
.set-card__lede {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper-70);
  max-width: 62ch;
}
.set-card__lede strong { color: var(--type); font-weight: 700; }

/* Cards that change how someone gets in. Not alarming — just visibly a
   different kind of act from editing your name. */
.set-card--guard { background: rgba(245, 242, 235, 0.045); }
.set-card--guard .set-card__eyebrow { color: var(--paper-70); }

/* ---------- forms ---------- */
.set-form { display: flex; flex-direction: column; gap: 18px; }
.set-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.set-form__foot {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-inv);
}
.set-form__foot .btn { align-self: flex-start; }

/* The re-auth block. Inset so it reads as a checkpoint inside the form
   rather than one more field to fill in. */
.set-gate {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(16px, 2.2vw, 20px);
  border: 1px solid var(--field-line);
  border-radius: 14px;
  background: rgba(13, 13, 13, 0.4);
}
.set-gate__label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--type);
}
.set-fine { font-size: 13px; color: var(--paper-70); margin: 0; line-height: 1.55; }
.set-panel[data-set-panel="offerings"] .set-card__head {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}
.offer-cat {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.offer-cat__card {
  padding: 18px 16px;
  border-radius: 16px;
  background: var(--card);
}
.offer-cat__kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.offer-cat__name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.offer-cat__flags {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--type);
}
.offer-cat__price-mod {
  margin-top: 14px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: var(--field-bg);
  cursor: pointer;
}
.offer-cat__card.is-unlocked .offer-cat__price-mod {
  cursor: default;
  background: color-mix(in srgb, var(--accent) 12%, var(--field-bg));
}
.offer-cat__lock {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--paper-70);
}
.offer-cat__cal {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper-70);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.offer-cat__cal .dash__btn {
  text-decoration: none;
  display: inline-block;
}
.offer-cat__stripe {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--paper-70);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.offer-cat__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.offer-cat__price-mod > .field { margin-top: 0; }
.offer-cat__card .field span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin-bottom: 8px;
}
.offer-cat__card input[type="number"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--field-radius);
  background: color-mix(in srgb, var(--card) 55%, transparent);
  border: 1px solid var(--field-line);
  color: var(--type);
  font: inherit;
  font-size: 16px;
}
.offer-cat__card input[type="number"][readonly] {
  color: var(--paper-70);
  cursor: pointer;
}
.offer-cat__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.offer-cat__acts .btn[hidden] { display: none !important; }
.offer-cat__save:not([hidden]) {
  box-shadow: 0 0 0 1px rgba(138, 135, 255, 0.4), 0 0 18px rgba(138, 135, 255, 0.28);
}
.offer-policy-card {
  width: min(560px, 100%);
  max-height: min(80vh, 740px);
  overflow: auto;
}
.offer-policy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.offer-policy__sec h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.offer-policy__sec p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--type);
}
.offer-plans {
  margin-top: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.offer-plans__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.offer-plans__table th,
.offer-plans__table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px 10px 0;
  line-height: 1.4;
  border-bottom: 1px solid var(--hairline-inv);
}
.offer-plans__table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
  white-space: nowrap;
}
.offer-plans__table tbody th {
  font-size: 14px;
  font-weight: 700;
  color: var(--type);
  white-space: nowrap;
}
.offer-plans__table td { color: var(--paper-70); }
.offer-plans__table tbody tr:last-child th,
.offer-plans__table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 700px) {
  .offer-cat__fields { grid-template-columns: 1fr; }
}
.set-fine code {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(245, 242, 235, 0.07);
}

/* ---------- day chips ---------- */
.hours-days { display: flex; flex-wrap: wrap; gap: 8px; }
.hours-days label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 700;
  color: var(--paper-70);
  border: 1px solid var(--field-line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}
.hours-days label:hover { border-color: var(--field-line-strong); color: var(--type); }
.hours-days label:has(input:checked) {
  color: var(--type);
  border-color: rgba(138, 135, 255, 0.5);
  background: rgba(138, 135, 255, 0.12);
}

/* ---------- staff rows sit flush inside their card ---------- */
.set-panel .staff-list { max-width: none; margin: 0; }
.set-panel .pass-form { margin: 0; }

/* ============================================================
   SAMPLE DATA — a development lens on the real roster
   Loud on purpose. The failure mode worth designing against is
   not an ugly banner, it is an admin mistaking fabricated rows
   for real ones and acting on them.
   ============================================================ */
.dash__preview {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 14px 0 0;
  padding: 13px 14px;
  border: 1px solid var(--field-line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.dash__preview:hover { border-color: var(--field-line-strong); }
.dash__preview input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dash__preview__box {
  flex: 0 0 auto;
  width: 34px;
  height: 20px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(245, 242, 235, 0.12);
  border: 1px solid var(--field-line-strong);
  position: relative;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.dash__preview__box::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper-70);
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.dash__preview:has(input:checked) .dash__preview__box {
  background: var(--accent);
  border-color: var(--accent);
}
.dash__preview:has(input:checked) .dash__preview__box::after {
  transform: translateX(14px);
  background: var(--paper);
}
.dash__preview:has(input:focus-visible) .dash__preview__box {
  box-shadow: 0 0 0 3px var(--field-ring);
}
.dash__preview__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash__preview__text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--type);
}
.dash__preview__text small {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--paper-70);
}

.preview-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(20px, 3vh, 30px);
  padding: 13px 18px;
  border: 1px solid rgba(138, 135, 255, 0.4);
  border-radius: 14px;
  background: rgba(138, 135, 255, 0.1);
}
.preview-bar[hidden] { display: none !important; }
.preview-bar__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-bright);
  animation: previewPulse 2.4s var(--ease) infinite;
}
@keyframes previewPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.28; }
}
@media (prefers-reduced-motion: reduce) {
  .preview-bar__dot { animation: none; }
}
.preview-bar__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--paper-70);
}
.preview-bar__text strong { color: var(--type); font-weight: 700; }
.preview-bar__copy { min-width: 0; flex: 1; display: grid; gap: 10px; }
.preview-bar__jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.preview-bar__jump {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--paper-70);
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
}
.preview-bar__jump:hover { color: var(--type); border-color: var(--field-line-strong); }
.preview-bar__jump.is-on {
  color: var(--type);
  border-color: var(--accent);
  background: rgba(138, 135, 255, 0.16);
}
.dash__person-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dash__sample-kind {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper-70);
  letter-spacing: 0.01em;
  border-bottom: 0;
}

.sample-sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
}
.sample-sheet[hidden] { display: none !important; }
.sample-sheet__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(8, 8, 8, 0.72);
  cursor: pointer;
}
.sample-sheet__card {
  position: relative;
  width: min(520px, 100%);
  background: var(--card);
  border: 1px solid var(--field-line);
  border-radius: 22px;
  padding: 28px 26px 24px;
  display: grid;
  gap: 18px;
}
.sample-sheet__kind {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.sample-sheet__head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.sample-sheet__face {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--field-bg);
  color: var(--type);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
}
.sample-sheet__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sample-sheet__name {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.sample-sheet__meta {
  margin: 6px 0 0;
  color: var(--paper-70);
  font-size: 14px;
}
.sample-sheet__spec {
  margin: 0;
  display: grid;
  gap: 8px;
}
.sample-sheet__spec > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--hairline-inv);
}
.sample-sheet__spec dt {
  color: var(--paper-70);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sample-sheet__spec dd { margin: 0; color: var(--type); }
.sample-sheet__note {
  margin: 0;
  color: var(--paper-70);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- menu sign out ----------
   Quieter than the join CTA beside it: signing out is a thing you go looking
   for, not a thing the menu should push you toward. */
.menu__out {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--paper-70);
  background: transparent;
  border: 1px solid var(--hairline-inv);
  border-radius: 999px;
  padding: 13px 26px;
  min-height: 46px;
  cursor: pointer;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.menu__out[hidden] { display: none !important; }
.menu__out:hover { color: var(--type); border-color: var(--paper-70); }
.menu__out:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}
.menu__out[disabled] { opacity: 0.5; cursor: default; }

/* ---------- bounce notice ---------- */
.bounce-note {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: calc(100% - 32px);
  max-width: 560px;
  padding: 16px 18px;
  border: 1px solid rgba(138, 135, 255, 0.45);
  border-radius: 14px;
  background: #171717;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.bounce-note p {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--type);
}
.bounce-note__x {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  font-size: 19px;
  line-height: 1;
  color: var(--paper-70);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.bounce-note__x:hover { color: var(--type); }

/* ============================================================
   OFFERING FOCUS — the dashboard panel drills into an offering.
   Glass track at the top: Back + Dashboard / Flow subtabs.
   Same material language as the public offering switcher.
   ============================================================ */
[data-dash-main][hidden] { display: none !important; }
.dash__page.is-offer [data-dash-main] { display: none !important; }
.offer-pane[hidden] { display: none !important; }
.offer-pane.is-on {
  animation: offer-pane-in 280ms var(--ease);
}
@keyframes offer-pane-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.offer-pane__head { margin: 0 0 28px; }
.offer-pane__head .dash__title { margin-bottom: 16px; }
.offer-pane__head .dash__hello { margin: 18px 0 0; }
.offer-pane__leave {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper-70);
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
}
.offer-pane__leave:hover { color: var(--type); }
.offer-pane__leave:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
  border-radius: 8px;
}
.offer-pane__tabs {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(32, 32, 36, 0.92);
  border: 1px solid rgba(138, 135, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(245, 242, 235, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 0 20px rgba(91, 87, 240, 0.22);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.offer-pane__back {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(138, 135, 255, 0.28);
  background: rgba(32, 32, 36, 0.55);
  color: var(--type);
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow:
    inset 0 1px 0 rgba(245, 242, 235, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.offer-pane__back:hover {
  background: rgba(32, 32, 36, 0.78);
  border-color: var(--accent-bright);
  color: var(--type);
}
.offer-pane__back:active {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(245, 242, 235, 0.06);
}
.offer-pane__back:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}
.offer-focus__tab {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font);
  font-weight: 700;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  line-height: 1.15;
  touch-action: manipulation;
  transition:
    color 0.2s var(--ease),
    background 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.offer-focus__pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: rgba(91, 87, 240, 0.24);
  box-shadow: inset 0 0 0 1px rgba(138, 135, 255, 0.38);
  pointer-events: none;
  opacity: 0;
  transform: translateX(0);
  transition:
    transform 220ms var(--ease),
    width 220ms var(--ease),
    opacity 160ms var(--ease);
}
.offer-focus__pill.is-ready { opacity: 1; }
.offer-focus__tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 118px;
  min-height: 48px;
  padding: 7px 18px;
  color: var(--paper-70);
}
.offer-focus__name {
  font-size: 15px;
  letter-spacing: -0.015em;
  color: inherit;
}
.offer-focus__meta {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pending);
  font-variant-numeric: tabular-nums;
}
.offer-focus__tab:hover { color: var(--type); background: rgba(245, 242, 235, 0.06); }
.offer-focus__tab.is-active {
  color: var(--accent-bright);
  background: transparent;
}
.offer-focus__tab.is-active .offer-focus__meta { color: var(--accent-bright); }
.offer-focus__tab:active {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.28);
}
.offer-focus__back:focus-visible,
.offer-focus__tab:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.offer-focus__panel.is-on {
  animation: offer-panel-in 240ms var(--ease);
}
@keyframes offer-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .offer-pane__tabs,
  .offer-pane__back { background: var(--card); }
}
@media (prefers-reduced-transparency: reduce) {
  .offer-pane__tabs,
  .offer-pane__back {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--card);
  }
}
@media (prefers-reduced-motion: reduce) {
  .offer-pane.is-on,
  .offer-focus__panel.is-on { animation: none; }
  .offer-focus__tab,
  .offer-focus__pill,
  .offer-pane__back { transition: none; }
}
@media (max-width: 700px) {
  .offer-pane__tabs { width: 100%; }
  .offer-focus__tab { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }
  .offer-focus__name { font-size: 14px; }
}
.dash__stats--offer {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dash__stat em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 12px;
  color: var(--paper-70);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.offer-agg {
  background: var(--card);
  border-radius: 16px;
  padding: 22px 20px;
  margin: 0 0 28px;
}
.offer-agg[hidden] { display: none !important; }
.offer-agg__head { margin: 0 0 18px; max-width: 52rem; }
.offer-agg__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 8px;
}
.offer-agg__head h2 {
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}
.offer-agg__head p { color: var(--paper-70); margin: 0; }
.offer-agg__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
.offer-agg__stats .dash__stat {
  background: #2a2a2e;
  margin: 0;
}
.offer-agg__sleep p {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0 0 12px;
}
.offer-bar {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--paper-70);
}
.offer-bar b { color: var(--type); text-align: right; font-variant-numeric: tabular-nums; }
.offer-bar__track {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: rgba(245, 242, 235, 0.08);
  overflow: hidden;
}
.offer-bar__track i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
}
.offer-flow {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.offer-flow__rail {
  position: sticky;
  top: 24px;
}
.offer-track { margin: 0 0 28px; }
.offer-track__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0 0 10px;
}
.offer-track__note {
  color: var(--paper-70);
  font-size: 14px;
  margin: 0 0 22px;
}
.offer-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.offer-rail__item.is-current .offer-step {
  background: rgba(91, 87, 240, 0.16);
  color: var(--type);
}
.offer-rail__item.is-done .steps__dot {
  background: var(--ok);
  border-color: var(--ok);
  color: #0d0d0d;
}
.offer-step {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  min-height: 44px;
  background: none;
  border: 0;
  border-radius: 12px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.offer-step:hover { background: rgba(245, 242, 235, 0.06); }
.offer-step:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}
.offer-step__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.offer-step .steps__label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--type);
}
.offer-step__n {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--paper-70);
  font-variant-numeric: tabular-nums;
}
.offer-rail__item.is-current .offer-step__n { color: var(--accent-bright); }
.offer-doc {
  background: var(--card);
  border-radius: 16px;
  padding: 22px 20px 24px;
  max-width: none;
  min-width: 0;
}
.offer-doc .fpv__frame { max-width: none; }
.offer-doc .fpv__scroll {
  max-height: none;
  overflow: visible;
}
.offer-doc .fpv__body { pointer-events: none; }
@media (max-width: 980px) {
  .offer-flow { grid-template-columns: 1fr; }
  .offer-flow__rail { position: static; }
}
.offer-doc__who {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 8px;
}
.offer-doc h2 {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.03em;
  margin: 0 0 10px;
}
.offer-doc p { color: var(--paper-70); }
.offer-doc p code {
  font-size: 0.92em;
  color: var(--type);
}
.offer-doc__preview { margin: 18px 0 0; }
.offer-doc__foot {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--paper-70);
}
.offer-doc__field.is-focus {
  padding: 8px 12px;
  margin: 0 -12px 8px;
  border-radius: 12px;
  background: rgba(91, 87, 240, 0.14);
}
@media (max-width: 860px) {
  .dash__stats--offer { grid-template-columns: 1fr 1fr; }
  .offer-agg__stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .offer-agg__stats { grid-template-columns: 1fr; }
  .offer-bar { grid-template-columns: 1fr auto; }
  .offer-bar__track { grid-column: 1 / -1; }
}

/* ============================================================
   STRENGTH ASSESSMENT — log, chart, protocol
   Replaces the wellness consult for Strength Structure.
   ============================================================ */
.sa-view { background: var(--bg); color: var(--type); }
body.sa-view {
  display: block;
  min-height: 100svh;
}
.sa {
  max-width: 920px;
  margin: 0 auto;
  padding: 28px clamp(20px, 4vw, 48px) 80px;
}
.sa[hidden] { display: none !important; }
.sa__top {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}
.sa__back {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 14px;
  color: var(--type);
  background: rgba(32, 32, 36, 0.55);
  border: 1px solid rgba(138, 135, 255, 0.28);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.sa__back:hover { border-color: var(--accent-bright); color: var(--type); }
.sa__who { flex: 1 1 auto; min-width: 0; }
.sa__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 6px;
}
.sa__title {
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0 0 6px;
}
.sa__name { color: var(--paper-70); margin: 0; }
.sa__saved { color: var(--paper-70); font-size: 13px; margin-left: auto; }
.sa__note {
  margin: 0 0 16px;
  color: var(--paper-70);
}
.sa__note[data-kind="error"] { color: var(--warn); }
.sa__tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  padding: 4px;
  margin: 0 0 22px;
  border-radius: 999px;
  background: rgba(32, 32, 36, 0.92);
  border: 1px solid rgba(138, 135, 255, 0.22);
}
.sa__tab {
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  color: var(--paper-70);
  background: transparent;
  border: 0;
  border-radius: 999px;
  min-height: 40px;
  padding: 8px 16px;
  cursor: pointer;
}
.sa__tab.is-active {
  color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.24);
}
.sa__tab:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.sa__panel[hidden] { display: none !important; }
.sa__grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.sa__card {
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
  margin: 0 0 16px;
}
.sa__card h2 {
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.sa__record { position: sticky; top: 16px; }
.sa__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 14px;
}
.sa__fields--3 { grid-template-columns: 1fr 1fr 1fr; }
.sa-field--full { grid-column: 1 / -1; }
.sa-field { display: block; }
.sa-field > span,
.sa__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin-bottom: 7px;
}
.sa-field input,
.sa-field select,
.sa-field textarea {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  color: var(--type);
  font: inherit;
  font-size: 16px;
  min-height: 46px;
  padding: 10px 12px;
}
.sa-field textarea { min-height: 88px; resize: vertical; }
.sa-field input:focus,
.sa-field select:focus,
.sa-field textarea:focus {
  outline: none;
  border-color: var(--accent-bright);
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 3px var(--field-ring);
}
.sa__seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 10px;
  border-radius: 12px;
  background: #101012;
}
.sa__seg--sm { margin: 0; }
.sa__seg-item { flex: 1 1 0; }
.sa__seg-item input { position: absolute; opacity: 0; pointer-events: none; }
.sa__seg-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--paper-70);
  cursor: pointer;
  text-align: center;
}
.sa__seg-item input:checked + span {
  color: var(--type);
  background: rgba(91, 87, 240, 0.28);
}
.sa__hint { color: var(--paper-70); font-size: 13px; margin: 0 0 14px; }
.sa__computed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 16px;
}
.sa__computed div {
  background: #101012;
  border-radius: 12px;
  padding: 12px;
}
.sa__computed p {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0 0 4px;
}
.sa__computed strong { font-size: 22px; letter-spacing: -0.03em; }
.sa__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sa__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 12px;
}
.sa__stat {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
}
.sa__stat p {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0 0 6px;
}
.sa__stat strong { font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.03em; display: block; }
.sa__stat em { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: var(--paper-70); }
.sa__insight {
  background: rgba(127, 209, 168, 0.12);
  border: 1px solid rgba(127, 209, 168, 0.28);
  color: var(--ok);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 16px;
  font-size: 14px;
}
.sa__chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sa__chart-head h2 { margin: 0; }
.sa__chart-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sa__chart-tools select {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--type);
  background: #101012;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  min-height: 40px;
  padding: 8px 10px;
}
.sa__chart svg { width: 100%; height: auto; display: block; }
.sa__chart text { fill: var(--paper-70); font-size: 11px; font-family: var(--font); }
.sa__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--paper-70);
}
.sa__legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.sa__empty { color: var(--paper-70); margin: 8px 0; }
.sa__tablewrap { overflow-x: auto; }
.sa__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sa__table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
  padding: 8px 10px;
  border-bottom: 1px solid var(--hairline-inv);
}
.sa__table td {
  padding: 10px;
  border-bottom: 1px solid rgba(245, 242, 235, 0.06);
  vertical-align: middle;
}
.sa__table em { font-style: normal; color: var(--paper-70); }
.sa__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}
.sa__pill {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.sa__pill--clean { color: var(--ok); background: rgba(127, 209, 168, 0.12); }
.sa__pill--minor { color: var(--accent-bright); background: rgba(91, 87, 240, 0.16); }
.sa__pill--broke { color: var(--warn); background: rgba(255, 157, 157, 0.12); }
.sa__x {
  background: none;
  border: 0;
  color: var(--paper-70);
  font-size: 18px;
  cursor: pointer;
  min-width: 32px;
  min-height: 32px;
}
.sa__x:hover { color: var(--warn); }
.sa__protocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sa__checks { display: flex; flex-direction: column; gap: 8px; }
.sa-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--paper-70);
  cursor: pointer;
}
.sa__rubric { margin: 16px 0 0; }
.sa__rubric div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--hairline-inv);
}
.sa__rubric dt { font-weight: 700; }
.sa__rubric dd { color: var(--paper-70); margin: 0; }
@media (max-width: 980px) {
  .sa__grid,
  .sa__protocol { grid-template-columns: 1fr; }
  .sa__record { position: static; }
  .sa__stats { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sa__top { flex-wrap: wrap; }
  .sa__fields,
  .sa__fields--3 { grid-template-columns: 1fr; }
}

/* ============================================================
   AVAILABILITY — Painkiller week cards on Feel Good tokens.
   Off / All day / Morning / Night / Hours, reasons, status chips.
   Used in Flow templates (inert) and live intake / account.
   ============================================================ */
.avail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.avail__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--paper-70);
}
.avail__mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.avail__mark--off { background: rgba(212, 207, 198, 0.4); }
.avail__mark--all-day { background: #1F9D55; }
.avail__mark--morning { background: #E3B505; }
.avail__mark--night { background: #7B8CDE; }
.avail__mark--custom { background: #EDE4D0; }
.avail__week {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
  -webkit-overflow-scrolling: touch;
}
.avail__day {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 0 auto;
  min-width: 6.5rem;
  min-height: 7.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  border-radius: 16px;
  border: 1px solid var(--hairline-inv);
  padding: 10px 11px;
  background: rgba(245, 242, 235, 0.04);
  color: var(--paper-70);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
div.avail__day { cursor: default; }
.avail__day:hover { border-color: rgba(245, 242, 235, 0.4); }
.avail__day.is-on {
  border-color: #EDE4D0;
  box-shadow: 0 0 0 1px #EDE4D0;
}
.avail__day-name {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: inherit;
}
.avail__day-kind {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}
.avail__day-meta {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  opacity: 0.8;
}
.avail__day--off { background: rgba(245, 242, 235, 0.04); color: rgba(212, 207, 198, 0.6); border-color: rgba(245, 242, 235, 0.15); }
.avail__day--all-day { background: rgba(31, 157, 85, 0.12); color: #5EC98A; border-color: rgba(31, 157, 85, 0.35); }
.avail__day--morning { background: rgba(227, 181, 5, 0.1); color: #E3B505; border-color: rgba(227, 181, 5, 0.35); }
.avail__day--night { background: rgba(123, 140, 222, 0.12); color: #9AA8E8; border-color: rgba(123, 140, 222, 0.4); }
.avail__day--custom { background: rgba(237, 228, 208, 0.1); color: #EDE4D0; border-color: rgba(237, 228, 208, 0.4); }
.avail__edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(245, 242, 235, 0.1);
}
.avail__edit-name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--paper-70);
}
.avail__tiny {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(212, 207, 198, 0.4);
}
.avail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.avail__chip {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(245, 242, 235, 0.2);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font);
  color: var(--paper-70);
  background: transparent;
  cursor: pointer;
  transition: border-color 160ms var(--ease), color 160ms var(--ease), background 160ms var(--ease);
}
span.avail__chip { cursor: default; }
.avail__chip:hover { border-color: rgba(245, 242, 235, 0.4); color: var(--type); }
.avail__chip.is-on {
  border-color: rgba(138, 135, 255, 0.55);
  color: var(--type);
  background: rgba(138, 135, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.avail__hours {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.avail__hours input[type="time"] {
  color-scheme: dark;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--field-line);
  background: var(--field-bg);
  color: var(--type);
  padding: 0 12px;
  font-family: var(--font);
  font-size: 14px;
}
.avail__hours input[type="time"]:focus {
  outline: none;
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px var(--field-ring);
}
.avail__hours span { color: rgba(212, 207, 198, 0.45); font-size: 13px; }
.avail__note { margin-top: 4px; }
.avail__age {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-bright);
  min-height: 1em;
}
.fpv__body .avail { margin-top: 4px; }
.fpv__body .avail__day { min-width: 5.6rem; min-height: 6.4rem; }
@media (max-width: 560px) {
  .avail__day { min-width: 5.75rem; }
}

/* ============================================================
   MONTHLY CHECK — signal board (wellness) and lift instrument (strength).
   Same structure in Flow templates, offering aggregates, and account.
   ============================================================ */
.mc { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mc__head { display: flex; flex-direction: column; gap: 8px; }
.mc__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0;
}
.mc__title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--type);
  margin: 0;
}
.mc__lede {
  color: var(--paper-70);
  margin: 0;
  font-size: 14px;
  max-width: 52ch;
  line-height: 1.55;
}
.mc__when {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--type);
}
.mc__when b { font-weight: 700; }
.mc__badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--accent-bright);
  color: var(--accent-bright);
  border-radius: 999px;
  padding: 4px 10px;
}
.mc__badge.is-done {
  border-color: var(--ok);
  color: var(--ok);
}
.mc__board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.mc__board > .mc__tile:nth-child(4),
.mc__board > .mc__tile:nth-child(5) { grid-column: span 3; }
.mc__board:has(> .mc__tile:nth-child(4):last-child) > .mc__tile { grid-column: span 3; }
.mc__tile {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 148px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--field-line);
  background: rgba(245, 242, 235, 0.035);
}
.mc__tile.is-on {
  border-color: var(--accent-bright);
  background: rgba(138, 135, 255, 0.1);
  box-shadow: 0 0 0 1px var(--accent-bright);
}
.mc__k {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.mc__v {
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--type);
}
.mc__v small,
.mc__readout small,
.mc__lift small {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--paper-70);
  margin-left: 4px;
}
.mc__delta,
.mc__meta {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--paper-70);
}
.mc__delta.is-down { color: var(--ok); }
.mc__delta.is-up { color: var(--accent-bright); }
.mc__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.mc__chip {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font);
  color: var(--paper-70);
  background: transparent;
  cursor: pointer;
}
span.mc__chip { cursor: default; }
.mc__chip.is-on {
  border-color: var(--accent-bright);
  color: var(--type);
  background: rgba(138, 135, 255, 0.16);
}
.mc__dots,
.mc__pips {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.mc__pips { gap: 4px; }
.mc__dots i,
.mc__dot {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--field-line);
  cursor: pointer;
}
.mc__dots i { cursor: default; }
.mc__dots i.is-on,
.mc__dot.is-on { background: var(--accent-bright); }
.mc__pips i,
.mc__pip {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 0;
  height: 10px;
  min-width: 10px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: var(--field-line);
  cursor: pointer;
}
.mc__pips i { cursor: default; }
.mc__pips i.is-on,
.mc__pip.is-on { background: var(--accent); }
.mc__num {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.mc__num input {
  width: 5.5ch;
  background: transparent;
  border: 0;
  color: var(--type);
  font: inherit;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: -0.04em;
  padding: 0;
  min-height: 0;
}
.mc__num input:focus { outline: none; }
.mc__num small { font-size: 13px; color: var(--paper-70); font-weight: 700; }
.mc__lifts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.mc__lift {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  min-height: 88px;
  padding: 12px 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--field-line);
  background: rgba(245, 242, 235, 0.035);
  color: var(--type);
  font-family: var(--font);
  cursor: pointer;
}
div.mc__lift { cursor: default; }
.mc__lift.is-on {
  border-color: var(--accent-bright);
  background: rgba(138, 135, 255, 0.1);
  box-shadow: 0 0 0 1px var(--accent-bright);
}
.mc__lift span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.mc__lift b {
  font-size: 20px;
  letter-spacing: -0.03em;
}
.mc__lift em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--paper-70);
}
.mc__instrument {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--field-line);
  background: rgba(245, 242, 235, 0.03);
}
.mc__instrument.is-on {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 1px var(--accent-bright);
}
.mc__seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(245, 242, 235, 0.04);
}
.mc__seg-item {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 0;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--paper-70);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
span.mc__seg-item { display: grid; place-items: center; cursor: default; }
.mc__seg-item.is-on {
  color: var(--type);
  background: rgba(138, 135, 255, 0.22);
}
.mc__triad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.mc__field { display: flex; flex-direction: column; gap: 6px; }
.mc__field > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.mc__field b {
  font-size: 22px;
  letter-spacing: -0.03em;
  min-height: 46px;
  display: flex;
  align-items: center;
}
.mc__field input {
  width: 100%;
  min-height: 46px;
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  color: var(--type);
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
}
.mc__field input:focus {
  outline: none;
  border-color: var(--accent-bright);
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 3px var(--field-ring);
}
.mc__readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mc__readout div {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--field-line);
  background: rgba(245, 242, 235, 0.04);
}
.mc--glp { max-width: 960px; }
.mc-stack {
  margin: 8px 0 0;
  background: rgba(245, 242, 235, 0.05);
  border: 1px solid var(--field-line);
  border-radius: 16px;
  padding: 14px 12px 10px;
}
.mc-stack figcaption {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0 0 10px;
}
.mc-stack__svg { width: 100%; height: auto; display: block; }
.mc-stack__lean { fill: var(--accent); }
.mc-stack__fat { fill: #e8c458; }
.mc-stack__tick {
  fill: var(--paper-70);
  font-size: 11px;
  font-weight: 700;
}
.mc-stack__read {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mc-stack__unit {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mc-stack__read--fat { fill: #1c1914; }
.mc-stack__read--ffm { fill: #f5f2eb; }
.mc-stack__read--tot { fill: var(--type); }
.mc-stack__legend {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 12px;
  color: var(--paper-70);
  margin: 8px 0 0;
}
.mc-stack__legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
}
.mc-stack__legend i.is-lean { background: var(--accent); }
.mc-stack__legend i.is-fat { background: #e8c458; }
.mc-stack.is-empty { color: var(--paper-70); font-size: 13px; padding: 16px 0; }
.mc-stack-wrap.is-on {
  border: 1px solid var(--accent-bright);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 0 0 1px var(--accent-bright);
}
.mc-minis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.mc-minis > div {
  border: 1px solid var(--field-line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(245, 242, 235, 0.03);
  min-width: 0;
}
.mc-minis > div.is-on {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 1px var(--accent-bright);
}
.mc-mini .mc-glp__spark { height: 64px; }
.mc-glp__vsfirst {
  font-size: 13px;
  color: var(--paper-70);
  margin: 8px 0 12px;
}
.mc-glp__story .dash__btn { margin-top: 14px; }
.mc-glp__enter { margin-bottom: 8px; }
.mc-glp__formula {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--paper-70);
  margin: 12px 0 8px;
  font-variant-numeric: tabular-nums;
}
.mc-glp__protocol ol {
  margin: 8px 0 16px;
  padding-left: 18px;
  color: var(--paper-70);
  font-size: 13px;
  line-height: 1.5;
}
.mc-glp__protocol li { margin: 0 0 6px; }
.mc__delta.is-noise { color: var(--paper-70); }
.fpv__body .mc-glp__enter input,
.fpv__body .mc-glp__enter select,
.fpv__body .mc-glp__enter textarea {
  pointer-events: none;
}
.mc-glp__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.mc-glp__kpis > .mc__tile {
  grid-column: auto;
  min-height: 120px;
  border-color: transparent;
}
.mc-glp__kpis > .mc__tile:nth-child(1) {
  background: rgba(138, 135, 255, 0.28);
}
.mc-glp__kpis > .mc__tile:nth-child(2) {
  background: rgba(138, 135, 255, 0.20);
}
.mc-glp__kpis > .mc__tile:nth-child(3) {
  background: rgba(138, 135, 255, 0.12);
}
.mc-glp__kpis > .mc__tile:nth-child(4) {
  background: rgba(138, 135, 255, 0.06);
}
.mc-minis > div:nth-child(1) { background: rgba(138, 135, 255, 0.16); }
.mc-minis > div:nth-child(2) { background: rgba(138, 135, 255, 0.10); }
.mc-minis > div:nth-child(3) { background: rgba(138, 135, 255, 0.05); }
.mc-glp__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 16px;
  margin: 16px 0;
}
.mc-glp__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mc-glp__fields .mc__field:nth-child(1),
.mc-glp__fields .mc__field:nth-child(2) { grid-column: span 1; }
.mc-glp__banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  margin: 12px 0 0;
  border: 1px solid var(--field-line);
}
.mc-glp__banner b { font-size: 14px; }
.mc-glp__banner span { font-size: 13px; color: var(--paper-70); }
.mc-glp__banner.is-ok {
  border-color: rgba(90, 200, 140, 0.45);
  background: rgba(90, 200, 140, 0.12);
}
.mc-glp__banner.is-warn {
  border-color: rgba(232, 196, 88, 0.5);
  background: rgba(232, 196, 88, 0.1);
}
.mc-glp__banner.is-bad {
  border-color: rgba(255, 154, 154, 0.5);
  background: rgba(255, 154, 154, 0.1);
}
.mc-glp__banner.is-info {
  background: rgba(138, 135, 255, 0.1);
}
.mc-glp__chart-k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0 0 8px;
}
.mc-glp__spark {
  width: 100%;
  height: 96px;
  color: var(--accent-bright);
  display: block;
}
.mc-glp__spark text {
  fill: var(--type);
  font-size: 12px;
  font-weight: 700;
}
.mc-glp__spark.is-empty {
  height: auto;
  color: var(--paper-70);
  font-size: 13px;
  padding: 20px 0;
}
.mc-glp__loghead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 10px;
}
.mc-glp__loghead .mc__k { margin: 0; }
.mc-glp__logwrap { overflow-x: auto; }
.mc-glp__log {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mc-glp__log th,
.mc-glp__log td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hairline-inv);
  white-space: nowrap;
}
.mc-glp__log th {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.mc-glp__legal {
  font-size: 12px;
  color: var(--paper-70);
  margin: 12px 0 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed var(--field-line);
}
.mc-glp__legal b { color: var(--type); }
.mc-glp__protocol ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--paper-70);
  font-size: 14px;
  line-height: 1.55;
}
.mc-glp__protocol li { margin: 0 0 8px; }
.mc__field textarea {
  width: 100%;
  min-height: 72px;
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  color: var(--type);
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  resize: vertical;
}
.mc__field textarea:focus {
  outline: none;
  border-color: var(--accent-bright);
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 3px var(--field-ring);
}
.mc__field select {
  width: 100%;
  min-height: 46px;
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  color: var(--type);
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
}
.portal-card.mc-card--wide { max-width: 960px; }
@media (max-width: 860px) {
  .mc-glp__layout,
  .mc-glp__kpis,
  .mc-glp__fields,
  .mc-minis { grid-template-columns: 1fr 1fr; }
}
.mc__readout p {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.mc__readout strong {
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--type);
}
.mc-card { max-width: 820px; }
.mc > .btn,
.mc > .fpv__btn,
.mc-card .btn { align-self: flex-start; }

.mc__delta.is-gain { color: var(--ok); }
.mc__delta.is-drop { color: var(--warn); }

.mc-well__groups {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.mc-well__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-well__group > .mc__lede { max-width: 62ch; }
.mc__board--ready {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mc__board--load {
  grid-template-columns: 1fr 1fr;
}
.mc__board--ready:has(> .mc__tile:nth-child(4):last-child) > .mc__tile,
.mc__board--ready > .mc__tile,
.mc__board--load > .mc__tile {
  grid-column: auto;
  min-height: 168px;
}

.mc-str__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-str__row {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--field-line);
  background: rgba(245, 242, 235, 0.04);
}
.mc-str__row.is-on {
  background: color-mix(in srgb, var(--offer-strength) 12%, transparent);
}
.mc-str__name {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--type);
}
.mc-str__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 0.8fr)) minmax(0, 0.9fr) minmax(0, 0.9fr);
  gap: 10px;
  align-items: end;
}
.mc-str__est,
.mc-str__vol {
  min-height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
}
.mc-str__est p,
.mc-str__vol p {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.mc-str__est strong,
.mc-str__vol strong {
  font-size: 20px;
  letter-spacing: -0.03em;
  color: var(--type);
}
.mc-str__vol strong { color: var(--paper-70); font-size: 16px; }

.mc-dual {
  margin: 8px 0 0;
  background: rgba(245, 242, 235, 0.05);
  border: 1px solid var(--field-line);
  border-radius: 16px;
  padding: 14px 12px 10px;
}
.mc-dual figcaption {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0 0 10px;
}
.mc-dual__svg { width: 100%; height: auto; display: block; }
.mc-dual__ready { stroke: var(--offer-peak); }
.mc-dual__load { stroke: var(--paper-70); opacity: 0.85; }
.mc-stack__legend i.is-ready { background: var(--offer-peak); }
.mc-stack__legend i.is-load { background: var(--paper-70); }

.mc-minis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mc--str .mc-glp__kpis > .mc__tile:nth-child(1) {
  background: var(--offer-strength-fill);
}
.mc--str .mc-glp__kpis > .mc__tile:nth-child(2) {
  background: color-mix(in srgb, var(--offer-strength) 20%, transparent);
}
.mc--str .mc-glp__kpis > .mc__tile:nth-child(3) {
  background: color-mix(in srgb, var(--offer-strength) 12%, transparent);
}
.mc--str .mc-glp__kpis > .mc__tile:nth-child(4) {
  background: color-mix(in srgb, var(--offer-strength) 6%, transparent);
}
.mc--str .mc-glp__spark { color: var(--offer-strength); }
.mc--str .mc-glp__banner.is-info {
  background: color-mix(in srgb, var(--offer-strength) 12%, transparent);
}
.mc--peak .mc-glp__kpis > .mc__tile:nth-child(1) {
  background: var(--offer-peak-fill);
}
.mc--peak .mc-glp__kpis > .mc__tile:nth-child(2) {
  background: color-mix(in srgb, var(--offer-peak) 20%, transparent);
}
.mc--peak .mc-glp__kpis > .mc__tile:nth-child(3) {
  background: color-mix(in srgb, var(--offer-peak) 12%, transparent);
}
.mc--peak .mc-glp__kpis > .mc__tile:nth-child(4) {
  background: color-mix(in srgb, var(--offer-peak) 6%, transparent);
}
.mc--peak .mc-glp__spark { color: var(--offer-peak); }
.mc--peak .mc-glp__banner.is-info {
  background: color-mix(in srgb, var(--offer-peak) 12%, transparent);
}

@media (max-width: 860px) {
  .mc-str__grid,
  .mc-minis--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .mc__board--ready,
  .mc__board--load,
  .mc-str__grid,
  .mc-minis--4 { grid-template-columns: 1fr; }
}
.portal-card .mc p { margin-bottom: 0; }
.offer-agg .mc { gap: 20px; }
.offer-agg .mc__board { margin: 0; }
.mc__mix { display: flex; flex-direction: column; gap: 8px; }
.mc__mix > p {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0 0 4px;
}
.fpv__body .mc__tile { min-height: 132px; }
@media (max-width: 860px) {
  .mc__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc__tile,
  .mc__board > .mc__tile:nth-child(4),
  .mc__board > .mc__tile:nth-child(5),
  .mc__board:has(> .mc__tile:nth-child(4):last-child) > .mc__tile { grid-column: span 1; }
  .mc__lifts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .mc__board,
  .mc__readout,
  .mc__triad { grid-template-columns: 1fr; }
  .mc__lifts { grid-template-columns: 1fr 1fr; }
  .mc__lift { min-height: 72px; }
}

/* ============================================================
   STRENGTH INITIAL ASSESSMENT — Jupiter Fit Strength Program
   Matches Jupiter_Fit_Strength_Initial_Assessment.pdf
   ============================================================ */
.sia { display: flex; flex-direction: column; gap: 32px; max-width: none; }
.sia__brand {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.sia__brand span { color: var(--accent-bright); }
.sia__kicker {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: var(--paper-70);
}
.sia__h {
  margin: 0;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.sia__lede {
  margin: 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper-70);
}
.sia__id {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0;
  border: 0;
  background: none;
}
.sia__banner {
  margin: 0;
  padding: 4px 2px;
  background: none;
  color: var(--accent-bright);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sia__sec {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sia__mods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sia__mod,
.sia__q {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border: 0;
  border-radius: 16px;
  background: var(--field-bg);
}
.sia__ask {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--type);
}
.sia__num {
  flex: 0 0 auto;
  min-width: 1.2em;
  color: var(--accent-bright);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.45;
}
.sia__ask em { font-style: italic; color: var(--paper-70); font-weight: 500; }
.sia__hint {
  margin: 0;
  font-size: 13px;
  color: var(--paper-70);
}
.sia__q[data-ia-q^="skip-"] .sia__hint {
  padding: 0;
  border: 0;
  background: none;
}
.sia__note {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--type);
  font-size: 16px;
  line-height: 1.45;
  min-height: 0;
}
.sia__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sia__chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font);
  color: var(--paper-70);
  background: var(--field-bg);
  cursor: pointer;
}
span.sia__chip { cursor: default; }
.sia__chip input { position: absolute; opacity: 0; pointer-events: none; }
.sia__chip.is-on {
  color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.16);
}
.sia__field { display: flex; flex-direction: column; gap: 6px; }
.sia__field--narrow { max-width: 140px; }
.sia__field > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.sia__field input,
.sia textarea,
.sia input[type="text"],
.sia input[type="number"],
.sia input[type="date"] {
  width: 100%;
  min-height: 46px;
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  color: var(--type);
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
}
.sia textarea { min-height: 88px; resize: vertical; }
.sia__field input:focus,
.sia textarea:focus,
.sia input:focus {
  outline: none;
  border-color: var(--accent-bright);
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 3px var(--field-ring);
}
.sia textarea[hidden],
.sia input[hidden] { display: none !important; }
.sia__work {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sia__work > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-radius: 0;
  border: 0;
  background: none;
}
.sia__work span { color: var(--paper-70); font-size: 13px; font-weight: 700; }
.sia__work b { color: var(--type); }
.sia__work--live { grid-template-columns: 1fr; }
.sia__work-row {
  display: grid;
  grid-template-columns: 110px 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}
.sia__work-row span { font-size: 13px; font-weight: 700; color: var(--paper-70); }
.sia__x { color: var(--paper-70); }
.sia__scale { display: flex; gap: 4px; flex-wrap: wrap; }
.sia__scale i,
.sia__tick span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--field-radius);
  border: 0;
  background: var(--field-bg);
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  color: var(--paper-70);
}
.sia__scale i.is-on,
.sia__tick.is-on span {
  color: var(--accent-bright);
  background: rgba(91, 87, 240, 0.16);
}
.sia__answer {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--type);
}
.sia__meta {
  margin: 0;
  font-size: 14px;
  color: var(--paper-70);
}
.sia__work--read {
  background: none;
  border: 0;
  padding: 0;
  gap: 6px;
}
.sia__work--read > div {
  padding: 0;
  border: 0;
  background: none;
}
.sia__tick { cursor: pointer; }
.sia__tick input { position: absolute; opacity: 0; pointer-events: none; }
.sia__big {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.sia__big small { font-size: 13px; color: var(--paper-70); margin-left: 4px; }
.sia__actions { margin-top: 8px; }
.fpv__body .sia { pointer-events: none; }
@media (max-width: 720px) {
  .sia { gap: 22px; }
  .sia__id,
  .sia__work { grid-template-columns: 1fr; }
  .sia__work-row { grid-template-columns: 1fr; }
  .sia__mod,
  .sia__q { padding: 16px; }
  .sia__chip { width: 100%; justify-content: flex-start; }
  .sia__scale { gap: 6px; }
  .sia__tick span,
  .sia__scale i {
    width: 40px;
    height: 40px;
  }
  .sia__actions .btn { width: 100%; }
}
@media (max-width: 640px) {
  .sa { padding: 20px 16px 72px; }
  .sa__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .sa__saved { margin-left: 0; }
  .sa__tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sa__tab { white-space: nowrap; }
}

/* ============================================================
   MANAGER CALENDAR
   Week is the working view. Events are fills, never strokes.
   Kind is written on the chip — colour is a secondary cue.
   ============================================================ */
.cal {
  --cal-gutter: 64px;
  --cal-hours: 16;
  --cal-hour-h: 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.cal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
}
.cal-bar__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cal-bar__title {
  margin: 0 4px 0 8px;
  font-size: 22px;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.15;
}
.cal-bar__arrow {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--field-bg);
  color: var(--type);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.cal-bar__arrow:hover { background: var(--field-bg-focus); }
.cal-bar__arrow:focus-visible,
.cal-bar__view:focus-visible,
.cal-bar__layout:focus-visible,
.cal-bar__help:focus-visible,
.cal-week__hday:focus-visible,
.cal-chip:focus-visible,
.cal-event:focus-visible,
.cal-mini__day:focus-visible,
.cal-slots__btn:focus-visible,
.cal-month__num:focus-visible,
.cal-wait button:focus-visible {
  outline: 1px solid var(--accent-bright);
  outline-offset: 2px;
}
.cal-bar__views {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--field-bg);
}
.cal-bar__view,
.cal-bar__help {
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  color: var(--paper-70);
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
}
.cal-bar__view.is-on,
.cal-bar__help[aria-expanded="true"] {
  color: var(--type);
  background: rgba(245, 242, 235, 0.1);
}
.cal-bar__help { min-width: 44px; }
.cal-bar__layouts {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
}
.cal-bar__layout {
  font-family: var(--font);
  font-weight: 700;
  font-size: 12px;
  color: var(--paper-70);
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 6px 10px;
  min-height: 32px;
  cursor: pointer;
}
.cal-bar__layout.is-on {
  color: var(--type);
  background: var(--field-bg);
}
.cal-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.cal-offer-select {
  margin: 0;
  min-width: 220px;
  max-width: 280px;
}
.cal-offer-select select {
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}
.cal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-chip {
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  color: var(--paper-70);
  background: var(--field-bg);
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 40px;
  cursor: pointer;
}
.cal-chip.is-on {
  color: var(--type);
  background: rgba(138, 135, 255, 0.18);
}
.cal__stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: calc(100dvh - 36rem);
  min-height: 480px;
}
.cal__board {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 16px;
  min-height: 0;
  height: 100%;
  min-width: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.cal-session {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 920px;
}
.cal-session__back { align-self: flex-start; }
.cal-session .cal-side__event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  grid-template-rows: auto auto;
  gap: 8px 28px;
  background: var(--card);
  border-radius: 16px;
  padding: 22px 22px 18px;
  min-height: 0;
  height: auto;
}
.cal-session .cal-side__head { grid-column: 1; grid-row: 1; }
.cal-session .cal-side__move {
  grid-column: 2;
  grid-row: 1 / span 2;
  overflow: visible;
  padding-right: 0;
}
.cal-session .cal-side__acts { grid-column: 1; grid-row: 2; }
.cal-wait-strip {
  margin-top: 18px;
  background: var(--card);
  border-radius: 16px;
  padding: 16px 18px;
}
.cal-side__event {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  min-height: 0;
}
.cal-side__head { flex: 0 0 auto; }
.cal-side__move {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}
.cal-side__k {
  margin: 18px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.cal-side__empty .cal-side__k:first-child,
.cal-side__event .cal-side__k:first-child { margin-top: 0; }
.cal-side__empty h2,
.cal-side__event h2 {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.cal-side__hint,
.cal-side__meta {
  margin: 0 0 16px;
  color: var(--paper-70);
  font-size: 14px;
  line-height: 1.5;
}
.cal-side__when {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 700;
}
.cal-side__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-side__warn {
  margin: 12px 0 0;
  color: var(--warn);
  font-size: 14px;
  line-height: 1.45;
}
.cal-side__acts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  flex: 0 0 auto;
}
.cal-side__save {
  width: 100%;
  margin-top: 14px;
}
.cal-side__acts .btn,
.cal-side__acts .dash__btn { width: 100%; }
.cal-face {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--field-bg);
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 44px;
}
.cal-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-side__event > .cal-face { width: 56px; height: 56px; margin-bottom: 12px; font-size: 16px; }

.cal-week {
  min-width: 720px;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 100%;
  width: 100%;
}
.cal-week__head,
.cal-week__cols {
  display: grid;
  grid-template-columns: var(--cal-gutter) repeat(7, minmax(0, 1fr));
}
.cal-week__head {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--card);
  padding: 12px 0 10px;
  box-shadow: inset 0 -1px 0 var(--hairline-inv);
}
.cal-week__hday {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 0 0 2px;
  border: 0;
  background: transparent;
  font-family: var(--font);
  color: var(--paper-70);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 1px 0 0 var(--hairline-inv);
}
.cal-week__hday strong {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 16px;
  letter-spacing: -0.03em;
  color: var(--type);
  border-radius: 50%;
}
.cal-week__hday.is-today strong {
  background: rgba(138, 135, 255, 0.22);
  color: var(--accent-bright);
}
.cal-week__body {
  position: relative;
  flex: 1 0 auto;
  min-height: calc(var(--cal-hours) * var(--cal-hour-h));
}
.cal-week__cols {
  position: relative;
  z-index: 2;
  min-height: calc(var(--cal-hours) * var(--cal-hour-h));
  height: 100%;
}
.cal-week__gutter--hours,
.cal-week__col,
.cal-day__gutter,
.cal-day__col { position: relative; }
.cal-week__col {
  box-shadow: inset 1px 0 0 var(--hairline-inv);
}
.cal-week__col.is-today,
.cal-day.is-today .cal-day__col {
  background-color: rgba(138, 135, 255, 0.04);
}
.cal-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.cal-line {
  position: absolute;
  left: var(--cal-gutter);
  right: 0;
  height: 1px;
  background: var(--hairline-inv);
}
.cal-hour {
  position: absolute;
  left: 0;
  right: 8px;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--paper-70);
  text-align: right;
  z-index: 3;
  pointer-events: none;
}
.cal-hour:first-child { transform: translateY(0.2em); }
.cal-hour:last-child { transform: translateY(-100%); }
.cal-slot {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: calc(100% / var(--cal-hours));
  border: 0;
  background: transparent;
  cursor: pointer;
}
.cal-slot:hover { background: rgba(245, 242, 235, 0.05); }
.cal-now {
  position: absolute;
  left: var(--cal-gutter);
  right: 0;
  z-index: 6;
  height: 1px;
  background: var(--accent-bright);
  pointer-events: none;
}
.cal-now::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-bright);
  transform: translate(-50%, -50%);
}
.cal-event {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: rgba(245, 242, 235, 0.12);
  color: var(--type);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  font-family: var(--font);
  container-type: size;
}
.cal-event.is-done { opacity: 0.45; }
.cal-event.is-on { box-shadow: 0 0 0 1px var(--accent-bright); }
.cal-event.offer-fill--glp1 { background: var(--offer-glp1-fill); }
.cal-event.offer-fill--strength { background: var(--offer-strength-fill); }
.cal-event.offer-fill--peak { background: var(--offer-peak-fill); }
.cal-event.offer-fill--neuralxp { background: var(--offer-neuralxp-fill); }
.cal-event.offer-fill--breakpoint { background: var(--offer-breakpoint-fill); }
.cal-event.offer-fill--group { background: var(--offer-group-fill); }
.cal-event.offer-fill--glp1.is-on { box-shadow: 0 0 0 1px var(--offer-glp1); }
.cal-event.offer-fill--strength.is-on { box-shadow: 0 0 0 1px var(--offer-strength); }
.cal-event.offer-fill--peak.is-on { box-shadow: 0 0 0 1px var(--offer-peak); }
.cal-event.offer-fill--neuralxp.is-on { box-shadow: 0 0 0 1px var(--offer-neuralxp); }
.cal-event.offer-fill--breakpoint.is-on { box-shadow: 0 0 0 1px var(--offer-breakpoint); }
.cal-event.offer-fill--group.is-on { box-shadow: 0 0 0 1px var(--offer-group); }
.cal-chip.offer-chip--glp1.is-on { background: var(--offer-glp1-fill); color: var(--type); }
.cal-chip.offer-chip--strength.is-on { background: var(--offer-strength-fill); color: var(--type); }
.cal-chip.offer-chip--peak.is-on { background: var(--offer-peak-fill); color: var(--type); }
.cal-chip.offer-chip--neuralxp.is-on { background: var(--offer-neuralxp-fill); color: var(--type); }
.cal-chip.offer-chip--breakpoint.is-on { background: var(--offer-breakpoint-fill); color: var(--type); }
.cal-chip.offer-chip--group.is-on { background: var(--offer-group-fill); color: var(--type); }
.cal-chip.offer-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cal-event.is-dragging { opacity: 0.35; }
.cal-event.is-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  pointer-events: none;
  margin: 0;
  transform: translate(-40px, -12px);
}
.cal-event__time {
  font-size: 11px;
  font-weight: 700;
  color: var(--paper-70);
}
.cal-event__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  min-width: 0;
  max-width: 100%;
}
.cal-event__marquee { display: block; min-width: 0; }
.cal-event__marquee span:last-child { display: none; }
.cal-event__kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-70);
}
@container (max-height: 54px) {
  .cal-event__kind { display: none; }
}
@container (max-height: 38px) {
  .cal-event {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
  }
  .cal-event__kind { display: none; }
  .cal-event__name {
    flex: 1;
    overflow: hidden;
  }
  .cal-event__marquee {
    display: inline-flex;
    width: max-content;
    animation: cal-marquee 9s linear infinite;
  }
  .cal-event__marquee span {
    flex: 0 0 auto;
    padding-right: 1.5em;
    white-space: nowrap;
  }
  .cal-event__marquee span:last-child { display: inline; }
}
@keyframes cal-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.cal-month {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  height: 100%;
  min-height: 100%;
  width: 100%;
  padding: 0;
}
.cal-month__dows,
.cal-month__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-month__dows {
  flex: 0 0 auto;
  color: var(--paper-70);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: inset 0 -1px 0 var(--hairline-inv);
}
.cal-month__dows span {
  padding: 12px 0 10px;
  box-shadow: inset 1px 0 0 var(--hairline-inv);
}
.cal-month__dows span:first-child { box-shadow: none; }
.cal-month__grid {
  flex: 1;
  min-height: 0;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  box-shadow: inset -1px 0 0 var(--hairline-inv), inset 0 -1px 0 var(--hairline-inv);
}
.cal-month__cell {
  min-height: 0;
  padding: 6px 4px 8px;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  box-shadow: inset 1px 1px 0 0 var(--hairline-inv);
}
.cal-month__cell.is-out { opacity: 0.4; }
.cal-month__cell.is-today { background: rgba(138, 135, 255, 0.06); }
.cal-month__num {
  align-self: flex-end;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--type);
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.cal-month__cell.is-today .cal-month__num {
  background: rgba(138, 135, 255, 0.22);
  color: var(--accent-bright);
}
.cal-month .cal-event {
  position: static;
  margin: 0;
  padding: 4px 8px;
  min-height: 28px;
  width: auto;
  left: auto;
  flex-direction: row;
  gap: 6px;
  cursor: pointer;
}
.cal-month__more {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--paper-70);
  padding: 0 6px;
}

.cal-day {
  position: relative;
  flex: 1 0 auto;
  width: 100%;
  min-height: calc(var(--cal-hours) * var(--cal-hour-h));
  height: 100%;
  box-shadow: inset 0 1px 0 var(--hairline-inv);
}
.cal-day__cols {
  display: grid;
  grid-template-columns: var(--cal-gutter) minmax(0, 1fr);
  position: relative;
  z-index: 2;
  min-height: calc(var(--cal-hours) * var(--cal-hour-h));
  height: 100%;
}
.cal-day__col {
  box-shadow: inset 1px 0 0 var(--hairline-inv);
}
.cal-agenda {
  padding: 12px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 34rem;
}
.cal-agenda__day h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.cal-agenda__row {
  position: static;
  display: grid;
  grid-template-columns: 7.75rem minmax(0, 1fr);
  align-items: center;
  gap: 8px 14px;
  width: 100%;
  max-width: 34rem;
  margin: 0 0 8px;
  padding: 10px 14px;
  min-height: 56px;
  cursor: pointer;
  overflow: visible;
  container-type: normal;
  flex-direction: row;
}
.cal-agenda__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.cal-agenda__copy strong {
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.cal-agenda__copy em {
  font-style: normal;
  font-size: 13px;
  color: var(--paper-70);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-agenda__when {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  text-align: left;
}
.cal-empty {
  margin: 0;
  padding: 48px 24px;
  text-align: center;
  color: var(--paper-70);
}

.cal-wait { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cal-wait button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 12px;
  background: var(--field-bg);
  color: var(--type);
  padding: 10px 12px;
  min-height: 56px;
  cursor: pointer;
  font-family: var(--font);
}
.cal-wait button:hover { background: var(--field-bg-focus); }
.cal-wait span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-wait strong { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.cal-wait em { font-style: normal; font-size: 13px; color: var(--paper-70); }

.cal-mini__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.cal-mini__nav p { margin: 0; font-size: 14px; font-weight: 700; }
.cal-mini__nav button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--type);
  cursor: pointer;
}
.cal-mini__dows,
.cal-mini__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}
.cal-mini__dows {
  color: var(--paper-70);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 4px;
}
.cal-mini__day {
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--type);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.cal-mini__day.is-out { color: var(--paper-70); opacity: 0.45; }
.cal-mini__day.is-today { color: var(--accent-bright); }
.cal-mini__day.is-on { background: rgba(138, 135, 255, 0.22); color: var(--type); }
.cal-mini__day.is-busy::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin: 1px auto 0;
  border-radius: 50%;
  background: var(--accent-bright);
}
.cal-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0 16px;
  max-height: 180px;
  overflow: auto;
}
.cal-slots__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--type);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.cal-slots__btn small { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-70); }
.cal-slots__btn.is-on { background: rgba(138, 135, 255, 0.22); }
.cal-slots__btn.is-busy { opacity: 0.55; }
.cal__side .field { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; }
.cal__side .field span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.cal__side .field input,
.cal__side .field select {
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  color: var(--type);
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  min-height: 46px;
}
.cal__side .field input:focus,
.cal__side .field select:focus {
  outline: none;
  border-color: var(--accent-bright);
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 3px var(--field-ring);
}
.cal-help {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 30;
  background: var(--card);
  border-radius: 16px;
  padding: 16px 18px;
  display: grid;
  gap: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.cal-help p { margin: 0; font-size: 13px; color: var(--paper-70); }
.cal-help kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--field-bg);
  color: var(--type);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .cal-event { transition: none; }
  .cal-event__marquee { animation: none; }
  .cal-event__marquee span:last-child { display: none; }
  .cal-event__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 1100px) {
  .cal__stage {
    height: auto;
    min-height: 0;
  }
  .cal__board {
    height: min(68dvh, 720px);
    min-height: 360px;
  }
  .cal-help {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
  .cal-session .cal-side__event {
    grid-template-columns: 1fr;
  }
  .cal-session .cal-side__head,
  .cal-session .cal-side__move,
  .cal-session .cal-side__acts {
    grid-column: auto;
    grid-row: auto;
  }
}
@media (max-width: 720px) {
  .cal { --cal-gutter: 52px; --cal-hour-h: 48px; gap: 12px; }
  .cal-bar { gap: 10px 12px; }
  .cal-bar__title {
    font-size: 16px;
    margin: 0 2px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cal-bar__views {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .cal-bar__view { flex: 0 0 auto; }
  .cal-week { min-width: calc(var(--cal-gutter) + (7 * 96px)); }
  .cal-week .cal-event { padding: 4px 6px; border-radius: 6px; }
  .cal-week .cal-event__kind { display: none; }
  .cal-week .cal-event__time { font-size: 10px; }
  .cal-week .cal-event__name { font-size: 12px; }
  .cal-week__hday strong {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .cal-month__num {
    width: 44px;
    height: 44px;
    font-size: 14px;
  }
  .cal-month .cal-event { min-height: 24px; padding: 3px 6px; }
  .cal-month .cal-event__time { display: none; }
  .cal-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cal-event--class .cal-event__kind { letter-spacing: 0.04em; }
.cal-event--class.offer-fill--breakpoint {
  background:
    repeating-linear-gradient(-45deg, transparent 0 5px, rgba(13, 13, 13, 0.22) 5px 6px),
    var(--offer-breakpoint-fill);
}
.cal-event--class.offer-fill--group {
  background:
    repeating-linear-gradient(-45deg, transparent 0 5px, rgba(13, 13, 13, 0.22) 5px 6px),
    var(--offer-group-fill);
}

.bp-class {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 0 28px;
  padding: 0;
  background: transparent;
}
.bp-class > .set-card { gap: 16px; }
.bp-class > .set-card > .set-card__head {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}
.bp-class .set-card .set-card {
  background: var(--card);
}
.bp-class__times {
  padding: 14px 16px;
  max-width: 640px;
}
.bp-class__head .mc__title { margin: 0 0 6px; }
.bp-class__week,
.bp-class__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.bp-class__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bp-class__week .btn,
.bp-class__week .dash__btn { align-self: flex-start; white-space: nowrap; }
.bp-class__week .btn[disabled],
.bp-class__week .dash__btn[disabled] {
  opacity: 0.4;
  cursor: default;
}
.bp-class__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bp-class__meet {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}
.bp-class__clock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bp-class__pair .mc__field { gap: 8px; }
.bp-class:not(.is-unlocked) [data-bp-day],
.bp-class:not(.is-unlocked) [data-bp-time] {
  color: var(--paper-70);
  cursor: pointer;
}
.bp-class [data-bp-end] {
  color: var(--paper-70);
  cursor: default;
}
.bp-class__pair select,
.bp-class__pair input[type="time"],
.bp-class__move input {
  width: 100%;
  min-height: 40px;
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  color: var(--type);
  font: inherit;
  font-size: 16px;
  padding: 8px 10px;
}
.bp-class__pair input[type="time"][readonly] {
  color: var(--paper-70);
  cursor: pointer;
}
.bp-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bp-dialog[hidden] { display: none !important; }
.bp-dialog__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(8, 8, 8, 0.62);
  cursor: pointer;
}
.bp-dialog__card {
  position: relative;
  width: min(400px, 100%);
  padding: 20px;
  border-radius: 16px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bp-dialog__card--wide {
  width: min(640px, 100%);
  max-height: min(80vh, 720px);
  overflow: auto;
}
.bp-class__tabs {
  margin: 0;
  max-width: none;
}
.bp-class__tabs .dash__count {
  margin-left: 6px;
}
.bp-dialog__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bp-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-70);
  background: #2a2a2e;
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  min-height: 34px;
  cursor: pointer;
}
.bp-dialog__close:hover { color: var(--type); }
[data-offer-pass-dialog] .bp-dialog__card,
[data-bp-dialog="pass"] .bp-dialog__card {
  gap: 18px;
  padding: 22px 20px 20px;
}
[data-offer-pass-dialog] .set-card__eyebrow,
[data-bp-dialog="pass"] .set-card__eyebrow {
  padding-right: 72px;
  margin: 0;
}
[data-offer-pass-dialog] .set-card__lede,
[data-bp-dialog="pass"] .set-card__lede { margin: 0; }
[data-offer-pass-form],
[data-bp-pass-form] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
[data-offer-pass-form] .dash__btn,
[data-bp-pass-form] .dash__btn {
  align-self: flex-start;
  width: auto;
  min-height: 36px;
  padding: 8px 14px;
  font-size: 13px;
}
.bp-dialog__card .field { display: flex; flex-direction: column; gap: 8px; }
.bp-dialog__card input[type="password"] {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--field-radius);
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  color: var(--type);
  font: inherit;
}
.bp-class__line {
  margin: 0;
  font-size: 14px;
  color: var(--paper-70);
}
.group-card {
  padding: 18px 16px;
  border-radius: 16px;
  border: 0;
  background: var(--card);
  margin: 0 0 14px;
}
.group-card--summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.group-card--summary .mc__kicker { grid-column: 1; }
.group-card--summary .mc__title {
  grid-column: 1;
  font-size: 22px;
}
.group-card--summary .group-card__ready {
  grid-column: 1;
  font-size: 14px;
  color: var(--paper-70);
}
.group-card--summary .group-card__ready strong { color: var(--type); }
.group-card--summary .dash__pill {
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-self: end;
}
.group-detail { display: flex; flex-direction: column; gap: 12px; }
.group-detail .dash__btn { align-self: flex-start; }
[data-group-room] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 52rem;
}
.group-room__back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0 0 32px;
  min-height: 44px;
  padding: 10px 16px;
}
[data-group-room] .dash__head { margin: 0; }
[data-group-room] .dash__hello { margin-bottom: 20px; }
.group-room__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  margin: 32px 0 8px;
}
.group-room__acts .dash__btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 16px;
}
.group-room__acts .dash__btn[disabled] { cursor: default; }
.group-room__acts [hidden] { display: none !important; }
.group-room__acts-note {
  margin: 32px 0 8px;
  font-size: 14px;
  color: var(--paper-70);
}
.group-room__pick-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--paper-70);
  cursor: pointer;
}
.group-room__manager {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}
.group-room__manager em {
  font-style: normal;
  font-weight: 500;
  color: var(--paper-70);
}
.group-room__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-width: 52rem;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
}
.group-row {
  display: grid;
  grid-template-columns: 2.75rem 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 16px;
  min-height: 56px;
}
.group-row__pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -6px 0;
  cursor: pointer;
}
.group-row__pick input {
  width: 20px;
  height: 20px;
}
.group-row.is-alt { background: rgba(245, 242, 235, 0.04); }
.group-row.is-pending .group-row__who { color: var(--paper-70); }
.group-row__n {
  font-size: 13px;
  font-weight: 700;
  color: var(--paper-70);
  font-variant-numeric: tabular-nums;
}
.group-row__who { min-width: 0; font-size: 15px; font-weight: 700; }
.group-row__who em {
  font-style: normal;
  font-weight: 500;
  color: var(--paper-70);
  font-size: 12px;
  margin-left: 6px;
}
.group-card__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-width: 52rem;
  border-radius: 16px;
  overflow: hidden;
}
.group-track {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.group-track__bit {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(245, 242, 235, 0.06);
  color: var(--paper-70);
}
.group-track__bit.is-on {
  background: rgba(138, 135, 255, 0.2);
  color: var(--type);
}
.member-sheet__choice {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.member-sheet__choice legend {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0 0 8px;
  padding: 0;
}
.member-sheet__choice label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: #1c1c1f;
  font-size: 15px;
  cursor: pointer;
}
[data-member-guest-join] {
  margin: 0 0 12px;
}
[data-member-group-extra] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 8px;
}
[data-member-group-extra][hidden] { display: none !important; }
[data-member-group-extra] textarea {
  min-height: 96px;
  resize: vertical;
}
.member-sheet__meet {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #1c1c1f;
  font-size: 14px;
  line-height: 1.5;
  color: var(--type);
}
.bp-class__months {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  align-items: stretch;
}
.bp-class__month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.bp-month {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 18px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bp-month:hover,
.bp-month:focus-visible {
  background: color-mix(in srgb, var(--card) 86%, var(--offer-breakpoint) 14%);
}
.bp-month p {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin: 0 0 8px;
}
.bp-month strong {
  display: block;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.03em;
  font-weight: 700;
}
.bp-class [data-bp-month-back] { align-self: flex-start; }
.bp-class__occ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(13, 13, 13, 0.28);
}
.bp-class__occ.is-off { opacity: 0.65; }
.bp-class__when {
  margin: 0 0 4px;
  font-weight: 700;
}
.bp-class__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.bp-class__move {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.bp-class__tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--paper-70);
}
.bp-class__tag.is-off { color: var(--warn); }
.bp-class__tag.is-moved { color: var(--offer-breakpoint); }
.bp-class__err { color: var(--warn); margin: 0; }
.bp-class__ok { color: var(--ok); margin: 0; }
@media (max-width: 900px) {
  .bp-class__month-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .bp-class__pair { grid-template-columns: 1fr; }
}

/* ============================================================
   MANAGER AVAILABILITY
   Weekly hours on a seven-day board. Exceptions are dates.
   ============================================================ */
.desk-avail {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.desk-avail__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 20px;
}
.desk-avail__who {
  margin: 0 auto 0 0;
  color: var(--paper-70);
  font-size: 14px;
  padding-bottom: 10px;
}
.desk-avail__bar .btn[disabled] {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}
.desk-avail__slot { min-width: 140px; margin: 0; }
.desk-avail__slot span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
  margin-bottom: 8px;
}
.desk-avail__slot select,
.desk-edit select,
.desk-ex select,
.desk-ex input[type="date"],
.desk-ex input[type="text"] {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  color: var(--type);
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  min-height: 46px;
}
.desk-avail__slot select:focus,
.desk-edit select:focus,
.desk-ex select:focus,
.desk-ex input:focus {
  outline: none;
  border-color: var(--accent-bright);
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 3px var(--field-ring);
}
.desk-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}
.desk-week__day {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  padding: 14px 10px 12px;
  border: 0;
  border-radius: 16px;
  background: var(--card);
  color: var(--type);
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
}
.desk-week__day:hover { background: rgba(245, 242, 235, 0.06); }
.desk-week__day.is-on {
  box-shadow: 0 0 0 2px var(--accent-bright);
}
.desk-week__day.is-off { opacity: 0.72; }
.desk-week__day:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.desk-week__name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.desk-week__track {
  position: relative;
  flex: 1;
  min-height: 120px;
  border-radius: 10px;
  background: var(--field-bg);
  overflow: hidden;
}
.desk-week__block {
  position: absolute;
  left: 6px;
  right: 6px;
  border-radius: 8px;
  background: rgba(138, 135, 255, 0.38);
}
.desk-week__block.is-blocked {
  background: color-mix(in srgb, var(--stage-paused) 72%, transparent);
  z-index: 1;
}
.desk-week__meta {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--type);
}
.desk-week__day.is-off .desk-week__meta { color: var(--paper-70); }
.desk-avail__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.desk-edit,
.desk-ex {
  background: var(--card);
  border-radius: 16px;
  padding: 22px 20px;
}
.desk-edit__k {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.desk-edit h3,
.desk-ex h3 {
  margin: 0 0 16px;
  font-size: 22px;
  letter-spacing: -0.03em;
}
.desk-edit__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.desk-edit__hint {
  margin: 0 0 18px;
  color: var(--paper-70);
  font-size: 14px;
  line-height: 1.5;
  max-width: 46ch;
}
.desk-edit__range {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  margin: 0 0 16px;
}
.desk-edit .field { display: flex; flex-direction: column; gap: 8px; }
.desk-edit .field span,
.desk-ex .field span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
}
.desk-edit__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.desk-ex__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  margin: 0 0 22px;
  align-items: end;
}
.desk-ex__note,
.desk-ex__form .btn { grid-column: 1 / -1; }
.desk-ex .field { display: flex; flex-direction: column; gap: 8px; }
.desk-ex__list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.desk-ex__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--field-bg);
}
.desk-ex__list strong { display: block; font-size: 15px; }
.desk-ex__list span { display: block; color: var(--paper-70); font-size: 13px; margin-top: 2px; }
.desk-ex__list li.is-block {
  background: var(--stage-paused-fill);
}
.desk-ex__list li.is-block span { color: var(--stage-paused); }
@media (max-width: 900px) {
  .desk-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .desk-avail__split,
  .desk-edit__range,
  .desk-ex__form { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .desk-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Closed dates — holidays + custom all-day blocks */
.desk-closed {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.desk-closed__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.desk-closed__split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.desk-closed__us h3,
.desk-closed__custom h3 { margin-bottom: 10px; }
.desk-closed__year-pack { margin: 18px 0 0; }
.desk-closed__year-pack:first-child { margin-top: 4px; }
.desk-closed__holidays {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
}
.desk-closed__holidays li {
  border-radius: 12px;
  background: var(--field-bg);
}
.desk-closed__holidays li.is-on {
  background: var(--stage-paused-fill);
}
.desk-closed__holidays li.is-past { opacity: 0.62; }
.desk-closed__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  min-height: 52px;
  cursor: pointer;
}
.desk-closed__check input { margin-top: 3px; }
.desk-closed__check span { min-width: 0; display: block; }
.desk-closed__check strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
}
.desk-closed__check em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 13px;
  color: var(--paper-70);
}
.desk-closed__holidays li.is-on .desk-closed__check em { color: var(--stage-paused); }
.desk-closed__form { grid-template-columns: 1fr; }
.desk-closed__year {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: var(--type);
}
.desk-ex input[type="date"],
.desk-closed input[type="text"] {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--field-radius);
  color: var(--type);
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  min-height: 46px;
}
.cal-closed {
  position: absolute;
  top: 8px;
  left: 6px;
  right: 6px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--stage-paused-fill);
  color: var(--stage-paused);
  pointer-events: none;
}
.cal-closed span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cal-closed strong {
  font-size: 12px;
  letter-spacing: -0.02em;
  color: var(--type);
}
.cal-week__col.is-closed,
.cal-day.is-closed .cal-day__col {
  background-color: color-mix(in srgb, var(--stage-paused) 8%, transparent);
}
.cal-week__col.is-today.is-closed,
.cal-day.is-today.is-closed .cal-day__col {
  background-color: color-mix(in srgb, var(--stage-paused) 10%, rgba(138, 135, 255, 0.04));
}
.cal-event--closed {
  background: var(--stage-paused-fill);
  color: var(--type);
}
.cal-month .cal-event--closed .cal-event__time { display: none; }
@media (max-width: 900px) {
  .desk-closed__split { grid-template-columns: 1fr; }
}

/* ---- member dashboard ---------------------------------------------------
   The member's home used to be two stacked definition lists: their own name
   above the thing they actually came for. Hierarchy is now next-action first,
   facts second, programme detail third. Tokens only — the offering's own hue
   comes in through --mem-hue so a Strength member's home does not look
   identical to a Neural XP member's. */
.mem-dash { display: flex; flex-direction: column; gap: 16px; }

.mem-next {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--hairline-inv);
  overflow: hidden;
}
/* A hairline of the offering's colour down the leading edge — enough to place
   the member in their programme without tinting the whole surface. */
.mem-next::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--mem-hue, var(--accent));
}
.mem-next__copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mem-next__kicker {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-70); margin: 0;
}
.mem-next__title {
  font-size: clamp(21px, 2.8vw, 28px); font-weight: 700;
  letter-spacing: -0.02em; color: var(--type); margin: 0;
}
.mem-next__note { color: var(--paper-70); font-size: 14px; margin: 0; max-width: 56ch; line-height: 1.6; }
.mem-next__act { display: flex; gap: 10px; flex-wrap: wrap; }

.mem-stats {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.mem-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px 18px;
  border-radius: var(--field-radius);
  background: var(--field-bg);
  border: 1px solid var(--field-line);
}
.mem-stat__k {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-70);
}
.mem-stat__v { font-size: 17px; font-weight: 600; color: var(--type); line-height: 1.35; }
.mem-stat__sub { font-size: 12.5px; color: var(--paper-70); }

.mem-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid var(--hairline-inv); color: var(--paper-70);
}
.mem-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.mem-chip--ok { color: var(--ok); border-color: var(--ok); }
.mem-chip--warn { color: var(--warn); border-color: var(--warn); }
.mem-chip--pending { color: var(--pending); border-color: var(--field-line-strong); }

.mem-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mem-head__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mem-hue, var(--accent)); flex: none; }

@media (max-width: 600px) {
  .mem-next { align-items: flex-start; }
  .mem-next__act { width: 100%; }
  .mem-next__act .dash__btn { flex: 1 1 auto; }
}

/* .dash__card sets display:grid, which outranks the hidden attribute — the
   retired identity list stayed on screen under the new stat strip. */
.dash__card[hidden] { display: none; }

/* .portal-card caps at 640px, which is right for a single onboarding form but
   leaves the dashboard's cards stranded beside a full-width stat strip. Inside
   the dashboard they run the column; the measure cap moves to the prose. */
.mem-dash .portal-card { max-width: none; }
.mem-dash .portal-card > p { max-width: 62ch; }

/* ---- performance charts -------------------------------------------------
   Marks stay thin and the grid recedes, so the data is the loudest thing in
   the frame. Text wears text tokens throughout; the coloured mark beside a
   label is what carries identity. */
.perf { display: flex; flex-direction: column; gap: 16px; }

.perf-tiles {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.perf-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 16px 18px; border-radius: var(--field-radius);
  background: var(--field-bg); border: 1px solid var(--field-line);
}
.perf-tile__k {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-70);
}
.perf-tile__v {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--type);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.perf-tile__v small { font-size: 13px; font-weight: 600; color: var(--paper-70); letter-spacing: 0; }
.perf-tile__d { font-size: 12.5px; color: var(--paper-70); font-variant-numeric: tabular-nums; }
.perf-tile__d.is-good { color: var(--ok); }
.perf-tile__d.is-watch { color: var(--pending); }

.perf-card {
  background: var(--card); border-radius: var(--radius);
  padding: clamp(18px, 2.2vw, 26px);
  display: flex; flex-direction: column; gap: 14px;
}
.perf-card__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.perf-card__head h3 {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--type); margin: 0;
}
.perf-card__note { font-size: 13px; color: var(--paper-70); margin: 0; max-width: 62ch; line-height: 1.55; }
.perf-card__toggle { margin-left: auto; }
.perf-card__foot { font-size: 12.5px; color: var(--paper-70); margin: 0; }

.perf-chart { position: relative; }
.perf-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.perf-grid { stroke: var(--field-line); stroke-width: 1; }
.perf-axis { font-size: 11px; fill: var(--paper-70); font-variant-numeric: tabular-nums; }
.perf-endlabel { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.perf-cross { stroke: var(--field-line-strong); stroke-width: 1; stroke-dasharray: 3 4; }

.perf-tip {
  position: absolute; z-index: 3; pointer-events: none;
  transform: translate(-50%, -8px); opacity: 0;
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 12px; border-radius: var(--field-radius);
  background: var(--bg); border: 1px solid var(--field-line-strong);
  font-size: 12.5px; color: var(--type); white-space: nowrap;
  transition: opacity 0.12s ease;
}
.perf-tip.is-on { opacity: 1; }
.perf-tip__when {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-70);
}
.perf-tip__row { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.perf-tip__row i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.perf-tip__row b { margin-left: auto; padding-left: 14px; font-weight: 700; }

.perf-legend { display: flex; flex-wrap: wrap; gap: 16px; }
.perf-legend span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--paper-70);
}
.perf-legend i { width: 14px; height: 3px; border-radius: 2px; flex: none; }

.perf-table { overflow-x: auto; }
.perf-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.perf-table th, .perf-table td {
  text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--field-line);
  font-variant-numeric: tabular-nums; color: var(--type);
}
.perf-table thead th { color: var(--paper-70); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.perf-table th[scope="row"] { text-align: left; color: var(--paper-70); font-weight: 500; }

.perf-multiples {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.perf-multiple {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px; border-radius: var(--field-radius);
  background: var(--field-bg); border: 1px solid var(--field-line);
}
.perf-multiple--wide { grid-column: 1 / -1; }
.perf-multiple__k { font-size: 13px; font-weight: 600; color: var(--type); }
.perf-multiple__hint {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-70);
  margin-bottom: 6px;
}

.perf-empty {
  padding: 22px; border-radius: var(--field-radius);
  background: var(--field-bg); border: 1px dashed var(--field-line-strong);
  color: var(--paper-70); font-size: 14px; line-height: 1.6;
}

/* Third time this has bitten: a class that sets `display` outranks the hidden
   attribute, which is only a UA-level display:none. .member-sheet__hint and
   .dash__card both did it; .mem-dash and .perf would have too. Guard the panel
   containers themselves so a new panel cannot reintroduce it. */
[data-mem-panel][hidden] { display: none !important; }
.mem-dash[hidden], .perf[hidden] { display: none !important; }

/* Same trap, swept. Each of these carries the hidden attribute somewhere in
   the markup while its class sets a display value, so the attribute did
   nothing. Making `hidden` mean hidden cannot break anything that was not
   already relying on the bug. */
.bill-table-wrap[hidden],
.bill-card[hidden],
.bill-alert[hidden],
.bill[hidden],
.billing-invoices[hidden],
.dash__preview[hidden],
.group-room__pick-all[hidden],
.mem-next[hidden],
.member-sheet__choice[hidden],
.onb__num[hidden],
.profile__avatar[hidden],
.sample-sheet__face[hidden],
.set-id__mark[hidden],
.slot-times[hidden] { display: none !important; }

/* A 760x260 viewBox stretched across an ultrawide monitor makes a 450px-tall
   chart out of eight points. Cap the plot; the card still runs full width. */
.perf-chart { max-width: 1040px; }
.perf-multiple .perf-chart { max-width: none; }

/* ---- member profile + documentation ------------------------------------ */
/* The profile card reuses profile.html's own header so the two read as one
   record. Two things there are tuned to that page's cover image — a negative
   top margin that pulls the avatar over it, and the page's own padding — and
   neither applies inside a card. */
.mem-dash .profile__head { margin-top: 0; padding: 0; }
.mem-dash .profile__avatar { background-size: cover; background-position: center; }
.mem-facts {
  display: grid; gap: 14px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.mem-facts dt {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-70); margin-bottom: 3px;
}
.mem-facts dd { margin: 0; font-size: 15px; color: var(--type); }

.mem-docs { display: flex; flex-direction: column; gap: 2px; }
.mem-docs details {
  border-top: 1px solid var(--hairline-inv);
}
.mem-docs details:last-child { border-bottom: 1px solid var(--hairline-inv); }
.mem-docs summary {
  cursor: pointer; list-style: none;
  padding: 14px 0; min-height: 44px;
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: var(--type);
}
.mem-docs summary::-webkit-details-marker { display: none; }
.mem-docs summary::after {
  content: "+"; margin-left: auto; font-size: 18px; font-weight: 400;
  color: var(--paper-70); line-height: 1;
}
.mem-docs details[open] summary::after { content: "\2212"; }
.mem-docs summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.mem-docs p {
  margin: 0 0 16px; color: var(--paper-70); font-size: 14px;
  line-height: 1.65; max-width: 62ch;
}
.mem-countdown { color: var(--accent-bright); font-weight: 700; }

/* ---- viewing scope panel ------------------------------------------------
   Three questions in one block: what am I looking at, is it real, and how do
   I change it. The dot takes the offering's own hue when a template is up, so
   the sidebar and the roster pills agree at a glance. */
.viewas {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 22px; padding: 14px;
  border: 1px solid var(--hairline-inv); border-radius: 14px;
  background: var(--field-bg);
}
.viewas[hidden] { display: none !important; }
.viewas__top { display: flex; align-items: center; gap: 8px; }
.viewas__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent-bright);
}
.viewas__badge {
  margin-left: auto; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ok); border: 1px solid var(--ok);
}
.viewas__badge.is-template { color: var(--pending); border-color: var(--field-line-strong); }
.viewas__now { display: flex; align-items: center; gap: 9px; margin: 0; }
.viewas__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--view-hue, var(--accent-bright));
}
.viewas__now b {
  font-size: 15px; font-weight: 700; color: var(--type); line-height: 1.25;
}
.viewas__sub { margin: -4px 0 0; font-size: 12px; color: var(--paper-70); }

.viewas__field { display: flex; flex-direction: column; gap: 4px; }
.viewas__field > span {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--paper-70);
}
.viewas__field select {
  width: 100%; min-height: 44px;
  background: var(--field-bg-focus); border: 1px solid var(--field-line);
  border-radius: var(--field-radius); color: var(--type);
  font: inherit; font-size: 14px; font-weight: 600; padding: 8px 10px; cursor: pointer;
}
.viewas__field select:hover { border-color: var(--field-line-strong); }
.viewas__field select:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

.viewas__modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  padding: 3px; border-radius: var(--field-radius);
  background: var(--field-bg-focus); border: 1px solid var(--field-line);
}
.viewas__modes button {
  min-height: 40px; border: 0; border-radius: 9px; cursor: pointer;
  background: none; color: var(--paper-70);
  font: inherit; font-size: 13px; font-weight: 700;
  transition: background 0.16s ease, color 0.16s ease;
}
.viewas__modes button:hover { color: var(--type); }
.viewas__modes button[aria-pressed="true"] { background: var(--accent); color: var(--paper); }
.viewas__modes button:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* ---- documentation: copies of what the member filled in -----------------
   A row per form, with the member's own answers folded inside. Built on
   <details> so it works before any script runs and reads correctly to a
   screen reader without state to announce. */
.doc-forms { display: flex; flex-direction: column; }
.doc-form { border-top: 1px solid var(--hairline-inv); }
.doc-form:last-child { border-bottom: 1px solid var(--hairline-inv); }
.doc-form > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 15px 0; min-height: 44px;
}
.doc-form > summary::-webkit-details-marker { display: none; }
.doc-form__name { font-size: 15px; font-weight: 600; color: var(--type); }
.doc-form__when {
  font-size: 12px; color: var(--paper-70); font-variant-numeric: tabular-nums;
}
.doc-form__cta {
  margin-left: auto; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--field-line-strong); color: var(--paper-70);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.doc-form > summary:hover .doc-form__cta { color: var(--type); border-color: var(--accent-bright); }
.doc-form[open] > summary .doc-form__cta { color: var(--accent-bright); border-color: var(--accent-bright); }
.doc-form > summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.doc-form__body { padding: 4px 0 20px; }
.doc-form__none {
  padding: 14px; border-radius: var(--field-radius);
  border: 1px dashed var(--field-line-strong); color: var(--paper-70); font-size: 13.5px;
}

/* profile.html stacks these one per row, which is right beside an edit form.
   In a list of five collapsible forms it makes a very tall column, so the
   copies lay out in a grid while keeping the same mod styling. */
.doc-form__body .sia__mods {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}