/* ==========================================================================
   DanceWithDeepti — recreated static site
   Design tokens extracted from the live Brizy/GeneratePress build.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette (from --brz-global-color1..8 on the live site) */
  --orange:      #f6821f;
  --ink:         #171717;
  --green:       #60b420;
  --yellow:      #ffff00;
  --gold:        #fed800;
  --amber:       #ffc933;
  --grey:        #6f6d70;
  --white:       #ffffff;

  /* Surfaces */
  --bg-light:    #f2f0ef;
  --bg-lighter:  #f8f7f6;
  --bg-dark:     #0f0f0f;
  --bg-card:     #171717;
  --surface-2:   #e6e4e2;   /* raised neutral on light backgrounds */
  --surface-3:   #dbd8d6;   /* the same, one step darker (hover) */
  --line:        #e2dfdc;   /* hairline on light backgrounds */
  --line-strong: #d3cfcb;
  --line-invert: rgba(255, 255, 255, .10);

  /* Text */
  --text:        #171717;
  --text-muted:  #55595f;
  --text-invert: #ffffff;
  --text-invert-muted: rgba(255, 255, 255, .82);
  --orange-text: #a8560c;   /* brand orange, darkened for ≥4.5:1 text on light surfaces */

  /* Type */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* one sans across the site (Sep 2026): the alt / ui / dark / nav roles all resolve to
     Poppins now; Playfair Display stays for display headings */
  --font-alt:     "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui:      "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-dark:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-nav:     "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --wrap:        1200px;
  --wrap-narrow: 980px;
  --measure:     78ch;      /* comfortable reading measure */
  --radius-xs:   8px;
  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* Vertical rhythm — one scale, used everywhere */
  --space-section:       clamp(64px, 6.6vw, 96px);
  --space-section-tight: clamp(44px, 4.4vw, 64px);
  --space-block:         clamp(28px, 3vw, 44px);

  /* Motion */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur:       .22s;

  /* Accents */
  --grad-cta: linear-gradient(100deg, var(--orange) 0%, var(--amber) 100%);

  /* Premium dark surface: fine SVG grain plus warm corner glows.
     Everything is inline (data URI) — no assets, no extra requests. */
  /* the founder poster's low-poly backdrop, continued across the hero as very faint lines */
  --mesh: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'><path d='M0.0 0.0L0.0 90.2 M0.0 0.0L116.9 0.0 M0.0 0.0L127.1 93.2 M0.0 90.2L0.0 248.8 M0.0 90.2L127.1 93.2 M0.0 248.8L0.0 376.1 M0.0 248.8L127.1 93.2 M0.0 248.8L140.3 402.4 M0.0 248.8L162.8 236.9 M0.0 376.1L0.0 551.6 M0.0 376.1L140.3 402.4 M0.0 551.6L0.0 635.7 M0.0 551.6L97.6 625.5 M0.0 551.6L140.3 402.4 M0.0 551.6L142.1 540.8 M0.0 635.7L0.0 800.0 M0.0 635.7L97.6 625.5 M0.0 800.0L97.6 625.5 M0.0 800.0L176.1 800.0 M97.6 625.5L142.1 540.8 M97.6 625.5L176.1 800.0 M97.6 625.5L234.1 800.0 M97.6 625.5L262.6 565.1 M97.6 625.5L291.7 632.1 M116.9 0.0L127.1 93.2 M116.9 0.0L234.1 0.0 M127.1 93.2L162.8 236.9 M127.1 93.2L228.5 126.3 M127.1 93.2L234.1 0.0 M127.1 93.2L274.3 279.6 M140.3 402.4L142.1 540.8 M140.3 402.4L162.8 236.9 M140.3 402.4L262.6 565.1 M140.3 402.4L274.3 279.6 M140.3 402.4L301.7 421.4 M142.1 540.8L262.6 565.1 M162.8 236.9L274.3 279.6 M176.1 800.0L234.1 800.0 M228.5 126.3L234.1 0.0 M228.5 126.3L274.3 279.6 M228.5 126.3L430.5 98.2 M234.1 0.0L414.1 0.0 M234.1 0.0L430.5 98.2 M234.1 800.0L291.7 632.1 M234.1 800.0L369.8 800.0 M234.1 800.0L376.4 656.5 M262.6 565.1L291.7 632.1 M262.6 565.1L301.7 421.4 M262.6 565.1L376.4 656.5 M262.6 565.1L380.2 444.8 M262.6 565.1L441.5 530.9 M274.3 279.6L301.7 421.4 M274.3 279.6L380.2 444.8 M274.3 279.6L388.1 271.1 M274.3 279.6L430.5 98.2 M291.7 632.1L376.4 656.5 M301.7 421.4L380.2 444.8 M369.8 800.0L376.4 656.5 M369.8 800.0L508.3 800.0 M376.4 656.5L441.5 530.9 M376.4 656.5L508.3 800.0 M376.4 656.5L548.7 492.3 M376.4 656.5L568.0 627.5 M380.2 444.8L388.1 271.1 M380.2 444.8L441.5 530.9 M380.2 444.8L492.5 225.6 M380.2 444.8L497.7 392.4 M380.2 444.8L548.7 492.3 M388.1 271.1L430.5 98.2 M388.1 271.1L492.5 225.6 M414.1 0.0L430.5 98.2 M414.1 0.0L493.4 0.0 M430.5 98.2L492.5 225.6 M430.5 98.2L493.4 0.0 M430.5 98.2L507.5 145.2 M441.5 530.9L548.7 492.3 M492.5 225.6L497.7 392.4 M492.5 225.6L507.5 145.2 M492.5 225.6L639.2 283.5 M492.5 225.6L690.7 367.5 M492.5 225.6L708.5 140.5 M493.4 0.0L507.5 145.2 M493.4 0.0L670.0 0.0 M493.4 0.0L708.5 140.5 M497.7 392.4L548.7 492.3 M497.7 392.4L690.7 367.5 M507.5 145.2L708.5 140.5 M508.3 800.0L568.0 627.5 M508.3 800.0L641.8 800.0 M508.3 800.0L661.9 671.3 M548.7 492.3L568.0 627.5 M548.7 492.3L661.9 671.3 M548.7 492.3L685.5 547.1 M548.7 492.3L690.7 367.5 M568.0 627.5L661.9 671.3 M639.2 283.5L690.7 367.5 M639.2 283.5L708.5 140.5 M639.2 283.5L793.2 249.3 M641.8 800.0L661.9 671.3 M641.8 800.0L798.6 800.0 M661.9 671.3L685.5 547.1 M661.9 671.3L798.6 800.0 M661.9 671.3L835.8 696.5 M661.9 671.3L846.0 563.4 M670.0 0.0L708.5 140.5 M670.0 0.0L787.5 0.0 M685.5 547.1L690.7 367.5 M685.5 547.1L846.0 563.4 M690.7 367.5L793.2 249.3 M690.7 367.5L799.0 357.0 M690.7 367.5L846.0 563.4 M708.5 140.5L787.5 0.0 M708.5 140.5L790.4 177.8 M708.5 140.5L793.2 249.3 M787.5 0.0L790.4 177.8 M787.5 0.0L891.0 166.8 M787.5 0.0L892.1 0.0 M790.4 177.8L793.2 249.3 M790.4 177.8L891.0 166.8 M793.2 249.3L799.0 357.0 M793.2 249.3L891.0 166.8 M793.2 249.3L941.3 262.3 M793.2 249.3L949.0 424.7 M798.6 800.0L835.8 696.5 M798.6 800.0L941.7 800.0 M798.6 800.0L967.3 646.0 M799.0 357.0L846.0 563.4 M799.0 357.0L949.0 424.7 M835.8 696.5L846.0 563.4 M835.8 696.5L967.3 646.0 M846.0 563.4L913.2 522.7 M846.0 563.4L949.0 424.7 M846.0 563.4L967.3 646.0 M891.0 166.8L892.1 0.0 M891.0 166.8L941.3 262.3 M891.0 166.8L1047.0 100.1 M891.0 166.8L1048.0 294.1 M891.0 166.8L1067.4 0.0 M892.1 0.0L1067.4 0.0 M913.2 522.7L949.0 424.7 M913.2 522.7L967.3 646.0 M913.2 522.7L1082.4 488.8 M941.3 262.3L949.0 424.7 M941.3 262.3L1048.0 294.1 M941.7 800.0L967.3 646.0 M941.7 800.0L1044.5 800.0 M949.0 424.7L1048.0 294.1 M949.0 424.7L1073.5 435.0 M949.0 424.7L1082.4 488.8 M967.3 646.0L1044.5 800.0 M967.3 646.0L1058.8 653.5 M967.3 646.0L1082.4 488.8 M1044.5 800.0L1058.8 653.5 M1044.5 800.0L1200.0 702.5 M1044.5 800.0L1200.0 800.0 M1047.0 100.1L1048.0 294.1 M1047.0 100.1L1067.4 0.0 M1047.0 100.1L1200.0 97.7 M1048.0 294.1L1073.5 435.0 M1048.0 294.1L1200.0 97.7 M1048.0 294.1L1200.0 285.2 M1048.0 294.1L1200.0 382.6 M1058.8 653.5L1082.4 488.8 M1058.8 653.5L1200.0 702.5 M1067.4 0.0L1200.0 0.0 M1067.4 0.0L1200.0 97.7 M1073.5 435.0L1082.4 488.8 M1073.5 435.0L1200.0 382.6 M1082.4 488.8L1200.0 382.6 M1082.4 488.8L1200.0 529.8 M1082.4 488.8L1200.0 702.5 M1200.0 0.0L1200.0 97.7 M1200.0 97.7L1200.0 285.2 M1200.0 285.2L1200.0 382.6 M1200.0 382.6L1200.0 529.8 M1200.0 529.8L1200.0 702.5 M1200.0 702.5L1200.0 800.0' fill='none' stroke='rgba%28255,255,255,0.085%29' stroke-width='1'/></svg>");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  --glow-a: radial-gradient(70% 55% at 14% 0%, rgba(246, 130, 31, .15), transparent 62%);
  --glow-b: radial-gradient(60% 50% at 88% 100%, rgba(255, 201, 51, .10), transparent 60%);

  /* Layered, low-contrast shadows — light on top, diffuse underneath */
  --shadow-xs: 0 1px 2px rgba(23, 23, 23, .05);
  --shadow-sm: 0 1px 2px rgba(23, 23, 23, .05), 0 4px 12px -4px rgba(23, 23, 23, .10);
  --shadow-md: 0 1px 2px rgba(23, 23, 23, .05), 0 10px 26px -10px rgba(23, 23, 23, .20);
  --shadow-lg: 0 2px 4px rgba(23, 23, 23, .05), 0 22px 48px -20px rgba(23, 23, 23, .28);
  --shadow-cta: 0 1px 2px rgba(124, 58, 12, .22), 0 8px 20px -8px rgba(246, 130, 31, .55);
  --shadow-cta-hover: 0 2px 4px rgba(124, 58, 12, .22), 0 14px 30px -10px rgba(246, 130, 31, .62);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: 1.18;
  font-weight: 700;
  text-wrap: balance;          /* progressive enhancement — avoids orphan words */
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Focus: a thin ring plus a soft halo, tinted for the surface it lands on. */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}
.site-header :focus-visible,
.hero :focus-visible,
.band :focus-visible,
.cta-card :focus-visible,
.section--dark :focus-visible,
.section--darker :focus-visible,
.site-footer :focus-visible,
.story :focus-visible { outline-color: var(--amber); }

/* ---------- Layout helpers ---------- */
.wrap        { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap--narrow{ max-width: var(--wrap-narrow); }

.section          { padding-block: var(--space-section); }
.section--tight   { padding-block: var(--space-section-tight); }
.section--dark    { background: var(--ink); color: var(--text-invert); }
.section--darker  { background: var(--bg-dark); color: var(--text-invert); }
.section--light   { background: var(--bg-light); }
.section--lighter { background: var(--bg-lighter); }

.center { text-align: center; }

/* ---------- Typography ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);  /* live site: 38px */
  line-height: 1.22;
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
  margin-bottom: 20px;
}

.section-intro {
  max-width: 780px;                 /* ~72 characters — a readable measure */
  margin: 0 auto var(--space-block);
  text-align: center;
  font-size: 1.0625rem;             /* 17px */
  line-height: 1.7;
  color: var(--text-muted);
  text-wrap: pretty;
}
.section--dark .section-intro,
.section--darker .section-intro { color: var(--text-invert-muted); }

.accent      { color: var(--orange); }
.accent-gold { color: var(--amber); }

/* Gradient-filled headings — the live site clips a warm gradient to the text. */
.grad-text {
  background-image: linear-gradient(90deg, var(--orange) 0%, var(--amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-text--gold { background-image: linear-gradient(90deg, var(--orange) 0%, var(--gold) 100%); }
.grad-text--hot  { background-image: linear-gradient(90deg, #fe6d28 0%, var(--yellow) 100%); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: .9375rem;              /* 15px */
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .015em;
  border-radius: var(--radius-pill);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              filter var(--dur) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(2px); }

/* One warm shadow plus a hairline top highlight — no rings. */
.btn--cta {
  color: var(--white);
  background-image: var(--grad-cta);
  box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn--cta:hover {
  transform: translateY(-1px);
  filter: saturate(1.04) brightness(1.02);
  box-shadow: var(--shadow-cta-hover), inset 0 1px 0 rgba(255, 255, 255, .26);
}
.btn--cta:active { transform: translateY(0); box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255, 255, 255, .18); }

.btn--ghost {
  color: var(--amber);
  border: 1.5px solid rgba(255, 201, 51, .55);
  padding-block: 12.5px;
}
.btn--ghost:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(255, 201, 51, .8);
}
.btn--ghost:active { transform: translateY(0); }

.btn-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 34px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  /* slim, solid, sticky — the same bar as /new-home: logo left, links centred, Sign-In pill right */
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: 20px;
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* A whisper of a scrim so the nav stays legible over bright video frames. */
.site-header::before {
  display: none;
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 180px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.site-header--solid::before { display: none; }
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: none;                      /* full width: logo at the far left, Sign-In at the far right */
  padding-inline: clamp(18px, 3vw, 40px);
}
.site-header__cta { display: none; }    /* phones only; the desktop pill is the list's last item */
.site-logo img { width: 84px; }
.nav { flex: 1; display: flex; }

/* Matches planning/mockups/home-D-habuild.html `.nav ul`: Poppins 600 .95rem, 30px gap. */
.nav__list { flex: 1; display: flex; align-items: center; justify-content: center; gap: 44px; }
.nav__list > li:first-child, .nav__list li:has(.nav__cta) { margin-left: auto; }  /* links centred between logo and pill */
.nav__list a {
  font-family: var(--font-body);
  font-size: 1.4rem;               /* readable at a glance, 50% up from the mock's .95rem */
  font-weight: 600;
  letter-spacing: 0;
  color: var(--white);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__list a:hover,
.nav__list a[aria-current="page"] { color: var(--amber); }
/* Sign-In as a pill, far right (memberNav() removes it once signed in and adds Help last) */
.nav__list a.nav__cta {
  padding: 12px 26px;
  background: var(--orange);
  border-radius: var(--radius-pill);
  font-size: 1.2rem;
  color: var(--white);
  box-shadow: 0 10px 24px -12px rgba(246, 130, 31, .8);
}
.nav__list a.nav__cta:hover,
.nav__list a.nav__cta[aria-current="page"] { background: #e4741a; color: var(--white); }

.nav-toggle {
  display: none;
  padding: 8px;
  color: var(--white);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur) var(--ease);
}
.nav-toggle:hover { background: rgba(255, 255, 255, .1); }
.nav-toggle svg { width: 28px; height: 28px; }

/* Header variant for light-topped pages */
.site-header--solid { position: sticky; background: var(--ink); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--bg-dark);
  background-image: var(--mesh), var(--noise);   /* faint mesh lines + grain under the video */
  background-size: 1200px 800px, auto;
  background-position: center top, 0 0;
  color: var(--text-invert);
  padding-block: clamp(48px, 5vw, 72px) clamp(48px, 5vw, 72px);
  overflow: hidden;
  isolation: isolate;
  /* the height the hero had with the press logos in it, so the video keeps its stage;
     the copy hangs at the vertical centre */
  --hero-h: clamp(560px, 46vw, 680px);
  min-height: var(--hero-h);
  display: grid;
  align-items: center;
}

/* The video plays at its full height on the right (no face-clipping overscan), roughly the
   right 70% of the hero, and fades into black towards the copy on the left. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}
.hero__bg iframe {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* the full frame at the hero's height, but never narrower than 90% of the hero:
     on wide screens the frame grows and a little top/bottom is cropped instead */
  width: max(100%, calc(var(--hero-h, 660px) * 16 / 9));   /* full width; height follows, centred */
  min-height: 100%;
  scale: 1.06;            /* just enough overscan to hide YouTube's title strip */
  border: 0;
  pointer-events: none;
}
/* a second, wider veil so the copy always sits on solid black whatever the video shows */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* the video runs edge to edge; only a soft veil on the left keeps the copy readable */
  background: linear-gradient(to right, rgba(0,0,0,.82) 0, rgba(0,0,0,.66) 16%, rgba(0,0,0,.3) 34%, transparent 50%);
}

/* Desktop: copy in the left half, the video shows through on the right; the poster is for phones. */
.hero__grid { max-width: 640px; }
.hero__copy { max-width: 560px; }
.hero__art { display: none; }
.hero__art img {
  width: 100%; height: auto; display: block;
  filter: saturate(1.05);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem);   /* live site: 64px */
  line-height: 1.12;
  letter-spacing: -.032em;               /* scales with the size, unlike -2px */
  margin-bottom: 14px;
}
.hero__title em { font-style: normal; color: var(--amber); display: block; }

.hero__lead {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(2.25rem, 3.9vw, 3.28rem);   /* 1.5x the old 35px: the page's headline now */
  line-height: 1.24;
  letter-spacing: -.024em;
  margin-bottom: 4px;
}
.hero__lead-big { display: block; font-size: 1.5em; line-height: 1.05; }
.hero__sub {
  font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.375rem);  /* live site: 22px */
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--amber);
  margin-bottom: 22px;
}
/* the hero's Join Now: caps and half again as large as a normal button */
.hero .btn--cta { font-size: clamp(1.05rem, 1.6vw, 1.375rem); text-transform: uppercase; letter-spacing: .04em; padding: 16px 34px; }
.hero__badge { margin-top: 20px; }
.hero__badge img { width: 240px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }

.hero__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
}
.hero__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Featured-on strip */
.featured { margin-top: clamp(44px, 5vw, 66px); }
.featured__label {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .01em;
  color: var(--text-invert-muted);
  margin-bottom: 18px;
}
.featured__logos {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.featured__logos img {
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease);
}
.featured__logos img:hover { transform: translateY(-2px); }
.featured__logos img.is-wide {
  width: auto;
  height: 34px;
  object-fit: contain;
  border-radius: 0;
  background: none;
}

/* ==========================================================================
   Stats
   ========================================================================== */
/* A quiet divided row rather than six boxes: the figures are the hero, the
   labels whisper, and hairlines carry the rhythm. Degrades 6 → 3×2 → 2×3 → 1. */
.stats { background: var(--bg-light); padding-block: var(--space-section-tight); }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.stat {
  position: relative;
  text-align: center;
  padding: 10px 14px;
}
/* Small brand dash above each figure — warmth without weight. */
.stat::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  margin: 0 auto 14px;
  border-radius: var(--radius-pill);
  background: var(--grad-cta);
}
/* Faded vertical hairline between cells. */
.stat + .stat::after {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
}
.stat__num {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.85vw, 1.65rem);
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 7px;
  white-space: nowrap;          /* "300 Million+" never breaks mid-phrase */
}
.stat__label {
  font-family: var(--font-alt);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-wrap: balance;
}

/* Home page: three key figures as one flat rounded band (after the home-D
   mock) — no cards, no hairlines. The section sits on white so the band's
   two greys read. Scoped to .stats--key so the About page's six-up grid keeps
   its own look. */
.stats--key {
  .stats--key.stats--inline { background: none; padding: 0 0 34px; }
.stats--key.stats--inline::after { display: none; }
/* option 2 from planning/mockups/stats-section-bg-options.html: a warm peach bloom
     behind the band on a near-white ground, with a super-faint grain */
  position: relative;
  isolation: isolate;
  padding-block: clamp(28px, 3.5vw, 44px);
  background: radial-gradient(70% 120% at 50% 50%, #ffe7cf 0%, #fff6ee 60%, #fffaf5 100%);
}
.stats--key::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.stats--key .stats__grid {
  /* option A2 from planning/mockups/stats-band-options.html: black glass band, amber
     figures in Poppins 500, a faint orange glow rising behind the middle cell */
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: #0a0a0a;
  transform: translateY(-4px);
  box-shadow: 0 46px 80px -34px rgba(160, 80, 15, .5), 0 16px 30px -18px rgba(0, 0, 0, .4);
}
/* The usage-page .stat rule further down paints a white box with a shadow;
   the band's cells must be flat. */
.stats--key .stat { padding: 30px 16px; text-align: center; background: transparent; box-shadow: none; border-radius: 0; }
.stats--key .stat + .stat { border-left: 1px solid rgba(255, 255, 255, .1); }
.stats--key .stat::before,
.stats--key .stat + .stat::after { display: none; }
.stats--key .stat__num {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  color: var(--amber);
  letter-spacing: 0;
  margin-bottom: 8px;
}
.stats--key .stat__plus { color: var(--orange); }
.stats--key .stat__label {
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, .72);
}
/* Tabular digits so the count-up doesn't jitter as glyph widths change. */
.stats--key [data-countup] { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Feature band (background image + overlay)
   ========================================================================== */
.band {
  position: relative;
  color: var(--text-invert);
  background: var(--ink) center / cover no-repeat;
  padding-block: var(--space-section);
}
/* A vignette rather than a flat wash — keeps contrast up and adds depth. */
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .58) 42%, rgba(0, 0, 0, .58) 58%, rgba(0, 0, 0, .74) 100%),
    radial-gradient(120% 80% at 50% 50%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .32) 100%);
}
.band > * { position: relative; }
.band__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);   /* live site: 38px */
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--amber);
  text-align: center;
  text-wrap: balance;
  margin-bottom: 20px;
}
.band__lead {
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 820px;
  margin: 0 auto 30px;
  color: var(--text-invert-muted);
}
.band__sub {
  text-align: center;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--amber);
  margin: var(--space-block) 0 26px;
}
.band__footnote { text-align: center; margin-top: 28px; font-size: 1.02rem; color: var(--text-invert-muted); }

/* Two-column tick list */
.ticks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 34px;
  background: rgba(10, 10, 10, .5);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  padding: 30px 30px;
}
@supports (backdrop-filter: blur(6px)) {
  .ticks { background: rgba(10, 10, 10, .42); backdrop-filter: blur(8px) saturate(1.1); }
}
.ticks--plain { background: none; border: 0; padding: 0; gap: 8px 46px; backdrop-filter: none; }
.ticks li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  padding-block: 11px;
  line-height: 1.55;
}
.ticks li::before {
  content: "";
  width: 21px;
  height: 21px;
  margin-top: 3px;
  background: var(--amber);
  -webkit-mask: var(--tick-mask) center / contain no-repeat;
  mask: var(--tick-mask) center / contain no-repeat;
}
.ticks {
  --tick-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.8 10A10 10 0 1 1 17 3.34'/><polyline points='9 11 12 14 22 4'/></svg>");
}
.ticks--orange li::before { background: var(--orange); }
.ticks b, .ticks strong { color: var(--amber); font-weight: 600; }
.ticks--orange b, .ticks--orange strong { color: var(--orange); }
.ticks em { color: var(--amber); }
.ticks--orange em { color: var(--orange); }

/* Divider between the two tick columns — fades out at both ends */
.ticks--split { position: relative; }
.ticks--split::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, currentColor 18%, currentColor 82%, transparent);
  opacity: .16;
}

/* ==========================================================================
   Success stories carousel (home) — small white cards in a scroll-snap track
   Three cards per view on desktop, 2.15 on tablets, 1.15 on phones. Each card
   is its own snap column (no overlap); main.js (initStoriesCarousel) adds the
   arrows, dots, keys and a 6s autoplay that stops on any manual interaction.
   ========================================================================== */
.stories { background: var(--bg-light); padding-block: clamp(24px, 3vw, 40px) clamp(18px, 2.4vw, 30px); }
.stories + .section { padding-top: clamp(16px, 2vw, 28px); }   /* the trainer card follows closely */
/* One rounded dark panel, like the trainer card: the studio photo under a dark veil,
   Playfair title in white and amber, the carousel and one button inside. */
.stories__panel {
  position: relative; isolation: isolate; text-align: center; color: var(--text-invert);
  border-radius: var(--radius-lg); overflow: hidden;
  padding: clamp(22px, 2.6vw, 32px);           /* the same air on all four sides */
  background: var(--ink) url("../img/untitled-design-3.webp") center / cover no-repeat;
  box-shadow: var(--shadow-lg);
}
.stories__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.66) 50%, rgba(0,0,0,.8)); }
.stories__eyebrow { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); font-weight: 500; margin: 0 0 8px; }
.stories__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.1; margin: 0 0 18px; }
.stories__title em { font-style: normal; color: var(--amber); }
.stories__bar { margin-top: 22px; display: flex; justify-content: center; }
/* one capsule: the figure on the left, the call to action as the highlighted segment */
.stories__pill { display: inline-flex; align-items: stretch; gap: 18px; padding: 0 0 0 24px; overflow: hidden; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: clamp(.95rem, 1.4vw, 1.1rem); transition: background .25s var(--ease), border-color .25s var(--ease); }
.stories__pill:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .3); }
.stories__pill-text { display: inline-flex; align-items: center; }
.stories__pill-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: var(--radius-pill);   /* flush with the capsule's edge */ background: linear-gradient(100deg, var(--orange), #ffb14a); color: #fff; box-shadow: 0 10px 24px -12px rgba(246, 130, 31, .9); transition: transform .25s var(--ease); }
.stories__pill:hover .stories__pill-cta { transform: translateX(2px); }
.stories__pill-cta svg { width: 16px; height: 16px; }
.stories .wrap { position: relative; }
.stories__all {
  position: absolute;
  top: 8px;
  right: 24px;
  font-weight: 600;
  font-size: .9rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.stories__all:hover { color: var(--orange-text, var(--orange)); }
.stories__all span { display: inline-block; transition: transform .2s var(--ease); }
.stories__all:hover span { transform: translateX(3px); }

.stories-car { --per: 3.3; --gap: 22px; position: relative; }   /* a third of the 4th card peeks: there is more */
.stories-car__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* room for the hover lift and the card shadow, then pulled back so the track sits flush */
  padding: 10px 6px 26px;
  margin: -10px -6px -26px;
  outline: none;
}
.stories-car__track::-webkit-scrollbar { display: none; }
.stories-car__track:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; border-radius: 16px; }

.story-card {
  flex: 0 0 calc((100% - var(--gap) * (var(--per) - 1)) / var(--per));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  background: linear-gradient(115deg, #000 0%, #000 38%, #1c1c1c 50%, #050505 62%, #000 100%);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9);
  /* hover lift (4px) and its transition live in the Motion section at the end of this file */
}
/* the whole photo, never cropped: it sits inside a fixed box on black with a little air */
.story-card__media { position: relative; aspect-ratio: 16 / 11; background: #000; overflow: hidden; padding: 8px 8px 0; }
.story-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.story-card__stat {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--amber); color: var(--ink);
  color: var(--ink);
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.3;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.story-card__body { padding: 14px 16px 18px; }
.story-card__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0 0 4px;
}
.story-card__line {
  font-weight: 500;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--amber);
  margin: 0;
}

/* prev, dots, next in a centred row under the cards */
.stories-car__nav { position: absolute; inset: 0; margin: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.stories-car__nav .stories-car__btn { pointer-events: auto; translate: -50% 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
.stories-car__nav .stories-car__btn:last-child { translate: 50% 0; }
.stories-car__dots { display: none !important; }
.stories-car__btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .35);
  background: transparent; color: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.stories-car__btn svg { width: 18px; height: 18px; }
.stories-car__btn:hover, .stories-car__btn:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--amber); outline: none; }
.stories-car__btn:active { transform: scale(.94); }
.stories-car__btn:disabled { opacity: .3; cursor: default; pointer-events: none; }
.stories-car__dots { display: flex; align-items: center; gap: 0; }
/* 8px dot, ~36px tap target: the padding is the hit area, the background is clipped to the dot. */
.stories-car__dots button {
  width: 8px;
  height: 8px;
  padding: 14px 4px;
  box-sizing: content-box;
  border-radius: var(--radius-pill);
  border: 0;
  background: rgba(255, 255, 255, .3);
  background-clip: content-box;
  cursor: pointer;
  transition: background-color .2s var(--ease), width .3s var(--ease);
}
.stories-car__dots button:hover { background-color: rgba(255, 255, 255, .55); }
.stories-car__dots button[aria-selected="true"] { width: 24px; background-color: var(--amber); }


@media (max-width: 1023px) {
  .stories-car { --per: 2.15; --gap: 18px; }
}
@media (max-width: 860px) {
  /* the link leaves the corner (it would sit on the centred title) and becomes a right-aligned line above the cards */
  .stories__all { position: static; display: block; text-align: right; margin: -14px 0 18px; }
}
@media (max-width: 560px) {
  .stories-car { --per: 1.15; --gap: 12px; }
  .stories-car__track { padding-inline: 4px; margin-inline: -4px; }
  .stories-car__btn { display: none; }   /* swipe is native; the dots stay */
}

/* ==========================================================================
   About split
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: clamp(40px, 5vw, 68px);
  align-items: center;
}
.split__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
}
.split__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin-bottom: 20px;
}
/* Ragged-right rather than justified: no rivers, no stretched word spacing. */
.split__body { color: var(--text-invert-muted); max-width: 62ch; }
.split__body p { margin-bottom: 1.15em; }
.split .btn { margin-top: 16px; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
/* An editorial list, not a stack of pills: hairline dividers, type and space
   do the work, and opening an item changes the ink — never the surface. */
.faq { max-width: 1000px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line-strong); }
.faq > .faq__item:last-child,
.faq-group:last-child .faq__item:last-child { border-bottom: 0; }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 2px;
  font-family: var(--font-alt);
  font-weight: 700;
  font-size: 1.0625rem;             /* 17px */
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: color .2s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover,
.faq__item[open] .faq__q { color: var(--orange-text); }
/* A plus that relaxes into a multiply — calmer than a flipping chevron. */
.faq__q::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  opacity: .45;
  background: currentColor;
  -webkit-mask: var(--plus) center / contain no-repeat;
  mask: var(--plus) center / contain no-repeat;
  transition: rotate .3s var(--ease), opacity .2s var(--ease);
  --plus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'><line x1='12' y1='4' x2='12' y2='20'/><line x1='4' y1='12' x2='20' y2='12'/></svg>");
}
.faq__q:hover::after { opacity: 1; }
.faq__item[open] .faq__q::after { rotate: 45deg; opacity: 1; }

.faq__a {
  padding: 0 36px 20px 0;
  max-width: 62ch;
  font-size: .96rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.faq__a a {
  color: var(--orange-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(168, 86, 12, .45);
  transition: text-decoration-color var(--dur) var(--ease);
}
.faq__a a:hover { text-decoration-color: var(--orange-text); }

/* Gentle open/close where the platform supports animating <details>. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .faq__item { interpolate-size: allow-keywords; }
    .faq__item::details-content {
      opacity: 0;
      height: 0;
      overflow: clip;
      transition: height .3s var(--ease), opacity .26s var(--ease),
                  content-visibility .3s allow-discrete;
    }
    .faq__item[open]::details-content { opacity: 1; height: auto; }
  }
}

/* Homepage arrangement: grouped list beside a small "talk to us" card,
   so the section reads as a spread rather than one long ladder. */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: clamp(36px, 4.5vw, 64px);
  align-items: start;
  max-width: 1080px;
  margin-inline: auto;
}
.faq-group + .faq-group { margin-top: 34px; }
.faq-group__label {
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-text);
  margin-bottom: 2px;
}

.faq-aside { position: sticky; top: 28px; }
.faq-aside__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
}
.faq-aside__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fdf0e2;
  color: var(--orange-text);
  margin-bottom: 16px;
}
.faq-aside__icon svg { width: 20px; height: 20px; }
.faq-aside__title {
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: 8px;
}
.faq-aside__card p {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 22px;
}
.faq-aside .btn { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .faq-aside { position: static; max-width: 460px; }
}

/* ==========================================================================
   Trainer CTA card
   ========================================================================== */
.cta-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--text-invert);
  background: var(--ink) center / cover no-repeat;
  padding: clamp(40px, 5vw, 64px) clamp(26px, 4vw, 56px);
  text-align: center;
  box-shadow: var(--shadow-lg);
  min-height: var(--stories-h, auto);   /* main.js: the stories panel's height */
  display: grid; align-content: center; justify-items: center;
}
.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .66)),
    radial-gradient(110% 80% at 50% 45%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .3) 100%);
}
.cta-card > * { position: relative; }
.cta-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.22;
  letter-spacing: -.015em;
  max-width: 20em;
  margin: 0 auto 20px;
}
.cta-card__body {
  max-width: 780px;
  margin: 0 auto 30px;
  color: var(--text-invert-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: var(--text-invert); padding-block: 26px 30px; }   /* legal row + copyright only */
/* signed in (main.js sets html.is-signed-in): the marketing grid goes on every
   page, home included; the legal links and copyright line below it remain */
html.is-signed-in .site-footer__grid { display: none; }
html.is-signed-in .site-footer { padding-block: 22px 26px; }
.site-footer__grid {
  display: grid;
  grid-template-columns: .85fr 1.05fr .95fr 1.35fr;
  gap: clamp(30px, 3.4vw, 44px) clamp(30px, 3.4vw, 48px);
  align-items: start;
}
.site-footer__logo img { width: 118px; }

/* Explore + Legal share a column: the hairline makes the stack look deliberate. */
/* Legal used to be a five-item column stacked under Explore. It is one line now,
   full width above the copyright bar, pipe-separated. */
.site-footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: .92rem;
}
.site-footer__legal .site-footer__copy { margin-left: auto; }   /* (c) line at the right end of the same row */
.site-footer__legal a + a::before {
  content: "|";
  margin-right: 14px;
  color: rgba(255, 255, 255, .28);
}
.site-footer h2 {
  font-family: var(--font-alt);
  font-size: 1rem;                  /* 16px */
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--orange);
  margin-bottom: 18px;
}
.site-footer li { margin-bottom: 12px; font-size: .9375rem; line-height: 1.6; color: var(--text-invert-muted); }
.site-footer li:last-child { margin-bottom: 0; }
.site-footer a { transition: color var(--dur) var(--ease); }
.site-footer a:hover { color: var(--amber); }

.icon-list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.icon-list svg { width: 16px; height: 16px; margin-top: 5px; color: var(--orange); flex: none; }

/* Opening hours sit under the number they belong to, never mid-word-wrapped. */
.footer-hours {
  display: block;
  margin-top: 3px;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
}

.site-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
  justify-content: flex-end;   /* only the social icons live here now */
}
.site-footer__copy { font-size: .9rem; color: var(--text-invert-muted); }

.socials { display: flex; gap: 10px; }
.socials a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--white);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.socials a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.socials svg { width: 18px; height: 18px; }
.socials .is-yt { background: #ff0000; }
.socials .is-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.socials .is-fb { background: #1877f2; }

/* ==========================================================================
   Utility content blocks (inner pages)
   ========================================================================== */
.page-hero {
  position: relative;
  background: var(--ink);
  color: var(--text-invert);
  padding-block: clamp(48px, 5.5vw, 80px) clamp(56px, 6vw, 82px);
  text-align: center;
}
/* Barely-there warmth so the flat black band reads as a designed surface. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 130, 31, .35), transparent);
}
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.14;
  letter-spacing: -.028em;
  margin-bottom: 16px;
}
.page-hero__sub {
  color: var(--text-invert-muted);
  max-width: 720px;
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.section--dark .card,
.section--darker .card { background: var(--bg-card); border-color: var(--line-invert); }
.section--dark .card:hover,
.section--darker .card:hover { border-color: rgba(255, 255, 255, .18); }
.card h3 {
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -.005em;
  margin-bottom: 12px;
  color: var(--orange);
}
.card ul li { padding-left: 18px; position: relative; margin-bottom: 9px; font-size: .95rem; line-height: 1.6; }
.card ul li:last-child { margin-bottom: 0; }
.card ul li::before { content: "•"; position: absolute; left: 0; color: var(--amber); }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gallery img:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.prose { max-width: 76ch; margin-inline: auto; }
.prose h2 {
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 2em 0 .55em;
  color: var(--orange);
}
.prose h3 { font-size: 1.12rem; line-height: 1.4; margin: 1.6em 0 .5em; }
.prose > :first-child { margin-top: 0; }
.prose ul { margin-bottom: 1.15em; }
.prose ul li { position: relative; padding-left: 20px; margin-bottom: 9px; line-height: 1.7; }
.prose ul li::before { content: "•"; position: absolute; left: 0; color: var(--orange); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .stats__grid { grid-template-columns: repeat(3, 1fr); }
  .stat { padding-block: 22px; }
  .stat:nth-child(3n+1)::after { display: none; }
  .stat:nth-child(n+4) { border-top: 1px solid var(--line-strong); }
  .split { grid-template-columns: 1fr; gap: 38px; }
  .split__media { max-width: 440px; margin-inline: auto; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }

  .nav { position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); background: var(--ink);
         padding: 92px 30px 30px; transform: translateX(100%);
         transition: transform .34s var(--ease-out); z-index: 40;
         box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .8); }
  .nav[data-open="true"] { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav__list a { display: block; padding: 12px 0; min-height: 44px; font-size: 1.05rem; }
  .nav__list > li:first-child, .nav__list li:has(.nav__cta) { margin-left: 0; }
  .nav__list li:has(.nav__cta) { margin-top: 8px; }
  .nav__list a.nav__cta { display: inline-block; }
  .nav-toggle { display: block; position: relative; z-index: 45; }
  .site-header__inner { gap: 12px; }
  .site-header__cta { display: inline-flex; margin-left: auto; padding: 10px 18px; font-size: 1rem; background: var(--orange); color: var(--white); border-radius: var(--radius-pill); font-weight: 600; }
  .nav__list li:has(.nav__cta) { display: none; }   /* the pill is in the bar, not the drawer */

  /* No background video on phones: heavy on data, and the loading spinner shows behind the CTA.
     main.js only sets the iframe src above 860px; this hides it in case it was already there. */
  /* phones: no video (heavy on data); Deepti's poster first, the copy centred beneath it */
  .hero__bg { display: none; }
  .hero { min-height: 0; display: block; padding-top: 0; }   /* the poster bleeds to the top edge */
  .hero__grid { max-width: none; display: grid; grid-template-columns: 1fr; gap: 20px; justify-items: center; }
  .hero__copy { text-align: center; }
  .hero__badge img { margin-inline: auto; }
  /* full-bleed poster: escape the .wrap side padding so it touches both edges */
  .hero__art { display: block; order: -1; width: calc(100% + 48px); margin-inline: -24px; }
  .hero__art img { mask-image: none; -webkit-mask-image: none; border-radius: 0; box-shadow: none; width: 100%; }

  .ticks:not(.ticks--plain) { padding: 24px 22px; }
  .ticks, .ticks--plain { grid-template-columns: 1fr; }
  .ticks--split::after { display: none; }

  /* Footer: every link a finger-sized row, social buttons 44px. */
  .site-footer__explore li { margin-bottom: 0; }
  .site-footer__explore li a { display: inline-block; padding-block: 10px; }
  .site-footer .icon-list a { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .site-footer__legal { gap: 0 14px; }
  .site-footer__legal a { display: inline-block; padding-block: 10px; }
  .socials a { width: 44px; height: 44px; }
}

@media (max-width: 560px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding-block: 20px; }
  .stat + .stat::after { display: none; }
  .stat:nth-child(even)::after { display: block; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line-strong); }
  .site-footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .featured__logos { gap: 10px; flex-wrap: nowrap; }
  .featured__logos img { width: calc((100% - 40px) / 5); height: auto; aspect-ratio: 1; }
  .hero__badge img { width: 200px; }
  .btn { padding: 13px 24px; }
  .btn--ghost { padding-block: 11.5px; }
}

@media (max-width: 374px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat { padding-block: 18px; }
  .stat + .stat::after { display: none; }
  .stat + .stat { border-top: 1px solid var(--line-strong); }
}

/* Home key-figure band: three across down to tablet, then the cells stack
   inside the same band on phones. Overrides the hairline-grid rules above. */
@media (max-width: 1080px) {
  .stats--key .stat { padding: 26px 18px; }
}
@media (max-width: 640px) {
  .stats--key .stats__grid { grid-template-columns: 1fr 1fr; }
  .stats--key .stat { padding: 20px 8px; }
  /* two cells across a phone: the figure scales with the width and may wrap
     ("300 Million" / "+") instead of running into the next cell */
  .stats--key .stat__num { font-size: clamp(1.2rem, 5.4vw, 1.7rem); white-space: normal; text-wrap: balance; letter-spacing: -.01em; margin-bottom: 4px; }
  .stats--key .stat__label { font-size: .8rem; }
  .stats--key .stat + .stat { border-left: 0; }
  .stats--key .stat:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .1); }
  .stats--key .stat:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .1); }
  .stats--key .stat::after { display: none; }
}

/* Scroll-in reveals live in the Motion section at the end of this file
   ([data-reveal] groups and [data-reveal-self] singles, driven by main.js). */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:hover, .btn:hover svg, .card:hover, .tile:hover,
  .trainer:hover, .gallery img:hover, .socials a:hover,
  .featured__logos img:hover, .stories-car__btn:hover, .story-card:hover, .scard:hover { transform: none; }
}

/* ==========================================================================
   Inner-page components
   ========================================================================== */

/* ---------- Pricing ----------
   (The tier row + includes panel lives at the end of this file under
   "Textured dark surfaces + membership pricing panel".) */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #201d1a;              /* a step warmer/lighter than the ground, so the card reads raised */
  color: var(--text-invert);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.2vw, 38px) clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.plan__name {
  font-family: var(--font-alt);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--amber);
  margin-bottom: 6px;
}
.plan__price { font-size: 1.9rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 4px; }
.plan__per { font-size: 1rem; font-weight: 400; color: var(--text-invert-muted); }
.plan__note { font-size: .875rem; color: var(--text-invert-muted); margin-bottom: 20px; }
.plan ul { margin-bottom: 24px; }
.plan ul li {
  position: relative;
  padding: 7px 0 7px 26px;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text-invert-muted);
  text-wrap: pretty;
}
.plan ul li + li { border-top: 1px solid rgba(255, 255, 255, .06); }
.plan ul li::before {
  content: "";
  position: absolute; left: 0; top: 13px;
  width: 14px; height: 14px;
  background: var(--amber);
  -webkit-mask: var(--tick-simple) center / contain no-repeat;
  mask: var(--tick-simple) center / contain no-repeat;
  --tick-simple: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.plan .btn { margin-top: auto; align-self: center; }

/* Tier accents: a coloured top rule, tinted name and a faint interior sheen,
   so GOLD and SILVER are felt, not just read. */
.plan--gold,
.plan--silver { padding-top: calc(clamp(28px, 3.2vw, 38px) + 4px); }
.plan--gold::before,
.plan--silver::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
}
.plan--gold {
  border-color: rgba(254, 216, 0, .32);
  box-shadow: 0 0 0 1px rgba(254, 216, 0, .12), var(--shadow-lg);
  background-image: radial-gradient(120% 70% at 50% 0%, rgba(254, 216, 0, .06), transparent 55%);
}
.plan--gold::before { background: linear-gradient(90deg, var(--gold), var(--amber) 55%, var(--orange)); }
.plan--gold .plan__name { color: var(--gold); }
.plan--gold ul li::before { background: var(--gold); }
.plan--silver {
  background-image: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .05), transparent 55%);
  border-color: rgba(255, 255, 255, .16);
}
.plan--silver::before { background: linear-gradient(90deg, #eceef1, #a7adb5); }
.plan--silver .plan__name { color: #d8dce1; }
.plan--silver ul li::before { background: #c3c9d0; }

.plans-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 26px; }

/* ---------- Comparison ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare__col {
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-xs);
}
.compare__col--win {
  background: var(--bg-card);
  color: var(--text-invert);
  border-color: rgba(246, 130, 31, .5);
  box-shadow: 0 0 0 1px rgba(246, 130, 31, .22), var(--shadow-md);
}
.compare__head { font-family: var(--font-alt); font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 6px; }
.compare__sub { font-size: .925rem; color: var(--text-muted); margin-bottom: 22px; }
.compare__col--win .compare__sub { color: var(--amber); }
.compare li { position: relative; padding-left: 26px; margin-bottom: 11px; font-size: .95rem; line-height: 1.6; }
.compare li:last-child { margin-bottom: 0; }
.compare li::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 15px; height: 15px;
  background: #bdb8b3;
  -webkit-mask: var(--mk) center / contain no-repeat;
  mask: var(--mk) center / contain no-repeat;
  --mk: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
}
.compare__col--win li::before {
  background: var(--green);
  --mk: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* ---------- Tabs ---------- */
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--space-block);
}
.tabs__btn {
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .005em;
  background: var(--surface-2);
  color: var(--text-muted);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tabs__btn:hover { background: var(--surface-3); color: var(--ink); }
.tabs__btn[aria-selected="true"] {
  background-image: var(--grad-cta);
  color: var(--white);
  box-shadow: var(--shadow-cta);
}
.tabs__panel[hidden] { display: none; }
.tabs__caption { text-align: center; color: var(--text-muted); margin-bottom: 26px; font-size: .95rem; }

/* ---------- Time-zone pills (Live Class): a thinner second row under the band tabs ---------- */
.tz-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: calc(-1 * var(--space-block) + 12px);
  margin-bottom: var(--space-block);
}
.tz-pills__row { display: contents; }
.tz-pills__label {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 4px;
}
.tz-pill {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .005em;
  line-height: 1.2;
  background: var(--surface-2);
  color: var(--text-muted);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tz-pill:hover { background: var(--surface-3); color: var(--ink); }
.tz-pill[aria-checked="true"] {
  background-image: var(--grad-cta);
  color: var(--white);
  box-shadow: var(--shadow-cta);
}
.tz-pill:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.trainer__times .trainer__day {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 600;
  vertical-align: 1px;
  white-space: nowrap;
}
.trainer__times .trainer__ref { color: var(--text-muted); opacity: .85; }
@media (max-width: 560px) {
  .tz-pills__label { flex: 1 0 100%; text-align: center; margin: 0 0 2px; }
}

/* Live Class on a phone: the five slot tabs become a fixed bottom bar (as /my/ does), so a
   slot change never means scrolling back up past ten trainer cards; the time-zone pills
   become one horizontal scroller with 40px targets. */
@media (max-width: 760px) {
  .tabs--slots .tabs__list {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--white); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .3);
  }
  .tabs--slots .tabs__btn {
    display: grid; place-items: center; min-height: 48px; padding: 6px 2px;
    font-size: .72rem; line-height: 1.15; text-align: center; border-radius: 10px; white-space: normal;
  }
  .tabs--slots .tz-pills { margin-top: 0; flex-direction: column; align-items: stretch; gap: 8px; }
  .tabs--slots .tz-pills__label { flex: none; text-align: center; margin: 0; }
  .tabs--slots .tz-pills__row {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 8px;
    overflow-x: auto; padding: 4px 24px; margin-inline: -24px;
    min-width: 0; contain: inline-size;   /* the scroller must not widen the layout viewport */
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tabs--slots .tz-pills__row::-webkit-scrollbar { display: none; }
  .tabs--slots .tz-pill { min-height: 40px; padding: 10px 14px; font-size: .82rem; }
  .trainer__meta a { display: inline-block; min-height: 40px; padding: 10px 6px; margin: -4px 0; line-height: 20px; }
  body:has(.tabs--slots) .site-footer { padding-bottom: calc(34px + 76px); }
}

/* ---------- Live Class: the class timetable, banded by time of day ----------
   Every batch on one page, grouped under the same five bands the member area uses
   (Early morning / Mid morning / Afternoon / Evening / Night). Each band is a heading
   and a grid of trainer-forward cards: a large square headshot (initials on the brand
   gradient when there is none), the time big and bold, the name, a ladies-only pill.
   Four cards to a row on a desktop, three on a laptop, two on a tablet or phone. */
.tt-tools { margin-bottom: 26px; }
.tt-tools .tz-pills { margin: 0; }
.tt { display: grid; gap: 34px; }
.tt__head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--orange-text);
}
.tt__head::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.tt__head i { order: 3; font-style: normal; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--text-muted); }
.tt__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.tt__card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tt__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.tt__media { position: relative; background: var(--surface-2); overflow: hidden; }
.tt__photo {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: center top;
}
@media (prefers-reduced-motion: no-preference) {
  .tt__photo { transition: transform .45s var(--ease-out); }
  .tt__card:hover .tt__photo { transform: scale(1.03); }
}
.tt__photo--in {
  display: grid; place-items: center;
  font-family: var(--font-alt); font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: .02em;
  color: var(--white); background-image: linear-gradient(135deg, var(--orange) 0%, var(--amber) 60%, var(--gold) 100%);
}
.tt__body { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 14px 16px 16px; }
.tt__time { display: block; line-height: 1.2; }
.tt__time b {
  display: inline-block; color: var(--ink); font-family: var(--font-alt); font-size: 1.32rem; font-weight: 800;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tt__time .trainer__ref { display: block; margin-top: 1px; font-size: .76rem; color: var(--text-muted); white-space: nowrap; }
.tt__time .trainer__day {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted); font-size: .68rem; font-weight: 600; vertical-align: 3px; white-space: nowrap;
}
.tt__who { font-family: var(--font-alt); font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--text); }
.tt__ladies {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 3px;
  font-style: normal; font-family: var(--font-ui); font-size: .7rem; font-weight: 700; letter-spacing: .03em;
  color: #b8336a; background: #fbe4ee; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.tt__ladies::before { content: "\2640"; font-size: .95rem; line-height: 1; }
.tt__ladies--no { visibility: hidden; padding-inline: 0; }
.tt__note { max-width: 780px; margin: 30px auto 0; text-align: center; font-size: .9rem; color: var(--text-muted); line-height: 1.6; }
.tt__note .tt__ladies { margin-top: 0; vertical-align: 1px; }
#timetable .btn-row { margin-top: 24px; }

/* Chat on WhatsApp: the one action on a trainer card. WhatsApp green, white, the glyph,
   full width of the card so it reads as the card's button and is a thumb-sized target. */
.tt__wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 12px;
  border-radius: var(--radius-pill);
  background: #25d366; color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: .86rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(37, 211, 102, .9);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tt__wa svg { width: 18px; height: 18px; flex: none; }
.tt__wa:hover, .tt__wa:focus-visible { background: #1ebe5b; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(37, 211, 102, 1); }
.tt__wa:focus-visible { outline: 3px solid rgba(37, 211, 102, .45); outline-offset: 2px; }
/* the button sits on the card's bottom edge, so a row of cards with and without the
   ladies-only pill still lines up; the invisible placeholder pill is no longer needed */
.tt__body { flex: 1; }
.tt__body .tt__ladies--no { display: none; }
.tt__wa { margin-top: auto; }
.tt__body > :has(+ .tt__wa) { margin-bottom: 6px; }

/* ---------- Live Classes: a compact page ----------
   The page is a long one (a hero, the price panel, up to two promotions and five bands of
   trainer cards), so its sections sit closer than the site default: roughly half the
   section padding, tighter intros, a shorter hero, five cards to a row on a desktop. */
.lc .section { padding-block: clamp(28px, 3.5vw, 48px); }
.lc .section--tight { padding-block: clamp(24px, 3vw, 40px); }
.lc .page-hero { padding-block: clamp(32px, 3.8vw, 52px) clamp(34px, 4vw, 56px); }
.lc .page-hero__kicker { margin-bottom: 12px; }
.lc .page-hero__title { margin-bottom: 10px; }
.lc .section-title { margin-bottom: 12px; }
.lc .section-intro { margin-bottom: clamp(18px, 2.2vw, 28px); }
.lc .pricing__body { padding: clamp(22px, 2.8vw, 30px) clamp(24px, 4vw, 48px) clamp(22px, 2.8vw, 32px); }
.lc .pricing__body .btn-row { margin-top: 20px !important; }
.lc .ptier { padding: 22px 20px 20px; }
.lc .pricing__includes { margin-top: 10px; }
.lc .pricing__includes li { padding-block: 6px; }
.lc .promos__grid { gap: 20px; }
.lc .tt-tools { margin-bottom: 18px; }
.lc .tt { gap: 26px; }
.lc .tt__head { margin-bottom: 12px; }
.lc .tt__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.lc .tt__note { margin-top: 20px; }
.lc #timetable .btn-row { margin-top: 18px; }
.lc .ticks--plain li { padding-block: 6px; }
@media (max-width: 760px) {
  .lc .section { padding-block: 28px; }
  .lc .tt { gap: 22px; }
  .lc .tt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tt__wa { font-size: .8rem; padding: 10px 8px; gap: 6px; }
}
@media (max-width: 400px) {
  .tt__wa span { font-size: .74rem; }
}
@media (max-width: 760px) {
  .tt { gap: 28px; }
  .tt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tt__body { padding: 11px 12px 13px; gap: 4px; }
  .tt__time b { font-size: 1.15rem; }
  .tt__who { font-size: .93rem; }
  .tt-tools .tz-pills { flex-direction: column; align-items: stretch; gap: 8px; }
  .tt-tools .tz-pills__label { flex: none; text-align: center; margin: 0; }
  /* every zone visible at once: the pills wrap into rows instead of scrolling sideways */
  .tt-tools .tz-pills__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 4px 0; }
  .tt-tools .tz-pill { min-height: 38px; padding: 8px 12px; font-size: .78rem; }
}

/* ---------- Trainer cards ---------- */
.trainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
.trainer {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.trainer:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.trainer__pic {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  margin: 0 auto 14px;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--amber), var(--shadow-sm);
}
.trainer__name { font-family: var(--font-alt); font-weight: 700; font-size: 1.05rem; line-height: 1.35; margin-bottom: 6px; }
.trainer__cert {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--green);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  margin-bottom: 10px;
}
.trainer__times { font-size: .9rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.55; }
.trainer__times b { color: var(--orange); font-weight: 600; }
.trainer__meta { font-size: .85rem; color: var(--text-muted); line-height: 1.55; }
.trainer__meta a { color: var(--orange); font-weight: 600; transition: color var(--dur) var(--ease); }
.trainer__meta a:hover { color: var(--ink); }
/* the Our Team page groups the cards under the slot headings (server/team.py) */
.team-group { margin-top: 34px; }
.team-group:first-of-type { margin-top: 22px; }
.team-group__h { font-size: 1.35rem; margin-bottom: 4px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.team-group__n { font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.team-group__cap { color: var(--text-muted); font-size: .92rem; margin-bottom: 16px; }
.trainer__ladies {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #b8336a;
  background: #fde7ef;
  border: 1px solid #e8b4c8;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  margin: 0 3px 10px;
}
.trainer__cert + .trainer__ladies { margin-left: 4px; }
.trainer__pic--in { display: flex; align-items: center; justify-content: center; font-family: var(--font-alt); font-weight: 700; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, var(--orange), var(--amber)); }

/* ---------- Video grid ---------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.video-grid .vid {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-md);
}
.video-grid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Story list (success stories page) ---------- */
.story-list { display: grid; gap: 24px; }
.story-list .story { min-height: 0; box-shadow: var(--shadow-md); }
.story-list .story:nth-child(even) .story__media { order: 2; }

/* ---------- Feature tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.tile {
  background: var(--bg-card);
  color: var(--text-invert);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  border: 1px solid var(--line-invert);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tile:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .18); box-shadow: var(--shadow-md); }
.tile__title {
  font-family: var(--font-alt);
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 8px;
  font-size: 1.05rem;
  line-height: 1.35;
}
.tile p { font-size: .95rem; line-height: 1.65; color: var(--text-invert-muted); }

@media (max-width: 860px) {
  .compare { grid-template-columns: 1fr; }
  .story-list .story:nth-child(even) .story__media { order: 0; }
}

/* ==========================================================================
   Success stories — filterable index
   ========================================================================== */

/* Accessible text tint of the brand green: same hue, dark enough for small
   text on white (≈5:1). The --green token itself is untouched. */
:root { --green-text: #3f7d10; }

/* --- Hero with photo backdrop (reuses the .band overlay pattern) --- */
.page-hero--photo {
  background-size: cover;
  background-position: center 30%;
  background-color: var(--ink);
}
.page-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 8, 8, .8) 0%, rgba(8, 8, 8, .64) 45%, rgba(8, 8, 8, .88) 100%),
    radial-gradient(120% 80% at 50% 50%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .35) 100%);
}
.page-hero--photo .wrap { position: relative; }
.page-hero__kicker {
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 18px;
}

/* --- Proof strip: one dark band, four figures --- */
.proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-card);
  color: var(--text-invert);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 1060px;
  margin: 0 auto var(--space-section-tight);
}
.proof__item { position: relative; text-align: center; padding: clamp(22px, 2.6vw, 34px) 18px; }
.proof__item + .proof__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .18), transparent);
}
.proof__num {
  font-weight: 700;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--amber);
  margin-bottom: 6px;
}
.proof__cap { font-size: .92rem; line-height: 1.45; color: var(--text-invert-muted); text-wrap: balance; }

/* --- Filter chips ---
   An explicit grid, not flex-wrap: 4+4 at desktop, 2x4 on smaller screens,
   so no line is ever left with a stray chip or two. */
.filters {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-strong);
  background: var(--white);
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .92rem;
  color: var(--text-muted);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.filter:hover { border-color: var(--orange); color: var(--orange); }
.filter[aria-pressed="true"] {
  background-image: var(--grad-cta);
  border-color: transparent;
  color: var(--white);
  box-shadow: var(--shadow-cta);
}
.filter[aria-pressed="true"] .n { background: rgba(255, 255, 255, .22); }
.filter-count {
  text-align: center;
  font-size: .95rem;
  color: var(--text-muted);
  margin-bottom: var(--space-block);
}

/* --- Story card grid ---
   Rows stretch so every card in a row is the same height; quotes are clamped
   by JS (see initStoryFilters) with a "Read her full story" toggle, and the
   tag row is pinned to the bottom. No ragged staircase. */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.scard {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.scard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.scard[hidden] { display: none; }

.scard__media { position: relative; background: var(--bg-card); overflow: hidden; }
.scard__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .scard__media img { transition: transform .45s var(--ease-out); }
  .scard:hover .scard__media img { transform: scale(1.03); }
}
/* Soft fade at the base so the stat pill always sits on something dark */
.scard__media::after {
  content: "";
  position: absolute;
  inset: 58% 0 0 0;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0), rgba(15, 15, 15, .5));
  pointer-events: none;
}
.scard__stat {
  position: absolute;
  z-index: 1;
  left: 14px;
  bottom: 14px;
  background: var(--ink);
  color: var(--amber);
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .01em;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 201, 51, .35);
  box-shadow: var(--shadow-md);
}
.scard__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 24px 24px; }
.scard__name {
  font-family: var(--font-alt);
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--text);
}
.scard__sub { font-size: .9rem; font-weight: 700; color: var(--green-text); line-height: 1.5; }
.scard__quote { font-size: .95rem; line-height: 1.65; color: var(--text-muted); margin: 2px 0 0; }
.scard.is-clamped .scard__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.scard--featured.is-clamped .scard__quote { -webkit-line-clamp: 6; }
.scard__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .01em;
  color: var(--orange);
  transition: color var(--dur) var(--ease);
}
.scard__more:hover { color: #c8650f; }
.scard__more::after {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--chev-sm) center / contain no-repeat;
  mask: var(--chev-sm) center / contain no-repeat;
  transition: rotate .25s var(--ease);
  --chev-sm: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.scard__more[aria-expanded="true"]::after { rotate: 180deg; }
.scard__more[hidden] { display: none; }

.scard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; }
.tag {
  font-family: var(--font-alt);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}
.tag--hero { background: #fdf0e2; border-color: #f6d9bd; color: #a8560c; }

/* --- Featured cards: full-width, dark, photo beside the story --- */
.scard--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(300px, 440px) 1fr;
  background: var(--bg-card);
  border-color: transparent;
  color: var(--text-invert);
  box-shadow: var(--shadow-md);
}
.scard--featured:hover { transform: none; box-shadow: var(--shadow-lg); }
.scard--featured .scard__media img { height: 100%; aspect-ratio: auto; min-height: 320px; }
.scard--featured .scard__body {
  padding: clamp(26px, 3.4vw, 46px);
  gap: 10px;
  justify-content: center;
}
.scard__flag {
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0;
}
.scard--featured .scard__name { color: var(--white); font-size: clamp(1.3rem, 2vw, 1.5rem); }
.scard--featured .scard__sub { color: var(--green); font-size: .95rem; }
.scard--featured .scard__quote { color: var(--text-invert-muted); font-size: 1.02rem; line-height: 1.7; }
.scard--featured .scard__stat { left: 16px; bottom: 16px; font-size: 1.05rem; }
.scard--featured .scard__more { color: var(--amber); }
.scard--featured .scard__more:hover { color: var(--gold); }
.scard--featured .tag { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .78); }
.scard--featured .tag--hero { background: rgba(246, 130, 31, .18); border-color: rgba(246, 130, 31, .4); color: var(--amber); }
.scard--featured :focus-visible { outline-color: var(--amber); }

/* --- Empty state --- */
.no-results {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  padding: 52px 28px;
  background: var(--white);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}
.no-results[hidden] { display: none; }
.no-results__title {
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 6px;
}
.no-results .btn { margin-top: 18px; }
.btn--ghost-lt { color: var(--orange); border: 1.5px solid rgba(246, 130, 31, .55); padding-block: 12.5px; }
.btn--ghost-lt:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(246, 130, 31, .8);
}
.btn--ghost-lt:active { transform: translateY(0); }

/* --- Closing invitation --- */
.stories-cta {
  margin-top: var(--space-section-tight);
  padding-top: var(--space-section-tight);
  border-top: 1px solid var(--line-strong);
}

/* --- Responsive --- */
@media (max-width: 860px) {
  .scard--featured { grid-template-columns: 1fr; }
  .scard--featured .scard__media img { height: auto; aspect-ratio: 5 / 4; min-height: 0; }
  /* Stacked, the pill would sit on the caption baked into the photo's bottom-left corner. */
  .scard--featured .scard__stat { top: 14px; bottom: auto; }
}
@media (max-width: 700px) {
  .scard__more { min-height: 44px; padding: 8px 0; margin: -6px 0; }
  .proof { grid-template-columns: 1fr 1fr; }
  .proof__item:nth-child(3)::before { display: none; }
  .proof__item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .1); }
}
@media (max-width: 900px) {
  .filters { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 560px) {
  .story-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 430px) {
  /* Columns size to their content (shrinkable on very narrow screens),
     so every chip stays on one line at 390 and 360. */
  .filters { grid-template-columns: repeat(2, minmax(0, auto)); gap: 8px; }
  .filter { min-height: 44px; padding: 9px 12px; font-size: .84rem; }
}
@media (max-width: 374px) {
  .filter { min-height: 44px; padding: 8px 9px; font-size: .8rem; gap: 6px; }
}

/* ==========================================================================
   Textured dark surfaces + membership pricing panel
   One system for both pricing sections: a premium dark ground (SVG grain +
   warm glows, all inline) carrying the price tiers and the includes list.
   ========================================================================== */
.section--texture {
  background-color: var(--bg-dark);
  background-image: var(--noise), var(--glow-a), var(--glow-b);
}

/* --- The panel: tiers on top, one shared includes list below --- */
.pricing {
  max-width: 1020px;
  margin-inline: auto;
  background-color: var(--bg-dark);
  background-image: var(--noise), var(--glow-a), var(--glow-b);
  color: var(--text-invert);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.pricing__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ptier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  padding: 30px 20px 26px;
}
.ptier + .ptier::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .16), transparent);
}
.ptier__term {
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-invert-muted);
  margin: 0 0 4px;
}
.ptier__amount {
  font-weight: 700;
  font-size: clamp(1.45rem, 2.4vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--amber);
  white-space: nowrap;
  margin: 0;
}
.ptier__note { font-size: .82rem; color: var(--text-invert-muted); margin: 4px 0 0; }

.ptier--featured { background: rgba(246, 130, 31, .08); }
/* the whole tier is the tap target, not just the Join button below the list */
.ptier__link { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; color: inherit; text-decoration: none; border-radius: 12px; transition: background .15s, transform .15s; }
.ptier__link:hover, .ptier__link:focus-visible { background: rgba(255, 255, 255, .06); transform: translateY(-2px); outline: none; }
.ptier__link:focus-visible { box-shadow: 0 0 0 3px rgba(246, 130, 31, .45); }
.ptier__cta { margin-top: 10px; font-size: .78rem; font-weight: 700; color: var(--orange); opacity: 0; transition: opacity .15s; }
.ptier__link:hover .ptier__cta, .ptier__link:focus-visible .ptier__cta { opacity: 1; }
@media (hover: none) { .ptier__cta { opacity: 1; } }
.ptier--featured::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-cta);
}
.ptier__badge {
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--amber);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  margin: 0 0 8px;
}

.pricing__body { padding: clamp(28px, 3.5vw, 40px) clamp(24px, 4vw, 48px) clamp(30px, 3.5vw, 42px); }
.pricing__name {
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.3;
  letter-spacing: -.005em;
  text-align: center;
  color: var(--white);
  margin: 0;
}
/* The same small brand dash the stats row wears — one family. */
.pricing__name::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin: 14px auto 6px;
  border-radius: var(--radius-pill);
  background: var(--grad-cta);
}
.pricing__includes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 44px;
  max-width: 860px;
  margin: 14px auto 0;
}
.pricing__includes li {
  position: relative;
  padding: 9px 0 9px 28px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--text-invert-muted);
  text-wrap: pretty;
}
.pricing__includes li::before {
  content: "";
  position: absolute; left: 0; top: 14px;
  width: 15px; height: 15px;
  background: var(--amber);
  -webkit-mask: var(--tick-simple) center / contain no-repeat;
  mask: var(--tick-simple) center / contain no-repeat;
  --tick-simple: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

@media (max-width: 860px) {
  .pricing__includes { grid-template-columns: 1fr; max-width: 560px; margin-top: 10px; }
}

/* Tiers stack into rows: term/note left, price right, divider horizontal. */
@media (max-width: 680px) {
  .pricing__tiers { grid-template-columns: 1fr; }
  .ptier {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    align-items: center;
    text-align: left;
    padding: 18px 22px;
  }
  .ptier__badge { grid-column: 1 / -1; justify-self: start; margin-bottom: 6px; }
  .ptier__term { grid-column: 1; margin: 0; }
  .ptier__amount { grid-column: 2; grid-row: span 2; align-self: center; }
  .ptier__note { grid-column: 1; margin: 2px 0 0; }
  .ptier + .ptier::before {
    top: 0;
    left: 8%;
    right: 8%;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
  }
}

/* ==========================================================================
   Light photo wash — dancers behind a near-white veil.
   Used on the trainer schedule so the big pale expanse behind 28 white cards
   carries some of the brand's movement without competing with the cards.
   ========================================================================== */
.section--photo-wash {
  position: relative;
  background-color: var(--bg-light);
  background-image:
    linear-gradient(rgba(250, 250, 249, .93), rgba(250, 250, 249, .96)),
    url("../img/untitled-design-3.webp");
  background-size: auto, cover;
  background-position: center, center 28%;
  background-repeat: no-repeat;
  /* Deliberately NOT background-attachment: fixed — it stutters badly on iOS
     and forces expensive repaints on long pages. */
}

/* On small screens the photo is mostly hidden behind stacked cards anyway,
   so drop it and keep the paint cheap. */
@media (max-width: 700px) {
  .section--photo-wash { background-image: none; }
}

/* ==========================================================================
   About page — proof / science / women
   The page is one argument in three pillars; these are its components.
   Pillar cards overlap the hero, the ledger is a dark "receipts" panel,
   the hour-bar + phase legend explain the method, and the stage cards put
   four life stages in members' own (verbatim) words.
   ========================================================================== */

/* --- Section kicker: names the pillar the section proves --- */
.section-kicker {
  text-align: center;
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-text);
  margin: 0 0 12px;
}
.section--dark .section-kicker,
.section--darker .section-kicker { color: var(--amber); }

/* Sub-headings inside a long section — same voice, one step down. */
.section-title--sub {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin-top: var(--space-section-tight);
}

/* --- Pillar cards: the argument's spine, pulled up over the hero --- */
.pillars {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: -48px;
  margin-bottom: var(--space-section-tight);
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px 20px;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.pillar__num {
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .14em;
  color: var(--orange-text);
  margin: 0;
}
.pillar__title {
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}
.pillar > p:not(.pillar__num):not(.pillar__title):not(.pillar__go) {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.pillar__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: auto 0 0;
  padding-top: 12px;
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .85rem;
  color: var(--orange-text);
}
.pillar__go svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.pillar:hover .pillar__go svg { transform: translateX(3px); }

/* --- Receipts ledger: member-reported outcomes, one dark panel --- */
.ledger {
  max-width: 920px;
  margin-inline: auto;
  background-color: var(--bg-dark);
  background-image: var(--noise), var(--glow-a), var(--glow-b);
  color: var(--text-invert);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(28px, 3.4vw, 42px) clamp(22px, 3.6vw, 46px);
}
.ledger__head {
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.35;
  text-align: center;
  color: var(--white);
  margin-bottom: 8px;
}
.ledger__note {
  text-align: center;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-invert-muted);
  max-width: 640px;
  margin: 0 auto 16px;
}
.ledger li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: baseline;
  padding-block: 13px;
}
.ledger li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
.ledger__n {
  font-weight: 700;
  font-size: clamp(1.4rem, 2.3vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--amber);
  text-align: right;
  white-space: nowrap;
}
.ledger__t { font-size: .97rem; line-height: 1.65; color: var(--text-invert-muted); }
.ledger__t b { color: var(--white); font-weight: 600; }

/* --- The hour, drawn to scale --- */
.hourbar {
  display: flex;
  max-width: 900px;
  margin: 0 auto;
  height: 52px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, .14);
}
.hourbar__seg {
  display: grid;
  place-items: center;
  min-width: 0;
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .95rem;
  color: var(--ink);
}
.hourbar__seg + .hourbar__seg { border-left: 1px solid rgba(15, 15, 15, .25); }
.hourbar__seg--warm,  .phase__dot--warm   { background: var(--amber); }
.hourbar__seg--cardio, .phase__dot--cardio { background: var(--orange); }
.hourbar__seg--strength, .phase__dot--strength { background: var(--green); }
.hourbar__seg--boost, .phase__dot--boost  { background: var(--gold); }
.hourbar__seg--stretch, .phase__dot--stretch { background: #e9e6e3; }
.hourbar__cap {
  text-align: center;
  font-size: .88rem;
  color: var(--text-invert-muted);
  margin: 12px 0 0;
}

.phases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 26px auto 0;
}
.phase {
  background: var(--bg-card);
  border: 1px solid var(--line-invert);
  border-radius: var(--radius);
  padding: 20px 18px;
}
.phase__min {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-invert-muted);
  margin: 0 0 8px;
}
.phase__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.phase__name {
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--white);
  margin: 0 0 8px;
}
.phase p:last-child { font-size: .88rem; line-height: 1.62; color: var(--text-invert-muted); margin: 0; }

/* --- S-M-A-R-T tiles --- */
.smart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin-inline: auto;
}
.smart__tile {
  background: var(--bg-card);
  border: 1px solid var(--line-invert);
  border-radius: var(--radius);
  padding: 24px 18px 22px;
  text-align: center;
}
.smart__letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1;
  margin: 0;
}
.smart__word {
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .98rem;
  color: var(--white);
  margin: 10px 0 6px;
}
.smart__tile p:last-child { font-size: .85rem; line-height: 1.6; color: var(--text-invert-muted); margin: 0; }

/* --- Credentials panel --- */
.cred {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
  max-width: 920px;
  margin: var(--space-block) auto 0;
  background: var(--bg-card);
  border: 1px solid var(--line-invert);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px);
}
.cred img { width: 100%; border-radius: var(--radius-xs); }
.cred p { font-size: .97rem; line-height: 1.7; color: var(--text-invert-muted); }
.cred p + p { margin-top: .9em; }
.cred b { color: var(--amber); font-weight: 600; }

/* --- Life-stage cards: her decade, her words --- */
.stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 1160px;
  margin-inline: auto;
}
.stage {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.stage:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.stage > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top; }
.stage__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; }
.stage__badge {
  align-self: flex-start;
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a8560c;
  background: #fdf0e2;
  border: 1px solid #f6d9bd;
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  margin: 0;
}
.stage__quote { font-size: .92rem; line-height: 1.62; color: var(--text-muted); margin: 0; }
.stage__who {
  margin: auto 0 0;
  padding-top: 8px;
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .88rem;
  color: var(--text);
}
.stage__who span { color: var(--green-text); }

/* --- Responsive --- */
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; gap: 12px; margin-top: -34px; }
}
@media (max-width: 700px) {
  .cred { grid-template-columns: 1fr; }
  .cred img { max-width: 210px; }
}
@media (max-width: 560px) {
  .ledger li { grid-template-columns: 64px 1fr; gap: 14px; }
  .hourbar { height: 44px; }
  .hourbar__seg { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pillar:hover, .stage:hover, .pillar:hover .pillar__go svg { transform: none; }
}

/* ==========================================================================
   About — the team, three matched cards
   Deepti (founder poster, square-native), Archana (monogram — no verified
   portrait exists, and a face must never be captioned on guesswork), Chanda
   (verified headshot). Same footprint, same rhythm; one media slot simply
   holds a designed monogram instead of a photo.
   ========================================================================== */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1120px;
  margin-inline: auto;
}
.person {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line-invert);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.person:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(255, 255, 255, .18); }
.person__media { aspect-ratio: 1 / 1; background: #201d1a; overflow: hidden; }
.person__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* The monogram slot: same textured dark ground as the pricing panel, a brand-
   gradient initial, and an honest note — deliberate, never a broken image. */
.person__media--mono {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  background-color: var(--bg-dark);
  background-image: var(--noise), var(--glow-a), var(--glow-b);
}
.mono {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-image: var(--grad-cta);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4rem;
  line-height: 1;
  box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.mono__note {
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-invert-muted);
  margin: 0;
}
.person__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px 22px 22px; }
.person__body > p { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--text-invert-muted); }
p.person__name {
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: 1.16rem;
  line-height: 1.3;
  color: var(--white);
}
p.person__role {
  font-family: var(--font-alt);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .02em;
  color: var(--amber);
}
p.person__fact {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--font-alt);
  font-weight: 800;
  font-size: .84rem;
  color: var(--amber);
}

/* Two-up photo strip: the wide trainers group sets the row height, the
   portrait trio fills beside it (faces sit high, hence the raised focus). */
.team-photos {
  /* Single column: the trio is cropped to a wide headshot band, so it needs the
     full measure. Side by side in a narrow column it squashed to a letterbox. */
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1000px;
  margin: var(--space-block) auto 0;
}
.team-photos img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.team-photos img { aspect-ratio: 2.1 / 1; }
.team-photos__cap {
  text-align: center;
  max-width: 720px;
  margin: 16px auto 0;
  font-size: .92rem;
  color: var(--text-invert-muted);
}

@media (max-width: 900px) {
  .team { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 700px) {
  .team-photos { grid-template-columns: 1fr; max-width: 560px; }
  .team-photos img { aspect-ratio: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .person:hover { transform: none; }
}

/* ---------- Progress Partner login ---------- */
.login-section {
  min-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  padding-block: clamp(48px, 6vw, 80px) clamp(48px, 6vw, 80px);
  /* the studio photo, very faint, under a near-black veil */
  background: linear-gradient(rgba(23, 23, 23, .94), rgba(23, 23, 23, .94)), var(--ink) url("../img/untitled-design-3.webp") center / cover no-repeat;
  color: var(--text-invert);
}
.login-section .wrap { display: flex; justify-content: center; width: 100%; }
.login-card {
  width: 100%;
  max-width: 440px;
  padding: 40px 36px;
  color: var(--ink);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
}
.login-card__title { font-size: 1.9rem; text-align: center; margin: 0 0 8px; }
.login-card__sub { text-align: center; color: var(--text-muted); font-size: .95rem; margin: 0 0 28px; }
.field { display: block; margin-bottom: 18px; }
.field__label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.field__input {
  width: 100%;
  padding: 13px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg-lighter);
  border: 1.5px solid var(--surface-3);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246, 130, 31, .18); }
.field__input.is-invalid { border-color: #d64545; }
.field__error { display: block; min-height: 1.1em; margin-top: 5px; font-size: .8rem; color: #d64545; }
.login-card__btn { width: 100%; justify-content: center; margin-top: 8px; }
@media (max-width: 480px) {
  .login-card { padding: 30px 22px; }
  .login-card__title { font-size: 1.6rem; }
}

/* ---------- Ask Deepti ---------- */
.ask__hero { background: var(--ink); color: var(--text-invert); padding-block: clamp(110px, 10vw, 140px) 34px; }
.ask__hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ask__title { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 6px; }
.ask__sub { margin: 0; color: var(--text-invert-muted); }
.btn--sm { padding: 9px 18px; font-size: .85rem; }
.ask__body { padding-block: 36px 72px; }
.ask__grid { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 28px; align-items: start; }
/* chat alone (files panel hidden: everyone but Superuser) -> one column, the
   full width of .wrap. It used to be capped at 860px and centred; since the
   Next-classes strip sits full-width above it on every tab, the chat now runs
   edge to edge with it (Admin Ops, Progress Partner), the input row included. */
.ask__grid--single,
.ask__grid:has(#ask-files[hidden]) { grid-template-columns: 1fr; max-width: none; }
.ask__panel { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 24px; }
.ask__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ask__panel h2 { font-size: 1.15rem; margin: 0; }
.ask__count { font-size: .8rem; color: var(--text-muted); }
.ask__hint { font-size: .85rem; color: var(--text-muted); margin: 8px 0 16px; }
.ask__empty { font-size: .9rem; color: var(--text-muted); text-align: center; padding: 18px 0 6px; }

.dropzone { display: flex; align-items: center; gap: 14px; padding: 18px; border: 2px dashed var(--surface-3); border-radius: var(--radius); cursor: pointer; background: var(--bg-lighter); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.dropzone:hover, .dropzone.is-over { border-color: var(--orange); background: #fff7f0; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone__icon { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--grad-cta); color: #fff; display: grid; place-items: center; }
.dropzone__icon svg { width: 18px; height: 18px; transform: rotate(-90deg); }
.dropzone__text { font-size: .9rem; line-height: 1.35; }
.dropzone__text small { color: var(--text-muted); }

.upload { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; padding: 8px 4px; border-bottom: 1px solid var(--surface-2); }
.upload__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__state { color: var(--text-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }

.filelist { list-style: none; margin: 14px 0 0; padding: 0; }
.filelist__item { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--surface-2); }
.filelist__name { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist__meta { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.filelist__err { font-size: .78rem; color: #d64545; margin-top: 4px; }
.filelist__actions { display: flex; gap: 4px; }
.iconbtn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--surface-3); background: var(--white); color: var(--text-muted); font-size: 15px; cursor: pointer; transition: all var(--dur) var(--ease); }
.iconbtn:hover { border-color: var(--orange); color: var(--orange); }
.iconbtn--danger:hover { border-color: #d64545; color: #d64545; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.pill--wait { background: #f1efec; color: var(--text-muted); }
.pill--work { background: #fff1e3; color: #b85c0a; }
.pill--ok { background: #e8f6dc; color: #3d7a0f; }
.pill--bad { background: #fde8e8; color: #b42323; }
.spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.persona { margin-top: 22px; border-top: 1px solid var(--surface-2); padding-top: 14px; }
.persona summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.persona textarea { width: 100%; margin-top: 12px; font: inherit; font-size: .85rem; line-height: 1.45; padding: 12px; border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); resize: vertical; }
.persona textarea:focus { outline: none; border-color: var(--orange); }
.btn-row--left { justify-content: flex-start; align-items: center; margin-top: 12px; }
.ask__saved { font-size: .85rem; color: var(--text-muted); }

.ask__chat { display: flex; flex-direction: column; min-height: 560px; height: calc(100vh - 300px); max-height: 820px; }
.chat { flex: 1; overflow-y: auto; padding: 4px 4px 12px; display: flex; flex-direction: column; gap: 14px; }
.chat__msg { display: flex; flex-direction: column; max-width: 82%; }
.chat__msg--me { align-self: flex-end; align-items: flex-end; }
.chat__msg--bot { align-self: flex-start; }
.chat__bubble { padding: 12px 16px; border-radius: 16px; line-height: 1.5; font-size: .95rem; }
.chat__msg--bot .chat__bubble { background: var(--bg-light); border-bottom-left-radius: 4px; }
.chat__msg--me .chat__bubble { background: var(--grad-cta); color: #fff; border-bottom-right-radius: 4px; }
.chat__sources { font-size: .74rem; color: var(--text-muted); margin: 4px 6px 0; }
.chat__form { display: flex; gap: 10px; align-items: flex-end; border-top: 1px solid var(--surface-2); padding-top: 14px; margin-top: 8px; }
.chat__form textarea { flex: 1; font: inherit; font-size: .95rem; padding: 12px 14px; border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); resize: none; max-height: 160px; }
.chat__form textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246, 130, 31, .18); }
.chat__status { font-size: .8rem; color: var(--text-muted); min-height: 1.2em; margin: 8px 2px 0; }
.chat__status.is-error { color: #d64545; }

@media (max-width: 860px) {
  .ask__grid { grid-template-columns: 1fr; }
  .ask__chat { height: auto; min-height: 480px; }
}
.chat__bubble p { margin: 0 0 .6em; } .chat__bubble p:last-child { margin-bottom: 0; }
.chat__bubble ul, .chat__bubble ol { margin: .2em 0 .6em; padding-left: 1.3em; } .chat__bubble li { margin: .15em 0; }
.chat__bubble code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.chat__msg--me .chat__bubble code { background: rgba(255,255,255,.2); }
/* OTP login + members */
.phone-row { display: flex; align-items: stretch; }
.phone-row__cc { display: flex; align-items: center; padding: 0 12px; background: var(--surface-2); border: 1.5px solid var(--surface-3); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); font-weight: 600; color: var(--text-muted); }
.phone-row .field__input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.field__input--code { text-align: center; letter-spacing: .4em; font-size: 1.3rem; font-weight: 600; }
.login-card__links { text-align: center; font-size: .85rem; margin: 14px 0 0; color: var(--text-muted); }
.login-card__links a { color: var(--orange); }
.login-card__note { text-align: center; font-size: .85rem; color: var(--text-muted); min-height: 1.2em; margin: 12px 0 0; }
.member-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 6px; }
.member-add .field__input { padding: 9px 12px; font-size: .9rem; }
.member-add select.field__input { appearance: auto; }
.member-add .btn { justify-content: center; }
.members .filelist { margin-top: 6px; }
/* usage + budgets */
.ask__actions { display: flex; gap: 10px; align-items: center; }
.ask__usage { color: var(--text-invert-muted); font-size: .9rem; }
.ask__usage.is-warn { color: var(--amber); }
.member-add .member-add__btn { grid-column: span 2; }
/* the Usage block under the classes + chat row of the Ask tab (admins; PR17 took
   it off its own /usage/ page). Two sub-tabs, Members / Questions, local to it. */
.ask-usg { margin-top: 36px; min-width: 0; }
.ask-usg[hidden] { display: none; }
.ask-usg__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 18px; padding-top: 28px; border-top: 1px solid var(--surface-3); }
.ask-usg__title { font-size: 1.35rem; margin: 0 0 4px; }
.ask-usg__sub { margin: 0; font-size: .88rem; color: var(--text-muted); }
.usg-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--white); box-shadow: var(--shadow-md); }
.usg-tab { font: inherit; font-size: .85rem; font-weight: 600; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.usg-tab:hover { color: var(--ink); }
.usg-tab.is-active { background: var(--ink); color: #fff; }
.usg-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.usg-pane[hidden] { display: none; }
@media (max-width: 700px) {
  .ask-usg { margin-top: 24px; }
  .ask-usg__head { padding-top: 20px; margin-bottom: 14px; }
  .usg-tabs { width: 100%; }
  .usg-tab { flex: 1 1 0; text-align: center; padding: 10px 12px; }
}
.usage-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.usage-week { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.usage-week .field__input { width: auto; padding: 8px 12px; font-size: .9rem; }
.usage-range { color: var(--text-muted); font-size: .9rem; }
.usage-stats { display: flex; gap: 14px; margin-left: auto; }
.stat { background: var(--white); border-radius: var(--radius); padding: 10px 16px; box-shadow: var(--shadow-md); text-align: center; min-width: 96px; }
.stat__v { display: block; font-size: 1.4rem; font-weight: 700; color: var(--orange); line-height: 1.1; }
.stat__k { font-size: .72rem; color: var(--text-muted); }
.tablewrap { overflow-x: auto; margin-top: 12px; }
.usage-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.usage-table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--surface-2); }
.usage-table td { padding: 10px; border-bottom: 1px solid var(--surface-2); vertical-align: middle; }
.usage-row { cursor: pointer; }
.usage-row:hover { background: var(--bg-lighter); }
.usage-row.is-selected { background: #fff4e8; }
.usage-num { font-weight: 700; font-size: 1.05rem; }
.usage-num.is-warn { color: #b85c0a; } .usage-num.is-over { color: #b42323; }
.usage-limit__in { width: 92px; padding: 6px 10px; font-size: .9rem; }
.usage-table__bar { min-width: 140px; }
.bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--grad-cta); }
.bar.is-warn i { background: #f0a030; } .bar.is-over i { background: #d64545; }
.usage-table__bar small { font-size: .72rem; color: var(--text-muted); }
.qlog { list-style: none; margin: 12px 0 0; padding: 0; }
.qlog__item { padding: 12px 4px; border-top: 1px solid var(--surface-2); }
.qlog__meta { font-size: .78rem; color: var(--text-muted); margin-bottom: 4px; }
.qlog__q { font-weight: 600; }
.qlog__a { margin-top: 6px; font-size: .88rem; }
.qlog__a summary { cursor: pointer; color: var(--orange); font-size: .82rem; }
.qlog__a div { margin-top: 6px; padding: 10px 12px; background: var(--bg-light); border-radius: var(--radius-sm); line-height: 1.5; }
@media (max-width: 700px) { .usage-stats { margin-left: 0; } }
/* Usage members on a phone: one card per member instead of a 640px side-scrolling table. */
@media (max-width: 700px) {
  .usage-table, .usage-table tbody { display: block; min-width: 0; width: 100%; }
  .usage-table thead { display: none; }
  .usage-table tr.usage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--surface-2); }
  .usage-table tr.usage-row.is-selected { box-shadow: inset 3px 0 0 var(--orange); padding-left: 10px; }
  .usage-table td { display: block; padding: 0 !important; border: 0; min-width: 0; }
  .usage-table td:first-child { grid-column: 1; }
  .usage-table td:first-child::after { content: "View questions \203A"; display: block; margin-top: 2px; font-size: .8rem; font-weight: 600; color: var(--orange); }
  .usage-table td:nth-child(2) { grid-column: 2; justify-self: end; }
  .usage-table td.usage-num { grid-column: 1; }
  .usage-table td.usage-num::before { content: "Used "; font-weight: 400; font-size: .8rem; color: var(--text-muted); }
  .usage-table td.usage-limit { grid-column: 2; justify-self: end; }
  .usage-table td.usage-limit::before { content: "Budget "; font-size: .8rem; color: var(--text-muted); }
  .usage-table td.usage-table__bar { grid-column: 1 / -1; min-width: 0; display: flex; align-items: center; gap: 10px; }
  .usage-table td.usage-table__bar .bar { flex: 1 1 auto; }
  .usage-table td:last-child { grid-column: 1 / -1; }
  .usage-table td:last-child::before { content: "Last question "; }
  .tablewrap { overflow: visible; }
}
[hidden] { display: none !important; }
.meter { width: min(320px, 100%); height: 6px; margin-top: 10px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--grad-cta); transition: width .4s var(--ease); }
.meter.is-warn i { background: #f0a030; } .meter.is-over i { background: #d64545; }
.login-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--text-muted); font-size: .8rem; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--surface-2); }
.btn--oauth { background: var(--white); color: var(--ink); border: 1.5px solid var(--surface-3); box-shadow: none; margin-top: 0; }
.btn--oauth:hover { border-color: var(--ink); transform: none; }
.btn--oauth svg { width: 18px; height: 18px; }
.btn--oauth--primary { border-color: var(--ink); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45); font-weight: 700; }
.btn--oauth--primary:hover { box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55); }
.login-card__note.is-error { color: #d64545; }

/* OTP step, parked. Kept in the markup so it can be switched back on (see
   OTP_ENABLED in build.py) but greyed out and inert while it is off. */
.login-otp--off { opacity: .55; filter: grayscale(1); }
.login-otp--off .field__input, .login-otp--off .btn { cursor: not-allowed; pointer-events: none; }
.login-otp--off .field__input { background: var(--surface-2); }
.login-otp__soon { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; font-size: .85rem; color: var(--text-muted); }
.login-soon {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* ==========================================================================
   Member area — mobile (login, Ask Deepti, Usage)
   Scoped to .login-section / .ask so nothing here leaks into the marketing
   pages. Touch-device rules use (pointer: coarse) so tablets get them too.
   ========================================================================== */

/* Usage-page stat tiles reuse .stat; neutralise the homepage grid hairlines
   and border-tops that its 560px/374px rules would otherwise add. */
.usage-stats .stat + .stat::after { display: none; }
.usage-stats .stat { border-top: 0; }
.ask__panel { min-width: 0; }
.ask__hero-inner > * { min-width: 0; }
.ask__sub { overflow-wrap: anywhere; }
.chat__bubble { overflow-wrap: anywhere; }
.qlog__q, .qlog__a div { overflow-wrap: anywhere; }
@media (min-width: 701px) { .usage-table { min-width: 640px; } }
.tablewrap { -webkit-overflow-scrolling: touch; }
.chat__form textarea { min-width: 0; }

/* Touch devices of any width, plus anything narrower than 860px. */
@media (max-width: 860px), (pointer: coarse) {
  /* 16px inputs stop iOS Safari zooming on focus. */
  .login-card .field__input,
  .member-add .field__input,
  .persona textarea,
  .chat__form textarea,
  .usage-week .field__input,
  .usage-limit__in { font-size: 16px; }
  .field__input--code { font-size: 1.35rem; }

  /* Tap targets. */
  .login-card__btn { min-height: 48px; }
  .btn--sm { min-height: 40px; }
  .iconbtn { width: 36px; height: 36px; font-size: 16px; }
  .filelist__actions { gap: 6px; }
  .chat__form .btn { min-height: 46px; }
  .usage-week .field__input { min-height: 44px; }
  .usage-limit__in { min-height: 40px; width: 84px; }
  .member-add .field__input { min-height: 44px; padding: 10px 12px; }
  .member-add .member-add__btn { min-height: 44px; }
  .qlog__a summary { padding-block: 10px; }
  .login-card__links a { display: inline-block; padding: 6px 4px; }
}

@media (max-width: 860px) {
  /* Keep small text readable: nothing below ~14px on a phone. */
  .field__error, .login-or, .login-card__links, .login-card__note,
  .ask__count, .ask__hint, .ask__empty, .filelist__meta, .filelist__err,
  .chat__sources, .chat__status, .pill, .stat__k, .usage-table th,
  .usage-table__bar small, .qlog__meta, .qlog__a summary, .ask__saved,
  .dropzone__text small, .upload { font-size: .875rem; }

  /* Login */
  .login-section { min-height: 100svh; padding-block: clamp(110px, 24vw, 150px) 56px; }
  .login-card { padding: 32px 24px; }

  /* Ask Deepti hero: title, signed-in line, meter, then the buttons row. */
  .ask__hero { padding-block: clamp(120px, 32vw, 140px) 28px; }   /* clears the 104px logo */
  .ask__hero-inner { flex-direction: column; align-items: stretch; gap: 18px; }
  .ask__title { font-size: clamp(1.75rem, 7vw, 2.4rem); }
  .meter { width: 100%; max-width: 360px; }
  .ask__actions { flex-wrap: wrap; }

  /* Body + grid */
  .ask__body { padding-block: 24px 56px; }
  .ask__grid { gap: 20px; }
  .ask__panel { padding: 20px 18px; }
  .ask__panel-head { flex-wrap: wrap; }

  /* Chat: grow with the page, scroll inside only once it gets tall. */
  .ask__chat { height: auto; min-height: 60vh; min-height: 60svh; max-height: none; }
  .chat { max-height: 70vh; max-height: 70svh; }
  .chat__msg { max-width: 90%; }
  .chat__form { gap: 8px; }
  .chat__form .btn { padding-inline: 18px; }

  /* Admin aside */
  .dropzone { padding: 14px; gap: 12px; }
  .persona textarea { min-height: 200px; }

  /* Usage */
  .usage-bar { gap: 12px 16px; }
  .usage-week { flex-wrap: wrap; width: 100%; }
  .usage-week .field__input { flex: 1 1 auto; min-width: 0; }
  .usage-stats { width: 100%; margin-left: 0; gap: 10px; }
  .usage-stats .stat { flex: 1 1 0; min-width: 0; padding: 10px 8px; }
  .stat__v { font-size: 1.25rem; }
  .usage-table th, .usage-table td { padding: 10px 8px; }
  .qlog__item { padding: 12px 0; }
}

@media (max-width: 480px) {
  .login-section .wrap { padding-inline: 14px; }
  .login-card { padding: 28px 18px; }
  .login-card__title { font-size: 1.45rem; }
  .login-card__sub { font-size: .9rem; margin-bottom: 22px; }
  .phone-row__cc { padding: 0 10px; }
  .field__input { padding: 12px 14px; }
  .field__input--code { letter-spacing: .35em; }

  .ask__hero-inner { gap: 14px; }
  .ask__actions { gap: 8px; }
  .ask__actions .btn { flex: 1 1 auto; justify-content: center; }
  .ask__panel { padding: 16px 14px; }
  .ask__panel h2 { font-size: 1.05rem; }

  .chat { gap: 10px; }
  .chat__msg { max-width: 92%; }
  .chat__bubble { padding: 10px 13px; font-size: .95rem; }
  .chat__form .btn { padding-inline: 14px; gap: 6px; }
  .chat__form .btn svg { display: none; }

  .dropzone { flex-direction: row; padding: 12px; }
  .dropzone__icon { width: 30px; height: 30px; }
  .filelist__item { gap: 8px; padding: 10px 0; }
  .member-add { grid-template-columns: 1fr; gap: 8px; }
  .member-add .member-add__btn { grid-column: auto; }
  .btn-row--left { gap: 10px; }
  .btn-row--left .btn { min-height: 44px; }

  .usage-bar { margin-bottom: 16px; }
  .usage-week .field__input { flex: 1 1 auto; }
  .usage-stats { gap: 8px; }
  .usage-stats .stat { display: flex; flex-direction: column; justify-content: center; min-height: 72px; padding: 8px 6px; border-radius: var(--radius-sm); }
  .stat__k { line-height: 1.2; }
  .usage-stats .stat::before { margin-bottom: 8px; }
  .stat__v { font-size: 1.15rem; }
  .usage-limit__in { width: 76px; }
  .ask__panel[style] { margin-top: 16px !important; }
}

/* ================= My Clients (DWD Connect) ================= */
#view-clients .cx-stats {display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
#view-clients .cx-stat {background: #fff; border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-md); cursor: pointer; border: 2px solid transparent; }
#view-clients .cx-stat.is-active {border-color: var(--orange); }
#view-clients .cx-stat__v {font-size: 1.6rem; font-weight: 700; color: var(--orange); line-height: 1.1; }
#view-clients .cx-stat__k {font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
#view-clients .cx-stat--warn .cx-stat__v {color: #b85c0a; }
#view-clients .cx-stat--bad .cx-stat__v {color: #b42323; }
#view-clients .cx-bar {display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
#view-clients .cx-search {flex: 1; min-width: 220px; position: relative; }
#view-clients .cx-search input {width: 100%; padding: 11px 14px 11px 38px; font: inherit; font-size: 16px; border: 1.5px solid var(--surface-3); border-radius: var(--radius-pill); background: #fff; }
#view-clients .cx-search svg {position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); }
#view-clients .chip {padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--surface-3); background: #fff; font-size: .82rem; font-weight: 600; cursor: pointer; color: var(--text-muted); }
#view-clients .chip.is-active {background: var(--ink); color: #fff; border-color: var(--ink); }
#view-clients .cx-list {background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
/* Rows tightened to match the admin lists: smaller avatar, less gutter, a shorter row. */
#view-clients .cx-row {display: grid; grid-template-columns: 34px 1.3fr .9fr 1.1fr .9fr 1.3fr 22px; gap: 10px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--surface-2); cursor: pointer; transition: background .15s; }
#view-clients .cx-row:first-child {border-top: 0; }
#view-clients .cx-row:hover {background: var(--bg-lighter); }
#view-clients .cx-row.is-open {background: #fff6ec; }
#view-clients .cx-row__head {display: grid; grid-template-columns: 34px 1.3fr .9fr 1.1fr .9fr 1.3fr 22px; gap: 10px; padding: 7px 14px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); background: var(--bg-lighter); }
#view-clients .avatar {width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: .72rem; background: var(--grad-cta); }
#view-clients .cx-name {font-size: .88rem; line-height: 1.3; }
#view-clients .cx-row .cx-sub {font-size: .72rem; }
#view-clients .cx-row .status {font-size: .74rem; padding: 3px 10px; }
/* the status-programme tier, a dot beside the name */
#view-clients .cx-tierdot {display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
#view-clients .cx-tierdot i {width: 9px; height: 9px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px #fff, 0 0 0 3px currentColor; }
#view-clients .cx-tierdot--silver {color: #6b7280; } #view-clients .cx-tierdot--silver i {background: linear-gradient(135deg, #e5e7eb, #9ca3af); }
#view-clients .cx-tierdot--gold {color: #92640a; } #view-clients .cx-tierdot--gold i {background: linear-gradient(135deg, #fde68a, #d9a520); }
#view-clients .cx-tierdot--platinum {color: #374151; } #view-clients .cx-tierdot--platinum i {background: linear-gradient(135deg, #f3f4f6, #6b7280); }
#view-clients .cx-name {font-weight: 600; }
#view-clients .cx-sub {font-size: .78rem; color: var(--text-muted); }
#view-clients .cx-plan {font-size: .85rem; }
#view-clients .status {display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
#view-clients .status i {width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#view-clients .status--ok {background: #e8f6dc; color: #3d7a0f; }
#view-clients .status--due {background: #fff1e3; color: #b85c0a; }
#view-clients .status--renew {background: #e8f0fe; color: #1d4ed8; }
#view-clients .status--concern {background: #fde8e8; color: #b42323; }
#view-clients .status--new {background: #f1efec; color: var(--text-muted); }
#view-clients .cx-persona {display: inline-block; max-width: 100%; font-size: .74rem; font-weight: 600; line-height: 1.25;
  padding: 4px 10px; border-radius: 999px; background: #f1efec; color: #4a4340; overflow-wrap: anywhere; }
#view-clients .cx-persona--good {background: #e8f6dc; color: #35690d; }
#view-clients .cx-persona--warn {background: #fff1e3; color: #a5520a; }
#view-clients .cx-persona--neutral {background: #eef1f6; color: #3b4a63; }
#view-clients .cx-persona--none {background: none; color: var(--text-muted); padding-inline: 0; font-weight: 500; }
#view-clients .cx-persona-line {display: none; margin-top: 4px; }
#view-clients .cx-persona-filter {font: inherit; font-size: .82rem; font-weight: 600; color: var(--text-muted);
  padding: 7px 11px; border: 1.5px solid var(--surface-3); border-radius: 999px; background: #fff; cursor: pointer;
  max-width: 190px; text-overflow: ellipsis; }
#view-clients .cx-persona-filter:focus {outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
#view-clients .cx-chev {color: var(--text-muted); transition: transform .2s; }
#view-clients .cx-row.is-open .cx-chev {transform: rotate(90deg); }
#view-clients .cx-empty {padding: 40px; text-align: center; color: var(--text-muted); }
#view-clients .cx-empty strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 1rem; }
#view-clients .cx-empty p { margin: 0 auto; max-width: 42ch; }
#view-clients .cx-empty .btn { margin-top: 18px; }
#view-clients .cx-empty--err strong {color: #b42323; }
#view-clients .rec {background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-top: 18px; overflow: hidden; }
#view-clients .rec__head {display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: var(--ink); color: #fff; flex-wrap: wrap; }
#view-clients .rec__head .avatar {width: 52px; height: 52px; font-size: 1.1rem; }
#view-clients .rec__title {font-size: 1.3rem; font-weight: 700; }
#view-clients .rec__meta {font-size: .85rem; color: var(--text-invert-muted); }
#view-clients .rec__actions {margin-left: auto; display: flex; gap: 8px; }
#view-clients .rec__tabs {display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--surface-2); background: var(--bg-lighter); }
#view-clients .rec__tab {padding: 12px 14px; font-size: .88rem; font-weight: 600; color: var(--text-muted); border-bottom: 3px solid transparent; cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0; font-family: inherit; }
#view-clients .rec__tab.is-active {color: var(--orange); border-bottom-color: var(--orange); }
#view-clients .rec__body {padding: 22px 24px; }
#view-clients .fgrid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; }
#view-clients .f {display: flex; flex-direction: column; gap: 5px; }
#view-clients .f label {font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
#view-clients .f input, #view-clients .f select, #view-clients .f textarea {font: inherit; font-size: 15px; padding: 9px 12px; border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); background: #fff; }
#view-clients .f input:focus, #view-clients .f select:focus, #view-clients .f textarea:focus {outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
#view-clients .f textarea {min-height: 84px; resize: vertical; }
#view-clients .f--wide {grid-column: span 3; }
#view-clients .f--2 {grid-column: span 2; }
#view-clients .sect {margin-top: 24px; }
#view-clients .sect__t {font-weight: 700; font-size: .95rem; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
#view-clients .sect__t small {font-weight: 500; color: var(--text-muted); }
#view-clients .crm-ctx {margin-top: 0; background: var(--bg-lighter); border-radius: var(--radius); padding: 14px 16px; }
#view-clients .crm-ctx .sect__t {margin-bottom: 8px; flex-wrap: wrap; }
#view-clients .crm-long + .crm-long {margin-top: 10px; }
#view-clients .crm-long__k {font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
#view-clients .crm-long p {margin: 2px 0 0; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
#view-clients .cx-nodelete {max-width: 46ch; line-height: 1.4; }
#view-clients .ndw {display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#view-clients .ndw .f textarea {min-height: 110px; }
#view-clients .ndw .f label::before {content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--orange); }
#view-clients .ndw .f:nth-child(2) label::before {background: #1d4ed8; }
#view-clients .ndw .f:nth-child(3) label::before {background: #3d7a0f; }
#view-clients .concern {display: flex; align-items: center; gap: 10px; background: #fde8e8; color: #b42323; padding: 10px 14px; border-radius: var(--radius-sm); font-size: .88rem; margin-bottom: 16px; }
#view-clients .concern button {margin-left: auto; }
#view-clients .btn--light {background: #fff; color: var(--ink); border: 1.5px solid var(--surface-3); box-shadow: none; }
#view-clients .btn--light:hover {border-color: var(--ink); }
#view-clients .btn--danger {background: #fff; color: #b42323; border: 1.5px solid #f3c2c2; box-shadow: none; }
#view-clients .row-actions {display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; align-items: center; }
#view-clients .saved {font-size: .85rem; color: #3d7a0f; }
#view-clients .prog {display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; }
#view-clients .ptable {width: 100%; border-collapse: collapse; font-size: .88rem; }
#view-clients .ptable th {text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 8px 8px; border-bottom: 1px solid var(--surface-2); }
#view-clients .ptable td {padding: 9px 8px; border-bottom: 1px solid var(--surface-2); vertical-align: top; }
#view-clients .ptable td:nth-child(-n+5) {white-space: nowrap; }
#view-clients .delta {font-size: .75rem; font-weight: 600; margin-left: 4px; }
#view-clients .delta.dn {color: #3d7a0f; }
#view-clients .delta.up {color: #b42323; }
#view-clients .chart {background: var(--bg-lighter); border-radius: var(--radius); padding: 12px; }
#view-clients .chart svg {width: 100%; height: 150px; display: block; }
#view-clients .chart__t {font-size: .78rem; color: var(--text-muted); margin-bottom: 6px; }
#view-clients .due-banner {background: #fff1e3; color: #b85c0a; padding: 10px 14px; border-radius: var(--radius-sm); font-size: .88rem; margin-bottom: 14px; display: flex; gap: 10px; align-items: center; }
#view-clients .due-banner.ok {background: #e8f6dc; color: #3d7a0f; }
#view-clients .upd {background: var(--bg-lighter); border-radius: var(--radius); padding: 16px; margin-top: 16px; }
#view-clients .upd .fgrid {grid-template-columns: repeat(4, 1fr); }
#view-clients .upd .f--wide {grid-column: span 4; }
#view-clients .mood {display: flex; gap: 6px; }
#view-clients .mood button {font-size: 1.2rem; background: #fff; border: 1.5px solid var(--surface-3); border-radius: 8px; width: 38px; height: 38px; cursor: pointer; }
#view-clients .mood button.is-on {border-color: var(--orange); background: #fff6ec; }
#view-clients .tl {list-style: none; margin: 0; padding: 0; }
#view-clients .tl li {display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--surface-2); font-size: .88rem; }
#view-clients .tl time {color: var(--text-muted); font-size: .8rem; }
#view-clients .tl .k {font-weight: 600; }
#view-clients .note-add {display: flex; gap: 10px; margin-top: 14px; }
#view-clients .note-add input {flex: 1; font: inherit; font-size: 15px; padding: 10px 12px; border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); }
#view-clients .drawer-bg {position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 90; }
#view-clients .drawer {position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: #fff; z-index: 91; box-shadow: -10px 0 40px rgba(0,0,0,.25); display: flex; flex-direction: column; }
#view-clients .drawer__h {padding: 20px 24px; border-bottom: 1px solid var(--surface-2); display: flex; align-items: center; justify-content: space-between; }
#view-clients .drawer__h h2 {margin: 0; font-size: 1.15rem; }
#view-clients .drawer__b {padding: 20px 24px; overflow: auto; flex: 1; }
#view-clients .drawer__b .fgrid {grid-template-columns: 1fr 1fr; }
#view-clients .drawer__b .f--wide {grid-column: span 2; }
#view-clients .drawer__f {padding: 16px 24px; border-top: 1px solid var(--surface-2); display: flex; justify-content: flex-end; gap: 10px; }
#view-clients .step-note {font-size: .82rem; color: var(--text-muted); margin: 0 0 14px; }
#view-clients .x {background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--text-muted); }
.toast {position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: .88rem; box-shadow: var(--shadow-md); z-index: 99; }
@media (max-width: 860px) {
#view-clients .cx-stats {grid-template-columns: repeat(2, 1fr); }
#view-clients .cx-row, #view-clients .cx-row__head {grid-template-columns: 34px 1fr auto 22px; }
#view-clients .cx-row .cx-col-plan, #view-clients .cx-row .cx-col-upd, #view-clients .cx-row__head .cx-col-plan, #view-clients .cx-row__head .cx-col-upd {display: none; }
#view-clients .cx-row .cx-col-persona, #view-clients .cx-row__head .cx-col-persona {display: none; }
#view-clients .cx-row .cx-persona-line {display: block; }
#view-clients .cx-persona-filter {min-height: 40px; flex: 0 1 auto; }
#view-clients .fgrid, #view-clients .ndw {grid-template-columns: 1fr 1fr; }
#view-clients .f--wide {grid-column: span 2; }
#view-clients .prog {grid-template-columns: 1fr; }
#view-clients .upd .fgrid {grid-template-columns: 1fr 1fr; }
#view-clients .upd .f--wide {grid-column: span 2; }
}
@media (max-width: 520px) {
#view-clients .fgrid, #view-clients .ndw, #view-clients .drawer__b .fgrid, #view-clients .upd .fgrid {grid-template-columns: 1fr; }
#view-clients .f--wide, #view-clients .f--2, #view-clients .drawer__b .f--wide, #view-clients .upd .f--wide {grid-column: span 1; }
#view-clients .cx-row {padding: 8px 12px; }
#view-clients .status {font-size: .72rem; }
#view-clients .rec__body {padding: 16px; }
#view-clients .rec__actions {margin-left: 0; width: 100%; }
#view-clients .tl li {grid-template-columns: 1fr; gap: 2px; }
}

/* in-page view tabs, in the dark hero */
.cx-tabs { display: flex; gap: 4px; margin-top: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.cx-tab { padding: 12px 18px; color: var(--text-invert-muted); font-weight: 600; font-size: .95rem; border: 0;
          border-bottom: 3px solid transparent; background: none; cursor: pointer; font-family: inherit; }
.cx-tab.is-active { color: var(--amber); border-bottom-color: var(--amber); }
.cx-tab:hover { color: #fff; }
.cx-badge { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 6px; border-radius: 999px;
            background: rgba(255,255,255,.14); font-size: .72rem; }
.cx-badge:empty { display: none; }
.cx-tab svg { display: none; }   /* the icons only show in the phone bottom bar */
@media (max-width: 720px) {
  .ask__bar .cx-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ask__bar .cx-tabs::-webkit-scrollbar { display: none; }
  .ask__bar .cx-tab { white-space: nowrap; flex: 0 0 auto; }
}
@media (max-width: 520px) { .cx-tab { padding: 11px 12px; font-size: .88rem; } }


/* Add-client drawer: never wider than the screen; bottom sheet on phones */
#view-clients .drawer { width: min(100vw, max(560px, 50vw)); max-width: 100vw; overscroll-behavior: contain; }
#view-clients .drawer__b { -webkit-overflow-scrolling: touch; }
#view-clients .drawer__f { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 720px) {
  #view-clients .drawer { width: 100vw; }
  #view-clients .drawer__b .fgrid { grid-template-columns: 1fr; }
  #view-clients .drawer__b .f--wide, #view-clients .drawer__b .f--2 { grid-column: span 1; }
}
@media (max-width: 560px) {
  #view-clients .drawer { top: auto; height: 92svh; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.28); }
  #view-clients .drawer__h { position: sticky; top: 0; background: #fff; z-index: 1; }
  #view-clients .drawer__f .btn { flex: 1; justify-content: center; }
}

/* Drawer form fills the panel: body scrolls, footer buttons stay visible */
#view-clients .drawer > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#view-clients .drawer__b { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#view-clients .drawer__f { flex: 0 0 auto; position: sticky; bottom: 0; background: #fff; }

/* Slim member-area header: tabs + who + usage in one bar */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ask__hero--slim { padding-block: clamp(84px, 8vw, 104px) 0; }
.ask__bar { display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; }
.ask__bar .cx-tabs { margin-top: 0; border-bottom: 0; flex: none; }
.ask__bar .cx-tab { padding: 14px 16px 12px; }
.ask__id { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
/* Who you are, what you have used, and the two links, all on one small line.
   Small type, but the links keep a finger-sized target through padding. */
.ask__line { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0 4px; min-width: 0; }
.ask__id .ask__sub { font-size: .85rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; flex: 0 1 auto; }
.ask__id .meter { width: 120px; margin: 0 0 4px; height: 5px; }
.ask__link { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 9px 8px;
             font: inherit; font-family: var(--font-ui, inherit); font-size: .85rem; line-height: 1;
             color: var(--text-invert-muted); background: none; border: 0; cursor: pointer;
             text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
             text-decoration-color: rgba(255,255,255,.35); }
.ask__link:hover, .ask__link:focus-visible { color: #fff; text-decoration-color: currentColor; }
.ask__link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.ask__link[hidden] { display: none; }
/* Staff workspace (ask-deepti): one-line identity cluster at the far right -
   name, a "used/limit" badge with a hairline meter under it, and icon buttons
   (Usage for admins, Log out). Help is in the site's top menu, so no icon here;
   the email lives in the profile dialog. */
.ask__me { margin-left: auto; display: flex; align-items: center; gap: 4px; min-width: 0; flex: 0 1 auto; }
.ask__name { flex: 0 1 auto; min-width: 0; font-size: .88rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden;
             text-overflow: ellipsis; max-width: 240px; margin-right: 6px; }
.ask__quota { display: inline-flex; flex-direction: column; align-items: stretch; gap: 3px; margin-right: 6px; padding: 5px 9px 4px;
              border-radius: 999px; background: rgba(255,255,255,.1); color: var(--text-invert-muted);
              font-size: .72rem; font-weight: 600; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; cursor: default; }
.ask__quota.is-warn { color: var(--amber); }
.ask__quota[hidden] { display: none; }
.ask__quota .meter { width: auto; min-width: 28px; height: 2px; margin: 0; background: rgba(255,255,255,.18); }
.ask__quota .meter[hidden] { display: none; }
.ask__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
            padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-invert-muted); cursor: pointer;
            text-decoration: none; transition: color .15s ease, background-color .15s ease; }
.ask__ico svg { width: 18px; height: 18px; }
.ask__ico:hover, .ask__ico:focus-visible { color: #fff; background: rgba(255,255,255,.12); }
.ask__ico:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ask__ico[hidden] { display: none; }
/* tablet band: four tabs plus the cluster leave no room for a readable name -
   the avatar initials still say who you are, the dialog has the full name */
@media (min-width: 761px) and (max-width: 900px) { .ask__name { display: none; } }
.ask__hero--slim + #view-ask .ask__body, .ask__hero--slim ~ #view-clients { padding-top: 26px; }
.ask__hero--slim::after { content: ""; display: block; height: 1px; background: rgba(255,255,255,.12); }
@media (max-width: 760px) {
  .ask__hero--slim { padding-block: 132px 10px; }   /* clear the taller mobile site header */
  .ask__bar { gap: 8px 12px; flex-wrap: nowrap; }
  /* Workspace switcher: a fixed bottom tab bar, as on /my/ (.mya-tabs). Hidden tabs stay hidden. */
  .ask__bar .cx-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; order: 0; flex: none; display: flex; gap: 2px;
    margin: 0; max-width: none; overflow: visible; background: #fff; border-top: 1px solid var(--line);
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(0,0,0,.06);
  }
  .ask__bar .cx-tab {
    flex: 1 1 0; display: grid; place-items: center; gap: 2px; min-height: 48px; padding: 6px 2px;
    font-size: .72rem; font-weight: 700; line-height: 1.1; color: var(--text-muted);
    border-bottom: 0; border-radius: 10px; white-space: nowrap;
  }
  .ask__bar .cx-tab[hidden] { display: none; }
  .ask__bar .cx-tab svg { display: block; width: 22px; height: 22px; }
  .ask__bar .cx-tab.is-active { color: var(--orange); background: #fff6ec; }
  .ask__bar .cx-tab:hover { color: var(--orange); }
  .ask__bar .cx-badge { min-width: 16px; padding: 0 5px; margin-left: 3px; background: var(--orange); color: #fff; font-size: .62rem; line-height: 16px; }
  .ask__id { order: 2; flex: 1 1 auto; min-width: 0; margin-left: 0; align-items: flex-start; gap: 2px; }
  /* phone: avatar, then name (ellipsised), badge and icons pushed right; tabs are the bottom bar */
  .ask__me { order: 2; flex: 1 1 auto; justify-content: flex-end; gap: 2px; }
  .ask__name { font-size: .82rem; max-width: none; margin-right: 4px; }
  .ask__ico { width: 40px; height: 40px; }
  .ask__avatar { flex: none; }
  body:has(.ask__hero--slim) .site-footer { padding-bottom: calc(34px + 76px); }
  body:has(.ask__hero--slim) .toast, #view-schedule .sc-toast { bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* Admin > Schedule: usable without drag-and-drop (native DnD does not fire on touch). */
  #view-schedule .sc-person { min-height: 44px; }
  #view-schedule .sc-person__add { display: block; width: 100%; min-height: 44px; font-size: 16px; padding: 8px 10px; margin-top: 6px; }
  #view-schedule .sc-chip { padding: 4px 6px; gap: 8px; }
  #view-schedule .sc-chip__l, #view-schedule .sc-chip__x { width: 36px; height: 36px; }
  #view-schedule .sc-chip__mv { min-height: 36px; font-size: .8rem; max-width: 110px; }
  #view-schedule .sc-edge__btn { min-height: 40px; padding: 8px 14px; }
  #view-schedule .sc-row { grid-template-columns: 64px minmax(0, 1fr); }
  /* Admin > Classes and Payouts: readable type, tappable names, no nested vertical scroll. */
  #view-classes .cls-name { display: inline-block; min-height: 40px; padding: 8px 0; }
  #view-classes .cls-table { font-size: .88rem; }
  #view-classes .cls-table td { padding: 10px; }
  #view-payouts .po-tablewrap { max-height: none; }
  #view-payouts .po-table { font-size: .84rem; }
  #view-payouts .po-table th { font-size: .68rem; }
  .ask__line { justify-content: flex-start; width: 100%; gap: 0 2px; }
  .ask__id .ask__sub { font-size: .75rem; white-space: normal; max-width: 100%; }
  .ask__link { font-size: .78rem; padding: 10px 8px; }
  .ask__id .meter { width: 100%; max-width: 100%; height: 4px; margin-bottom: 2px; }
}

/* Member-area pages: compact site header, so the workspace starts higher */
@supports selector(:has(*)) {
  body:has(.ask__hero--slim) .site-header { padding-block: 12px; }
  body:has(.ask__hero--slim) .site-logo img { width: 78px; }
  body:has(.ask__hero--slim) .ask__hero--slim { padding-block: clamp(74px, 6vw, 88px) 0; }
  @media (max-width: 760px) {
    body:has(.ask__hero--slim) .ask__hero--slim { padding-block: 92px 10px; }
  }

  /* My pages only (.ask__hero--client): the logotype grows ~1.5x
     (78px -> 117px; the source webp is 1000px wide, so it stays crisp) and the
     hero's top padding grows with it so the bar clears the absolute header. */
  body:has(.ask__hero--client) .site-logo img { width: 117px; }
  body:has(.ask__hero--client) .ask__hero--slim { padding-block: clamp(108px, 9vw, 122px) 0; }
  @media (max-width: 760px) {
    body:has(.ask__hero--client) .ask__hero--slim { padding-block: 126px 10px; }
  }
}
/* Client hero: the dark band holds the logo and one exit-door Log out icon at
   the right, nothing else - name, pass and partner are in the greeting and the
   account card below, Help is in the top menu. */
.ask__hero--client .ask__bar { justify-content: flex-end; min-height: 44px; padding-bottom: 4px; }
.ask__hero--client .ask__ico { margin-left: auto; }

/* My Clients on phones and small tablets: nothing may push the page sideways,
   every control stays tappable, and wide content scrolls inside its own box. */
#view-clients .cx-list, #view-clients .rec, #view-clients .cx-bar { max-width: 100%; }

@media (max-width: 860px) {
  /* Tap targets (min 40px) across the workspace controls. */
  #view-clients .chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; }
  #view-clients #cx-add { min-height: 40px; }
  #view-clients .row-actions { flex-wrap: wrap; row-gap: 10px; }
  #view-clients .row-actions .btn { min-height: 40px; }
  #view-clients .rec__actions { flex-wrap: wrap; gap: 8px; }
  #view-clients .rec__actions .btn { min-height: 40px; }
  #view-clients .concern { flex-wrap: wrap; }
  #view-clients .concern button { margin-left: 0; min-height: 40px; }
  #view-clients .mood button { width: 40px; height: 40px; }
  #view-clients .note-add { flex-wrap: wrap; }
  #view-clients .note-add input { flex: 1 1 100%; min-height: 44px; }
  #view-clients .note-add .btn { min-height: 40px; }

  /* Record tabs: one scrollable strip, never wrapped or clipped. */
  #view-clients .rec__tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
                             -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-inline: 10px; }
  #view-clients .rec__tabs::-webkit-scrollbar { display: none; }
  #view-clients .rec__tab { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }

  /* Progress: the table scrolls in its own container, the chart shrinks to fit. */
  #view-clients .prog > * { min-width: 0; }
  #view-clients .prog > *:first-child { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #view-clients .ptable { min-width: 460px; }
  #view-clients .ptable td.cx-sub { white-space: normal; min-width: 150px; }
}

@media (max-width: 620px) {
  /* Search gets its own row above the filter chips. */
  #view-clients .cx-search { flex: 1 0 100%; min-width: 0; }
  #view-clients .cx-persona-filter { flex: 1 0 100%; max-width: 100%; }

  /* List rows: avatar + name on the first line, status underneath. */
  #view-clients .cx-row__head { display: none; }
  #view-clients .cx-row { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 4px 10px; align-items: center; }
  #view-clients .cx-row > *:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  #view-clients .cx-row > *:nth-child(2) { grid-column: 2; grid-row: 1; min-width: 0; }
  #view-clients .cx-row > *:nth-child(6) { grid-column: 2 / span 2; grid-row: 2; min-width: 0; }
  #view-clients .cx-row > *:nth-child(7) { grid-column: 3; grid-row: 1; justify-self: end; }
  #view-clients .cx-name, #view-clients .cx-sub { overflow-wrap: anywhere; }
  #view-clients .status { white-space: normal; }
}

/* ------------------------------------------------------------------
   Client database (admin-only third workspace tab). Everything is scoped
   under #view-clientdb so it can never touch the My Clients view above.
   ------------------------------------------------------------------ */
#view-clientdb .db-intro {margin-bottom: 16px; }
#view-clientdb .db-title {margin: 0 0 6px; font-size: 1.3rem; }
#view-clientdb .db-note {margin: 0; max-width: 74ch; font-size: .88rem; color: var(--text-muted); line-height: 1.5; }
#view-clientdb .db-note strong {color: var(--ink); }

/* Search bar and filter pills. Three views draw the same toolbar, so the rules live
   once against all three: scoping them to the client database alone left the members
   and assignment searches with an unstyled, page-sized magnifier icon. */
#view-clientdb .cx-bar, #view-members .cx-bar, #view-assign .cx-bar {display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; max-width: 100%; }
#view-clientdb .cx-search, #view-members .cx-search, #view-assign .cx-search {flex: 1 1 260px; min-width: 0; position: relative; }
#view-clientdb .cx-search input, #view-members .cx-search input, #view-assign .cx-search input {width: 100%; padding: 11px 14px 11px 38px; font: inherit; font-size: 16px; border: 1.5px solid var(--surface-3); border-radius: var(--radius-pill); background: #fff; min-height: 44px; }
#view-clientdb .cx-search input:focus, #view-members .cx-search input:focus, #view-assign .cx-search input:focus {outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
#view-clientdb .cx-search svg, #view-members .cx-search svg, #view-assign .cx-search svg {position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; flex: none; color: var(--text-muted); pointer-events: none; }
#view-clientdb .cx-persona-filter, #view-members .cx-persona-filter, #view-assign .cx-persona-filter {font: inherit; font-size: .82rem; font-weight: 600; color: var(--text-muted);
  padding: 7px 11px; min-height: 40px; border: 1.5px solid var(--surface-3); border-radius: 999px; background: #fff; cursor: pointer;
  max-width: 190px; text-overflow: ellipsis; }
#view-clientdb .cx-persona-filter:focus, #view-members .cx-persona-filter:focus, #view-assign .cx-persona-filter:focus {outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
#view-clientdb .btn--light {background: #fff; color: var(--ink); border: 1.5px solid var(--surface-3); box-shadow: none; }
#view-clientdb .btn--light:hover {border-color: var(--ink); }
#view-clientdb .btn[disabled] {opacity: .45; cursor: not-allowed; }

/* --- Schedule: the timetable grid and the trainer roster --- */
#view-schedule .sc-wrap {display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
#view-schedule .sc-grid {background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
#view-schedule .sc-edge {display: flex; gap: 8px; justify-content: center; padding: 8px; background: var(--bg-lighter); }
#view-schedule .sc-edge--last {border-top: 1px solid var(--surface-2); }
#view-schedule .sc-edge__btn {font: inherit; font-size: .74rem; font-weight: 700; color: var(--orange); cursor: pointer;
  padding: 4px 12px; border: 1.5px dashed var(--surface-3); border-radius: 999px; background: #fff; }
#view-schedule .sc-edge__btn:hover {border-color: var(--orange); }
#view-schedule .sc-edge__btn--trim {color: var(--text-muted); }
#view-schedule .sc-edge__btn--trim:hover {color: #b42323; border-color: #e7c3c3; }
#view-schedule .sc-row {display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: center;
  min-height: 42px; padding: 4px 10px 4px 12px; border-top: 1px solid var(--surface-2); transition: background .12s; }
#view-schedule .sc-row:first-child {border-top: 0; }
#view-schedule .sc-row.is-empty {min-height: 34px; }
#view-schedule .sc-row.is-over {background: #fff3e4; box-shadow: inset 3px 0 0 var(--orange); }
#view-schedule .sc-row__t {font-size: .78rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
#view-schedule .sc-row.is-empty .sc-row__t {font-weight: 500; }
#view-schedule .sc-row__b {display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
#view-schedule .sc-row__hint {font-size: .7rem; color: var(--surface-3); font-style: italic; }
#view-schedule .sc-row.is-over .sc-row__hint {color: var(--orange); }
/* a chip is one trainer in one slot: face, name, the two controls, the remove */
#view-schedule .sc-chip {display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px; max-width: 100%;
  border: 1.5px solid var(--surface-3); border-radius: 999px; background: #fff; cursor: grab; font-size: .8rem; }
#view-schedule .sc-chip.is-dragging, #view-schedule .sc-person.is-dragging {opacity: .45; }
#view-schedule .sc-chip.is-ladies {border-color: #e8b4c8; background: #fff7fa; }
#view-schedule .sc-chip .cx-av {width: 24px; height: 24px; font-size: .6rem; }
#view-schedule .sc-chip__name {font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-schedule .sc-chip__l {font: inherit; font-size: .9rem; line-height: 1; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: transparent; color: var(--surface-3); cursor: pointer; }
#view-schedule .sc-chip.is-ladies .sc-chip__l {color: #b8336a; background: #fde7ef; }
#view-schedule .sc-chip__mv {font: inherit; font-size: .7rem; max-width: 84px; padding: 2px 4px; border: 1px solid var(--surface-2);
  border-radius: 6px; background: #fff; color: var(--text-muted); cursor: pointer; }
#view-schedule .sc-chip__x {font: inherit; font-size: 1rem; line-height: 1; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
#view-schedule .sc-chip__x:hover {background: #fdecec; color: #b42323; }
/* the Zoom bits on a chip: which licence key hosts it, and the staff join link */
#view-schedule .sc-chip__key {font: inherit; font-size: .68rem; max-width: 92px; padding: 2px 3px; border: 1px solid var(--surface-2);
  border-radius: 6px; background: #fff; color: var(--text-muted); cursor: pointer; }
#view-schedule .sc-chip.no-room .sc-chip__key {border-color: #e8c46a; background: #fffbeb; }
#view-schedule .sc-chip__join {font-size: .7rem; font-weight: 700; color: #2a7d2a; background: #eaf7ea; border-radius: 6px;
  padding: 2px 7px; text-decoration: none; }
#view-schedule .sc-chip__join:hover {background: #d8efd8; }
#view-schedule #sc-rooms .btn {font-size: .85rem; }
#view-schedule .sc-chip__hk {font-size: .68rem; font-weight: 800; letter-spacing: .5px; color: #8a5a00; background: #fff2d6;
  border: 1px solid #f0d494; border-radius: 6px; padding: 2px 6px; white-space: nowrap; }

/* the join-class confirmation card on the member page */
.mya-confirm {position: fixed; inset: 0; background: rgba(20, 16, 12, .55); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.mya-confirm__card {background: #fff; border-radius: 18px; padding: 26px 28px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.mya-confirm__card h3 {margin: 0 0 8px; font-size: 1.25rem; }
.mya-confirm__card p {margin: 0 0 18px; color: var(--text-muted); }
.mya-confirm__btns {display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* the staff "next classes" card on the workspace (staffclasses.js): one home, a
   full-width strip just under the hero bar, above every tab's content — Ask
   Deepti included, where the chat runs the full width beneath it. The strip
   section carries only a top gap: the tab body beneath brings its own padding,
   so the card never floats. */
.stf-strip { padding-block: 26px 0; }
.stf-strip[hidden] { display: none; }
.stf-strip .stf-classes { margin-bottom: 0; }   /* no margin to collapse out as a white band */
/* the card: one 40px line per class - time, trainer (ellipsis), host key, a small Start pill */
.stf-classes { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.08)); padding: 14px 20px 12px; margin: 0 0 18px; min-width: 0; }
.stf-classes h3 { margin: 0 0 4px; font-size: 1rem; }
.stf-classes__day { font-weight: 500; color: var(--text-muted); font-size: .9rem; }
.stf-classes ul { list-style: none; margin: 0; padding: 0; }
.stf-classes li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 0; border-bottom: 1px solid var(--surface-2, #eee); }
.stf-classes li:last-child { border-bottom: 0; }
.stf-classes li > b { flex: none; min-width: 64px; font-size: .95rem; white-space: nowrap; }
.stf-classes__who { flex: 1; min-width: 0; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stf-classes__who small { font-size: .78rem; color: var(--text-muted); opacity: .8; }
.stf-classes__hk { flex: none; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; font-weight: 700; letter-spacing: 1px; color: #8a5a00; background: #fff2d6; border: 1px solid #f0d494; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.stf-classes__go { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px 0 10px; font-size: .8rem; font-weight: 700; line-height: 1; color: #fff; background: linear-gradient(135deg, #F6821F, #FFC933); border-radius: 999px; text-decoration: none; white-space: nowrap; }
.stf-classes__go svg { width: 10px; height: 10px; fill: currentColor; }
.stf-classes li.is-mine {background: #fff7ec; border-radius: 8px; }
.stf-classes__mine {font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #8a4a00; background: #ffe3c2; border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.stf-classes__hint { margin: auto 0 0; padding-top: 8px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }

/* pass pause box inside an open member card */
.mb-pause {margin-top: 10px; border-top: 1px dashed var(--surface-2, #e5e5e5); padding-top: 10px; font-size: .85rem; }
.mb-pause h4 {margin: 0 0 4px; font-size: .9rem; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mb-pause__pol {font-size: .72rem; font-weight: 500; color: var(--text-muted); }
.mb-pause__st {margin: 0 0 8px; color: var(--text-muted); }
.mb-pause__form {display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.mb-pause__form label {display: flex; flex-direction: column; font-size: .72rem; color: var(--text-muted); gap: 2px; }
.mb-pause__form input {font: inherit; padding: 5px 8px; border: 1px solid var(--surface-2, #ddd); border-radius: 8px; }
.mb-pause__form input[data-pf="note"] {flex: 1; min-width: 140px; }
.mb-pause__hint {margin: 6px 0 0; font-size: .72rem; color: var(--text-muted); }
.mb-pause__hist {list-style: none; margin: 8px 0 0; padding: 0; font-size: .75rem; color: var(--text-muted); }
.mb-pause__hist li {padding: 2px 0; }
/* the roster */
#view-schedule .sc-roster {position: sticky; top: 12px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 12px 14px; }
#view-schedule .sc-roster h3 {margin: 0 0 8px; font-size: .92rem; }
#view-schedule .sc-roster h3 small {display: block; font-size: .72rem; font-weight: 500; color: var(--text-muted); }
#view-schedule .sc-roster__list {display: grid; gap: 4px; max-height: 70vh; overflow-y: auto; }
#view-schedule .sc-person {display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 4px 6px; border-radius: 8px; cursor: grab; font-size: .8rem; }
#view-schedule .sc-person:hover {background: var(--bg-lighter); }
#view-schedule .sc-person.is-off {opacity: .6; }
#view-schedule .sc-person .cx-av {width: 26px; height: 26px; font-size: .62rem; }
#view-schedule .sc-person__name {font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-schedule .sc-person__n {font-size: .7rem; color: var(--text-muted); white-space: nowrap; }
#view-schedule .sc-person__add {grid-column: 2 / -1; font: inherit; font-size: .7rem; padding: 2px 4px; border: 1px solid var(--surface-2);
  border-radius: 6px; background: #fff; color: var(--text-muted); display: none; }
#view-schedule .sc-person:hover .sc-person__add, #view-schedule .sc-person:focus-within .sc-person__add {display: block; }
#view-schedule .sc-toast {position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 330;
  padding: 9px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .82rem; box-shadow: var(--shadow-md); }
#view-schedule .sc-toast.is-bad {background: #b42323; }
/* the typed-confirmation card every schedule change passes through (schedule.js confirmChange) */
.sc-confirm {position: fixed; inset: 0; background: rgba(20,16,12,.55); z-index: 320; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sc-confirm__card {background: #fff; border-radius: 16px; padding: 22px 24px; max-width: 440px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.3); font-size: .9rem; }
.sc-confirm__card h3 {margin: 0 0 10px; font-size: 1.1rem; }
.sc-confirm__what {margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #fff6ec; border: 1px solid #f5d9b8; font-weight: 600; color: var(--ink); }
.sc-confirm__ask {margin: 0 0 12px; color: var(--text-muted); line-height: 1.45; }
.sc-confirm__in {display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 9px 12px; border: 1.5px solid var(--surface-2, #ddd); border-radius: 10px; }
.sc-confirm__in:focus {outline: none; border-color: var(--orange, #F6821F); }
.sc-confirm__err {margin: 10px 0 0; font-size: .84rem; color: #b42323; line-height: 1.45; }
.sc-confirm__btns {display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.sc-confirm__btns .btn {padding: 10px 20px; font-size: .9rem; }
.sc-confirm__btns .btn[disabled] {opacity: .45; cursor: not-allowed; transform: none; filter: none; }
@media (max-width: 860px) {
  #view-schedule .sc-wrap {grid-template-columns: 1fr; }
  #view-schedule .sc-roster {position: static; }
  #view-schedule .sc-person__add {display: block; }
  #view-schedule .sc-chip__mv {max-width: 70px; }
}

/* --- My Clients: the follow-up strip and the eight-field NDP form --- */
#view-clients .fu {margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: #fff8f1; border: 1px solid #ffe2c4; }
#view-clients .fu__t {font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #a5520a; margin-bottom: 6px; }
#view-clients .fu ul {list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#view-clients .fu__i {display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; font-size: .82rem; line-height: 1.45; }
#view-clients .fu__i b {font-weight: 700; color: var(--ink); }
#view-clients .fu__i span {color: var(--text-muted); overflow-wrap: anywhere; }
#view-clients .fu__i--due b {color: #b42323; }
#view-clients .fu__i--ok b {color: #2f7a4f; }
#view-clients .ndw--8 {grid-template-columns: 1fr 1fr; }
#view-clients .ndw--8 textarea {min-height: 64px; }
#view-clients .ptable small {color: var(--text-muted); font-weight: 500; }
#view-clients .ptable em {font-style: normal; color: var(--text-muted); }
@media (max-width: 620px) {
  #view-clients .fu__i {grid-template-columns: 1fr; gap: 2px; }
  #view-clients .ndw--8 {grid-template-columns: 1fr; }
}

/* --- My Clients: class history for the payout --- */
#view-clients .ch {margin-top: 26px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 16px 18px 18px; }
#view-clients .ch__head {display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
#view-clients .ch__t {margin: 0; font-size: 1.1rem; letter-spacing: -.01em; }
#view-clients .ch__sub {margin: 2px 0 0; font-size: .8rem; color: var(--text-muted); }
#view-clients .ch__ctl {display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#view-clients .ch__tiles {display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
#view-clients .ch__tile {padding: 10px 12px; border: 1px solid var(--surface-2); border-radius: var(--radius-sm); }
#view-clients .ch__tile b {display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
#view-clients .ch__tile b small {font-size: .8rem; font-weight: 500; color: var(--text-muted); }
#view-clients .ch__tile span {font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
#view-clients .ch__tile--warn b {color: #b42323; }
#view-clients .ch__scroll {overflow-x: auto; }
#view-clients .ch__table {width: 100%; border-collapse: collapse; font-size: .82rem; }
#view-clients .ch__table th {text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--surface-2); }
#view-clients .ch__table td {padding: 6px 8px; border-bottom: 1px solid var(--surface-2); vertical-align: top; }
#view-clients .ch__table .num {text-align: right; font-variant-numeric: tabular-nums; }
#view-clients .ch__table tr.is-zero td {color: var(--text-muted); }
#view-clients .ch__table tr.tot td {font-weight: 700; border-bottom: 0; border-top: 2px solid var(--surface-3); }

/* --- DWD Connects: NDP profile and the fortnightly tracker --- */
#view-clientdb .sect__btn {float: right; margin-top: -4px; }
#view-clientdb .db-ndp {display: grid; gap: 10px; }
#view-clientdb .db-ndp__f {display: grid; gap: 4px; }
#view-clientdb .db-ndp__f > span {font-size: .76rem; font-weight: 700; color: var(--text-muted); }
#view-clientdb .db-ndp__f > span small {font-weight: 500; text-transform: none; }
#view-clientdb .db-ndp textarea, #view-clientdb .db-ci-new textarea,
#view-clientdb .db-ci__f input, #view-clientdb .db-ci__f select {font: inherit; font-size: .86rem; width: 100%;
  padding: 7px 10px; border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
#view-clientdb .db-ndp textarea:focus, #view-clientdb .db-ci-new textarea:focus,
#view-clientdb .db-ci__f input:focus, #view-clientdb .db-ci__f select:focus {outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
#view-clientdb .db-ndp__btns {display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

#view-clientdb .db-ci-new {display: grid; gap: 10px; margin-bottom: 14px; padding: 12px 14px;
  border: 1.5px solid var(--orange); border-radius: var(--radius-sm); background: #fff9f3; }
#view-clientdb .db-ci__grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
#view-clientdb .db-ci__f {display: grid; gap: 4px; min-width: 0; }
#view-clientdb .db-ci__f > span {font-size: .72rem; font-weight: 700; color: var(--text-muted); }
#view-clientdb .db-ci__f > span small {font-weight: 500; }
#view-clientdb .db-ci__f--wide {grid-column: 1 / -1; }

#view-clientdb .db-cis {list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#view-clientdb .db-ci {padding: 12px 14px; border: 1px solid var(--surface-2); border-radius: var(--radius-sm); background: #fff; }
#view-clientdb .db-ci__head {display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
#view-clientdb .db-ci__status, #view-clientdb .db-ci__score {font-size: .72rem; font-weight: 700; padding: 2px 9px;
  border-radius: 999px; background: var(--surface-2); color: var(--ink); }
/* the measurement strip: dense on purpose — ten numbers should not be ten lines */
#view-clientdb .db-ms {display: flex; flex-wrap: wrap; gap: 4px 16px; }
#view-clientdb .db-ms--life {margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--surface-2); }
#view-clientdb .db-m {display: flex; gap: 5px; align-items: baseline; font-size: .78rem; }
#view-clientdb .db-m__k {color: var(--text-muted); }
#view-clientdb .db-m__v {font-weight: 600; }
#view-clientdb .db-m__v em {font-style: normal; font-weight: 500; color: var(--text-muted); }
#view-clientdb .db-ci__note {margin: 8px 0 0; font-size: .82rem; line-height: 1.5; }
#view-clientdb .db-ci__note--priv {padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface-1, #f6f5f3); color: var(--text-muted); }

/* --- Client assignment: list view --- */
/* The board is still available behind the toggle, so these rules deliberately sit apart
   from the .as-board ones rather than trying to share a card style with them. */
#view-assign .as-modes {display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
#view-assign .as-mode {font: inherit; font-size: .82rem; font-weight: 700; color: var(--text-muted); cursor: pointer;
  padding: 6px 14px; border: 1.5px solid var(--surface-3); border-radius: var(--radius-pill); background: #fff; }
#view-assign .as-mode.is-on {color: var(--ink); border-color: var(--orange); background: #fff6ec; }
#view-assign .as-modes__hint {margin: 0 0 0 6px; font-size: .8rem; color: var(--text-muted); }
#view-assign .as-bar {display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; max-width: 100%; }
#view-assign .as-row__head, #view-assign .as-row {display: grid; grid-template-columns: 30px minmax(0, 1.5fr) .9fr 1.2fr 1fr 58px; gap: 10px; align-items: center; }
#view-assign .as-pausebtn {font: inherit; font-size: .78rem; border: 1px solid var(--surface-2, #ddd); border-radius: 8px; background: #fff; padding: 3px 9px; cursor: pointer; }
#view-assign .as-pausebtn:hover {border-color: var(--orange, #F6821F); }
#view-assign .as-pausebtn[disabled] {opacity: .4; cursor: default; }
/* the pause modal shared by the assignment list */
.as-pausemodal {position: fixed; inset: 0; background: rgba(20,16,12,.5); z-index: 320; display: flex; align-items: center; justify-content: center; padding: 20px; }
.as-pausemodal__card {background: #fff; border-radius: 16px; padding: 20px 22px; max-width: 440px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.3); font-size: .88rem; max-height: 86vh; overflow-y: auto; }
.as-pausemodal__card h3 {margin: 0 0 2px; font-size: 1.05rem; }
.as-pausemodal__x {float: right; border: 0; background: none; font-size: 1.3rem; cursor: pointer; color: var(--text-muted); }
#view-assign .as-row {padding: 8px 14px; border-top: 1px solid var(--surface-2); cursor: pointer; font-size: .84rem; }
#view-assign .as-row:hover {background: var(--bg-lighter); }
#view-assign .as-row.is-picked {background: #fff6ec; }
#view-assign .as-row > span {min-width: 0; overflow-wrap: anywhere; }
#view-assign .as-row .cx-name {display: block; font-weight: 600; font-size: .88rem; line-height: 1.3; }
#view-assign .as-row .cx-sub {display: block; font-size: .72rem; color: var(--text-muted); }
#view-assign .as-row__head {padding: 7px 14px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); background: var(--bg-lighter); }
#view-assign .as-row input[type="checkbox"], #view-assign .as-row__head input[type="checkbox"] {width: 16px; height: 16px; accent-color: var(--orange); }
/* the action bar only appears once something is ticked, so it never takes space idly */
#view-assign .as-actions {display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: #fff6ec;
  border: 1.5px solid var(--orange); }
#view-assign .as-actions__n {font-size: .84rem; color: var(--ink); }
#view-assign .as-link {font: inherit; font-size: .84rem; font-weight: 700; color: var(--orange);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
#view-assign .cx-pager {display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-top: 10px; font-size: .8rem; color: var(--text-muted); }
#view-assign .cx-pager__btns {display: flex; gap: 8px; }
@media (max-width: 760px) {
  #view-assign .as-row__head .as-col-state, #view-assign .as-row .as-col-state,
  #view-assign .as-row__head .as-col-camp, #view-assign .as-row .as-col-camp {display: none; }
  #view-assign .as-row__head, #view-assign .as-row {grid-template-columns: 30px minmax(0, 1fr) auto; }
}

#view-clientdb .cx-list {background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; max-width: 100%; }
/* Tightened so a page of 25 is scannable without scrolling past a screen and a half:
   a narrower avatar column, less gutter and a shorter row. */
#view-clientdb .cx-row, #view-clientdb .cx-row__head {display: grid; grid-template-columns: 34px minmax(0, 1.6fr) 1.1fr .8fr .7fr 1fr 22px; gap: 10px; align-items: center; }
#view-clientdb .cx-row {padding: 8px 14px; border-top: 1px solid var(--surface-2); cursor: pointer; transition: background .15s; }
#view-clientdb .cx-row:hover {background: var(--bg-lighter); }
#view-clientdb .cx-row:focus-visible {outline: 2px solid var(--orange); outline-offset: -2px; }
#view-clientdb .cx-row.is-open {background: #fff6ec; }
#view-clientdb .cx-row__head {padding: 7px 14px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); background: var(--bg-lighter); }
#view-clientdb .cx-row > * {min-width: 0; }
#view-clientdb .avatar {width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: .72rem; background: var(--grad-cta); }
#view-clientdb .cx-name {font-weight: 600; font-size: .88rem; line-height: 1.3; overflow-wrap: anywhere; }
#view-clientdb .cx-sub {font-size: .72rem; line-height: 1.35; color: var(--text-muted); overflow-wrap: anywhere; }
#view-clientdb .cx-plan {font-size: .78rem; overflow-wrap: anywhere; }
#view-clientdb .db-unassigned {color: var(--text-muted); font-style: italic; }
#view-clientdb .db-inline {display: none; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
#view-clientdb .db-inline__persona {display: none; }
#view-clientdb .cx-chev {color: var(--text-muted); transition: transform .2s; }
#view-clientdb .cx-row.is-open .cx-chev {transform: rotate(90deg); }
#view-clientdb .cx-persona {display: inline-block; max-width: 100%; font-size: .68rem; font-weight: 600; line-height: 1.25;
  padding: 4px 10px; border-radius: 999px; background: #f1efec; color: #4a4340; overflow-wrap: anywhere; }
#view-clientdb .cx-persona--good {background: #e8f6dc; color: #35690d; }
#view-clientdb .cx-persona--warn {background: #fff1e3; color: #a5520a; }
#view-clientdb .cx-persona--neutral {background: #eef1f6; color: #3b4a63; }
#view-clientdb .cx-persona--none {background: none; color: var(--text-muted); padding-inline: 0; font-weight: 500; }
#view-clientdb .cx-empty {padding: 34px 20px; text-align: center; color: var(--text-muted); }
#view-clientdb .cx-empty strong {display: block; color: var(--ink); font-size: .95rem; }
#view-clientdb .db-empty__hint {margin-top: 8px; font-size: .84rem; max-width: 52ch; margin-inline: auto; line-height: 1.5; }
#view-clientdb .db-empty--err strong {color: #b42323; }

#view-clientdb .db-pager {display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
#view-clientdb .db-count {font-size: .85rem; color: var(--text-muted); }
#view-clientdb .db-pager__btns {margin-left: auto; display: flex; gap: 8px; }
#view-clientdb .db-pager__btns .btn {min-height: 40px; }

#view-clientdb .rec {background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-top: 18px; overflow: hidden; max-width: 100%; }
#view-clientdb .rec__head {display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: var(--ink); color: #fff; flex-wrap: wrap; }
#view-clientdb .rec__head .avatar {width: 52px; height: 52px; font-size: 1.1rem; }
#view-clientdb .rec__title {font-size: 1.3rem; font-weight: 700; overflow-wrap: anywhere; }
#view-clientdb .rec__meta {font-size: .85rem; color: var(--text-invert-muted); }
#view-clientdb .rec__actions {margin-left: auto; display: flex; gap: 8px; }
#view-clientdb .rec__body {padding: 22px 24px; }
#view-clientdb .sect {margin-top: 24px; }
#view-clientdb .sect:first-child {margin-top: 0; }
#view-clientdb .sect__t {font-weight: 700; font-size: .95rem; margin-bottom: 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#view-clientdb .sect__t small {font-weight: 500; color: var(--text-muted); }
#view-clientdb .db-dl {display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 18px; }
#view-clientdb .db-dl__i {display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#view-clientdb .db-dl__k {font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
#view-clientdb .db-dl__v {font-size: .95rem; overflow-wrap: anywhere; }
#view-clientdb .db-long {background: var(--bg-lighter); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; }
#view-clientdb .db-long__k {font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
#view-clientdb .db-long p {margin: 0; font-size: .92rem; line-height: 1.55; overflow-wrap: anywhere; }

#view-clientdb .db-assign {display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
#view-clientdb .f {display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#view-clientdb .f label {font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
#view-clientdb .db-assign select {font: inherit; font-size: 15px; padding: 9px 12px; min-height: 44px; min-width: 240px; max-width: 100%;
  border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); background: #fff; }
#view-clientdb .db-assign select:focus {outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
#view-clientdb .db-assign .btn {min-height: 40px; }
#view-clientdb .db-assign__note {margin: 10px 0 0; max-width: 70ch; line-height: 1.5; }
#view-clientdb .saved {font-size: .85rem; color: #3d7a0f; }
#view-clientdb .saved--err {color: #b42323; }

#view-clientdb .note-add {display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
#view-clientdb .note-add input {flex: 1 1 240px; min-width: 0; font: inherit; font-size: 16px; padding: 10px 12px; min-height: 44px;
  border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); background: #fff; }
#view-clientdb .note-add input:focus {outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
#view-clientdb .note-add .btn {min-height: 44px; }
#view-clientdb .tl {list-style: none; margin: 0; padding: 0; }
#view-clientdb .tl li {display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--surface-2); font-size: .88rem; }
#view-clientdb .tl time {color: var(--text-muted); font-size: .8rem; }
#view-clientdb .tl .k {font-weight: 600; text-transform: capitalize; }
#view-clientdb .tl .db-tl-empty {display: block; color: var(--text-muted); border-bottom: 0; }

/* Phones and small tablets: one column, 40px tap targets, nothing pushes the page sideways. */
@media (max-width: 860px) {
  #view-clientdb .cx-row, #view-clientdb .cx-row__head {grid-template-columns: 44px minmax(0, 1.4fr) 1.1fr 28px; }
  #view-clientdb .db-col-seen, #view-clientdb .db-col-spend, #view-clientdb .db-col-owner {display: none; }
  #view-clientdb .db-inline {display: flex; }
}
@media (max-width: 620px) {
  #view-clientdb .cx-search, #view-members .cx-search, #view-assign .cx-search {flex: 1 0 100%; }
  #view-clientdb .cx-persona-filter, #view-members .cx-persona-filter, #view-assign .cx-persona-filter {flex: 1 1 100%; max-width: 100%; }
  #view-clientdb .db-bar .btn {flex: 1 1 auto; min-height: 40px; justify-content: center; }
  #view-clientdb .cx-row__head {display: none; }
  #view-clientdb .cx-row {grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 4px 10px; padding: 9px 12px; }
  #view-clientdb .db-col-persona {display: none; }
  #view-clientdb .db-inline__persona {display: inline-block; }
  #view-clientdb .db-pager {gap: 10px; }
  #view-clientdb .db-pager__btns {margin-left: 0; width: 100%; }
  #view-clientdb .db-pager__btns .btn {flex: 1; justify-content: center; }
  #view-clientdb .rec__body {padding: 16px; }
  #view-clientdb .rec__actions {margin-left: 0; width: 100%; }
  #view-clientdb .rec__actions .btn {min-height: 40px; }
  #view-clientdb .db-dl {grid-template-columns: 1fr; }
  #view-clientdb .db-assign {flex-direction: column; align-items: stretch; }
  #view-clientdb .db-assign select {min-width: 0; width: 100%; }
  #view-clientdb .db-assign .btn {justify-content: center; }
  #view-clientdb .note-add input {flex: 1 1 100%; }
  #view-clientdb .note-add .btn {width: 100%; justify-content: center; }
  #view-clientdb .tl li {grid-template-columns: 1fr; gap: 2px; }
}

/* ------------------------------------------------------------------
   WhatsApp click-to-chat. The trigger sits in the last cell of a client
   row (beside the chevron) and in the record header; the composer is a
   panel of its own, appended to <body> and scoped under #dwd-wa so it
   cannot reach anything else on the page. Message copy comes from
   assets/data/personas.json, generated from Deepti's CRM at build time.
   ------------------------------------------------------------------ */
#view-clients .cx-end, #view-clientdb .cx-end {display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

/* The last grid track has to give up its fixed 28px now that it holds a button. */
#view-clients .cx-row, #view-clients .cx-row__head {grid-template-columns: 44px 1.3fr 1fr 1.1fr .9fr 1.4fr auto; }
#view-clientdb .cx-row, #view-clientdb .cx-row__head {grid-template-columns: 44px minmax(0, 1.6fr) 1.1fr .8fr .7fr 1fr auto; }
@media (max-width: 860px) {
  #view-clients .cx-row, #view-clients .cx-row__head {grid-template-columns: 40px 1fr auto auto; }
  #view-clientdb .cx-row, #view-clientdb .cx-row__head {grid-template-columns: 44px minmax(0, 1.4fr) 1.1fr auto; }
}
@media (max-width: 620px) {
  #view-clients .cx-row {grid-template-columns: 34px minmax(0, 1fr) auto; }
  #view-clientdb .cx-row {grid-template-columns: 34px minmax(0, 1fr) auto; }
}

#view-clients .wa-btn, #view-clientdb .wa-btn {display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: .82rem; font-weight: 600; line-height: 1; cursor: pointer;
  min-height: 36px; padding: 0 10px; border: 1.5px solid #cfe8d2; border-radius: 999px;
  background: #eef8ef; color: #1c7a3a; transition: background .15s, border-color .15s; }
#view-clients .wa-btn svg, #view-clientdb .wa-btn svg {width: 18px; height: 18px; flex: none; display: block; }
#view-clients .wa-btn:hover, #view-clientdb .wa-btn:hover {background: #ddf1e0; border-color: #9ed3a7; }
#view-clients .wa-btn:focus-visible, #view-clientdb .wa-btn:focus-visible {outline: 2px solid #1c7a3a; outline-offset: 2px; }
#view-clients .wa-btn[disabled], #view-clientdb .wa-btn[disabled] {opacity: .4; cursor: not-allowed; background: #f4f4f2; border-color: var(--surface-3); color: var(--text-muted); }
#view-clients .wa-btn--icon, #view-clientdb .wa-btn--icon {width: 36px; padding: 0; }
#view-clients .rec__actions .wa-btn--rec, #view-clientdb .rec__actions .wa-btn--rec {min-height: 38px; padding: 0 14px;
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); color: #fff; }
#view-clients .rec__actions .wa-btn--rec:hover, #view-clientdb .rec__actions .wa-btn--rec:hover {background: rgba(255,255,255,.22); border-color: #fff; }
#view-clients .rec__actions .wa-btn--rec[disabled], #view-clientdb .rec__actions .wa-btn--rec[disabled] {background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: var(--text-invert-muted); }

/* ---- the composer panel ---- */
#dwd-wa {position: fixed; inset: 0; z-index: 120; }
#dwd-wa .wa__bg {position: absolute; inset: 0; background: rgba(0,0,0,.5); }
#dwd-wa .wa__panel {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: min(88svh, calc(100vh - 32px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,.32); }
#dwd-wa .wa__head {display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--surface-2); }
#dwd-wa .wa__who {min-width: 0; flex: 1; }
#dwd-wa .wa__title {margin: 0; font-size: 1.1rem; line-height: 1.25; overflow-wrap: anywhere; }
#dwd-wa .wa__to {margin: 4px 0 0; font-size: .82rem; color: var(--text-muted); overflow-wrap: anywhere; }
#dwd-wa .wa__to strong {color: var(--ink); font-weight: 600; }
#dwd-wa .wa__digits {white-space: nowrap; }
#dwd-wa .wa__bad {color: #b42323; }
#dwd-wa .wa__x {flex: none; width: 40px; height: 40px; margin: -6px -8px 0 0; font-size: 24px; line-height: 1;
  background: none; border: 0; color: var(--text-muted); cursor: pointer; border-radius: 50%; }
#dwd-wa .wa__x:hover {background: var(--bg-lighter); color: var(--ink); }
#dwd-wa .wa__body {padding: 16px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#dwd-wa .wa__f {display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
#dwd-wa .wa__f label {font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
#dwd-wa .wa__f label small {text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px; }
#dwd-wa select, #dwd-wa textarea {font: inherit; font-size: 16px; width: 100%; max-width: 100%; padding: 10px 12px; min-height: 44px;
  border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
#dwd-wa textarea {min-height: 150px; resize: vertical; line-height: 1.5; }
#dwd-wa select:focus, #dwd-wa textarea:focus {outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
#dwd-wa .wa__ctx {margin-bottom: 14px; }
#dwd-wa .wa__insight, #dwd-wa .wa__never {margin: 0 0 8px; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: .85rem; line-height: 1.5; overflow-wrap: anywhere; }
#dwd-wa .wa__insight {background: var(--bg-lighter); color: var(--ink); }
#dwd-wa .wa__never {background: #fdeeee; color: #8f2020; }
#dwd-wa .wa__insight span, #dwd-wa .wa__never span {display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; opacity: .7; margin-bottom: 3px; }
#dwd-wa .wa__foot {margin: 0; font-size: .78rem; color: var(--text-muted); line-height: 1.5; }
#dwd-wa .wa__bar {display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--surface-2); background: #fff; }
#dwd-wa .wa__bar .btn {min-height: 40px; }
#dwd-wa .btn--light {background: #fff; color: var(--ink); border: 1.5px solid var(--surface-3); box-shadow: none; }
#dwd-wa .btn--light:hover {border-color: var(--ink); }
#dwd-wa #wa-open.is-off {opacity: .45; pointer-events: none; }
#dwd-wa .btn[disabled] {opacity: .45; cursor: not-allowed; }

@media (max-width: 620px) {
  #dwd-wa .wa__panel {left: 0; top: auto; bottom: 0; transform: none; width: 100vw; max-width: 100vw;
    max-height: 92svh; border-radius: 18px 18px 0 0; }
  #dwd-wa .wa__head {padding: 16px; }
  #dwd-wa .wa__body {padding: 14px 16px; }
  #dwd-wa .wa__bar {padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  #dwd-wa .wa__bar .btn {flex: 1; justify-content: center; }
  #dwd-wa .wa__digits {display: block; }
  #view-clients .wa-btn, #view-clientdb .wa-btn {min-height: 40px; }
  #view-clients .wa-btn--icon, #view-clientdb .wa-btn--icon {width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  #view-clients .wa-btn, #view-clientdb .wa-btn {transition: none; }
}
#dwd-wa .wa__blank {margin: -4px 0 12px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: #fff1e3; color: #8a4708; font-size: .82rem; line-height: 1.45; }

/* ------------------------------------------------------------------
   Trainers + Client assignment (the two admin tabs that stand in for
   "My Clients"). Scoped under their own view ids so nothing here can
   reach the trainer's own workspace or the client database.
   ------------------------------------------------------------------ */
#view-trainers .db-intro, #view-assign .db-intro {margin-bottom: 18px; }
#view-trainers .db-title, #view-assign .db-title {margin: 0 0 6px; font-size: 1.3rem; }
#view-trainers .db-note, #view-assign .db-note {margin: 0; max-width: 78ch; font-size: .88rem; color: var(--text-muted); line-height: 1.5; }
#view-trainers .db-note strong, #view-assign .db-note strong {color: var(--ink); }
#view-trainers .cx-empty, #view-assign .cx-empty {padding: 26px 18px; text-align: center; color: var(--text-muted); font-size: .88rem; line-height: 1.5; }
#view-trainers .cx-empty strong, #view-assign .cx-empty strong {color: var(--ink); }
#view-trainers .cx-empty--err, #view-assign .cx-empty--err {color: #b42323; }
#view-trainers .btn--light, #view-assign .btn--light {background: #fff; color: var(--ink); border: 1.5px solid var(--surface-3); box-shadow: none; }
#view-trainers .btn--light:hover, #view-assign .btn--light:hover {border-color: var(--ink); }
#view-trainers .btn[disabled], #view-assign .btn[disabled] {opacity: .45; cursor: not-allowed; }
#view-trainers .cx-av, #view-assign .cx-av {width: 40px; height: 40px; flex: none; border-radius: 50%; display: inline-grid; place-items: center;
  font-weight: 700; color: #fff; font-size: .85rem; background: var(--grad-cta); }
#view-trainers .cx-persona, #view-assign .cx-persona {display: inline-block; max-width: 100%; font-size: .72rem; font-weight: 600; line-height: 1.25;
  padding: 3px 9px; border-radius: 999px; background: #f1efec; color: #4a4340; overflow-wrap: anywhere; }
#view-trainers .cx-persona--good, #view-assign .cx-persona--good {background: #e8f6dc; color: #35690d; }
#view-trainers .cx-persona--warn, #view-assign .cx-persona--warn {background: #fff1e3; color: #a5520a; }
#view-trainers .cx-persona--neutral, #view-assign .cx-persona--neutral {background: #eef1f6; color: #3b4a63; }
#view-trainers .cx-persona--none, #view-assign .cx-persona--none {background: none; color: var(--text-muted); padding-inline: 0; font-weight: 500; }
#view-trainers .cx-badge, #view-assign .cx-badge {display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 4px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted); font-size: .72rem; font-weight: 700; vertical-align: middle; }
#view-trainers .cx-tier {font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #eef1f6; color: #3b4a63; white-space: nowrap; }
#view-trainers .cx-tier--dietician_admin {background: #e8f6dc; color: #35690d; }
#view-trainers .cx-tier--dietician {background: #eaf2fb; color: #1f4d7a; }

/* --- Trainers: one row per trainer, the same shape as #view-members .mb-row so the
   two sections read as one system. Two abreast on a wide screen, one on a phone. --- */
#view-trainers .tr-grid {display: grid; grid-template-columns: 1fr; background: #fff;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
#view-trainers .tr-grid > .cx-empty {grid-column: 1 / -1; }
#view-trainers .tr-person {display: grid; grid-template-columns: 32px minmax(0, 1.5fr) auto .9fr; gap: 10px;
  align-items: center; padding: 6px 14px; min-height: 44px; border-top: 1px solid var(--surface-2);
  width: 100%; text-align: left; font: inherit; color: inherit; background: none; border-inline: 0; border-bottom: 0;
  cursor: pointer; }
#view-trainers .tr-grid > .tr-person:first-child {border-top: 0; }
@media (min-width: 900px) {
  #view-trainers .tr-grid {grid-template-columns: 1fr 1fr; }
  #view-trainers .tr-grid > .tr-person:nth-child(2) {border-top: 0; }
  #view-trainers .tr-grid > .tr-person:nth-child(odd) {border-right: 1px solid var(--surface-2); }
}
#view-trainers .tr-person:hover {background: var(--bg-lighter); }
#view-trainers .tr-person:focus-visible {outline: 2px solid var(--orange); outline-offset: -2px; }
#view-trainers .tr-person.is-open {background: #fff3e4; box-shadow: inset 3px 0 0 var(--orange); }
#view-trainers .tr-person > * {min-width: 0; }
#view-trainers .tr-person .cx-av {width: 32px; height: 32px; font-size: .72rem; }
#view-trainers .tr-person__id strong {display: block; font-size: .88rem; line-height: 1.3; overflow-wrap: anywhere; }
#view-trainers .tr-person__sub {display: block; font-size: .72rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-trainers .tr-person .cx-tier {font-size: .66rem; padding: 3px 8px; }
#view-trainers .tr-person__stats {font-size: .76rem; color: var(--text-muted); text-align: right; white-space: nowrap; }

#view-trainers .tr-detail {margin-top: 20px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
#view-trainers .tr-detail__head {display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; background: var(--ink); color: #fff; }
#view-trainers .tr-detail__head h3 {margin: 0; font-size: 1.1rem; }
#view-trainers .tr-detail__head .cx-badge {background: rgba(255,255,255,.16); color: #fff; }
#view-trainers .tr-detail__head .btn {margin-left: auto; }
#view-trainers .tr-rows {padding: 0 20px; }
#view-trainers .tr-row {display: grid; grid-template-columns: 40px minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--surface-2); }
#view-trainers .tr-row:last-child {border-bottom: 0; }
#view-trainers .tr-row__id {display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#view-trainers .tr-row__id strong {overflow-wrap: anywhere; }
#view-trainers .tr-row__sub {font-size: .78rem; color: var(--text-muted); overflow-wrap: anywhere; }
#view-trainers .tr-row__act {display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
#view-trainers .tr-row__act .btn {min-height: 40px; }
#view-trainers .tr-own {font-weight: 600; }
#view-trainers .tr-own--free {color: #35690d; }
#view-trainers .tr-own--self {color: var(--text-muted); }
#view-trainers .tr-find {padding: 18px 20px 22px; border-top: 1px solid var(--surface-2); background: var(--bg-lighter); }
#view-trainers .tr-find h4 {margin: 0 0 12px; font-size: .95rem; }
#view-trainers .tr-find .tr-rows {padding: 0; }
#view-trainers .cx-bar {display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; max-width: 100%; }
#view-trainers .cx-search {flex: 1 1 260px; min-width: 0; position: relative; }
#view-trainers .cx-search input {width: 100%; padding: 11px 14px 11px 38px; font: inherit; font-size: 16px; min-height: 44px;
  border: 1.5px solid var(--surface-3); border-radius: var(--radius-pill); background: #fff; }
#view-trainers .cx-search input:focus {outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
#view-trainers .cx-search svg {position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
#view-trainers .db-pager {display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--surface-2); }
#view-trainers .db-count {font-size: .82rem; color: var(--text-muted); }
#view-trainers .db-pager__btns {margin-left: auto; display: flex; gap: 8px; }
#view-trainers .db-pager__btns .btn {min-height: 40px; }

/* The "Move to…" menu — the keyboard and touch route that does the same job as a drag */
#view-trainers .mv__sel, #view-assign .mv__sel {font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink);
  padding: 8px 10px; min-height: 40px; max-width: 100%; border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); background: #fff; cursor: pointer; }
#view-trainers .mv__sel:focus, #view-assign .mv__sel:focus {outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }

/* --- Client assignment: the drag-and-drop board --- */
#view-assign .as-board {display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 14px;
  overflow-x: auto; padding-bottom: 8px; align-items: start; }
#view-assign .as-col {background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; min-width: 0; }
#view-assign .as-col--free {background: var(--bg-lighter); }
#view-assign .as-col__head {padding: 14px 16px; border-bottom: 1px solid var(--surface-2); }
#view-assign .as-col__head h3 {margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
#view-assign .as-col__head .cx-av {width: 30px; height: 30px; font-size: .72rem; }
#view-assign .as-col__sub {margin: 5px 0 0; font-size: .76rem; color: var(--text-muted); overflow-wrap: anywhere; }
#view-assign .as-find {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#view-assign .as-find input, #view-assign .as-find select {font: inherit; font-size: 16px; padding: 9px 12px; min-height: 40px; flex: 1 1 100%; min-width: 0;
  border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); background: #fff; }
#view-assign .as-find select {font-size: .84rem; font-weight: 600; cursor: pointer; }
#view-assign .as-find input:focus, #view-assign .as-find select:focus {outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
#view-assign .as-find .btn {flex: 1 1 auto; min-height: 40px; justify-content: center; }
#view-assign .as-col__body {padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 140px;
  max-height: 62vh; overflow-y: auto; border-radius: 0 0 var(--radius-lg) var(--radius-lg); transition: background .15s, box-shadow .15s; }
#view-assign .as-col__body.is-over {background: #fff3e4; box-shadow: inset 0 0 0 2px var(--orange); }
#view-assign .as-col__foot {display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--surface-2);
  font-size: .76rem; color: var(--text-muted); }
#view-assign .as-col__btns {margin-left: auto; display: flex; gap: 6px; }
#view-assign .as-col__btns .btn {min-height: 40px; min-width: 44px; justify-content: center; }
#view-assign .as-col__pg {flex: 1 1 100%; }
#view-assign .as-card {display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 4px 8px; align-items: start;
  padding: 10px 12px; background: #fff; border: 1.5px solid var(--surface-2); border-radius: var(--radius-sm); cursor: grab; }
#view-assign .as-card:focus-visible {outline: 2px solid var(--orange); outline-offset: 2px; }
#view-assign .as-card.is-dragging {opacity: .45; cursor: grabbing; }
#view-assign .as-card__grip {color: var(--text-muted); font-size: .72rem; line-height: 1.4; letter-spacing: -2px; user-select: none; }
#view-assign .as-card__id {display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
#view-assign .as-card__id strong {font-size: .92rem; overflow-wrap: anywhere; }
#view-assign .as-card__sub {font-size: .76rem; color: var(--text-muted); overflow-wrap: anywhere; }
#view-assign .as-card .mv {grid-column: 2; }
#view-assign .as-card .mv__sel {width: 100%; font-size: .78rem; }

@media (max-width: 860px) {
  #view-trainers .tr-row {grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; }
  #view-trainers .tr-row__persona {grid-column: 2; }
  #view-trainers .tr-row__act {grid-column: 1 / -1; justify-content: flex-start; }
  #view-trainers .tr-row__act .btn, #view-trainers .tr-row__act .mv__sel {flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 620px) {
  #view-trainers .tr-person {grid-template-columns: 32px minmax(0, 1fr) auto; }
  #view-trainers .tr-person .cx-tier {display: none; }
  #view-trainers .tr-detail__head .btn {margin-left: 0; width: 100%; justify-content: center; }
  #view-trainers .db-pager__btns {margin-left: 0; width: 100%; }
  #view-trainers .db-pager__btns .btn {flex: 1; justify-content: center; }
  #view-trainers .cx-search {flex: 1 0 100%; }
  #view-trainers .cx-bar .btn {flex: 1 1 auto; min-height: 40px; justify-content: center; }
  #view-assign .as-board {grid-auto-columns: minmax(76vw, 1fr); }
  #view-assign .as-col__body {max-height: 56vh; }
}
@media (prefers-reduced-motion: reduce) {
  #view-assign .as-col__body {transition: none; }
}

/* ------------------------------------------------------------------
   Members — the admin tab that owns the login allow-list.
   Scoped under #view-members so nothing here leaks into the other tabs.
   ------------------------------------------------------------------ */
#view-members .db-intro {margin-bottom: 18px; }
#view-members .db-title {margin: 0 0 6px; font-size: 1.3rem; }
#view-members .db-note {margin: 0; max-width: 78ch; font-size: .88rem; color: var(--text-muted); line-height: 1.55; }
#view-members .db-note strong {color: var(--ink); }
#view-members .cx-empty {padding: 26px 18px; text-align: center; color: var(--text-muted); font-size: .88rem; line-height: 1.5; }
#view-members .cx-empty--err {color: #b42323; }
#view-members .btn--light {background: #fff; color: var(--ink); border: 1.5px solid var(--surface-3); box-shadow: none; }
#view-members .btn--light:hover {border-color: var(--ink); }
#view-members .btn[disabled] {opacity: .45; cursor: not-allowed; }
#view-members .btn {min-height: 40px; }
#view-members .cx-av {width: 40px; height: 40px; flex: none; border-radius: 50%; display: inline-grid; place-items: center;
  font-weight: 700; color: #fff; font-size: .85rem; background: var(--grad-cta); }

#view-members .mb-bar {display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
#view-members .mb-tally {font-size: .86rem; color: var(--text-muted); }
#view-members .mb-tally strong {color: var(--ink); }
#view-members .mb-bar .btn {margin-left: auto; }

#view-members .mb-first {padding: 14px 16px; margin-bottom: 14px; border-radius: var(--radius-sm);
  background: #fff8ef; border: 1.5px solid #f4d9b8; font-size: .86rem; color: #6a4a22; line-height: 1.55; max-width: 78ch; }
#view-members .mb-first strong {color: #4a3113; }

/* --- add form --- */
#view-members .mb-new {padding: 18px 20px 20px; margin-bottom: 18px; background: #fff;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
#view-members .mb-new h3 {margin: 0 0 6px; font-size: 1.02rem; }
#view-members .mb-new__hint {margin: 0 0 14px; font-size: .82rem; color: var(--text-muted); line-height: 1.5; max-width: 70ch; }
#view-members .mb-new__btns {display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
#view-members .mb-fields {display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
#view-members .mb-field {display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#view-members .mb-field > span {font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); }
#view-members .mb-field input, #view-members .mb-field select {font: inherit; font-size: 16px; padding: 9px 12px; min-height: 40px; width: 100%; min-width: 0;
  border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
#view-members .mb-field input:focus, #view-members .mb-field select:focus {outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
#view-members .mb-field input[readonly] {background: var(--surface-1, #f6f5f3); color: var(--text-muted); }
#view-members .mb-err {margin: 12px 0 0; font-size: .84rem; color: #b42323; line-height: 1.45; }

/* --- one row per person; the card below is kept for the one being edited --- */
/* Tally, search, role filter and the add button share one row: four short controls
   stacked into three bands was most of the height above the list. */
#view-members .mb-filters {display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; max-width: 100%; }
#view-members .mb-filters .mb-tally {flex: 0 0 auto; font-size: .8rem; }
#view-members .mb-filters .cx-search {flex: 1 1 200px; }
#view-members .mb-filters .cx-search input {min-height: 36px; padding: 7px 12px 7px 34px; font-size: .88rem; }
#view-members .mb-filters .cx-search svg {left: 11px; width: 14px; height: 14px; }
#view-members .mb-filters .cx-persona-filter {min-height: 36px; padding: 5px 10px; font-size: .78rem; }
#view-members .mb-filters .btn {min-height: 36px; padding: 6px 14px; font-size: .8rem; white-space: nowrap; }
/* Two rows abreast on a wide screen, one on a phone. Ten people then read as five
   short lines instead of ten, and the row itself stays the same shape either way. */
#view-members .mb-rows {display: grid; grid-template-columns: 1fr; background: #fff;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
#view-members .mb-row {display: grid; grid-template-columns: 32px minmax(0, 1.6fr) auto .8fr auto; gap: 10px;
  align-items: center; padding: 8px 14px; border-top: 1px solid var(--surface-2); }
#view-members .mb-rows > .mb-row:first-child {border-top: 0; }
/* One column. Two abreast never left room for a name and an address, and the labels
   wrapped into three-line rows; ten short lines read faster than five tall ones. */
#view-members .mb-row:hover {background: var(--bg-lighter); }
#view-members .mb-row > * {min-width: 0; }
#view-members .mb-row__id strong {display: block; font-size: .88rem; line-height: 1.3; overflow-wrap: anywhere; }
#view-members .mb-row__sub {display: block; font-size: .72rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-members .mb-row__id strong {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-members .mb-live {display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: .72rem; font-weight: 700; color: var(--text-muted); cursor: pointer;
  padding: 3px 9px 3px 7px; border: 1.5px solid var(--surface-3); border-radius: 999px; background: #fff; }
#view-members .mb-live.is-on {color: #1d6b3f; border-color: #9dd6b4; background: #eefaf2; }
#view-members .mb-live--always {cursor: default; color: #35690d; border-color: #cbe6ad; background: #f2f9ea; padding-left: 9px; }
#view-members .mb-row .mb-live {width: 80px; justify-content: center; box-sizing: border-box; }
#view-members .mb-live input {width: 13px; height: 13px; margin: 0; accent-color: #1d6b3f; }
/* fixed widths for the switch, the role and the count, so every row's columns line up
   across the page instead of drifting with the length of each label */
#view-members .mb-row {grid-template-columns: 32px minmax(0, 1fr) 88px 136px 80px 58px; align-items: center; }
#view-members .mb-row > * {align-self: center; }
#view-members .mb-row .mb-tier {align-self: center; }
#view-members .mb-row .mb-live {justify-self: start; }
#view-members .mb-row .mb-tier {justify-self: start; max-width: 128px; overflow: hidden; text-overflow: ellipsis; }
#view-members .mb-row .btn {justify-self: end; }
#view-members .mb-row__case {font-size: .76rem; color: var(--text-muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#view-members .mb-row .btn {min-height: 30px; padding: 4px 12px; font-size: .76rem; }
#view-members .mb-rows > .mb-card {border-radius: 0; box-shadow: none; border-top: 1px solid var(--surface-2); }
#view-members .cx-pager {display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-top: 10px; font-size: .8rem; color: var(--text-muted); }
#view-members .cx-pager__btns {display: flex; gap: 8px; }
@media (max-width: 620px) {
  #view-members .mb-row {grid-template-columns: 32px minmax(0, 1fr) auto; }
  #view-members .mb-row .mb-tier {display: none; }
  #view-members .mb-row__case {display: none; }
}

/* --- one card per person --- */
/* Snap to grid: every card fills its row's height and its three bands — identity,
   stats, actions — sit at the same y across the row. Without this each card sizes to
   its own content and a wrapped email or an extra note knocks the row out of line. */
#view-members .mb-cards {display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 10px; align-items: stretch; }
#view-members .mb-card {display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 12px 14px; background: #fff;
  border: 1.5px solid transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); min-width: 0; }
#view-members .mb-card.is-open {border-color: var(--orange); background: #fff9f3; }
#view-members .mb-card__top {display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; }
/* the avatar only has to carry two initials, so it does not need the 40px the
   client list gives it — overridden here rather than shrinking .cx-av everywhere */
#view-members .mb-card .cx-av {width: 32px; height: 32px; font-size: .74rem; }
/* headshot fills the same circle the initials occupy, so a card with a photo and one
   without still line up */
#view-members .cx-av--pic, #view-trainers .cx-av--pic, #view-assign .cx-av--pic {padding: 0; overflow: hidden; background: var(--surface-2); }
#view-members .cx-av--pic img, #view-trainers .cx-av--pic img, #view-assign .cx-av--pic img {width: 100%; height: 100%; object-fit: cover; display: block; }
#view-members .mb-card__id {display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#view-members .mb-card__id strong {font-size: .92rem; line-height: 1.25; overflow-wrap: anywhere; }
#view-members .mb-tier {white-space: nowrap; align-self: start; }
#view-members .mb-card__sub {font-size: .74rem; line-height: 1.4; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-members .mb-card__sub > span {display: block; overflow: hidden; text-overflow: ellipsis; }
#view-members .mb-none {font-style: italic; opacity: .8; }
#view-members .mb-you {display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted); font-size: .68rem; font-weight: 700; vertical-align: middle; }
#view-members .mb-tier {font-size: .66rem; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: #eef1f6; color: #3b4a63; white-space: nowrap; align-self: flex-start; }
#view-members .mb-tier--superuser {background: #e8f6dc; color: #35690d; }
#view-members .mb-tier--admin_ops {background: #fff1e3; color: #a5520a; }
#view-members .mb-tier--dietician_admin {background: #eef1f6; color: #3b4a63; }
#view-members .mb-tier--progress_partner {background: #f1efec; color: #4a4340; }
#view-members .mb-tier--dietician {background: #eaf2fb; color: #1f4d7a; }
#view-members .mb-tier--client {background: #f6f1f8; color: #5c3b6b; }

#view-members .mb-card__stats {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  border-top: 1px solid var(--surface-2); padding-top: 9px; align-items: start; }
#view-members .mb-stat {display: flex; flex-direction: column; gap: 1px; font-size: .68rem; color: var(--text-muted); line-height: 1.25; min-width: 0; }
#view-members .mb-stat b {font-size: .95rem; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }

/* one row: role picker, then the two buttons. Remove used to claim a row of its own,
   which cost every card a whole extra band for a button most people never press. */
#view-members .mb-card__act {display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; margin-top: auto; }
#view-members .mb-role {min-width: 0; }
#view-members .mb-card__act .btn {min-height: 32px; padding: 5px 11px; font-size: .78rem; }
#view-members .mv__sel {font: inherit; font-size: .78rem; font-weight: 600; color: var(--ink); width: 100%;
  padding: 5px 8px; min-height: 32px; max-width: 100%; border: 1.5px solid var(--surface-3);
  border-radius: var(--radius-sm); background: #fff; cursor: pointer; }
#view-members .mv__sel:focus {outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
#view-members .mv__sel[disabled] {opacity: .55; cursor: not-allowed; background: var(--surface-1, #f6f5f3); }
#view-members .mb-remove:not([disabled]) {color: #b42323; border-color: #e7c3c3; }
#view-members .mb-remove:not([disabled]):hover {border-color: #b42323; }
/* the note explains why a control is disabled, so it reads above the controls —
   and it keeps the action band the last child, which is what pins it to the foot */
#view-members .mb-why {margin: 0; font-size: .72rem; color: var(--text-muted); line-height: 1.4; order: 1; }
#view-members .mb-card__act {order: 2; }
#view-members .mb-edit {order: 3; }

#view-members .mb-edit {border-top: 1px solid var(--surface-2); padding-top: 11px; }
#view-members .mb-edit__btns {display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 620px) {
  #view-members .mb-cards {grid-template-columns: 1fr; }
  #view-members .mb-fields {grid-template-columns: 1fr; }
  #view-members .mb-bar .btn {margin-left: 0; width: 100%; justify-content: center; }
  #view-members .mb-card__stats {grid-template-columns: 1fr 1fr; }
  #view-members .mb-card__act {grid-template-columns: 1fr 1fr; }
  #view-members .mb-role {grid-column: 1 / -1; }
  #view-members .mb-role {width: 100%; }
  #view-members .mb-remove {justify-self: stretch; }
  #view-members .mb-card__act .btn {width: 100%; }
  #view-members .mb-card__act .btn {justify-content: center; }
  #view-members .mb-new__btns .btn, #view-members .mb-edit__btns .btn {flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   Admin tab — one tab, four collapsible sections
   Client database / Trainers / Client assignment / Login & assignments used to be
   four hero tabs. They are now sections of the single Admin tab; each keeps its own
   #view-* root, so every rule above still applies inside .adm-body unchanged.
   ========================================================================== */
.ask__hero--slim ~ #view-admin .ask__body { padding-top: 26px; }

.adm-accordion { display: flex; flex-direction: column; gap: 12px; }

.adm-sec { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
           overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.adm-sec.is-open { border-color: var(--line-strong); box-shadow: 0 6px 24px rgba(23,23,23,.06); }
.adm-h { margin: 0; font-size: 1rem; font-weight: inherit; }

.adm-head { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px;
            padding: 14px 18px; text-align: left; background: none; border: 0; cursor: pointer;
            font-family: inherit; color: var(--ink); }
.adm-head:hover { background: var(--bg-lighter); }
.adm-head:focus-visible { outline: 2px solid var(--orange); outline-offset: -3px; }
.adm-sec.is-open .adm-head { background: var(--bg-lighter); border-bottom: 1px solid var(--line); }

.adm-head__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.adm-head__title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
                   font-family: var(--font-display); font-size: 1.22rem; line-height: 1.2; color: var(--ink); }
.adm-head__desc { font-size: .84rem; line-height: 1.45; color: var(--text-muted); }
.adm-head__desc b { color: var(--ink); font-weight: 600; }

.adm-count { display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill);
             background: var(--surface-2); color: var(--text-muted);
             font-family: var(--font-ui); font-size: .74rem; font-weight: 600; letter-spacing: .01em;
             white-space: nowrap; }
.adm-count[hidden] { display: none; }

.adm-chev { flex: 0 0 auto; width: 22px; height: 22px; color: var(--grey);
            transition: transform .18s ease; }
.adm-sec.is-open .adm-chev { transform: rotate(180deg); color: var(--ink); }

/* A colour per section, so six white cards stop reading as one wall. The hue is
   carried on the section and used by the icon tile, the count pill, the open-state
   edge and the focus ring, so adding a section means adding one rule below. */
.adm-sec { --acc: #6f6d70; --acc-bg: #f1efec; }
.adm-sec[data-adm-sec="classes"]  { --acc: #2f6b8f; --acc-bg: #e7f0f6; }
.adm-sec[data-adm-sec="payouts"]  { --acc: #3f7d5c; --acc-bg: #e6f1ea; }
.adm-sec[data-adm-sec="clientdb"] { --acc: #b3701c; --acc-bg: #fdf0dd; }
.adm-sec[data-adm-sec="trainers"] { --acc: #6a4c93; --acc-bg: #efeaf7; }
.adm-sec[data-adm-sec="assign"]   { --acc: #1f7a72; --acc-bg: #e2f2f0; }
.adm-sec[data-adm-sec="members"]  { --acc: #a8475c; --acc-bg: #fbe9ed; }

.adm-sec { position: relative; }
/* a hairline of the section's colour down the left edge, brightening when open */
.adm-sec::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acc); opacity: .28; transition: opacity .18s ease, width .18s ease;
}
.adm-sec:hover::before { opacity: .55; }
.adm-sec.is-open::before { opacity: 1; width: 4px; }

.adm-head__ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; background: var(--acc-bg); color: var(--acc);
  transition: transform .18s ease;
}
.adm-head__ico svg { width: 19px; height: 19px; }
.adm-head:hover .adm-head__ico { transform: scale(1.06); }
.adm-sec.is-open .adm-head__ico { background: var(--acc); color: #fff; }
.adm-sec.is-open .adm-head { background: var(--acc-bg); }
.adm-sec.is-open .adm-head__title { color: var(--acc); }
.adm-sec.is-open .adm-chev { color: var(--acc); }
.adm-head:focus-visible { outline-color: var(--acc); }

.adm-sec .adm-count { background: var(--acc-bg); color: var(--acc); }

.adm-body { padding: 22px 18px 24px; }
.adm-body[hidden] { display: none; }
.adm-panel { min-width: 0; }

/* The four panels no longer bring their own <h2>; the section header carries it. */
#view-clientdb .db-intro, #view-trainers .db-intro,
#view-assign .db-intro, #view-members .db-intro { margin-bottom: 16px; }

@media (max-width: 620px) {
  .adm-head { gap: 10px; padding: 12px 14px; min-height: 56px; }
  .adm-head__ico { width: 32px; height: 32px; border-radius: 9px; }
  .adm-head__ico svg { width: 16px; height: 16px; }
  .adm-head__title { font-size: 1.08rem; }
  .adm-head__desc { font-size: .8rem; }
  .adm-body { padding: 16px 12px 18px; }
}

/* ==========================================================================
   Recruiting staff out of the client database (recruit.js)
   The same card appears in two places — the search under Login & assignments and
   the "Add as team member" panel on an open client record — so these rules are
   deliberately NOT scoped to a #view-* root the way the rest of the admin tab is.
   ========================================================================== */
.rc-block { padding: 18px 20px 20px; margin-bottom: 18px; background: #fff;
            border: 1.5px solid var(--surface-2); border-radius: var(--radius); }
.rc-block h3 { margin: 0 0 6px; font-size: 1.02rem; }
.rc-hint { margin: 0 0 14px; font-size: .82rem; color: var(--text-muted); line-height: 1.5; max-width: 76ch; }
.rc-hint strong { color: var(--ink); }

.rc-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-bar .cx-search { flex: 1 1 260px; min-width: 0; position: relative; }
.rc-bar .cx-search input { width: 100%; padding: 11px 14px 11px 38px; font: inherit; font-size: 16px;
                           min-height: 44px; background: #fff; border: 1.5px solid var(--surface-3);
                           border-radius: var(--radius-pill); }
.rc-bar .cx-search input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
.rc-bar .cx-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
                         width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.rc-bar .btn { min-height: 44px; }

.rc-out:empty { display: none; }
.rc-out { margin-top: 14px; }
.rc-count { margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
            text-transform: uppercase; color: var(--text-muted); }
.rc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }

.rc-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px;
           background: var(--bg-lighter, #faf9f7); border: 1.5px solid var(--surface-2); border-radius: var(--radius); }
.rc-card--compact { padding: 14px 16px; background: #fff; }

.rc-card__top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.rc-av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: inline-grid; place-items: center;
         background: var(--surface-2); color: var(--ink); font-family: var(--font-ui, inherit);
         font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.rc-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 140px; }
.rc-id strong { font-size: 1rem; overflow-wrap: anywhere; }
.rc-sub { font-size: .78rem; color: var(--text-muted); overflow-wrap: anywhere; }
.rc-none { font-style: italic; opacity: .8; }
.rc-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.rc-persona { font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
              background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.rc-badge { font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
            background: #eef1f6; color: #3b4a63; }
.rc-badge--superuser { background: #e8f6dc; color: #35690d; }
.rc-badge--admin_ops { background: #fff1e3; color: #a5520a; }
.rc-badge--dietician_admin { background: #eef1f6; color: #3b4a63; }
.rc-badge--progress_partner { background: #f1efec; color: #4a4340; }
.rc-badge--dietician { background: #eaf2fb; color: #1f4d7a; }
.rc-badge--client { background: #f6f1f8; color: #5c3b6b; }

.rc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.rc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rc-field > span { font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); }
.rc-field input, .rc-field select { font: inherit; font-size: 16px; padding: 9px 12px; min-height: 44px;
                                    width: 100%; min-width: 0; background: #fff; color: var(--ink);
                                    border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); }
.rc-field input:focus, .rc-field select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
.rc-field--static b { display: flex; align-items: center; min-height: 44px; font-size: .88rem;
                      font-weight: 600; overflow-wrap: anywhere; }

.rc-why { margin: 0; font-size: .78rem; color: var(--text-muted); line-height: 1.45; }
.rc-why strong { color: var(--ink); }
.rc-why--warn { padding: 9px 12px; border-radius: var(--radius-sm); background: #fff6e8; color: #6b4a12; }
.rc-err { margin: 0; font-size: .82rem; color: #b42323; line-height: 1.45; }
.rc-err[hidden] { display: none; }
.rc-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rc-act .btn { min-height: 44px; }
.rc-act .btn[disabled] { opacity: .45; cursor: not-allowed; }
.rc-form { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 620px) {
  .rc-block { padding: 14px 14px 16px; }
  .rc-cards { grid-template-columns: 1fr; }
  .rc-card { padding: 14px; }
  .rc-bar .cx-search { flex: 1 0 100%; }
  .rc-bar .btn { flex: 1 1 auto; justify-content: center; }
  .rc-tags { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; }
  .rc-act .btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- Admin > Classes
   Zoom attendance by trainer. Everything is scoped to #view-classes so the tables
   here cannot reach the client database or the chat panel. */
/* .cx-bar, .btn--light and .cx-persona-filter are scoped per panel in this sheet,
   so a new panel inherits none of them — they are repeated here on purpose. */
#view-classes .cx-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; max-width: 100%; }
#view-classes .btn--light { background: #fff; color: var(--ink); border: 1.5px solid var(--surface-3); box-shadow: none; }
#view-classes .btn--light:hover { border-color: var(--ink); }
#view-classes .cx-persona-filter {
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--text-muted);
  padding: 7px 11px; min-height: 40px; border: 1.5px solid var(--surface-3);
  border-radius: 999px; background: #fff; cursor: pointer; text-overflow: ellipsis;
}
#view-classes .cx-persona-filter:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
#view-classes .cx-empty { padding: 14px; color: var(--text-muted); font-size: .84rem; }
#view-classes .cls-status { font-size: .78rem; color: var(--text-muted); flex: 1 1 auto; }
#view-classes .cls-h { margin: 22px 0 8px; font-size: .95rem; letter-spacing: -.01em; }
#view-classes .cls-h:first-of-type { margin-top: 18px; }

#view-classes .cls-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px; margin: 14px 0 4px;
}
#view-classes .cls-kpi {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
#view-classes .cls-kpi b { display: block; font-size: 1.32rem; font-weight: 650; letter-spacing: -.02em; }
#view-classes .cls-kpi span {
  color: var(--text-muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
}

#view-classes .cls-tablewrap {
  overflow-x: auto; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
#view-classes .cls-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
#view-classes .cls-table th {
  text-align: left; font-weight: 600; color: var(--text-muted); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .05em; padding: 9px 10px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
#view-classes .cls-table .cls-th-sub {
  display: block; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .62rem;
}
#view-classes .cls-table td {
  padding: 7px 10px; border-bottom: 1px solid var(--bg-light); white-space: nowrap;
}
#view-classes .cls-table tr:last-child td { border-bottom: 0; }
#view-classes .cls-table .num { text-align: right; font-variant-numeric: tabular-nums; }
#view-classes .cls-table .mut { color: var(--text-muted); }
#view-classes .cls-table .is-good { color: #2f6b4f; }
#view-classes .cls-table .is-bad { color: #a4462f; }
#view-classes .cls-barcell { width: 1%; }
#view-classes .cls-name {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 650;
  color: var(--ink); cursor: pointer; text-align: left;
}
#view-classes .cls-name:hover { text-decoration: underline; }

#view-classes .cls-trk {
  display: inline-block; vertical-align: middle; width: 130px; height: 8px;
  background: var(--surface-2); border-radius: 99px; overflow: hidden;
}
#view-classes .cls-table--sm .cls-trk { width: 92px; height: 7px; }
#view-classes .cls-fil { display: block; height: 100%; border-radius: 99px; }
#view-classes .cls-fil.is-g { background: #3f7d5c; }
#view-classes .cls-fil.is-y { background: #b8862f; }
#view-classes .cls-fil.is-r { background: #a4462f; }

#view-classes .cls-band {
  font-size: .64rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap;
}
#view-classes .cls-band.is-strong { background: #e6f0ea; color: #2f6b4f; }
#view-classes .cls-band.is-solid  { background: #eef0ea; color: #5a6b46; }
#view-classes .cls-band.is-mixed  { background: #f7efdf; color: #8a6420; }
#view-classes .cls-band.is-watch  { background: #f6e6e1; color: #a4462f; }

#view-classes .cls-pick { margin-bottom: 12px; }
#view-classes .cls-pick .cx-persona-filter { min-width: 260px; }

#view-classes .cls-thead {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
#view-classes .cls-thead h4 { margin: 0; font-size: 1.1rem; letter-spacing: -.015em; }
#view-classes .cls-thead .mut { color: var(--text-muted); font-size: .78rem; }
#view-classes .cls-pill {
  background: var(--bg-light); color: var(--ink); border-radius: 99px;
  padding: 2px 10px; font-size: .7rem; font-weight: 650;
}
#view-classes .cls-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 10px;
}
#view-classes .cls-strip div { padding: 9px 11px; border-right: 1px solid var(--line); }
#view-classes .cls-strip div:last-child { border-right: 0; }
#view-classes .cls-strip b { display: block; font-size: 1.05rem; font-weight: 650; }
#view-classes .cls-strip span {
  color: var(--text-muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .04em;
}
#view-classes .cls-bars {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 14px; margin-bottom: 10px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 7px 24px;
}
#view-classes .cls-barrow { display: flex; align-items: center; gap: 8px; font-size: .76rem; }
#view-classes .cls-lb { width: 78px; color: var(--text-muted); }
#view-classes .cls-vl { width: 24px; text-align: right; font-variant-numeric: tabular-nums; }

#view-classes .cls-read {
  background: #fffdf8; border: 1px solid #e8dfcd; border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px; font-size: .86rem;
  line-height: 1.55;
}
#view-classes .cls-read em {
  display: block; color: #8a5a20; font-style: normal; font-weight: 650; font-size: .6rem;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
}

#view-classes .cls-cls {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); margin-bottom: 6px;
}
#view-classes .cls-cls summary {
  padding: 10px 13px; cursor: pointer; display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; font-size: .82rem; list-style: none;
}
#view-classes .cls-cls summary::-webkit-details-marker { display: none; }
#view-classes .cls-cls summary::before { content: "\25B8"; color: var(--text-muted); font-size: .8rem; line-height: 1; }
#view-classes .cls-cls[open] summary::before { content: "\25BE"; }
#view-classes .cls-d { font-weight: 650; min-width: 104px; }
#view-classes .cls-m { color: var(--text-muted); font-size: .76rem; }
#view-classes .cls-cls .cls-tablewrap { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
#view-classes .cls-table tr.is-trainer td { background: var(--bg-light); font-weight: 650; }
#view-classes .cls-foot {
  color: var(--text-muted); font-size: .72rem; line-height: 1.65;
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line);
}

@media (max-width: 620px) {
  #view-classes .cls-m { width: 100%; padding-left: 14px; }
  #view-classes .cls-trk { width: 84px; }
  #view-classes .cls-pick .cx-persona-filter { min-width: 0; width: 100%; }
  #view-classes .cls-status { flex: 1 0 100%; }
}

/* ---------------------------------------------------------------- Admin > Payouts
   Money screen. Colours follow the zoom-payout skill's workbook so the page and the
   spreadsheet read the same: blue for counts, green for payouts, navy for totals.
   Scoped to #view-payouts, and .cx-bar / .btn--light / .cx-persona-filter are
   repeated here because this sheet scopes them per panel. */
#view-payouts .cx-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; max-width: 100%; }
#view-payouts .btn--light { background: #fff; color: var(--ink); border: 1.5px solid var(--surface-3); box-shadow: none; }
#view-payouts .cx-persona-filter {
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--text-muted);
  padding: 7px 11px; min-height: 40px; border: 1.5px solid var(--surface-3);
  border-radius: 999px; background: #fff; cursor: pointer;
}
#view-payouts .cx-persona-filter:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
#view-payouts .cx-empty { padding: 14px; color: var(--text-muted); font-size: .84rem; }
#view-payouts .po-status { font-size: .78rem; color: var(--text-muted); }

#view-payouts .po-const {
  display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: .8rem;
  background: #eef2f7; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 15px; margin-bottom: 14px; color: var(--text-muted);
}
#view-payouts .po-const b { color: var(--ink); font-variant-numeric: tabular-nums; }

#view-payouts .po-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
#view-payouts .po-kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
#view-payouts .po-kpi b { display: block; font-size: 1.18rem; font-weight: 650; letter-spacing: -.02em; }
#view-payouts .po-kpi span { color: var(--text-muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }

#view-payouts .po-flag {
  margin: 0 0 10px; padding: 11px 14px; font-size: .82rem; line-height: 1.55;
  background: #f4f7fb; border-left: 3px solid #2E75B6; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-muted);
}
#view-payouts .po-flag b { display: block; color: #1F4E79; margin-bottom: 2px; }
#view-payouts .po-flag--warn { background: #fffbeb; border-left-color: #b45309; }
#view-payouts .po-flag--warn b { color: #b45309; }

#view-payouts .po-h { margin: 22px 0 8px; font-size: .95rem; letter-spacing: -.01em; }
#view-payouts .po-hint { font-weight: 400; color: var(--text-muted); font-size: .78rem; }

#view-payouts .po-tablewrap {
  overflow: auto; max-height: 520px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
#view-payouts .po-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .76rem; }
#view-payouts .po-table th {
  background: #2E75B6; color: #fff; font-weight: 700; font-size: .62rem;
  padding: 8px 10px; text-align: right; white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
#view-payouts .po-table th.l { text-align: left; }
#view-payouts .po-table--pay th { background: #375623; }
#view-payouts .po-table th.nm { position: sticky; left: 0; z-index: 3; }
#view-payouts .po-table td {
  padding: 6px 10px; border-bottom: 1px solid #eef1f5; text-align: left;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
#view-payouts .po-table td.num { text-align: right; }
#view-payouts .po-table tbody tr:nth-child(even) td { background: #D9E1F2; }
#view-payouts .po-table td.nm {
  position: sticky; left: 0; background: #fff; z-index: 1; font-weight: 600;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
#view-payouts .po-table tbody tr:nth-child(even) td.nm { background: #D9E1F2; }
#view-payouts .po-table td.pay { background: #E2EFDA !important; }
#view-payouts .po-table td.med { background: #D9E1F2 !important; font-weight: 700; }
#view-payouts .po-table td.dtot { background: #C6EFCE !important; font-weight: 700; color: #375623; }
#view-payouts .po-table td.zero { color: #9aa6b2; }
#view-payouts .po-table tr.tot td { background: #1F4E79 !important; color: #fff; font-weight: 700; border-bottom: 0; }
#view-payouts .po-table .wk { display: block; font-weight: 400; opacity: .75; font-size: .55rem; }
#view-payouts .po-table .pos { color: #15803d; }
#view-payouts .po-table .neg { color: #b91c1c; }
#view-payouts .po-foot {
  color: var(--text-muted); font-size: .74rem; line-height: 1.65;
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line);
}
#view-payouts .po-foot b { color: var(--ink); }

@media (max-width: 620px) {
  #view-payouts .po-status { flex: 1 0 100%; }
  #view-payouts .cx-persona-filter { flex: 1 1 auto; }
  #view-payouts .po-table td.nm { max-width: 150px; }
}

/* ---------------------------------------------------------------- member profile
   The round button at the head of the member bar, and the dialog it opens. */
.ask__avatar {
  position: relative; flex: none; width: 38px; height: 38px; margin-right: 14px;
  border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  background: linear-gradient(135deg, var(--orange), #f5a623);
  color: #fff; font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  display: inline-grid; place-items: center; box-shadow: 0 0 0 0 rgba(246,130,31,.4);
  transition: box-shadow .18s ease, transform .18s ease;
}
.ask__avatar:hover, .ask__avatar:focus-visible { box-shadow: 0 0 0 4px rgba(246,130,31,.28); transform: translateY(-1px); }
.ask__avatar:focus-visible { outline: none; }
.ask__avatar-pen {
  position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; padding: 2.5px;
  border-radius: 50%; background: #fff; color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.ask__avatar-txt { pointer-events: none; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.ask__avatar-txt img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the photo block at the top of the dialog: 72px face, Change / Remove beside it */
.pf__photo { display: flex; align-items: center; gap: 14px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.pf__av {
  flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--orange), #f5a623); color: #fff;
  font-weight: 700; font-size: 1.3rem; letter-spacing: .02em;
  display: inline-grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.pf__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf__photo-acts { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf__photo-t { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pf__photo-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf__photo-btns .btn { min-height: 32px; padding: 5px 14px; font-size: .8rem; }
.pf__photo-rm { border: 0; background: none; padding: 0; font: inherit; font-size: .8rem; font-weight: 600; color: #b42323; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pf__photo-rm[hidden] { display: none; }
.pf__photo-hint { font-size: .72rem; color: var(--text-muted); line-height: 1.45; }

.pf-scrim { position: fixed; inset: 0; background: rgba(12,12,12,.55); z-index: 90; }
.pf-scrim[hidden], .pf[hidden] { display: none !important; }
.pf {
  position: fixed; z-index: 91; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 28px)); max-height: min(86vh, 780px);
  background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.32);
  overflow: hidden;
}
.pf form { display: flex; flex-direction: column; max-height: inherit; }
.pf__head {
  display: flex; align-items: flex-start; gap: 12px; justify-content: space-between;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--line);
}
.pf__title { margin: 0; font-size: 1.12rem; letter-spacing: -.015em; }
.pf__sub { margin: 3px 0 0; font-size: .78rem; color: var(--text-muted); }
.pf__x {
  border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--text-muted);
  cursor: pointer; padding: 0 4px; border-radius: 8px;
}
.pf__x:hover { color: var(--ink); }
.pf__body { padding: 16px 20px 4px; overflow-y: auto; display: grid; gap: 13px; }
.pf__f { display: flex; flex-direction: column; gap: 5px; position: relative; }
.pf__f > span {
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-muted);
}
.pf__f > span em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }
.pf__f input, .pf__f textarea {
  font: inherit; font-size: 16px; padding: 10px 12px; width: 100%;
  border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); background: #fff;
  color: var(--ink); resize: vertical;
}
.pf__f input:focus, .pf__f textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15);
}
.pf__count { align-self: flex-end; font-size: .68rem; color: var(--text-muted); }
.pf__fixed { background: var(--bg-lighter); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.pf__fixed h3 {
  margin: 0 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-muted);
}
.pf__row { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 5px; font-size: .84rem; }
.pf__row span { color: var(--text-muted); }
.pf__row strong { overflow-wrap: anywhere; text-align: right; }
.pf__note { margin: 8px 0 0; font-size: .74rem; color: var(--text-muted); line-height: 1.5; }
.pf__err { margin: 10px 20px 0; font-size: .82rem; color: #b42323; }
.pf__err[hidden] { display: none; }
.pf__foot {
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  padding: 14px 20px 18px; border-top: 1px solid var(--line); margin-top: 12px;
}
.pf__saved { margin-right: auto; font-size: .8rem; font-weight: 600; color: #2f6b4f; }
.pf__saved[hidden] { display: none; }


@media (max-width: 560px) {
  .ask__avatar { width: 40px; height: 40px; margin-right: 6px; }
  .pf { top: auto; bottom: 0; left: 0; transform: none; width: 100vw; max-height: 92vh;
        border-radius: 16px 16px 0 0; }
  .pf__foot { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .pf__foot .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------------------------------------------------------------- My Payout (trainer)
   The trainer's own earnings, on the brand palette: ink hero with the total in gold
   (as the site header), orange bars and tile edges, cream tints with --orange-text for
   the highlighted cells, amber for the cautions. Scoped to #view-mypayout. Admin's
   Payouts view keeps its workbook colours on purpose (see #view-payouts). */
#view-mypayout .mp { max-width: 1080px; }
#view-mypayout .mp__head {
  display: flex; gap: 14px; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 18px;
}
#view-mypayout .mp__title { margin: 0 0 3px; font-size: 1.32rem; letter-spacing: -.02em; }
#view-mypayout .mp__sub { margin: 0; font-size: .84rem; color: var(--text-muted); }
#view-mypayout .cx-persona-filter {
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--text-muted);
  padding: 7px 11px; min-height: 40px; border: 1.5px solid var(--surface-3);
  border-radius: 999px; background: #fff; cursor: pointer;
}
#view-mypayout .cx-persona-filter:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
#view-mypayout .cx-empty { padding: 26px 18px; color: var(--text-muted); font-size: .88rem; line-height: 1.55; }

#view-mypayout .mp-hero {
  background: var(--ink); background-image: var(--glow-a), var(--glow-b); color: var(--text-invert);
  border-radius: 14px; padding: 22px 24px; margin-bottom: 12px;
  display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-end;
}
#view-mypayout .mp-hero b { display: block; font-size: 2.4rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; color: var(--amber); }
#view-mypayout .mp-lb { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-invert-muted); }
#view-mypayout .mp-alt { color: var(--text-invert-muted); font-size: .86rem; max-width: 34ch; line-height: 1.5; }

#view-mypayout .mp-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 9px; margin-bottom: 14px;
}
#view-mypayout .mp-c { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: 10px; padding: 12px 14px; }
#view-mypayout .mp-c b { display: block; font-size: 1.32rem; font-weight: 650; letter-spacing: -.02em; }
#view-mypayout .mp-c span { color: var(--text-muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; }
/* the studio-rank tile is the one to notice, so it gets the gold edge and a cream fill */
#view-mypayout .mp-c--rank { background: #fdf0dd; border-color: var(--amber); }
#view-mypayout .mp-c--rank b { color: var(--orange-text); }

#view-mypayout .mp-box {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 12px; overflow: hidden;
}
#view-mypayout .mp-box > h3 {
  margin: 0; padding: 12px 17px; font-size: .9rem; border-bottom: 1px solid var(--line);
  display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
}
#view-mypayout .mp-box > h3 small { font-weight: 400; color: var(--text-muted); font-size: .76rem; }

#view-mypayout .mp-sum { padding: 15px 17px; display: flex; gap: 5px; align-items: flex-end; height: 148px; }
#view-mypayout .mp-d { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end;
                       align-items: center; gap: 4px; min-width: 0; }
#view-mypayout .mp-bx { width: 100%; background: var(--orange); border-radius: 4px 4px 0 0; opacity: .9; }
#view-mypayout .mp-bx.is-zero { background: var(--amber); height: 3px !important; }
#view-mypayout .mp-n { font-size: .62rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#view-mypayout .mp-dt { font-size: .58rem; color: var(--text-muted); }

#view-mypayout .mp-scroll { overflow-x: auto; }
#view-mypayout .mp-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
#view-mypayout .mp-table th {
  text-align: right; font-weight: 600; color: var(--orange-text); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .05em; padding: 9px 16px;
  background: #fdf0dd; border-bottom: 1px solid #f3d9b4; white-space: nowrap;
}
#view-mypayout .mp-table th.l { text-align: left; }
#view-mypayout .mp-table td {
  padding: 7px 16px; border-bottom: 1px solid var(--bg-light); text-align: left;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#view-mypayout .mp-table td.num { text-align: right; }
#view-mypayout .mp-table .mut { color: var(--text-muted); }
/* a weekday with no class is a caution, not a blank: warm text on a faint cream row */
#view-mypayout .mp-table tr.is-zero td { color: #a5520a; background: #fff9f1; }
#view-mypayout .mp-table td.pay { background: #fdf0dd; font-weight: 600; color: var(--orange-text); }
#view-mypayout .mp-table tr.tot td { background: var(--ink); color: var(--text-invert); font-weight: 700; border-bottom: 0; }
#view-mypayout .mp-table tr.tot td:last-child { color: var(--amber); }

#view-mypayout .mp-how { padding: 15px 17px; font-size: .84rem; color: var(--text-muted); line-height: 1.7; }
#view-mypayout .mp-how b { color: var(--ink); }
#view-mypayout .mp-how code {
  background: #fdf0dd; padding: 2px 7px; border-radius: 5px;
  color: var(--orange-text); font-size: .78rem;
}
#view-mypayout .mp-note {
  background: #fff6e8; border-left: 3px solid var(--orange); border-radius: 0 10px 10px 0;
  padding: 12px 16px; margin: 0 0 12px; font-size: .84rem; color: #6b4a12; line-height: 1.55;
}
#view-mypayout .mp-note b { display: block; color: #a5520a; margin-bottom: 2px; }
/* the "days with no class" box carries the same caution tone in its heading */
#view-mypayout .mp-box--missed { border-color: #f3d9b4; }
#view-mypayout .mp-box--missed > h3 { background: #fff6e8; color: #6b4a12; border-bottom-color: #f3d9b4; }
#view-mypayout .mp-box--missed > h3 small { color: #a5520a; }

#view-mypayout .mp-link {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px;
}
#view-mypayout .mp-link h3 { margin: 0 0 6px; font-size: 1.02rem; }
#view-mypayout .mp-link p { margin: 0 0 14px; font-size: .86rem; color: var(--text-muted); line-height: 1.6; max-width: 62ch; }
#view-mypayout .mp-link__f { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
#view-mypayout .mp-err { margin: 10px 0 0; font-size: .82rem; color: #b42323; }
#view-mypayout .mp-err[hidden] { display: none; }

@media (max-width: 640px) {
  #view-mypayout .mp-hero b { font-size: 1.9rem; }
  #view-mypayout .mp-sum { height: 116px; gap: 3px; }
  #view-mypayout .mp-dt { display: none; }
  #view-mypayout .mp-link__f .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------------------------------------------------------------- /join/ checkout
   Mobile-first on purpose: nearly every buyer arrives on a phone. Same language as
   the member area: white 16px cards on the light ground, hairline --line borders,
   uppercase .72rem keys, one orange CTA. */
.jn { max-width: 720px; }
.jn-load { color: var(--text-muted); font-size: .88rem; padding: 20px 0; }

/* plans: one block per track, the cards inside on a shared grid so every card is the
   same height and the price sits at the same y on each */
.jn-plans { margin-bottom: 20px; }
.jn-plans[hidden] { display: none; }
.jn-track { margin-bottom: 20px; }
.jn-track__h { font-size: 1.06rem; margin: 0 0 2px; letter-spacing: -.01em; }
.jn-track__sub { margin: 0 0 12px; font-size: .86rem; color: var(--text-muted); line-height: 1.55; }
.jn-track__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: stretch; }
.jn-plan {
  position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left; min-height: 132px;
  padding: 16px 16px 14px; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; cursor: pointer; font: inherit; color: var(--ink);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.jn-plan:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.jn-plan:focus-visible { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.18); }
.jn-plan.is-on { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange), 0 0 0 5px rgba(246,130,31,.14); }
.jn-plan::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--surface-3); background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.jn-plan.is-on::after {
  border-color: var(--orange); background: var(--orange)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}
.jn-plan__term { font-size: .72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; padding-right: 28px; }
.jn-plan__amt { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.jn-plan__split { font-size: .74rem; color: var(--text-muted); }
.jn-plan__note { font-size: .78rem; color: var(--text-muted); margin-top: auto; padding-top: 10px; line-height: 1.4; }
.jn-both { margin: 0; font-size: .82rem; color: var(--text-muted); line-height: 1.55; }

/* the form: one card, sections divided by hairlines, keys in a column beside the fields */
.jn-form { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 6px 24px 24px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.jn-form[hidden] { display: none; }
.jn-sec { padding-top: 18px; }
.jn-sec + .jn-sec { margin-top: 20px; border-top: 1px solid var(--line); }
.jn-sec__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.jn-h { font-size: 1.06rem; margin: 0 0 4px; letter-spacing: -.01em; }
.jn-sec__h .jn-h { margin: 0; }
.jn-acct { font-size: .76rem; color: var(--text-muted); }
.jn-acct[hidden] { display: none; }
.jn-fields { display: block; }
.jn-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); }
.jn-row:first-child { border-top: 0; }
.jn-row__k { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding-top: 15px; }  /* centred on a 44px input */
.jn-row__v { min-width: 0; }
.jn-row input, .jn-row select {
  font: inherit; font-size: 16px; width: 100%; padding: 10px 13px;
  border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); background: #fff; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.jn-row input:focus, .jn-row select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
.jn-row input::placeholder { color: #9a9ea3; }
.jn-row input.is-prefilled { background: #fffaf3; border-color: #f3d9bc; }
.jn-from { display: block; margin-top: 4px; font-style: normal; font-size: .72rem; color: var(--orange-text); }
.jn-from[hidden] { display: none; }
.jn-hint { font-size: .78rem; color: var(--text-muted); margin: 8px 0 0; line-height: 1.55; }

.jn-health { background: var(--bg-lighter); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 10px; }
.jn-health__lead { margin: 0 0 12px; font-size: .84rem; color: var(--text-muted); line-height: 1.6; }
.jn-c { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 9px; font-size: .86rem; line-height: 1.5; cursor: pointer; }
.jn-c:last-child { margin-bottom: 0; }
.jn-c input { margin: 2px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--orange); }
.jn-c--req { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.jn-c a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 2px; }
.jn-flagnote {
  margin: 4px 0 12px; padding: 10px 13px; background: #fff6e8; border-left: 3px solid var(--orange);
  border-radius: 0 8px 8px 0; font-size: .82rem; color: #6b4a12; line-height: 1.55;
}
.jn-flagnote[hidden] { display: none; }

/* the order and the one CTA */
.jn-total { margin: 0 0 14px; padding: 12px 16px; background: var(--bg-lighter); border: 1px solid var(--line); border-radius: 12px; }
.jn-total[hidden] { display: none; }
.jn-line { display: flex; justify-content: space-between; gap: 14px; font-size: .88rem; padding: 4px 0; color: var(--text-muted); }
.jn-line b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.jn-line--tot { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; font-size: .96rem; color: var(--ink); font-weight: 600; }
.jn-line--tot b { font-size: 1.2rem; font-weight: 700; }
.jn-two { margin: 8px 0 2px; font-size: .78rem; color: var(--text-muted); line-height: 1.55; }
.jn-err { margin: 0 0 14px; padding: 11px 14px; background: #fdeceb; border-left: 3px solid #b42323; border-radius: 0 8px 8px 0; color: #8d1c1c; font-size: .86rem; line-height: 1.5; }
.jn-err[hidden] { display: none; }
.jn-pay { width: 100%; margin: 0; justify-content: center; min-height: 52px; font-size: 1rem; }
.jn-pay[disabled] { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.jn-safe { margin: 12px 0 0; text-align: center; font-size: .76rem; color: var(--text-muted); line-height: 1.5; }

/* after payment */
.jn-done[hidden] { display: none; }
.jn-ok { background: #fff; border: 1px solid var(--line); border-left: 4px solid #3f7d5c; border-radius: 16px; padding: 24px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.jn-ok h2 { margin: 0 0 10px; font-size: 1.5rem; color: #2f6b4f; letter-spacing: -.02em; }
.jn-ok__note { margin: 0 0 18px; padding: 12px 14px; background: #fffbeb; border-left: 3px solid var(--orange); border-radius: 0 8px 8px 0; font-size: .86rem; color: #6b4a12; line-height: 1.6; }
.jn-ok h3 { margin: 0 0 8px; font-size: 1.06rem; }
.jn-next { margin: 0; padding-left: 20px; font-size: .9rem; line-height: 1.75; }
.jn-ok__ref { margin: 0; font-size: .78rem; color: var(--text-muted); }
.jn-ok code { background: var(--bg-light); padding: 2px 7px; border-radius: 5px; font-size: .82rem; }
.jn-bought { margin: 0 0 18px; padding-left: 20px; font-size: .94rem; line-height: 1.75; }
.jn-bought li { margin-bottom: 10px; }

@media (max-width: 600px) {
  .jn-form { padding: 4px 16px 18px; }
  .jn-row { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; }
  .jn-row__k { padding-top: 0; }
  .jn-plan { padding: 14px 14px 12px; min-height: 120px; }
  .jn-plan__amt { font-size: 1.4rem; }
  .jn-health { padding: 12px 13px; }
  .jn-ok { padding: 20px 16px; }
}

/* subscription state on a client row — derived server-side, so it cannot go stale */
.bill {
  display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; vertical-align: middle;
}
.bill--active  { background: #e6f1ea; color: #2f6b4f; }
.bill--expiring{ background: #fdf0dd; color: #a5670a; }
.bill--lapsed  { background: #fbe9ed; color: #a8475c; }
.bill--none    { background: var(--surface-2); color: var(--text-muted); font-weight: 600; }

/* ---------------------------------------------------------------- /my/ member area
   Built for a phone at 5:55am: the join button is the point, everything else follows.
   Two panels — My Classes and My Progress — side by side on a wide screen, bottom
   tabs on a phone; one account strip above them. */
.mya, .myd { max-width: 1080px; }
.mya .cx-empty, .myd .cx-empty { padding: 26px 0; color: var(--text-muted); font-size: .9rem; }
.mya-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.mya-head h1 { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.3rem); letter-spacing: -.02em; }
.mya-head p { margin: 4px 0 0; color: var(--text-muted); font-size: .92rem; }
.mya-head p b { color: var(--ink); font-weight: 700; }
.mya-pass { font-size: .88rem; color: var(--text-muted); white-space: nowrap; }
.mya-pass b { color: #2f7a4f; }
.mya-pass b.is-lapsed { color: #a8475c; }
.mya-pass b.is-expiring { color: #a5670a; }
.mya-pass a { color: var(--orange); font-weight: 700; text-decoration: none; }

/* My Account: a single row */
.mya-acct { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mya-acct__av, .myd-av { border-radius: 50%; overflow: hidden; background: var(--grad-cta);
  display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; }
.mya-acct__av { width: 44px; height: 44px; font-size: 1rem; }
.mya-acct__av img, .myd-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mya-acct__who { flex: 1 1 200px; min-width: 0; }
.mya-acct__who b { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.mya-acct__who span { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-muted); }
.mya-acct__who img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.mya-acct .btn { white-space: nowrap; }
/* status tier: one chip, always in the same place, the renewal date beside the name */
.mya-tier { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px; white-space: nowrap; }
.mya-tier[hidden] { display: none; }
.mya-tier__name { font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mya-tier__name::after { content: ""; display: inline-block; width: 1px; height: 14px; margin-left: 10px; background: currentColor; opacity: .35; vertical-align: -2px; }
.mya-tier__sub { font-size: .76rem; color: var(--text-muted); }
.mya-tier__sub b { font-weight: 700; color: inherit; }
.mya-tier--silver { background: linear-gradient(135deg, #f1f2f4, #dfe2e6); color: #4b5563; }
.mya-tier--gold { background: linear-gradient(135deg, #fff2cc, #f3d27a); color: #6b4a00; }
.mya-tier--gold .mya-tier__sub { color: #7a5a10; }
.mya-tier--platinum { background: linear-gradient(135deg, #e8e9ee, #c9ccd6); color: #2b2f3a; }
.mya-tier--none { background: var(--surface-2); color: var(--text-muted); }
.mya-tier--none .mya-tier__name::after { display: none; }
.mya-tier--block { display: grid; gap: 1px; padding: 10px 18px; border-radius: 10px; text-align: center; min-width: 120px; white-space: normal; }
.mya-tier--block .mya-tier__name { font-size: .82rem; }
.mya-tier--block .mya-tier__name::after { display: none; }
.mya-tier--block .mya-tier__sub { font-size: .7rem; }

/* on a phone the two panels become bottom tabs, app-style, always within thumb reach */
.mya-tabs { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: #fff; border-top: 1px solid var(--line); padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 18px rgba(0,0,0,.06); }
.mya-tab { flex: 1; display: grid; place-items: center; gap: 2px; font: inherit; font-size: .72rem; font-weight: 700;
  color: var(--text-muted); cursor: pointer; padding: 6px 4px; border: 0; border-radius: 10px; background: none; }
.mya-tab svg { width: 22px; height: 22px; }
.mya-tab.is-on { color: var(--orange); background: #fff6ec; }
.mya-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.mya-panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.mya-panel__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 18px 10px; }
.mya-panel__h h2 { margin: 0; font-size: 1.04rem; letter-spacing: -.01em; }
.mya-panel__h a, .mya-panel__act { font: inherit; font-size: .82rem; font-weight: 700; color: var(--orange); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer; }
.mya-panel__act[hidden] { display: none; }
.mya-empty { margin: 0; padding: 14px 18px 18px; font-size: .86rem; color: var(--text-muted); line-height: 1.6; border-top: 1px solid var(--line); }
.mya-empty .btn { margin-top: 10px; }

/* classes */
.mya-class { display: grid; grid-template-columns: 70px 34px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--line); }
.mya-class.is-next { background: #fff8f1; border-left: 3px solid var(--orange); padding-left: 15px; }
.mya-class__av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--surface-2); display: grid;
  place-items: center; font-size: .72rem; font-weight: 700; color: var(--text-muted); overflow: hidden; }
.mya-class__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mya-class__when { display: flex; flex-direction: column; justify-content: center; }
.mya-class__when b { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.mya-class__when span { font-size: .7rem; color: var(--text-muted); }
.mya-class__who { min-width: 0; }
.mya-class__who b { display: block; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mya-class__who span { font-size: .74rem; color: var(--text-muted); }
.mya-class .btn--zoom { padding: 7px 14px; font-size: .8rem; min-height: 34px; }
.mya-class .mya-zoom { font-size: .8rem; font-weight: 700; color: var(--orange); text-decoration: none; white-space: nowrap; }
.mya-class .mya-nolink { font-size: .76rem; color: var(--text-muted); white-space: nowrap; }

/* the whole timetable (and every check-in), folded under the panel */
.mya-full { border-top: 1px solid var(--line); }
.mya-full[hidden] { display: none; }
.mya-full > summary { list-style: none; cursor: pointer; padding: 12px 18px; font-size: .84rem; font-weight: 700; color: var(--orange);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.mya-full > summary::-webkit-details-marker { display: none; }
.mya-full > summary span { display: block; font-size: .72rem; font-weight: 500; color: var(--text-muted); }
.mya-full > summary::after { content: ""; grid-row: 1 / 3; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-right: 4px; transition: transform .18s; }
.mya-full[open] > summary::after { transform: rotate(-135deg); }
/* the whole timetable as one column of short lines, a band heading every few rows */
.mya-bands { padding: 0 18px 14px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.mya-band h3 { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.mya-band h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mya-band h3 i { font-style: normal; font-weight: 600; color: var(--surface-3); order: 3; }
.mya-band ul { list-style: none; margin: 0; padding: 0; }
.mya-band li { display: grid; grid-template-columns: 62px 22px minmax(0, 1fr) 18px auto; align-items: center; gap: 8px; min-height: 30px; padding: 2px 0; font-size: .8rem; border-bottom: 1px solid var(--line); }
.mya-band li:last-child { border-bottom: 0; }
.mya-band li b { font-weight: 700; font-variant-numeric: tabular-nums; }
.mya-band li img, .mya-band__in { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; }
.mya-band__in { display: grid; place-items: center; font-size: .56rem; font-weight: 700; color: #fff; background: var(--grad-cta); }
.mya-band__who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mya-band li em { font-style: normal; font-size: .82rem; color: #b8336a; text-align: center; }
.mya-band li a { font-size: .74rem; font-weight: 700; color: var(--orange); text-decoration: none; white-space: nowrap; }
.mya-list { padding: 0 18px 14px; }
.mya-list table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.mya-list th { text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 4px 6px 4px 0; }
.mya-list td { padding: 5px 6px 5px 0; border-top: 1px dashed var(--line); vertical-align: top; }
.mya-list td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mya-list td.note { color: var(--text-muted); }

/* progress */
.mya-prog { flex: 1 1 auto; padding: 0 18px 16px; }
.mya-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .78rem; color: var(--text-muted); margin-bottom: 12px; }
.mya-status .pill { font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #fff3e0; color: #8a4b00; }
.mya-status .pill--green { background: #e6f1ea; color: #2f6b4f; }
.mya-status .pill--red { background: #fdecec; color: #8f2626; }
.mya-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.mya-kpi { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.mya-kpi span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.mya-kpi b { display: block; font-size: 1.3rem; font-weight: 650; letter-spacing: -.02em; }
.mya-kpi b small { font-size: .72rem; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.mya-kpi--good b { color: #2f7a4f; }
.mya-kpi--up b { color: #a5670a; }
.mya-trend { width: 100%; height: 64px; display: block; }
.mya-trend__cap { display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-muted); margin-top: 4px; }
.mya-focus { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #fff8f1; }
.mya-focus__k { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.mya-focus__k b { margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: #fdecec; color: #8f2626; letter-spacing: 0; text-transform: none; font-size: .74rem; }
.mya-focus p { margin: 6px 0 0; font-size: .84rem; line-height: 1.5; }
.mya-focus p b { color: var(--orange); }
.mya-mood { font-size: .8rem; color: var(--text-muted); margin-top: 10px; }
.mya-mood b { font-size: 1.1rem; margin-right: 4px; }

/* the client's own edit: weight, height, mood — nothing else is theirs to type */
.mya-edit { margin: 0 18px 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-lighter); }
.mya-edit[hidden] { display: none; }
.mya-edit h3 { margin: 0 0 10px; font-size: .92rem; }
.mya-edit__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.mya-f { display: flex; flex-direction: column; gap: 4px; }
.mya-f > span, .mya-f__lab { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.mya-f__lab { margin-bottom: 6px; }
.mya-f input {
  font: inherit; font-size: 16px; padding: 9px 11px; width: 100%;
  border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); background: #fff;
}
.mya-f input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
.mya-moods { display: flex; gap: 6px; margin-bottom: 12px; }
.mya-moods button {
  font-size: 1.35rem; line-height: 1; padding: 7px 9px; border-radius: 10px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--surface-3); transition: all .15s ease;
}
.mya-moods button:hover { background: var(--surface-2); }
.mya-moods button.is-on { border-color: var(--orange); background: #fff6e8; transform: scale(1.08); }
.mya-edit__btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mya-err { margin: 8px 0 0; font-size: .82rem; color: #b42323; }
.mya-err[hidden], .mya-saved[hidden] { display: none; }
.mya-saved { font-size: .84rem; font-weight: 600; color: #2f6b4f; }

.myd { max-width: 720px; }
.myd-back { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 700;
  color: var(--orange); text-decoration: none; margin-bottom: 14px; }

@media (max-width: 760px) {
  .mya-tabs { display: flex; }
  .mya-tabs[hidden] { display: none; }
  .mya { padding-bottom: 72px; }   /* room for the bar */
  .mya-grid { grid-template-columns: 1fr; }
  .mya-grid > [data-tab]:not(.is-on) { display: none; }
  .mya-class { grid-template-columns: 62px 30px minmax(0, 1fr) auto; padding: 12px 14px; }
  .mya-class__av { width: 30px; height: 30px; }
  .mya-bands { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
}

/* Demo sign-in: a testing door at the foot of the login page. Deliberately quiet — one
   line of controls, no card, nothing competing with the real sign-in above. */
.login-demo-strip {padding: 0 0 40px; }
.login-demo {max-width: 560px; margin: 0 auto; }
.login-demo > summary {list-style: none; cursor: pointer; text-align: center;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--text-muted); padding: 6px; }
.login-demo > summary::-webkit-details-marker {display: none; }
.login-demo > summary span {font-weight: 500; opacity: .7; }
.login-demo > summary:hover, .login-demo[open] > summary {color: var(--ink); }
.login-demo form {margin-top: 6px; }
.login-demo__note {margin: 0 0 8px; font-size: .74rem; line-height: 1.5; color: var(--text-muted); text-align: center; }
.login-demo__row {display: flex; gap: 8px; flex-wrap: wrap; }
.login-demo__in {flex: 1 1 180px; min-width: 0; font: inherit; font-size: .84rem; padding: 7px 12px;
  border: 1.5px solid var(--surface-3); border-radius: var(--radius-pill); background: #fff; color: var(--ink); }
.login-demo__in:focus {outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
.login-demo__row .btn {flex: 0 0 auto; }
.login-demo__msg {margin: 8px 0 0; font-size: .76rem; text-align: center; color: var(--text-muted); }
.login-demo__msg.is-error {color: #b42323; }

/* --- /my/details/: one card. The client's six facts, with the two they may change as
   inputs in their rows, the sign-in identity as text with the reason beside it. --- */
.myd { max-width: 720px; }
.myd-back { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 700;
  color: var(--orange); text-decoration: none; margin-bottom: 18px; }
.myd-back svg { width: 14px; height: 14px; }
.myd-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.myd-head__id { flex: 1 1 200px; min-width: 0; }
.myd-head h1 { margin: 0; font-size: clamp(1.45rem, 3vw, 1.9rem); letter-spacing: -.02em; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myd-head p { margin: 3px 0 0; color: var(--text-muted); font-size: .86rem; }
.myd-av { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--grad-cta); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 1.3rem; flex: none; }
.myd-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

.myd-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 4px 22px 18px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.myd-row { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--line); }
.myd-row:first-child { border-top: 0; }
.myd-row__k { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.myd-row__v { min-width: 0; font-size: .94rem; }
.myd-row__v b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.myd-row__v em { display: block; margin-top: 2px; font-style: normal; font-size: .74rem; color: var(--text-muted); }
.myd-row__v a { color: var(--orange); font-weight: 700; text-decoration: none; }
.myd-muted { color: var(--text-muted); font-weight: 500 !important; }
/* the Photo row on /my/details/: same face as the header, with Change / Remove */
.myd-photo { display: flex; align-items: center; gap: 14px; }
.myd-photo__av { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--grad-cta); color: #fff;
  font-weight: 700; font-size: 1.3rem; letter-spacing: .02em; display: inline-grid; place-items: center; }
.myd-photo__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.myd-photo__acts { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.myd-photo__btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.myd-photo__btns .btn { min-height: 32px; padding: 5px 14px; font-size: .8rem; }
.myd-photo__rm { border: 0; background: none; padding: 0; font: inherit; font-size: .8rem; font-weight: 600; color: #b42323; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.myd-photo__rm[hidden] { display: none; }
.myd-row--pp .myd-row__v { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; }
.myd-pp__pic { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.myd-tierline { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: .76rem; font-weight: 700;
  padding: 4px 11px 4px 8px; border-radius: 999px; }
.myd-tierline i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.myd-tierline--gold { background: #fff5d6; color: #7a5a10; } .myd-tierline--gold i { background: linear-gradient(135deg, #fde68a, #d9a520); }
.myd-tierline--silver { background: #f1f2f4; color: #4b5563; } .myd-tierline--silver i { background: linear-gradient(135deg, #e5e7eb, #9ca3af); }
.myd-tierline--platinum { background: #e8e9ee; color: #2b2f3a; } .myd-tierline--platinum i { background: linear-gradient(135deg, #f3f4f6, #6b7280); }
.myd-tierline--none { background: var(--bg-lighter, #f6f5f3); color: var(--text-muted); font-weight: 500; } .myd-tierline--none i { background: var(--surface-3); }

.myd-row--edit .myd-row__v input { font: inherit; font-size: .94rem; width: 100%; max-width: 360px; padding: 9px 12px;
  border: 1.5px solid var(--surface-3); border-radius: 10px; background: #fff; color: var(--ink); }
.myd-row--edit .myd-row__v input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
.myd-row__v--split { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.myd-age { font-size: .82rem; color: var(--text-muted); white-space: nowrap; }

.myd-foot { padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.myd-hint { margin: 0; flex: 1 1 260px; font-size: .76rem; line-height: 1.5; color: var(--text-muted); }
.myd-foot__btns { display: flex; align-items: center; gap: 10px; }

@media (max-width: 600px) {
  .myd-card { padding: 2px 16px 16px; }
  .myd-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .myd-head { gap: 12px; }
  .myd-head .mya-tier { order: 3; flex: 1 1 100%; justify-content: center; }
  .myd-foot { flex-direction: column; align-items: stretch; }
  .myd-foot__btns { justify-content: flex-end; }
}

/* the email-link row on the login card: same field look, one button under it */
.login-link { display: grid; gap: 10px; margin-bottom: 4px; }
.login-link .login-card__note { margin: 0; }
.btn--oauth + .btn--oauth { margin-top: 10px; }

.login-keep { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-size: .84rem; color: var(--text-muted); cursor: pointer; }
.login-keep input { width: 16px; height: 16px; accent-color: var(--orange); margin: 0; }

/* the email box on the login card: two fields and a button, close together */
.login-link { gap: 6px; }
.login-link .field { margin: 0; }
.login-link .field__label { margin-bottom: 4px; font-size: .84rem; }
.login-link .field__label small { font-size: .74rem; font-weight: 500; color: var(--text-muted); }
.login-link .field__input { min-height: 44px; padding: 10px 14px; }
.login-link .login-card__btn { margin-top: 6px; }
.login-link .login-card__links { margin: 8px 0 0; }
.login-link .login-card__note:empty { display: none; }

/* the cookie notice: a small card at the foot of the viewport, never a wall */
.cnotice { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 520px; margin: 0 auto;
  background: #fff; color: var(--ink); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.22); padding: 16px 18px; }
.cnotice__t { font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.cnotice p { margin: 0 0 12px; font-size: .82rem; line-height: 1.5; color: var(--text-muted); }
.cnotice p a { color: var(--orange); font-weight: 600; text-decoration: none; }
.cnotice__b { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 480px) { .cnotice { left: 8px; right: 8px; bottom: 8px; } .cnotice__b .btn { flex: 1 1 auto; justify-content: center; } }

/* a sign-in method that is not switched on yet: visibly off, but still readable */
.btn--soon, .btn--soon:hover { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; filter: grayscale(1); }
.btn--soon .login-soon { margin-left: 8px; }

/* ---------- Website tab: the request board + the site map (Superuser only) ----------
   A port of the shared claude.ai request board onto the workspace. Seven lanes, a
   composer, a drawer. Everything is scoped to #view-website and namespaced rb-, and the
   palette is the site's: orange/amber for the primary, ink for the toolbar. */
#view-website {
  --rb-bg: #fbf6ee; --rb-panel: #fff; --rb-lane: #f3ebdd; --rb-ink: var(--ink); --rb-ink2: #4a443c;
  --rb-mut: #8b8378; --rb-line: #e7ddcb; --rb-chip: #fff1e2; --rb-focus: var(--orange);
  --rb-gold: var(--amber); --rb-orange: var(--orange); --rb-green: #3f8f1a; --rb-red: #c93a2f;
  --rb-slate: #6b7280; --rb-indigo: #4f46e5; --rb-teal: #0f766e; --rb-violet: #7c3aed; --rb-grey: #9ca3af;
  font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--rb-ink);
}
#view-website .rb { max-width: 1280px; margin: 0 auto; }
#view-website .rb-top { background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px 14px 0 0;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#view-website .rb-brand { display: flex; align-items: baseline; gap: 8px; }
#view-website .rb-brand b { font-size: 16px; letter-spacing: .2px; }
#view-website .rb-brand b em { color: var(--rb-gold); font-style: normal; }
#view-website .rb-brand span { font-size: 11px; letter-spacing: 2px; color: #9c9a9e; text-transform: uppercase; }
#view-website .rb-stat { margin-left: auto; font-size: 12px; color: #b9b3a8; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
#view-website .rb-stat b { color: #fff; }
#view-website .rb-help { background: none; border: 1px solid #555; color: #ddd; border-radius: 99px; padding: 5px 12px;
  font: inherit; font-size: 12px; cursor: pointer; }
#view-website .rb-help:hover, #view-website .rb-help[aria-expanded="true"] { border-color: var(--rb-gold); color: var(--rb-gold); }
#view-website .rb-sheet { background: var(--rb-bg); border: 1px solid var(--rb-line); border-top: 0; border-radius: 0 0 14px 14px; padding-bottom: 6px; }
#view-website .rb-offline { margin: 12px 18px 0; background: #fff1e2; color: #8a4a00; border-radius: 10px; padding: 10px 14px; font-size: 12.5px; display: none; }
#view-website .rb-helpbox { background: var(--rb-panel); border: 1px solid var(--rb-line); border-radius: 14px; margin: 16px 18px 0; padding: 14px 18px; font-size: 13px; }
#view-website .rb-helpbox ol { margin: 6px 0 0 18px; padding: 0; }
#view-website .rb-helpbox li { margin: 2px 0; }
#view-website .rb-composer { margin: 16px 18px 6px; background: var(--rb-panel); border: 1px solid var(--rb-line); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 4px 14px rgba(23,23,23,.05); }
#view-website .rb-composer h2 { margin: 0 0 4px; font-size: 15px; font-family: var(--font-body); }
#view-website .rb-composer p { margin: 0 0 10px; color: var(--rb-mut); font-size: 12.5px; }
#view-website .rb-row { display: flex; gap: 10px; flex-wrap: wrap; }
#view-website .rb-composer input, #view-website .rb-composer textarea, #view-website .rb-drawer textarea, #view-website .rb-drawer input {
  font: inherit; font-size: 13.5px; color: var(--rb-ink); background: var(--rb-bg); border: 1.5px solid var(--rb-line); border-radius: 10px; padding: 10px 12px; }
#view-website .rb-composer input:focus, #view-website .rb-composer textarea:focus, #view-website .rb-drawer textarea:focus,
#view-website .rb-drawer input:focus, #view-website button:focus-visible { outline: 2px solid var(--rb-focus); outline-offset: 1px; }
#view-website .rb-composer input { flex: 1; min-width: 220px; }
#view-website .rb-composer .rb-c-who { flex: 0 0 160px; }
#view-website .rb-composer textarea { width: 100%; min-height: 66px; resize: vertical; margin-top: 8px; }
#view-website .rb-btn { font: inherit; font-weight: 600; font-size: 13px; border: 0; border-radius: 99px; padding: 9px 18px; cursor: pointer;
  background: var(--grad-cta); color: var(--ink); }
#view-website .rb-btn--ghost { background: transparent; border: 1.5px solid var(--rb-line); color: var(--rb-ink2); }
#view-website .rb-btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Nine columns, each at least 230px, so the board scrolls sideways once the wrap is
   narrower than ~2.2k; the lanes stretch to the tallest one so every background runs
   to the same bottom edge. */
#view-website .rb-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px;
  padding: 12px 18px 22px; overflow-x: auto; align-items: stretch; }
#view-website .rb-lane { display: flex; flex-direction: column; background: var(--rb-lane); border-radius: 14px; padding: 10px; min-height: 220px; border-top: 4px solid var(--lc); }
#view-website .rb-lane[data-lane="input"] { --lc: var(--rb-gold); }
#view-website .rb-lane[data-lane="pending"] { --lc: var(--rb-indigo); }
#view-website .rb-lane[data-lane="research"] { --lc: var(--rb-teal); }
#view-website .rb-lane[data-lane="ongoing"] { --lc: var(--rb-orange); }
#view-website .rb-lane[data-lane="done"] { --lc: var(--rb-green); }
#view-website .rb-lane[data-lane="failed"] { --lc: var(--rb-red); }
#view-website .rb-lane[data-lane="later"] { --lc: var(--rb-slate); }
#view-website .rb-lane[data-lane="question"] { --lc: var(--rb-violet); }
#view-website .rb-lane[data-lane="discarded"] { --lc: var(--rb-grey); }
#view-website .rb-lane h3 { margin: 2px 6px 10px; font-size: 12px; font-family: var(--font-body); letter-spacing: 1.2px; text-transform: uppercase;
  display: flex; justify-content: space-between; color: var(--rb-ink2); }
#view-website .rb-lane h3 i { font-style: normal; color: var(--rb-mut); }
#view-website .rb-lane.is-over { outline: 2px dashed var(--lc); outline-offset: -4px; }
#view-website .rb-hint { font-size: 12px; color: var(--rb-mut); padding: 4px 6px; }
#view-website .rb-card { background: var(--rb-panel); border: 1px solid var(--rb-line); border-left: 4px solid var(--lc); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; cursor: grab; box-shadow: 0 1px 3px rgba(23,23,23,.06); touch-action: none; user-select: none; }
#view-website .rb-card:active { cursor: grabbing; }
#view-website .rb-card.is-drag { opacity: .45; }
#view-website .rb-ghost { position: fixed; z-index: 50; pointer-events: none; opacity: .92; box-shadow: 0 12px 30px rgba(23,23,23,.25); cursor: grabbing; }
#view-website .rb-card b { display: block; font-size: 13.5px; line-height: 1.35; margin-bottom: 3px; }
#view-website .rb-body { font-size: 12.5px; color: var(--rb-ink2); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#view-website .rb-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; font-size: 11px; color: var(--rb-mut); }
#view-website .rb-tag { background: var(--rb-chip); color: #8a4a00; border-radius: 6px; padding: 1px 7px; font-weight: 600; }
#view-website .rb-hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--rb-lane); border-radius: 6px; padding: 1px 6px; }
#view-website .rb-link { background: #e6f7f4; color: var(--rb-teal); border-radius: 6px; padding: 1px 7px; font-weight: 600; text-decoration: none;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-website a.rb-link:hover { text-decoration: underline; }
#view-website .rb-who { margin-left: auto; }
#view-website .rb-card select { font: inherit; font-size: 11.5px; border: 1px solid var(--rb-line); border-radius: 6px; background: var(--rb-panel); color: var(--rb-ink2); padding: 2px 4px; }
#view-website .rb-ov { position: fixed; inset: 0; background: rgba(23,23,23,.45); display: none; z-index: 70; }
#view-website .rb-drawer { position: fixed; top: 0; right: -460px; width: 440px; max-width: 95vw; height: 100vh; background: var(--rb-panel);
  border-left: 1px solid var(--rb-line); z-index: 80; padding: 20px; overflow-y: auto; transition: right .18s; }
#view-website .rb-drawer.is-open { right: 0; }
#view-website .rb-drawer h2 { margin: 0 0 4px; font-size: 16px; font-family: var(--font-body); }
#view-website .rb-sub { color: var(--rb-mut); font-size: 12px; margin-bottom: 12px; }
#view-website .rb-drawer label { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--rb-mut); margin: 12px 0 4px; }
#view-website .rb-drawer input, #view-website .rb-drawer textarea { width: 100%; }
#view-website .rb-drawer textarea { min-height: 150px; resize: vertical; }
#view-website .rb-x { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 22px; color: var(--rb-mut); cursor: pointer; }
#view-website .rb-btns { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
#view-website .rb-btn--danger { color: var(--rb-red); border-color: var(--rb-red); }
#view-website .rb-toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff;
  padding: 9px 16px; border-radius: 99px; font-size: 12.5px; display: none; z-index: 90; }
@media (max-width: 700px) {
  #view-website .rb-board { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: 1fr; }
  #view-website .rb-lane { min-height: 0; }   /* stacked: each lane is as tall as its cards */
  #view-website .rb-toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { #view-website .rb-drawer { transition: none; } }

/* the site map under the board (build.py sitemap_html): the same dark bar and sheet
   as the board, then one table per group; a row nothing links to is muted */
#view-website .sm { max-width: 1280px; margin: 22px auto 0; }
#view-website .sm-top { background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px 14px 0 0;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#view-website .sm-top .rb-brand b { font-size: 16px; }
#view-website .sm-stat { margin-left: auto; font-size: 12px; color: #b9b3a8; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
#view-website .sm-stat b { color: #fff; }
#view-website .sm-sheet { background: var(--rb-bg); border: 1px solid var(--rb-line); border-top: 0; border-radius: 0 0 14px 14px; padding: 4px 18px 18px; }
#view-website .sm-lead { margin: 12px 0 6px; color: var(--rb-mut); font-size: 12.5px; max-width: 90ch; }
#view-website .sm-lead b { color: var(--rb-ink2); }
#view-website .sm-group { background: var(--rb-panel); border: 1px solid var(--rb-line); border-radius: 14px; margin-top: 12px; padding: 12px 16px 6px; overflow-x: auto; }
#view-website .sm-group h3 { margin: 0 0 8px; font-size: 12px; font-family: var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--rb-ink2);
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
#view-website .sm-group h3 small { font-size: 11.5px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--rb-mut); }
#view-website .sm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#view-website .sm-table th:first-child { width: 22%; }
#view-website .sm-table th:last-child { width: 34%; }
#view-website .sm-table th { text-align: left; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--rb-mut); font-weight: 600; padding: 4px 8px 6px; border-bottom: 1px solid var(--rb-line); }
#view-website .sm-table td { padding: 6px 8px; border-bottom: 1px solid #f1eadc; vertical-align: top; }
#view-website .sm-table tr:last-child td { border-bottom: 0; }
#view-website .sm-path { white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
#view-website .sm-path a { color: var(--rb-ink); text-decoration: none; }
#view-website .sm-path a:hover { text-decoration: underline; color: var(--rb-orange); }
#view-website .sm-title { font-weight: 600; }
#view-website .sm-title small { display: block; font-weight: 400; font-size: 12px; color: var(--rb-mut); }
#view-website .sm-status { white-space: nowrap; }
#view-website .sm-row--sub .sm-path { padding-left: 26px; }
#view-website .sm-row--sub .sm-path::before { content: "\2514 "; color: var(--rb-mut); margin-left: -16px; }
#view-website .sm-row--sub .sm-title { font-weight: 500; }
#view-website .sm-badge { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 7px; margin-right: 6px; }
#view-website .sm-badge--linked { background: #e6f4dd; color: var(--rb-green); }
#view-website .sm-badge--unlinked { background: #f1efec; color: #7a7570; }
#view-website .sm-badge--redirect { background: #e6f7f4; color: var(--rb-teal); }
#view-website .sm-badge--api { background: #ece8f9; color: var(--rb-violet); }
#view-website .sm-badge--tab { background: var(--rb-chip); color: #8a4a00; }
#view-website .sm-badge--coming { background: #f1efec; color: #7a7570; border: 1px dashed #c9c2b6; }
#view-website .sm-badge--missing { background: #fdecec; color: var(--rb-red); }
#view-website .sm-chip { display: inline-block; font-size: 11px; color: var(--rb-mut); border: 1px solid var(--rb-line); border-radius: 6px; padding: 0 6px; margin-right: 4px; }
#view-website .sm-chip--gate { color: var(--rb-indigo); border-color: #c7c4f2; background: #eeedfc; }
/* built but nothing links to it: there, in lighter type */
#view-website .sm-row--unlinked, #view-website .sm-row--coming, #view-website .sm-row--redirect { color: #9a938a; }
#view-website .sm-row--unlinked .sm-path a, #view-website .sm-row--coming .sm-path a, #view-website .sm-row--redirect .sm-path a { color: #9a938a; font-weight: 300; }
#view-website .sm-row--unlinked .sm-title, #view-website .sm-row--coming .sm-title, #view-website .sm-row--redirect .sm-title { font-weight: 400; }
@media (max-width: 700px) {
  #view-website .sm-status { white-space: normal; }
  #view-website .sm-path { white-space: normal; overflow-wrap: anywhere; }
}

/* --- Stories tab: the Success Stories page as slots (stories.js) --- */
#view-stories .st { max-width: 1180px; margin: 0 auto; }
#view-stories .st-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
#view-stories .st-title { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
#view-stories .st-top .cx-sub { margin: 4px 0 0; font-size: .82rem; color: var(--text-muted); }
#view-stories .st-hint { margin: 0 0 18px; font-size: .84rem; line-height: 1.5; color: var(--text-muted); max-width: 78ch; }
#view-stories .st-hint .ui { font-weight: 700; color: var(--ink); }
#view-stories .st-sec { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 14px 16px 16px; margin-bottom: 16px;
  border: 2px solid transparent; transition: border-color .12s, background .12s; }
#view-stories .st-sec.is-over { border-color: var(--orange); background: #fffaf4; }
#view-stories .st-sec h3 { margin: 0 0 10px; font-size: .95rem; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
#view-stories .st-sec h3 small { font-size: .74rem; font-weight: 500; color: var(--text-muted); }
#view-stories .st-sec--featured { background: linear-gradient(180deg, #fff7ec, #fff); border-color: #f5d9b8; }
#view-stories .st-sec--featured.is-over { border-color: var(--orange); }
#view-stories .st-cards { display: grid; gap: 10px; min-height: 64px; }
#view-stories .st-sec--featured .st-cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
#view-stories .st-cards--grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
#view-stories .st-empty { grid-column: 1 / -1; margin: 0; padding: 14px; text-align: center; font-size: .82rem; font-style: italic; color: var(--surface-3); border: 1.5px dashed var(--surface-2); border-radius: 12px; }
#view-stories .st-sec.is-over .st-empty { color: var(--orange); border-color: var(--orange); }
/* a card is one story: photo, heading, sub, tags, and the two controls */
#view-stories .st-card { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 8px 8px 8px 8px; border: 1.5px solid var(--surface-3); border-radius: 14px; background: #fff; cursor: grab; font-size: .8rem;
  transition: box-shadow .12s, border-color .12s; }
#view-stories .st-card:hover { border-color: var(--ink); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.08)); }
#view-stories .st-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
#view-stories .st-card.is-dragging { opacity: .45; }
#view-stories .st-card.is-before { box-shadow: -4px 0 0 0 var(--orange); }
#view-stories .st-card.is-after { box-shadow: 4px 0 0 0 var(--orange); }
#view-stories .st-sec--featured .st-card { grid-template-columns: 120px minmax(0, 1fr); border-color: #f0c9a0; }
#view-stories .st-card__img { position: relative; aspect-ratio: 5 / 4; border-radius: 9px; overflow: hidden; background: var(--bg-lighter); }
#view-stories .st-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
#view-stories .st-card__stat { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(20,16,12,.78); color: #fff; font-size: .62rem; font-weight: 700; }
#view-stories .st-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 26px; }
#view-stories .st-card__h { font-size: .88rem; line-height: 1.3; overflow-wrap: anywhere; }
#view-stories .st-sec--featured .st-card__h { font-size: 1rem; }
#view-stories .st-card__s { font-size: .74rem; font-weight: 600; color: var(--green-text, #2f6b4f); line-height: 1.35; }
#view-stories .st-card__n { font-size: .72rem; color: var(--text-muted); }
#view-stories .st-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
#view-stories .st-tag { font-size: .62rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--bg-lighter); border: 1px solid var(--surface-2); color: var(--text-muted); white-space: nowrap; }
#view-stories .st-card__acts { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
#view-stories .st-card__mv { font: inherit; font-size: .7rem; max-width: 130px; padding: 2px 4px; border: 1px solid var(--surface-2); border-radius: 6px; background: #fff; color: var(--text-muted); cursor: pointer; }
#view-stories .st-card__x { position: absolute; top: 6px; right: 6px; font: inherit; font-size: 1rem; line-height: 1; width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
#view-stories .st-card__x:hover { background: #fdecec; color: #b42323; }
/* the sticky bar: unpublished count, Preview, Confirm & publish */
#view-stories .st-foot { position: sticky; bottom: 12px; z-index: 20; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 14px; background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
#view-stories .st-foot__n { font-weight: 700; font-size: .86rem; }
#view-stories .st-foot__n.has-changes { color: var(--amber, #ffb545); }
#view-stories .st-foot__at { flex: 1 1 auto; font-size: .74rem; color: rgba(255,255,255,.65); }
#view-stories .btn--light { background: #fff; color: var(--ink); border: 1.5px solid var(--surface-3); box-shadow: none; }
#view-stories .btn--light:hover { border-color: var(--ink); }
#view-stories .st-foot .btn--light { border-color: transparent; }
#view-stories .st-foot .btn[disabled] { opacity: .45; cursor: not-allowed; }
#view-stories .sc-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 330;
  padding: 9px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .82rem; box-shadow: var(--shadow-md); }
#view-stories .sc-toast.is-bad { background: #b42323; }
/* the editor dialog reuses the "Your details" (pf) styles; only the photo differs */
#view-stories .st-ed { width: min(600px, calc(100vw - 28px)); }
#view-stories .st-ed__av { width: 120px; height: 96px; border-radius: 12px; background: var(--bg-lighter); color: var(--text-muted); font-size: .72rem; font-weight: 600; cursor: pointer; }
#view-stories .st-ed__av img[hidden] { display: none; }
#view-stories .st-ed__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
#view-stories .st-ed__tags { border: 0; padding: 0; margin: 0; min-width: 0; }
#view-stories .st-ed__tags legend { padding: 0; margin-bottom: 5px; }
#view-stories .st-ed__tags legend span { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
#view-stories .st-ed__taglist { display: flex; flex-wrap: wrap; gap: 6px; }
#view-stories .st-ed__tag { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; padding: 5px 10px; border: 1.5px solid var(--surface-3); border-radius: 999px; cursor: pointer; }
#view-stories .st-ed__tag:has(input:checked) { border-color: var(--orange); background: #fff6ec; }
#view-stories .st-ed__tag input { margin: 0; accent-color: var(--orange); }
#view-stories .pf__f select { font: inherit; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
/* the public page: an attribution line under the quote, only when it differs from the heading */
.scard__attrib { margin: 0; font-size: .84rem; font-weight: 600; color: var(--text-muted); }
.scard--featured .scard__attrib { color: var(--text-invert-muted); }
@media (max-width: 760px) {
  #view-stories .st-card__mv { min-height: 40px; font-size: 16px; max-width: none; flex: 1; }
  #view-stories .st-foot { bottom: calc(80px + env(safe-area-inset-bottom)); }
  #view-stories .sc-toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
  #view-stories .st-ed__row { grid-template-columns: 1fr; }
}

/* --- Our Team tab: the public Our Team page (/trainer-testimonials/) as cards (team.js) --- */
#view-team .tm { max-width: 1180px; margin: 0 auto; }
#view-team .tm-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
#view-team .tm-title { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
#view-team .tm-top .cx-sub { margin: 4px 0 0; font-size: .82rem; color: var(--text-muted); }
#view-team .tm-hint { margin: 0 0 18px; font-size: .84rem; line-height: 1.5; color: var(--text-muted); max-width: 78ch; }
#view-team .tm-hint .ui { font-weight: 700; color: var(--ink); }
/* one section per slot heading on the page */
#view-team .tm-sec { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 14px 16px 16px; margin-bottom: 16px;
  border: 2px solid transparent; transition: border-color .12s, background .12s; }
#view-team .tm-sec.is-over { border-color: var(--orange); background: #fffaf4; }
#view-team .tm-sec h3 { margin: 0 0 10px; font-size: .95rem; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
#view-team .tm-sec h3 small { font-size: .74rem; font-weight: 500; color: var(--text-muted); }
#view-team .tm-cards { display: grid; gap: 10px; min-height: 64px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
#view-team .tm-empty { grid-column: 1 / -1; margin: 0; padding: 14px; text-align: center; font-size: .82rem; font-style: italic; color: var(--surface-3); border: 1.5px dashed var(--surface-2); border-radius: 12px; }
#view-team .tm-sec.is-over .tm-empty { color: var(--orange); border-color: var(--orange); }
/* a card is one trainer: headshot, name, pills, times, languages, handle/phone, and the two controls */
#view-team .tm-card { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 8px; border: 1.5px solid var(--surface-3); border-radius: 14px; background: #fff; cursor: grab; font-size: .8rem;
  transition: box-shadow .12s, border-color .12s; }
#view-team .tm-card:hover { border-color: var(--ink); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.08)); }
#view-team .tm-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
#view-team .tm-card.is-dragging { opacity: .45; }
#view-team .tm-card.is-before { box-shadow: -4px 0 0 0 var(--orange); }
#view-team .tm-card.is-after { box-shadow: 4px 0 0 0 var(--orange); }
#view-team .tm-card__img { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--bg-lighter); box-shadow: 0 0 0 2px var(--amber); }
#view-team .tm-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; pointer-events: none; }
#view-team .tm-card__in { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--orange), var(--amber)); }
#view-team .tm-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 26px; }
#view-team .tm-card__h { font-size: .88rem; line-height: 1.3; overflow-wrap: anywhere; }
#view-team .tm-card__t { font-size: .72rem; color: var(--text-muted); line-height: 1.35; }
#view-team .tm-card__t b { color: var(--orange); }
#view-team .tm-card__m { font-size: .7rem; color: var(--text-muted); overflow-wrap: anywhere; }
#view-team .tm-card__pills { display: flex; flex-wrap: wrap; gap: 4px; }
#view-team .tm-card__pills:empty { display: none; }
#view-team .tm-pill { font-size: .6rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--surface-2); background: var(--bg-lighter); color: var(--text-muted); white-space: nowrap; letter-spacing: .03em; text-transform: uppercase; }
#view-team .tm-pill--cert { color: #fff; background: var(--green); border-color: var(--green); }
#view-team .tm-pill--ladies { color: #b8336a; background: #fde7ef; border-color: #e8b4c8; }
#view-team .tm-card__acts { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
#view-team .tm-card__mv { font: inherit; font-size: .7rem; max-width: 150px; padding: 2px 4px; border: 1px solid var(--surface-2); border-radius: 6px; background: #fff; color: var(--text-muted); cursor: pointer; }
#view-team .tm-card__x { position: absolute; top: 6px; right: 6px; font: inherit; font-size: 1rem; line-height: 1; width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
#view-team .tm-card__x:hover { background: #fdecec; color: #b42323; }
/* the sticky bar: unpublished count, Preview, Discard, Confirm & publish */
#view-team .tm-foot { position: sticky; bottom: 12px; z-index: 20; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 14px; background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
#view-team .tm-foot__n { font-weight: 700; font-size: .86rem; }
#view-team .tm-foot__n.has-changes { color: var(--amber, #ffb545); }
#view-team .tm-foot__at { flex: 1 1 auto; font-size: .74rem; color: rgba(255,255,255,.65); }
#view-team .btn--light { background: #fff; color: var(--ink); border: 1.5px solid var(--surface-3); box-shadow: none; }
#view-team .btn--light:hover { border-color: var(--ink); }
#view-team .tm-foot .btn--light { border-color: transparent; }
#view-team .tm-foot .btn[disabled] { opacity: .45; cursor: not-allowed; }
#view-team .sc-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 330;
  padding: 9px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .82rem; box-shadow: var(--shadow-md); }
#view-team .sc-toast.is-bad { background: #b42323; }
/* the editor dialog reuses the "Your details" (pf) styles; only the photo differs */
#view-team .tm-ed { width: min(600px, calc(100vw - 28px)); }
#view-team .tm-ed__av { width: 96px; height: 96px; border-radius: 50%; background: var(--bg-lighter); color: var(--text-muted); font-size: .72rem; font-weight: 600; cursor: pointer; overflow: hidden; }
#view-team .tm-ed__av img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
#view-team .tm-ed__av img[hidden] { display: none; }
#view-team .tm-ed__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
#view-team .tm-ed__row .pf__f[hidden] { display: none; }
#view-team .tm-ed__flags { display: flex; flex-wrap: wrap; gap: 8px; }
#view-team .tm-ed__flag { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; padding: 6px 12px; border: 1.5px solid var(--surface-3); border-radius: 999px; cursor: pointer; }
#view-team .tm-ed__flag:has(input:checked) { border-color: var(--orange); background: #fff6ec; }
#view-team .tm-ed__flag input { margin: 0; accent-color: var(--orange); }
#view-team .pf__f select { font: inherit; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--surface-3); border-radius: var(--radius-sm); background: #fff; color: var(--ink); max-width: 100%; }
@media (max-width: 760px) {
  #view-team .tm-card__mv { min-height: 40px; font-size: 16px; max-width: none; flex: 1; }
  #view-team .tm-foot { bottom: calc(80px + env(safe-area-inset-bottom)); }
  #view-team .sc-toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
  #view-team .tm-ed__row { grid-template-columns: 1fr; }
}

/* ---------- Live Class promotions ----------
   Public: the section between the price block and the timetable on /live-class/. Two
   16:9 image cards (the artwork carries any words), side by side on a desktop, one
   column under 900px; a lone card sits centred at 640px. The section ships hidden and
   main.js shows it only when /api/promos/live has a card. */
.promos { padding-top: 0; }
.promos__grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.promos__grid.is-one { grid-template-columns: minmax(0, 640px); justify-content: center; }
.promo { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: #fff; text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
a.promo:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
a.promo:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.promo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.promo__ends { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  background: rgba(23,23,23,.82); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.promo__ends::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
@media (max-width: 900px) {
  .promos__grid { grid-template-columns: 1fr; max-width: 640px; }
}

/* The editor: the third section of the Stories tab. Two fixed slot rows (not a
   draggable list) with the Stories card skin, and a drawer whose dropzone is the
   shape of the card, so what she drops in is what the page shows. */
#view-stories .st-sec--promos { background: linear-gradient(180deg, #f2f7ff, #fff); border-color: #cfe0f5; }
#view-stories .st-slots { display: grid; gap: 10px; }
#view-stories .st-slot { display: grid; grid-template-columns: 34px 168px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 8px 10px 8px 8px; border: 1.5px solid var(--surface-3); border-radius: 14px; background: #fff; font-size: .8rem; cursor: pointer; }
#view-stories .st-slot:hover { border-color: var(--ink); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.08)); }
#view-stories .st-slot:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
#view-stories .st-slot.is-expired .st-slot__img { opacity: .55; }
#view-stories .st-slot__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .78rem;
  background: var(--bg-lighter); border: 1px solid var(--surface-2); color: var(--text-muted); }
#view-stories .st-slot__img { position: relative; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: var(--bg-lighter); }
#view-stories .st-slot__img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
#view-stories .st-slot__img i { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(20,16,12,.78); color: #fff; font-size: .6rem; font-weight: 700; font-style: normal; }
#view-stories .st-slot__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#view-stories .st-slot__h { font-size: .9rem; line-height: 1.3; overflow-wrap: anywhere; }
#view-stories .st-slot__meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: .72rem; color: var(--text-muted); }
#view-stories .st-slot__meta .st-tag.is-live { background: #e6f1ea; border-color: transparent; color: #2f6b4f; }
#view-stories .st-slot__meta .st-tag.is-draft { background: #fff3e0; border-color: transparent; color: var(--orange-text); }
#view-stories .st-slot__meta .st-tag.is-ends { background: #fdecec; border-color: transparent; color: #b42323; }
#view-stories .st-slot__acts { display: flex; gap: 6px; align-items: center; }
#view-stories .st-slot__btn { font: inherit; font-size: .76rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--surface-3); background: #fff; color: var(--ink); cursor: pointer; white-space: nowrap; }
#view-stories .st-slot__btn:hover { border-color: var(--ink); }
#view-stories .st-slot__btn--x { color: var(--text-muted); border-color: transparent; }
#view-stories .st-slot__btn--x:hover { background: #fdecec; color: #b42323; border-color: transparent; }
#view-stories .st-slot--empty { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "n add"; border-style: dashed; border-color: var(--surface-2); background: transparent; min-height: 62px; }
#view-stories .st-slot--empty:hover { border-color: var(--orange); background: #fffaf4; box-shadow: none; }
#view-stories .st-slot--empty .st-slot__add { grid-area: add; font-weight: 700; color: var(--orange-text); }
#view-stories .st-slot--empty .st-slot__add small { display: block; font-weight: 500; color: var(--text-muted); font-size: .72rem; margin-top: 2px; }
#view-stories .st-ed--promo .st-ed__drop { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 12px; overflow: hidden;
  border: 2px dashed var(--surface-3); background: var(--bg-lighter); display: grid; place-items: center; text-align: center; cursor: pointer; }
#view-stories .st-ed--promo .st-ed__drop:hover, #view-stories .st-ed--promo .st-ed__drop.is-over { border-color: var(--orange); }
#view-stories .st-ed--promo .st-ed__drop:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
#view-stories .st-ed--promo .st-ed__drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#view-stories .st-ed--promo .st-ed__drop img[hidden] { display: none; }
#view-stories .st-ed--promo .st-ed__drop-txt { position: relative; z-index: 1; padding: 10px 16px; border-radius: 10px; background: rgba(255,255,255,.92); font-size: .78rem; line-height: 1.45; color: var(--ink); box-shadow: var(--shadow-sm); pointer-events: none; }
#view-stories .st-ed--promo .st-ed__drop-txt b { display: block; font-size: .86rem; }
#view-stories .st-ed--promo .st-ed__drop-txt span { color: var(--text-muted); font-size: .72rem; }
#view-stories .st-ed--promo .st-ed__row3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 760px) {
  #view-stories .st-slot { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "n img" "n body" "n acts"; align-items: start; row-gap: 8px; }
  #view-stories .st-slot__n { grid-area: n; }
  #view-stories .st-slot__img { grid-area: img; width: 100%; max-width: 220px; }
  #view-stories .st-slot__body { grid-area: body; }
  #view-stories .st-slot__acts { grid-area: acts; justify-content: flex-start; }
  #view-stories .st-slot--empty { grid-template-areas: "n add"; align-items: center; }
  #view-stories .st-ed--promo .st-ed__row3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Smart Pass band (home) — option C from planning/mockups/smartpass-section-v3.html:
   three premium cards with Higgsfield's gold-ring icons, JOIN NOW in an action bar
   with the next two classes. The gold rule sits at the same height on every card.
   ========================================================================== */
.sp {
  position: relative;
  isolation: isolate;
  color: var(--text-invert);
  background: #0a0a0a;
  padding-block: clamp(36px, 4.5vw, 56px);
  text-align: center;
}
.sp__eyebrow { display: flex; align-items: center; gap: 18px; justify-content: center; margin: 0 0 6px; font-size: clamp(.9rem, 1.4vw, 1.2rem); letter-spacing: .32em; text-transform: uppercase; font-weight: 500; color: #fff; }
.sp__eyebrow::before, .sp__eyebrow::after { content: ""; width: clamp(60px, 10vw, 140px); height: 2px; background: rgba(255, 255, 255, .8); }
.sp__title { font-family: var(--font-body); font-weight: 800; font-size: clamp(2.25rem, 6vw, 4.65rem); line-height: 1; letter-spacing: -.02em; margin: 0; text-transform: uppercase; }
.sp__title em { font-style: normal; text-transform: none; background: linear-gradient(180deg, #ffc933, #f6821f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp__strip { display: inline-block; margin: 6px 0 22px; padding: 14px 72px; background: url("../img/smartpass/swash.png") center / 124% 170% no-repeat; color: var(--ink); font-weight: 600; font-style: italic; font-size: clamp(1.05rem, 2.2vw, 1.7rem); }
.sp__cards { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 28px); max-width: 820px; }
.sp__art { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .95); }
.sp__row { display: none; }
.sp__card {
  display: block; padding: 0; border: 0; background: none; box-shadow: none;
}
.sp__card--css {
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: start;
  padding: 30px 18px 32px; border-radius: 22px; border: 1.5px solid rgba(255, 255, 255, .78);
  /* glossy black with a diagonal sheen, like the Higgsfield cards */
  background: linear-gradient(115deg, #000 0%, #000 38%, #1c1c1c 50%, #050505 62%, #000 100%);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.sp__row img { width: clamp(120px, 12vw, 160px); height: auto; }
.sp__card .sp__art { width: 100%; }
.sp__card h3 {
  font-family: var(--font-body); font-weight: 700; font-style: normal; text-transform: none;
  font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.15; letter-spacing: -.01em;
  margin: 18px 0 0; min-height: 2.3em;                 /* two lines' worth, so every rule lands level */
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.sp__card h3 em { font-style: italic; font-weight: 500; display: block; color: var(--amber); }
.sp__card p { margin: 0; padding-top: 16px; font-size: clamp(1rem, 1.4vw, 1.2rem); color: #fff; position: relative; }
.sp__card p::before { content: ""; display: block; width: 88px; height: 2px; background: var(--amber); margin: 0 auto 14px; }
.sp__cta { margin-top: 24px; justify-content: center; }
.sp__join { font-size: clamp(1.05rem, 1.6vw, 1.375rem); text-transform: uppercase; letter-spacing: .06em; padding: 16px 34px; }
.sp__next { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  /* phones: the capsules collapse to just their orange segment — no outer pill, no lead-in text */
  .stories__pill { padding: 0; background: none; border: 0; gap: 0; }
  .stories__pill-text { display: none; }
  .stories__pill-cta { white-space: nowrap; padding: 13px 26px; }
  /* phones: the strip on two lines — One Pass / Join any Class */
  .sp__strip { padding: 12px 34px; line-height: 1.25; background-size: 130% 150%; }
  .sp__strip .sp__dot { display: block; height: 0; overflow: hidden; }
  /* phones: icon on the left, words on the right, so each card is a short row */
  .sp__cards { grid-template-columns: 1fr; max-width: 420px; gap: 12px; }
  .sp__art { display: none; }
  .sp__row { display: grid; }
  .sp__card { grid-template-columns: 96px 1fr; grid-template-rows: auto; align-items: center; justify-items: start; padding: 16px 18px 16px 12px; text-align: left; column-gap: 14px; border-radius: 22px; border: 1.5px solid rgba(255, 255, 255, .78); background: linear-gradient(115deg, #000 0%, #000 38%, #1c1c1c 50%, #050505 62%, #000 100%); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9); }
  .sp__row { grid-template-columns: 96px 1fr; align-items: center; justify-items: start; column-gap: 14px; }
  .sp__row img { width: 96px; grid-row: 1 / span 2; }
  .sp__card h3 { min-height: 0; margin: 0; align-items: flex-start; font-size: 1.3rem; }
  .sp__card h3 em { display: inline; margin-right: .3em; }
  .sp__card p { padding-top: 8px; font-size: .95rem; color: rgba(255, 255, 255, .85); }
  .sp__card p::before { margin: 0 0 8px; width: 56px; }
}

/* ==========================================================================
   Motion — hover states and staggered scroll-in reveals
   Quiet and consistent: 200–600ms, var(--ease), lifts only (no bounce, no
   rotation, nothing that moves layout). Every transform is dropped under
   prefers-reduced-motion, and every reveal is a progressive enhancement:
   the hidden state exists only under html.js, which main.js adds at boot
   when IntersectionObserver is there and motion is welcome.
   ========================================================================== */

/* ---------- Nav: colour eases, an amber rule grows out from the centre ---------- */
.nav__list a { transition: color .2s var(--ease), background-color .2s var(--ease); }
.nav__list a:not(.nav__cta) { position: relative; }
.nav__list a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--amber);
  scale: 0 1;
  transform-origin: 50% 50%;
  transition: scale .3s var(--ease);
}
@media (hover: hover) and (min-width: 861px) {
  .nav__list a:not(.nav__cta):hover::after,
  .nav__list a:not(.nav__cta):focus-visible::after { scale: 1 1; }
}

/* ---------- Buttons: a 2px lift and a deeper shadow, 200ms ---------- */
.btn { --dur: .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(23, 23, 23, .06), 0 14px 28px -12px rgba(23, 23, 23, .35); }
.btn:active { transform: translateY(0); }
.btn--cta:hover { box-shadow: 0 3px 6px rgba(124, 58, 12, .22), 0 18px 34px -12px rgba(246, 130, 31, .7), inset 0 1px 0 rgba(255, 255, 255, .26); }
.btn--cta:active { box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn--ghost:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(255, 201, 51, .8); }
.nav__list a.nav__cta { transition: color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.nav__list a.nav__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(246, 130, 31, .9); }
.site-header__cta { transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); }

/* ---------- Footer links ---------- */
.site-footer a,
.site-footer__legal a { transition: color .2s var(--ease); }
.site-footer a:hover,
.site-footer__legal a:hover { color: var(--amber); }

/* ---------- Cards: lift 4px + shadow, 350ms ---------- */
.sp__card,
.stat,
.scard,
.trainer,
.tt__card,
.card,
.tile,
.person,
.stage,
.phase,
.plan,
.compare__col,
.proof__item,
.promo,
.video-grid .vid,
.faq-aside__card,
.ticks:not(.ticks--plain),
.story-card,
.team-photos img,
.gallery img {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.sp__card .sp__art { transition: box-shadow .35s var(--ease); }
.stat:hover,
.scard:hover,
.trainer:hover,
.tt__card:hover,
.card:hover,
.tile:hover,
.person:hover,
.stage:hover,
.phase:hover,
.plan:hover,
.compare__col:hover,
.proof__item:hover,
a.promo:hover,
.video-grid .vid:hover,
.faq-aside__card:hover,
.ticks:not(.ticks--plain):hover,
.story-card:hover,
.team-photos img:hover,
.gallery img:hover { transform: translateY(-4px); }
.scard:hover, .trainer:hover, .tt__card:hover, .card:hover, .stage:hover,
.compare__col:hover, .faq-aside__card:hover { box-shadow: var(--shadow-lg); }
.tile:hover, .person:hover, .phase:hover { box-shadow: var(--shadow-lg); border-color: rgba(255, 255, 255, .2); }
.plan:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, .2), 0 30px 60px -22px rgba(0, 0, 0, .55); }
.compare__col--win:hover { box-shadow: 0 0 0 1px rgba(246, 130, 31, .3), var(--shadow-lg); }
a.promo:hover, .video-grid .vid:hover, .story-card:hover, .team-photos img:hover, .gallery img:hover { box-shadow: var(--shadow-lg); }
.ticks:not(.ticks--plain):hover { box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7); border-color: rgba(255, 255, 255, .16); }
/* the Smart Pass cards carry no box of their own on desktop: the art takes the shadow */
.sp__card:hover { transform: translateY(-4px); }
.sp__card:hover .sp__art { box-shadow: 0 44px 70px -34px rgba(0, 0, 0, 1); }
/* the two joined bands (home stats, story proof) have no box to shadow; the cell itself lifts */
.stat:hover, .proof__item:hover { box-shadow: none; }
/* the wide featured story keeps its own hover (a deeper shadow, no lift) */
.scard--featured:hover { transform: none; }

/* ---------- Scroll-in reveals ----------
   [data-reveal] on a group container: each direct child fades up in turn,
   90ms apart (--i is its index, capped at 8, set by main.js).
   [data-reveal-self] on a single element: it fades up on its own.
   main.js adds .is-in when the element enters the viewport; anything already
   on screen at boot gets .is-in--now (shown at once — no flash, no delay). */
@keyframes reveal-up {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: none; }
}
html.js [data-reveal] > *,
html.js [data-reveal-self] { opacity: 0; }
html.js [data-reveal].is-in > * {
  opacity: 1;
  animation: reveal-up .6s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
html.js [data-reveal-self].is-in {
  opacity: 1;
  animation: reveal-up .6s var(--ease) backwards;
}
html.js [data-reveal].is-in--now > *,
html.js [data-reveal-self].is-in--now { animation: none; }

/* Smart Pass: the three cards spring up from well below, one after another, then the
   button; the heading, strip and cards each get their own beat. */
@keyframes sp-pop {
  0%   { opacity: 0; translate: 0 90px; scale: .88; }
  60%  { opacity: 1; translate: 0 -10px; scale: 1.02; }
  100% { opacity: 1; translate: none; scale: 1; }
}
html.js .sp__cards[data-reveal].is-in > * {
  animation: sp-pop .9s cubic-bezier(.22, .9, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 220ms + 120ms);
}
html.js .sp__cards[data-reveal].is-in--now > * { animation: none; }
html.js .sp__cta[data-reveal-self].is-in { animation: sp-pop .7s cubic-bezier(.22, .9, .3, 1) .45s backwards; }   /* lands right after the first card */
html.js .sp__strip[data-reveal-self].is-in { animation: sp-strip .7s var(--ease) .15s backwards; }
@keyframes sp-strip { from { opacity: 0; translate: -60px 0; } to { opacity: 1; translate: none; } }

/* Home hero: the copy settles in on load, top to bottom. Pure CSS — it runs
   with first paint (so nothing flashes) and ends at the natural, visible state,
   so it needs no JS and cannot strand content. */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { animation: reveal-up .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 110ms); }
  .hero__copy > :nth-child(2) { --i: 1; }
  .hero__copy > :nth-child(3) { --i: 2; }
  .hero__copy > :nth-child(4) { --i: 3; }
  .hero__copy > :nth-child(n+5) { --i: 4; }
}

@media print {
  html.js [data-reveal] > *,
  html.js [data-reveal-self] { opacity: 1 !important; animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  /* no hidden state at all, and nothing lifts */
  html.js [data-reveal] > *,
  html.js [data-reveal-self] { opacity: 1 !important; animation: none !important; }
  .hero__copy > * { animation: none !important; }
  .btn:hover, .btn--ghost:hover, .nav__list a.nav__cta:hover,
  .sp__card:hover, .stat:hover, .scard:hover, .trainer:hover, .tt__card:hover, .card:hover,
  .tile:hover, .person:hover, .stage:hover, .phase:hover, .plan:hover, .compare__col:hover,
  .proof__item:hover, a.promo:hover, .video-grid .vid:hover, .faq-aside__card:hover,
  .ticks:not(.ticks--plain):hover, .story-card:hover, .team-photos img:hover,
  .gallery img:hover { transform: none; }
  .nav__list a:not(.nav__cta)::after { transition: none; }
}


/* ---------- Live Classes: the trainer circles ----------
   One card per trainer, modelled on the "Meet our Trainers" creative: a round headshot with
   a hairline amber ring, the name bold, every slot the trainer takes in one line, the zone
   under it. No card chrome — the circle is the card. */
.tt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 6px; }
.tt-head__eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 2px;
  font-family: var(--font-ui); font-size: .78rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--text);
}
.tt-head__eyebrow::before { content: ""; width: 44px; height: 2px; background: linear-gradient(90deg, var(--orange), var(--amber)); }
.tt-head__title {
  margin: 0; font-family: "Poppins", var(--font-alt); font-weight: 800; font-size: clamp(2.4rem, 5.2vw, 3.8rem);
  line-height: .95; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink);
}
.tt-head__tag {
  margin: 0 0 8px; max-width: 34ch; text-align: right;
  font-family: var(--font-ui); font-size: .78rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted);
}
.lc .tt-head__sub { margin: 0 0 14px; max-width: 70ch; text-align: left; }
.lc .tt-tools { margin-bottom: 26px; }
.tt__grid.tt__grid, .lc .tt__grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 30px 20px; }
.tt__card, .lc .tt__card {
  align-items: center; text-align: center;
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
.tt__card:hover { transform: translateY(-4px); box-shadow: none; }
.tt__ring {
  width: min(100%, 210px); aspect-ratio: 1 / 1; border-radius: 50%; padding: 3px;
  background: linear-gradient(160deg, var(--amber), var(--orange) 55%, #fff3e0);
  box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .55);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.tt__card:hover .tt__ring { box-shadow: 0 30px 50px -26px rgba(246, 130, 31, .6); }
.tt__ring .tt__photo { width: 100%; height: 100%; aspect-ratio: 1 / 1; border-radius: 50%; border: 4px solid #fff; object-fit: cover; object-position: center top; background: var(--surface-2); }
.tt__ring .tt__photo--in { font-size: 3rem; }
.tt__card .tt__body, .lc .tt__card .tt__body { align-items: center; gap: 4px; padding: 14px 4px 0; flex: none; }
.tt__card .tt__who { font-family: "Poppins", var(--font-alt); font-weight: 700; font-size: 1.12rem; color: var(--ink); }
.tt__card .tt__time b { font-family: "Poppins", var(--font-body); font-weight: 500; font-size: 1.02rem; letter-spacing: 0; white-space: normal; color: var(--text); }
.tt__card .tt__time .trainer__ref { display: block; text-align: center; white-space: normal; }
.tt__card .tt__time .trainer__day { margin-left: 3px; vertical-align: 5px; padding: 0 5px; font-size: .6rem; }
.tt__zone { font-family: "Poppins", var(--font-body); font-size: .92rem; color: var(--text-muted); }
.tt__card .tt__ladies { margin-top: 4px; }
.tt__card .tt__wa, .lc .tt__card .tt__wa { width: auto; margin-top: 8px; padding: 8px 16px; font-size: .8rem; }
.tt__card .tt__body > :has(+ .tt__wa) { margin-bottom: 0; }
@media (max-width: 760px) {
  .tt-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tt-head__tag { text-align: left; margin: 0; max-width: none; }
  .tt__grid.tt__grid, .lc .tt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .tt__ring { width: min(100%, 150px); }
  .tt__card .tt__body { padding: 10px 0 0; }
  .tt__card .tt__who { font-size: .98rem; }
  .tt__card .tt__time b { font-size: .9rem; }
  .tt__zone { font-size: .8rem; }
}

/* Ladies only: a small badge on the photo's rim instead of a pill in the text, so every
   card's name, times and button line up; the note under the grid explains the symbol */
.tt__ring { position: relative; }
.tt__ring .tt__ladies {
  position: absolute; right: 4%; bottom: 4%; margin: 0; padding: 0;
  width: 30px; height: 30px; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4);
}
.tt__ring .tt__ladies::before { font-size: 1.1rem; }
.tt__ring .tt__ladies span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tt__ring .tt__ladies--no { display: none; }
@media (max-width: 760px) { .tt__ring .tt__ladies { width: 26px; height: 26px; } .tt__ring .tt__ladies::before { font-size: .95rem; } }

/* ---------- SMARTPass offer (/smart-pass/): full-width black band ----------
   The studio still sits on the right and fades into black on the left, where the
   headline and the two plan cards live; the includes strip and the button run underneath. */
.offer {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(40px, 5vw, 72px);
  background: #0b0b0b; color: #fff;
}
/* the studio still (Higgsfield, 21:9): covers the whole band, anchored right so the
   bottle, mat and dumbbell stay in view and the dark left side carries the text */
.offer__art { position: absolute; inset: 0 0 auto 0; height: 62%; z-index: 0; pointer-events: none; }
.offer__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right top; }
.offer::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(11, 11, 11, .55) 0%, rgba(11, 11, 11, .25) 40%, rgba(11, 11, 11, 0) 60%),
              linear-gradient(0deg, #0b0b0b 0%, #0b0b0b 38%, rgba(11, 11, 11, .6) 50%, rgba(11, 11, 11, 0) 64%);
}
.offer__wrap { position: relative; z-index: 2; display: grid; gap: clamp(22px, 3vw, 34px); }
.offer__copy { max-width: 620px; }
.offer__eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font-family: var(--font-ui); font-size: .74rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: rgba(255, 255, 255, .8);
}
.offer__eyebrow::after { content: ""; width: 56px; height: 2px; background: linear-gradient(90deg, var(--orange), var(--amber)); }
.offer__title {
  margin: 0; font-family: "Poppins", var(--font-alt); font-weight: 900; font-style: italic;
  font-size: clamp(3rem, 7.4vw, 5.6rem); line-height: .95; letter-spacing: -.03em; color: #fff;
}
.offer__title em { font-style: italic; font-weight: 700; background: linear-gradient(90deg, #ff8a2b, #ffb648); -webkit-background-clip: text; background-clip: text; color: transparent; }
.offer__line { margin: 10px 0 0; font-family: "Poppins", var(--font-alt); font-weight: 600; font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.15; color: #fff; }
.offer__line em { font-style: normal; color: #ff8a2b; }
.offer__sub { margin: 10px 0 0; font-family: "Poppins", var(--font-body); font-weight: 400; font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: .04em; color: rgba(255, 255, 255, .85); }
.offer__plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 600px; }
.offer__plan { border-radius: 18px; padding: 2px; background: linear-gradient(160deg, #ffb648, #f6821f); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9); }
.offer__plan-link {
  display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%;
  padding: 26px 18px 24px; border-radius: 16px; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, #fffdf9, #fff5e6); overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.offer__plan-link:hover { transform: translateY(-4px); }
.offer__plan--featured .offer__plan-link { padding-top: 62px; }
.offer__ribbon {
  position: absolute; left: 0; right: 0; top: 0; padding: 10px 0;
  background: linear-gradient(90deg, #f6821f, #ffb648); color: #1a1a1a;
  font-family: "Poppins", var(--font-ui); font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; text-align: center;
}
.offer__plan { position: relative; } .offer__plan-link { position: relative; }
.offer__term { font-family: "Poppins", var(--font-alt); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2rem); color: #111; }
.offer__was { font-family: "Poppins", var(--font-body); font-size: 1.1rem; color: #444; }
.offer__now { font-family: "Poppins", var(--font-alt); font-weight: 800; font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -.02em; color: #f26b1d; font-variant-numeric: tabular-nums; }
.offer__pill { margin-top: 10px; padding: 8px 20px; border-radius: 999px; background: #fdf1cf; color: #222; font-family: "Poppins", var(--font-body); font-size: .9rem; }
.offer__pill b { font-weight: 700; margin-right: 8px; }
.offer__ticks {
  list-style: none; margin: 0; padding: clamp(16px, 2vw, 24px) clamp(18px, 3vw, 36px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px);
}
.offer__ticks li { position: relative; padding-left: 34px; font-family: "Poppins", var(--font-body); font-size: .98rem; line-height: 1.45; color: #fff; }
.offer__ticks li b { font-weight: 600; color: var(--amber); }
.offer__ticks li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 5px;
  background: var(--amber); color: #111; font-weight: 800; font-size: .9rem; line-height: 22px; text-align: center;
}
.offer__cta { text-align: center; }
.offer__btn { width: min(100%, 640px); justify-content: center; font-size: 1.2rem; padding-block: 16px; }
@media (max-width: 760px) {
  .offer { padding-top: 0; }
  .offer__art { inset: 0 0 auto; height: auto; }
  .offer__art img { width: 100%; height: auto; object-fit: fill; }
  .offer__wrap { padding-top: 58vw; }
  .offer::after { background: linear-gradient(0deg, #0b0b0b 0%, #0b0b0b calc(100% - 62vw + 10px), rgba(11, 11, 11, .2) calc(100% - 30vw), rgba(11, 11, 11, 0) 100%); }
  .offer__copy { text-align: center; margin-inline: auto; }
  .offer__eyebrow { justify-content: center; }
  .offer__plans { gap: 14px; }
  .offer__plan-link { padding: 20px 10px 18px; }
  .offer__plan--featured .offer__plan-link { padding-top: 50px; }
  .offer__ribbon { font-size: .74rem; padding: 8px 0; }
  .offer__was { font-size: .95rem; }
  .offer__pill { font-size: .78rem; padding: 6px 12px; }
  .offer__ticks { grid-template-columns: 1fr; gap: 10px; }
  .offer__ticks li { font-size: .9rem; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.about-hero__img { display: block; width: 100%; height: auto; }
.about-hero__go { position: absolute; left: 39.5%; top: 65.5%; width: 21.5%; height: 8.5%; border-radius: 999px; }
.about-hero__go:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }

/* Workouts that Work: the "Real Stories, Real Transformations" banner is the header; its
   foot melts into the light section below, and the in-picture Start Your Journey button
   carries a real link */
.stories-hero { position: relative; background: #0a0a0a; line-height: 0; overflow: hidden; }
.stories-hero__img { display: block; width: 100%; height: auto; }
/* the tear line of a movie ticket: the light page bites a row of notches out of the
   banner's foot, with the perforation dashes just beneath */
.ticket-edge {
  position: relative; height: 22px; margin-top: -11px; z-index: 1;
  background:
    radial-gradient(circle at 50% 0, var(--edge-dark, #0a0a0a) 7px, transparent 8px) 0 0 / 26px 11px repeat-x,
    var(--edge-bg, var(--bg-light));
}
/* on the home page the strip sits between the Smart Pass band and the peach stats band */
.ticket-edge--stats { --edge-bg: #fffaf5; }
/* the same tear above the footer, upside down: the footer's notches bite up into the
   page, the dashes sit just above them; the strip itself stays see-through so it works
   on a light or a dark page */
.ticket-edge--foot {
  margin: -22px 0 -1px; height: 22px; z-index: 1;   /* lies over the foot of the section above: no band of its own */
  background: radial-gradient(circle at 50% 100%, var(--edge-dark, #171717) 7px, transparent 8px) 0 100% / 26px 11px repeat-x;
}
.ticket-edge--foot::after { top: 3px; border-top-color: rgba(26, 26, 26, .3); }
.ticket-edge::after {
  content: ""; position: absolute; left: 4%; right: 4%; top: 15px; height: 0;
  border-top: 2px dashed rgba(26, 26, 26, .22);
}
.stories-hero__go { position: absolute; left: 39.5%; top: 66%; width: 21.5%; height: 9%; border-radius: 999px; z-index: 1; }
.stories-hero__go:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }

/* Workouts that Work: the story finder — eyebrow, title, intro and the eight icon pills
   on a soft peach-washed panel, the REAL STORIES line beneath */
.finder {
  position: relative; text-align: center; padding: clamp(26px, 3.4vw, 44px) clamp(16px, 3vw, 40px) clamp(22px, 2.8vw, 34px);
  margin-bottom: clamp(24px, 3vw, 40px); border-radius: 26px; overflow: hidden;
  background:
    radial-gradient(60% 70% at 0% 0%, rgba(246, 130, 31, .16), transparent 70%),
    radial-gradient(55% 65% at 100% 100%, rgba(255, 178, 74, .28), transparent 70%),
    #fffaf5;
  box-shadow: 0 30px 60px -40px rgba(80, 40, 0, .35);
}
.finder__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 10px;
  font-family: var(--font-ui); font-size: .72rem; font-weight: 500; letter-spacing: .36em; text-transform: uppercase; color: var(--text);
}
.finder__eyebrow::before, .finder__eyebrow::after { content: ""; width: 56px; height: 1.5px; background: var(--orange); }
.finder .finder__title { margin-bottom: 10px; }
.finder .finder__intro { max-width: 62ch; margin-bottom: 22px; }
.finder .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1060px; margin: 0 auto 22px; }
.finder .filter {
  gap: 10px; padding: 12px 18px; border: 1.5px solid #ebe3da; background: #fff;
  font-family: "Poppins", var(--font-alt); font-weight: 600; font-size: .98rem; color: var(--ink);
  box-shadow: 0 8px 20px -14px rgba(60, 30, 0, .35); white-space: nowrap;
}
.finder .filter__ico { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; }
.finder .filter__ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.finder .filter__ico svg .a { stroke: var(--orange); }
.finder .filter:hover { border-color: var(--orange); color: var(--ink); transform: translateY(-2px); }
.finder .filter[aria-pressed="true"] { color: #fff; border-color: transparent; background-image: var(--grad-cta); box-shadow: var(--shadow-cta); }
.finder .filter[aria-pressed="true"] .filter__ico svg, .finder .filter[aria-pressed="true"] .filter__ico svg .a { stroke: #fff; }
.finder__foot {
  display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0;
  font-family: var(--font-ui); font-size: .66rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--text-muted);
}
.finder__foot::before, .finder__foot::after { content: ""; width: 64px; height: 1px; background: var(--orange); }
@media (max-width: 900px) { .finder .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .finder .filter { font-size: .9rem; padding: 11px 12px; } }
@media (max-width: 480px) {
  .finder { border-radius: 18px; }
  .finder__eyebrow::before, .finder__eyebrow::after, .finder__foot::before, .finder__foot::after { width: 26px; }
  .finder .filter { gap: 7px; padding: 10px 8px; font-size: .8rem; }
  .finder .filter__ico { width: 24px; height: 24px; } .finder .filter__ico svg { width: 22px; height: 22px; }
}

/* About Us: one flat black ground from header to footer */
.about, .about .section--dark { background: #0a0a0a; }

/* Workouts that Work: air between the last story row and the trainer card */
.story-grid ~ .cta-card { margin-top: clamp(32px, 4vw, 56px); }

/* Home: a faint amber hairline with a soft glow where the hero hands over to Smart Pass */
.sp::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 178, 74, .55) 30%, rgba(255, 178, 74, .55) 70%, transparent);
  box-shadow: 0 0 18px 2px rgba(246, 130, 31, .35);
}

/* ---------- The DWD SMART Formula (About Us) ----------
   Five true circles (width and height pinned to one --d; every inner size derives from it),
   S M A R T with the creative's icons; hover / focus / tap springs the description out as a
   white card below the disc and lifts the disc; the other four step back. Phones: 2 + 2 + 1,
   descriptions always open. */
.sf {
  position: relative; overflow: hidden; text-align: center; color: var(--ink);
  padding-block: clamp(36px, 5vw, 64px);
  background: #fdf6ef center / cover no-repeat;
}
.sf__eyebrow { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 12px; font-family: var(--font-ui); font-size: .74rem; letter-spacing: .38em; text-transform: uppercase; color: var(--ink); }
.sf__eyebrow::before, .sf__eyebrow::after { content: ""; width: clamp(40px, 7vw, 90px); height: 1.5px; background: var(--orange); }
.sf__title { margin: 0; font: 800 clamp(2rem, 5vw, 4.2rem)/1.05 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.sf__title em { font-style: normal; color: var(--orange); }
.sf__sub { max-width: 60ch; margin: 12px auto 0; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.5; color: var(--text-muted); }
.sf__script { position: absolute; right: 3%; top: 5%; margin: 0; font: 600 clamp(1.1rem, 2.2vw, 1.9rem)/1.05 Caveat, "Playfair Display", cursive; color: var(--ink); transform: rotate(-12deg); text-align: center; }
.sf__script b { display: block; color: var(--orange); font-weight: 600; }
.sf__row { display: flex; align-items: flex-start; justify-content: center; gap: clamp(6px, 1.4vw, 22px); margin-top: clamp(26px, 3vw, 44px); }
.sf__arrow { flex: none; margin-top: calc(var(--d, 180px) * .42); color: var(--orange); font-size: 1.7rem; font-weight: 700; opacity: .8; line-height: 1; }
.sf-step { --d: clamp(118px, 13.5vw, 196px); position: relative; flex: 0 0 auto; width: calc(var(--d) + 24px); cursor: default; outline: none; }
.sf-step__disc {
  position: relative; width: var(--d); height: var(--d); margin: 0 auto; border-radius: 50%; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: radial-gradient(circle at 50% 35%, #ffe7cf 0%, #fdd9bb 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 24px 40px -28px rgba(246, 130, 31, .8);
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.3), box-shadow .45s ease, background .45s ease, opacity .3s ease;
}
.sf-step__ico { display: block; width: calc(var(--d) * .34); height: auto; margin-bottom: calc(var(--d) * -.02); transition: transform .45s cubic-bezier(.2, .9, .3, 1.3); }
.sf-step__letter { font-family: var(--font-body); font-weight: 700; font-size: calc(var(--d) * .36); line-height: 1; letter-spacing: -.02em; color: var(--ink); transition: transform .45s cubic-bezier(.2, .9, .3, 1.3); }
.sf-step:nth-child(1) .sf-step__letter, .sf-step:nth-child(5) .sf-step__letter, .sf-step:nth-child(9) .sf-step__letter { color: var(--orange); }
.sf-step__name { font-family: var(--font-ui); font-size: calc(var(--d) * .072); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.sf-step__name::after { content: ""; display: block; width: calc(var(--d) * .14); height: 2px; margin: calc(var(--d) * .03) auto 0; background: var(--orange); }
.sf-step__pop {
  margin: 20px auto 0; max-width: 240px; padding: 14px 16px; border-radius: 16px; background: #fff;
  box-shadow: 0 26px 50px -24px rgba(246, 130, 31, .9), 0 0 0 1px rgba(246, 130, 31, .18);
  font-size: clamp(.86rem, 1.1vw, 1.02rem); font-weight: 500; line-height: 1.45; color: var(--ink);
  opacity: 0; transform: translateY(-34px) scale(.6); filter: blur(6px);
  transition: opacity .3s ease, transform .55s cubic-bezier(.2, 1.1, .3, 1.35), filter .3s ease;
  pointer-events: none;
}
.sf-step__pop b { display: block; margin-top: 8px; font-family: var(--font-ui); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }
.sf-step:hover .sf-step__pop, .sf-step:focus .sf-step__pop, .sf-step.is-on .sf-step__pop { opacity: 1; transform: none; filter: none; }
.sf-step:hover .sf-step__disc, .sf-step:focus .sf-step__disc, .sf-step.is-on .sf-step__disc {
  transform: translateY(-14px) scale(1.18);
  background: radial-gradient(circle at 50% 35%, #ffd9b3 0%, #ffc48a 100%);
  box-shadow: inset 0 0 0 2px #fff, 0 30px 50px -26px rgba(246, 130, 31, 1);
}
.sf-step:hover .sf-step__letter, .sf-step:focus .sf-step__letter, .sf-step.is-on .sf-step__letter { transform: scale(1.22); }
.sf-step:hover .sf-step__ico, .sf-step:focus .sf-step__ico, .sf-step.is-on .sf-step__ico { transform: translateY(-3px) scale(1.2) rotate(-6deg); }
.sf-step:hover, .sf-step:focus, .sf-step.is-on { z-index: 2; }
.sf__row:hover .sf-step:not(:hover) .sf-step__disc { opacity: .6; transform: scale(.94); }
.sf__foot { display: inline-flex; align-items: center; gap: 18px; margin: clamp(22px, 3vw, 36px) 0 0; padding: 12px 30px; border-radius: 999px; background: rgba(255, 255, 255, .55); font-family: var(--font-ui); font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
.sf__foot i { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.sf__foot b { color: var(--orange); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .sf-step__disc, .sf-step__letter, .sf-step__ico, .sf-step__pop { transition: none; } }
@media (max-width: 760px) {
  .sf__row { flex-wrap: wrap; gap: 18px 10px; }
  .sf__arrow { display: none; }
  .sf-step { --d: 140px; width: 46%; }
  .sf-step__pop { opacity: 1; transform: none; filter: none; }
  .sf__row:hover .sf-step:not(:hover) .sf-step__disc { opacity: 1; transform: none; }
  .sf__script { position: static; transform: none; margin: 10px 0 0; }
  .sf__foot { gap: 10px; padding: 10px 16px; font-size: .62rem; letter-spacing: .18em; }
}

/* Swipe nudges on the stories carousel: a one-time slide-and-spring when it first comes
   into view, the right arrow pulsing until the visitor moves it, and on phones a small
   "swipe" hint that goes on first scroll */
@keyframes car-nudge { 0%, 100% { transform: none; } 35% { transform: translateX(-46px); } 60% { transform: translateX(10px); } }
.stories-car.is-nudging .stories-car__track { animation: car-nudge 1.1s cubic-bezier(.3, .8, .3, 1) 1; }
@keyframes car-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 130, 31, .7); } 60% { box-shadow: 0 0 0 12px rgba(246, 130, 31, 0); } }
.stories-car:not(.is-touched) .stories-car__nav .stories-car__btn:last-child { animation: car-pulse 1.6s ease-out infinite; }
.stories-car__hint {
  position: absolute; left: 50%; bottom: -6px; translate: -50% 0; z-index: 3; pointer-events: none;
  padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff;
  font-family: var(--font-ui); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transition: opacity .4s ease;
}
.stories-car__hint b { display: inline-block; margin-left: 6px; animation: car-hint 1.2s ease-in-out infinite; }
@keyframes car-hint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (hover: none) and (max-width: 760px) { .stories-car:not(.is-touched) .stories-car__hint { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stories-car.is-nudging .stories-car__track, .stories-car__btn, .stories-car__hint b { animation: none !important; } }

.tt__zone b { font-weight: 600; color: #b8336a; }

.tt__head-zone { font-style: normal; font-weight: 500; color: var(--text-muted); letter-spacing: .06em; }

/* About Us: the tear between the black team section and the peach SMART Formula — the
   black notches bite down into the peach; the strip lies over the section's top edge */
.ticket-edge--sf { --edge-dark: #0a0a0a; --edge-bg: transparent; margin: 0 0 -22px; position: relative; z-index: 2; }
.ticket-edge--sf::after { border-top-color: rgba(26, 26, 26, .28); }

/* ---------- Trainer Program ----------
   Dark half: a Higgsfield studio hero, the four reasons as 3D icons on black. A ticket
   tear, then the light half on the SMART Formula's peach ground: Program Overview as an
   accordion of four numbered panels, Course Details as four aligned boxes. */
.tp-hero {
  position: relative; isolation: isolate; color: #fff; background: #0a0a0a center / cover no-repeat;
  padding-block: clamp(56px, 8vw, 120px) clamp(48px, 6vw, 96px);
}
.tp-hero__art { position: absolute; inset: 0; z-index: -2; }
.tp-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.tp-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .5) 40%, rgba(10, 10, 10, 0) 62%), linear-gradient(0deg, #0a0a0a 0%, rgba(10, 10, 10, 0) 30%); }
.tp-hero { min-height: clamp(420px, 42vw, 620px); display: flex; align-items: center; }
@media (max-width: 760px) {
  .tp-hero { min-height: 0; padding-top: 62vw; padding-bottom: 28px; align-items: flex-end; }
  .tp-hero__art img { object-position: center top; }
  .tp-hero::after { background: linear-gradient(0deg, #0a0a0a 0%, #0a0a0a 32%, rgba(10, 10, 10, .35) 55%, rgba(10, 10, 10, 0) 80%); }
}
.tp-hero__wrap { max-width: 720px; margin-left: 0; }
.tp-hero__kicker { margin: 0 0 14px; font-family: var(--font-ui); font-size: .74rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--amber); }
.tp-hero__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -.01em; }
.tp-hero__cta { justify-content: flex-start; margin-top: 26px; }
.btn--wa { display: inline-flex; align-items: center; gap: 9px; background: #25d366; color: #fff; }
.btn--wa svg { width: 20px; height: 20px; }
.btn--wa:hover { background: #1ebe5b; color: #fff; }
.tp-why { background: #0a0a0a; color: #fff; padding-block: clamp(10px, 2vw, 24px) clamp(40px, 5vw, 64px); }
.tp-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.tp-tile { text-align: center; padding: clamp(18px, 2.4vw, 30px) 16px; border-radius: 20px; background: linear-gradient(115deg, #000 0%, #000 40%, #161616 52%, #050505 64%, #000 100%); border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .95); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.tp-tile:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -30px rgba(246, 130, 31, .55); }
.tp-tile__ico { display: block; width: clamp(84px, 9vw, 120px); height: auto; margin: 0 auto 10px; filter: drop-shadow(0 14px 22px rgba(246, 130, 31, .35)); transition: transform .4s var(--ease-out); }
.tp-tile:hover .tp-tile__ico { transform: translateY(-4px) scale(1.06); }
.tp-tile__title { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.2rem); color: #fff; }
.tp-tile__sub { margin: 4px 0 0; font-size: .86rem; color: rgba(255, 255, 255, .72); }
.tp-why__cert { margin: clamp(22px, 3vw, 34px) 0 0; text-align: center; }
.tp-why .wrap { text-align: center; }
.tp-why__cert img { width: min(100%, 360px); height: auto; border-radius: 12px; background: #fff; padding: 8px 14px; }
.ticket-edge--tp { --edge-dark: #0a0a0a; --edge-bg: transparent; margin: 0 0 -22px; position: relative; z-index: 2; }
.tp-light { padding-top: clamp(40px, 5vw, 64px); }
.ticket-edge--tp::after { border-top-color: rgba(26, 26, 26, .28); }
.tp-light { position: relative; background: #fdf6ef center / cover no-repeat; color: var(--ink); text-align: center; padding-block: clamp(48px, 6vw, 84px); }
.tp-light .sf__title { margin-bottom: clamp(20px, 3vw, 34px); }
.tp-light__eyebrow2 { margin-top: clamp(48px, 6vw, 84px); }
.tp-light .btn-row { margin-top: clamp(20px, 3vw, 30px); }
/* Program Overview: four numbered panels; one open at a time, hover lifts, keyboard works */
.tp-ovs { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; gap: 12px; text-align: left; }
.tp-ov { border-radius: 18px; background: #fff; border: 1px solid #f0e4d6; box-shadow: 0 18px 40px -30px rgba(80, 40, 0, .5); overflow: hidden; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.tp-ov:hover { transform: translateY(-2px); box-shadow: 0 26px 50px -30px rgba(246, 130, 31, .55); }
.tp-ov__head { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px; width: 100%; padding: 18px 22px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.tp-ov__head:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
.tp-ov__n { font-family: var(--font-ui); font-size: .78rem; font-weight: 600; letter-spacing: .16em; color: var(--orange); }
.tp-ov__t { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink); }
.tp-ov__tag { font-size: .82rem; color: var(--text-muted); white-space: nowrap; }
.tp-ov__chev { width: 12px; height: 12px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(45deg); transition: transform .3s var(--ease-out); margin-right: 4px; }
.tp-ov.is-open .tp-ov__chev { transform: rotate(-135deg); }
.tp-ov__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.tp-ov.is-open .tp-ov__body { grid-template-rows: 1fr; }
.tp-ov__body > * { overflow: hidden; }
.tp-ov__list { list-style: none; margin: 0; padding: 0 22px 20px 60px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 24px; }
.tp-ov__list li { position: relative; padding-left: 26px; font-size: .98rem; line-height: 1.45; color: var(--text); opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s var(--ease-out); }
.tp-ov.is-open .tp-ov__list li { opacity: 1; transform: none; }
.tp-ov.is-open .tp-ov__list li:nth-child(2) { transition-delay: .05s } .tp-ov.is-open .tp-ov__list li:nth-child(3) { transition-delay: .1s } .tp-ov.is-open .tp-ov__list li:nth-child(4) { transition-delay: .15s } .tp-ov.is-open .tp-ov__list li:nth-child(5) { transition-delay: .2s }
.tp-ov__list li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 4px; background: var(--amber); color: #111; font-size: .78rem; font-weight: 800; line-height: 18px; text-align: center; }
.tp-ov__list b { color: var(--orange); }
/* Course Details: four aligned boxes */
.tp-boxes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); text-align: left; }
.tp-box { border-radius: 18px; background: #fff; border: 1px solid #f0e4d6; box-shadow: 0 18px 40px -30px rgba(80, 40, 0, .5); padding: 22px 20px 20px; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.tp-box:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(246, 130, 31, .55); }
.tp-box__t { margin: 0 0 12px; font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.tp-box__t::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 8px; background: var(--orange); }
.tp-box__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tp-box__list li { position: relative; padding-left: 22px; font-size: .92rem; line-height: 1.45; color: var(--text); }
.tp-box__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.tp-deepti .split__media { border-radius: 22px; overflow: hidden; }
@media (max-width: 900px) { .tp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tp-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tp-ov__tag { display: none; } }
@media (max-width: 520px) { .tp-boxes { grid-template-columns: 1fr; } .tp-ov__head { padding: 14px 16px; gap: 10px; } .tp-ov__list { padding-left: 16px; } .tp-hero__cta { flex-direction: column; align-items: flex-start; } }

/* Launch: the Sign-In pill is visible but greyed and inert (build.py LOGIN_SOON) */
.nav__cta--soon, .nav__cta--soon:hover, .nav__cta--soon:focus {
  background: #3a3a3a !important; background-image: none !important; color: #9a9a9a !important;
  cursor: not-allowed; pointer-events: none; box-shadow: none !important; transform: none !important;
}

/* About Us: the three of them in one photo on the left, bios stacked on the right */
.trio { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(20px, 3vw, 34px); }
.trio__photo { position: relative; margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .95); border: 1px solid rgba(255, 255, 255, .14); }
.trio__photo img { display: block; width: 100%; height: auto; }
.trio__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 34px 8px 12px; background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent); font-family: var(--font-ui); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.trio__bios { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-self: center; }
.trio__bio { padding: clamp(16px, 2vw, 22px) 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.trio__bio:first-child { border-top: 0; padding-top: 0; }
.trio__bio p { margin: 0 0 8px; color: var(--text-invert-muted); font-size: .95rem; line-height: 1.55; }
.trio__name { font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; color: #fff !important; margin-bottom: 6px !important; }
.trio__name small { display: block; margin-top: 2px; font-size: .74rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.trio__fact { font-family: var(--font-ui); font-size: .78rem !important; font-weight: 600; color: var(--amber) !important; margin: 0 !important; }
.team-trio .team-photos { margin-top: clamp(36px, 5vw, 60px); }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } .trio__photo { max-width: 560px; margin-inline: auto; } }

/* Trainer circles: once a zone other than India is picked, the converted time reads in
   the deep orange from the palette; the small "x India" line beneath stays muted */
.tt__card.is-converted .tt__time b { color: var(--orange-text, #c2410c); font-weight: 800; }

.sf__cta { margin-top: clamp(18px, 2.4vw, 28px); }

/* Trainer Program: parked — a clear "coming soon" strip above the hero */
.tp-soon { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; background: linear-gradient(90deg, #f6821f, #ffb14a); color: #1a1a1a; font-family: var(--font-body); font-weight: 500; font-size: .92rem; text-align: center; }
.tp-soon__pill { display: inline-block; padding: 3px 12px; border-radius: 999px; background: #1a1a1a; color: #ffc933; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

.tt__ist { margin: -8px auto 22px; max-width: 70ch; text-align: center; font-size: .9rem; color: var(--text-muted); }

/* Workouts that Work: the closing card is the hero creative again, with a real button
   sitting where the painted one was */
.stories-cta { position: relative; display: block; margin-top: clamp(32px, 4vw, 56px); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9); }
.stories-cta img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease-out); }
.stories-cta:hover img { transform: scale(1.02); }
.stories-cta__btn { position: absolute; left: 50%; top: 66.5%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 8px; padding: 12px 30px; border-radius: 999px; background: var(--grad-cta); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: clamp(.8rem, 1.4vw, 1.05rem); letter-spacing: .02em; text-transform: uppercase; box-shadow: var(--shadow-cta); white-space: nowrap; }
.stories-cta__btn svg { width: 1em; height: 1em; }
.stories-cta:hover .stories-cta__btn { filter: brightness(1.08); }
@media (max-width: 600px) { .stories-cta__btn { padding: 8px 16px; font-size: .68rem; } }

.trio__mission { max-width: none; white-space: nowrap; }
@media (max-width: 760px) { .trio__mission { white-space: normal; } }

.stories__begin { margin-top: clamp(32px, 4vw, 56px); }

/* Live Classes: after the trainers, a soft glow line, a question, the button */
.tt__ready { text-align: center; margin-top: clamp(36px, 5vw, 64px); }
.tt__glow { border: 0; height: 2px; margin: 0 auto clamp(22px, 3vw, 34px); width: min(100%, 720px);
  background: linear-gradient(90deg, transparent, rgba(246, 130, 31, .7) 30%, rgba(255, 178, 74, .9) 50%, rgba(246, 130, 31, .7) 70%, transparent);
  box-shadow: 0 0 22px 3px rgba(246, 130, 31, .35); border-radius: 999px; }
.tt__ready-t { margin: 0 0 16px; font-family: var(--font-body); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink); }

/* Request board: screenshots — the composer's drop zone and the thumbnails on a card */
#view-website .rb-drop { margin-top: 8px; padding: 10px 12px; border: 1.5px dashed var(--rb-line, #cfd6de); border-radius: 10px; background: rgba(255, 255, 255, .5); cursor: pointer; font-size: 12.5px; color: var(--rb-ink2, #4a5568); }
#view-website .rb-drop.is-over { border-color: var(--orange); background: rgba(246, 130, 31, .08); }
#view-website .rb-drop:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
#view-website .rb-drop__hint u { color: var(--orange); text-decoration: underline; }
#view-website .rb-drop__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#view-website .rb-drop__list:not(:empty) { margin-top: 10px; }
#view-website .rb-drop__list li { position: relative; width: 84px; height: 60px; border-radius: 6px; overflow: hidden; border: 1px solid var(--rb-line, #cfd6de); background: #fff; }
#view-website .rb-drop__list img { width: 100%; height: 100%; object-fit: cover; display: block; }
#view-website .rb-drop__list button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; font-size: 12px; line-height: 18px; cursor: pointer; }
#view-website .rb-shots { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
#view-website .rb-shots a { display: block; width: 72px; height: 50px; border-radius: 5px; overflow: hidden; border: 1px solid var(--rb-line, #cfd6de); background: #fff; }
#view-website .rb-shots img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* About Us: press logos ahead of the team photo */
.featured { margin-top: clamp(36px, 5vw, 60px); }
.featured__t { margin: 0 0 14px; font-family: var(--font-body); font-weight: 600; font-size: 1.15rem; color: #fff; }
.featured__row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(12px, 2vw, 22px); }
.featured__row li { width: clamp(72px, 9vw, 110px); aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .9); transition: transform .3s var(--ease-out); }
.featured__row li:hover { transform: translateY(-4px); }
.featured__row img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Trainer Program: the subtle light header — kicker, title, four white cards on peach */
.tp-top { background: linear-gradient(180deg, #fff8f1 0%, #fdf3ea 100%); color: var(--ink); text-align: center; padding-block: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 48px); }
.tp-top__kicker { margin: 0 0 12px; font-family: var(--font-ui); font-size: .74rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--orange-text); }
.tp-top__title { margin: 0 auto clamp(26px, 3.4vw, 42px); max-width: 22ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 4.2vw, 3.2rem); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); }
.tp-why4 { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); max-width: 1120px; }
.tp-why4__card { background: #fff; border: 1px solid #f3e6d8; border-radius: 22px; padding: clamp(22px, 2.6vw, 34px) 18px clamp(20px, 2.4vw, 30px); box-shadow: 0 24px 50px -36px rgba(120, 60, 0, .45); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.tp-why4__card:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -34px rgba(246, 130, 31, .5); }
.tp-why4__card img { display: block; width: clamp(88px, 9vw, 118px); height: auto; margin: 0 auto 14px; border-radius: 50%; transition: transform .4s var(--ease-out); }
.tp-why4__card:hover img { transform: scale(1.06); }
.tp-why4__card h3 { margin: 0 0 8px; font-family: var(--font-body); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--ink); }
.tp-why4__card h3 em { font-style: normal; color: var(--orange); }
.tp-why4__card p { margin: 0; font-size: .92rem; line-height: 1.45; color: var(--text-muted); }
.tp-top__foot { margin-top: clamp(22px, 3vw, 32px); background: rgba(255, 255, 255, .7); }
.tp-top__cta { justify-content: center; margin-top: clamp(20px, 2.6vw, 30px); }
@media (max-width: 900px) { .tp-why4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tp-why4 { grid-template-columns: 1fr; } .tp-top__cta { flex-direction: column; align-items: center; } }

/* the trainer capsule while the programme is parked: no link, grey pill */
.stories__pill--soon { cursor: default; }
.stories__pill--soon .stories__pill-cta { background: #6b6b6b !important; background-image: none !important; color: #d6d6d6 !important; box-shadow: none !important; }
.stories__pill--soon:hover { transform: none; box-shadow: none; }

/* launch: one footer line — the copyright left, the social icons right */
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.site-footer__legal { margin: 0; }
.site-footer__legal .site-footer__copy { margin-left: 0; }
.site-footer__bar { margin-top: 0; }
@media (max-width: 480px) { .site-footer .wrap { justify-content: center; } }

/* launch: the Sign-In pill is hidden altogether for now (markup stays so a signed-in
   visitor's nav still works, and one rule brings it back) */
.nav__cta--soon { display: none !important; }