/* ============================================================
   NURSE MOVES — Official Website Design System
   "The site breathes through a nurse's day."
   Dawn → Daylight → Golden hour → Night sanctuary → Dawn.
   Palette drawn directly from the NurseMoves app theme system.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Brand core (from app src/theme.ts) */
  --navy-deep: #1B2647;
  --navy-rich: #2A3A6E;
  --navy-ink: #16213e;
  --gold: #D4A843;
  --gold-soft: #E8C672;
  --gold-pale: #F6E7C4;
  --coral: #E7856A;
  --coral-light: #F2A185;

  /* Morning theme (app) */
  --blue: #4A6FA5;
  --blue-light: #8EAED4;
  --blue-wash: #EAF1F8;
  --blue-mist: #F5F7FA;

  /* Lavender (app night theme, softened) */
  --lavender: #9B7FE8;
  --lavender-soft: #B8A1F2;
  --lavender-wash: #EFECFA;

  /* Sanctuary / night (app Mindfulness theme) */
  --night: #0C1E24;
  --night-alt: #0F2932;
  --night-card: rgba(22, 46, 55, 0.92);
  --teal: #2D9B96;
  --teal-light: #55C2BD;
  --firefly: #E8B562;

  /* Feature accents (verbatim from app featureThemes.ts) */
  --f-mindfulness: #2D9B96;
  --f-subtle: #E7856A;
  --f-energize: #5A8B6C;
  --f-podcast: #5FA8D3;
  --f-intel: #4A6FA5;
  --f-roam: #E7856A;
  --f-tunes: #9B7FE8;
  --f-lounge: #4A6FA5;

  /* Status bands (app burnout hub) */
  --band-stable: #5A8B6C;
  --band-support: #B07A2E;
  --band-priority: #B85A3E;
  --green: #2FB47A;

  /* Neutrals */
  --white: #FFFFFF;
  --warm-white: #FAFAF7;
  --warm-white-alt: #F5F4F0;
  --text-dark: #222B45;
  --text-body: #4E5872;
  --text-muted: #8E94A8;
  --hairline: rgba(27, 38, 71, 0.08);

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Poppins", -apple-system, sans-serif;
  --font-body: "Nunito Sans", -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --r-sm: 0.75rem;
  --r-md: 1.125rem;
  --r-lg: 1.625rem;
  --r-xl: 2.25rem;
  --shadow-soft: 0 0.625rem 2.5rem -0.75rem rgba(27, 38, 71, 0.14);
  --shadow-lift: 0 1.5rem 4.375rem -1.25rem rgba(27, 38, 71, 0.25);
  --shadow-glow-gold: 0 0.75rem 2.75rem -0.625rem rgba(212, 168, 67, 0.55);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --section-pad: clamp(3.5rem, 7vw, 5.75rem);

  /* Theme-dependent chrome (morning = baseline; evening/night re-map below) */
  --ink-on-gold: #1B2647;             /* constant: text on gold buttons */
  --nav-bg: rgba(250, 250, 247, 0.82);
  --menu-bg: rgba(250, 250, 247, 0.97);
  --chip-bg: rgba(255, 255, 255, 0.88);
  --chip-edge: rgba(255, 255, 255, 0.9);
  --hero-bg:
    radial-gradient(68.75rem 32.5rem at 82% 112%, rgba(232, 198, 114, 0.4), transparent 64%),
    radial-gradient(56.25rem 30rem at -8% -12%, rgba(155, 127, 232, 0.16), transparent 60%),
    linear-gradient(178deg, #F2F0FA 0%, #EFF3FA 32%, #F7F4EC 72%, #FBF1DC 100%);
  --pagehero-bg:
    radial-gradient(56.25rem 26.25rem at 88% 116%, rgba(232, 198, 114, 0.32), transparent 64%),
    radial-gradient(43.75rem 25rem at -6% -16%, rgba(155, 127, 232, 0.15), transparent 60%),
    linear-gradient(178deg, #F2F0FA, #F5F4EE 70%, #FAF6E9);
  --finalcta-bg:
    radial-gradient(50rem 26.25rem at 50% 118%, rgba(232, 198, 114, 0.55), transparent 65%),
    radial-gradient(43.75rem 23.75rem at 8% -10%, rgba(155, 127, 232, 0.16), transparent 60%),
    linear-gradient(180deg, #F2F0FA, #F7F1E2);
  --sun-core: rgba(244, 197, 107, 0.55);
  --sun-halo: rgba(232, 198, 114, 0.22);
}

/* ---------- Evening: golden hour ---------- */
[data-theme="evening"] {
  --warm-white: #FBF5EB;
  --warm-white-alt: #F6ECDC;
  --blue-mist: #F8F2E8;
  --blue-wash: #F3E7D2;
  --lavender-wash: #F1E7E9;
  --nav-bg: rgba(251, 245, 235, 0.82);
  --menu-bg: rgba(251, 245, 235, 0.97);
  --hero-bg:
    radial-gradient(68.75rem 32.5rem at 78% 110%, rgba(231, 133, 106, 0.34), transparent 64%),
    radial-gradient(56.25rem 30rem at -8% -12%, rgba(155, 127, 232, 0.22), transparent 60%),
    linear-gradient(178deg, #EFE6F2 0%, #F6EBDC 40%, #F9E5C8 76%, #F6D9B0 100%);
  --pagehero-bg:
    radial-gradient(56.25rem 26.25rem at 88% 116%, rgba(231, 133, 106, 0.28), transparent 64%),
    radial-gradient(43.75rem 25rem at -6% -16%, rgba(155, 127, 232, 0.18), transparent 60%),
    linear-gradient(178deg, #F1E8F0, #F7EBD9 70%, #F8E0BE);
  --finalcta-bg:
    radial-gradient(50rem 26.25rem at 50% 118%, rgba(231, 133, 106, 0.4), transparent 65%),
    radial-gradient(43.75rem 23.75rem at 8% -10%, rgba(155, 127, 232, 0.2), transparent 60%),
    linear-gradient(180deg, #F1E8F0, #F8E3C2);
  --sun-core: rgba(242, 161, 133, 0.6);
  --sun-halo: rgba(244, 197, 107, 0.3);
}

/* ---------- Night: the sanctuary takes over ---------- */
[data-theme="night"] {
  --warm-white: #0B1322;
  --warm-white-alt: #0E1A30;
  --white: #131F38;
  --text-dark: #E9EDF6;
  --navy-deep: #E9EDF6;
  --navy-rich: #C9D4EA;
  --text-body: rgba(233, 237, 246, 0.78);
  --text-muted: rgba(233, 237, 246, 0.55);
  --hairline: rgba(170, 190, 235, 0.12);
  --blue-mist: #0F1B33;
  --blue-wash: rgba(95, 140, 205, 0.14);
  --lavender-wash: rgba(155, 127, 232, 0.12);
  --nav-bg: rgba(11, 19, 34, 0.78);
  --menu-bg: rgba(11, 19, 34, 0.97);
  --chip-bg: rgba(19, 31, 56, 0.88);
  --chip-edge: rgba(170, 190, 235, 0.22);
  --hero-bg:
    radial-gradient(68.75rem 32.5rem at 82% 118%, rgba(45, 155, 150, 0.2), transparent 64%),
    radial-gradient(56.25rem 30rem at -8% -12%, rgba(108, 99, 255, 0.16), transparent 60%),
    linear-gradient(178deg, #0A1020 0%, #0C1626 45%, #0D1E2E 78%, #0C2430 100%);
  --pagehero-bg:
    radial-gradient(56.25rem 26.25rem at 88% 116%, rgba(45, 155, 150, 0.18), transparent 64%),
    radial-gradient(43.75rem 25rem at -6% -16%, rgba(108, 99, 255, 0.14), transparent 60%),
    linear-gradient(178deg, #0A1020, #0C1626 70%, #0D2030);
  --finalcta-bg:
    radial-gradient(50rem 26.25rem at 50% 118%, rgba(232, 181, 98, 0.18), transparent 65%),
    radial-gradient(43.75rem 23.75rem at 8% -10%, rgba(108, 99, 255, 0.14), transparent 60%),
    linear-gradient(180deg, #0A1020, #0E1B2C);
  --sun-core: rgba(214, 224, 255, 0.2);
  --sun-halo: rgba(85, 194, 189, 0.12);
}

/* Soft cross-fade when the theme changes */
html.theme-anim body,
html.theme-anim body * { transition: background 0.7s ease, background-color 0.7s ease, color 0.7s ease, border-color 0.7s ease, box-shadow 0.7s ease !important; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* Fluid root: the entire design (type, icons, cards, container — all rem)
     scales with the screen. ≈16px at 1366w, ≈17px at 1536w, ≈19px at 1920w. */
  font-size: clamp(15.5px, 0.54vw + 8.6px, 21px);
}
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-body);
  background: var(--warm-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; }
::selection { background: var(--gold-pale); color: #1B2647; }

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

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 580; color: var(--navy-deep); line-height: 1.12; letter-spacing: -0.015em; }
.display-xl { font-size: clamp(2.4rem, 4.8vw, 3.9rem); }
.display-lg { font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.08; }
.display-md { font-size: clamp(1.9rem, 3.7vw, 2.85rem); line-height: 1.1; }
.display-sm { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.accent-italic { font-style: italic; font-weight: 480; color: var(--gold); }
.accent-italic.on-light { color: #B8902F; }

.kicker {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.kicker::before { content: ""; width: 1.625rem; height: 0.125rem; border-radius: 0.125rem; background: var(--gold); }
.kicker.centered::after { content: ""; width: 1.625rem; height: 0.125rem; border-radius: 0.125rem; background: var(--gold); }

.lead { font-size: clamp(1rem, 1.3vw, 1.13rem); line-height: 1.7; color: var(--text-body); }
/* Lead copy always gets breathing room under a display heading, including headings
   that live outside .section-head (the global reset zeroes margins, which collapsed
   these pairs to ~0 in the Breathe, About and Partnerships blocks). Margins collapse,
   so this never doubles up where .section-head h2 already sets margin-bottom. */
.display-xl + .lead, .display-lg + .lead, .display-md + .lead { margin-top: 1.125rem; }
.text-soft { color: var(--text-muted); }

/* ---------- Layout ---------- */
.container { width: min(80rem, 94vw); margin-inline: auto; }
.container-narrow { width: min(56rem, 92vw); margin-inline: auto; }
section { position: relative; }
.section-pad { padding-block: var(--section-pad); }
.section-head { max-width: 47.5rem; margin-bottom: clamp(1.875rem, 4.2vw, 3rem); }
.section-head.centered { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: 1.125rem; margin-bottom: 1.125rem; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;
  padding: 0.9375rem 1.875rem;
  border-radius: 6.25rem;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring), background 0.3s;
  white-space: nowrap;
}
.btn svg { width: 1.0625rem; height: 1.0625rem; flex: none; transition: transform 0.3s var(--ease-spring); }
.btn:hover svg { transform: translateX(0.25rem); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 60%, #C09534);
  color: var(--ink-on-gold);
  box-shadow: var(--shadow-glow-gold);
}
.btn-gold:hover { transform: translateY(-0.1875rem); box-shadow: 0 1.125rem 3.375rem -0.625rem rgba(212, 168, 67, 0.7); }
.btn-navy { background: var(--navy-deep); color: var(--white); box-shadow: 0 0.75rem 2.5rem -0.75rem rgba(27, 38, 71, 0.5); }
.btn-navy:hover { transform: translateY(-0.1875rem); background: var(--navy-rich); }
.btn-ghost { color: var(--navy-deep); border: 0.0938rem solid rgba(27, 38, 71, 0.22); background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(0.375rem); }
.btn-ghost:hover { transform: translateY(-0.1875rem); border-color: var(--gold); color: #9a7a25; background: var(--white); }
.btn-ghost.on-dark { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.07); }
.btn-ghost.on-dark:hover { border-color: var(--gold-soft); color: var(--gold-soft); background: rgba(255, 255, 255, 0.1); }
.btn-white { background: var(--white); color: var(--navy-deep); box-shadow: 0 0.875rem 2.75rem -0.875rem rgba(12, 30, 36, 0.55); }
.btn-white:hover { transform: translateY(-0.1875rem); }
.btn-lg { padding: 1.125rem 2.375rem; font-size: 1.02rem; }
.btn-sm { padding: 0.6875rem 1.375rem; font-size: 0.86rem; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  /* Must sit ABOVE .mobile-menu (z-index 105): .nav is a stacking context, so the
     burger's own z-index is trapped inside it — at 100 the open menu painted over
     the close (X) button and hid it completely. */
  z-index: 110;
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
  padding-block: 1.125rem;
}
/* While the mobile menu is open, drop the nav's own frosted background so it
   doesn't band across the top of the overlay — only the logo and X remain. */
.nav:has(.nav-burger.open) {
  background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nav.scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(1.125rem) saturate(1.4);
  -webkit-backdrop-filter: blur(1.125rem) saturate(1.4);
  box-shadow: 0 0.0625rem 0 var(--hairline), 0 0.875rem 2.5rem -1.375rem rgba(27, 38, 71, 0.25);
  padding-block: 0.625rem;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav-logo { display: flex; align-items: center; gap: 0.6875rem; }
.nav-logo img { width: 2.875rem; height: 2.875rem; border-radius: 0.8125rem; mix-blend-mode: multiply; }
.nav-logo-text { font-family: var(--font-ui); line-height: 1.15; }
.nav-logo-text strong { display: block; font-size: 1.02rem; font-weight: 700; color: var(--navy-deep); letter-spacing: 0.01em; white-space: nowrap; }
.nav-logo-text span { display: block; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.nav-links { display: flex; align-items: center; gap: 0.25rem; }
.nav-links a {
  font-family: var(--font-ui); font-size: 0.88rem; font-weight: 500; color: var(--text-body);
  padding: 0.5625rem 0.9375rem; border-radius: 6.25rem; transition: color 0.25s, background 0.25s; position: relative;
}
.nav-links a:hover { color: var(--navy-deep); background: rgba(74, 111, 165, 0.08); }
.nav-links a.active { color: var(--navy-deep); font-weight: 600; }
.nav-links a.active::after { content: ""; position: absolute; left: 50%; bottom: 0.125rem; transform: translateX(-50%); width: 1rem; height: 0.1563rem; border-radius: 0.125rem; background: var(--gold); }
.nav-actions { display: flex; align-items: center; gap: 0.625rem; }
.nav-login { font-family: var(--font-ui); font-size: 0.88rem; font-weight: 500; color: var(--text-body); padding: 0.5625rem 0.875rem; border-radius: 6.25rem; transition: color 0.25s; }
.nav-login:hover { color: var(--navy-deep); }
.nav-burger { display: none; flex-direction: column; gap: 0.3125rem; padding: 0.625rem; z-index: 110; }
.nav-burger span { width: 1.5rem; height: 0.125rem; border-radius: 0.125rem; background: var(--navy-deep); transition: transform 0.35s var(--ease-spring), opacity 0.25s; }
.nav-burger.open span:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 105; display: flex; flex-direction: column;
  background: var(--menu-bg); backdrop-filter: blur(1.5rem);
  padding: 6.875rem 8vw 3rem; opacity: 0; pointer-events: none; transition: opacity 0.35s;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: var(--font-display); font-size: 1.9rem; color: var(--navy-deep);
  padding: 0.8125rem 0; border-bottom: 0.0625rem solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center;
  opacity: 0; transform: translateY(0.875rem); transition: opacity 0.4s, transform 0.5s var(--ease-spring);
}
.mobile-menu.open a { opacity: 1; transform: none; }
.mobile-menu a span { font-family: var(--font-ui); font-size: 0.7rem; color: var(--gold); letter-spacing: 0.15em; }
.mobile-menu .mobile-cta {
  margin-top: 1.75rem; border: 0;
  justify-content: center;
  font-family: var(--font-ui); font-size: 1.02rem; font-weight: 600;
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(2.125rem); transition: opacity 0.9s ease, transform 0.9s var(--ease-spring); transition-delay: var(--d, 0s); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(0.92) translateY(1.25rem); transition: opacity 0.9s ease, transform 1s var(--ease-spring); transition-delay: var(--d, 0s); }
.reveal-scale.in { opacity: 1; transform: none; }

/* ---------- Atmosphere: orbs & sky ---------- */
.orb { position: absolute; border-radius: 50%; filter: blur(4.375rem); pointer-events: none; opacity: 0.55; animation: orbDrift 16s ease-in-out infinite alternate; }
@keyframes orbDrift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(2.125rem, -1.75rem) scale(1.12); }
}
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.8125rem); } }
@keyframes breatheSlow { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.06); opacity: 1; } }

/* ============================================================
   HERO — Dawn
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: clamp(5.25rem, 11vh, 8rem);
  padding-bottom: clamp(1.75rem, 4.5vh, 4rem);
  background: var(--hero-bg);
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 4vw, 3.75rem); align-items: center; }
.hero-copy h1 { margin: 1.125rem 0 1.25rem; }
.hero-copy .lead { max-width: 33.75rem; margin-bottom: 1.75rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.625rem; }
.hero-proof-item { display: flex; align-items: center; gap: 0.625rem; font-family: var(--font-ui); font-size: 0.83rem; font-weight: 500; color: var(--text-muted); }
.hero-proof-item .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0.25rem rgba(47, 180, 122, 0.16); animation: breatheSlow 3s ease-in-out infinite; }
.hero-proof-item strong { color: var(--navy-deep); font-weight: 600; }

.sun {
  position: absolute; right: clamp(-5.625rem, -4vw, -2.5rem); bottom: -7.5rem;
  width: clamp(18.75rem, 36vw, 32.5rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--sun-core), var(--sun-halo) 46%, transparent 70%);
  animation: breatheSlow 9s ease-in-out infinite;
  pointer-events: none;
}
.hero-ecg { position: absolute; left: 0; right: 0; bottom: clamp(1.25rem, 4vh, 3rem); opacity: 0.5; pointer-events: none; }
.hero-ecg svg { width: 100%; height: 3.75rem; display: block; }
.hero-ecg path { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: ecgDraw 7s ease-out 0.8s forwards; }
@keyframes ecgDraw { to { stroke-dashoffset: 0; } }

/* ---------- Phone mockups ---------- */
.hero-visual { position: relative; display: flex; justify-content: center; perspective: 87.5rem; }
.hero-visual .phone { width: min(clamp(15rem, 21vw, 17.8125rem), 36vh); }
.phone-stack { position: relative; margin-right: clamp(2.25rem, 4vw, 4.5rem); }
.phone {
  width: clamp(15rem, 22vw, 18.125rem);
  aspect-ratio: 9 / 19.2;
  background: #0d1220;
  border-radius: 2.75rem;
  /* thicker top/bottom bezel — the speaker lives in the bezel, never over the screen */
  padding: 1.375rem 0.625rem 1rem;
  box-shadow:
    inset 0 0 0 0.125rem rgba(255, 255, 255, 0.09),
    0 3.125rem 6.25rem -1.875rem rgba(27, 38, 71, 0.45),
    0 1.5rem 3.125rem -1.375rem rgba(27, 38, 71, 0.32);
  position: relative;
  transform-style: preserve-3d;
}
.phone::before { /* speaker slit in the top bezel */
  content: ""; position: absolute; top: 0.55rem; left: 50%; transform: translateX(-50%);
  width: 2.75rem; height: 0.27rem; border-radius: 1rem;
  background: rgba(255, 255, 255, 0.16);
}
.phone::after { /* side button */
  content: ""; position: absolute; right: -0.1562rem; top: 8.125rem; width: 0.1875rem; height: 3.5rem;
  border-radius: 0.1875rem; background: #2a3148;
}
.phone-screen { width: 100%; height: 100%; border-radius: 1.5rem; overflow: hidden; position: relative; background: var(--blue-mist); }
.app-shot { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.phone-notch { display: none; } /* retired: it covered real screenshot content */
.phone-main { animation: floatY 7s ease-in-out infinite; z-index: 2; }
.phone-back {
  position: absolute; right: clamp(-6rem, -6.5vw, -4rem); top: 3rem;
  transform: rotate(8deg) scale(0.84);
  z-index: 1; opacity: 0.96;
  animation: floatY 8.5s ease-in-out 1.2s infinite;
}
.float-chip {
  position: absolute; z-index: 3;
  background: var(--chip-bg);
  backdrop-filter: blur(0.875rem);
  border: 0.0625rem solid var(--chip-edge);
  border-radius: 1.125rem;
  box-shadow: var(--shadow-lift);
  padding: 0.8125rem 1.0625rem;
  display: flex; align-items: center; gap: 0.6875rem;
  font-family: var(--font-ui);
  animation: floatY 6s ease-in-out infinite;
}
.float-chip .fc-emoji { font-size: 1.4rem; }
.float-chip .fc-title { font-size: 0.82rem; font-weight: 600; color: var(--navy-deep); line-height: 1.25; }
.float-chip .fc-sub { font-size: 0.68rem; color: var(--text-muted); font-family: var(--font-body); }

/* ---------- In-screen app UI (recreated from the real app) ---------- */
.app-ui { position: absolute; inset: 0; padding: 2.75rem 0.875rem 0.875rem; display: flex; flex-direction: column; gap: 0.625rem; font-family: var(--font-ui); overflow: hidden; }
.app-ui.morning { background: linear-gradient(180deg, #F5F7FA, #EFF3F9); color: #1E2A3A; }
.app-greet { display: flex; justify-content: space-between; align-items: center; }
.app-greet-hi { font-family: var(--font-body); font-size: 0.62rem; color: #7A8BA0; }
.app-greet-name { font-size: 0.95rem; font-weight: 700; color: #1E2A3A; line-height: 1.2; }
.app-bell { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #fff; border: 0.0625rem solid rgba(74,111,165,0.12); display: grid; place-items: center; font-size: 0.72rem; position: relative; }
.app-bell i { position: absolute; top: -0.125rem; right: -0.125rem; width: 0.8125rem; height: 0.8125rem; border-radius: 50%; background: #EF4444; color: #fff; font-style: normal; font-size: 0.5rem; font-weight: 700; display: grid; place-items: center; border: 0.0938rem solid #F5F7FA; }
.app-moods { display: flex; gap: 0.3125rem; }
.app-mood { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.25rem; background: #fff; border: 0.0625rem solid rgba(74,111,165,0.1); border-radius: 0.625rem; padding: 0.3125rem 0.125rem; font-size: 0.56rem; font-weight: 500; color: #5d6b80; }
.app-mood.sel { background: #5A8B6C; border-color: #5A8B6C; color: #fff; }
.app-label { font-size: 0.5rem; font-weight: 600; letter-spacing: 0.14em; color: #7A8BA0; }
.app-label b { color: #D4A843; font-weight: 600; }
.app-rhythm {
  flex: 1; min-height: 0; border-radius: 1.125rem; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #57805f 0%, #2c4a3e 55%, #1c3029 100%);
  box-shadow: 0 0.5rem 1.25rem -0.5rem rgba(90, 139, 108, 0.55);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0.75rem;
}
.app-rhythm::before { content: ""; position: absolute; inset: 0; background: radial-gradient(7.5rem 5.625rem at 78% 12%, rgba(244, 197, 107, 0.4), transparent 65%); }
.app-rhythm-emoji { width: 2rem; height: 2rem; border-radius: 50%; background: rgba(232, 181, 98, 0.45); display: grid; place-items: center; font-size: 0.95rem; margin-bottom: 0.4375rem; }
.app-rhythm-kicker { font-size: 0.48rem; letter-spacing: 0.16em; color: rgba(255,255,255,0.85); margin-bottom: 0.1875rem; }
.app-rhythm-title { font-size: 0.95rem; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 0.125rem; }
.app-rhythm-dur { font-family: var(--font-body); font-size: 0.6rem; color: rgba(255,255,255,0.85); margin-bottom: 0.5625rem; }
.app-rhythm-cta { align-self: flex-start; background: #fff; color: #3f6d52; border-radius: 6.25rem; padding: 0.375rem 0.8125rem; font-size: 0.6rem; font-weight: 700; display: flex; align-items: center; gap: 0.3125rem; }
.app-dots { display: flex; gap: 0.1875rem; justify-content: center; }
.app-dots i { width: 0.25rem; height: 0.25rem; border-radius: 0.1875rem; background: rgba(74,111,165,0.2); }
.app-dots i.on { width: 0.75rem; background: #D4A843; }
.app-stats { display: flex; align-items: center; background: #fff; border: 0.0625rem solid rgba(74,111,165,0.1); border-radius: 0.8125rem; padding: 0.5rem 0.75rem; gap: 0.625rem; }
.app-stat { display: flex; align-items: center; gap: 0.375rem; flex: 1; }
.app-stat .n { font-size: 0.86rem; font-weight: 700; color: #D4A843; }
.app-stat .l { font-family: var(--font-body); font-size: 0.52rem; color: #7A8BA0; line-height: 1.15; }
.app-stat-div { width: 0.0625rem; height: 1.375rem; background: rgba(74,111,165,0.14); }
.app-tabbar { display: flex; justify-content: space-around; align-items: center; background: rgba(255,255,255,0.94); border-top: 0.0625rem solid rgba(74,111,165,0.1); border-radius: 0.875rem 0.875rem 1.5rem 1.5rem; padding: 0.4375rem 0.25rem 0.375rem; margin: 0 -0.375rem -0.375rem; }
.app-tab { display: flex; flex-direction: column; align-items: center; gap: 0.0625rem; font-size: 0.44rem; font-weight: 500; color: #9aa7b8; }
.app-tab svg { width: 0.9375rem; height: 0.9375rem; }
.app-tab.on { color: #4A6FA5; font-weight: 600; }

/* Burnout Hub screen */
.app-ui.hub { background: linear-gradient(180deg, #F5F7FA, #EEF2F8); }
.app-hub-title { font-size: 1.02rem; font-weight: 700; color: #1E2A3A; line-height: 1.2; }
.app-hub-tag { font-family: var(--font-body); font-size: 0.56rem; color: #7A8BA0; margin-top: 0.0625rem; }
.app-score-card { background: #fff; border: 0.0625rem solid rgba(90, 139, 108, 0.3); border-radius: 1.125rem; padding: 0.8125rem 0.75rem 0.75rem; display: flex; flex-direction: column; align-items: center; }
.app-score-kicker { font-size: 0.5rem; letter-spacing: 0.18em; color: #7A8BA0; margin-bottom: 0.5625rem; }
.gauge { position: relative; width: 7.25rem; height: 7.25rem; }
.gauge svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.gauge .track { fill: none; stroke: rgba(122, 139, 160, 0.16); stroke-width: 11; }
.gauge .arc { fill: none; stroke: url(#gaugeGrad); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 326; stroke-dashoffset: 326; transition: stroke-dashoffset 1.8s var(--ease-spring) 0.4s; }
.gauge.in .arc { stroke-dashoffset: 105.5; } /* 68% of 2πr(52)≈326 */
.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-num { font-size: 1.7rem; font-weight: 700; color: #1E2A3A; letter-spacing: -0.04em; line-height: 1; }
.gauge-num small { font-size: 0.55rem; font-weight: 500; color: #7A8BA0; letter-spacing: 0; }
.gauge-band { margin-top: 0.25rem; background: rgba(168, 213, 186, 0.5); color: #3e7253; border-radius: 0.5625rem; padding: 0.125rem 0.5rem; font-size: 0.52rem; font-weight: 600; }
.app-areas { background: #fff; border: 0.0625rem solid rgba(74,111,165,0.1); border-radius: 0.9375rem; padding: 0.6875rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.app-areas-title { font-size: 0.68rem; font-weight: 700; color: #1E2A3A; }
.app-area { display: flex; align-items: center; gap: 0.4375rem; }
.app-area .e { font-size: 0.78rem; width: 1rem; }
.app-area .mid { flex: 1; }
.app-area .nm { display: flex; justify-content: space-between; font-size: 0.54rem; font-weight: 600; color: #1E2A3A; margin-bottom: 0.1875rem; }
.app-area .nm span { color: #7A8BA0; font-weight: 500; }
.app-area .bar { height: 0.25rem; border-radius: 0.1875rem; background: rgba(122,139,160,0.16); overflow: hidden; }
.app-area .bar i { display: block; height: 100%; border-radius: 0.1875rem; width: 0; transition: width 1.4s var(--ease-spring); }
.in .app-area .bar i { width: var(--w); }
.app-voice-btn { background: linear-gradient(135deg, #4A6FA5, #8EAED4); border-radius: 0.875rem; padding: 0.5625rem; text-align: center; color: #fff; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 0.375rem 1.125rem -0.375rem rgba(74, 111, 165, 0.6); }

/* Sanctuary (Mindfulness) screen */
.app-ui.sanctuary { background: linear-gradient(180deg, rgba(12,30,36,0.62), rgba(12,30,36,0.94)), var(--sanctuary-img, linear-gradient(180deg, #14333c, #0C1E24)); background-size: cover; background-position: center 30%; color: #F0F4F3; }
.app-sanct-kicker { font-size: 0.5rem; letter-spacing: 0.2em; color: #E8B562; }
.app-sanct-title { font-size: 0.98rem; font-weight: 700; color: #F0F4F3; line-height: 1.25; }
.app-journal { border-radius: 0.9375rem; overflow: hidden; position: relative; background: linear-gradient(180deg, rgba(45, 155, 150, 0.25), rgba(12, 30, 36, 0.92)), linear-gradient(150deg, #1d4a52, #122d35); padding: 1.875rem 0.6875rem 0.6875rem; }
.app-journal-badge { position: absolute; top: 0.5rem; left: 0.5rem; background: rgba(12,30,36,0.65); border-radius: 0.5rem; padding: 0.1875rem 0.4375rem; font-size: 0.44rem; letter-spacing: 0.12em; color: #E8B562; font-weight: 600; }
.app-journal-title { font-size: 0.78rem; font-weight: 700; color: #fff; }
.app-journal-sub { font-family: var(--font-body); font-size: 0.54rem; color: rgba(255,255,255,0.85); margin-top: 0.125rem; }
.app-sanct-row-label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.62rem; font-weight: 600; color: #F0F4F3; }
.app-sanct-row-label i { width: 1.125rem; height: 1.125rem; border-radius: 0.375rem; background: rgba(232, 181, 98, 0.18); display: grid; place-items: center; font-style: normal; font-size: 0.58rem; }
.app-sanct-cards { display: flex; gap: 0.4375rem; }
.app-sanct-card { flex: 1; aspect-ratio: 0.84; border-radius: 0.75rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0.5rem; }
.app-sanct-card .t { font-size: 0.56rem; font-weight: 600; color: #fff; line-height: 1.25; position: relative; }
.app-sanct-card .d { font-family: var(--font-body); font-size: 0.46rem; color: #E8B562; position: relative; }
.app-sanct-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(12,30,36,0.92)); }
.app-sanct-card.c1 { background: linear-gradient(150deg, #2D9B96, #15454d); }
.app-sanct-card.c2 { background: linear-gradient(150deg, #55C2BD, #1d3a47); }
.app-sanct-card.c3 { background: linear-gradient(150deg, #E8B562, #5c4422); }
.app-breath-orb { align-self: center; width: 4.625rem; height: 4.625rem; border-radius: 50%; display: grid; place-items: center; position: relative; margin-block: 0.125rem; }
.app-breath-orb::before, .app-breath-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(85, 194, 189, 0.5), rgba(45, 155, 150, 0.08) 70%); animation: breatheSlow 5s ease-in-out infinite; }
.app-breath-orb::after { inset: -0.875rem; opacity: 0.4; animation-delay: 0.4s; }
.app-breath-orb span { position: relative; font-size: 0.5rem; letter-spacing: 0.14em; color: #d7f3f1; font-weight: 600; z-index: 1; }

/* Lounge screen */
.app-ui.lounge { background: linear-gradient(180deg, #F5F7FA, #EFF3F9); }
.app-stories { display: flex; gap: 0.5rem; }
.app-story { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; font-size: 0.46rem; color: #7A8BA0; font-family: var(--font-body); }
.app-story .ring { width: 2.25rem; height: 2.25rem; border-radius: 50%; padding: 0.1563rem; }
.app-story .ring.r1 { background: conic-gradient(#E85D75, #F2A185, #E85D75); }
.app-story .ring.r2 { background: conic-gradient(#4ECDC4, #5FA8D3, #4ECDC4); }
.app-story .ring.r3 { background: conic-gradient(#9B7FE8, #B8A1F2, #9B7FE8); }
.app-story .ring.dashed { background: none; border: 0.0938rem dashed rgba(74, 111, 165, 0.4); padding: 0.0625rem; }
.app-story .av { width: 100%; height: 100%; border-radius: 50%; background: #E3EBF5; border: 0.125rem solid #F5F7FA; display: grid; place-items: center; font-size: 0.66rem; }
.app-chips { display: flex; gap: 0.25rem; }
.app-chip { background: #fff; border: 0.0625rem solid rgba(74,111,165,0.12); color: #5d6b80; border-radius: 6.25rem; padding: 0.2188rem 0.5625rem; font-size: 0.5rem; font-weight: 500; }
.app-chip.on { background: #4A6FA5; border-color: #4A6FA5; color: #fff; }
.app-post { background: #fff; border: 0.0625rem solid rgba(74,111,165,0.1); border-radius: 0.8125rem; padding: 0.625rem; }
.app-post-head { display: flex; align-items: center; gap: 0.4375rem; margin-bottom: 0.375rem; }
.app-post-av { width: 1.625rem; height: 1.625rem; border-radius: 50%; background: #E9E2F8; display: grid; place-items: center; font-size: 0.62rem; }
.app-post-name { font-size: 0.58rem; font-weight: 600; color: #1E2A3A; display: flex; align-items: center; gap: 0.25rem; }
.app-post-role { background: rgba(232, 93, 117, 0.12); color: #E85D75; font-size: 0.42rem; font-weight: 500; border-radius: 0.375rem; padding: 0.0625rem 0.3125rem; }
.app-post-time { font-family: var(--font-body); font-size: 0.46rem; color: #9aa7b8; }
.app-post-body { font-family: var(--font-body); font-size: 0.58rem; line-height: 1.5; color: #2c394e; }
.app-post-body b { color: #4A6FA5; font-weight: 600; }
.app-post-acts { display: flex; gap: 0.6875rem; margin-top: 0.4375rem; padding-top: 0.375rem; border-top: 0.0625rem solid rgba(74,111,165,0.08); font-size: 0.5rem; color: #7A8BA0; font-family: var(--font-body); }
.app-post-acts .liked { color: #E85D75; font-weight: 600; }
.app-fab { position: absolute; right: 0.75rem; bottom: 3.25rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: linear-gradient(135deg, #4A6FA5, #8EAED4); color: #fff; display: grid; place-items: center; font-size: 1rem; box-shadow: 0 0.5rem 1.125rem -0.3125rem rgba(74, 111, 165, 0.6); }

/* Energize Daily screen (cream + sage, from app featureThemes) */
.app-ui.energize { background: linear-gradient(180deg, #FAF6EE, #F2EADC); color: #2B3A2F; }
.app-en-kicker { font-size: 0.5rem; letter-spacing: 0.2em; color: #E2A055; font-weight: 600; }
.app-en-title { font-size: 0.98rem; font-weight: 700; color: #2B3A2F; line-height: 1.2; }
.app-en-guide { background: #fff; border: 0.0625rem solid rgba(143, 184, 156, 0.3); border-radius: 0.8125rem; padding: 0.5625rem 0.6875rem; }
.app-en-guide .gl { font-size: 0.62rem; font-weight: 600; color: #2B3A2F; }
.app-en-guide .gb { font-family: var(--font-body); font-size: 0.52rem; color: rgba(43, 58, 47, 0.6); margin-top: 0.0625rem; }
.app-en-hydra { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.4375rem; }
.app-en-hydra i { flex: 1; height: 0.875rem; border-radius: 0.3125rem; background: rgba(95, 168, 211, 0.18); }
.app-en-hydra i.full { background: linear-gradient(180deg, #85C0E0, #5FA8D3); }
.app-en-ai { display: flex; gap: 0.4375rem; }
.app-en-ai > div { flex: 1; border-radius: 0.75rem; padding: 0.5625rem; color: #fff; }
.app-en-ai .a1 { background: linear-gradient(140deg, #5A8B6C, #3E6A50); }
.app-en-ai .a2 { background: linear-gradient(140deg, #3E6A50, #E2A055); }
.app-en-ai .at { font-size: 0.56rem; font-weight: 600; line-height: 1.3; }
.app-en-ai .ab { font-family: var(--font-body); font-size: 0.46rem; opacity: 0.92; margin-top: 0.125rem; line-height: 1.4; }
.app-en-chips { display: flex; gap: 0.25rem; }
.app-en-chips span { flex: 1; text-align: center; background: #fff; border: 0.0625rem solid rgba(143, 184, 156, 0.3); color: #5A8B6C; border-radius: 6.25rem; padding: 0.25rem 0; font-size: 0.5rem; font-weight: 600; }
.app-en-chips span.on { background: #5A8B6C; color: #fff; border-color: #5A8B6C; }
.app-en-item { background: #fff; border: 0.0625rem solid rgba(143, 184, 156, 0.25); border-radius: 0.75rem; padding: 0.4375rem 0.5625rem; display: flex; align-items: center; gap: 0.5rem; }
.app-en-item .img { width: 1.875rem; height: 1.875rem; border-radius: 0.5625rem; flex: none; background: linear-gradient(140deg, #8FB89C, #5A8B6C); display: grid; place-items: center; font-size: 0.8rem; }
.app-en-item .tt { font-size: 0.56rem; font-weight: 600; color: #2B3A2F; }
.app-en-item .mm { font-family: var(--font-body); font-size: 0.46rem; color: rgba(43,58,47,0.55); }

/* Reset & Roam screen (warm horizon, coral) */
.app-ui.roam { background: linear-gradient(180deg, #FDF8F3, #F8EFE5); color: #2C1F1A; }
.app-ro-kicker { font-size: 0.5rem; letter-spacing: 0.2em; color: #E7856A; font-weight: 600; }
.app-ro-title { font-size: 0.98rem; font-weight: 700; color: #2C1F1A; line-height: 1.2; }
.app-ro-moods { display: flex; justify-content: space-between; }
.app-ro-mood { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; font-family: var(--font-body); font-size: 0.44rem; color: rgba(44,31,26,0.6); }
.app-ro-mood .o { width: 1.875rem; height: 1.875rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; }
.app-ro-ai { border-radius: 0.8125rem; padding: 0.625rem 0.6875rem; color: #fff; background: linear-gradient(135deg, #E7856A, #D46A4D); display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 0.4375rem 1.125rem -0.4375rem rgba(231, 133, 106, 0.65); }
.app-ro-ai .ic { width: 1.625rem; height: 1.625rem; border-radius: 0.5625rem; background: rgba(255,255,255,0.22); display: grid; place-items: center; font-size: 0.72rem; flex: none; }
.app-ro-ai .tt { font-size: 0.58rem; font-weight: 600; line-height: 1.3; }
.app-ro-ai .bb { font-family: var(--font-body); font-size: 0.47rem; opacity: 0.92; }
.app-ro-cards { display: flex; gap: 0.4375rem; }
.app-ro-card { flex: 1; aspect-ratio: 1.5; border-radius: 0.75rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0.4375rem; }
.app-ro-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(44, 31, 26, 0.85)); }
.app-ro-card .b { position: absolute; top: 0.375rem; left: 0.375rem; background: rgba(44,31,26,0.5); color: #fff; border-radius: 0.4375rem; padding: 0.125rem 0.3125rem; font-size: 0.38rem; font-weight: 600; letter-spacing: 0.1em; }
.app-ro-card .n { position: relative; font-size: 0.54rem; font-weight: 600; color: #fff; }
.app-ro-card .m { position: relative; font-family: var(--font-body); font-size: 0.44rem; color: rgba(255,255,255,0.8); }
.app-ro-card.r1 { background: linear-gradient(150deg, #5FA8D3, #2c5a78); }
.app-ro-card.r2 { background: linear-gradient(150deg, #C26944, #7a3a22); }
.app-ro-modes { display: flex; gap: 0.3125rem; }
.app-ro-modes > div { flex: 1; background: #fff; border: 0.0625rem solid rgba(231, 133, 106, 0.22); border-radius: 0.6875rem; padding: 0.4375rem 0.1875rem; text-align: center; }
.app-ro-modes .i { font-size: 0.72rem; }
.app-ro-modes .l { font-size: 0.48rem; font-weight: 600; color: #2C1F1A; margin-top: 0.125rem; }
.app-ro-modes .t { font-family: var(--font-body); font-size: 0.4rem; color: rgba(44,31,26,0.55); }

/* Nurse Intel screen (light paper) */
.app-ui.intel { background: linear-gradient(180deg, #F5F3EC, #EDEAE0); color: #1E2A3A; }
.app-in-kicker { font-size: 0.5rem; letter-spacing: 0.2em; color: #D4A843; font-weight: 600; }
.app-in-title { font-size: 0.98rem; font-weight: 700; color: #1E2A3A; line-height: 1.2; }
.app-in-feat { border-radius: 0.8125rem; overflow: hidden; position: relative; padding: 2.25rem 0.6875rem 0.6875rem; background: linear-gradient(180deg, rgba(30,42,58,0.2), rgba(30,42,58,0.88)), linear-gradient(150deg, #6B8DC0, #1E2A3A); }
.app-in-feat .tag { position: absolute; top: 0.5rem; left: 0.5rem; background: rgba(212, 168, 67, 0.9); color: #1E2A3A; border-radius: 0.4375rem; padding: 0.125rem 0.4375rem; font-size: 0.42rem; font-weight: 700; letter-spacing: 0.08em; }
.app-in-feat .tt { font-size: 0.7rem; font-weight: 700; color: #fff; line-height: 1.3; }
.app-in-feat .mm { font-family: var(--font-body); font-size: 0.48rem; color: rgba(255,255,255,0.75); margin-top: 0.125rem; }
.app-in-row { background: #fff; border: 0.0625rem solid rgba(74, 111, 165, 0.16); border-radius: 0.75rem; padding: 0.5rem 0.5625rem; display: flex; gap: 0.5rem; align-items: center; }
.app-in-row .th { width: 2rem; height: 2rem; border-radius: 0.5625rem; flex: none; }
.app-in-row .th.h1 { background: linear-gradient(140deg, #8EAED4, #4A6FA5); }
.app-in-row .th.h2 { background: linear-gradient(140deg, #E8C672, #B07A2E); }
.app-in-row .th.h3 { background: linear-gradient(140deg, #A8D5BA, #5A8B6C); }
.app-in-row .tt { font-size: 0.55rem; font-weight: 600; color: #1E2A3A; line-height: 1.35; }
.app-in-row .mm { font-family: var(--font-body); font-size: 0.45rem; color: rgba(30,42,58,0.55); }
.app-in-row .mm b { color: #4A6FA5; font-weight: 600; }

/* Subtle Moves screen (charcoal + coral) */
.app-ui.subtle { background: linear-gradient(180deg, #17181F, #1E1F29); color: #F4F4F7; }
.app-sm-kicker { font-size: 0.5rem; letter-spacing: 0.2em; color: #F9C784; font-weight: 600; }
.app-sm-title { font-size: 0.98rem; font-weight: 700; color: #F4F4F7; line-height: 1.2; }
.app-sm-intro { font-family: var(--font-body); font-size: 0.52rem; color: rgba(244,244,247,0.6); line-height: 1.5; }
.app-sm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4375rem; flex: 1; min-height: 0; }
.app-sm-cell { border-radius: 0.75rem; position: relative; overflow: hidden; padding: 0.5rem; display: flex; flex-direction: column; justify-content: flex-end; border: 0.0625rem solid rgba(231, 133, 106, 0.18); }
.app-sm-cell::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(23, 24, 31, 0.9)); }
.app-sm-cell .l { position: relative; font-size: 0.56rem; font-weight: 600; color: #fff; }
.app-sm-cell .t { position: relative; font-family: var(--font-body); font-size: 0.44rem; color: rgba(255,255,255,0.75); }
.app-sm-cell .v { position: relative; font-size: 0.42rem; font-weight: 600; color: #F9C784; margin-top: 0.1875rem; }
.app-sm-cell.s1 { background: linear-gradient(150deg, #E7856A, #5c2e20); }
.app-sm-cell.s2 { background: linear-gradient(150deg, #F2A185, #6b3a28); }
.app-sm-cell.s3 { background: linear-gradient(150deg, #F9C784, #6d4d22); }
.app-sm-cell.s4 { background: linear-gradient(150deg, #b56a52, #3a1f16); }
.app-sm-bar { background: rgba(34, 36, 49, 0.94); border: 0.0625rem solid rgba(231, 133, 106, 0.2); border-radius: 0.75rem; padding: 0.5rem 0.625rem; display: flex; align-items: center; gap: 0.5rem; }
.app-sm-bar .p { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #E7856A; color: #17181F; display: grid; place-items: center; font-size: 0.6rem; flex: none; }
.app-sm-bar .tt { font-size: 0.54rem; font-weight: 600; color: #F4F4F7; }
.app-sm-bar .mm { font-family: var(--font-body); font-size: 0.44rem; color: rgba(244,244,247,0.55); }

/* Pinned footer quote inside app screens (fills tall screens gracefully) */
.app-mini-quote { margin-top: auto; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 0.62rem; line-height: 1.5; padding: 0.5rem 0.75rem 0.25rem; }

/* Podcast screen */
.app-ui.podcast { background: linear-gradient(180deg, #0D4F4F 0%, #1A6B5A 26%, #F5F7FA 26.1%); }
.app-pod-top { display: flex; align-items: center; justify-content: space-between; color: #fff; }
.app-pod-title { font-size: 0.84rem; font-weight: 700; }
.app-eq { display: flex; align-items: flex-end; gap: 0.125rem; height: 0.875rem; }
.app-eq i { width: 0.1563rem; border-radius: 0.125rem; background: rgba(255,255,255,0.85); animation: eqBar 1.1s ease-in-out infinite alternate; }
.app-eq i:nth-child(1) { height: 40%; animation-delay: 0s; }
.app-eq i:nth-child(2) { height: 90%; animation-delay: 0.15s; }
.app-eq i:nth-child(3) { height: 55%; animation-delay: 0.3s; }
.app-eq i:nth-child(4) { height: 100%; animation-delay: 0.45s; }
.app-eq i:nth-child(5) { height: 65%; animation-delay: 0.6s; }
@keyframes eqBar { from { transform: scaleY(0.45); } to { transform: scaleY(1); } }
.app-pod-hero { border-radius: 0.9375rem; overflow: hidden; position: relative; padding: 2.125rem 0.75rem 0.75rem; background: linear-gradient(180deg, rgba(13,79,79,0.5), rgba(13,79,79,0.93)), linear-gradient(150deg, #2EC4A0, #0D4F4F); box-shadow: 0 0.625rem 1.5rem -0.625rem rgba(13, 79, 79, 0.55); }
.app-pod-day { position: absolute; top: 0.5625rem; left: 0.5625rem; background: rgba(245, 166, 35, 0.22); color: #F5C56B; border-radius: 6.25rem; padding: 0.1875rem 0.5rem; font-size: 0.44rem; font-weight: 600; letter-spacing: 0.12em; }
.app-pod-ep { font-size: 0.8rem; font-weight: 700; color: #fff; line-height: 1.25; }
.app-pod-host { font-family: var(--font-body); font-size: 0.54rem; color: rgba(255,255,255,0.75); margin: 0.125rem 0 0.5rem; }
.app-pod-cta { display: inline-flex; align-items: center; gap: 0.3125rem; background: #2EC4A0; color: #fff; border-radius: 6.25rem; padding: 0.3125rem 0.75rem; font-size: 0.56rem; font-weight: 600; }
.app-pod-row { background: #fff; border: 0.0625rem solid rgba(74,111,165,0.1); border-radius: 0.75rem; padding: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.app-pod-thumb { width: 1.875rem; height: 1.875rem; border-radius: 50%; flex: none; }
.app-pod-thumb.t1 { background: linear-gradient(140deg, #5FA8D3, #1A6B5A); }
.app-pod-thumb.t2 { background: linear-gradient(140deg, #F4C56B, #C26944); }
.app-pod-info { flex: 1; min-width: 0; }
.app-pod-name { font-size: 0.56rem; font-weight: 600; color: #1E2A3A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-pod-meta { font-family: var(--font-body); font-size: 0.46rem; color: #7A8BA0; }
.app-pod-meta b { color: #2EC4A0; font-weight: 600; }
.app-pod-play { width: 1.375rem; height: 1.375rem; border-radius: 50%; background: #2EC4A0; color: #fff; display: grid; place-items: center; font-size: 0.5rem; flex: none; }

/* ============================================================
   WE SEE YOU — emotional navy section
   ============================================================ */
.seen {
  background:
    radial-gradient(56.25rem 31.25rem at 12% 0%, rgba(74, 111, 165, 0.35), transparent 60%),
    radial-gradient(50rem 28.75rem at 95% 100%, rgba(155, 127, 232, 0.22), transparent 60%),
    linear-gradient(170deg, #1B2647 0%, #16213e 55%, #131c36 100%);
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
}
/* .seen's background is a hard-coded dark gradient in every theme, so its
   headline must use a literal light colour — not --white, which the night
   theme inverts to dark navy. */
.seen h2 { color: #fff; }
.seen .lead { color: rgba(255, 255, 255, 0.74); }
.seen .kicker { color: var(--gold-soft); }
.weights { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin: 2.75rem 0; }
.weight-chip {
  font-family: var(--font-ui); font-size: 0.92rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 0.0625rem solid rgba(255, 255, 255, 0.14);
  border-radius: 6.25rem; padding: 0.75rem 1.5rem;
  backdrop-filter: blur(0.5rem);
  display: inline-flex; align-items: center; gap: 0.5625rem;
  animation: floatY var(--fd, 6s) ease-in-out var(--fdel, 0s) infinite;
}
.weight-chip span { font-size: 1.05rem; }
.seen-ecg { margin: 3.125rem auto 0; max-width: 53.75rem; }
.seen-ecg svg { width: 100%; height: 5.625rem; display: block; }
.seen-ecg path { fill: none; stroke: var(--gold-soft); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3000; stroke-dashoffset: 3000; }
.seen-ecg.in path { animation: ecgDraw 5.5s cubic-bezier(0.4, 0, 0.3, 1) forwards; }
.seen-ecg-caption { text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.12rem; color: var(--gold-soft); margin-top: 0.875rem; opacity: 0; transition: opacity 1.2s ease 2.8s; }
.seen-ecg.in + .seen-ecg-caption, .seen-ecg.in .seen-ecg-caption { opacity: 1; }

/* ============================================================
   WHO WE ARE / movement
   ============================================================ */
.movement { background: linear-gradient(180deg, var(--warm-white), var(--warm-white-alt)); }
.movement-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.25rem, 5vw, 5rem); align-items: center; }
.movement-img { position: relative; }
.movement-img img { border-radius: var(--r-xl); box-shadow: var(--shadow-lift); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.movement-img::before {
  content: ""; position: absolute; inset: -1.375rem auto auto -1.375rem; width: 60%; height: 60%;
  border-radius: var(--r-xl); border: 0.125rem solid var(--gold-pale); z-index: -1;
}
.movement-quote {
  position: absolute; bottom: -1.625rem; right: clamp(-0.875rem, -1vw, 1.125rem); max-width: 18.125rem;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(0.75rem);
  border-radius: 1.25rem; padding: 1.25rem 1.375rem; box-shadow: var(--shadow-lift);
  font-family: var(--font-display); font-style: italic; font-size: 0.99rem; color: var(--navy-deep); line-height: 1.5;
}
.movement-quote small { display: block; margin-top: 0.5625rem; font-family: var(--font-ui); font-style: normal; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.pillars { display: grid; gap: 0.875rem; margin-top: 2.25rem; }
.pillar { display: flex; gap: 1rem; align-items: flex-start; background: var(--white); border: 0.0625rem solid var(--hairline); border-radius: var(--r-md); padding: 1.125rem 1.25rem; transition: transform 0.4s var(--ease-spring), box-shadow 0.4s; }
.pillar:hover { transform: translateX(0.5rem); box-shadow: var(--shadow-soft); }
.pillar-icon { width: 3.5rem; height: 3.5rem; flex: none; border-radius: 1.0625rem; display: grid; place-items: center; font-size: 1.55rem; }
.pillar h3 { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; margin-bottom: 0.1875rem; }
.pillar p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.55; }

/* ============================================================
   FOUNDER
   ============================================================ */
.founder { background: linear-gradient(180deg, var(--warm-white-alt), var(--lavender-wash) 130%); overflow: hidden; }
.founder-card {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  background: var(--white); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-lift); border: 0.0625rem solid var(--hairline);
}
.founder-photo {
  position: relative; min-height: 26.25rem;
  background: linear-gradient(160deg, #233258, #1B2647 60%, #131c36); /* always-dark portrait panel */
  display: flex; align-items: center; justify-content: center;
}
.founder-photo .halo { position: absolute; width: 15rem; height: 15rem; border-radius: 50%; background: radial-gradient(circle, rgba(212, 168, 67, 0.35), transparent 70%); animation: breatheSlow 7s ease-in-out infinite; }
.founder-avatar {
  position: relative; width: 10.5rem; height: 10.5rem; border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-soft), var(--gold));
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 3.4rem; color: var(--navy-deep);
  border: 0.3125rem solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 1.5rem 3.75rem -1rem rgba(0, 0, 0, 0.45);
}
.founder-photo .photo-note { position: absolute; bottom: 1.125rem; font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.founder-body { padding: clamp(1.875rem, 4vw, 3.5rem); }
.founder-creds { display: flex; flex-wrap: wrap; gap: 0.5625rem; margin: 1.125rem 0 1.375rem; }
.cred-chip { font-family: var(--font-ui); font-size: 0.74rem; font-weight: 600; color: #93722a; background: var(--gold-pale); border-radius: 6.25rem; padding: 0.4375rem 0.9375rem; display: inline-flex; gap: 0.375rem; align-items: center; }
.founder-quote { border-left: 0.1875rem solid var(--gold); padding-left: 1.25rem; margin-top: 1.625rem; font-family: var(--font-display); font-style: italic; font-size: 1.18rem; color: var(--navy-deep); line-height: 1.55; }
.founder-quote cite { display: block; margin-top: 0.625rem; font-family: var(--font-ui); font-style: normal; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }

/* ============================================================
   FEATURES
   ============================================================ */
.features-band { background: var(--warm-white); }
.feature-flag {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem); align-items: center;
  padding-block: clamp(2rem, 4.5vw, 3.5rem);
}
.feature-flag.flip > .ff-visual { order: 2; }
.ff-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 6.25rem; padding: 0.5rem 1rem; margin-bottom: 1.125rem; }
.ff-copy h3 { margin-bottom: 1rem; }
.ff-points { margin-top: 1.5rem; display: grid; gap: 0.6875rem; }
.ff-points li { display: flex; gap: 0.6875rem; align-items: flex-start; font-size: 0.98rem; }
.ff-points li b { display: contents; } /* keep bold lead-ins inline with the text, not a separate flex column */
.ff-points li::before { content: "✓"; flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; margin-top: 0.1875rem; }
.ff-visual { position: relative; display: flex; justify-content: center; }
.ff-visual .phone { animation: floatY 7.5s ease-in-out infinite; }
.ff-glow { position: absolute; inset: 10% 6%; border-radius: 50%; filter: blur(4rem); opacity: 0.5; z-index: -1; }

/* Sanctuary immersive band */
.sanctuary-band {
  position: relative; overflow: hidden; color: rgba(240, 244, 243, 0.82);
  background: linear-gradient(180deg, #0F2932 0%, var(--night) 100%);
}
.sanctuary-band .bg-forest {
  position: absolute; inset: 0;
  background-image: linear-gradient(180deg, rgba(12, 30, 36, 0.55), rgba(12, 30, 36, 0.82) 70%, var(--night)), var(--forest-url);
  background-size: cover; background-position: center 22%;
  transform: scale(1.06);
}
.sanctuary-band h2, .sanctuary-band h3 { color: #F0F4F3; }
.sanctuary-band .kicker { color: var(--firefly); }
.sanctuary-band .lead { color: rgba(240, 244, 243, 0.78); }
.firefly { position: absolute; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--firefly); box-shadow: 0 0 0.75rem 0.1875rem rgba(232, 181, 98, 0.55); opacity: 0; animation: fireflyFloat var(--ffd, 9s) ease-in-out var(--ffdel, 0s) infinite; }
@keyframes fireflyFloat {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 0.9; }
  50% { opacity: 0.45; transform: translate(var(--ffx, 1.625rem), -2.125rem); }
  80% { opacity: 0.85; }
}
.breath-circle { position: relative; width: clamp(11.875rem, 22vw, 15.625rem); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.breath-circle .ring { position: absolute; inset: 0; border-radius: 50%; border: 0.0938rem solid rgba(85, 194, 189, 0.4); animation: breathRing 8s ease-in-out infinite; }
.breath-circle .ring:nth-child(2) { animation-delay: 0.6s; opacity: 0.6; }
.breath-circle .ring:nth-child(3) { animation-delay: 1.2s; opacity: 0.3; }
.breath-circle .core {
  width: 58%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, rgba(85, 194, 189, 0.85), rgba(45, 155, 150, 0.35) 62%, rgba(45, 155, 150, 0.1));
  box-shadow: 0 0 5rem 0.5rem rgba(45, 155, 150, 0.35);
  display: grid; place-items: center; animation: breathCore 8s ease-in-out infinite;
}
.breath-circle .core span { font-family: var(--font-ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: #eafffd; animation: breathLabel 8s ease-in-out infinite; }
@keyframes breathCore { 0%, 100% { transform: scale(0.86); } 45%, 55% { transform: scale(1.1); } }
@keyframes breathRing { 0%, 100% { transform: scale(0.92); opacity: 0.65; } 50% { transform: scale(1.12); opacity: 0.25; } }
@keyframes breathLabel { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

/* Feature card grid */
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.375rem; }
/* 4-up variant. Declared here (not inline) so the responsive .fgrid rules
   further down can still collapse it on smaller screens. */
.fgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fcard {
  --fc: var(--blue);
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 6%, var(--white)), var(--white) 60%);
  border: 0.0625rem solid color-mix(in srgb, var(--fc) 14%, var(--hairline));
  border-radius: var(--r-lg); padding: 1.75rem 1.625rem 1.5rem; overflow: hidden;
  transition: transform 0.45s var(--ease-spring), box-shadow 0.45s, border-color 0.45s;
}
.fcard::before {
  content: ""; position: absolute; inset: 0 0 auto;
  height: 0.25rem; background: linear-gradient(90deg, var(--fc), transparent 80%);
  opacity: 0; transition: opacity 0.4s;
}
.fcard::after {
  content: ""; position: absolute; top: -3.125rem; right: -3.125rem; width: 9.375rem; height: 9.375rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--fc) 14%, transparent), transparent 70%);
  opacity: 0; transition: opacity 0.5s;
}
.fcard:hover { transform: translateY(-0.5625rem); box-shadow: 0 1.875rem 4.375rem -1.5rem color-mix(in srgb, var(--fc) 38%, rgba(27, 38, 71, 0.25)); border-color: color-mix(in srgb, var(--fc) 30%, transparent); }
.fcard:hover::before, .fcard:hover::after { opacity: 1; }
.fcard-icon {
  width: 4.25rem; height: 4.25rem; border-radius: 1.3125rem; display: grid; place-items: center;
  background: color-mix(in srgb, var(--fc) 15%, transparent);
  box-shadow: inset 0 0 0 0.0938rem color-mix(in srgb, var(--fc) 22%, transparent);
  color: var(--fc); margin-bottom: 1.125rem; font-size: 2rem;
  transition: transform 0.45s var(--ease-spring);
}
.fcard:hover .fcard-icon { transform: scale(1.1) rotate(-6deg); }
.fcard-icon svg { width: 2.125rem; height: 2.125rem; }
.fcard h3 { font-family: var(--font-ui); font-size: 1.22rem; font-weight: 600; margin-bottom: 0.25rem; }
.fcard .fcard-tag { font-family: var(--font-display); font-style: italic; font-size: 0.94rem; color: var(--fc); margin-bottom: 0.6875rem; }
.fcard p { font-size: 0.96rem; line-height: 1.62; color: var(--text-body); }
.fcard .fcard-app { margin-top: 0.9375rem; padding-top: 0.8125rem; border-top: 0.0625rem dashed var(--hairline); font-family: var(--font-body); font-size: 0.84rem; font-style: italic; color: var(--text-muted); }
.fcard .fcard-app b { color: var(--fc); font-weight: 600; font-style: normal; font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 0.25rem; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how { background: linear-gradient(180deg, var(--warm-white-alt), var(--blue-wash)); overflow: hidden; }
.how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.625rem; position: relative; }
.how-path { position: absolute; top: 2.75rem; left: 12%; right: 12%; height: 0.125rem; z-index: 0; }
.how-path svg { width: 100%; height: 1.625rem; overflow: visible; }
.how-path path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 7 9; stroke-linecap: round; opacity: 0.6; }
.how-step { position: relative; z-index: 1; text-align: center; padding: 0 0.5rem; }
.how-num {
  width: 5.5rem; height: 5.5rem; margin: 0 auto 1.5rem; border-radius: 50%;
  background: var(--white); border: 0.125rem solid var(--gold-pale);
  display: grid; place-items: center; position: relative;
  font-family: var(--font-display); font-size: 1.9rem; color: var(--gold);
  box-shadow: var(--shadow-soft);
  transition: transform 0.45s var(--ease-spring), border-color 0.4s;
}
.how-step:hover .how-num { transform: scale(1.1); border-color: var(--gold); }
.how-num::after { content: ""; position: absolute; inset: -0.6875rem; border-radius: 50%; border: 0.0938rem dashed rgba(212, 168, 67, 0.4); animation: spinSlow 26s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.how-step h3 { font-family: var(--font-ui); font-size: 1.12rem; font-weight: 600; margin-bottom: 0.625rem; }
.how-step p { font-size: 0.94rem; color: var(--text-muted); max-width: 18.75rem; margin-inline: auto; }
.how-mini { margin: 1.375rem auto 0; max-width: 15.625rem; background: var(--white); border: 0.0625rem solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-soft); padding: 0.875rem 1rem; text-align: left; font-family: var(--font-ui); transition: transform 0.45s var(--ease-spring); }
.how-step:hover .how-mini { transform: translateY(-0.375rem); }
.how-mini .hm-k { font-size: 0.56rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4375rem; }
.how-mini .hm-line { height: 0.4375rem; border-radius: 0.25rem; background: var(--blue-wash); margin-bottom: 0.375rem; position: relative; overflow: hidden; }
.how-mini .hm-line i { position: absolute; inset: 0; border-radius: 0.25rem; width: var(--w, 60%); }

/* ============================================================
   BETA / community form band
   ============================================================ */
/* Always-dark band: hard-code the navy so the night theme (which flips
   --navy-deep to near-white and --white to dark navy) can't invert it
   out from under the white text. */
.beta-band { background: linear-gradient(170deg, #1B2647, #1d2a52 50%, #2A3A6E); color: rgba(255, 255, 255, 0.8); overflow: hidden; }
.beta-band h2 { color: #fff; }
.beta-band .lead { color: rgba(255, 255, 255, 0.74); }
.beta-band .kicker { color: var(--gold-soft); }
.beta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.25rem, 5vw, 5rem); align-items: center; }
.beta-perks { display: grid; gap: 1rem; margin-top: 1.875rem; }
.beta-perk { display: flex; gap: 0.875rem; align-items: flex-start; }
.beta-perk .icon { flex: none; width: 3.125rem; height: 3.125rem; border-radius: 0.9375rem; background: rgba(212, 168, 67, 0.16); display: grid; place-items: center; font-size: 1.35rem; }
.beta-perk strong { display: block; font-family: var(--font-ui); font-size: 0.97rem; font-weight: 600; color: #fff; margin-bottom: 0.125rem; }
.beta-perk span { font-size: 0.9rem; color: rgba(255, 255, 255, 0.62); }

.form-card {
  background: rgba(255, 255, 255, 0.07);
  border: 0.0625rem solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(1rem);
  border-radius: var(--r-xl); padding: clamp(1.75rem, 3.4vw, 2.75rem);
  box-shadow: 0 2.5rem 5.625rem -1.875rem rgba(0, 0, 0, 0.4);
}
.form-card.on-light { background: var(--white); border-color: var(--hairline); box-shadow: var(--shadow-lift); }
/* The default .form-card is a dark glass panel in every theme, so its text uses
   literal white; the .on-light variant below re-themes it properly. */
.form-title { font-family: var(--font-display); font-size: 1.5rem; color: #fff; margin-bottom: 0.375rem; }
.form-sub { font-size: 0.92rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 1.625rem; }
/* The 0.375rem above is title->subtitle spacing; the real separation lives on
   .form-sub. Cards that omit the subtitle (founding-nurses) were left with the
   title crowding the first field label, so restore it here. */
.form-title + form { display: block; margin-top: 1.5rem; }
.form-card.on-light .form-title { color: var(--navy-deep); }
.form-card.on-light .form-sub { color: var(--text-muted); }
.field { margin-bottom: 1.125rem; }
.field label { display: block; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); margin-bottom: 0.5rem; }
.form-card.on-light .field label { color: var(--navy-deep); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 0.97rem;
  color: #fff; background-color: rgba(255, 255, 255, 0.08);
  border: 0.0938rem solid rgba(255, 255, 255, 0.18);
  border-radius: 0.875rem; padding: 0.875rem 1.0625rem;
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
  appearance: none; -webkit-appearance: none; outline: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E8C672' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem; }
.field select option { color: var(--navy-deep); background: var(--white); }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, 0.38); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-soft); background-color: rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 0.25rem rgba(212, 168, 67, 0.15); }
.form-card.on-light .field input, .form-card.on-light .field select, .form-card.on-light .field textarea { color: var(--navy-deep); background-color: var(--blue-mist); border-color: rgba(27, 38, 71, 0.12); }
.form-card.on-light .field input::placeholder, .form-card.on-light .field textarea::placeholder { color: var(--text-muted); }
.form-card.on-light .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A6FA5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.form-card.on-light .field input:focus, .form-card.on-light .field select:focus, .form-card.on-light .field textarea:focus { border-color: var(--gold); background-color: var(--white); }
.form-submit { width: 100%; margin-top: 0.5rem; }
.form-note { margin-top: 1rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.45); text-align: center; }
.form-card.on-light .form-note { color: var(--text-muted); }
.form-success { display: none; text-align: center; padding: 2.25rem 0.625rem; }
.form-success.show { display: block; animation: successIn 0.7s var(--ease-spring); }
@keyframes successIn { from { opacity: 0; transform: scale(0.9) translateY(0.875rem); } to { opacity: 1; transform: none; } }
.form-success .fs-icon { width: 4.75rem; height: 4.75rem; margin: 0 auto 1.25rem; border-radius: 50%; background: rgba(47, 180, 122, 0.16); display: grid; place-items: center; }
.form-success .fs-icon svg { width: 2.25rem; height: 2.25rem; stroke: var(--green); }
.form-success h3 { font-family: var(--font-display); color: #fff; margin-bottom: 0.5rem; font-size: 1.4rem; }
.form-card.on-light .form-success h3 { color: var(--navy-deep); }
.form-success p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.65); }
.form-card.on-light .form-success p { color: var(--text-muted); }
.form-error { display: none; margin-top: 0.875rem; font-size: 0.85rem; color: #f7b2a1; text-align: center; }
.form-error.show { display: block; }
.form-card.on-light .form-error { color: var(--band-priority); }

/* ============================================================
   PARTNERSHIPS band
   ============================================================ */
.partners-band { position: relative; overflow: hidden; background: var(--warm-white); }
.partner-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.375rem; margin-bottom: 3rem; }
.partner-card { background: var(--white); border: 0.0625rem solid var(--hairline); border-radius: var(--r-lg); padding: 1.875rem 1.75rem; transition: transform 0.45s var(--ease-spring), box-shadow 0.45s; }
.partner-card:hover { transform: translateY(-0.5rem); box-shadow: var(--shadow-lift); }
.partner-card .icon { width: 4rem; height: 4rem; border-radius: 1.25rem; background: var(--gold-pale); display: grid; place-items: center; font-size: 1.8rem; margin-bottom: 1.125rem; }
.partner-card h3 { font-family: var(--font-ui); font-size: 1.08rem; font-weight: 600; margin-bottom: 0.5rem; }
.partner-card p { font-size: 0.92rem; color: var(--text-muted); }

/* ============================================================
   FINAL CTA — dawn returns
   ============================================================ */
.final-cta {
  position: relative; overflow: hidden; text-align: center;
  background: var(--finalcta-bg);
}
.final-cta h2 { max-width: 50rem; margin-inline: auto; }
.final-cta .lead { max-width: 35rem; margin: 1.375rem auto 2.375rem; }
.final-ctas { display: flex; flex-wrap: wrap; gap: 0.875rem; justify-content: center; }
.store-badges { display: flex; flex-wrap: wrap; gap: 0.8125rem; justify-content: center; margin-top: 2.75rem; }
.store-badge {
  display: inline-flex; align-items: center; gap: 0.6875rem;
  background: var(--navy-deep); color: var(--white);
  border-radius: 0.875rem; padding: 0.6875rem 1.25rem; opacity: 0.88;
  transition: transform 0.35s var(--ease-spring), opacity 0.3s;
}
.store-badge:hover { transform: translateY(-0.1875rem); opacity: 1; }
.store-badge svg { width: 1.5rem; height: 1.5rem; }
.store-badge .sb-text { text-align: left; line-height: 1.2; }
.store-badge .sb-text small { display: block; font-size: 0.6rem; opacity: 0.7; font-family: var(--font-body); }
.store-badge .sb-text strong { font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600; }
.store-soon { font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); width: 100%; text-align: center; margin-top: 0.625rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy-ink); color: rgba(255, 255, 255, 0.6); padding: 4.375rem 0 2.25rem; position: relative; overflow: hidden; }
.footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 0.0625rem; background: linear-gradient(90deg, transparent, rgba(212, 168, 67, 0.5), transparent); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; margin-bottom: 3.25rem; }
.footer-brand img { width: 3.25rem; border-radius: 0.875rem; margin-bottom: 1rem; background: #fff; padding: 0.25rem; }
.footer-brand p { font-size: 0.9rem; max-width: 17.5rem; line-height: 1.65; }
.footer h4 { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1.125rem; }
.footer-links { display: grid; gap: 0.625rem; }
.footer-links a { font-size: 0.92rem; color: rgba(255, 255, 255, 0.6); transition: color 0.25s, padding-left 0.3s; }
.footer-links a:hover { color: #fff; padding-left: 0.3125rem; }
.footer-social { display: flex; gap: 0.625rem; margin-top: 1.125rem; }
.footer-social a {
  width: 2.5rem; height: 2.5rem; border-radius: 0.75rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.14); display: grid; place-items: center;
  transition: background 0.3s, border-color 0.3s, transform 0.35s var(--ease-spring);
}
.footer-social a:hover { background: rgba(212, 168, 67, 0.14); border-color: var(--gold); transform: translateY(-0.1875rem); }
.footer-social svg { width: 1.0625rem; height: 1.0625rem; fill: rgba(255, 255, 255, 0.75); }
.footer-bottom { border-top: 0.0625rem solid rgba(255, 255, 255, 0.08); padding-top: 1.625rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: center; justify-content: space-between; font-size: 0.8rem; color: rgba(255, 255, 255, 0.38); }
.footer-bottom .legal { display: flex; flex-wrap: wrap; gap: 1.125rem; }
.footer-bottom a { transition: color 0.25s; }
.footer-bottom a:hover { color: var(--gold-soft); }
.footer-heart { color: var(--coral-light); }

/* ============================================================
   SUBPAGE scaffolding
   ============================================================ */
.page-hero {
  padding-top: clamp(6.75rem, 14vh, 9.75rem);
  padding-bottom: clamp(2.5rem, 5.5vw, 4.5rem);
  background: var(--pagehero-bg);
  overflow: hidden;
}
.page-hero h1 { margin: 1.25rem 0 1.125rem; max-width: 50rem; }
.page-hero .lead { max-width: 40rem; }
.page-hero.centered { text-align: center; }
.page-hero.centered h1, .page-hero.centered .lead { margin-inline: auto; }
.prose { max-width: 47.5rem; }
.prose h2 { font-size: 1.5rem; margin: 2.75rem 0 0.875rem; }
.prose h3 { font-family: var(--font-ui); font-size: 1.08rem; font-weight: 600; margin: 1.75rem 0 0.625rem; }
.prose p, .prose li { font-size: 0.99rem; line-height: 1.8; margin-bottom: 0.875rem; color: var(--text-body); }
.prose ul { list-style: none; padding-left: 0.25rem; }
.prose ul li { padding-left: 1.625rem; position: relative; margin-bottom: 0.5625rem; }
.prose ul li::before { content: ""; position: absolute; left: 0.25rem; top: 0.75rem; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--gold); }
.prose .legal-updated { font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.875rem; }
.prose .callout { background: var(--blue-wash); border-left: 0.1875rem solid var(--blue); border-radius: 0 0.875rem 0.875rem 0; padding: 1.125rem 1.375rem; margin: 1.5rem 0; font-size: 0.94rem; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.25rem, 5vw, 4.5rem); align-items: start; }
.contact-ways { display: grid; gap: 1rem; margin-top: 2rem; }
.contact-way { display: flex; gap: 1rem; align-items: center; background: var(--white); border: 0.0625rem solid var(--hairline); border-radius: var(--r-md); padding: 1.125rem 1.25rem; transition: transform 0.4s var(--ease-spring), box-shadow 0.4s; }
.contact-way:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-soft); }
.contact-way .icon { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 1.0625rem; display: grid; place-items: center; font-size: 1.45rem; background: var(--blue-wash); }
.contact-way strong { display: block; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600; color: var(--navy-deep); }
.contact-way span { font-size: 0.86rem; color: var(--text-muted); }

/* Login page */
.login-wrap { min-height: 100svh; display: grid; place-items: center; padding: 8.125rem 5vw 5rem; position: relative; overflow: hidden; background: var(--pagehero-bg); }
.login-card { width: min(27.5rem, 100%); background: var(--white); border-radius: var(--r-xl); padding: clamp(2rem, 4vw, 3rem); box-shadow: var(--shadow-lift); text-align: center; position: relative; }
.login-card img { width: 4.5rem; margin: 0 auto 1.125rem; border-radius: 1.125rem; mix-blend-mode: multiply; }
.login-card h1 { font-size: 1.7rem; margin-bottom: 0.625rem; }
.login-card > p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.625rem; }
.login-soon { background: var(--gold-pale); border-radius: 1rem; padding: 1rem 1.125rem; font-size: 0.88rem; color: #7d6420; margin-bottom: 1.625rem; display: flex; gap: 0.625rem; align-items: flex-start; text-align: left; }

/* Stats counter strip */
.stats-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.125rem; }
.stat-tile { text-align: center; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(0.5rem); border: 0.0625rem solid var(--hairline); border-radius: var(--r-lg); padding: 1.875rem 1.125rem; }
.stat-tile .num { font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 2.9rem); color: var(--navy-deep); line-height: 1.1; }
.stat-tile .num em { font-style: normal; color: var(--gold); }
.stat-tile .lbl { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 0.375rem; }

/* Affirmation marquee */
.marquee-band { overflow: hidden; padding-block: 1.625rem; border-block: 0.0625rem solid var(--hairline); background: var(--warm-white-alt); }
.marquee { display: flex; gap: 0; width: max-content; animation: marqueeScroll 60s linear infinite; }
.marquee-band:hover .marquee { animation-play-state: paused; }
.marquee span { font-family: var(--font-display); font-style: italic; font-size: 1.06rem; color: var(--text-muted); padding-inline: 1.875rem; white-space: nowrap; }
.marquee span::after { content: "✦"; color: var(--gold); margin-left: 3.75rem; font-style: normal; font-size: 0.8rem; }
@keyframes marqueeScroll { to { transform: translateX(-50%); } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
  .nav-links, .nav-actions .nav-login { display: none; }
  .nav-burger { display: flex; }
  .hero-grid, .movement-grid, .beta-grid, .feature-flag, .contact-grid { grid-template-columns: 1fr; }
  .feature-flag.flip > .ff-visual { order: 0; }
  .hero { min-height: auto; }
  .hero-visual { margin-top: 1.625rem; }
  .phone-back { right: clamp(-3.75rem, -2vw, -1.25rem); }
  .founder-card { grid-template-columns: 1fr; }
  .founder-photo { min-height: 18.75rem; }
  .how-steps { grid-template-columns: 1fr; gap: 2.75rem; }
  .how-path { display: none; }
  .movement-quote { position: static; max-width: none; margin-top: 1.125rem; }
  .movement-img::before { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .fgrid, .partner-cards, .stats-strip { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-ctas .btn, .final-ctas .btn { width: 100%; justify-content: center; }
  .float-chip { display: none; }
  .phone-back { display: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* --- Cleaner mobile header: logo + theme dial + burger only --- */
  .nav-actions .btn-gold { display: none; } /* the gold CTA lives in the menu */
  .nav-inner { gap: 0.625rem; }
  .nav-actions { gap: 0.375rem; }
  .nav-burger { width: 2.75rem; height: 2.75rem; padding: 0; align-items: center; justify-content: center; }
  .nav.scrolled { padding-block: 0.5rem; }

  /* --- Hero rhythm: a touch tighter, headline breathes --- */
  .hero { padding-top: clamp(6rem, 16vh, 7.5rem); }
  .hero-copy .lead { margin-bottom: 1.5rem; }
  .hero-proof { gap: 0.5rem 1rem; }
  .hero-proof-item { font-size: 0.8rem; }

  /* --- Section heads scale down --- */
  .section-head { margin-bottom: 1.75rem; }

  /* --- Founder card: comfortable portrait panel --- */
  .founder-photo { min-height: 16rem; }
  .founder-avatar { width: 8.5rem; height: 8.5rem; font-size: 2.8rem; }

  /* --- Forms: 16px font stops iOS zoom-on-focus; keep chevron gutter --- */
  .field input, .field select, .field textarea { font-size: 16px; }
  .form-card { padding: 1.5rem 1.25rem; }

  /* --- Marquee: smaller so it doesn't shout --- */
  .marquee span { font-size: 0.95rem; padding-inline: 1.25rem; }
}
@media (max-width: 480px) {
  .nav-logo-text span { display: none; } /* tagline wraps badly at tiny widths */
  .nav-logo img { width: 2.5rem; height: 2.5rem; }
  .nav-logo-text strong { font-size: 0.95rem; }
  .container, .container-narrow { width: 91vw; }
  .store-badges { gap: 0.625rem; }
}

/* Short laptop screens (e.g. 1366×768, 125%-scaled 1920s): keep the whole
   hero story visible without scrolling. */
@media (min-width: 921px) and (max-height: 820px) {
  .hero { padding-top: 5rem; }
  .hero .display-xl { font-size: clamp(2.2rem, 4.2vw, 3.2rem); }
  .hero-copy .lead { font-size: 1.05rem; margin-bottom: 1.375rem; }
  .hero-ctas { margin-bottom: 1.5rem; }
  .hero-ctas .btn-lg { padding: 0.875rem 1.625rem; font-size: 0.95rem; }
  .hero-ecg { display: none; }
  .float-chip { padding: 0.625rem 0.875rem; }
  .float-chip .fc-emoji { font-size: 1.15rem; }
}

/* ============================================================
   LIVING THEME — night & evening patches, sky, dial
   ============================================================ */

/* Night: components whose light/dark semantics invert */
[data-theme="night"] .btn-navy { background: #24355C; color: #EDF1FA; box-shadow: 0 0.75rem 2.5rem -0.75rem rgba(0, 0, 0, 0.6); }
[data-theme="night"] .btn-navy:hover { background: #2D4170; }
[data-theme="night"] .btn-ghost { color: #E9EDF6; border-color: rgba(233, 237, 246, 0.28); background: rgba(19, 31, 56, 0.5); }
[data-theme="night"] .btn-ghost:hover { border-color: var(--gold-soft); color: var(--gold-soft); background: rgba(19, 31, 56, 0.8); }
[data-theme="night"] .nav-logo img,
[data-theme="night"] .login-card img { mix-blend-mode: normal; background: #fff; padding: 0.1875rem; }
[data-theme="night"] .accent-italic.on-light { color: var(--gold-soft); }
[data-theme="night"] .movement-quote { background: rgba(19, 31, 56, 0.94); color: #E9EDF6; }
[data-theme="night"] .stat-tile { background: rgba(19, 31, 56, 0.7); }
[data-theme="night"] .seen { box-shadow: inset 0 0.0625rem 0 rgba(170, 190, 235, 0.08); }
[data-theme="night"] .orb { opacity: 0.4; }
[data-theme="night"] .founder-photo .photo-note { color: rgba(255, 255, 255, 0.4); }
[data-theme="night"] .hero-ecg path { opacity: 0.8; }
[data-theme="night"] .fcard:hover { box-shadow: 0 1.875rem 4.375rem -1.5rem rgba(0, 0, 0, 0.7); }
[data-theme="night"] .form-card.on-light { box-shadow: 0 2.5rem 5.625rem -1.875rem rgba(0, 0, 0, 0.55); }

/* Sky: stars + moon live in the hero; CSS gates them to night */
.stars, .moon { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
[data-theme="night"] .stars, [data-theme="night"] .moon { opacity: 1; }
.star { position: absolute; width: 0.125rem; height: 0.125rem; border-radius: 50%; background: #DCE6FF; opacity: 0.7; animation: starTwinkle var(--std, 4s) ease-in-out var(--stdel, 0s) infinite; }
.star.big { width: 0.1875rem; height: 0.1875rem; box-shadow: 0 0 0.375rem rgba(220, 230, 255, 0.8); }
@keyframes starTwinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }
.moon { inset: auto; top: 12%; right: 10%; width: clamp(4rem, 6vw, 6rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #F4F7FF, #C9D6F2 60%, #9FB2D8);
  box-shadow: 0 0 3.75rem 0.9375rem rgba(200, 215, 250, 0.25), inset -0.625rem -0.5rem 1.5rem rgba(120, 140, 190, 0.45);
}
[data-theme]:not([data-theme="night"]) .hero .firefly { display: none; }
[data-theme="night"] .sun { display: none; }

/* Theme dial in the nav */
.theme-dial {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-body); border: 0.0938rem solid var(--hairline);
  background: var(--chip-bg); border-radius: 6.25rem; padding: 0.5rem 0.8125rem;
  transition: border-color 0.3s, color 0.3s, transform 0.35s var(--ease-spring);
  cursor: pointer;
}
.theme-dial:hover { border-color: var(--gold); color: var(--navy-deep); transform: translateY(-0.0625rem); }
.theme-dial svg { width: 0.9375rem; height: 0.9375rem; flex: none; }
.theme-dial .td-label { line-height: 1; }
@media (max-width: 560px) { .theme-dial .td-label { display: none; } .theme-dial { padding: 0.5rem 0.625rem; } }

/* ============================================================
   BREATHE WITH US — interactive overlay
   ============================================================ */
.breathe-cta {
  display: inline-flex; align-items: center; gap: 0.625rem; margin-top: 1.875rem;
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; color: #d7f3f1;
  border: 0.0938rem solid rgba(85, 194, 189, 0.45); border-radius: 6.25rem; padding: 0.875rem 1.75rem;
  background: rgba(45, 155, 150, 0.14); cursor: pointer;
  transition: background 0.3s, border-color 0.3s, transform 0.35s var(--ease-spring);
}
.breathe-cta:hover { background: rgba(45, 155, 150, 0.28); border-color: var(--teal-light); transform: translateY(-0.125rem); }
.breathe-overlay {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(7, 16, 20, 0.88); backdrop-filter: blur(0.875rem);
  opacity: 0; pointer-events: none; transition: opacity 0.7s ease;
}
.breathe-overlay.open { opacity: 1; pointer-events: auto; }
.breathe-stage { text-align: center; padding: 1.25rem; }
.breathe-orb { position: relative; width: clamp(13rem, 30vh, 17.5rem); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.breathe-orb .ring { position: absolute; inset: 0; border-radius: 50%; border: 0.0938rem solid rgba(85, 194, 189, 0.35); transform: scale(var(--bs, 0.7)); transition: transform var(--bd, 4s) cubic-bezier(0.45, 0, 0.55, 1); }
.breathe-orb .ring:nth-child(2) { inset: -7%; opacity: 0.55; }
.breathe-orb .ring:nth-child(3) { inset: -14%; opacity: 0.3; }
.breathe-orb .core {
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, rgba(85, 194, 189, 0.95), rgba(45, 155, 150, 0.4) 62%, rgba(45, 155, 150, 0.12));
  box-shadow: 0 0 5.625rem 0.75rem rgba(45, 155, 150, 0.4);
  transform: scale(var(--bs, 0.7)); transition: transform var(--bd, 4s) cubic-bezier(0.45, 0, 0.55, 1);
}
.breathe-phase { margin-top: 1.75rem; font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: #EAFFFD; min-height: 2.2em; }
.breathe-count { font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.2em; color: rgba(234, 255, 253, 0.6); text-transform: uppercase; margin-top: 0.375rem; }
.breathe-done { display: none; margin-top: 1.5rem; }
.breathe-done.show { display: block; animation: successIn 0.8s var(--ease-spring); }
.breathe-skip { position: absolute; top: 1.5rem; right: 1.75rem; font-family: var(--font-ui); font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); cursor: pointer; padding: 0.625rem; }
.breathe-skip:hover { color: #fff; }

/* ============================================================
   FEATURE THEATER — sticky phone, scrolling stories
   ============================================================ */
.theater-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2.5rem, 5vw, 5.5rem); }
.theater-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.375rem; }
.theater-stage .phone { width: min(clamp(15rem, 19vw, 18.125rem), 40svh); }
.theater-glow { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; filter: blur(5rem); opacity: 0.45; background: var(--tg, var(--blue)); transition: background 0.9s ease; }
.theater-shot { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 0.65s ease, transform 0.9s var(--ease-spring); }
.theater-shot.on { opacity: 1; transform: none; }
.theater-dots { display: flex; gap: 0.4375rem; }
.theater-dots i { width: 0.375rem; height: 0.375rem; border-radius: 0.375rem; background: var(--hairline); transition: width 0.4s var(--ease-spring), background 0.4s; }
.theater-dots i.on { width: 1.25rem; background: var(--gold); }
.theater-item { min-height: 92svh; display: flex; flex-direction: column; justify-content: center; padding-block: 3rem; position: relative; }
.theater-item .m-phone { display: none; }
.ff-quote { margin-top: 1.5rem; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--text-muted); }
@media (max-width: 920px) {
  .theater-grid { grid-template-columns: 1fr; }
  .theater-stage { display: none; }
  .theater-item { min-height: 0; padding-block: 2.5rem; }
  .theater-item .m-phone { display: flex; justify-content: center; margin: 0 0 1.75rem; }
  .theater-item .m-phone .phone { width: min(15rem, 70vw); }
}

/* ============================================================
   EDITORIAL CRAFT — ghost numerals, word reveal, tilt
   ============================================================ */
.ghost-num {
  position: absolute; top: clamp(0.5rem, 2vw, 2rem); right: clamp(0.5rem, 3vw, 3rem); z-index: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(6rem, 14vw, 13rem); line-height: 1; color: var(--navy-deep);
  opacity: 0.045; pointer-events: none; user-select: none;
}
[data-theme="night"] .ghost-num { opacity: 0.07; }
.seen .ghost-num, .beta-band .ghost-num, .sanctuary-band .ghost-num { color: #fff; opacity: 0.05; }

.w-reveal .w { display: inline-block; opacity: 0; filter: blur(0.5rem); transform: translateY(0.35em); transition: opacity 0.7s ease, filter 0.8s ease, transform 0.8s var(--ease-spring); transition-delay: var(--wd, 0s); }
.w-reveal.in .w { opacity: 1; filter: blur(0); transform: none; }
@media (prefers-reduced-motion: reduce) { .w-reveal .w { opacity: 1; filter: none; transform: none; transition: none; } }

.tilt { transform: perspective(56rem) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform 0.25s ease; will-change: transform; }

/* Ambience toggle (sanctuary) */
.amb-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 0.875rem;
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; color: rgba(240, 244, 243, 0.7);
  border: 0.0938rem solid rgba(240, 244, 243, 0.25); border-radius: 6.25rem; padding: 0.625rem 1.125rem;
  background: transparent; cursor: pointer; transition: color 0.3s, border-color 0.3s;
}
.amb-toggle:hover, .amb-toggle.on { color: var(--firefly); border-color: rgba(232, 181, 98, 0.55); }
.amb-toggle .amb-bars { display: inline-flex; align-items: flex-end; gap: 0.125rem; height: 0.75rem; }
.amb-toggle .amb-bars i { width: 0.125rem; border-radius: 0.125rem; background: currentColor; height: 30%; }
.amb-toggle.on .amb-bars i { animation: eqBar 1.2s ease-in-out infinite alternate; }
.amb-toggle.on .amb-bars i:nth-child(2) { animation-delay: 0.2s; }
.amb-toggle.on .amb-bars i:nth-child(3) { animation-delay: 0.4s; }

/* Soft cross-document page transitions (Chromium; no-op elsewhere) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.35s; }
::view-transition-new(root) { animation-duration: 0.45s; }

/* Founder photo (drop assets/img/founder.jpg to activate; falls back to monogram) */
.founder-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: none; }
.founder-photo.has-photo .founder-img { display: block; }
.founder-photo.has-photo .founder-avatar,
.founder-photo.has-photo .photo-note,
.founder-photo.has-photo .halo { display: none; }
.founder-photo.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 55%, rgba(27, 38, 71, 0.35)); }

/* ============================================================
   MOBILE OVERRIDES for living-theme components
   (placed last so they win over the base rules above)
   ============================================================ */
@media (max-width: 640px) {
  /* Theme dial → clean round icon button in the header */
  .theme-dial { width: 2.625rem; height: 2.625rem; padding: 0; justify-content: center; border-radius: 50%; }
  .theme-dial .td-label { display: none; }
  .theme-dial svg { width: 1.15rem; height: 1.15rem; }

  /* Keep the night moon out of the headline — small, tucked top-right */
  .hero .moon { width: 2.5rem; top: 4.25rem; right: 1rem; }

  /* Ghost numerals: smaller and fainter so they never crowd text */
  .ghost-num { font-size: clamp(4rem, 24vw, 6.5rem); opacity: 0.038; top: 0.75rem; right: 1rem; }
  [data-theme="night"] .ghost-num { opacity: 0.06; }

  /* Breathe + ambience controls stack full-width */
  .breathe-cta, .amb-toggle { display: flex; width: 100%; justify-content: center; margin-left: 0; }
  .amb-toggle { margin-top: 0.625rem; }

  /* Footer links: comfortable tap targets on phones (>=44px per WCAG 2.5.5) */
  .footer-links { gap: 0.25rem; }
  .footer-links a { display: flex; align-items: center; min-height: 44px; }
  .footer-bottom { gap: 0.875rem 1.25rem; }
  .footer-bottom .legal { gap: 0.25rem 1.5rem; }
  .footer-bottom .legal a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Standalone icon/link tap targets reach the 44px minimum */
  .footer-social a { width: 44px; height: 44px; }
  .hero-nurse-link { padding-block: 0.5rem; }
  .nav-logo { min-height: 44px; }
  .nav-burger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .theme-dial { min-width: 44px; min-height: 44px; justify-content: center; }

  /* Small decorative labels stay legible on phones */
  .cred-chip { font-size: 0.82rem; }
}

/* ============================================================
   REVISION (mission/movement positioning): lifestyle hero,
   blurred app glimpse, mission/vision/purpose cards, benefit band
   ============================================================ */

/* Lifestyle image in the hero (replaces the phone stack) */
.hero-figure { position: relative; width: min(30rem, 100%); margin-inline: auto; }
.hero-figure > img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--shadow-lift); position: relative; z-index: 1; }
.hero-figure::before { content: ""; position: absolute; inset: -1.25rem -1.25rem auto auto; width: 56%; height: 56%; border-radius: var(--r-xl); border: 0.125rem solid var(--gold-pale); z-index: 0; }
.hero-figure::after { content: ""; position: absolute; left: -2.5rem; bottom: -2.5rem; width: 65%; height: 65%; border-radius: 50%; background: radial-gradient(circle, rgba(232, 198, 114, 0.4), transparent 70%); filter: blur(1.25rem); z-index: 0; }
[data-theme="night"] .hero-figure::before { border-color: rgba(232, 181, 98, 0.4); }

/* Blurred "glimpse inside" mini-device — partial preview, IP-safe */
.glimpse-card { position: absolute; right: clamp(-0.5rem, -1vw, 0.5rem); bottom: clamp(-1.75rem, -3vw, -1rem); width: clamp(7.5rem, 12vw, 9.75rem); aspect-ratio: 9 / 18.5; border-radius: 1.75rem; overflow: hidden; border: 0.4rem solid #0d1220; box-shadow: var(--shadow-lift); z-index: 3; animation: floatY 7s ease-in-out infinite; }
.glimpse-card img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); }
.glimpse-card .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 30, 36, 0.05) 35%, rgba(12, 30, 36, 0.66)); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.85rem; }
.glimpse-card .veil span { font-family: var(--font-ui); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.03em; color: #fff; display: inline-flex; gap: 0.3rem; align-items: center; text-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.5); }
@media (max-width: 920px) { .glimpse-card { width: clamp(7rem, 26vw, 9rem); right: 4%; } }
@media (max-width: 480px) { .glimpse-card { display: none; } }

/* Mission · Vision · Purpose */
.mvp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.375rem; }
.mvp-card { position: relative; background: var(--white); border: 0.0625rem solid var(--hairline); border-radius: var(--r-lg); padding: 2.25rem 2rem; overflow: hidden; transition: transform 0.45s var(--ease-spring), box-shadow 0.45s; }
.mvp-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 0.25rem; background: linear-gradient(90deg, var(--mc, var(--gold)), transparent 85%); }
.mvp-card:hover { transform: translateY(-0.5rem); box-shadow: var(--shadow-lift); }
.mvp-icon { width: 3.5rem; height: 3.5rem; border-radius: 1.125rem; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 1.125rem; background: color-mix(in srgb, var(--mc, var(--gold)) 14%, transparent); }
.mvp-card h3 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 0.75rem; }
.mvp-card p { font-size: 0.96rem; line-height: 1.7; color: var(--text-body); }
@media (max-width: 880px) { .mvp-grid { grid-template-columns: 1fr; } }

/* Benefit category card: optional lifestyle image header */
.fcard.has-img { padding: 0; }
.fcard.has-img .fc-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.fcard.has-img .fc-body { padding: 1.5rem 1.625rem 1.625rem; }
.fcard.has-img .fcard-icon { margin-top: -3rem; position: relative; border: 0.25rem solid var(--white); background: var(--white); box-shadow: var(--shadow-soft); }
[data-theme="night"] .fcard.has-img .fcard-icon { border-color: var(--white); }

/* Lifestyle band: full-bleed image with overlaid copy */
.life-band { position: relative; overflow: hidden; color: #fff; }
.life-band .life-bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; z-index: 0; }
.life-band .life-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(110deg, rgba(27, 38, 71, 0.92) 0%, rgba(27, 38, 71, 0.72) 42%, rgba(27, 38, 71, 0.28) 100%); }
.life-band .container { position: relative; z-index: 2; }
.life-band h2 { color: #fff; }
.life-band .lead { color: rgba(255, 255, 255, 0.82); }
.life-band .kicker { color: var(--gold-soft); }
@media (max-width: 720px) { .life-band .life-veil { background: linear-gradient(180deg, rgba(27, 38, 71, 0.82), rgba(27, 38, 71, 0.92)); } }

/* ============================================================
   "THE EXHALE" — cinematic scroll-scrubbed hero
   ============================================================ */
.hero-cine { position: relative; height: 320vh; background: #0a0e1a; }
.hero-cine-stage { position: sticky; top: 0; height: 100vh; min-height: 40rem; overflow: hidden; display: flex; align-items: center; }
.hero-cine-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #0a0e1a url("../assets/img/hero-exhale/poster-start.jpg") center/cover no-repeat; }
.hero-cine-static { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.hero-cine-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(10,14,26,0.86) 0%, rgba(10,14,26,0.6) 32%, rgba(10,14,26,0.15) 58%, transparent 76%),
    linear-gradient(0deg, rgba(10,14,26,0.5) 0%, transparent 26%);
}
.hero-cine-copy { position: relative; z-index: 2; width: min(80rem, 92vw); margin-inline: auto; max-width: none; }
.hero-cine-copy .kicker { color: var(--gold-soft); }
.hero-cine-copy .kicker::before { background: var(--gold-soft); }
.hero-cine-copy h1 { color: #fff; max-width: 16ch; margin: 1.125rem 0 1.25rem; text-shadow: 0 0.125rem 1.5rem rgba(0,0,0,0.35); }
.hero-cine-copy h1 em { color: var(--gold-soft); }
.hero-cine-copy .lead { color: rgba(255,255,255,0.86); max-width: 34rem; margin-bottom: 1.75rem; text-shadow: 0 0.0625rem 0.75rem rgba(0,0,0,0.35); }
.hero-cine-copy .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.hero-cine-copy .hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.625rem; }
.hero-cine-copy .hero-proof-item { color: rgba(255,255,255,0.72); }
.hero-cine-copy .hero-proof-item strong { color: #fff; }
.hero-cine-copy .hero-proof-item .dot { background: var(--green); box-shadow: 0 0 0 0.25rem rgba(47,180,122,0.22); }

.hero-cine-hint { position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); z-index: 2; text-align: center; font-family: var(--font-ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.hero-cine-hint .hcb { display: block; width: 9rem; height: 0.1875rem; border-radius: 0.1875rem; background: rgba(255,255,255,0.18); margin: 0.625rem auto 0; overflow: hidden; }
.hero-cine-hint .hcb i { display: block; height: 100%; width: 0; background: var(--gold-soft); border-radius: 0.1875rem; }

/* the nav over the cinematic hero stays readable while transparent */
.hero-cine + .marquee-band { position: relative; z-index: 3; }

/* Static fallback: phones, reduced-motion, or data-saver → crisp golden still, no scrub */
@media (prefers-reduced-motion: reduce), (max-width: 920px) {
  .hero-cine { height: auto; }
  .hero-cine-stage { position: relative; height: auto; min-height: 100svh; padding-block: clamp(7rem, 16vh, 9rem); }
  .hero-cine-canvas { display: none; }
  .hero-cine-static { display: block; }
  .hero-cine-hint { display: none; }
  .hero-cine-scrim { background: linear-gradient(180deg, rgba(10,14,26,0.5) 0%, rgba(10,14,26,0.35) 38%, rgba(10,14,26,0.78) 100%); }
  .hero-cine-copy h1 { max-width: 100%; }
}
@media (max-width: 640px) {
  .hero-cine-copy .hero-ctas .btn { width: 100%; justify-content: center; }
}

/* Nav over the dark cinematic hero — light text while transparent */
.nav.over-dark .nav-logo-text strong { color: #fff; }
.nav.over-dark .nav-logo-text span { color: var(--gold-soft); }
.nav.over-dark .nav-logo img { mix-blend-mode: normal; background: #fff; padding: 0.1875rem; }
.nav.over-dark .nav-links a { color: rgba(255, 255, 255, 0.82); }
.nav.over-dark .nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.nav.over-dark .nav-links a.active { color: #fff; }
.nav.over-dark .theme-dial { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.1); }
.nav.over-dark .theme-dial:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.nav.over-dark .nav-burger span { background: #fff; }

/* Clarifying line under the hero lead (launch correction #4) */
.hero-cine-copy .hero-clarify {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.02rem; color: rgba(255, 255, 255, 0.72);
  margin: -0.875rem 0 1.75rem; max-width: 34rem;
  text-shadow: 0 0.0625rem 0.75rem rgba(0, 0, 0, 0.35);
}

/* ============================================================
   FOUNDING NURSE COMMUNITY — invitation band (launch correction)
   ============================================================ */
.invite-band {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(46.875rem 25rem at 50% -20%, rgba(232, 198, 114, 0.5), transparent 62%),
    radial-gradient(43.75rem 23.75rem at 12% 120%, rgba(155, 127, 232, 0.18), transparent 60%),
    linear-gradient(170deg, var(--navy-deep), #1d2a52 55%, #2A3A6E);
  color: rgba(255, 255, 255, 0.82);
}
.invite-band .kicker { color: var(--gold-soft); justify-content: center; }
.invite-band h2 { color: #fff; margin: 1.125rem auto 0; max-width: 20ch; }
.invite-band .lead { color: rgba(255, 255, 255, 0.82); max-width: 42rem; margin: 1.25rem auto 0; }
.invite-band .invite-cta { margin-top: 2.25rem; }
.invite-band .invite-note { margin-top: 1.125rem; font-size: 0.86rem; color: rgba(255, 255, 255, 0.55); }
.invite-band .invite-note a { color: var(--gold-soft); text-decoration: underline; }

/* collapse the inline nav links into the burger a little earlier */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

/* ============================================================
   BLUEPRINT v1.0 — corporate homepage sections (July 2026)
   ============================================================ */

/* ---------- 1 · Static hero ---------- */
.hero-static { position: relative; overflow: hidden;
  padding-block: clamp(6.5rem, 12vh, 9rem) clamp(3.5rem, 7vw, 5.5rem);
  background:
    radial-gradient(46rem 30rem at 88% 8%, rgba(232, 198, 114, 0.16), transparent 62%),
    radial-gradient(40rem 30rem at -5% 92%, rgba(155, 127, 232, 0.12), transparent 60%),
    linear-gradient(175deg, var(--warm-white), var(--warm-white-alt)); }
.hero-static-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; position: relative; }
.hero-static-copy { max-width: 38rem; }
/* ---------- Brand motto lockup: "Purpose First. Nurses Always." ----------
   One recurring signature everywhere the tagline appears. Two-tone serif
   ("Nurses Always." in gold italic) between two short gold marks; scaled by
   role via --lg / --sm. Ink is var(--navy-deep) (theme-aware: dark in day,
   light in night); always-dark bands (.seen, .footer) force light ink. */
.nm-motto { display: flex; align-items: center; justify-content: flex-start; gap: 0.85rem;
  color: var(--navy-deep); font-family: var(--font-display); font-weight: 500;
  letter-spacing: -0.01em; font-size: 1.4rem; line-height: 1.25; }
.nm-motto-t { min-width: 0; }                 /* let the tagline wrap between the marks */
.nm-motto em { font-style: italic; font-weight: 500; }
.nm-motto::before, .nm-motto::after { content: ""; flex: none; align-self: center;
  width: 1.9rem; height: 0.125rem; border-radius: 0.125rem; background: var(--gold); }
.nm-motto--center { justify-content: center; text-align: center; }
.nm-motto--lg { font-size: clamp(1.7rem, 3.4vw, 2.6rem); gap: 1.1rem; font-weight: 580; }
.nm-motto--lg::before, .nm-motto--lg::after { width: 2.6rem; }
.nm-motto--sm { font-size: 1.04rem; gap: 0.65rem; }
.nm-motto--sm::before, .nm-motto--sm::after { width: 1.05rem; }
.hero-static-copy .nm-motto { margin-bottom: 1.125rem; }
.footer-motto { margin-bottom: 0.75rem; }
/* Hard-coded dark bands (dark in every theme): light ink + brighter gold */
.seen .nm-motto, .footer .nm-motto { color: #fff; }
.seen .nm-motto em, .footer .nm-motto em { color: var(--gold-soft); }
@media (max-width: 560px) {
  .nm-motto--lg { font-size: clamp(1.45rem, 6.4vw, 2rem); gap: 0.7rem; }
  .nm-motto--lg::before, .nm-motto--lg::after { width: 1.4rem; }
}
.hero-static-copy h1 { margin-bottom: 1.375rem; }
.hero-static-copy .lead { max-width: 34rem; font-size: clamp(1.06rem, 1.4vw, 1.2rem); }
.hero-static .hero-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.875rem; }
.hero-nurse-link { display: inline-block; margin-top: 1.5rem; font-family: var(--font-ui); font-size: 0.95rem;
  font-weight: 600; color: var(--blue); text-decoration: none;
  border-bottom: 0.125rem solid rgba(74, 111, 165, 0.28); padding-bottom: 0.125rem;
  transition: color 0.3s, border-color 0.3s; }
.hero-nurse-link:hover { color: #9a7a25; border-color: var(--gold); }
.hero-static-media { position: relative; }
.hero-static-media img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow-lift);
  aspect-ratio: 3 / 2; object-fit: cover; }
.hero-static-media::before { content: ""; position: absolute; inset: auto -1.25rem -1.25rem auto;
  width: 55%; height: 55%; border-radius: var(--r-xl); border: 0.125rem solid var(--gold-pale); z-index: -1; }

/* ---------- 2 · We See You — stat cards (on dark .seen) ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.375rem; margin-top: 2.75rem; }
.stat-card { background: rgba(255, 255, 255, 0.06); border: 0.0625rem solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-lg); padding: 2.25rem 1.75rem; text-align: center; backdrop-filter: blur(0.5rem); }
.stat-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1; color: var(--gold-soft); margin-bottom: 0.75rem; }
.stat-card p { font-size: 0.98rem; color: rgba(255, 255, 255, 0.8); line-height: 1.5; }
.stat-note { text-align: center; margin-top: 1.25rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.45); }
.stat-note a { color: rgba(255, 255, 255, 0.62); text-decoration: underline; text-underline-offset: 0.15em;
  transition: color 0.3s; }
.stat-note a:hover { color: var(--gold-soft); }
.seen-closing { text-align: center; margin-top: 1.5rem; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--gold-soft); }

/* ---------- 3 · Who We Are — comparison chart ---------- */
.compare { margin-top: 1.75rem; border: 0.0625rem solid var(--hairline); border-radius: var(--r-lg);
  overflow: hidden; background: var(--white); box-shadow: var(--shadow-soft); }
.compare-head, .compare-row { display: grid; grid-template-columns: 1fr 1fr; }
.compare-head span { padding: 0.875rem 1.125rem; font-family: var(--font-ui); font-size: 0.78rem;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.compare-head span:first-child { color: var(--text-muted); background: var(--warm-white-alt); }
.compare-head .compare-nm { color: var(--white); background: var(--navy-deep); }
.compare-row { border-top: 0.0625rem solid var(--hairline); }
.compare-row span { padding: 1.15rem 1.125rem; font-size: 0.92rem; line-height: 1.45; }
.compare-old { color: var(--text-muted); }
.compare-new { color: var(--text-dark); font-weight: 600; background: rgba(212, 168, 67, 0.06);
  border-left: 0.0625rem solid var(--hairline); }

/* ---------- 4 · Meet the Founder — split ---------- */
.founder-split { background: linear-gradient(180deg, var(--warm-white), var(--warm-white-alt)); overflow: hidden; }
.founder-split-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.founder-split-photo { position: relative; }
.founder-split-photo img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow-lift);
  aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; position: relative; }
.fsp-frame { position: absolute; inset: -1.25rem auto auto -1.25rem; width: 62%; height: 62%;
  border-radius: var(--r-xl); border: 0.125rem solid var(--gold-pale); }

/* ---------- 5 · How We Help ---------- */
.help-band { position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--warm-white-alt), var(--warm-white)); }
.help-bg { position: absolute; inset: 0; opacity: 0.12;
  background: url('/assets/img/nurses-group.jpg') center 22% / cover no-repeat; }
.help-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.375rem; }
.help-card { background: rgba(255, 255, 255, 0.92); border: 0.0625rem solid var(--hairline);
  border-radius: var(--r-lg); padding: 2rem 1.5rem; text-align: center; backdrop-filter: blur(0.375rem);
  box-shadow: var(--shadow-soft); transition: transform 0.45s var(--ease-spring), box-shadow 0.45s; }
.help-card:hover { transform: translateY(-0.5rem); box-shadow: var(--shadow-lift); }
/* The card surface is a literal white, but its text uses themed tokens that go
   light at night — so give the card a dark surface to match. */
[data-theme="night"] .help-card { background: rgba(19, 31, 56, 0.92); }
.help-icon { font-size: 2.4rem; margin-bottom: 0.875rem; }
.help-card h3 { font-family: var(--font-ui); font-size: 1.1rem; font-weight: 600; color: var(--navy-deep);
  margin-bottom: 0.5rem; }
.help-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; }
.help-closing { text-align: center; margin-top: 2.5rem; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--navy-deep); }

/* ---------- 6 · Our Purpose closing (on dark .seen) ---------- */
.purpose-closing { margin-top: 1.75rem; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--gold-soft); }

/* ---------- 7 · Why It Matters to Organizations ---------- */
.org-band { position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--warm-white), var(--blue-wash) 260%); }
.org-bg { position: absolute; inset: 0; opacity: 0.07;
  background: url('/assets/img/org-leaders.jpg') center 30% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.org-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.375rem; }
.org-card { background: var(--white); border: 0.0625rem solid var(--hairline); border-radius: var(--r-lg);
  padding: 1.875rem 1.5rem; text-align: center; box-shadow: var(--shadow-soft);
  transition: transform 0.45s var(--ease-spring), box-shadow 0.45s; }
.org-card:hover { transform: translateY(-0.5rem); box-shadow: var(--shadow-lift); }
.org-icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: 1.125rem;
  background: var(--blue-wash); display: grid; place-items: center; font-size: 1.7rem; }
.org-card h3 { font-family: var(--font-ui); font-size: 1.02rem; font-weight: 600; color: var(--navy-deep);
  margin-bottom: 0.4rem; }
.org-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }
.org-closing { text-align: center; margin-top: 2.5rem; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--navy-deep); }

/* ---------- 8 · Partnerships ---------- */
.partners-bg { position: absolute; inset: 0; opacity: 0.07;
  background: url('/assets/img/partners-collab.jpg') center 38% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.partners-band .section-head { margin-inline: auto; }
.partners-closing { text-align: center; max-width: 44rem; margin: 0 auto 2rem; font-family: var(--font-display);
  font-style: italic; font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--navy-deep); }
.partners-cta { display: flex; flex-wrap: wrap; gap: 0.875rem; justify-content: center; }

/* ---------- 9 · Ready to Take the Next Step ---------- */
.next-step { position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(50rem 26rem at 50% 122%, rgba(244, 197, 107, 0.28), transparent 62%),
    linear-gradient(180deg, var(--warm-white), var(--warm-white-alt)); }
.path-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem;
  max-width: 52rem; margin: 0 auto; }
.path-card { background: var(--white); border: 0.0625rem solid var(--hairline); border-radius: var(--r-xl);
  padding: 2.5rem 2rem; box-shadow: var(--shadow-soft); text-align: center;
  display: flex; flex-direction: column;
  transition: transform 0.45s var(--ease-spring), box-shadow 0.45s; }
.path-card:hover { transform: translateY(-0.5rem); box-shadow: var(--shadow-lift); }
.path-icon { font-size: 2.8rem; margin-bottom: 1rem; }
.path-card h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy-deep); margin-bottom: 0.75rem; }
.path-card p { font-size: 0.95rem; color: var(--text-body); line-height: 1.6; margin-bottom: 1.5rem; }
/* margin-top:auto pins both cards' buttons to the same baseline even when one
   card's copy is shorter. */
.path-card .btn { width: 100%; justify-content: center; margin-top: auto; }
/* (.next-motto retired — the final-section tagline now uses the .nm-motto lockup) */

/* ---------- Blueprint responsive ---------- */
@media (max-width: 960px) {
  .hero-static-grid, .founder-split-grid { grid-template-columns: 1fr; }
  .hero-static-media { order: -1; }
  .founder-split-photo { max-width: 24rem; margin-inline: auto; }
  .stat-cards, .help-grid, .org-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stat-cards, .help-grid, .org-cards { grid-template-columns: 1fr; }
  .compare-head span, .compare-row span { font-size: 0.84rem; padding-inline: 0.875rem; }
}