/* =============================================================
   Glow Music Therapy — "Deep-Space Neon"
   A calm-but-electric cosmos at night: near-black blue-violet space,
   bioluminescent light-trails, glowstick tubes glowing cyan/magenta/violet.
   Design system + all page styles (marketing + login + portal).
   ============================================================= */

/* -------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------- */
:root {
  /* Device cutout / home-indicator insets. These resolve to 0px on browsers
     without safe-area support, so desktop spacing is unchanged. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* --- Palette: deep-space neon --- */
  --base:        #07070F;  /* near-black, blue-violet tinted (never pure black) */
  --surface:     #0F1022;  /* lifted panel */
  --surface-2:   #171A33;  /* cards / raised panels */
  --line:        #2A2E52;  /* hairline borders */
  --line-soft:   #2A2E5200;/* transparent variant for layering */

  --ink:         #EDEEFF;  /* body text, ~14:1 on base */
  --ink-soft:    #B3B7E0;  /* secondary text, still AA */
  --ink-mute:    #9094C8;  /* tertiary / captions — AA (>=4.5:1) on every surface, incl. calm */

  --cyan:        #34F5E0;  /* electric aqua — primary neon */
  --aqua:        #5CC8FF;  /* electric blue-aqua */
  --magenta:     #FF4FD8;  /* hot neon pink */
  --violet:      #9A6BFF;  /* electric violet */
  --lime:        #B8FF4D;  /* neon lime — sparing accent only */

  /* "-ink" variants: darkened hues that pass AA as TEXT on light/calm surfaces */
  --cyan-ink:    #18C9B5;  /* darker cyan for text on light if ever needed */

  /* glow halos — held in the static palette, never in motion */
  --halo-cyan:   rgba(52, 245, 224, 0.30);
  --halo-aqua:   rgba(92, 200, 255, 0.22);
  --halo-magenta:rgba(255, 79, 216, 0.26);
  --halo-violet: rgba(154, 107, 255, 0.26);

  /* --- Type --- */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --measure: 66ch;
  --lh-body: 1.65;

  /* --- Space scale (8pt-ish) --- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;
  --band: clamp(48px, 7vw, 96px); /* vertical band rhythm — sized to content, no voids */

  /* --- Radius --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* --- Shadow / bloom — layered neon glowstick bloom --- */
  --bloom: 0 0 60px -10px var(--halo-cyan), 0 0 24px -8px var(--halo-cyan);
  --bloom-soft: 0 0 40px -14px var(--halo-aqua);
  --bloom-magenta: 0 0 60px -10px var(--halo-magenta), 0 0 24px -8px var(--halo-magenta);
  --bloom-violet: 0 0 60px -10px var(--halo-violet), 0 0 24px -8px var(--halo-violet);
  --lift: 0 18px 50px -28px rgba(0,0,0,0.85);

  --t-fast: 160ms ease;
  --t-med:  200ms ease;
}

/* -------------------------------------------------------------
   2. CALM MODE  (body.calm) — mute accents, flatten halos,
      lift surface contrast. Applied via JS before first paint.
   ------------------------------------------------------------- */
body.calm {
  /* Softened neon — lower saturation/brightness so the glow stops shouting */
  --cyan:    #7FE6D8;
  --aqua:    #9CCBEF;
  --magenta: #E59ADB;
  --violet:  #B7A0F0;
  --lime:    #CDE89A;
  --halo-cyan:    rgba(127, 230, 216, 0.10);
  --halo-aqua:    rgba(156, 203, 239, 0.08);
  --halo-magenta: rgba(229, 154, 219, 0.08);
  --halo-violet:  rgba(183, 160, 240, 0.08);
  --surface:   #15172E;  /* lifted surface contrast */
  --surface-2: #1D2040;
  --bloom: none;
  --bloom-soft: none;
  --bloom-magenta: none;
  --bloom-violet: none;
}

/* -------------------------------------------------------------
   3. RESET / BASE
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }
/* Overflow guard: nothing may push the page wider than the viewport */
html, body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
  color: var(--ink);
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(52,245,224,0.10), transparent 60%),
    radial-gradient(1000px 700px at 92% 4%, rgba(255,79,216,0.09), transparent 60%),
    radial-gradient(1200px 900px at 50% 118%, rgba(154,107,255,0.12), transparent 60%),
    var(--base);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
}
/* Calm / reduce-glow soften the body gradient mesh */
body.calm, body.reduce-glow {
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(52,245,224,0.04), transparent 60%),
    radial-gradient(1200px 900px at 50% 118%, rgba(154,107,255,0.05), transparent 60%),
    var(--base);
  background-attachment: fixed;
}

/* Larger / simpler text accommodation */
body.bigtext { font-size: 1.1875rem; --lh-body: 1.75; }
body.bigtext h1, body.bigtext h2 { letter-spacing: 0; }

/* High-contrast text accommodation */
body.hicontrast {
  --ink: #FFFFFF;
  --ink-soft: #E2E3EE;
  --ink-mute: #C7C8D6;
  --line: #45485C;
}

/* =============================================================
   LIGHT THEME — Accessibility Center → "Light theme"
   ----------------------------------------------------------------
   A bright daylight take on the bioluminescent palette. Accent
   hues are DEEPENED so they pass AA as text/icons on white; the
   neon glows live in separate --halo-* tokens so they only soften.
   Almost everything adapts via tokens — the only component override
   is the primary CTA, kept bright so its near-black label stays legible.
   ============================================================= */
body.light {
  --base:      #EAEDF9;  /* soft lavender-white page */
  --surface:   #FFFFFF;  /* lifted panels */
  --surface-2: #F3F5FF;  /* cards */
  --line:      #D7DCF1;
  --line-soft: #D7DCF100;

  --ink:       #16182B;  /* ~13:1 on white */
  --ink-soft:  #444A6C;
  --ink-mute:  #5E6488;  /* AA on white and #F3F5FF */

  --cyan:      #0A7A6C;  /* deep aqua — AA as text on light */
  --aqua:      #1E7FC4;
  --magenta:   #C81BA6;
  --violet:    #6F46D6;
  --lime:      #5C8A00;
  --cyan-ink:  #0A7A6C;

  --halo-cyan:    rgba(11, 129, 117, 0.20);
  --halo-aqua:    rgba(30, 127, 196, 0.16);
  --halo-magenta: rgba(200, 27, 166, 0.16);
  --halo-violet:  rgba(111, 70, 214, 0.18);

  --bloom:         0 10px 30px -18px rgba(30,40,90,0.30), 0 0 32px -16px var(--halo-cyan);
  --bloom-soft:    0 10px 28px -20px rgba(30,40,90,0.22);
  --bloom-magenta: 0 10px 30px -18px rgba(30,40,90,0.28), 0 0 32px -16px var(--halo-magenta);
  --bloom-violet:  0 10px 30px -18px rgba(30,40,90,0.28), 0 0 32px -16px var(--halo-violet);
  --lift:          0 22px 50px -32px rgba(30,40,90,0.40);

  color: var(--ink);
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(11,129,117,0.10), transparent 60%),
    radial-gradient(1000px 700px at 92% 4%, rgba(200,27,166,0.08), transparent 60%),
    radial-gradient(1200px 900px at 50% 118%, rgba(111,70,214,0.10), transparent 60%),
    var(--base);
  background-attachment: fixed;
}
/* Primary CTA keeps a bright gradient so its near-black label stays legible. */
body.light .btn--primary {
  background: linear-gradient(135deg, #1BD0BA, #2E9FE2);
  border-color: color-mix(in srgb, #1BD0BA 55%, transparent);
}
/* Light + calm → gentler wash. */
body.light.calm, body.light.reduce-glow {
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(11,129,117,0.05), transparent 60%),
    radial-gradient(1200px 900px at 50% 118%, rgba(111,70,214,0.05), transparent 60%),
    var(--base);
  background-attachment: fixed;
}
/* Light + high contrast → maximum-legibility dark ink on white. */
body.light.hicontrast {
  --ink: #0A0B16; --ink-soft: #1C2034; --ink-mute: #313652; --line: #9AA0BE;
}
/* Dark "glow islands": the hero + real-session ride dark photo/glow backdrops,
   so even in light mode they keep the night palette (legible light text, full
   neon drama) rather than turning dark-text-on-dark. */
body.light .hero, body.light .real-session {
  --base: #07070F; --surface: #0F1022; --surface-2: #171A33; --line: #2A2E52;
  --ink: #EDEEFF; --ink-soft: #B3B7E0; --ink-mute: #9094C8;
  --cyan: #34F5E0; --aqua: #5CC8FF; --magenta: #FF4FD8; --violet: #9A6BFF;
  --halo-cyan: rgba(52,245,224,0.30); --halo-aqua: rgba(92,200,255,0.22);
  --halo-magenta: rgba(255,79,216,0.26); --halo-violet: rgba(154,107,255,0.26);
}
/* Restore the hero's bright primary CTA (overrides the light-mode button tint). */
body.light .hero .btn--primary {
  background: linear-gradient(135deg, var(--cyan), var(--aqua));
  border-color: color-mix(in srgb, var(--cyan) 60%, transparent);
}

img, svg { display: block; max-width: 100%; }

a { color: var(--cyan); text-decoration-color: color-mix(in srgb, var(--cyan) 45%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--cyan); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: var(--ink); letter-spacing: -0.015em; }
h1 { font-size: clamp(2.6rem, 7vw, 5rem); font-optical-sizing: auto; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

p { max-width: var(--measure); }

button { font: inherit; color: inherit; cursor: pointer; }

/* -------------------------------------------------------------
   4. ACCESSIBILITY PLUMBING
   ------------------------------------------------------------- */
.skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  background: var(--cyan); color: var(--base);
  padding: 0.6rem 1rem; border-radius: var(--r-sm);
  font-weight: 600; z-index: 1000;
  transition: top var(--t-fast);
}
.skip-link:focus { top: calc(var(--s-4) + var(--safe-top)); }

:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   ------------------------------------------------------------- */
.wrap { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - 2.5rem); margin-inline: auto; }

/* Full-width horizontal bands separated by darkness */
.band { padding-block: var(--band); position: relative; }
.band--surface { background: var(--surface); }
.band > .wrap, .band > .wrap-narrow { position: relative; z-index: 1; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan));
}

.lede { color: var(--ink-soft); font-size: 1.125rem; }

/* -------------------------------------------------------------
   6. BUTTONS
   ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; line-height: 1;
  /* md (default) */
  height: 44px; padding: 0 18px; font-size: 15px;
  border-radius: var(--r-pill);
  font-weight: 600;
  border: 1px solid var(--line);
  background-origin: border-box;   /* gradient fills the full border-box (no wrapped edge-color sliver) */
  text-decoration: none;
  transition: transform var(--t-med), box-shadow var(--t-med), background var(--t-med), border-color var(--t-med);
  /* Sane default look (ghost-ish): a bare .btn must never fall back to the
     UA's light-gray button face, which turns inherited light ink invisible
     in dark mode. Variants (--primary/--ghost) override all three. */
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
  color: var(--ink);
}
.btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn--lg { height: 52px; padding: 0 24px; font-size: 16px; }
.btn svg { flex: none; }
.btn--primary {
  background: linear-gradient(135deg, var(--cyan), var(--aqua));
  color: #05131A;
  border-color: color-mix(in srgb, var(--cyan) 60%, transparent);
  box-shadow: var(--bloom);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 80px -6px var(--halo-cyan), 0 0 30px -6px var(--halo-cyan); }
.btn--ghost {
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
  color: var(--ink);
  border-color: var(--line);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 30px -12px var(--halo-cyan); }
.btn--block { width: 100%; justify-content: center; }
.btn:active { transform: translateY(0); }

/* -------------------------------------------------------------
   7. SITE HEADER / NAV
   ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  padding-top: var(--safe-top);
  background: color-mix(in srgb, var(--base) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
/* Sub-pages (intake, facility intake, privacy…) use a plain .wrap header rather
   than the tall .nav bar — give it breathing room above/below the brand row. */
.site-header > .wrap:not(.nav) { padding-top: 16px; padding-bottom: 16px; }
/* Header bar runs full-width (overrides the .wrap content cap) so brand +
   links + actions all sit on one clean row at desktop widths. */
.nav {
  display: flex; align-items: center; gap: clamp(14px, 1.4vw, 22px);
  min-height: 72px;
  width: 100%; max-width: none;
  margin-inline: 0;
  padding: 0 clamp(20px, 4vw, 44px);
}
.brand {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-size: 1.18rem; font-weight: 500;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand:hover .brand__mark { box-shadow: 0 0 22px -4px var(--halo-cyan); }
.brand__mark { transition: box-shadow var(--t-med); border-radius: 50%; }

.nav__links {
  flex: 0 1 auto;
  display: flex; align-items: center; gap: clamp(14px, 1.4vw, 22px);
  margin-left: auto; list-style: none; padding: 0;
}
.nav__links a:not(.btn) {
  color: var(--ink-soft); text-decoration: none;
  font-size: 0.95rem; font-weight: 500;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.nav__links a:not(.btn):hover { color: var(--cyan); }
/* CTA items live in the markup for the mobile dropdown only — hidden on desktop */
.nav__links-cta { display: none; }

.nav__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; }

.nav__login {
  display: inline-flex; align-items: center; white-space: nowrap;
  color: var(--ink-soft); text-decoration: none; font-weight: 500;
  font-size: 0.95rem; padding: 0.5rem 0.4rem;
}
.nav__login:hover { color: var(--cyan); }

/* Mobile nav toggle */
.nav__toggle {
  display: none; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 0.5rem;
  width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  transition: border-color var(--t-fast);
}
.nav__toggle:hover { border-color: var(--cyan); }
.nav__toggle svg { stroke: var(--ink); }
.nav__toggle[aria-expanded="true"] { border-color: var(--cyan); }
.nav__toggle[aria-expanded="true"] svg { stroke: var(--cyan); }

/* -------------------------------------------------------------
   8. DARK MODE (moon) TOGGLE — static, never animates
   ------------------------------------------------------------- */
.calm-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; line-height: 1;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill);
  height: 40px; padding: 0 14px;
  color: var(--ink-soft);
  font-size: 13px; font-weight: 600;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.calm-toggle:hover { border-color: var(--cyan); color: var(--ink); }
.calm-toggle__moon {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: transparent;
  /* crescent moon (dark mode off): an inset shadow carves the crescent */
  box-shadow: inset -4px -2px 0 0 var(--cyan);
  transition: box-shadow var(--t-fast), background var(--t-fast);
}
body:not(.light) .calm-toggle__moon {
  background: var(--cyan); /* full moon = dark mode engaged */
  box-shadow: none;
}
/* Compact single-line label: "Dark mode" + inline state, never stacked */
.calm-toggle__label { display: inline-flex; align-items: center; gap: 6px; }
.calm-toggle__label small { font-weight: 500; color: var(--ink-mute); font-size: 12px; line-height: 1; }
.calm-toggle__label small::before { content: "·"; margin-right: 6px; color: var(--line); }

/* -------------------------------------------------------------
   9. SENSORY SETTINGS PANEL — flat side panel, never glows
   ------------------------------------------------------------- */
/* Fixed dialog, top-right anchored, with its OWN bounded scroll.
   Title + close stay pinned; only the options list (.sensory__body) scrolls.
   Toggling any option never shifts the page or hides another option. */
.sensory {
  position: fixed;
  top: calc(16px + var(--safe-top));
  right: calc(16px + var(--safe-right));
  bottom: auto; left: auto;
  width: min(380px, calc(100vw - 32px - var(--safe-left) - var(--safe-right)));
  max-height: min(calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)), 760px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  z-index: 500;
  /* Closed state stays WITHIN the viewport (no off-screen transform that would
     expand page width on phones) and is hidden purely via opacity/visibility. */
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med), visibility var(--t-med);
  display: flex; flex-direction: column;
  box-shadow: var(--lift);
  overflow: hidden; /* clip children to the rounded, bounded box */
}
.sensory[data-open="true"] { opacity: 1; visibility: visible; }
.sensory__head {
  flex: none;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-5); border-bottom: 1px solid var(--line);
}
.sensory__head h2 { font-size: 1.25rem; }
.sensory__head p { font-size: 0.85rem; color: var(--ink-mute); margin-top: 0.35rem; }
.sensory__close {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-sm); width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  display: grid; place-items: center; color: var(--ink); flex: none;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
/* The × glyph was invisible: the inline SVG <line>s have fill:none and no
   stroke, so they inherited stroke:none. Paint them in the panel ink and
   give them a readable weight so the close affordance is unmistakable. */
.sensory__close svg {
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  width: 18px; height: 18px;
}
.sensory__close:hover,
.sensory__close:focus-visible {
  border-color: var(--cyan); color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 14%, var(--surface-2));
}
/* The only scroll region — keeps its own position as options toggle. */
.sensory__body { padding: var(--s-4) var(--s-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }

.switch-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
}
.switch-row:last-child { border-bottom: 0; }
.switch-row__text strong { display: block; font-size: 0.975rem; font-weight: 600; color: var(--ink); }
.switch-row__text span { font-size: 0.82rem; color: var(--ink-mute); }

/* Accessible toggle switch (button-based) */
.switch {
  --w: 50px; --h: 28px;
  position: relative; flex: none;
  width: var(--w); height: var(--h);
  border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: calc(var(--h) - 8px); height: calc(var(--h) - 8px);
  border-radius: 50%; background: var(--ink-mute);
  transition: transform var(--t-fast), background var(--t-fast);
}
.switch[aria-checked="true"] { background: color-mix(in srgb, var(--cyan) 30%, var(--surface-2)); border-color: var(--cyan); }
.switch[aria-checked="true"]::after { transform: translateX(calc(var(--w) - var(--h))); background: var(--cyan); }

.sensory__foot { flex: none; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); }
.sensory__reset {
  background: transparent; border: 1px solid var(--line); color: var(--ink-soft);
  border-radius: var(--r-sm); padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 600;
}
.sensory__reset:hover { border-color: var(--cyan); color: var(--cyan); }

.scrim {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(6,7,12,0.55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med), visibility var(--t-med);
}
.scrim[data-open="true"] { opacity: 1; visibility: visible; }

/* -------------------------------------------------------------
   10. BREATHING LIGHT POOL — the signature element
   Flat & still by default; breathes <=0.5Hz only when motion allowed.
   ------------------------------------------------------------- */
.pool {
  position: absolute; pointer-events: none; z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--halo-cyan) 0%, transparent 70%);
  filter: blur(8px);
  opacity: 0.92;
}
.pool--aqua { background: radial-gradient(circle, var(--halo-aqua) 0%, transparent 70%); }
.pool--violet { background: radial-gradient(circle, var(--halo-violet) 0%, transparent 70%); }
.pool--magenta { background: radial-gradient(circle, var(--halo-magenta) 0%, transparent 70%); }

@keyframes breathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
/* Motion only exists for users who have not asked to reduce it,
   AND only while the in-app toggle hasn't forced reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  body:not([data-motion="reduced"]) .pool {
    animation: breathe 6s ease-in-out infinite; /* ~0.17Hz, well under 0.5Hz */
  }
}
body.calm .pool { filter: none; opacity: 0.7; } /* flat fills in calm mode */

/* Reduce glow/brightness: flatten halos & strip bloom without
   the full calm palette desaturation. */
body.reduce-glow {
  --bloom: none; --bloom-soft: none; --bloom-magenta: none; --bloom-violet: none;
  --halo-cyan:    rgba(52, 245, 224, 0.10);
  --halo-aqua:    rgba(92, 200, 255, 0.08);
  --halo-magenta: rgba(255, 79, 216, 0.08);
  --halo-violet:  rgba(154, 107, 255, 0.08);
}
body.reduce-glow .pool { filter: none; animation: none !important; opacity: 0.65; }

/* -------------------------------------------------------------
   11. GLOBAL REDUCED-MOTION FLOOR
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* In-app reduce-motion toggle kills motion even without the OS flag */
[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
}
[data-motion="reduced"] { scroll-behavior: auto; }

/* -------------------------------------------------------------
   12. HERO
   ------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(56px, 9vw, 112px);
  text-align: center;
}
/* Hero gradient mesh — cyan/magenta/violet blooming at low alpha */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 22% 28%, var(--halo-cyan), transparent 70%),
    radial-gradient(55% 45% at 80% 26%, var(--halo-magenta), transparent 70%),
    radial-gradient(70% 60% at 50% 96%, var(--halo-violet), transparent 70%);
  filter: blur(10px);
}
body.calm .hero::before, body.reduce-glow .hero::before { filter: none; opacity: 0.5; }
/* Higher specificity so the full-bleed bg stays absolute even though the
   shared .photo component sets position:relative (which was pushing the hero
   content ~730px down and leaving a huge blank gap). */
.hero .hero__photo {
  position: absolute; inset: 0; z-index: 0; border-radius: 0;
  background: var(--base);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
body.calm .hero__photo img, body.reduce-glow .hero__photo img { opacity: 0.55; }
.hero__pool {
  width: clamp(420px, 70vw, 820px); height: clamp(420px, 70vw, 820px);
  top: 50%; left: 50%; transform: translate(-50%, -54%);
}
.hero__inner { position: relative; z-index: 1; }
.hero h1 { margin: 0.5rem auto 0; max-width: 16ch; }
.hero h1 .accent {
  background: linear-gradient(100deg, var(--cyan), var(--aqua) 45%, var(--magenta));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--cyan);
}
body.calm .hero h1 .accent, body.reduce-glow .hero h1 .accent {
  background: none; -webkit-text-fill-color: var(--cyan); color: var(--cyan);
}
.hero__sub {
  margin: var(--s-5) auto 0; max-width: 46ch;
  color: var(--ink-soft); font-size: clamp(1.05rem, 2.2vw, 1.3rem);
}
.hero__cta {
  margin-top: var(--s-7);
  display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap;
}
.hero__trust {
  margin-top: var(--s-7);
  display: flex; gap: var(--s-5) var(--s-6); justify-content: center; flex-wrap: wrap;
  color: var(--ink-mute); font-size: 0.875rem;
}
.hero__trust span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__trust svg { stroke: var(--cyan); flex: none; }

/* Animated glowstick wordmark cluster, gentle float (gated) */
.glowsticks { display: flex; justify-content: center; gap: 0.65rem; margin-bottom: var(--s-2); position: relative; z-index: 1; }
.glowstick {
  width: 8px; height: 58px; border-radius: var(--r-pill);
  position: relative;
}
/* inner highlight core to read as a luminous translucent tube */
.glowstick::after {
  content: ""; position: absolute; inset: 1px 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.05));
  mix-blend-mode: screen;
}
body.calm .glowstick::after, body.reduce-glow .glowstick::after { opacity: 0.4; }
@keyframes sway {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}
@media (prefers-reduced-motion: no-preference) {
  body:not([data-motion="reduced"]) .glowstick { animation: sway 7s ease-in-out infinite; }
  body:not([data-motion="reduced"]) .glowstick:nth-child(2) { animation-delay: -1.5s; }
  body:not([data-motion="reduced"]) .glowstick:nth-child(3) { animation-delay: -3s; }
  body:not([data-motion="reduced"]) .glowstick:nth-child(4) { animation-delay: -4.5s; }
}

/* -------------------------------------------------------------
   13. "WHAT A SESSION LOOKS LIKE" — Step track
   ------------------------------------------------------------- */
.section-head { max-width: 60ch; margin-bottom: var(--s-7); }
.section-head h2 { margin-top: var(--s-3); }
.section-head p { margin-top: var(--s-4); color: var(--ink-soft); }

.steps {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(3, 1fr);
  counter-reset: step;
}
.step {
  position: relative; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5);
  transition: border-color var(--t-med), transform var(--t-med);
}
.step:hover { border-color: color-mix(in srgb, var(--cyan) 40%, var(--line)); transform: translateY(-3px); }
.step__no {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan);
}
.step h3 { margin: var(--s-3) 0 var(--s-2); }
.step p { color: var(--ink-soft); font-size: 0.975rem; }
.step__icon {
  width: 46px; height: 46px; margin-bottom: var(--s-4);
  display: grid; place-items: center;
  border-radius: 12px; background: color-mix(in srgb, var(--cyan) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
}
.step__icon svg { stroke: var(--cyan); }

/* -------------------------------------------------------------
   14. SERVICES GRID
   ------------------------------------------------------------- */
.services {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(3, 1fr);
}
.svc {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-5);
  transition: border-color var(--t-med), transform var(--t-med);
}
.svc:hover { border-color: color-mix(in srgb, var(--aqua) 40%, var(--line)); transform: translateY(-3px); }
.svc__icon { width: 40px; height: 40px; margin-bottom: var(--s-3); }
.svc__icon svg { stroke: var(--aqua); }
.svc h3 { font-size: 1.18rem; margin-bottom: var(--s-2); }
.svc p { color: var(--ink-soft); font-size: 0.95rem; }
.svc__tag {
  display: inline-block; margin-top: var(--s-3);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cyan); padding: 0.25rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); border-radius: var(--r-pill);
}

/* -------------------------------------------------------------
   15. WHO IT'S FOR — quiet cards (asymmetric)
   ------------------------------------------------------------- */
.who { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, 1fr); }
.who-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6) var(--s-5);
  position: relative; overflow: hidden;
}
.who-card .pool { width: 220px; height: 220px; top: -90px; right: -80px; }
.who-card__inner { position: relative; z-index: 1; }
.who-card h3 { margin-bottom: var(--s-2); }
.who-card p { color: var(--ink-soft); font-size: 0.95rem; }
.who-card ul { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.who-card li { display: flex; gap: 0.55rem; align-items: flex-start; color: var(--ink-soft); font-size: 0.92rem; padding: 0.2rem 0; }
.who-card li svg { stroke: var(--cyan); flex: none; margin-top: 3px; }

/* -------------------------------------------------------------
   16. SENSORY PROMISE
   ------------------------------------------------------------- */
.promise { position: relative; overflow: hidden; }
.promise__pool { width: 700px; height: 700px; top: 50%; left: -200px; transform: translateY(-50%); }
.promise__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center; }
.promise__list { display: grid; gap: var(--s-4); }
.promise__item { display: flex; gap: var(--s-4); }
.promise__item .dot {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--violet) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--violet) 35%, transparent);
}
.promise__item .dot svg { stroke: var(--violet); }
.promise__item h3 { font-size: 1.1rem; font-family: var(--font-body); font-weight: 600; margin-bottom: 0.2rem; }
.promise__item p { color: var(--ink-soft); font-size: 0.95rem; }

/* -------------------------------------------------------------
   17. ABOUT FOUNDER
   ------------------------------------------------------------- */
.founder { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--s-8); align-items: center; }
.founder__photo { position: relative; }
.avatar {
  width: min(320px, 80%); aspect-ratio: 1; margin-inline: auto;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2);
  box-shadow: var(--bloom-soft);
}
.founder blockquote { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.35; color: var(--ink); margin: var(--s-4) 0; }
.founder__name { font-weight: 700; color: var(--ink); }
.founder__cred { color: var(--cyan); font-size: 0.9rem; font-weight: 600; }
.founder__bio { color: var(--ink-soft); margin-top: var(--s-4); }

/* -------------------------------------------------------------
   18. TESTIMONIAL BAND — featured quote + supporting cards
   ------------------------------------------------------------- */
.testimonial { position: relative; overflow: hidden; }
.testimonial__pool { width: 560px; height: 560px; top: 40%; left: 82%; transform: translate(-50%, -50%); }
.testimonial__head { max-width: 46ch; margin: 0 0 var(--s-6); }
.testimonial__head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.15; color: var(--ink); margin: 0.35rem 0 0; }
.testimonial__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s-4); align-items: stretch; }
.testimonial__aside { display: grid; grid-template-rows: 1fr 1fr; gap: var(--s-4); }
.tcard {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4);
}
.tcard__mark { font-family: var(--font-display); color: var(--cyan); font-size: 2.6rem; line-height: 0.7; height: 0.6em; }
.tcard__quote { margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.6; }
.tcard__who { display: flex; flex-direction: column; gap: 0.1rem; margin-top: auto; }
.tcard__name { font-style: normal; font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.tcard__role { color: var(--ink-mute); font-size: 0.85rem; }
/* Featured card leads with the real photo and a display-type pull quote. */
/* Fixed, comfortable photo height; the name sits just under the quote. */
.tcard--featured .tcard__photo { margin: 0; width: 100%; height: 450px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.tcard--featured .tcard__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.tcard--featured .tcard__who { margin-top: 0; }
.tcard--featured .tcard__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.1vw, 1.65rem); line-height: 1.32; }
.tcard--featured .tcard__quote .accent { color: var(--cyan); }
@media (max-width: 820px) {
  .testimonial__grid { grid-template-columns: 1fr; }
  .testimonial__aside { grid-template-rows: none; }
  .tcard--featured .tcard__photo { height: 300px; }
}

/* -------------------------------------------------------------
   19. FAQ accordion
   ------------------------------------------------------------- */
.faq { display: grid; gap: var(--s-3); }
.faq__item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; }
.faq__q {
  width: 100%; text-align: left; background: transparent; border: 0;
  padding: var(--s-5); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); min-height: 44px;
}
.faq__q:hover { color: var(--cyan); }
.faq__icon { flex: none; width: 22px; height: 22px; position: relative; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--cyan); border-radius: 2px; }
.faq__icon::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.faq__icon::after  { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); transition: transform var(--t-med); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translateX(-50%) scaleY(0); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--t-med); }
.faq__a-inner { padding: 0 var(--s-5) var(--s-5); color: var(--ink-soft); }
.faq__a p + p { margin-top: var(--s-3); }

/* -------------------------------------------------------------
   20. PORTAL TEASER
   ------------------------------------------------------------- */
.teaser { position: relative; overflow: hidden; }
.teaser__pool { width: 640px; height: 640px; top: 50%; right: -180px; transform: translateY(-50%); }
.teaser__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.teaser__preview {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--s-4); box-shadow: var(--lift);
}
.teaser__bar { display: flex; gap: 0.4rem; padding: 0 0 var(--s-3); }
.teaser__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.teaser__row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-sm); background: var(--surface-2); margin-bottom: var(--s-2); }
.teaser__row .avi { width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--cyan) 16%, var(--surface)); flex: none; display:grid; place-items:center; }
.teaser__row .avi svg { stroke: var(--cyan); }
.teaser__row .lines { flex: 1; }
.teaser__row .l1 { height: 9px; width: 60%; background: var(--line); border-radius: 4px; }
.teaser__row .l2 { height: 8px; width: 85%; background: color-mix(in srgb, var(--line) 70%, var(--surface)); border-radius: 4px; margin-top: 6px; }

/* -------------------------------------------------------------
   21. CONTACT / BOOKING FORM
   ------------------------------------------------------------- */
.contact { position: relative; overflow: hidden; }
.contact__pool { width: 760px; height: 760px; top: -200px; left: 50%; transform: translateX(-50%); }
.contact__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-8); }
.contact__aside h2 { margin-bottom: var(--s-4); }
.contact__aside p { color: var(--ink-soft); }
.contact__list { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: var(--s-4); }
.contact__list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.contact__list svg { stroke: var(--cyan); flex: none; margin-top: 2px; }
.contact__list strong { display: block; color: var(--ink); }
.contact__list span { color: var(--ink-soft); font-size: 0.93rem; }

.form-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6);
}
.field { margin-bottom: var(--s-4); }
.field label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: var(--s-2); color: var(--ink); }
.field .req { color: var(--cyan); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0.8rem 0.9rem; font: inherit; min-height: 44px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent);
}
.field textarea { resize: vertical; min-height: 80px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.form-note { font-size: 0.82rem; color: var(--ink-mute); margin-top: var(--s-3); }
.form-success {
  display: none; margin-top: var(--s-4); padding: var(--s-4);
  border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  background: color-mix(in srgb, var(--cyan) 10%, var(--surface)); color: var(--ink);
}
.form-success[data-show="true"] { display: block; }

/* -------------------------------------------------------------
   22. FOOTER
   ------------------------------------------------------------- */
.site-footer {
  background: var(--surface); border-top: 1px solid var(--line);
  padding-block: var(--s-8) calc(var(--s-6) + var(--safe-bottom));
}
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-6); }
.footer__brand p { color: var(--ink-soft); font-size: 0.93rem; margin-top: var(--s-3); }
.footer h4, .site-footer h3 { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--s-3); }
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.footer a { color: var(--ink-soft); text-decoration: none; font-size: 0.93rem; }
.footer a:hover { color: var(--cyan); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; align-items: center; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); color: var(--ink-mute); font-size: 0.85rem; }
.footer__bottom .sensory-link { background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink-soft); padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; min-height: 40px; }
.footer__bottom .sensory-link:hover { border-color: var(--cyan); color: var(--cyan); }

/* Symbolism note — gold infinity, quiet affirming touch */
.neuro-affirm { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-mute); font-size: 0.82rem; }
.neuro-affirm svg { flex: none; }

/* =============================================================
   23. LOGIN PAGE
   ============================================================= */
.auth {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
}
.auth__aside {
  position: relative; overflow: hidden;
  background: var(--surface); border-right: 1px solid var(--line);
  padding: var(--s-8) var(--s-7);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-6);
}
/* Framed, capped portrait — NOT a full-height faded backdrop — so the photo can
   never balloon into a giant vertical strip on tall/narrow windows. */
.auth__aside-photo {
  position: relative; z-index: 1; flex: none;
  width: 100%; max-width: 340px;
  aspect-ratio: 4 / 5; border-radius: var(--r-lg); opacity: 1;
}
.auth__aside-photo img { width: 100%; height: 100%; object-fit: cover; }
.auth__aside-photo .photo__scrim { opacity: 0.22; }
body.calm .auth__aside-photo, body.reduce-glow .auth__aside-photo { opacity: 0.92; }
.auth__aside .pool { width: 620px; height: 620px; top: 40%; left: -160px; transform: translateY(-50%); z-index: 0; }
.auth__aside-inner { position: relative; z-index: 1; max-width: 42ch; }
.auth__aside h2 { font-size: clamp(2rem, 4vw, 3rem); margin: var(--s-5) 0 var(--s-4); }
.auth__aside p { color: var(--ink-soft); }
.auth__points { list-style: none; padding: 0; margin-top: var(--s-6); display: grid; gap: var(--s-3); }
.auth__points li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ink-soft); }
.auth__points svg { stroke: var(--cyan); flex: none; margin-top: 3px; }

.auth__main {
  display: grid; place-items: center;
  padding: calc(var(--s-7) + var(--safe-top))
           calc(var(--s-5) + var(--safe-right))
           calc(var(--s-7) + var(--safe-bottom))
           calc(var(--s-5) + var(--safe-left));
}
.auth__card { width: min(420px, 100%); }
.auth__card h1 { font-size: 1.7rem; margin-bottom: var(--s-2); }
.auth__card .sub { color: var(--ink-soft); margin-bottom: var(--s-6); }
.auth__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-2); }
.auth__row a { font-size: 0.85rem; }
.auth__meta { margin-top: var(--s-5); text-align: center; color: var(--ink-soft); font-size: 0.93rem; }
.auth__back { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: var(--s-6); color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; }
.auth__back:hover { color: var(--cyan); }
.auth__back svg, .intake__back svg { stroke: currentColor; flex: none; }
.checkbox-row { display: flex; align-items: center; gap: 0.55rem; margin: var(--s-2) 0 var(--s-5); color: var(--ink-soft); font-size: 0.9rem; }
.checkbox-row input { width: 18px; height: 18px; accent-color: var(--cyan); }

/* =============================================================
   24. PORTAL PAGE
   ============================================================= */
.portal { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; min-height: 100dvh; }
.portal__side {
  background: var(--surface); border-right: 1px solid var(--line);
  padding: calc(var(--s-5) + var(--safe-top))
           var(--s-4)
           calc(var(--s-5) + var(--safe-bottom))
           calc(var(--s-4) + var(--safe-left));
  display: flex; flex-direction: column; gap: var(--s-5);
  position: sticky; top: 0; height: 100vh; height: 100dvh;
}
.portal__brand { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.portal__nav { list-style: none; padding: 0; display: grid; gap: 0.2rem; }
.portal__nav a,
.portal__nav button[role="tab"] {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
  padding: 0.7rem 0.8rem; border-radius: var(--r-sm); background: transparent; border: 0;
  color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; font-weight: 500;
  min-height: 44px; transition: background var(--t-fast), color var(--t-fast);
}
.portal__nav a svg, .portal__nav button[role="tab"] svg { stroke: currentColor; flex: none; }
.portal__nav a:hover, .portal__nav button[role="tab"]:hover { background: var(--surface-2); color: var(--ink); }
.portal__nav a[aria-current="page"],
.portal__nav button[role="tab"][aria-selected="true"] { background: color-mix(in srgb, var(--cyan) 14%, var(--surface)); color: var(--cyan); }
.portal__side-foot { margin-top: auto; display: grid; gap: var(--s-3); }
.portal__user { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem; border-radius: var(--r-sm); background: var(--surface-2); }
.portal__user .avi { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.portal__user small { display: block; color: var(--ink-mute); font-size: 0.78rem; }

.portal__main {
  padding: calc(var(--s-6) + var(--safe-top))
           calc(clamp(1rem, 4vw, 3rem) + var(--safe-right))
           calc(var(--s-8) + var(--safe-bottom))
           clamp(1rem, 4vw, 3rem);
  position: relative; overflow: hidden;
}
.portal__pool { width: 720px; height: 720px; top: -260px; right: -200px; position: absolute; }
.portal__topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-7); position: relative; z-index: 1; flex-wrap: wrap; }
.portal__greeting h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.portal__greeting p { color: var(--ink-soft); margin-top: 0.3rem; }
.portal__topbar-actions { display: flex; align-items: center; gap: var(--s-3); }

.portal__menu-toggle { display: none; }

.cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-4); position: relative; z-index: 1; }
/* Tab panels: native [hidden] must win over display:grid */
.cards[hidden] { display: none !important; }
.card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-5);
}
.card--6 { grid-column: span 6; }
.card--4 { grid-column: span 4; }
.card--8 { grid-column: span 8; }
.card--12 { grid-column: span 12; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.card__head h2 { font-size: 1.2rem; }
.card__head .link { font-size: 0.85rem; }
/* .link may be an anchor or a button — neutralise UA button chrome */
button.link { background: transparent; border: 0; padding: 0; color: var(--cyan); font: inherit; font-size: 0.85rem; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--cyan) 45%, transparent); text-underline-offset: 3px; }
button.link:hover { text-decoration-color: var(--cyan); }

/* Upcoming session */
.session-next { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line)); }
.session-next .when { text-align: center; flex: none; padding-right: var(--s-4); border-right: 1px solid var(--line); }
.session-next .when .day { font-family: var(--font-display); font-size: 1.8rem; color: var(--cyan); line-height: 1; }
.session-next .when .mon { font-size: 0.8rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.1em; }
.session-next .info strong { display: block; }
.session-next .info span { color: var(--ink-soft); font-size: 0.9rem; }
.session-list { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-2); }
.session-list li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 0.6rem 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 0.92rem; }
.session-list li:last-child { border-bottom: 0; }
.session-list .tele { color: var(--aqua); font-size: 0.78rem; font-weight: 600; }

/* Therapist chip — the therapist's headshot in the portal "your therapist" area */
.therapist-chip {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-4); padding: var(--s-3);
  border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line);
}
.therapist-chip__photo {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cyan) 45%, var(--line));
  box-shadow: var(--bloom-soft);
}
.therapist-chip__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
body.calm .therapist-chip__photo, body.reduce-glow .therapist-chip__photo { box-shadow: none; }
.therapist-chip__text strong { display: block; font-size: 0.92rem; }
.therapist-chip__text small { color: var(--ink-mute); font-size: 0.8rem; }

/* Goals & progress */
.goal { margin-bottom: var(--s-5); }
.goal:last-child { margin-bottom: 0; }
.goal__top { display: flex; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); }
.goal__top strong { font-weight: 600; font-size: 0.95rem; }
.goal__top span { color: var(--cyan); font-size: 0.85rem; font-weight: 600; }
.bar { height: 10px; border-radius: var(--r-pill); background: var(--surface); overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--aqua), var(--cyan)); }
body.calm .bar > i { background: var(--cyan); }
.goal small { color: var(--ink-mute); font-size: 0.82rem; }

/* Session notes */
.note { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.note:last-child { border-bottom: 0; }
.note__meta { display: flex; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); }
.note__meta time { color: var(--ink-mute); font-size: 0.82rem; }
.note__meta .pill { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); border-radius: var(--r-pill); padding: 0.15rem 0.5rem; }
.note p { color: var(--ink-soft); font-size: 0.93rem; }

/* Playlists / activities — click to play, no autoplay */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.tile {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-3); text-align: left; width: 100%;
  transition: border-color var(--t-fast);
}
.tile:hover { border-color: var(--cyan); }
.tile__play { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--cyan) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); }
.tile__play svg { stroke: var(--cyan); fill: var(--cyan); }
.tile[data-playing="true"] .tile__play { background: var(--cyan); }
.tile[data-playing="true"] .tile__play svg { stroke: var(--base); fill: var(--base); }
.tile__text strong { display: block; font-size: 0.95rem; }
.tile__text small { color: var(--ink-mute); font-size: 0.8rem; }

/* Messages */
.msg-list { list-style: none; padding: 0; display: grid; gap: 0; }
.msg {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
}
.msg:last-child { border-bottom: 0; }
.msg .avi { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.msg__body { flex: 1; }
.msg__body .top { display: flex; align-items: center; gap: 0.5rem; }
.msg__body strong { font-size: 0.95rem; }
.msg__body time { color: var(--ink-mute); font-size: 0.8rem; }
.msg__body p { color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.2rem; }
.msg__unread { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); flex: none; margin-top: 6px; }
.msg[data-read="true"] .msg__unread { background: transparent; border: 1px solid var(--line); }
.msg__markread { background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink-soft); font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.7rem; min-height: 32px; white-space: nowrap; }
.msg__markread:hover { border-color: var(--cyan); color: var(--cyan); }
.msg[data-read="true"] .msg__markread { opacity: 0.4; pointer-events: none; }

/* Billing */
.invoice { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.invoice:last-of-type { border-bottom: 0; }
.invoice .meta strong { display: block; font-size: 0.93rem; }
.invoice .meta small { color: var(--ink-mute); font-size: 0.8rem; }
.invoice .status { font-size: 0.78rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: var(--r-pill); }
.invoice .status.paid { color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); }
.invoice .status.due { color: var(--aqua); border: 1px solid color-mix(in srgb, var(--aqua) 35%, transparent); }

/* Documents */
.doc-list { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.doc { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); text-decoration: none; min-height: 44px; }
.doc:hover { border-color: var(--cyan); }
.doc svg { stroke: var(--aqua); flex: none; }
.doc .name { flex: 1; font-size: 0.92rem; }
.doc small { color: var(--ink-mute); font-size: 0.78rem; }

/* =============================================================
   25. RESPONSIVE
   ============================================================= */
@media (max-width: 980px) {
  .promise__grid, .founder, .teaser__grid, .contact__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .founder__photo { order: -1; }
  .steps, .services, .who { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
  .card--6, .card--4, .card--8 { grid-column: span 12; }
}

@media (max-width: 820px) {
  .portal { grid-template-columns: 1fr; }
  .portal__side {
    position: fixed; inset: 0 auto 0 0; z-index: 300; width: 250px;
    transform: translateX(-100%); transition: transform var(--t-med);
  }
  .portal__side[data-open="true"] { transform: translateX(0); box-shadow: var(--lift); }
  .portal__menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
  .portal__menu-toggle svg { stroke: var(--ink); }
}

/* At/below 1200px: inline nav links collapse into the hamburger menu.
   The desktop action buttons (Client login + Book) get hidden, so they are
   re-surfaced as links INSIDE the dropdown via .nav__links-cta. */
@media (max-width: 1200px) {
  .nav__links { display: none; }
  .nav__links[data-open="true"] {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: calc(72px + var(--safe-top)); left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: var(--s-4) var(--s-4) calc(var(--s-4) + var(--safe-bottom));
    gap: var(--s-2); margin: 0;
    max-height: calc(100dvh - 72px - var(--safe-top) - var(--safe-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    box-shadow: var(--lift);
  }
  .nav__links[data-open="true"] a { padding: 0.6rem 0; width: 100%; }
  .nav__links-cta { display: block; }
  .nav__links-cta:first-of-type {
    margin-top: var(--s-2); padding-top: var(--s-3);
    border-top: 1px solid var(--line);
  }
  .nav__links[data-open="true"] .nav__links-cta a.btn { padding: 0 18px; }
  .nav__toggle { display: inline-flex; order: 3; margin-left: var(--s-2); flex: none; }
  /* keep the hamburger pinned to the far right, after the actions */
  .nav__actions { margin-left: auto; }
  /* desktop action buttons collapse away on mobile (CTAs move into dropdown);
     keep only the Accessibility trigger beside the hamburger */
  .nav__login { display: none; }
  .nav__actions .btn--primary { display: none; }
}

@media (max-width: 560px) {
  .a11y-trigger__label { display: none; }
  .a11y-trigger { padding: 0 12px; }
  /* Compact brand so it fits small phones beside the actions + hamburger */
  .brand { font-size: 1.02rem; }
  .nav { padding: 0 16px; gap: 10px; }
}

@media (max-width: 720px) {
  .steps, .services, .who { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: flex-start; }
}

@media (max-width: 400px) {
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}

/* =============================================================
   26. PHOTOGRAPHY — neon duotone system
   Each content photo lives in a .photo wrapper. Two overlays
   tint it into the cyan/magenta/violet palette so raw stock
   reads as one luminous system. Text over photos gets a scrim.
   ============================================================= */
.photo {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  isolation: isolate; /* keep blend modes local */
}
.photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
}
/* Color-tint layer: maps highlights/shadows toward the palette. */
.photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cyan) 78%, transparent),
    color-mix(in srgb, var(--violet) 55%, transparent) 50%,
    color-mix(in srgb, var(--magenta) 72%, transparent));
  mix-blend-mode: screen;
  opacity: 0.42;
}
/* Dark scrim layer: deepens shadows so the photo sits in deep space. */
.photo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 120% at 30% 0%, transparent 30%, rgba(7,7,15,0.55) 100%);
  mix-blend-mode: multiply;
  opacity: 0.6;
}
/* Stronger duotone for background / warm photos */
.photo--strong::before { opacity: 0.62; }
.photo--strong::after  { opacity: 0.78; }
/* Calm & reduce-glow soften the tint so subjects read more naturally */
body.calm .photo::before, body.reduce-glow .photo::before { opacity: 0.24; mix-blend-mode: screen; }
body.calm .photo::after,  body.reduce-glow .photo::after  { opacity: 0.5; }

/* Scrim behind text laid over a photo — guarantees AA contrast */
.photo__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(0deg, rgba(7,7,15,0.86) 0%, rgba(7,7,15,0.55) 38%, rgba(7,7,15,0.12) 70%, transparent 100%);
}
.photo__scrim--full {
  background: linear-gradient(180deg, rgba(7,7,15,0.62), rgba(7,7,15,0.40) 50%, rgba(7,7,15,0.78));
}
.photo__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: var(--s-5); }

/* Aspect boxes to prevent layout shift */
.ar-square   { aspect-ratio: 1 / 1; }
.ar-portrait { aspect-ratio: 3 / 4; }
.ar-tall     { aspect-ratio: 9 / 16; }
.ar-photo    { aspect-ratio: 4 / 3; }
.ar-wide     { aspect-ratio: 16 / 9; }

/* Service / who cards get a photo strip up top */
.svc__media, .who-card__media, .step__media {
  position: relative; overflow: hidden;
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
}
.svc__media { aspect-ratio: 16 / 10; }
.step__media { aspect-ratio: 16 / 9; }

/* Founder photo — tall portrait (founder.jpg 960x1196) in a defined
   aspect box with object-fit:cover and a tasteful neon frame + glow. */
.founder__figure {
  width: min(360px, 86%); margin-inline: auto;
  position: relative;
}
.founder__figure .founder__img {
  width: 100%;
  aspect-ratio: 4 / 5;            /* image covers it edge-to-edge, masked by the rounded corners */
  border: 0;
  /* Neon edge is an OUTER ring + soft bloom — no inner border/gap line. */
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--cyan) 50%, transparent), var(--bloom-soft);
}
.founder__figure .founder__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* Lighter edge vignette so the founder photo reads bright & frame-filling. */
.founder__figure .founder__img::after { opacity: 0.3; }
body.calm .founder__figure .founder__img, body.reduce-glow .founder__figure .founder__img { box-shadow: 0 0 0 1px var(--line); }
.founder__figure figcaption {
  margin-top: var(--s-3); text-align: center;
  color: var(--ink-mute); font-size: 0.8rem;
}

/* Section divider — full-bleed neon instrument band */
.divider {
  position: relative; height: clamp(160px, 24vw, 280px); overflow: hidden;
  border-block: 1px solid var(--line);
}
.divider .photo { position: absolute; inset: 0; border-radius: 0; }
.divider .photo img { filter: saturate(1.1) contrast(1.06); }

/* Footer credits line */
.footer__credits { margin-top: var(--s-3); color: var(--ink-mute); font-size: 0.8rem; }
.footer__credits a { color: var(--ink-soft); }
.footer__credits a:hover { color: var(--cyan); }

/* =============================================================
   35. REAL-SESSION SECTION BACKGROUND (press-tbt-wheels duotone)
   ============================================================= */
.real-session { position: relative; overflow: hidden; }
.real-session__bg { position: absolute; inset: 0; z-index: 0; border-radius: 0; }
.real-session__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
body.calm .real-session__bg img, body.reduce-glow .real-session__bg img { opacity: 0.6; }
.real-session > .wrap { position: relative; z-index: 1; }
.real-session .section-head p { color: var(--ink); }

/* =============================================================
   36. "SEE A REAL SESSION" — contained PORTRAIT video card
   9:16 video, never stretched, with a cyan neon frame.
   ============================================================= */
.real-video__grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: var(--s-8); align-items: center;
}
.real-video__media {
  width: min(300px, 80%); margin-inline: auto;
  position: relative;
}
.real-video__frame {
  position: relative; width: 100%;
  aspect-ratio: 9 / 16;                 /* contain the portrait video — never stretch */
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface-2);
  /* cyan neon frame: outer ring + soft bloom */
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--cyan) 55%, transparent), var(--bloom);
  isolation: isolate;
}
body.calm .real-video__frame, body.reduce-glow .real-video__frame { box-shadow: 0 0 0 1px var(--line); }
.real-video__frame video,
.real-video__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
/* Poster image sits above the (paused) video until JS starts playback. */
.real-video__poster { z-index: 1; transition: opacity var(--t-med); }
.real-video[data-playing="true"] .real-video__poster { opacity: 0; }
/* Click-to-play control: a big centred Play button while paused; shrinks to a
   small corner Pause control while playing (revealed on hover/focus so it never
   blocks the video). The webm only downloads once this is pressed. */
.real-video__play {
  position: absolute; inset: 0; margin: auto; z-index: 3;
  width: 74px; height: 74px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer; color: #05131A;
  background: color-mix(in srgb, var(--cyan) 90%, transparent);
  box-shadow: var(--bloom), 0 10px 26px -10px rgba(0,0,0,0.55);
  transition: transform var(--t-med), opacity var(--t-med), background var(--t-med);
}
.real-video__play .rv-icon-play { margin-left: 3px; }   /* optically centre the triangle */
.real-video__play .rv-icon-pause { display: none; }
.real-video__play:hover { transform: scale(1.06); }
.real-video__play:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.real-video[data-playing="true"] .real-video__play {
  inset: auto 12px 12px auto; margin: 0; width: 42px; height: 42px; opacity: 0;
  background: color-mix(in srgb, var(--base) 62%, transparent); color: var(--ink);
  box-shadow: 0 2px 12px -2px rgba(0,0,0,0.5); backdrop-filter: blur(6px);
}
.real-video[data-playing="true"] .real-video__frame:hover .real-video__play,
.real-video[data-playing="true"] .real-video__play:focus-visible { opacity: 1; }
.real-video[data-playing="true"] .real-video__play .rv-icon-play { display: none; }
.real-video[data-playing="true"] .real-video__play .rv-icon-pause { display: block; }
/* Keep the neon duotone reading on the video like the rest of the photos */
.real-video__frame::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cyan) 40%, transparent),
    transparent 55%,
    color-mix(in srgb, var(--magenta) 34%, transparent));
  mix-blend-mode: screen; opacity: 0.34;
}
body.calm .real-video__frame::before, body.reduce-glow .real-video__frame::before { opacity: 0.16; }
/* Icon + caption as a centered row, vertically centered against the text even
   when it wraps to two lines (so the icon never floats above the text). */
.real-video__caption {
  margin-top: var(--s-3);
  display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  text-align: center;
  color: var(--ink-mute); font-size: 0.82rem;
}
.real-video__caption svg { stroke: var(--cyan); flex: none; }
@media (max-width: 980px) {
  .real-video__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .real-video__media { order: -1; }
}

/* =============================================================
   27. NEW ACCESSIBILITY MODES (body classes)
   ============================================================= */
/* Readable spacing — dyslexia-friendly letter/word/line spacing */
body.readable {
  --lh-body: 1.9;
  letter-spacing: 0.045em;
  word-spacing: 0.16em;
  line-height: var(--lh-body);
}
body.readable p, body.readable li, body.readable .lede,
body.readable .field label, body.readable .switch-row__text span { line-height: 1.9; }
body.readable h1, body.readable h2, body.readable h3, body.readable h4 { letter-spacing: 0.005em; line-height: 1.3; }

/* Underline links — make every in-content link unmistakably a link */
body.underline-links a:not(.btn):not(.brand):not(.nav__login):not(.calm-toggle):not(.portal__brand):not(.portal__nav):not(.auth__back):not(.doc):not(.tile) {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}

/* High contrast already defined (body.hicontrast) — strengthen photo legibility */
body.hicontrast .photo__scrim { background: linear-gradient(0deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0.25) 75%, transparent 100%); }

/* Pause animations — hard stop for all non-essential motion (toggle) */
body.paused *, body.paused *::before, body.paused *::after {
  animation-play-state: paused !important;
  animation: none !important;
  transition: none !important;
}

/* =============================================================
   28. TOY-LIKE PLAY
   All decorative layers are aria-hidden and sit BEHIND content.
   Every motion respects reduce-motion / paused / calm.
   ============================================================= */

/* Helper: is motion allowed? We gate keyframes behind these guards. */
/* (Used inline per-component below.) */

/* --- Squishy buttons: springy press/hover overshoot --- */
.btn, .switch, .tile, .calm-toggle, .msg__markread, .sensory__reset,
.faq__q, .a11y-trigger {
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow var(--t-med), background var(--t-med),
              border-color var(--t-med), color var(--t-fast);
}
@media (prefers-reduced-motion: no-preference) {
  body:not([data-motion="reduced"]):not(.paused) .btn:hover { transform: translateY(-2px) scale(1.03); }
  body:not([data-motion="reduced"]):not(.paused) .btn:active { transform: translateY(1px) scale(0.97); }
  body:not([data-motion="reduced"]):not(.paused) .tile:active { transform: scale(0.97); }
  body:not([data-motion="reduced"]):not(.paused) .calm-toggle:active,
  body:not([data-motion="reduced"]):not(.paused) .a11y-trigger:active { transform: scale(0.95); }
}

/* --- Jelly hover on cards (gated) --- */
@keyframes jelly {
  0%   { transform: scale(1,1); }
  30%  { transform: scale(1.04, 0.96); }
  55%  { transform: scale(0.98, 1.02); }
  75%  { transform: scale(1.01, 0.99); }
  100% { transform: scale(1,1); }
}
@media (prefers-reduced-motion: no-preference) {
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .svc:hover,
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .who-card:hover {
    animation: jelly 520ms ease;
  }
}

/* --- 3D tilt cards (JS sets --rx / --ry; disabled under reduce/calm) --- */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt[data-tilting="true"] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 80ms ease-out;
}
[data-motion="reduced"] .tilt[data-tilting="true"],
body.calm .tilt[data-tilting="true"],
body.paused .tilt[data-tilting="true"] { transform: none !important; }

/* --- Pointer glow trail / sparkle canvas --- */
.pointer-fx {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: clip;
}

/* --- Hero soundwave / neon equalizer that softly "dances" (<=2Hz, no strobe) --- */
.soundwave {
  display: flex; align-items: flex-end; justify-content: center; gap: 4px;
  height: 34px; margin: var(--s-6) auto 0; max-width: 260px;
}
.soundwave span {
  width: 4px; height: 30%; border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--cyan), var(--aqua));
  transform-origin: bottom;
}
.soundwave span:nth-child(3n) { background: linear-gradient(180deg, var(--magenta), var(--violet)); }
.soundwave span:nth-child(3n+1) { background: linear-gradient(180deg, var(--aqua), var(--cyan)); }
@keyframes wave {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: no-preference) {
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span {
    /* 1.4s cycle ≈ 0.7Hz — gentle, well under 2Hz, never strobing */
    animation: wave 1.4s ease-in-out infinite;
  }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(2)  { animation-delay: -0.18s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(3)  { animation-delay: -0.36s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(4)  { animation-delay: -0.54s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(5)  { animation-delay: -0.72s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(6)  { animation-delay: -0.20s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(7)  { animation-delay: -0.42s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(8)  { animation-delay: -0.60s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(9)  { animation-delay: -0.30s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(10) { animation-delay: -0.50s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(11) { animation-delay: -0.66s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(12) { animation-delay: -0.12s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(13) { animation-delay: -0.38s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(14) { animation-delay: -0.56s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(15) { animation-delay: -0.24s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(16) { animation-delay: -0.46s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(17) { animation-delay: -0.64s; }
  body:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span:nth-child(18) { animation-delay: -0.34s; }
}
/* Calm / reduced / paused: a still, even waveform — no motion */
body.calm .soundwave span { height: 55%; transform: none; opacity: 0.6; }
[data-motion="reduced"] .soundwave span, body.paused .soundwave span { transform: scaleY(0.6); }

/* --- Floating glow orbs in section backgrounds --- */
.orbs { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }
.orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--halo-cyan), transparent 68%);
  filter: blur(6px); opacity: 0.55;
}
.orb--magenta { background: radial-gradient(circle at 38% 34%, var(--halo-magenta), transparent 68%); }
.orb--violet  { background: radial-gradient(circle at 38% 34%, var(--halo-violet), transparent 68%); }
.orb--aqua    { background: radial-gradient(circle at 38% 34%, var(--halo-aqua), transparent 68%); }
@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(14px, -22px); }
  66%      { transform: translate(-12px, 12px); }
}
@media (prefers-reduced-motion: no-preference) {
  body:not([data-motion="reduced"]):not(.paused) .orb {
    animation: drift var(--orb-dur, 22s) ease-in-out infinite;
  }
}
body.calm .orb, body.reduce-glow .orb { filter: none; opacity: 0.32; }

/* --- Scroll reveal --- */
.reveal { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: no-preference) {
  body:not([data-motion="reduced"]):not(.paused) .reveal {
    transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}
.reveal.is-in { opacity: 1; transform: none; }
/* If motion is reduced, never hide content — show instantly */
[data-motion="reduced"] .reveal, body.paused .reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* --- Glow confetti burst --- */
.confetti { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; width: 9px; height: 9px; border-radius: 2px;
  opacity: 0; will-change: transform, opacity;
}
@keyframes confetti-pop {
  0%   { opacity: 1; transform: translate(0,0) scale(0.6) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--cx), var(--cy)) scale(1) rotate(var(--cr)); }
}
@media (prefers-reduced-motion: no-preference) {
  body:not([data-motion="reduced"]):not(.paused) .confetti i {
    animation: confetti-pop 1100ms cubic-bezier(0.18, 0.7, 0.3, 1) forwards;
  }
}

/* =============================================================
   29. HERO GLOWSTICK "CRACK/SNAP" TOY
   A real <button>. Starts dim; on activate it blooms to life.
   Non-motion fallback: instantly lit.
   ============================================================= */
.glowstick-toy {
  position: relative;
  display: block; margin: 0 auto var(--s-2);
  background: transparent; border: 0; padding: 0.6rem;
  border-radius: var(--r-pill); cursor: pointer; line-height: 0;
}
.glowstick-toy:focus-visible { outline: 3px solid var(--aqua); outline-offset: 4px; }
.glowstick-toy .glowsticks { margin: 0; }
/* Dim (un-cracked) state — low light */
.glowstick-toy .glowstick { opacity: 0.34; filter: saturate(0.55) brightness(0.8); transition: opacity 600ms ease, filter 600ms ease; }
.glowstick-toy[data-lit="true"] .glowstick { opacity: 1; filter: none; }
.glowstick-toy .glowstick { box-shadow: none; }
.glowstick-toy[data-lit="true"] .glowstick { box-shadow: 0 0 22px -2px var(--halo-cyan); }
.glowstick-toy__hint {
  display: block; text-align: center; margin-top: 0.4rem;
  font-size: 0.78rem; color: var(--ink-mute); letter-spacing: 0.04em;
}
.glowstick-toy[data-lit="true"] .glowstick-toy__hint { color: var(--cyan); }
/* Calm Mode: the toy is purely decorative — softly pre-lit, non-interactive,
   no crack hint and no surprise glow burst. (JS also early-returns on calm.) */
body.calm .glowstick-toy { pointer-events: none; cursor: default; }
body.calm .glowstick-toy__hint { display: none; }
body.calm .glowstick-toy__bloom { display: none; }
/* Bloom + shake on crack (gated) */
@keyframes crack-shake {
  0% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-3px) rotate(-1.5deg); }
  40% { transform: translateX(3px) rotate(1.5deg); }
  60% { transform: translateX(-2px) rotate(-1deg); }
  80% { transform: translateX(2px) rotate(1deg); }
  100% { transform: translateX(0) rotate(0); }
}
@keyframes bloom-flash {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.4); }
  40% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.6); }
}
.glowstick-toy__bloom {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 360px; height: 360px; border-radius: 50%; pointer-events: none;
  transform: translate(-50%,-50%) scale(0.4); opacity: 0;
  background: radial-gradient(circle, var(--halo-cyan), var(--halo-magenta) 45%, transparent 72%);
}
@media (prefers-reduced-motion: no-preference) {
  body:not([data-motion="reduced"]):not(.paused) .glowstick-toy[data-cracking="true"] .glowsticks { animation: crack-shake 520ms ease; }
  body:not([data-motion="reduced"]):not(.paused) .glowstick-toy[data-cracking="true"] .glowstick-toy__bloom { animation: bloom-flash 720ms ease forwards; }
}

/* Floating glow particles spawned on crack (JS injects <i> children) */
.glow-particles { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1; pointer-events: none; }
.glow-particles i {
  position: absolute; left: 0; top: 0;
  width: 7px; height: 7px; border-radius: 50%;
  opacity: 0; will-change: transform, opacity;
}
@keyframes glow-float {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  25%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  body:not([data-motion="reduced"]):not(.paused) .glow-particles i {
    animation: glow-float var(--pd, 1400ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
}

/* =============================================================
   29b. WHOLE-PAGE "CRACK" CELEBRATION (body.celebrate, ~5s)
   Cracking the hero glow sticks lights up the whole room: headings,
   text & links get a soft glowing text-shadow; buttons get a glowing
   box-shadow / border with a tiny springy scale. Everything PULSES
   slowly (~1.4–1.6s cycle, well under 2Hz — never strobes).
   SENSORY SAFETY: the pulse keyframes are gated behind the SAME
   not(reduced)/not(paused)/not(calm) guards the rest of the site uses.
   When motion is off (OS reduce, in-app Reduce Motion / Pause / Calm),
   .celebrate instead applies a brief STATIC gentle glow — and either
   way JS auto-clears the class after ~5s.
   ============================================================= */

/* Slow, smooth pulses — soft luminous neon, no flashing. */
/* Finite one-shot: fast fade-IN (0->3%), gentle pulses, smooth fade-OUT (82->100%).
   The animation returns to zero glow on its own, so removing .celebrate afterward
   never pops. (transparent zero-shadows interpolate smoothly.) */
@keyframes celebrate-text {
  0%       { text-shadow: 0 0 0 transparent; }
  3%       { text-shadow: 0 0 16px color-mix(in srgb, var(--cyan) 60%, transparent),
                          0 0 28px color-mix(in srgb, var(--aqua) 35%, transparent); }
  22%, 62% { text-shadow: 0 0 8px color-mix(in srgb, var(--cyan) 32%, transparent); }
  42%, 82% { text-shadow: 0 0 16px color-mix(in srgb, var(--cyan) 60%, transparent),
                          0 0 28px color-mix(in srgb, var(--aqua) 35%, transparent); }
  100%     { text-shadow: 0 0 0 transparent; }
}
@keyframes celebrate-link {
  0%       { text-shadow: 0 0 0 transparent; }
  3%       { text-shadow: 0 0 16px color-mix(in srgb, var(--magenta) 60%, transparent),
                          0 0 26px color-mix(in srgb, var(--violet) 35%, transparent); }
  22%, 62% { text-shadow: 0 0 8px color-mix(in srgb, var(--magenta) 32%, transparent); }
  42%, 82% { text-shadow: 0 0 16px color-mix(in srgb, var(--magenta) 60%, transparent),
                          0 0 26px color-mix(in srgb, var(--violet) 35%, transparent); }
  100%     { text-shadow: 0 0 0 transparent; }
}
@keyframes celebrate-btn {
  0%       { box-shadow: 0 0 0 transparent; transform: translateY(0) scale(1); }
  3%       { box-shadow: 0 0 46px -4px var(--halo-cyan), 0 0 22px -6px var(--halo-magenta);
             transform: translateY(-1px) scale(1.022); }
  22%, 62% { box-shadow: 0 0 18px -6px var(--halo-cyan); transform: translateY(0) scale(1); }
  42%, 82% { box-shadow: 0 0 46px -4px var(--halo-cyan), 0 0 22px -6px var(--halo-magenta);
             transform: translateY(-1px) scale(1.022); }
  100%     { box-shadow: 0 0 0 transparent; transform: translateY(0) scale(1); }
}

/* --- Default: STATIC gentle glow (safe baseline for everyone) --- */
body.celebrate h1, body.celebrate h2, body.celebrate h3, body.celebrate h4,
body.celebrate p, body.celebrate .lede, body.celebrate li {
  text-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 30%, transparent);
}
body.celebrate a:not(.btn) {
  text-shadow: 0 0 12px color-mix(in srgb, var(--magenta) 32%, transparent);
}
body.celebrate .btn {
  box-shadow: 0 0 30px -6px var(--halo-cyan), 0 0 16px -6px var(--halo-magenta);
  border-color: color-mix(in srgb, var(--cyan) 55%, transparent);
}

/* --- Motion-OK: upgrade the static glow to a slow, gentle pulse --- */
@media (prefers-reduced-motion: no-preference) {
  body.celebrate:not([data-motion="reduced"]):not(.paused):not(.calm) h1,
  body.celebrate:not([data-motion="reduced"]):not(.paused):not(.calm) h2,
  body.celebrate:not([data-motion="reduced"]):not(.paused):not(.calm) h3,
  body.celebrate:not([data-motion="reduced"]):not(.paused):not(.calm) h4,
  body.celebrate:not([data-motion="reduced"]):not(.paused):not(.calm) p,
  body.celebrate:not([data-motion="reduced"]):not(.paused):not(.calm) .lede,
  body.celebrate:not([data-motion="reduced"]):not(.paused):not(.calm) li {
    animation: celebrate-text 4.8s ease-in-out forwards;
  }
  body.celebrate:not([data-motion="reduced"]):not(.paused):not(.calm) a:not(.btn) {
    animation: celebrate-link 4.8s ease-in-out forwards;
  }
  body.celebrate:not([data-motion="reduced"]):not(.paused):not(.calm) .btn {
    animation: celebrate-btn 4.8s ease-in-out forwards;
  }
  /* Existing neon accents intensify a touch during the celebration */
  body.celebrate:not([data-motion="reduced"]):not(.paused):not(.calm) .soundwave span {
    box-shadow: 0 0 12px -2px var(--halo-cyan);
  }
  body.celebrate:not([data-motion="reduced"]):not(.paused):not(.calm) .orb {
    opacity: 0.78;
  }
}

/* =============================================================
   30. ACCESSIBILITY CENTER additions (panel grows; live region)
   ============================================================= */
.a11y-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; line-height: 1;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); height: 44px; padding: 0 16px;
  color: var(--ink-soft); font-size: 14px; font-weight: 600;
}
.a11y-trigger:hover { border-color: var(--cyan); color: var(--ink); }
.a11y-trigger svg { stroke: var(--cyan); flex: none; }
.sr-live {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.sensory__group-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute); margin: var(--s-4) 0 0;
}

/* Keep the dialog itself stable while Larger Text / Readable Spacing are ON:
   the page text grows, but the control panel stays compact & fully scrollable
   so no option is ever pushed out of reach or made unusable. */
body.bigtext .sensory, body.readable .sensory { font-size: 1rem; }
body.bigtext .sensory .switch-row__text strong,
body.readable .sensory .switch-row__text strong { font-size: 0.975rem; }
body.bigtext .sensory .switch-row__text span,
body.readable .sensory .switch-row__text span { font-size: 0.82rem; line-height: 1.45; }
body.readable .sensory { letter-spacing: normal; word-spacing: normal; }
body.readable .sensory p, body.readable .sensory .switch-row__text span { line-height: 1.45; }

/* =============================================================
   31. PORTAL TOY additions — progress rings, badges, equalizer
   ============================================================= */
/* Progress ring */
.ring { --p: 0; width: 84px; height: 84px; flex: none; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { stroke: var(--surface); }
.ring__fill {
  stroke: var(--cyan); stroke-linecap: round;
  stroke-dasharray: var(--circ); stroke-dashoffset: var(--circ);
  transition: stroke-dashoffset 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ring.is-in .ring__fill { stroke-dashoffset: calc(var(--circ) - (var(--circ) * var(--p)) / 100); }
[data-motion="reduced"] .ring__fill, body.paused .ring__fill { transition: none; }
.ring__num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink);
}
.ring-row { display: flex; align-items: center; gap: var(--s-4); }

/* Animated bar fill on reveal (goals) */
.bar > i { transition: width 1100ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-motion="reduced"] .bar > i, body.paused .bar > i { transition: none; }

/* Badge pop-in */
.badges { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.8rem; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cyan) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent);
  font-size: 0.82rem; font-weight: 600; color: var(--ink);
}
.badge svg { stroke: var(--cyan); flex: none; }
.badge--violet { background: color-mix(in srgb, var(--violet) 12%, var(--surface)); border-color: color-mix(in srgb, var(--violet) 35%, transparent); }
.badge--violet svg { stroke: var(--violet); }
.badge--magenta { background: color-mix(in srgb, var(--magenta) 12%, var(--surface)); border-color: color-mix(in srgb, var(--magenta) 35%, transparent); }
.badge--magenta svg { stroke: var(--magenta); }
@keyframes badge-pop {
  /* Scale-only pop — opacity stays 1 so the label never dips below AA contrast
     mid-animation (axe flags the transient otherwise). */
  0% { transform: scale(0.6); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  body:not([data-motion="reduced"]):not(.paused) .badge.is-in { animation: badge-pop 460ms cubic-bezier(0.34,1.56,0.64,1) backwards; }
}

/* Equalizer / visualizer on playing tiles */
.tile__eq { display: none; align-items: flex-end; gap: 2px; height: 18px; margin-left: auto; padding-right: 0.4rem; }
.tile[data-playing="true"] .tile__eq { display: inline-flex; }
.tile__eq span {
  width: 3px; height: 30%; border-radius: 2px; background: var(--cyan);
  transform-origin: bottom;
}
@keyframes eq {
  0%, 100% { height: 28%; }
  50% { height: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  body:not([data-motion="reduced"]):not(.paused) .tile[data-playing="true"] .tile__eq span { animation: eq 700ms ease-in-out infinite; }
  body:not([data-motion="reduced"]):not(.paused) .tile[data-playing="true"] .tile__eq span:nth-child(2) { animation-delay: -0.45s; }
  body:not([data-motion="reduced"]):not(.paused) .tile[data-playing="true"] .tile__eq span:nth-child(3) { animation-delay: -0.2s; }
  body:not([data-motion="reduced"]):not(.paused) .tile[data-playing="true"] .tile__eq span:nth-child(4) { animation-delay: -0.6s; }
  body:not([data-motion="reduced"]):not(.paused) .tile[data-playing="true"] .tile__eq span:nth-child(5) { animation-delay: -0.32s; }
}
/* Static bars when motion off (still shows "playing" state, no animation) */
[data-motion="reduced"] .tile[data-playing="true"] .tile__eq span,
body.paused .tile[data-playing="true"] .tile__eq span { height: 60%; }

/* Goal-complete celebration row */
.goal.is-complete .goal__top span { color: var(--lime); }
.goal__check { display: inline-flex; vertical-align: middle; margin-left: 0.3rem; }
.goal__check svg { stroke: var(--lime); }

/* =============================================================
   32. FORCED COLORS (Windows High Contrast) — keep usable
   ============================================================= */
@media (forced-colors: active) {
  .photo::before, .photo::after, .orb, .pool, .hero::before,
  .glowstick-toy__bloom, .confetti, .pointer-fx { display: none !important; }
  .btn, .switch, .faq__item, .card, .svc, .who-card, .step, .form-card,
  .tile, .doc, .a11y-trigger, .calm-toggle, .sensory {
    border: 1px solid CanvasText !important;
  }
  :focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px; }
  .switch[aria-checked="true"] { background: Highlight !important; }
  .switch::after { background: CanvasText !important; }
  .bar > i, .ring__fill { forced-color-adjust: none; }
}

/* =============================================================
   33. PREFERS-CONTRAST: more
   ============================================================= */
@media (prefers-contrast: more) {
  :root { --ink: #FFFFFF; --ink-soft: #E6E7F2; --ink-mute: #CDCEDD; --line: #4A4D63; }
  .photo::before { opacity: 0.3; }
  .photo__scrim { background: linear-gradient(0deg, rgba(0,0,0,0.92), rgba(0,0,0,0.6) 50%, transparent); }
}

/* Reveal/tilt media: portrait image inside who-cards & svc keep crop stable */
.svc__media img, .who-card__media img, .step__media img, .divider img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================================
   35. NEW-CLIENT INTAKE PAGE  (intake.html)
   ============================================================= */
.intake { position: relative; padding-block: clamp(32px, 6vw, 72px); overflow: hidden; }
.intake__wrap { position: relative; z-index: 1; max-width: 860px; }
.intake .pool { top: -120px; left: -160px; opacity: 0.5; }
.intake__back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; margin-bottom: var(--s-5); }
.intake__back svg { stroke: var(--cyan); }
.intake__head { max-width: 62ch; margin-bottom: var(--s-7); }
.intake__head h1 { margin: var(--s-3) 0 var(--s-4); }
.intake__head p { color: var(--ink-soft); }

/* Reuse .form-card for the surface; fieldsets become titled sections. */
.intake__form .field-row { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.intake__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.intake__group + .intake__group { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
/* Last section's fields shouldn't sit flush against the consent/submit divider. */
.intake__group:last-of-type { padding-bottom: var(--s-5); }
.intake__group > legend {
  display: block; width: 100%; padding: 0; margin-bottom: var(--s-3);
  font-family: 'Sora', system-ui, sans-serif; font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height: 1.25;
}
.intake__group > legend span { display: block; font-family: inherit; font-size: 0.85rem; font-weight: 400; color: var(--ink-mute); margin-top: 0.3rem; }

.field__label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: var(--s-2); color: var(--ink); }
.field__label .hint-inline, .hint-inline { font-weight: 400; color: var(--ink-mute); }

/* align-items:start keeps each card its own content height (no stretch), so the
   box lines up with the first line of the label instead of floating. */
/* Every box is the same size: columns share the width equally (1fr) and
   grid-auto-rows:1fr makes all rows as tall as the tallest box's content, so
   short options fill their whitespace instead of looking ragged. */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-2); align-items: stretch; grid-auto-rows: 1fr; }
.choice-grid--inline { grid-template-columns: repeat(auto-fit, minmax(96px, max-content)); grid-auto-rows: auto; }
/* NB: `.field label { display:block }` (higher specificity) otherwise clobbers a
   plain `.choice` — hence the `.choice-grid .choice` layout rule below. */
.choice {
  padding: 0.6rem 0.85rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink-soft); font-size: 0.9rem; font-weight: 500; line-height: 1.35; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.choice-grid .choice {
  display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 0.55rem; margin: 0;
}
.choice:hover { border-color: color-mix(in srgb, var(--cyan) 55%, var(--line)); }
.choice:has(input:checked) { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, var(--surface-2)); color: var(--ink); }
.choice:focus-within { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Dimmed when the group has hit its selection cap (e.g. instruments: pick 1–3). */
.choice:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.choice:has(input:disabled):hover { border-color: var(--line); }
/* Reset the `.field input` box styling (min-height:44px, padding, border) off
   the checkbox itself, then nudge it to align with the first text line. */
.choice input { width: 17px; height: 17px; min-height: 0; padding: 0; border: 0; accent-color: var(--cyan); flex: none; margin: 0; margin-top: 2px; }

/* Any checkbox row inside an intake form: box aligned to the first line of the
   label (label.checkbox-row beats `.field label { display:block }`). */
.intake__form label.checkbox-row { display: flex; align-items: flex-start; font-weight: 400; }
.intake__form .checkbox-row input { width: 17px; height: 17px; min-height: 0; padding: 0; border: 0; margin: 0; margin-top: 2px; flex: none; accent-color: var(--cyan); }

/* Read-only policy / notice blocks inside intake forms. */
.intake__notice { border-left: 3px solid color-mix(in srgb, var(--cyan) 45%, var(--line)); background: var(--surface-2); border-radius: var(--r-md); padding: 0.9rem 1.1rem; margin-bottom: var(--s-4); font-size: 1rem; color: var(--ink-soft); line-height: 1.6; }
.intake__notice p { margin: 0 0 0.7rem; white-space: pre-line; }
.intake__notice p:last-child { margin-bottom: 0; }
/* Free-text box revealed when a select's "Other" option is chosen. */
.other-input { margin-top: var(--s-2); }
.choice-grid--stack { grid-template-columns: 1fr; grid-auto-rows: auto; }

.intake__consent { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.intake__consent .checkbox-row { align-items: flex-start; margin: 0; }
.intake__consent .checkbox-row input { margin-top: 2px; flex: none; }
.intake__form .form-note a { color: var(--cyan-ink); font-weight: 600; }
.intake__form > .btn { margin-top: var(--s-6); }

/* "?" help dot next to a field label + its inline help note. */
.help-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.2rem; height: 1.2rem; padding: 0; margin-left: 0.4rem;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--cyan-ink);
  font-family: inherit; font-size: 0.72rem; font-weight: 700; line-height: 1;
  cursor: pointer; vertical-align: text-bottom;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.help-dot:hover, .help-dot[aria-expanded="true"] { border-color: var(--cyan-ink); }
.field__help {
  margin: 0.45rem 0 0; padding: 0.65rem 0.85rem;
  border-left: 3px solid color-mix(in srgb, var(--cyan) 45%, var(--line));
  background: var(--surface-2); border-radius: var(--r-md);
  color: var(--ink-soft); font-size: 0.85rem; line-height: 1.55; font-weight: 400;
}

/* Embedded card setup on the intake form (Stripe Payment Element). */
.pay-embed { margin-top: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); padding: 1.1rem 1.2rem; }
.pay-embed__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.35rem; }
.pay-embed__head strong { color: var(--ink); font-size: 1rem; }
.pay-embed__lock { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink-mute); font-size: 0.78rem; white-space: nowrap; }
.pay-embed__note { margin: 0 0 0.9rem; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; }
.pay-embed__mount { min-height: 88px; }
.pay-embed__loading { margin: 0.5rem 0; color: var(--ink-mute); font-size: 0.85rem; }
.pay-embed__done { margin: 0.5rem 0; color: var(--cyan-ink); font-size: 0.92rem; font-weight: 600; }
.pay-embed__autopay { margin: 0.9rem 0 0; }
.pay-embed__legal { margin: 0.8rem 0 0; color: var(--ink-mute); font-size: 0.78rem; line-height: 1.55; }
.pay-embed__error { margin: 0.7rem 0 0; color: #e05a6d; font-size: 0.88rem; font-weight: 600; }
/* The global readable-measure cap (p { max-width: --measure }) makes prose
   wrap short of the box edge here, which reads as a broken layout next to
   full-width inputs — let the payment box's paragraphs use the full width. */
.pay-embed p, .intake__notice p { max-width: none; }
/* #e05a6d is fine on the dark theme but only ~3.3:1 on light surfaces. */
body.light .pay-embed__error { color: #b23a4d; }
.pay-embed__skip {
  margin: 0.6rem 0 0; padding: 0.45rem 0.9rem; font: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.pay-embed__skip:hover, .pay-embed__skip:focus-visible { border-color: var(--cyan-ink); color: var(--cyan-ink); }

/* Draft autosave note (glowFormDraft in app.js) */
.draft-note {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0 0 1.2rem; padding: 0.65rem 0.9rem;
  background: color-mix(in srgb, var(--cyan-ink) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan-ink) 35%, transparent);
  border-radius: 12px; color: var(--ink); font-size: 0.9rem;
}
.draft-note__reset {
  padding: 0.25rem 0.7rem; font: inherit; font-size: 0.82rem; font-weight: 600;
  color: var(--ink); background: transparent; border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer;
}
.draft-note__reset:hover, .draft-note__reset:focus-visible { border-color: var(--cyan-ink); color: var(--cyan-ink); }

/* Calm / high-contrast keep the choice chips legible. */
body.calm .choice:has(input:checked), body.hicontrast .choice:has(input:checked) { background: var(--surface-2); border-color: var(--cyan-ink); }

/* =============================================================
   36. BACK-TO-TOP — floating button injected by app.js.
   Below the accessibility modal (scrim z-400) but above content.
   ============================================================= */
.to-top {
  position: fixed;
  right: calc(clamp(16px, 3vw, 28px) + var(--safe-right));
  bottom: calc(clamp(16px, 3vw, 28px) + var(--safe-bottom));
  z-index: 300;
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  color: var(--ink); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--lift), var(--bloom-soft);
  opacity: 0; transform: translateY(12px) scale(0.92); pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med), background var(--t-med), border-color var(--t-med), color var(--t-med);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: var(--cyan); color: var(--cyan); }
.to-top:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.to-top:active { transform: scale(0.94); }
/* Honour reduced motion / Pause: fade only, no slide/scale. */
html[data-motion="reduced"] .to-top, body.paused .to-top {
  transform: none !important; transition: opacity var(--t-med);
}

/* =============================================================
   37. FOUNDER CREDENTIALS — credential cards (MT-BC, NICU-MT, M.S.)
   ============================================================= */
.founder__creds { margin-top: var(--s-5); }
.founder__creds-label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--s-3);
}
.creds { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.cred {
  position: relative;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
  transition: border-color var(--t-med);
}
.cred[tabindex] { cursor: help; }
.cred[tabindex]:hover { border-color: color-mix(in srgb, var(--cyan) 45%, var(--line)); }
.cred[tabindex]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Hover / focus description popover (also the aria-describedby target). */
.cred__desc {
  position: absolute; left: 4px; right: 4px; bottom: calc(100% + 8px);
  background: var(--surface); color: var(--ink); font-weight: 400;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 0.7rem 0.9rem; font-size: 0.85rem; line-height: 1.45;
  box-shadow: var(--lift);
  opacity: 0; transform: translateY(5px); pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med);
  z-index: 30;
}
.cred:hover .cred__desc, .cred:focus-within .cred__desc { opacity: 1; transform: none; }
/* Verification popout (opens the registry / credential search in a new tab). */
.cred__popout {
  flex: none; margin-left: auto; align-self: center;
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  color: var(--cyan-ink); border: 1px solid transparent;
  transition: background var(--t-med), border-color var(--t-med), color var(--t-med);
}
.cred__popout svg { stroke: currentColor; }
.cred__popout:hover { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); border-color: color-mix(in srgb, var(--cyan) 35%, transparent); }
.cred__popout:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
html[data-motion="reduced"] .cred__desc, body.paused .cred__desc { transition: opacity var(--t-fast); transform: none !important; }
.cred__mark, .cred__logo {
  flex: none; display: inline-grid; place-items: center;
  width: 84px; height: 44px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--cyan) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cyan) 38%, transparent);
}
.cred__mark {
  padding: 0 6px;
  color: var(--ink); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.01em;
}
/* Logo sits inside the same box with comfortable padding all round. */
.cred__logo { padding: 0 11px; }
.cred__logo img { width: 100%; height: auto; max-height: 13px; display: block; }
/* NSU wordmark is navy — reads on light surfaces; reverse it to white on dark. */
body:not(.light) .cred__logo img { filter: brightness(0) invert(1); }
.cred__text strong { display: block; font-size: 0.95rem; line-height: 1.25; color: var(--ink); }
.cred__text span { display: block; font-size: 0.8rem; color: var(--ink-mute); margin-top: 1px; }
.cred__seal { flex: none; margin-left: auto; align-self: center; display: inline-grid; place-items: center; width: 36px; height: 36px; stroke: var(--cyan); }
@media (max-width: 420px) {
  .cred { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* =============================================================
   POLISH LAYER — appended refinements (visual bump, no rewrite).
   Everything is var-driven (dark/light/calm/hi-contrast adapt),
   paint-cheap (no new layers, filters, or layout changes), and
   additive: background-image / outline / accent rules compose
   with the base styles instead of replacing them.
   ============================================================= */

/* Native UI matches the theme: dark scrollbars, dark date-pickers,
   dark select dropdowns — no more white UA chrome on a night sky. */
:root { color-scheme: dark; }
body.light { color-scheme: light; }
html { scrollbar-color: var(--line) transparent; }

/* Text selection glows like the brand, not browser blue. */
::selection { background: color-mix(in srgb, var(--cyan) 32%, transparent); color: var(--ink); }

/* Typography niceties: headings never rag into orphans, prose avoids
   single-word last lines. Zero cost, progressive enhancement. */
h1, h2, h3, .section-head p { text-wrap: balance; }
p, .lede, .faq__a-inner { text-wrap: pretty; }

/* Anchor jumps: clear the sticky nav and glide only for people who
   haven't asked for reduced motion. */
[id] { scroll-margin-top: calc(96px + var(--safe-top)); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Focus is always visible — zero-specificity fallback that fills any
   gap without overriding the existing, more specific focus styles. */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Buttons: a real pressed state, a real disabled state, a clear ring. */
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed;
  transform: none; box-shadow: none;
}

/* Cards catch a whisper of light along their top edge — depth without
   shadows or extra layers (background-image composes with the existing
   background color; invisible on the light theme by design). */
.card, .svc, .cred, .faq__item, .form-card, .intake__group {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 120px);
}

/* Forms: hover affordance before focus, brand caret, and native
   checks/radios/date-pickers in brand cyan everywhere (the intake is
   full of them — no more UA blue). */
.field input, .field select, .field textarea { caret-color: var(--cyan); }
.field input:hover:not(:focus), .field select:hover:not(:focus), .field textarea:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--cyan) 30%, var(--line));
}
input, select, textarea { accent-color: var(--cyan); }
.choice { transition: border-color var(--t-fast), background var(--t-fast); }
.choice:hover { border-color: color-mix(in srgb, var(--cyan) 35%, var(--line)); }

/* Autofill no longer torches dark inputs with UA yellow/white. */
.field input:-webkit-autofill,
.field select:-webkit-autofill,
.field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  caret-color: var(--ink);
  transition: background-color 999999s ease-out;
}

/* Footer links ease into their hover instead of snapping. */
.footer a { transition: color var(--t-fast), text-decoration-color var(--t-fast); }
.footer a:hover { color: var(--cyan); }