/* ============================================================
   Darity website. Design system v2.
   Theme tokens mirror the app exactly (theme/tokens.ts):
   Rosewood (default) / Aurora / Platinum
   ============================================================ */

:root,
[data-theme="rosewood"] {
  --base: #100a0c;
  --deep: #83334a;
  --hi: #e8859a;
  --glow: #f27d95;
  --deck: #241a1e;
  --edge: rgba(242, 125, 149, 0.55);
  --text: #f7eef0;
  --text2: rgba(247, 238, 240, 0.6);
  --text3: rgba(247, 238, 240, 0.42);
  --chip: rgba(242, 125, 149, 0.16);
  --chip-text: #f6a6b3;
  --cta-text: #1a0d12;
  --blob1: #83334a;
  --blob2: #e08d9c;
  --blob3: #ee9caa;
  --habit: #d4af37;
  --todo: #db5757;
}

[data-theme="aurora"] {
  --base: #051614;
  --deep: #0e6f6a;
  --hi: #3fe4c8;
  --glow: #1fe3bd;
  --deck: #13201c;
  --edge: rgba(31, 227, 189, 0.5);
  --text: #e7f8f3;
  --text2: rgba(231, 248, 243, 0.6);
  --text3: rgba(231, 248, 243, 0.42);
  --chip: rgba(31, 227, 189, 0.14);
  --chip-text: #8ff0dc;
  --cta-text: #03150f;
  --blob1: #0e6f6a;
  --blob2: #3fe4c8;
  --blob3: #1fe3bd;
}

/* Platinum: monochrome silver base, but action/accent color borrows
   Aurora's teal so buttons, highlights, and glows stay legible and alive. */
[data-theme="platinum"] {
  --base: #0a0a0c;
  --deep: #2e3138;
  --hi: #3fe4c8;
  --glow: #1fe3bd;
  --deck: #1c1d22;
  --edge: rgba(31, 227, 189, 0.45);
  --text: #f2f3f7;
  --text2: rgba(242, 243, 247, 0.6);
  --text3: rgba(242, 243, 247, 0.42);
  --chip: rgba(31, 227, 189, 0.13);
  --chip-text: #8ff0dc;
  --cta-text: #03150f;
  --blob1: #3a3d45;
  --blob2: #9ba1af;
  --blob3: #1fe3bd;
}

/* Meridian, the sun at its highest. The only light theme: off-white base,
   ink text, aurora's hue brought down until it works as a control on a light
   field rather than as decoration. Mirrors the app's theme/tokens.ts,
   including the forked gold (#8a6f17), which exists because #d4af37 measures
   under 2:1 on an off-white base.
 *
 * Three values are deliberately a shade off the app, all measured, none
 * visible side by side. The app's own numbers land just under WCAG AA on a
 * light field and the web has no App Store review to hide behind:
 *   accent  #0a8f74 -> #09836a   white button text 4.04 -> 4.70
 *   chipTxt #077a63 -> #066253   on its own chip fill 4.21 -> 5.73
 *   text3   0.42    -> 0.60      2.64 -> 4.53 (0.42 ink on near-white is a
 *                                mid grey; text2 moved to 0.74 so the
 *                                hierarchy still reads)
 * Worth porting back to the app when convenient. */
[data-theme="meridian"] {
  --base: #f4f5f7;
  --deep: #09836a;
  --hi: #16181d;
  --glow: #09836a;
  --deck: #ffffff;
  --edge: rgba(9, 131, 106, 0.45);
  --text: #16181d;
  --text2: rgba(22, 24, 29, 0.74);
  --text3: rgba(22, 24, 29, 0.6);
  --chip: rgba(9, 131, 106, 0.12);
  --chip-text: #066253;
  --cta-text: #ffffff;
  --blob1: #dcebe7;
  --blob2: #bfe8db;
  --blob3: #e9edf1;
  --habit: #8a6f17;
  --todo: #b93232;
}

/* ---------- reset & base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  /* smooth is for anchor links only. Scroll snapping was removed: these
     sections are taller than the viewport, so snapping fought the reader
     instead of helping, especially on touch. */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--base);
  color: var(--text);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: 16.5px;
  line-height: 1.7;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  transition: background 0.6s ease, color 0.6s ease;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

h1, h2, h3, .display {
  font-family: "Gloock", Georgia, serif;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.005em;
}

::selection { background: var(--glow); color: var(--cta-text); }

/* ---------- backdrop ---------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--base);
  transition: background 0.6s ease;
}
.backdrop::after {
  /* film grain so the gradient never looks flat */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.backdrop .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
  transition: background 0.6s ease;
  animation: drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
.blob.b1 { width: 58vw; height: 58vw; top: -20vw; right: -14vw; background: var(--blob1); }
.blob.b2 { width: 44vw; height: 44vw; top: 42vh; left: -18vw; background: var(--blob2); opacity: 0.16; animation-duration: 32s; animation-delay: -8s; }
.blob.b3 { width: 36vw; height: 36vw; bottom: -12vw; right: 6vw; background: var(--blob3); opacity: 0.13; animation-duration: 38s; animation-delay: -16s; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(4vw, 5vh, 0) scale(1.12); }
}

/* ---------- glass ---------- */
.glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 26px;
}

/* ---------- layout ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
section { padding: 104px 0; position: relative; }

/* ---------- scroll reveals ---------- */
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.08s; }
.rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; }
.rv-d4 { transition-delay: 0.32s; }

/* ---------- nav (static, in flow, lives at the top of the hero) ---------- */
nav {
  margin: 16px auto 0;
  max-width: 1120px;
  padding: 0 14px;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
}
/* the nav always sits on the light hero, so its palette is fixed */
.nav-inner {
  background: rgba(255, 253, 250, 0.45);
  border: 1px solid rgba(23, 18, 26, 0.08);
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #17121a; flex-shrink: 0; }
.nav-brand img { width: 28px; height: 28px; border-radius: 8px; }
.nav-brand span { font-family: "Gloock", serif; font-size: 19px; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links > a { color: rgba(23, 18, 26, 0.62); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.nav-links > a:hover { color: #17121a; }
[data-theme="rosewood"] nav .btn-primary { background: #d9536f; color: #fffdfa; }
[data-theme="aurora"] nav .btn-primary,
[data-theme="platinum"] nav .btn-primary { background: #0a9a80; color: #fffdfa; }
/* the CTA pill must not inherit the muted nav link color */
.nav-links > a.btn { color: var(--cta-text); }
.nav-links > a.btn:hover { color: var(--cta-text); }

/* ---------- theme switcher ---------- */
.theme-switch { display: flex; gap: 8px; align-items: center; }
.swatch {
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, border-color 0.2s;
}
.swatch:hover { transform: scale(1.15); }
.swatch.active { border-color: #c9ccd6; }
.swatch.sw-rosewood { background: #f27d95; }
.swatch.sw-aurora { background: #1fe3bd; }
.swatch.sw-platinum { background: #dfe3ec; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: "Libre Caslon Text", serif;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary {
  background: var(--glow);
  color: var(--cta-text);
  box-shadow: 0 0 32px color-mix(in srgb, var(--glow) 42%, transparent);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 0 52px color-mix(in srgb, var(--glow) 62%, transparent); }
.btn-primary:active { transform: translateY(0) scale(0.99); }
.btn-ghost {
  background: var(--chip);
  color: var(--chip-text);
  border: 1px solid var(--edge);
}
.btn-ghost:hover { transform: translateY(-2px); }
/* quiet: a deliberate second-fiddle button that never competes with the CTA */
.btn-quiet {
  background: transparent;
  color: var(--text3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 10px 20px;
  font-size: 14px;
}
.btn-quiet:hover { color: var(--text2); border-color: rgba(255, 255, 255, 0.26); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-sm { padding: 7px 14px; font-size: 12px; }

/* ---------- floating dock (follows the scroll, bottom of screen) ---------- */
.dock {
  position: fixed;
  bottom: 18px;
  left: 50%;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 10px 9px 16px;
  border-radius: 999px;
  background: rgba(14, 11, 13, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateX(-50%) translateY(80px);
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s;
}
.dock.show { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.dock img { width: 26px; height: 26px; border-radius: 7px; }
.dock .dock-name { font-family: "Gloock", serif; font-size: 16px; color: #f7eef0; }
.dock .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .dock { bottom: 14px; gap: 10px; padding: 8px 8px 8px 14px; width: max-content; }
}
/* quiet text link, sits under the primary CTA to minimize decision fatigue */
.link-quiet {
  display: block;
  margin-top: 12px;
  color: var(--text3);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.link-quiet:hover { color: var(--text2); text-decoration-color: currentColor; }

/* ---------- hero (nav lives inside; banner is its last element,
   so the first "page" ends with the banner) ---------- */
.hero { padding: 0; overflow: hidden; }
.hero .hero-grid { margin-top: 34px; margin-bottom: 40px; }
/* enough top padding that the floating nav never covers the kicker
   when the section snaps flush to the viewport top */
#echo { padding-top: 84px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 36px;
  align-items: center;
}
.hero-copy { text-align: center; }
.hero .sub span { display: block; }
.hero .sub { margin-left: auto; margin-right: auto; }
.hero-ctas { justify-content: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--glow);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--glow) 55%, transparent); }
  55% { box-shadow: 0 0 0 7px transparent; }
}
.hero h1 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 16px; text-wrap: balance; }
/* desktop: sized so the full first clause holds one line, em takes the second */
@media (min-width: 901px) {
  .hero h1 { font-size: clamp(28px, 2.45vw, 35px); }
}
.hero h1 em { font-style: normal; color: var(--glow); display: block; }
.hero .sub { color: var(--text2); font-size: 16.5px; max-width: 32em; margin-bottom: 24px; }
.hero-ctas { display: flex; flex-direction: column; gap: 0; align-items: center; }
.hero-note { color: var(--text3); font-size: 13px; margin-top: 14px; }

/* staggered hero entrance. The from-state lives in the keyframes (with
   fill-mode both), so if animations ever fail to run the content stays
   visible instead of being stuck at opacity 0. */
.h-in { animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.h-in.h2s { animation-delay: 0.12s; }
.h-in.h3s { animation-delay: 0.24s; }
.h-in.h4s { animation-delay: 0.36s; }
.h-in.h5s { animation-delay: 0.5s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }

/* ---------- phone mockup ---------- */
.phone-stage { position: relative; display: flex; justify-content: center; }
.phone {
  margin: 0 auto;
  width: min(215px, 62vw);
  border-radius: 46px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(160deg, color-mix(in srgb, var(--deep) 40%, var(--base)), var(--base) 70%);
  padding: 13px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55), 0 0 80px color-mix(in srgb, var(--glow) 16%, transparent);
  position: relative;
  animation: float 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50% { transform: translateY(-7px) rotate(0.4deg); }
}
.phone-screen {
  border-radius: 26px;
  overflow: hidden;
  background: var(--base);
  padding: 15px 11px 13px;
  min-height: 435px;
  position: relative;
}
.phone-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% -10%, color-mix(in srgb, var(--deep) 55%, transparent), transparent 55%);
  pointer-events: none;
}
.ps-date { color: var(--text3); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.ps-title { font-family: "Gloock", serif; font-size: 20px; margin: 3px 0 12px; }
.ps-card { border-radius: 16px; padding: 11px 12px; margin-bottom: 9px; position: relative; }
.ps-row { display: flex; align-items: center; gap: 12px; }
.ps-check {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--edge);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: background 0.3s, border-color 0.3s;
}
.ps-check.done { background: var(--glow); border-color: var(--glow); color: var(--cta-text); }
/* habits carry the app's gold, in every theme */
.ps-check.done.habit { background: #d4af37; border-color: #d4af37; color: #1a1405; }
.ps-check.gold { border-color: var(--habit, #d4af37); }
.hm-pill.gold strong { color: #d4af37; }
.ps-task { font-size: 12.5px; }
.ps-meta { font-size: 10.5px; color: var(--text3); margin-top: 2px; }
.ps-ring-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ps-ring { width: 54px; height: 54px; transform: rotate(-90deg); flex-shrink: 0; }
.ps-ring circle { fill: none; stroke-width: 6; }
.ps-ring .track { stroke: rgba(255, 255, 255, 0.1); }
.ps-ring .fill {
  stroke: var(--glow);
  stroke-linecap: round;
  stroke-dasharray: 163;
  stroke-dashoffset: 163;
  animation: ring 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}
@keyframes ring { to { stroke-dashoffset: 54; } }
.ps-ring-label { font-size: 12.5px; color: var(--text2); }
.ps-ring-label strong { display: block; color: var(--text); font-size: 16px; font-family: "Gloock", serif; }
.ps-echo {
  margin-top: 11px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--chip);
  border: 1px solid var(--edge);
  font-size: 11.5px;
  color: var(--chip-text);
  font-style: italic;
}

/* ---------- phone screen carousel ---------- */
.pslide {
  position: absolute;
  inset: 0;
  padding: 15px 11px 13px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.985);
  /* the outgoing slide vanishes fast so two screens never overlap legibly */
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s 0.16s;
  pointer-events: none;
}
.pslide.on {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.45s ease 0.12s, transform 0.45s ease 0.12s, visibility 0s 0.12s;
}
.pslide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% -10%, color-mix(in srgb, var(--deep) 55%, transparent), transparent 55%);
  pointer-events: none;
}
.phone-screen.has-slides { padding: 0; }
.phone-screen.has-slides::before { content: none; }

/* progress heatmap slide */
.hm-month { color: var(--text3); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.hm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 16px; }
.hm-cell { aspect-ratio: 1; border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
.hm-cell.l1 { background: color-mix(in srgb, var(--glow) 22%, transparent); }
.hm-cell.l2 { background: color-mix(in srgb, var(--glow) 45%, transparent); }
.hm-cell.l3 { background: color-mix(in srgb, var(--glow) 75%, transparent); }
.hm-cell.gold { background: color-mix(in srgb, #d4af37 60%, transparent); }
.hm-stat { display: flex; gap: 10px; }
.hm-pill {
  flex: 1;
  border-radius: 14px;
  padding: 10px 12px;
  text-align: center;
}
.hm-pill strong { display: block; font-family: "Gloock", serif; font-size: 18px; color: var(--glow); }
.hm-pill span { font-size: 10.5px; color: var(--text3); letter-spacing: 0.04em; }

/* goals slide */
.goal-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; margin: 10px 0 4px; }
.goal-bar b { display: block; height: 100%; width: 64%; border-radius: 999px; background: var(--glow); }
.goal-pct { font-size: 10.5px; color: var(--text3); }
.ms-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ms-row:last-child { border-bottom: 0; }
.ms-dot {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--edge);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.ms-dot.done { background: var(--glow); border-color: var(--glow); color: var(--cta-text); }
.ms-name { font-size: 12.5px; }
.ms-name.dim { color: var(--text3); }

/* caption + dots sit above the phone; arrows flank the phone itself */
.phone-caption { text-align: center; margin: 0 0 6px; min-height: 40px; }
.phone-caption .pc-title { font-family: "Gloock", serif; font-size: 16px; transition: opacity 0.4s; }
.phone-caption .pc-sub { color: var(--text3); font-size: 12.5px; margin-top: 2px; transition: opacity 0.4s; }
.phone-dots { display: flex; justify-content: center; gap: 9px; margin-bottom: 16px; }
.phone-stage { touch-action: pan-y; }
.phone-stage .car-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  font-size: 14px;
  z-index: 2;
}
.phone-stage #phone-prev { left: calc(50% - min(215px, 62vw) / 2 - 56px); }
.phone-stage #phone-next { right: calc(50% - min(215px, 62vw) / 2 - 56px); }

/* ---------- marquee band (slim, closes the hero and the page) ---------- */
.marquee-band {
  background: #fffdfa;
  border-top: 1px solid rgba(23, 18, 26, 0.08);
  border-bottom: 1px solid rgba(23, 18, 26, 0.06);
  padding: 10px 0;
  overflow: hidden;
  position: relative;
}
.marquee-band.mb-footer { border-bottom: none; }
.marquee { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee-inner { display: flex; align-items: center; gap: 34px; padding-right: 34px; flex-shrink: 0; }
.marquee span {
  font-family: "Gloock", serif;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: #17121a;
  white-space: nowrap;
  text-transform: uppercase;
}
.marquee i { font-style: normal; font-size: 11px; }
[data-theme="platinum"] .marquee i, [data-theme="aurora"] .marquee i { color: #0aa88a; }
[data-theme="rosewood"] .marquee i { color: #d9536f; }
/* every other glyph in gold, tying the habit color through the brand */
.marquee-inner i:nth-of-type(even) { color: #b8912e !important; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- theme picker: pure color swatches, no labels ---------- */
.theme-picker { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 22px 0 0; }
.tp-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.25s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.tp-btn:hover { transform: scale(1.15); }
.tp-btn .tp-dot { display: none; }
.tp-btn[data-theme="rosewood"] { background: #f27d95; }
.tp-btn[data-theme="aurora"] { background: #1fe3bd; }
/* platinum reads like the mark: black with a silver sweep */
.tp-btn[data-theme="platinum"] { background: linear-gradient(135deg, #0b0b0d 42%, #6b7180 78%, #c9ccd6); }
/* meridian is daylight: off-white into the darkened aurora hue. The inset
   ring keeps a pale swatch visible against a pale section. */
.tp-btn[data-theme="meridian"] {
  background: linear-gradient(135deg, #ffffff 46%, #09836a);
  box-shadow: inset 0 0 0 1px rgba(22, 24, 29, 0.2);
}
.tp-btn.active[data-theme="rosewood"] { border-color: #fffdfa; box-shadow: 0 0 16px rgba(242, 125, 149, 0.7); }
.tp-btn.active[data-theme="aurora"] { border-color: #fffdfa; box-shadow: 0 0 16px rgba(31, 227, 189, 0.7); }
.tp-btn.active[data-theme="platinum"] { border-color: #fffdfa; box-shadow: 0 0 16px rgba(201, 204, 214, 0.8); }
.tp-btn.active[data-theme="meridian"] {
  border-color: #16181d;
  box-shadow: inset 0 0 0 1px rgba(22, 24, 29, 0.2), 0 0 16px rgba(9, 131, 106, 0.5);
}
/* mobile-only hairline above the picker, inset from the edges */
.theme-picker::before {
  content: "";
  display: none;
  width: min(440px, 76%);
  height: 1px;
  background: rgba(23, 18, 26, 0.12);
  margin: 0 auto 26px;
  align-self: center;
}
@media (max-width: 900px) {
  .theme-picker::before { display: block; }
  .theme-picker { padding-top: 16px; }
}

.theme-picker .tp-label {
  color: var(--text3);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.tp-options { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: var(--text2);
  font-family: "Libre Caslon Text", serif;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.tp-btn:hover { transform: translateY(-1px); }
.tp-btn .tp-dot { width: 12px; height: 12px; border-radius: 50%; }
.tp-btn[data-theme="rosewood"] .tp-dot { background: #f27d95; }
.tp-btn[data-theme="aurora"] .tp-dot { background: #1fe3bd; }
.tp-btn[data-theme="platinum"] .tp-dot { background: linear-gradient(135deg, #dfe3ec 55%, #1fe3bd); }
.tp-btn.active {
  border-color: var(--glow);
  color: var(--text);
  box-shadow: 0 0 18px color-mix(in srgb, var(--glow) 25%, transparent);
}

/* ---------- word-by-word title reveal ---------- */
h1 em, h2 em { font-style: normal; color: var(--glow); }
.anim-words .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(8px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.55s ease;
  transition-delay: calc(var(--i, 0) * 60ms);
  will-change: opacity, transform, filter;
}
/* accent (colored) words fill in with a different motion: scale + glow bloom */
.anim-words .w.wa {
  transform: translateY(0.1em) scale(1.14);
  filter: blur(12px);
  transition-duration: 0.75s;
}
.anim-words.in .w { opacity: 1; transform: none; filter: none; }
.anim-words.in .w.wa { text-shadow: 0 0 26px color-mix(in srgb, var(--glow) 40%, transparent); }

/* ---------- light (cream) sections ---------- */
.section-light {
  /* sorbet base: cream with film grain; tinted blobs live in the pseudos */
  background-color: #f6f3ef;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  position: relative;
  overflow: hidden;
  --text: #17121a;
  --text2: rgba(23, 18, 26, 0.68);
  --text3: rgba(23, 18, 26, 0.46);
  --cta-text: #fffdfa;
  /* critical: headings and unstyled text inherit color from body (cream),
     so the section must set its own color for the dark overrides to apply */
  color: var(--text);
}
/* swirled theme tints, like paint folded into the cream. They drift slowly
   (scale animation), shift with scroll (--plx) and tilt with the gyroscope
   (--gx/--gy), all set by main.js. */
.section-light::before,
.section-light::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  will-change: transform;
  transform: translate3d(var(--gx, 0px), calc(var(--gy, 0px) + var(--plx, 0px)), 0);
}
.section-light::before {
  width: 48vw; height: 48vw;
  top: -14vw; right: -10vw;
  background: color-mix(in srgb, var(--glow) 26%, #f6f3ef);
  opacity: 0.55;
  animation: sorbet 16s ease-in-out infinite alternate;
}
.section-light::after {
  width: 40vw; height: 40vw;
  bottom: -16vw; left: -12vw;
  background: color-mix(in srgb, var(--glow) 16%, #fdf6ee);
  opacity: 0.5;
  animation: sorbet 22s ease-in-out -8s infinite alternate-reverse;
}
@keyframes sorbet {
  from { scale: 1; rotate: 0deg; }
  to { scale: 1.22; rotate: 8deg; }
}
/* content always rides above the tint layer */
.section-light > * { position: relative; z-index: 1; }
[data-theme="rosewood"] .section-light {
  --glow: #d9536f;
  --chip: rgba(217, 83, 111, 0.1);
  --chip-text: #b23a55;
  --edge: rgba(217, 83, 111, 0.38);
}
[data-theme="aurora"] .section-light,
[data-theme="platinum"] .section-light {
  --glow: #0a9a80;
  --chip: rgba(10, 154, 128, 0.1);
  --chip-text: #067a66;
  --edge: rgba(10, 154, 128, 0.38);
}
.section-light .glass {
  background: #fffdfa;
  border: 1px solid rgba(23, 18, 26, 0.08);
  box-shadow: 0 12px 34px rgba(23, 18, 26, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.section-light .chat-head { border-bottom-color: rgba(23, 18, 26, 0.1); }
.section-light .typing b { background: var(--chip-text); }
.section-light .btn-quiet { border-color: rgba(23, 18, 26, 0.2); }
.section-light .btn-quiet:hover { border-color: rgba(23, 18, 26, 0.38); }
.section-light .car-dot { background: rgba(23, 18, 26, 0.18); }
.section-light .car-dot.active { background: var(--glow); }
.section-light .tp-label { color: rgba(23, 18, 26, 0.78); }
.section-light .tp-btn.active { border-color: #17121a; }
.section-light .glass.ps-card,
.section-light .glass.hm-pill {
  /* cards inside the dark phone frame stay glassy-dark even in light sections */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: none;
}
/* the phone is always a dark device: restore the full dark palette inside it,
   whatever section it sits in */
.phone { color: var(--text); }
[data-theme="rosewood"] .phone {
  --glow: #f27d95; --hi: #e8859a; --deep: #83334a;
  --chip: rgba(242, 125, 149, 0.16); --chip-text: #f6a6b3;
  --edge: rgba(242, 125, 149, 0.55); --cta-text: #1a0d12;
  --text: #f7eef0; --text2: rgba(247, 238, 240, 0.6); --text3: rgba(247, 238, 240, 0.42);
}
[data-theme="aurora"] .phone, [data-theme="platinum"] .phone {
  --glow: #1fe3bd; --hi: #3fe4c8;
  --chip: rgba(31, 227, 189, 0.14); --chip-text: #8ff0dc;
  --edge: rgba(31, 227, 189, 0.5); --cta-text: #03150f;
  --text: #e7f8f3; --text2: rgba(231, 248, 243, 0.6); --text3: rgba(231, 248, 243, 0.42);
}
[data-theme="aurora"] .phone { --deep: #0e6f6a; }
[data-theme="platinum"] .phone { --deep: #2e3138; }

/* ============================================================
   Meridian overrides.

   Every other theme is dark, so the shared rules assume a dark field:
   white-alpha surfaces, white-alpha hairlines, black drop shadows, and a
   white film grain. On an off-white base each of those is either invisible
   or far too heavy, so they are all restated here in ink.

   Section rhythm inverts too. Instead of dark against cream, Meridian
   alternates a cool off-white base (#f4f5f7, the app's own base) against a
   faintly green white, with pure white cards floating on both. The
   temperature shift is what separates the sections, not lightness.
   ============================================================ */

/* film grain flips from white to ink or it does not register */
[data-theme="meridian"] .backdrop::after {
  opacity: 0.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* glass: near-opaque white on an ink hairline, per the app's glassMeridian */
[data-theme="meridian"] .glass {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(22, 24, 29, 0.1);
  box-shadow: 0 10px 30px rgba(22, 24, 29, 0.06);
}
[data-theme="meridian"] .section-light {
  /* pure white against the #f4f5f7 base. The lighter tint that was here
     first was too close to the base to register as a section change. */
  background-color: #ffffff;
  --text: #16181d;
  --text2: rgba(22, 24, 29, 0.74);
  --text3: rgba(22, 24, 29, 0.6);
  --cta-text: #ffffff;
}
/* on a white field the card is defined by its edge and lift, not its fill */
[data-theme="meridian"] .section-light .glass {
  background: #ffffff;
  border: 1px solid rgba(22, 24, 29, 0.11);
  box-shadow: 0 10px 28px rgba(22, 24, 29, 0.09);
}
/* the sorbet wash is tuned down: the same opacity that reads as a tint on
   cream reads as a green cast on near-white */
[data-theme="meridian"] .section-light::before { opacity: 0.4; }
[data-theme="meridian"] .section-light::after { opacity: 0.34; }

/* chrome */
[data-theme="meridian"] .nav-inner {
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(22, 24, 29, 0.1);
}
[data-theme="meridian"] .btn-quiet { border-color: rgba(22, 24, 29, 0.18); }
[data-theme="meridian"] .btn-quiet:hover { border-color: rgba(22, 24, 29, 0.34); }
[data-theme="meridian"] .car-dot { background: rgba(22, 24, 29, 0.18); }
[data-theme="meridian"] footer { border-top-color: rgba(22, 24, 29, 0.1); }
[data-theme="meridian"] .chat-head { border-bottom-color: rgba(22, 24, 29, 0.1); }
[data-theme="meridian"] .dock {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(22, 24, 29, 0.12);
  box-shadow: 0 18px 44px rgba(22, 24, 29, 0.16);
}
[data-theme="meridian"] .dock .dock-name { color: #16181d; }

/* the banner needs a tint or it dissolves into the near-white sections */
[data-theme="meridian"] .marquee-band {
  background: #eaf2ef;
  border-top-color: rgba(22, 24, 29, 0.1);
  border-bottom-color: rgba(22, 24, 29, 0.08);
}
[data-theme="meridian"] .marquee span { color: #16181d; }
[data-theme="meridian"] .marquee i { color: #09836a; }
[data-theme="meridian"] .marquee-inner i:nth-of-type(even) { color: #8a6f17 !important; }

/* gold forks to the app's light-base value: #d4af37 is unreadable here */
[data-theme="meridian"] .stars { color: #8a6f17; }
[data-theme="meridian"] .ps-check.done.habit { background: #8a6f17; border-color: #8a6f17; color: #ffffff; }
[data-theme="meridian"] .hm-cell.gold { background: color-mix(in srgb, #8a6f17 55%, transparent); }
[data-theme="meridian"] .hm-pill.gold strong { color: #8a6f17; }

/* the persona answer panel and the mission halo */
[data-theme="meridian"] .persona .p-answer { background: #eef5f3; }
[data-theme="meridian"] .persona .p-answer .a-k { color: #066253; }
[data-theme="meridian"] .persona .p-answer p { color: #16181d; }
[data-theme="meridian"] .mission::before { opacity: 0.16; }
[data-theme="meridian"] .j-item.active .j-card {
  box-shadow: 0 16px 40px rgba(22, 24, 29, 0.12), 0 0 34px color-mix(in srgb, var(--glow) 14%, transparent);
}
[data-theme="meridian"] .final-cta img.mark { box-shadow: 0 0 42px rgba(9, 131, 106, 0.2); }

/* the phone is a light device in Meridian, matching the app */
[data-theme="meridian"] .phone {
  --base: #f4f5f7;
  --deep: #cfe6df;
  --hi: #16181d;
  --glow: #09836a;
  --chip: rgba(9, 131, 106, 0.12);
  --chip-text: #066253;
  --edge: rgba(9, 131, 106, 0.45);
  --cta-text: #ffffff;
  --text: #16181d;
  --text2: rgba(22, 24, 29, 0.74);
  --text3: rgba(22, 24, 29, 0.6);
  border-color: rgba(22, 24, 29, 0.14);
  background: linear-gradient(160deg, #ffffff, #eceff2 70%);
  box-shadow: 0 24px 60px rgba(22, 24, 29, 0.18), 0 0 56px rgba(9, 131, 106, 0.1);
}
[data-theme="meridian"] .phone .ps-card.glass,
[data-theme="meridian"] .phone .hm-pill.glass,
[data-theme="meridian"] .section-light .phone .glass.ps-card,
[data-theme="meridian"] .section-light .phone .glass.hm-pill {
  background: #ffffff;
  border: 1px solid rgba(22, 24, 29, 0.09);
  box-shadow: 0 4px 14px rgba(22, 24, 29, 0.05);
}
[data-theme="meridian"] .phone .ps-ring .track { stroke: rgba(22, 24, 29, 0.12); }
[data-theme="meridian"] .phone .hm-cell { background: rgba(22, 24, 29, 0.07); }
[data-theme="meridian"] .phone .goal-bar { background: rgba(22, 24, 29, 0.1); }
[data-theme="meridian"] .phone .ms-row { border-bottom-color: rgba(22, 24, 29, 0.08); }

/* modal and payment surfaces */
[data-theme="meridian"] .modal {
  background: #ffffff;
  border-color: rgba(22, 24, 29, 0.12);
}
[data-theme="meridian"] .modal .m-close {
  border-color: rgba(22, 24, 29, 0.14);
  background: rgba(22, 24, 29, 0.04);
}
[data-theme="meridian"] .field input,
[data-theme="meridian"] .field textarea {
  background: rgba(22, 24, 29, 0.03);
  border-color: rgba(22, 24, 29, 0.14);
}
[data-theme="meridian"] .plan {
  border-color: rgba(22, 24, 29, 0.12);
  background: rgba(22, 24, 29, 0.02);
}
[data-theme="meridian"] body.lite { background: #f4f5f7; }

/* ---------- gold stars + trust line ---------- */
.stars { color: #d4af37; letter-spacing: 2px; font-size: 15px; line-height: 1; }
.stars.sm { font-size: 12.5px; letter-spacing: 1.5px; }
.trust-line { margin-top: 18px; text-align: center; }
.trust-line .t-quote { color: var(--text2); font-size: 13.5px; margin-top: 5px; font-style: italic; }

/* ---------- reviews band (glides like the marquee, loops forever) ---------- */
.rev-wrap { overflow: hidden; padding: 4px 0; }
.rev-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee 55s linear infinite;
  padding: 10px 0;
}
.rev-track.rt-reverse { animation: marquee 70s linear infinite reverse; }
.rev-wrap:hover .rev-track { animation-play-state: paused; }
.rev-group { display: flex; gap: 16px; padding-right: 16px; flex-shrink: 0; }
.review {
  width: 300px;
  flex-shrink: 0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review .r-head { display: flex; align-items: center; justify-content: space-between; }
.review .r-body { font-size: 13.5px; color: var(--text2); line-height: 1.6; }
.review .r-who { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.review .r-ava {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--chip);
  border: 1px solid var(--edge);
  color: var(--chip-text);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Gloock", serif;
}
.review .r-name { font-size: 13px; color: var(--text); }
.review .r-tag { font-size: 11px; color: var(--text3); }

/* ---------- FAQ accordion ---------- */
.faq { max-width: 740px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item { border-radius: 20px; overflow: hidden; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 19px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: "Gloock", serif;
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--text);
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { color: var(--glow); }
.faq-icon { width: 20px; height: 20px; flex-shrink: 0; position: relative; }
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--glow);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
}
.faq-icon::before { top: 9px; left: 2px; width: 16px; height: 2px; }
.faq-icon::after { top: 2px; left: 9px; width: 2px; height: 16px; }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-a {
  padding: 0 22px 20px;
  color: var(--text2);
  font-size: 15px;
  animation: faqIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px); } }
.faq-foot { text-align: center; margin-top: 30px; color: var(--text2); font-size: 14.5px; }
.faq-foot .linklike {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--glow);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- light full pages (pay / success) ---------- */
body.lite { background: #f6f3ef; }
.pagefill { min-height: 100vh; min-height: 100dvh; }
.pay-proof { text-align: center; margin-bottom: 22px; }
.pay-proof .stars { font-size: 14px; }
.pay-proof p { color: var(--text2); font-size: 13.5px; font-style: italic; margin-top: 6px; }

/* ---------- section headers ---------- */
.section-head { text-align: center; max-width: 660px; margin: 0 auto 54px; padding: 0 4px; }
.section-head .kicker {
  color: var(--chip-text);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.section-head h2 {
  font-size: clamp(30px, 3.8vw, 44px);
  margin-bottom: 16px;
  /* keeps the last line from stranding a single orphan word */
  text-wrap: balance;
}
/* headings whose accent clause is a complete sentence get their own line,
   so the accent never dangles at the end of the line above. Headings with a
   mid-sentence accent (Meet Echo, How it works) are deliberately excluded. */
.break-em em { display: block; }
/* keeps a short mid-sentence accent from splitting across two lines */
.nowrap-em em { white-space: nowrap; }
.section-head p { color: var(--text2); font-size: 17px; }

/* ---------- persona carousel ---------- */
.carousel { position: relative; }
.car-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 4px 10px;
  -webkit-overflow-scrolling: touch;
}
.car-track::-webkit-scrollbar { display: none; }
.persona {
  scroll-snap-align: center;
  flex: 0 0 min(560px, 88%);
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.persona.active {
  border-color: var(--edge);
  box-shadow: 0 0 44px color-mix(in srgb, var(--glow) 14%, transparent);
}
.persona .p-label {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.persona blockquote {
  font-family: "Gloock", serif;
  font-size: clamp(21px, 2.5vw, 27px);
  line-height: 1.3;
  margin-bottom: 18px;
}
.persona .p-pain { color: var(--text2); font-size: 15.5px; margin-bottom: 22px; }
.persona .p-answer {
  background: #f6f3ef;
  border-radius: 18px;
  padding: 18px 20px;
  margin-top: auto;
}
.persona .p-answer .a-k {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
[data-theme="rosewood"] .persona .p-answer .a-k { color: #b23a55; }
[data-theme="aurora"] .persona .p-answer .a-k,
[data-theme="platinum"] .persona .p-answer .a-k { color: #067a66; }
.persona .p-answer p { color: #17121a; font-size: 15px; }
.car-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.car-dots { display: flex; gap: 9px; }
.car-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  padding: 0;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s;
}
.car-dot.active { width: 26px; background: var(--glow); }
.car-arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--chip);
  border: 1px solid var(--edge);
  color: var(--chip-text);
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, background 0.2s;
}
.car-arrow:hover { transform: scale(1.08); }

/* ---------- echo chat demo ---------- */
.chat-demo {
  max-width: 620px;
  margin: 0 auto;
  padding: 34px 26px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
}
.chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.09); margin-bottom: 20px; }
.chat-head .c-name { font-weight: 700; line-height: 1.3; }
.chat-demo { padding-top: 26px; }
.chat-head .avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--glow);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 16px color-mix(in srgb, var(--glow) 35%, transparent);
}
.chat-head .avatar img { width: 20px; height: 20px; object-fit: contain; }
.chat-head .c-name { font-size: 15px; }
.chat-head .c-status { font-size: 12px; color: var(--text3); }
.chat-head .c-status i { font-style: normal; color: var(--glow); }
.chat-body { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.bubble {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 20px;
  font-size: 14.5px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.bubble.show { opacity: 1; transform: none; }
.bubble.echo {
  align-self: flex-start;
  background: var(--chip);
  border: 1px solid var(--edge);
  color: var(--text);
  border-bottom-left-radius: 8px;
}
.bubble.user {
  align-self: flex-end;
  background: var(--glow);
  color: var(--cta-text);
  border-bottom-right-radius: 8px;
}
.typing { display: inline-flex; gap: 5px; align-items: center; padding: 4px 2px; }
.typing b {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--chip-text);
  animation: tdot 1.1s ease-in-out infinite;
}
.typing b:nth-child(2) { animation-delay: 0.15s; }
.typing b:nth-child(3) { animation-delay: 0.3s; }
@keyframes tdot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 45% { opacity: 1; transform: translateY(-4px); } }

/* ---------- journey timeline (features as a progression) ---------- */
.journey { position: relative; max-width: 900px; margin: 0 auto; padding: 10px 0; }
.journey .j-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--glow) 45%, transparent) 8%,
    color-mix(in srgb, var(--glow) 45%, transparent) 92%,
    transparent
  );
}
.j-item {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: center;
  margin-bottom: 34px;
  position: relative;
}
.j-item:last-child { margin-bottom: 0; }
.j-node {
  grid-column: 2;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--base);
  border: 1.5px solid var(--edge);
  display: flex; align-items: center; justify-content: center;
  justify-self: center;
  z-index: 1;
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s;
}
.j-node svg { width: 20px; height: 20px; stroke: var(--chip-text); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.4s; }
.j-card {
  padding: 24px 26px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s, box-shadow 0.5s, opacity 0.5s;
  opacity: 0.72;
}
.j-item:nth-child(odd) .j-card { grid-column: 1; grid-row: 1; text-align: right; }
.j-item:nth-child(even) .j-card { grid-column: 3; grid-row: 1; }
.j-card .j-k {
  color: var(--glow);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 7px;
}
.j-card h3 { font-size: 20px; margin-bottom: 8px; }
.j-card p { color: var(--text2); font-size: 14.5px; }

/* active (scroll-highlighted) state */
.j-item.active .j-card {
  opacity: 1;
  transform: scale(1.035);
  border-color: var(--edge);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35), 0 0 34px color-mix(in srgb, var(--glow) 16%, transparent);
}
.j-item.active .j-node {
  background: var(--glow);
  border-color: var(--glow);
  box-shadow: 0 0 26px color-mix(in srgb, var(--glow) 55%, transparent);
  transform: scale(1.08);
}
.j-item.active .j-node svg { stroke: var(--cta-text); }

/* ---------- steps (flow with arrows + cycling highlight) ---------- */
.steps {
  display: grid;
  grid-template-columns: 1fr 44px 1fr 44px 1fr;
  gap: 0;
  counter-reset: step;
  align-items: stretch;
}
.step {
  padding: 30px 26px;
  position: relative;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s, box-shadow 0.55s;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: "Gloock", serif;
  font-size: 40px;
  color: var(--glow);
  opacity: 0.85;
  display: block;
  margin-bottom: 12px;
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { color: var(--text2); font-size: 14.5px; }
.step.active {
  transform: scale(1.035);
  border-color: var(--edge);
  box-shadow: 0 16px 40px rgba(23, 18, 26, 0.12), 0 0 38px color-mix(in srgb, var(--glow) 22%, transparent);
}
.step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  transition: color 0.4s, transform 0.4s;
}
.step-arrow svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step-arrow.active { color: var(--glow); transform: scale(1.15); }

/* ---------- mission ---------- */
.mission { max-width: 760px; margin: 0 auto; padding: 56px 40px; text-align: center; position: relative; overflow: hidden; }
.mission::before {
  content: "";
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: var(--deep);
  filter: blur(120px);
  opacity: 0.4;
  top: -160px; left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.mission img { width: 54px; margin: 0 auto 24px; border-radius: 15px; }
.mission h2 { font-size: clamp(27px, 3.4vw, 38px); margin-bottom: 22px; }
.mission p { color: var(--text2); font-size: 16.5px; margin-bottom: 16px; text-align: left; }
.mission p:last-of-type { margin-bottom: 0; }
.mission .sig { margin-top: 26px; color: var(--chip-text); font-style: italic; font-size: 15px; }

/* ---------- final CTA ---------- */
.final-cta { text-align: center; }
.final-cta img.mark { width: 74px; height: 74px; border-radius: 21px; margin: 0 auto 26px; box-shadow: 0 0 50px color-mix(in srgb, var(--glow) 30%, transparent); }
/* platinum's mark is black/silver, so its halo is silver, not green */
[data-theme="platinum"] .final-cta img.mark { box-shadow: 0 0 50px rgba(223, 227, 236, 0.32); }
.final-cta h2 { font-size: clamp(30px, 4.2vw, 48px); margin-bottom: 16px; }
.final-cta p { color: var(--text2); margin-bottom: 30px; }

/* ---------- footer ---------- */
footer { padding: 24px 0 28px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.foot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.foot .links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot a, .foot button.linklike {
  color: var(--text3);
  text-decoration: none;
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.foot a:hover, .foot button.linklike:hover { color: var(--text2); }
.foot .copy { color: var(--text3); font-size: 13.5px; }

/* ---------- contact modal ---------- */
.modal-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 0;
}
.modal-veil.open { opacity: 1; pointer-events: auto; }
.modal {
  width: 100%;
  max-width: 520px;
  max-height: 92dvh;
  overflow-y: auto;
  border-radius: 30px 30px 0 0;
  padding: 30px 26px 34px;
  transform: translateY(40px);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  background: color-mix(in srgb, var(--base) 88%, #fff 4%);
  border: 1px solid rgba(255, 255, 255, 0.13);
}
.modal-veil.open .modal { transform: none; }
@media (min-width: 640px) {
  .modal-veil { align-items: center; padding: 24px; }
  .modal { border-radius: 30px; }
}
.modal-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.modal h3 { font-size: 24px; }
.modal .m-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text2);
  cursor: pointer;
  font-size: 15px;
}
.modal .m-sub { color: var(--text2); font-size: 14.5px; margin-bottom: 22px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13px; color: var(--text2); margin-bottom: 7px; letter-spacing: 0.03em; }
.field input, .field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  padding: 13px 15px;
  color: var(--text);
  font-family: "Libre Caslon Text", serif;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field textarea:focus {
  border-color: var(--glow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--glow) 18%, transparent);
}
.field textarea { min-height: 110px; resize: vertical; }
.modal .btn { width: 100%; margin-top: 6px; }
.modal .m-note { text-align: center; color: var(--text3); font-size: 12.5px; margin-top: 14px; }

/* contact success state */
.m-success { text-align: center; padding: 22px 0 10px; display: none; }
.m-success.show { display: block; }
.m-success .success-mark { margin-bottom: 22px; }
.m-success h3 { margin-bottom: 10px; }
.m-success p { color: var(--text2); font-size: 14.5px; margin-bottom: 22px; }

/* ============================================================
   Payment page
   ============================================================ */
.pay-wrap { max-width: 520px; margin: 0 auto; padding: 48px 22px 80px; }
.pay-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 36px; }
.pay-brand img { width: 34px; height: 34px; border-radius: 9px; }
.pay-brand span { font-family: "Gloock", serif; font-size: 22px; }
.pay-card { padding: 36px 28px; }
.pay-card h1 { font-size: 26px; margin-bottom: 8px; text-align: center; }
.pay-card .pay-sub { color: var(--text2); font-size: 15px; text-align: center; margin-bottom: 28px; }
.plan-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.plan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.25s;
  position: relative;
}
.plan.selected {
  border-color: var(--glow);
  background: var(--chip);
  box-shadow: 0 0 24px color-mix(in srgb, var(--glow) 20%, transparent);
}
.plan .p-name { font-size: 16px; }
.plan .p-detail { color: var(--text3); font-size: 12.5px; margin-top: 3px; }
.plan .p-price { font-family: "Gloock", serif; font-size: 20px; text-align: right; }
.plan .p-cycle { color: var(--text3); font-size: 12px; text-align: right; }
.badge {
  position: absolute;
  top: -10px; left: 18px;
  background: var(--glow);
  color: var(--cta-text);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 3px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}
.trial-note {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border-radius: 14px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 13.5px;
  margin-bottom: 24px;
}
.pay-cta { width: 100%; font-size: 17px; padding: 17px; }
.secure-note { text-align: center; color: var(--text3); font-size: 12.5px; margin-top: 16px; }
.pay-foot { text-align: center; margin-top: 28px; }
.pay-foot a { color: var(--text3); font-size: 13px; text-decoration: none; margin: 0 10px; }

/* ---------- success page ---------- */
.success-wrap { max-width: 480px; margin: 0 auto; padding: 80px 22px; text-align: center; }
.success-mark {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--glow);
  color: var(--cta-text);
  font-size: 40px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 28px;
  box-shadow: 0 0 60px color-mix(in srgb, var(--glow) 50%, transparent);
  animation: pop 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pop { from { transform: scale(0.4); opacity: 0; } }
.success-wrap h1 { font-size: 32px; margin-bottom: 14px; }
.success-wrap p { color: var(--text2); margin-bottom: 30px; }

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 900px) {
  section { padding: 72px 0; }
  .hero .hero-grid { margin-top: 22px; margin-bottom: 26px; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 52px; }
  .hero .sub { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step-arrow { transform: rotate(90deg); padding: 10px 0; }
  .step-arrow.active { transform: rotate(90deg) scale(1.15); }
  .nav-links > a.hide-m { display: none; }
  .persona { flex-basis: 88%; padding: 30px 24px; }
  .mission { padding: 44px 26px; }
  #car-prev, #car-next { display: none; }

  /* journey collapses to a left rail */
  .journey .j-line { left: 23px; transform: none; }
  .j-item { grid-template-columns: 46px 1fr; gap: 16px; margin-bottom: 22px; }
  .j-node { grid-column: 1; grid-row: 1; }
  .j-item:nth-child(odd) .j-card,
  .j-item:nth-child(even) .j-card { grid-column: 2; grid-row: 1; text-align: left; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero-ctas .btn-primary { width: 100%; max-width: 320px; }
  .phone { animation-duration: 9s; }
  /* pull the carousel arrows closer to the phone. At 360px wide the old
     56px offset pushed the left arrow past the viewport edge, where the
     hero's overflow:hidden clipped it. */
  .phone-stage #phone-prev { left: calc(50% - min(215px, 62vw) / 2 - 42px); }
  .phone-stage #phone-next { right: calc(50% - min(215px, 62vw) / 2 - 42px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .backdrop .blob, .phone, .marquee, .eyebrow .dot, .typing b,
  .section-light::before, .section-light::after { animation: none !important; }
  .rv, .h-in { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .anim-words .w { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .faq-a { animation: none; }
  .rev-track { animation: none; }
  .bubble { transition: none; }
  .ps-ring .fill { animation: none; stroke-dashoffset: 54; }
}