/* ==========================================================================
   vagal.app · site.css
   One stylesheet for every page. Tokens are the dark set from the app's
   glass-tokens.css v1.1 (design/vagal-canvas/shared); the site is dark only.
   Components follow the "Vagal Website" boards (Main, Support, Privacy,
   Terms, NotFound + the 390 mobile boards). No framework, no build step.
   ========================================================================== */

/* ---------- Tokens (glass-tokens.css v1.1, dark) ---------- */
:root {
  color-scheme: dark;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", system-ui, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-watch: "SF Compact", "SF Compact Text", -apple-system, system-ui, sans-serif;
  --font-watch-rounded: ui-rounded, "SF Compact Rounded", "SF Pro Rounded", -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-large:    700 34px/41px var(--font-display);
  --t-title1:   700 28px/34px var(--font-display);
  --t-title2:   600 22px/28px var(--font-display);
  --t-title2-r: 600 22px/28px var(--font-rounded);
  --t-title3:   600 20px/25px var(--font-display);
  --t-headline: 600 17px/22px var(--font-text);
  --t-body:     400 17px/22px var(--font-text);
  --t-callout:  400 16px/21px var(--font-text);
  --t-subhead:  400 15px/20px var(--font-text);
  --t-footnote: 400 13px/18px var(--font-text);

  --r-card: 22px;
  --ease-breath: cubic-bezier(0.37, 0, 0.63, 1);

  --hue-inhale: #E08A6D;
  --hue-exhale: #7BA8A3;
  --orb-inhale: radial-gradient(circle at 50% 45%, #FFE3D6 0%, #FFE3D6 10%, #F4B69C 23%, #E08A6D 45%, #B85A3C 72%);
  --orb-exhale: radial-gradient(circle at 50% 45%, #DDF2EE 0%, #DDF2EE 10%, #AFCFCB 23%, #7BA8A3 45%, #3E7C76 72%);

  --bg: #000000; --bg-card: #1C1C1E; --bg-card-2: #2C2C2E;
  --label: #FFFFFF; --label-2: rgba(235,235,245,0.60);
  --separator: rgba(84,84,88,0.65); --fill-2: rgba(120,120,128,0.24);
  --tint: #E08A6D; --tint-fill: #B85A3C; --on-tint: #FFFFFF;
  --tint-soft: rgba(224,138,109,0.18);
  --heart: #FF375F;
  --crisis: #7BA8A3; --on-crisis: #0F1419;
  --tab-selected: rgba(255,255,255,0.08);
  --ring-track: rgba(255,255,255,0.12); --ring-arc: rgba(255,255,255,0.88);
  --orb-rim: inset 1.5px 1.5px 1px rgba(255,255,255,0.30), inset -2px -3px 8px rgba(0,0,0,0.18);
  --orb-halo-a: 0.20;
  --glass-bg: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 55%), rgba(30,30,34,0.60);
  --glass-fx: blur(16px) saturate(180%) brightness(0.92);
  --glass-border: rgba(255,255,255,0.14);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(255,255,255,0.04), 0 10px 30px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.40);
  --glass-clear-bg: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 55%), rgba(36,36,36,0.28);
  --glass-clear-border: rgba(255,255,255,0.20);
  --glass-clear-edge: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(255,255,255,0.05), 0 8px 24px rgba(0,0,0,0.35);
  --glass-tint-bg: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 26%), var(--tint-fill);
  --glass-tint-border: rgba(255,255,255,0.22);
  --glass-tint-edge: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.12), 0 6px 18px rgba(0,0,0,0.30);
  --glass-solid: #1C1C1E;

  /* layout */
  --gutter: 20px;
  --max: 1200px;
  --section-y: 48px;
}
@media (min-width: 760px) { :root { --gutter: 40px; --section-y: 88px; } }

/* Reduce Transparency: every glass level becomes solid (HIG), and the same
   fallback applies where backdrop-filter is unsupported. */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: var(--glass-solid); --glass-fx: none; --glass-clear-bg: var(--glass-solid); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: var(--glass-solid); --glass-clear-bg: var(--glass-solid); }
}
/* Increase Contrast (dark IC variants from the tokens). */
@media (prefers-contrast: more) {
  :root {
    --glass-border: var(--label); --label-2: var(--label);
    --separator: #8E8E93; --tint: #F2A287; --tint-fill: #9E4A2E;
    --ring-track: rgba(255,255,255,0.34); --ring-arc: #FFFFFF;
  }
}

/* ---------- Orb motion: Resonance 5-5 on a 10 s clock (tokens) ---------- */
@keyframes vg-breathe-55 {
  0%   { transform: scale(0.6); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  50%  { transform: scale(1);   animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  100% { transform: scale(0.6); }
}
@keyframes vg-inhale-layer-55 { 0% { opacity: 0; } 15% { opacity: 1; } 50% { opacity: 1; } 65% { opacity: 0; } 100% { opacity: 0; } }
@keyframes vg-halo-55 {
  0% { background-color: #7BA8A3; } 15% { background-color: #E08A6D; } 50% { background-color: #E08A6D; }
  65% { background-color: #7BA8A3; } 100% { background-color: #7BA8A3; }
}
@keyframes vg-idle {
  0%, 100% { transform: scale(0.92); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  50%      { transform: scale(1);    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
}
@keyframes vg-luma-55 {
  0%   { transform: scale(0.8); filter: brightness(0.72) saturate(0.9); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  50%  { transform: scale(0.8); filter: brightness(1.08) saturate(1);   animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  100% { transform: scale(0.8); filter: brightness(0.72) saturate(0.9); }
}
@keyframes vg-luma-idle {
  0%, 100% { transform: scale(0.96); filter: brightness(0.9); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  50%      { transform: scale(0.96); filter: brightness(1.02); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
}
/* Phase words, phase arc and Watch countdown (SessionActive / WatchSession46). */
@keyframes sa-word-in-55  { 0% { opacity: 0; } 1.52% { opacity: 1; } 48.48% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sa-word-out-55 { 0% { opacity: 0; } 50% { opacity: 0; } 51.52% { opacity: 1; } 98.48% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sa-arc-55 {
  0%     { stroke-dashoffset: 100;   opacity: 0; }
  1.52%  { stroke-dashoffset: 96.96; opacity: 1; }
  48.48% { stroke-dashoffset: 3.04;  opacity: 1; }
  50%    { stroke-dashoffset: 0;     opacity: 0; }
  50.01% { stroke-dashoffset: 100;   opacity: 0; }
  51.52% { stroke-dashoffset: 96.96; opacity: 1; }
  98.48% { stroke-dashoffset: 3.04;  opacity: 1; }
  100%   { stroke-dashoffset: 0;     opacity: 0; }
}
@keyframes ws-count-55 { from { transform: translateY(0); } to { transform: translateY(-380px); } }

/* Reduce Motion: diameter pinned; the breath is carried by brightness, the
   arc and the words. No bloom. */
@media (prefers-reduced-motion: reduce) {
  [data-orb="breathe-55"] { animation-name: vg-luma-55 !important; }
  [data-orb="idle"]       { animation-name: vg-luma-idle !important; }
  [data-orb-halo]         { animation: none !important; opacity: 0 !important; }
  html { scroll-behavior: auto !important; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--label);
  font: var(--t-body); letter-spacing: -0.025em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--tint); }
a:hover { color: #F2A287; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; border-radius: 6px; }
svg { flex: none; }
[id] { scroll-margin-top: 96px; }
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100; height: 44px; padding: 0 16px;
  display: flex; align-items: center; border-radius: 999px; background: var(--glass-solid); color: var(--label); text-decoration: none;
}
.skip:focus { top: 12px; }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.muted { color: var(--label-2); }
.m-only { display: inline; }
.d-only { display: none; }
@media (min-width: 900px) { .m-only { display: none; } .d-only { display: revert; } }

/* ---------- Type ---------- */
.display {
  font: 700 clamp(40px, 31.09px + 2.286vw, 64px)/1.1 var(--font-display); letter-spacing: -0.015em;
}
.section-title { font: var(--t-large); letter-spacing: 0.012em; }
.lead { font: 400 17px/25px var(--font-text); letter-spacing: -0.025em; color: var(--label-2); }
.eyebrow { font: var(--t-headline); letter-spacing: -0.025em; color: var(--tint); margin-bottom: 8px; }
.footnote { font: var(--t-footnote); letter-spacing: -0.006em; color: var(--label-2); }
.subhead { font: var(--t-subhead); letter-spacing: -0.015em; color: var(--label-2); }
@media (min-width: 760px) {
  .section-title { font: 700 48px/54px var(--font-display); letter-spacing: -0.012em; }
  .lead { font: 400 21px/30px var(--font-text); letter-spacing: -0.02em; }
  .lead.sm { font: 400 19px/28px var(--font-text); }
  .eyebrow { margin-bottom: 12px; }
}

/* ---------- Header / glass nav ---------- */
.site-header { position: sticky; top: 0; z-index: 20; padding-top: 12px; }
.site-header .wrap { width: min(var(--max), 100% - 24px); }
.nav {
  position: relative; height: 56px; padding: 0 5px 0 16px; border-radius: 999px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-edge);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.brand {
  height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--label); text-decoration: none;
  font: 600 20px/25px var(--font-display); letter-spacing: -0.022em;
}
.brand:hover { color: var(--label); }
.brand-orb { width: 20px; height: 20px; border-radius: 50%; background: var(--orb-inhale); box-shadow: var(--orb-rim); flex: none; }
.nav-links { display: none; list-style: none; gap: 4px; }
.nav-links a {
  height: 44px; padding: 0 16px; display: flex; align-items: center; border-radius: 22px;
  color: var(--label); text-decoration: none; font: var(--t-subhead); letter-spacing: -0.015em;
}
.nav-links a:hover { background: var(--tab-selected); color: var(--label); }
.nav-links a[aria-current="page"] { background: var(--tab-selected); color: var(--tint); font-weight: 600; }
.nav-actions { display: flex; align-items: center; gap: 6px; }
.btn-tint {
  height: 44px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass-tint-bg); border: 1px solid var(--glass-tint-border); box-shadow: var(--glass-tint-edge);
  color: var(--on-tint); font: 600 15px/20px var(--font-text); letter-spacing: -0.015em; text-decoration: none;
}
.btn-tint:hover { color: var(--on-tint); filter: brightness(1.08); }

/* Mobile menu: a native disclosure, so it works without JavaScript;
   site.js only adds Escape / outside-click / link-click closing. */
.menu > summary {
  list-style: none; width: 44px; height: 44px; border-radius: 22px; background: var(--fill-2); color: var(--label);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu .icon-close { display: none; }
.menu[open] .icon-open { display: none; }
.menu[open] .icon-close { display: block; }
.menu-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); padding: 8px; border-radius: var(--r-card);
  background: var(--glass-solid); border: 1px solid var(--glass-border); box-shadow: var(--glass-edge);
}
.menu-panel ul { list-style: none; display: grid; gap: 2px; }
.menu-panel a {
  min-height: 48px; padding: 0 16px; display: flex; align-items: center; border-radius: 14px;
  color: var(--label); text-decoration: none; font: var(--t-body); letter-spacing: -0.025em;
}
.menu-panel a:hover { background: var(--tab-selected); color: var(--label); }
.menu-panel a[aria-current="page"] { color: var(--tint); font-weight: 600; }

@media (min-width: 900px) {
  .site-header { padding-top: 20px; }
  .site-header .wrap { width: min(var(--max), 100% - 2 * var(--gutter)); }
  .nav { height: 64px; padding: 0 9px 0 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .brand { gap: 10px; justify-self: start; }
  .brand-orb { width: 22px; height: 22px; }
  .nav-links { display: flex; }
  .nav-actions { justify-self: end; }
  .btn-tint { padding: 0 20px; }
  .menu { display: none; }
}

/* ---------- Buttons & links ---------- */
.btn-store {
  width: 100%; max-width: 420px; height: 56px; padding: 0 24px; border-radius: 999px;
  background: var(--bg); border: 1.5px solid var(--label-2); color: var(--label);
  font: 600 17px/22px var(--font-text); letter-spacing: -0.025em;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
}
.btn-store:hover { color: var(--label); border-color: var(--label); }
@media (min-width: 760px) { .btn-store { width: auto; padding: 0 30px; } }
.btn-glass {
  height: 52px; padding: 0 24px; border-radius: 999px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-edge); color: var(--label);
  font: 600 17px/22px var(--font-text); letter-spacing: -0.025em;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.btn-glass:hover { color: var(--label); }
.btn-glass.sm { height: 44px; padding: 0 20px; font: 600 15px/20px var(--font-text); letter-spacing: -0.015em; }
.link-more {
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--tint);
  font: var(--t-body); letter-spacing: -0.025em; text-decoration: none;
}
.link-more:hover { text-decoration: underline; }
.icon-box {
  width: 44px; height: 44px; border-radius: 12px; background: var(--fill-2); color: var(--label);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.glyph-orb { width: 24px; height: 24px; border-radius: 50%; background: var(--orb-inhale); box-shadow: var(--orb-rim); }
.card { background: var(--bg-card); border-radius: var(--r-card); }
.check { display: flex; color: var(--tint); }

/* ---------- Hero ---------- */
.hero { padding: 48px 0 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.orb-stage { --size: 280px; --halo-o: -60px; --halo-ob: 56px; --halo-i: -28px; --halo-ib: 34px; position: relative; width: var(--size); height: var(--size); flex: none; }
.orb-stage .halo { position: absolute; border-radius: 50%; animation: vg-halo-55 10s linear infinite, vg-breathe-55 10s infinite; }
.orb-stage .halo.outer { inset: var(--halo-o); opacity: 0.10; filter: blur(var(--halo-ob)); }
.orb-stage .halo.inner { inset: var(--halo-i); opacity: var(--orb-halo-a); filter: blur(var(--halo-ib)); }
.ring-track { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ring-track); }
.ring-arc { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-arc circle { fill: none; stroke: var(--ring-arc); stroke-linecap: round; stroke-dasharray: 100 100; animation: sa-arc-55 10s linear infinite; }
.orb { position: absolute; inset: 12px; border-radius: 50%; animation: vg-breathe-55 10s infinite; }
.orb > span { position: absolute; inset: 0; border-radius: 50%; }
.orb .l-exhale { background: var(--orb-exhale); }
.orb .l-inhale { background: var(--orb-inhale); animation: vg-inhale-layer-55 10s linear infinite; }
.orb .l-core { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 22%, rgba(255,255,255,0) 40%); }
.orb .l-spec { background: radial-gradient(ellipse 36% 24% at 37% 23%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.10) 55%, rgba(255,255,255,0) 100%); }
.orb .l-edge { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,0.10) 96%, rgba(255,255,255,0) 100%); }
.orb .l-rim { box-shadow: var(--orb-rim); }
.phase-words { position: relative; width: 200px; height: 28px; margin-top: 20px; font: var(--t-title2-r); letter-spacing: 0.01em; color: var(--label-2); }
.phase-words span { position: absolute; inset: 0; opacity: 0; }
.w-in { animation: sa-word-in-55 10s linear infinite; }
.w-out { animation: sa-word-out-55 10s linear infinite; }
.hero h1 { margin-top: 32px; max-width: 960px; }
.hero .lead { margin-top: 14px; max-width: 640px; }
.hero .btn-store, .cta .btn-store { margin-top: 28px; }
.hero .trial, .cta .trial { margin-top: 16px; }
.hero .req, .cta .req { margin-top: 4px; }
@media (min-width: 760px) {
  .hero { padding: 80px 0 56px; }
  .orb-stage { --size: 344px; --halo-o: -84px; --halo-ob: 72px; --halo-i: -34px; --halo-ib: 40px; }
  .phase-words { width: 240px; margin-top: 24px; }
  .hero h1 { margin-top: 48px; }
  .hero .lead { margin-top: 18px; }
  .hero .btn-store, .cta .btn-store { margin-top: 36px; }
  .hero .trial, .cta .trial { margin-top: 18px; }
  .hero .req, .cta .req { margin-top: 6px; }
}

/* ---------- Sections ---------- */
.section { padding: var(--section-y) 0; }
.section > .wrap > .lead { margin-top: 10px; max-width: 680px; }
@media (min-width: 760px) { .section > .wrap > .lead { margin-top: 16px; } }

/* How it works */
.steps { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.step {
  padding: 20px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start;
}
.step .icon-box { grid-row: 1 / span 3; }
.step-num { font: 600 13px/18px var(--font-text); color: var(--label-2); font-variant-numeric: tabular-nums; }
.step h3 { font: var(--t-title2); letter-spacing: -0.012em; }
.step-text { font: 400 16px/23px var(--font-text); letter-spacing: -0.019em; color: var(--label-2); }
.step-practice { display: none; }
.also { margin-top: 16px; }
@media (min-width: 900px) {
  .steps { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .step { padding: 28px; min-height: 272px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr; row-gap: 12px; }
  .step .icon-box { grid-row: 1; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 12px; }
  .step .icon-box svg { width: 28px; height: 28px; }
  .step .glyph-orb { width: 28px; height: 28px; }
  .step-num { grid-row: 1; grid-column: 2; align-self: center; margin-bottom: 12px; font: 600 15px/20px var(--font-text); letter-spacing: -0.015em; }
  .step h3, .step-text, .step-practice { grid-column: 1 / -1; }
  .step h3 { font: var(--t-title1); letter-spacing: 0.014em; }
  .step-text { font: 400 17px/25px var(--font-text); letter-spacing: -0.025em; }
  .step-practice { display: block; align-self: end; }
  .also { margin-top: 24px; }
}

/* Resonance */
.split-text > p + p { margin-top: 12px; }
.split-text .lead { margin-top: 14px; }
.figure { margin-top: 24px; padding: 20px 20px 18px; }
.figure svg { display: block; width: 100%; height: auto; }
.figure .fig-wide { display: none; }
.figure figcaption { margin-top: 14px; }
.fig-label { fill: var(--label); font: 600 14px/18px var(--font-text); }
.fig-sub { fill: var(--label-2); font: 400 14px/18px var(--font-text); }
.fig-axis { fill: var(--label-2); font: 400 12px/16px var(--font-text); }
.fig-hr { fill: none; stroke: var(--ring-arc); }
.fig-base { stroke: var(--separator); }
.med-note { margin-top: 20px; padding-top: 16px; border-top: 0.5px solid var(--separator); }
@media (min-width: 600px) {
  .figure .fig-wide { display: block; }
  .figure .fig-narrow { display: none; }
  .fig-label { font-size: 15px; } .fig-sub { font-size: 15px; }
}
@media (min-width: 760px) {
  .split-text .lead { margin-top: 20px; }
  .split-text > p + p { margin-top: 16px; }
}
@media (min-width: 1024px) {
  .split { display: grid; gap: 0 64px; align-items: center; }
  .split-res { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". fig" "text fig" "note fig" ". fig"; }
  .split-res .split-text { grid-area: text; }
  .split-res .figure { grid-area: fig; margin-top: 0; padding: 28px 28px 24px; }
  .split-res .med-note { grid-area: note; margin-top: 28px; }
  .figure figcaption { margin-top: 16px; }
}

/* Apple Watch */
.watch-wrap { margin: 28px auto 0; width: 336px; height: 448px; overflow: hidden; }
.watch { position: relative; width: 420px; height: 560px; transform: scale(0.8); transform-origin: 0 0; }
.watch > div { position: absolute; }
.w-band-top { left: 100px; top: 0; width: 220px; height: 150px; border-radius: 30px 30px 10px 10px; background: var(--bg-card); }
.w-band-bottom { left: 100px; top: 410px; width: 220px; height: 150px; border-radius: 10px 10px 30px 30px; background: var(--bg-card); }
.w-crown { left: 354px; top: 196px; width: 16px; height: 58px; border-radius: 7px; background: var(--bg-card-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); }
.w-button { left: 356px; top: 282px; width: 10px; height: 76px; border-radius: 5px; background: var(--bg-card-2); }
.w-case { left: 60px; top: 105px; width: 300px; height: 350px; border-radius: 70px; background: var(--bg-card-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -2px 6px rgba(0,0,0,0.4), 0 24px 60px rgba(0,0,0,0.6); }
.w-screen { left: 80px; top: 125px; width: 260px; height: 310px; border-radius: 50px; overflow: hidden; background: #000; }
.w-ui { position: absolute; left: 0; top: 0; width: 208px; height: 248px; transform: scale(1.25); transform-origin: 0 0; color: #FFF; font-family: var(--font-watch); }
.w-ui > span { position: absolute; }
.w-hr { left: 20px; top: 12px; height: 19px; display: flex; align-items: center; gap: 4px; font: 600 16px/19px var(--font-watch-rounded); font-variant-numeric: tabular-nums; }
.w-hr svg { color: var(--heart); }
.w-orb { left: 42px; top: 30px; width: 124px; height: 124px; }
.w-orb .halo { position: absolute; inset: -6px; border-radius: 50%; opacity: 0.30; filter: blur(16px); animation: vg-halo-55 10s linear infinite, vg-breathe-55 10s infinite; }
.w-orb .ring-track { border-width: 3px; }
.w-phase { left: 20px; top: 158px; width: 150px; display: flex; flex-direction: column; }
.w-word { position: relative; display: block; height: 20px; font: 600 17px/20px var(--font-watch); letter-spacing: -0.004em; white-space: nowrap; }
.w-word span { position: absolute; inset: 0; opacity: 0; }
.w-count { display: block; height: 38px; overflow: hidden; }
.w-count > span { display: flex; flex-direction: column; font: 600 34px/38px var(--font-watch-rounded); letter-spacing: -0.018em; font-variant-numeric: tabular-nums; animation: ws-count-55 10s steps(10, end) infinite; }
.w-end {
  left: 106px; top: 190px; width: 84px; height: 40px; border-radius: 20px;
  background: var(--glass-clear-bg); border: 1px solid var(--glass-clear-border); box-shadow: var(--glass-clear-edge);
  color: #FFF; font: 600 16px/19px var(--font-watch); display: flex; align-items: center; justify-content: center; gap: 6px;
}
.feature-list { list-style: none; margin-top: 28px; overflow: hidden; }
.feature-list li { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; }
.feature-list li + li::before { content: ""; position: absolute; top: 0; left: 72px; right: 0; height: 0.5px; background: var(--separator); }
.feature-list .icon-box { width: 36px; height: 36px; border-radius: 10px; }
.feature-list .heart { color: var(--heart); }
.feature-list strong { display: block; font: var(--t-headline); letter-spacing: -0.025em; }
.feature-list span.desc { display: block; margin-top: 4px; font: 400 16px/23px var(--font-text); letter-spacing: -0.019em; color: var(--label-2); }
@media (min-width: 1024px) {
  .split-watch { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "fig ." "fig intro" "fig list" "fig ."; }
  .split-watch .split-text { grid-area: intro; }
  .split-watch .watch-wrap { grid-area: fig; margin: 0; width: 420px; height: 560px; justify-self: center; overflow: visible; }
  .split-watch .watch { transform: none; }
  .split-watch .feature-list { grid-area: list; margin-top: 32px; }
  .feature-list li { padding: 20px; }
}

/* Privacy card */
.privacy-card { padding: 28px 20px; }
.privacy-card h2 { margin-top: 20px; }
.privacy-card .lead { margin-top: 12px; }
.checks { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.checks li { display: flex; gap: 12px; font: 400 16px/23px var(--font-text); letter-spacing: -0.019em; }
.checks .check { padding-top: 3px; }
.privacy-card .link-more { margin-top: 16px; }
@media (min-width: 760px) {
  .privacy-card { padding: 48px; }
  .privacy-card .icon-box { width: 52px; height: 52px; border-radius: 14px; }
  .privacy-card .icon-box svg { width: 26px; height: 26px; }
  .privacy-card h2 { margin-top: 24px; }
  .privacy-card .lead { margin-top: 16px; }
  .checks { gap: 20px; }
  .checks li { gap: 14px; font: 400 17px/25px var(--font-text); letter-spacing: -0.025em; }
}
@media (min-width: 1024px) {
  .privacy-card { padding: 56px 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "head list" "more list"; gap: 0 64px; align-items: start; }
  .privacy-card .pc-head { grid-area: head; }
  .privacy-card .checks { grid-area: list; margin-top: 0; }
  .privacy-card .pc-more { grid-area: more; }
}

/* Plans */
.plans-head { text-align: left; }
.includes { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.includes li { display: flex; align-items: center; gap: 8px; font: var(--t-callout); letter-spacing: -0.019em; }
.plan-grid { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.plan { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.plan-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 28px; }
.plan h3 { font: var(--t-title2); letter-spacing: -0.012em; }
.badge {
  height: 26px; padding: 0 10px; border-radius: 13px; background: var(--tint-soft); color: var(--tint);
  font: 600 13px/18px var(--font-text); display: inline-flex; align-items: center; white-space: nowrap;
}
.plan p { font: 400 16px/23px var(--font-text); letter-spacing: -0.019em; color: var(--label-2); }
.plan p.price { margin-top: auto; padding-top: 14px; border-top: 0.5px solid var(--separator); font: var(--t-body); letter-spacing: -0.025em; color: var(--label); }
.plan-note { margin-top: 24px; }
.plan-note + .plan-note { margin-top: 8px; }
@media (min-width: 760px) {
  .plans-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .plans-head .lead { margin-top: 16px; max-width: 720px; }
  .includes { margin-top: 32px; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
  .plan-note { max-width: 820px; margin-inline: auto; text-align: center; margin-top: 28px; }
  .plan p { font: 400 17px/25px var(--font-text); letter-spacing: -0.025em; }
}
@media (min-width: 900px) {
  .plan-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .plan { padding: 28px; gap: 10px; }
}

/* FAQ (native disclosures) */
.faq-list { margin-top: 20px; overflow: hidden; }
.faq-list details + details { border-top: 0.5px solid var(--separator); }
.faq-list summary {
  list-style: none; min-height: 64px; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; font: var(--t-headline); letter-spacing: -0.025em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { color: var(--label-2); transition: transform 0.2s var(--ease-breath); }
.faq-list details[open] summary svg { transform: rotate(180deg); }
.faq-list details p { padding: 0 20px 20px; font: 400 16px/23px var(--font-text); letter-spacing: -0.019em; color: var(--label-2); }
.faq-aside .lead { display: none; }
.faq-more { margin-top: 12px; }
@media (min-width: 760px) {
  .faq-list summary { padding: 12px 24px; }
  .faq-list details p { padding: 0 24px 22px; font: 400 17px/25px var(--font-text); letter-spacing: -0.025em; }
}
@media (min-width: 1024px) {
  .split-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; grid-template-areas: "aside list" "more list"; align-items: start; }
  .faq-aside { grid-area: aside; }
  .faq-aside .lead { display: block; margin-top: 16px; }
  .split-faq .faq-list { grid-area: list; margin-top: 0; }
  .faq-more { grid-area: more; margin-top: 8px; }
}

/* Closing CTA */
.cta { padding: 40px 0 56px; text-align: center; }
.cta .wrap { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 760px) { .cta { padding: 64px 0 104px; } }

/* ---------- Footer ---------- */
.site-footer .wrap { padding: 28px 0 32px; border-top: 0.5px solid var(--separator); }
.site-footer .blurb { margin-top: 4px; max-width: 520px; }
.foot-nav { margin-top: 16px; }
.foot-nav ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.foot-nav a {
  height: 44px; display: flex; align-items: center; gap: 6px; color: var(--label); text-decoration: none;
  font: var(--t-body); letter-spacing: -0.025em;
}
.foot-nav a:hover { color: var(--tint); }
.foot-legal { margin-top: 16px; display: flex; flex-direction: column; align-items: flex-start; }
.foot-legal a { height: 44px; display: inline-flex; align-items: center; color: var(--label-2); text-decoration: none; }
.foot-legal a:hover { color: var(--label); }
@media (min-width: 900px) {
  .site-footer .wrap { padding: 40px 0 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: start; }
  .site-footer .blurb { margin-top: 8px; }
  .foot-nav { margin-top: 0; }
  .foot-nav ul { display: flex; gap: 8px; }
  .foot-nav a { padding: 0 12px; font: var(--t-subhead); letter-spacing: -0.015em; }
  .foot-legal { grid-column: 1 / -1; margin-top: 0; flex-direction: row; align-items: center; justify-content: space-between; }
}
/* Compact footer (404) */
.site-footer.compact .wrap { padding: 12px 0 24px; }
@media (min-width: 900px) {
  .site-footer.compact .wrap { display: flex; align-items: center; justify-content: space-between; }
}

/* ---------- Page intro (Support, legal) ---------- */
.page-intro { padding: 40px 0 16px; }
.page-intro .lead { margin-top: 12px; max-width: 720px; }
.page-intro .lead a, .prose-link { color: var(--tint); text-decoration: none; }
.page-intro .lead a:hover, .prose-link:hover { text-decoration: underline; }
@media (min-width: 760px) {
  .page-intro { padding: 72px 0 40px; }
  .page-intro .lead { margin-top: 16px; }
}

/* ---------- Support ---------- */
.support-grid { display: flex; flex-direction: column; gap: 16px; }
.support-main { display: flex; flex-direction: column; gap: 16px; }
.s-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.s-card h2 { font: var(--t-title2); letter-spacing: -0.012em; }
.s-card .body { font: 400 16px/23px var(--font-text); letter-spacing: -0.019em; color: var(--label-2); }
.s-card .btn-glass { align-self: flex-start; margin-top: 4px; }
.rows { margin-top: 2px; }
.rows > div { padding: 12px 0; border-top: 0.5px solid var(--separator); }
.rows dt { font: var(--t-headline); letter-spacing: -0.025em; }
.rows dd { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.rows .path { font: 600 15px/20px var(--font-text); letter-spacing: -0.015em; }
.rows .note { font: var(--t-subhead); letter-spacing: -0.015em; color: var(--label-2); }
.rows .note a { color: var(--tint); text-decoration: none; }
.rows .note a:hover { text-decoration: underline; }
.s-card .after { padding-top: 14px; border-top: 0.5px solid var(--separator); }
.s-card .after a { color: var(--tint); text-decoration: none; }
/* Crisis card */
.crisis .icon-box { color: var(--crisis); }
.crisis h2 { font: var(--t-title1); letter-spacing: 0.014em; margin-top: 4px; }
.crisis .intro { font: 400 17px/25px var(--font-text); letter-spacing: -0.025em; }
.crisis .emergency { margin-top: 4px; padding: 14px 16px; border-radius: 14px; background: var(--fill-2); font: 600 15px/21px var(--font-text); letter-spacing: -0.015em; }
.lines { list-style: none; margin-top: 4px; }
.lines li { padding: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.lines li + li { border-top: 0.5px solid var(--separator); }
.lines .region { display: block; font: var(--t-footnote); letter-spacing: -0.006em; color: var(--label-2); }
.lines .name { display: block; margin-top: 2px; font: var(--t-headline); letter-spacing: -0.025em; }
.lines .desc { display: block; margin-top: 2px; font: var(--t-subhead); letter-spacing: -0.015em; color: var(--label-2); }
.btn-crisis {
  align-self: flex-start; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--crisis); color: var(--on-crisis);
  font: 600 15px/20px var(--font-text); letter-spacing: -0.015em; display: inline-flex; align-items: center; text-decoration: none;
}
.btn-crisis:hover { color: var(--on-crisis); filter: brightness(1.08); }
.crisis .footnote { padding-top: 14px; border-top: 0.5px solid var(--separator); }
.qa { padding: 40px 0 48px; }
.qa-grid { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.qa-grid section { padding: 20px; }
.qa-grid h3 { font: var(--t-headline); letter-spacing: -0.025em; }
.qa-grid p { margin-top: 6px; font: 400 16px/23px var(--font-text); letter-spacing: -0.019em; color: var(--label-2); }
@media (min-width: 760px) {
  .s-card { padding: 28px; gap: 12px; }
  .rows > div { padding: 14px 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
  .rows dd { margin-top: 0; }
  .s-card .body, .crisis .intro { font: 400 17px/25px var(--font-text); letter-spacing: -0.025em; }
  .support-grid, .support-main { gap: 24px; }
  .qa { padding: 72px 0 88px; }
  .qa-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .qa-grid section { padding: 24px; }
  .qa-grid p { margin-top: 8px; }
}
@media (min-width: 1024px) {
  .support-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "main crisis"; align-items: start; }
  .support-grid .crisis { grid-area: crisis; }
  .support-main { grid-area: main; }
  .qa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 404 ---------- */
.page-404 { min-height: 100vh; display: flex; flex-direction: column; }
.nf { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 0; }
.nf .wrap { display: flex; flex-direction: column; align-items: center; }
.idle-stage { position: relative; width: 176px; height: 176px; flex: none; }
.idle-stage .halo { position: absolute; inset: -16px; border-radius: 50%; background: var(--hue-exhale); opacity: var(--orb-halo-a); filter: blur(26px); animation: vg-idle 10s infinite; }
.idle-stage .orb { background: var(--orb-exhale); box-shadow: var(--orb-rim); animation: vg-idle 10s infinite; }
.nf .code { margin-top: 32px; font: var(--t-headline); letter-spacing: -0.025em; color: var(--label-2); }
.nf h1 { margin-top: 6px; font: var(--t-large); letter-spacing: 0.012em; }
.nf .lead { margin-top: 12px; max-width: 560px; }
.nf-actions { margin-top: 28px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nf-actions .btn-glass { width: 100%; max-width: 420px; }
@media (min-width: 760px) {
  .idle-stage { width: 208px; height: 208px; }
  .idle-stage .halo { filter: blur(28px); }
  .nf .code { margin-top: 40px; }
  .nf h1 { margin-top: 8px; font: 700 48px/54px var(--font-display); letter-spacing: -0.012em; }
  .nf .lead { margin-top: 16px; }
  .nf-actions { margin-top: 32px; width: auto; flex-direction: row; gap: 16px; }
  .nf-actions .btn-glass { width: auto; }
}

/* ---------- Legal pages (generated from docs/*.md) ---------- */
.legal { padding: 40px 0 64px; }
.legal-grid { display: block; }
.toc-desktop { display: none; }
.toc-title { font: var(--t-headline); letter-spacing: -0.025em; margin-bottom: 8px; }
.toc-list { list-style: none; border-left: 0.5px solid var(--separator); }
.toc-list a {
  min-height: 44px; padding: 8px 0 8px 16px; display: flex; align-items: center; color: var(--label-2); text-decoration: none;
  font: var(--t-subhead); letter-spacing: -0.015em;
}
.toc-list a:hover { color: var(--label); }
.toc-mobile { margin-top: 24px; padding: 0 20px; }
.toc-mobile > summary {
  list-style: none; min-height: 52px; display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  font: var(--t-headline); letter-spacing: -0.025em;
}
.toc-mobile > summary::-webkit-details-marker { display: none; }
.toc-mobile > summary svg { color: var(--label-2); transition: transform 0.2s var(--ease-breath); }
.toc-mobile[open] > summary svg { transform: rotate(180deg); }
.toc-mobile .toc-list { margin-bottom: 12px; }
.legal-doc { font: 400 17px/28px var(--font-text); letter-spacing: -0.02em; overflow-wrap: break-word; }
.legal-doc h1 { font: 700 clamp(40px, 34.43px + 1.524vw, 56px)/1.1 var(--font-display); letter-spacing: -0.015em; }
.legal-doc .doc-subtitle { margin-top: 16px; font: 600 19px/28px var(--font-text); letter-spacing: -0.02em; }
.legal-doc .doc-updated { margin-top: 4px; color: var(--label-2); }
.legal-doc h2 { margin-top: 48px; padding-top: 32px; border-top: 0.5px solid var(--separator); font: var(--t-title1); letter-spacing: 0.014em; }
.legal-doc section:first-of-type > h2:first-child { margin-top: 40px; }
.legal-doc h3 { margin-top: 32px; font: var(--t-title3); letter-spacing: -0.022em; }
.legal-doc h4 { margin-top: 24px; font: var(--t-headline); letter-spacing: -0.025em; }
.legal-doc p { margin-top: 16px; }
.legal-doc .doc-lede { margin-top: 32px; }
.legal-doc ul, .legal-doc ol { margin-top: 16px; padding-left: 24px; display: grid; gap: 8px; }
.legal-doc strong { font-weight: 600; }
.legal-doc a { color: var(--tint); }
.legal-doc code { font: 400 15px/20px var(--font-mono); padding: 1px 6px; border-radius: 6px; background: var(--fill-2); overflow-wrap: anywhere; }
.legal-doc .callout { padding: 20px 24px; border-radius: var(--r-card); background: var(--bg-card); }
.table-card { margin-top: 20px; background: var(--bg-card); border-radius: var(--r-card); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-card table { width: 100%; min-width: 520px; border-collapse: collapse; font: 400 15px/22px var(--font-text); letter-spacing: -0.015em; }
.table-card th { text-align: left; vertical-align: bottom; padding: 14px 16px; font-weight: 600; color: var(--label-2); }
.table-card td { vertical-align: top; padding: 14px 16px; border-top: 0.5px solid var(--separator); }
@media (min-width: 760px) {
  .legal { padding: 72px 0 96px; }
  .legal-doc h2 { margin-top: 56px; }
  .legal-doc section:first-of-type > h2:first-child { margin-top: 48px; }
}
@media (min-width: 1080px) {
  .legal-grid { display: grid; grid-template-columns: 280px minmax(0, 760px); gap: 80px; align-items: start; }
  .toc-desktop { display: block; position: sticky; top: 104px; max-height: calc(100vh - 124px); overflow-y: auto; padding-top: 8px; }
  .toc-mobile { display: none; }
}

@media print {
  .site-header, .toc-desktop, .toc-mobile, .site-footer nav { display: none; }
  body { background: #fff; color: #000; }
}