/* ==========================================================================
   SUK00N — "Still Water" design system
   A calmer place to breathe, reset and reconnect.
   Light, warm, editorial. Original identity.
   ========================================================================== */

/* ---- Tokens ---- */
:root {
  /* Brand palette */
  --sage: #8baf9b;
  --sage-600: #6f9784;
  --sage-700: #537463;     /* WCAG: 4.86:1 on --paper. Was #577a68 (4.48:1), marginally under AA for link/eyebrow text. Darker also improves white-on-sage buttons. */
  --sky: #a8c7d8;
  --sky-600: #7fa9bf;
  --gold: #e7c98b;
  --gold-600: #d3ac60;     /* NOTE: only 2.00:1 on --paper. Brand accent, intentionally unchanged (see sukoon.md §58). Use it on dark/ink or gold-tinted backgrounds ONLY — never as body text on a light background. */

  --ink: #17221d;          /* deep green-black */
  --ink-soft: #33453b;
  --paper: #f7f8f3;        /* warm off-white */
  --paper-2: #eef1e8;
  --card: #ffffff;
  --card-2: #fbfcf8;

  /* Semantic */
  --bg: var(--paper);
  --text: var(--ink);
  --muted: #5c6b62;
  --faint: #647068;        /* WCAG: 4.85:1 on --paper, 4.53:1 on --paper-2. Was #8a978e (2.85:1) which failed AA — and --faint is used only on 0.66-0.85rem text, where there is no large-text exemption. Hue preserved. */
  --line: rgba(23, 34, 29, 0.10);
  --line-soft: rgba(23, 34, 29, 0.06);
  --ring: rgba(139, 175, 155, 0.55);

  --accent: var(--sage-700);
  --accent-sky: var(--sky-600);

  /* Gradients (subtle) */
  --grad-calm: linear-gradient(135deg, #c9dccf 0%, #bcd4de 55%, #ecd9ad 130%);
  --grad-orb: radial-gradient(circle at 34% 30%, #d9e7dd 0%, #a8c7d8 45%, #8baf9b 78%, #6f9784 100%);
  --grad-ink: linear-gradient(135deg, #1d2b24 0%, #24352c 100%);
  --wash: radial-gradient(60% 60% at 20% 10%, rgba(168,199,216,0.30), transparent 60%),
          radial-gradient(50% 50% at 90% 20%, rgba(231,201,139,0.22), transparent 60%),
          radial-gradient(60% 60% at 70% 100%, rgba(139,175,155,0.25), transparent 60%);

  /* Type */
  --font-display: "Playfair Display", "DM Serif Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Radius */
  --r-sm: 12px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px;

  /* Shadows (soft, layered) */
  --sh-1: 0 1px 2px rgba(23,34,29,0.04), 0 2px 8px rgba(23,34,29,0.05);
  --sh-2: 0 6px 20px rgba(23,34,29,0.07), 0 2px 6px rgba(23,34,29,0.05);
  --sh-3: 0 18px 48px rgba(23,34,29,0.12), 0 6px 16px rgba(23,34,29,0.07);
  --sh-orb: 0 30px 80px rgba(111,151,132,0.35), inset 0 2px 12px rgba(255,255,255,0.5);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --nav-h: 74px;
  --bottomnav-h: 68px;
  --container: 1180px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "ss01" 1, "cv01" 1;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; }

::selection { background: rgba(139,175,155,0.35); color: var(--ink); }

/* Accessible focus */
:focus-visible {
  outline: 2px solid var(--sage-700);
  outline-offset: 3px;
  border-radius: 4px;
}
.no-focus:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 2000;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: #c3cec6; border-radius: 20px; border: 2px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover { background: var(--sage); }

/* ---- Layout ---- */
.container { width: min(var(--container), 92%); margin-inline: auto; }
.container-wide { width: min(1360px, 94%); margin-inline: auto; }
.container-narrow { width: min(760px, 92%); margin-inline: auto; }

.section { position: relative; padding: var(--s-9) 0; }
.section-sm { padding: var(--s-8) 0; }
.section-tint { background: var(--paper-2); }
.section-ink { background: var(--grad-ink); color: #eaf0ea; }
.section-ink .muted, .section-ink .eyebrow { color: #b7c6bc; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage-700); margin-bottom: var(--s-4);
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--sage); border-radius: 2px; }
.eyebrow.center { justify-content: center; }

.lead { color: var(--muted); font-size: 1.075rem; line-height: 1.7; }
.muted { color: var(--muted); }
.center { text-align: center; }

.section-head { max-width: 640px; margin-bottom: var(--s-7); }
.section-head.center { margin-inline: auto; }
.section-head h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.06; margin-bottom: var(--s-4);
}
.section-head p { color: var(--muted); font-size: 1.05rem; }
.section-head.center p { margin-inline: auto; }

.display-serif { font-family: var(--font-display); }
.italic { font-style: italic; }
.tone-gold { color: var(--gold-600); }
.tone-sage { color: var(--sage-700); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.005em;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.25s, color 0.25s, border-color 0.25s;
  will-change: transform; border: 1px solid transparent; white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--ink); color: #f4f7f1; box-shadow: var(--sh-2); }
.btn-primary:hover { background: #21332a; box-shadow: var(--sh-3); transform: translateY(-2px); }
.btn-sage { background: var(--sage-700); color: #fff; box-shadow: 0 10px 26px rgba(87,122,104,0.35); }
.btn-sage:hover { background: var(--sage-600); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(87,122,104,0.42); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--sage); background: rgba(139,175,155,0.10); transform: translateY(-2px); }
.btn-soft { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: var(--sh-1); }
.btn-soft:hover { border-color: var(--sage); box-shadow: var(--sh-2); transform: translateY(-2px); }
.btn-lg { padding: 16px 32px; font-size: 1.02rem; }
.btn-sm { padding: 9px 16px; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn i { font-size: 0.95em; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-icon {
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-1);
  transition: transform 0.25s var(--ease), border-color 0.25s, background 0.25s;
}
.btn-icon:hover { border-color: var(--sage); transform: translateY(-2px); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--sage-700); }
.link-arrow i { transition: transform 0.25s var(--ease); }
.link-arrow:hover i { transform: translateX(4px); }

/* Chip / pill label */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-pill);
  font-size: 0.78rem; font-weight: 600; color: var(--sage-700);
  background: rgba(139,175,155,0.14); border: 1px solid rgba(139,175,155,0.28);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage-600); }
.chip-gold { color: var(--gold-600); background: rgba(231,201,139,0.16); border-color: rgba(231,201,139,0.4); }
.chip-gold .dot { background: var(--gold-600); }

/* ---- Cards ---- */
.card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: var(--s-6); box-shadow: var(--sh-1);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line); }

/* ==========================================================================
   Navigation (top)
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), height 0.4s var(--ease), border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(247,248,243,0.82);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 6px 24px rgba(23,34,29,0.05);
}
.nav-inner { width: min(var(--container), 92%); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.35rem; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.brand .mark {
  width: 32px; height: 32px; border-radius: 50%; background: var(--grad-orb); box-shadow: var(--sh-1), inset 0 1px 6px rgba(255,255,255,0.6);
  position: relative; flex-shrink: 0; align-self: center;
}
.brand .mark::after { content:""; position:absolute; inset: 8px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.55); }
/* optical baseline nudge so the serif wordmark sits centered against the round mark */
.brand .word { display: inline-block; transform: translateY(0.06em); }
.brand b { font-weight: 600; }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; color: var(--ink-soft);
  padding: 9px 14px; border-radius: var(--r-pill); transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--ink); background: rgba(23,34,29,0.05); }
.nav-links a.active { color: var(--sage-700); background: rgba(139,175,155,0.14); }

.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-relief {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--sage-700); color: #fff; font-weight: 600; font-size: 0.9rem;
  box-shadow: 0 8px 22px rgba(87,122,104,0.32); transition: transform 0.3s var(--ease), box-shadow 0.3s, background 0.25s;
}
.nav-relief .pulse { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,0.7); animation: reliefPulse 2.4s var(--ease) infinite; }
.nav-relief:hover { transform: translateY(-2px); background: var(--sage-600); box-shadow: 0 14px 30px rgba(87,122,104,0.4); }
@keyframes reliefPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.55);} 70%{ box-shadow: 0 0 0 9px rgba(255,255,255,0);} 100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0);} }
.nav-signin { color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; padding: 9px 12px; border-radius: var(--r-pill); }
.nav-signin:hover { color: var(--ink); }
.nav-signin.nav-user { display: inline-flex; align-items: center; gap: 8px; }
.nav-user .nav-userdot { width: 26px; height: 26px; border-radius: 50%; background: var(--grad-orb); display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; color: #17332a; overflow: hidden; flex-shrink: 0; box-shadow: var(--sh-1); }
.nav-user .nav-userdot img { width: 100%; height: 100%; object-fit: cover; }

.nav-burger { display: none; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: #fff; align-items: center; justify-content: center; box-shadow: var(--sh-1); }
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav-burger span { position: relative; }
.nav-burger span::before { position: absolute; top: -6px; }
.nav-burger span::after { position: absolute; top: 6px; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 950; background: rgba(247,248,243,0.98);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 90px 8% 40px;
  opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.drawer.open { opacity: 1; visibility: visible; }
.drawer a { font-family: var(--font-display); font-size: 1.7rem; padding: 14px 0; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; }
.drawer a i { color: var(--sage); font-size: 1rem; }
.drawer .btn { margin-top: var(--s-5); justify-content: center; }

/* ==========================================================================
   Mobile bottom navigation + action sheet
   ========================================================================== */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 880; height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: none; align-items: center; justify-content: space-around;
  background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid var(--line-soft); box-shadow: 0 -6px 24px rgba(23,34,29,0.06);
}
.bottomnav a, .bottomnav button {
  display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1;
  font-size: 0.66rem; font-weight: 600; color: var(--faint); padding: 8px 0;
}
.bottomnav a i { font-size: 1.15rem; }
.bottomnav a.active { color: var(--sage-700); }
.bn-plus {
  width: 58px; height: 58px; margin-top: -26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--sage-700); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(87,122,104,0.45); font-size: 1.4rem;
  transition: transform 0.3s var(--ease);
}
.bn-plus:hover { transform: translateY(-2px) rotate(90deg); }
.bn-plus i { transition: transform 0.3s var(--ease); }

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 970; background: rgba(23,34,29,0.4);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.sheet-backdrop.open { opacity: 1; visibility: visible; }
.action-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 971;
  background: var(--paper); border-radius: 28px 28px 0 0; padding: 14px 18px calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateY(105%); transition: transform 0.4s var(--ease); box-shadow: 0 -20px 50px rgba(23,34,29,0.18);
}
.action-sheet.open { transform: translateY(0); }
.sheet-grip { width: 42px; height: 5px; border-radius: 10px; background: #d3ddd4; margin: 4px auto 16px; }
.sheet-title { font-family: var(--font-display); font-size: 1.35rem; text-align: center; margin-bottom: 16px; }
.sheet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sheet-item {
  display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--sh-1); text-align: left;
  transition: transform 0.25s var(--ease), border-color 0.25s;
}
.sheet-item:hover { transform: translateY(-2px); border-color: var(--sage); }
.sheet-item .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(139,175,155,0.16); color: var(--sage-700); font-size: 1.1rem; flex-shrink: 0; }
.sheet-item b { font-size: 0.95rem; font-weight: 600; display: block; }
.sheet-item span { font-size: 0.78rem; color: var(--muted); }
.sheet-item.full { grid-column: 1 / -1; background: var(--grad-calm); border: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding: calc(var(--nav-h) + 40px) 0 var(--s-8); overflow: hidden; }
.hero-wash {
  position: absolute; inset: -10% -5% auto -5%; height: 120%; z-index: -1;
  background: var(--wash); filter: blur(10px); opacity: 0.9;
  animation: washDrift 26s ease-in-out infinite alternate;
}
@keyframes washDrift { 0% { transform: translate3d(0,0,0) scale(1);} 100% { transform: translate3d(0,-2%,0) scale(1.05);} }
.hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); align-items: center; }
.hero-copy { max-width: 560px; }
.hero h1 {
  font-size: clamp(2.7rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.02em; margin: var(--s-4) 0 var(--s-5);
}
.hero h1 .em { font-style: italic; color: var(--sage-700); }
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--muted); max-width: 480px; margin-bottom: var(--s-6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: var(--s-6); }
.hero-trust { display: flex; align-items: center; gap: 18px; color: var(--faint); font-size: 0.85rem; flex-wrap: wrap; }
.hero-trust .stars { color: var(--gold-600); letter-spacing: 2px; }
.hero-trust b { color: var(--ink); font-weight: 600; }

/* Breathing orb */
.orb-stage { position: relative; display: grid; place-items: center; min-height: 440px; }
.orb-halo { position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(168,199,216,0.35), transparent 62%); filter: blur(12px); }
.orb-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(139,175,155,0.35); }
.orb-ring.r1 { width: 380px; height: 380px; }
.orb-ring.r2 { width: 300px; height: 300px; border-color: rgba(168,199,216,0.4); }

.orb {
  position: relative; width: 240px; height: 240px; border-radius: 50%;
  background: var(--grad-orb); box-shadow: var(--sh-orb);
  display: grid; place-items: center; text-align: center; color: #17332a;
  --breath-scale: 1;
  transform: scale(var(--breath-scale));
}
.orb::before {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.75), rgba(255,255,255,0) 55%);
  mix-blend-mode: screen; pointer-events: none;
}
.orb-label { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.01em; transition: opacity 0.6s var(--ease); }
.orb-hint { font-size: 0.8rem; color: rgba(23,51,42,0.7); margin-top: 4px; }

/* Animated breathing (inhale 4s / hold 2s / exhale 6s = 12s loop) */
.orb.breathing { animation: breathe 12s var(--ease-soft) infinite; }
@keyframes breathe {
  0%   { transform: scale(0.72); }
  33%  { transform: scale(1); }      /* inhale done */
  50%  { transform: scale(1); }      /* hold */
  100% { transform: scale(0.72); }   /* exhale */
}
.orb-ring.pulsing { animation: ringBreathe 12s var(--ease-soft) infinite; }
@keyframes ringBreathe {
  0% { transform: scale(0.9); opacity: 0.5; }
  33% { transform: scale(1.05); opacity: 1; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.5; }
}

.orb-controls { position: absolute; bottom: -6px; display: flex; gap: 10px; }
.orb-toggle { font-size: 0.82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,0.7); border: 1px solid var(--line-soft); }

/* ==========================================================================
   Mood selector
   ========================================================================== */
.mood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.mood-card {
  position: relative; text-align: left; padding: var(--s-5) var(--s-5) calc(var(--s-5) + 4px);
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s, background 0.3s;
  cursor: pointer; overflow: hidden;
}
.mood-card::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--grad-calm);
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.mood-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line); }
.mood-card:hover::after { transform: scaleX(1); }
.mood-card[aria-pressed="true"] { border-color: var(--sage); background: linear-gradient(180deg, #fff, #f4f8f2); box-shadow: var(--sh-2); }
.mood-card[aria-pressed="true"]::after { transform: scaleX(1); }
.mood-emoji { font-size: 2rem; line-height: 1; margin-bottom: var(--s-3); display: block; filter: saturate(0.92); }
.mood-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.08rem; letter-spacing: 0; margin-bottom: 2px; }
.mood-card p { color: var(--muted); font-size: 0.9rem; }
.mood-check { position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border-radius: 50%; background: var(--sage-700); color: #fff; display: grid; place-items: center; font-size: 0.7rem; opacity: 0; transform: scale(0.6); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.mood-card[aria-pressed="true"] .mood-check { opacity: 1; transform: scale(1); }

/* Personalized relief panel */
.relief-panel {
  margin-top: var(--s-6); border-radius: var(--r-xl); overflow: hidden;
  background: var(--grad-ink); color: #eaf0ea; box-shadow: var(--sh-3);
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch;
}
.relief-panel[hidden] { display: none; }
.relief-body { padding: var(--s-7); }
.relief-body .chip { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); color: #eaf0ea; }
.relief-body .chip .dot { background: var(--gold); }
.relief-title { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: var(--s-4) 0 var(--s-3); }
.relief-desc { color: #c3d1c8; margin-bottom: var(--s-5); max-width: 40ch; }
.relief-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--s-6); }
.relief-step { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }
.relief-step .rs-time { font-family: var(--font-display); font-size: 1.05rem; color: var(--gold); width: 52px; flex-shrink: 0; }
.relief-step .rs-ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,0.1); display: grid; place-items: center; color: #dfeae2; }
.relief-step b { font-weight: 600; }
.relief-step span { display: block; font-size: 0.82rem; color: #a9bbb0; }
.relief-media { position: relative; background: var(--grad-orb); display: grid; place-items: center; overflow: hidden; }
.relief-media .mini-orb { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #fff, rgba(255,255,255,0) 60%), var(--grad-orb); box-shadow: var(--sh-orb); animation: breathe 12s var(--ease-soft) infinite; }

/* ==========================================================================
   Quick relief teaser
   ========================================================================== */
.quickrelief {
  position: relative; border-radius: var(--r-xl); padding: var(--s-8); overflow: hidden;
  background: var(--grad-calm); box-shadow: var(--sh-2);
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--s-6); align-items: center;
}
.quickrelief::before { content:""; position:absolute; right:-8%; top:-30%; width:340px; height:340px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,0.5), transparent 65%); }
.quickrelief h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: var(--ink); margin-bottom: var(--s-4); position: relative; }
.quickrelief p { color: var(--ink-soft); max-width: 44ch; margin-bottom: var(--s-5); position: relative; }
.quickrelief .qr-visual { position: relative; display: grid; place-items: center; }
.qr-orb { width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #fff, rgba(255,255,255,0) 60%), var(--grad-orb); box-shadow: var(--sh-orb); }

/* ==========================================================================
   Explore grid (wellness experiences)
   ========================================================================== */
.explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.xp-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5); border-radius: var(--r-lg); background: var(--card);
  border: 1px solid var(--line-soft); box-shadow: var(--sh-1); min-height: 190px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
  overflow: hidden;
}
.xp-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: var(--line); }
.xp-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem; color: #fff; box-shadow: var(--sh-1); }
.xp-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.06rem; }
.xp-card p { color: var(--muted); font-size: 0.88rem; flex: 1; }
.xp-card .link-arrow { font-size: 0.85rem; margin-top: auto; }
.xp-tall { grid-row: span 2; min-height: auto; justify-content: flex-end; color: #fff; background: var(--grad-ink); }
.xp-tall p { color: #c3d1c8; }
.xp-tall .link-arrow { color: var(--gold); }
.xp-tall .xp-ico { background: rgba(255,255,255,0.14); }
/* icon color variants */
.ico-sage { background: linear-gradient(135deg, #8baf9b, #6f9784); }
.ico-sky { background: linear-gradient(135deg, #a8c7d8, #7fa9bf); }
.ico-gold { background: linear-gradient(135deg, #e7c98b, #d3ac60); }
.ico-ink { background: linear-gradient(135deg, #33453b, #1d2b24); }

/* ==========================================================================
   Calm Space teaser
   ========================================================================== */
.calm-teaser {
  position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 460px;
  display: grid; place-items: center; text-align: center; color: #f2f6f1;
  background: linear-gradient(180deg, rgba(18,28,23,0.35), rgba(18,28,23,0.65)), var(--grad-ink);
}
.calm-teaser .stars-bg { position: absolute; inset: 0; background:
  radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.7), transparent),
  radial-gradient(1.5px 1.5px at 70% 40%, rgba(255,255,255,0.6), transparent),
  radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.5), transparent),
  radial-gradient(1.5px 1.5px at 85% 75%, rgba(255,255,255,0.55), transparent),
  radial-gradient(1px 1px at 55% 20%, rgba(255,255,255,0.5), transparent);
  opacity: 0.8; }
.calm-teaser-inner { position: relative; z-index: 2; padding: var(--s-7); max-width: 620px; }
.calm-teaser h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: var(--s-4); }
.calm-teaser p { color: #cdd8ce; margin-bottom: var(--s-6); }
.env-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: var(--s-6); }
.env-pill { padding: 8px 16px; border-radius: var(--r-pill); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); font-size: 0.85rem; font-weight: 500; }

/* ==========================================================================
   Companion (AI) teaser + chat
   ========================================================================== */
.companion-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.companion-copy h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); margin-bottom: var(--s-4); }
.prompt-list { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--s-5) 0; }
.prompt-pill { padding: 10px 16px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); font-size: 0.88rem; font-weight: 500; transition: transform 0.25s var(--ease), border-color 0.25s; }
.prompt-pill:hover { transform: translateY(-2px); border-color: var(--sage); }

.chat-window {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); overflow: hidden; display: flex; flex-direction: column; max-height: 520px;
}
.chat-top { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); background: var(--card-2); }
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--grad-orb); box-shadow: var(--sh-1); position: relative; flex-shrink: 0; }
.chat-avatar::after { content:""; position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:var(--sage-600); border:2px solid #fff; }
.chat-top b { font-weight: 600; display: block; font-size: 0.95rem; }
.chat-top span { font-size: 0.76rem; color: var(--muted); }
.chat-scroll { padding: 20px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; flex: 1; min-height: 220px; }
.bubble { max-width: 82%; padding: 12px 16px; border-radius: 18px; font-size: 0.92rem; line-height: 1.55; animation: bubbleIn 0.4s var(--ease); }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.bubble.ai { background: var(--paper-2); border: 1px solid var(--line-soft); align-self: flex-start; border-bottom-left-radius: 5px; color: var(--ink); }
.bubble.me { background: var(--sage-700); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.bubble.note { align-self: center; text-align: center; background: transparent; color: var(--faint); font-size: 0.78rem; max-width: 90%; }
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); animation: typing 1.2s var(--ease) infinite; }
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }
.chat-input { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line-soft); background: var(--card-2); }
.chat-input .field { flex: 1; }
.chat-safety { font-size: 0.74rem; color: var(--faint); text-align: center; padding: 10px 16px 14px; }
.chat-safety a { color: var(--sage-700); text-decoration: underline; }

/* Fields */
.field {
  width: 100%; padding: 13px 16px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: #fff; color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s;
}
.field::placeholder { color: var(--faint); }
.field:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 4px rgba(139,175,155,0.18); }
textarea.field { resize: vertical; min-height: 110px; }
.field-row { display: flex; flex-direction: column; gap: 7px; }
.field-row label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }

/* ==========================================================================
   Wellness journey
   ========================================================================== */
.journey-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-xl); padding: var(--s-7); box-shadow: var(--sh-1); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin: var(--s-5) 0; }
.day { text-align: center; padding: 16px 6px; border-radius: var(--r-md); background: var(--paper-2); border: 1px solid var(--line-soft); transition: transform 0.3s var(--ease); }
.day:hover { transform: translateY(-3px); }
.day .d-emoji { font-size: 1.5rem; display: block; margin-bottom: 6px; }
.day .d-label { font-size: 0.72rem; color: var(--muted); font-weight: 600; letter-spacing: 0.05em; }
.day.today { background: linear-gradient(180deg, #fff, #eef4ee); border-color: var(--sage); box-shadow: var(--sh-1); }
.journey-note { color: var(--muted); font-size: 0.98rem; }

/* ==========================================================================
   Professional support
   ========================================================================== */
.support-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-6); }
.support-card { padding: var(--s-5); border-radius: var(--r-lg); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); transition: transform 0.35s var(--ease), background 0.3s; }
.support-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.1); }
.support-card .s-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,0.12); color: var(--gold); font-size: 1.15rem; margin-bottom: var(--s-4); }
.support-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; margin-bottom: 6px; color: #f1f5f0; }
.support-card p { color: #b7c6bc; font-size: 0.86rem; margin-bottom: var(--s-4); }
.support-note { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: rgba(231,201,139,0.1); border: 1px solid rgba(231,201,139,0.25); color: #e9e0c8; font-size: 0.88rem; }
.urgent-card { background: rgba(231,201,139,0.14); border-color: rgba(231,201,139,0.35); }
.urgent-card .s-ico { background: rgba(231,201,139,0.2); }

/* ==========================================================================
   Impact
   ========================================================================== */
.impact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.impact-visual { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2); position: relative; aspect-ratio: 4/3; background: var(--grad-calm); }
.impact-visual img { width: 100%; height: 100%; object-fit: cover; }
.impact-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin: var(--s-5) 0; }
.impact-stat b { font-family: var(--font-display); font-size: 2rem; color: var(--sage-700); display: block; line-height: 1; }
.impact-stat span { font-size: 0.82rem; color: var(--muted); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.t-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--sh-1); }
.t-quote { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.5; color: var(--ink); margin-bottom: var(--s-5); position: relative; }
.t-quote::before { content: "“"; font-family: var(--font-display); font-size: 2.6rem; color: var(--sage); line-height: 0; position: absolute; top: 8px; left: -6px; opacity: 0.4; }
.t-author { display: flex; align-items: center; gap: 12px; }
.t-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-orb); display: grid; place-items: center; font-weight: 700; color: #17332a; }
.t-author b { font-weight: 600; display: block; font-size: 0.92rem; }
.t-author span { font-size: 0.8rem; color: var(--muted); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.accordion { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 10px; }
.acc { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s; }
.acc.open { border-color: var(--sage); box-shadow: var(--sh-1); }
.acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-weight: 600; text-align: left; }
.acc-btn .ic { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; flex-shrink: 0; transition: transform 0.3s var(--ease), background 0.3s, color 0.3s; }
.acc.open .acc-btn .ic { transform: rotate(45deg); background: var(--sage-700); color: #fff; border-color: var(--sage-700); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.acc-panel p { padding: 0 22px 20px; color: var(--muted); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--grad-ink); color: #cdd8ce; padding: var(--s-9) 0 var(--s-6); margin-top: var(--s-8); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-7); margin-bottom: var(--s-7); }
.footer .brand { color: #f2f6f1; margin-bottom: var(--s-4); }
.footer-blurb { max-width: 300px; font-size: 0.92rem; color: #adbdb2; }
.footer h2 { font-family: var(--font-body); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8ba095; margin-bottom: var(--s-4); font-weight: 700; }
.footer ul li { margin-bottom: 11px; }
.footer ul a { color: #cdd8ce; font-size: 0.9rem; transition: color 0.2s; }
.footer ul a:hover { color: var(--gold); }
.footer-socials { display: flex; gap: 10px; margin-top: var(--s-4); }
.footer-socials a { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); display: grid; place-items: center; color: #cdd8ce; transition: transform 0.25s var(--ease), border-color 0.25s, color 0.25s; }
.footer-socials a:hover { transform: translateY(-3px); border-color: var(--gold); color: var(--gold); }
/* Inline brand SVGs replace Font Awesome's `fab` icons. Only three brand icons
   were ever used, yet they pulled fa-brands-400.woff2 (115 KB) on the landing
   page. fill:currentColor keeps the existing colour + hover transition. */
.footer-socials .soc { width: 18px; height: 18px; display: block; }
.footer-disclaimer { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--s-5); font-size: 0.8rem; color: #93a49a; max-width: 780px; margin-bottom: var(--s-4); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--s-5); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.82rem; color: #8ba095; }

/* ==========================================================================
   Modal / overlay (Quick Relief + Session player)
   ========================================================================== */
.overlay {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px;
  background: rgba(20,29,24,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.overlay.open { opacity: 1; visibility: visible; }
.modal {
  width: min(560px, 100%); background: var(--paper); border-radius: var(--r-xl); padding: var(--s-7);
  box-shadow: var(--sh-3); text-align: center; position: relative; transform: translateY(16px) scale(0.98);
  transition: transform 0.45s var(--ease); max-height: 92vh; overflow: auto;
}
.overlay.open .modal { transform: translateY(0) scale(1); }
.modal-immersive { background: var(--grad-ink); color: #eef3ee; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: rgba(23,34,29,0.06); display: grid; place-items: center; color: var(--muted); transition: background 0.2s, transform 0.2s; }
.modal-immersive .modal-close { background: rgba(255,255,255,0.1); color: #dfeae2; }
.modal-close:hover { background: rgba(23,34,29,0.12); transform: rotate(90deg); }
.modal h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: var(--s-3); }
.modal .lead { margin-bottom: var(--s-6); }
.modal-orb-stage { display: grid; place-items: center; min-height: 260px; position: relative; margin: var(--s-5) 0; }
.modal-orb { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #fff, rgba(255,255,255,0) 60%), var(--grad-orb); box-shadow: var(--sh-orb); display: grid; place-items: center; color: #17332a; --breath-scale: 0.72; transform: scale(var(--breath-scale)); }
.modal-orb.breathing { animation: breathe 12s var(--ease-soft) infinite; }
.modal-phase { font-family: var(--font-display); font-size: 1.5rem; }
.modal-immersive .modal-phase { color: #eef3ee; }
.modal-timer { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.05em; margin-top: 4px; }
.modal-immersive .modal-timer { color: #a9bbb0; }
.progress-track { height: 6px; border-radius: 10px; background: rgba(23,34,29,0.1); overflow: hidden; margin: var(--s-5) 0; }
.modal-immersive .progress-track { background: rgba(255,255,255,0.14); }
.progress-fill { height: 100%; width: 0%; border-radius: 10px; background: var(--grad-orb); transition: width 0.4s linear; }
.modal-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Session steps */
.step-track { display: flex; gap: 8px; justify-content: center; margin-bottom: var(--s-5); }
.step-dot { width: 40px; height: 5px; border-radius: 10px; background: rgba(23,34,29,0.12); transition: background 0.3s; }
.modal-immersive .step-dot { background: rgba(255,255,255,0.18); }
.step-dot.active { background: var(--sage-700); }
.modal-immersive .step-dot.active { background: var(--gold); }

/* Completion */
.done-check { width: 76px; height: 76px; border-radius: 50%; background: var(--grad-orb); display: grid; place-items: center; color: #17332a; font-size: 1.8rem; margin: 0 auto var(--s-5); box-shadow: var(--sh-orb); animation: doneIn 0.6s var(--ease); }
@keyframes doneIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Toast */
.toast-wrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1100; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: #f2f6f1; padding: 12px 20px; border-radius: var(--r-pill); box-shadow: var(--sh-3); font-size: 0.9rem; opacity: 0; transform: translateY(12px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.toast.show { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Audio library + persistent mini player
   ========================================================================== */
.audio-cats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--s-6); }
.audio-cat { padding: 9px 18px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: 0.86rem; color: var(--ink-soft); transition: all 0.25s var(--ease); }
.audio-cat.active, .audio-cat:hover { background: var(--sage-700); color: #fff; border-color: var(--sage-700); }
.audio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); }
.audio-card { border-radius: var(--r-lg); overflow: hidden; background: var(--card); border: 1px solid var(--line-soft); box-shadow: var(--sh-1); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); cursor: pointer; }
.audio-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.audio-art { position: relative; aspect-ratio: 1/1; display: grid; place-items: center; color: #fff; font-size: 2rem; }
.audio-art .play { position: absolute; right: 12px; bottom: 12px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--ink); display: grid; place-items: center; box-shadow: var(--sh-2); transition: transform 0.25s var(--ease); }
.audio-card:hover .play { transform: scale(1.08); }
.audio-meta { padding: var(--s-4); }
.audio-meta h3 { font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; margin-bottom: 3px; }
.audio-meta span { font-size: 0.8rem; color: var(--muted); }

.miniplayer {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(140%); bottom: 18px; z-index: 890;
  width: min(560px, 94%); background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line-soft); border-radius: var(--r-pill); box-shadow: var(--sh-3);
  display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; transition: transform 0.45s var(--ease);
}
.miniplayer.show { transform: translateX(-50%) translateY(0); }
.mp-art { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.mp-info { flex: 1; min-width: 0; }
.mp-info b { font-size: 0.9rem; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-info span { font-size: 0.76rem; color: var(--muted); }
.mp-bar { height: 4px; border-radius: 4px; background: rgba(23,34,29,0.1); margin-top: 5px; overflow: hidden; }
.mp-bar-fill { height: 100%; width: 30%; background: var(--sage-700); border-radius: 4px; }
.mp-controls { display: flex; align-items: center; gap: 6px; }

/* Page hero (sub-pages) */
.page-hero { position: relative; padding: calc(var(--nav-h) + 56px) 0 var(--s-7); overflow: hidden; }
.page-hero .hero-wash { opacity: 0.75; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: var(--s-4); }
.page-hero p { color: var(--muted); font-size: 1.08rem; max-width: 560px; }

/* Dashboard */
.dash-greet { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--s-3); }
.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.dash-tile { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-1); }
.dash-tile b { font-family: var(--font-display); font-size: 1.9rem; color: var(--sage-700); display: block; line-height: 1.1; }
.dash-tile span { font-size: 0.84rem; color: var(--muted); }
.dash-feature { grid-column: span 2; background: var(--grad-ink); color: #eef3ee; }
.dash-feature .muted { color: #b7c6bc; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); will-change: opacity, transform; }
.js .reveal.in { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .stagger.in > * { opacity: 1; transform: none; }
.js .stagger.in > *:nth-child(1) { transition-delay: 0.04s; }
.js .stagger.in > *:nth-child(2) { transition-delay: 0.10s; }
.js .stagger.in > *:nth-child(3) { transition-delay: 0.16s; }
.js .stagger.in > *:nth-child(4) { transition-delay: 0.22s; }
.js .stagger.in > *:nth-child(5) { transition-delay: 0.28s; }
.js .stagger.in > *:nth-child(6) { transition-delay: 0.34s; }
.js .stagger.in > *:nth-child(7) { transition-delay: 0.40s; }
.js .stagger.in > *:nth-child(8) { transition-delay: 0.46s; }

/* Preloader */
/* The preloader is an opaque full-viewport overlay, so nothing behind it counts
   as painted for Largest Contentful Paint. It used to be dismissed only from
   js/sukoon.js, so the hero <h1> could not register as painted until that file
   (~40 KB, the only script index.html loads) had downloaded and executed, plus
   an artificial 250ms setTimeout, plus a 600ms fade. Measured LCP on the live
   site was 4.2s with 2927ms (69%) of pure render delay.

   It is now dismissed by CSS animation instead, which starts as soon as the
   stylesheet applies and does not wait for any JavaScript. The brand moment is
   preserved but time-boxed. js/sukoon.js still removes the node afterwards as a
   safety net and for memory, but no longer gates visibility. */
.preloader { position: fixed; inset: 0; z-index: 2000; background: var(--paper); display: grid; place-items: center; transition: opacity 0.6s var(--ease), visibility 0.6s; animation: preloaderOut 0.5s var(--ease) 0.2s forwards; }
@keyframes preloaderOut { to { opacity: 0; visibility: hidden; } }
.preloader.done { opacity: 0; visibility: hidden; }
.preloader .p-orb { width: 76px; height: 76px; border-radius: 50%; background: var(--grad-orb); box-shadow: var(--sh-orb); animation: breathe 4s var(--ease-soft) infinite; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .explore-grid { grid-template-columns: repeat(2, 1fr); }
  .xp-tall { grid-row: span 1; }
  .support-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-feature { grid-column: span 2; }
}

@media (max-width: 920px) {
  :root { --nav-h: 66px; }
  .nav-links { display: none; }
  .nav-signin { display: none; }
  .nav-burger { display: flex; }
  .hero-inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .orb-stage { min-height: 360px; order: -1; }
  .hero-copy { max-width: none; text-align: center; margin-inline: auto; }
  .hero-cta, .hero-trust { justify-content: center; }
  .relief-panel { grid-template-columns: 1fr; }
  .relief-media { min-height: 200px; }
  .quickrelief { grid-template-columns: 1fr; text-align: center; }
  .quickrelief p { margin-inline: auto; }
  .quickrelief .qr-visual { order: -1; }
  .companion-wrap { grid-template-columns: 1fr; }
  .impact-wrap { grid-template-columns: 1fr; }
  .t-grid { grid-template-columns: 1fr; }
  .mood-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  /* show bottom nav + hide desktop CTA clutter on small screens */
  .bottomnav { display: flex; }
  body { padding-bottom: calc(var(--bottomnav-h) + 10px); }
  .nav-relief span.txt { display: none; }
  .nav-relief { padding: 10px; }
  /* profile.html carries brand + Quick Relief + Sign out + burger in one bar;
     collapse Sign out to its icon so the row can't overflow on ~360px screens
     (the drawer also carries a full-width Sign out). */
  .nav-signout .txt { display: none; }
  .nav-signout { padding: 9px 11px; }
  .section { padding: var(--s-8) 0; }
}
/* Reserve bottom-nav space ONLY on pages that actually have a bottom nav.
   Without this, pages with no .bottomnav (calm-space, auth, admin, offline…)
   get ~78px of dead space at the bottom on mobile. Browsers without :has()
   keep the harmless gap above rather than risking content hidden behind the bar. */
@supports selector(body:has(.bottomnav)) {
  @media (max-width: 860px) {
    body { padding-bottom: 0; }
    body:has(.bottomnav) { padding-bottom: calc(var(--bottomnav-h) + 10px); }
  }
}

@media (max-width: 560px) {
  .section { padding: var(--s-7) 0; }
  .mood-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .explore-grid { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .week { grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .day { padding: 12px 2px; }
  .day .d-emoji { font-size: 1.2rem; }
  .impact-stats { grid-template-columns: repeat(3, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-feature { grid-column: span 1; }
  .modal { padding: var(--s-6) var(--s-5); }
  .btn-lg { padding: 14px 24px; }
  .hero h1 { font-size: clamp(2.3rem, 9vw, 3rem); }
}

@media (max-width: 380px) {
  .mood-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .hero-wash { animation: none; }
  .orb.breathing, .modal-orb.breathing, .relief-media .mini-orb, .orb-ring.pulsing, .preloader .p-orb { animation: none !important; }
  /* Reduced motion: skip the brand moment entirely rather than animating it. */
  .preloader { animation: none !important; opacity: 0; visibility: hidden; }
  .js .reveal, .js .stagger > * { opacity: 1 !important; transform: none !important; }
  .orb { transform: scale(0.88); }
}

/* ==========================================================================
   Content components (experience / therapy pages)
   ========================================================================== */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-4); }
.media-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--sh-1); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s; }
.media-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--line); }
.media-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 0.96rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.media-card h3 i { color: var(--sage-700); }
.media-card iframe { width: 100%; border: 0; border-radius: var(--r-md); display: block; }
.video-frame { aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: var(--r-md); display: block; }

/* Resilient responsive video embed: guaranteed height via padding (works even
   without aspect-ratio support) and a visible placeholder so a slow/blocked
   embed never collapses to nothing. */
.video-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--r-md); overflow: hidden; background: #10190f; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.video-embed::after { content: "\f04b"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.28); font-size: 1.6rem; z-index: -1; }

/* Click-to-play facade: a thumbnail + play button; the real iframe is only
   injected on demand. Big perf win on pages with many videos. */
.video-facade { cursor: pointer; background-size: cover; background-position: center; background-color: #10190f; }
.video-facade::after { content: none; }
.video-facade::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,25,15,0.12), rgba(16,25,15,0.5)); z-index: 1; transition: background 0.25s; }
.video-facade:hover::before { background: linear-gradient(180deg, rgba(16,25,15,0.05), rgba(16,25,15,0.35)); }
.video-facade .vf-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 64px; height: 64px; border-radius: 50%; background: rgba(23,34,29,0.62); color: #fff; display: grid; place-items: center; font-size: 1.25rem; border: 1px solid rgba(255,255,255,0.35); transition: transform 0.25s var(--ease), background 0.25s; pointer-events: none; }
.video-facade:hover .vf-play, .video-facade:focus-visible .vf-play { transform: translate(-50%,-50%) scale(1.08); background: var(--sage-700); }
.video-facade:focus-visible { outline: 2px solid var(--sage-700); outline-offset: 3px; }
.video-facade.loaded::before, .video-facade.loaded .vf-play { display: none; }

/* IMPORTANT: iframes can render blank inside a CSS-transformed ancestor in
   several browsers. Reveal media/video containers with opacity only. */
.js .stagger > .media-card { transform: none !important; }
.js .reveal:has(.video-embed), .js .reveal:has(iframe),
.js .stagger:has(.video-embed) > *, .js .stagger:has(iframe) > * { transform: none !important; }

.content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s-4); }
.content-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-1); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s; }
.content-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--line); }
.content-card .thumb { aspect-ratio: 3 / 4; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; padding: 16px; }
.content-card .thumb img { max-height: 100%; width: auto; object-fit: contain; border-radius: 8px; box-shadow: var(--sh-1); transition: transform 0.4s var(--ease); }
.content-card:hover .thumb img { transform: scale(1.04); }
.content-card .body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.content-card .body h3 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; }
.content-card .body p { color: var(--muted); font-size: 0.85rem; flex: 1; line-height: 1.55; }
.content-card.link-card { text-decoration: none; }
.content-card.link-card .body h3 { display: flex; align-items: flex-start; gap: 8px; }
.content-card.link-card .body h3 i { color: var(--sage-700); margin-top: 3px; }

/* Split media/text */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center; }
.split > img, .split .split-media img { border-radius: var(--r-lg); border: 1px solid var(--line-soft); box-shadow: var(--sh-2); width: 100%; object-fit: cover; }
.split h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 14px; }
.split p { color: var(--muted); margin-bottom: 12px; }

/* Checklist */
.check-list { display: flex; flex-direction: column; gap: 11px; margin: var(--s-4) 0; }
.check-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.96rem; }
.check-list li i { color: var(--sage-700); margin-top: 4px; flex-shrink: 0; }
.check-list.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 24px; }

/* Quotes */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); }
.quote-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--sh-1); font-family: var(--font-display); font-size: 1.05rem; line-height: 1.5; color: var(--ink); transition: transform 0.35s var(--ease), border-color 0.3s; }
.quote-card:hover { transform: translateY(-3px); border-color: var(--sage); }
.quote-card::before { content: "\201C"; font-family: var(--font-display); color: var(--sage); font-size: 2.4rem; line-height: 0; display: block; margin-bottom: 14px; }

/* Tiles (icon feature cards) */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-4); }
.tile { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 28px 26px; box-shadow: var(--sh-1); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--line); }
.tile .t-ico { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; margin-bottom: 16px; background: linear-gradient(135deg, #8baf9b, #6f9784); box-shadow: var(--sh-1); }
.tile.sky .t-ico { background: linear-gradient(135deg, #a8c7d8, #7fa9bf); }
.tile.gold .t-ico { background: linear-gradient(135deg, #e7c98b, #d3ac60); }
.tile.ink .t-ico { background: linear-gradient(135deg, #33453b, #1d2b24); }
.tile h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.tile p { color: var(--muted); font-size: 0.9rem; margin-bottom: 14px; }
.tile .num { font-family: var(--font-display); font-size: 1.4rem; color: var(--sage-700); }

/* Horizontal scroller */
.scroller { display: flex; gap: 16px; overflow-x: auto; padding: 6px 2px 18px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.scroller img { width: 300px; height: 210px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line-soft); scroll-snap-align: start; flex: 0 0 auto; box-shadow: var(--sh-1); transition: transform 0.3s var(--ease); }
.scroller img:hover { transform: scale(1.02); }
.scroller-nav { display: flex; gap: 10px; margin-bottom: 14px; }

/* Meme / image slider */
.meme-slider { position: relative; max-width: 620px; margin-inline: auto; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-soft); background: var(--card); box-shadow: var(--sh-1); }
.meme-slider .slide { display: none; padding: 14px; }
.meme-slider .slide.active { display: block; animation: fadeSlide 0.4s var(--ease); }
@keyframes fadeSlide { from { opacity: 0; } to { opacity: 1; } }
.meme-slider .slide img { width: 100%; border-radius: var(--r-md); }
.meme-nav { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }

/* Simple 2-up feature split used on pages */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; }

@media (max-width: 920px) {
  .split, .feature-split { grid-template-columns: 1fr; gap: var(--s-6); }
  .split .split-media { order: -1; }
  .check-list.two-col { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .media-grid { grid-template-columns: 1fr; }
  .content-grid { grid-template-columns: 1fr 1fr; }
  .scroller img { width: 240px; height: 170px; }
}
@media (max-width: 380px) {
  .content-grid { grid-template-columns: 1fr; }
}

/* Mini player volume control */
.mp-vol-wrap { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.8rem; }
.miniplayer input[type="range"] { -webkit-appearance: none; appearance: none; width: 78px; height: 5px; border-radius: 10px; background: rgba(23,34,29,0.14); outline: none; }
.miniplayer input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sage-700); cursor: pointer; }
.miniplayer input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: var(--sage-700); cursor: pointer; }
@media (max-width: 560px) { .mp-vol-wrap { display: none; } }

/* ==========================================================================
   Auth (sign in / sign up) + Contact + Countdown
   ========================================================================== */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-art { position: relative; overflow: hidden; display: grid; place-items: center; padding: 48px; background: var(--grad-ink); color: #eef3ee; }
.auth-art::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(50% 45% at 20% 15%, rgba(168,199,216,0.25), transparent 60%),
  radial-gradient(45% 40% at 85% 80%, rgba(231,201,139,0.16), transparent 60%); }
.auth-art-inner { position: relative; z-index: 2; max-width: 420px; }
.auth-orb { width: 116px; height: 116px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #fff, rgba(255,255,255,0) 60%), var(--grad-orb); box-shadow: var(--sh-orb); margin-bottom: 28px; animation: breathe 12s var(--ease-soft) infinite; }
.auth-art h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 14px; color: #f4f7f1; }
.auth-art p { color: #c3d1c8; }
.auth-form-side { display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card { width: min(430px, 100%); background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 36px; box-shadow: var(--sh-2); }
.auth-card h1 { font-size: 1.7rem; margin-bottom: 6px; }
.auth-card > p { color: var(--muted); margin-bottom: 22px; }
.auth-card form { display: flex; flex-direction: column; gap: 16px; }
.pw-row { position: relative; }
.pw-row .field { padding-right: 44px; }
.pw-row .eye { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); cursor: pointer; }
.pw-row .eye:hover { color: var(--sage-700); }
.auth-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
.auth-meta a { color: var(--sage-700); font-weight: 600; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 0.9rem; color: var(--muted); }
.auth-switch button { color: var(--sage-700); font-weight: 700; }
.auth-back { position: absolute; top: 20px; left: 22px; z-index: 3; }
.hidden { display: none !important; }

.auth-form-side .auth-mobile-brand { display: none; }

.countdown { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 36px 0; }
.count-box { min-width: 92px; padding: 20px 14px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--sh-1); text-align: center; }
.count-box b { display: block; font-family: var(--font-display); font-size: 2.2rem; color: var(--sage-700); line-height: 1.1; }
.count-box span { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

@media (max-width: 920px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-form-side .auth-mobile-brand { display: inline-flex; margin-bottom: 24px; }
}