/* ============ HERO ============ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(80px, 14vw, 160px) clamp(64px, 10vw, 120px);
  min-height: clamp(640px, 92vh, 900px);
  display: flex; align-items: center;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: -2;
  opacity: .9;
}
.hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 60% at 50% 0%, transparent, var(--color-bg) 80%),
    radial-gradient(90% 60% at 100% 100%, rgba(124,111,240,.10), transparent 60%);
}
.hero__inner { max-width: 880px; }
.hero__title {
  font-size: var(--fs-h1);
  letter-spacing: -.035em;
  font-weight: 500;
  margin-block: var(--space-4) var(--space-5);
}
.hero__title em {
  font-style: normal;
  font-weight: 400;
  color: var(--color-success);
  position: relative;
}
.hero__sub {
  color: var(--color-text-mut);
  font-size: var(--fs-md);
  max-width: 56ch;
  margin-bottom: var(--space-6);
}
.hero__ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.hero__trust {
  color: var(--color-text-dim);
  font-size: var(--fs-xs);
}

/* ============ PROBLEM ============ */
.problem__grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.problem-card {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-2) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 28px);
  color: var(--color-text-mut);
}
.problem-card__title {
  color: var(--color-text);
  margin-bottom: 10px;
}
@media (max-width: 820px) { .problem__grid { grid-template-columns: 1fr; } }

/* ============ PRINCIPLES ============ */
.principles__grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.principle {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 28px);
  color: var(--color-text-mut);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--dur-base) var(--ease-spring),
              border-color var(--dur-base) var(--ease-spring);
}
.principle:hover { transform: translateY(-2px); border-color: var(--color-border-2); }
.principle__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(94,234,212,.10), rgba(94,234,212,.02));
  border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent);
  color: var(--color-success);
  border-radius: var(--radius-md);
}
.principle__title { color: var(--color-text); }
@media (max-width: 980px) { .principles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .principles__grid { grid-template-columns: 1fr; } }

/* ============ RITUAL — scroll-pinned storytelling ============ */
.ritual {
  height: calc(var(--ritual-vh, 100vh) * 3 + 80vh);
  position: relative;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(124,111,240,.06), transparent 60%),
    var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.ritual__track { height: 100%; }
.ritual__stage {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
}

.ritual__progress {
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-border);
  z-index: 2;
}
.ritual__progressbar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--color-quest-a), var(--color-success));
  transition: width var(--dur-base) var(--ease-out);
}

.ritual__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  width: 100%;
  position: relative; z-index: 1;
}

/* LEFT */
.ritual__copy { position: relative; }
.ritual__steps {
  margin-top: var(--space-6);
  position: relative;
  min-height: 320px;
}
.ritual-step {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.ritual-step.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ritual-step.is-leaving { opacity: 0; transform: translateY(-16px); }
.ritual-step__num {
  font-family: var(--font-mono);
  color: var(--color-success);
  letter-spacing: .08em;
  font-size: var(--fs-xs);
  text-transform: uppercase;
}
.ritual-step__title {
  color: var(--color-text);
  font-size: var(--fs-lg);
  margin-block: 12px 14px;
}
.ritual-step p {
  color: var(--color-text-mut);
  max-width: 42ch;
  margin-bottom: var(--space-4);
}

/* Checkpoints */
.ritual__checkpoints {
  display: flex; gap: 8px;
  margin-top: var(--space-6);
  position: relative;
}
.ritual__checkpoints::before {
  content: ""; position: absolute;
  left: 12px; right: 12px; top: 11px;
  height: 1px; background: var(--color-border); z-index: 0;
}
.checkpoint {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 4px 12px; background: transparent; border: 0; cursor: pointer;
  z-index: 1; color: var(--color-text-dim);
  font-size: var(--fs-xs); letter-spacing: .04em;
  transition: color var(--dur-base) var(--ease-spring);
}
.checkpoint__dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border-2);
  transition: all var(--dur-base) var(--ease-spring);
}
.checkpoint.is-done .checkpoint__dot { background: var(--color-success); border-color: var(--color-success); }
.checkpoint.is-active .checkpoint__dot {
  background: var(--color-success); border-color: var(--color-success);
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(94,234,212,.16), 0 0 16px rgba(94,234,212,.45);
}
.checkpoint.is-active { color: var(--color-text); }
.checkpoint.is-done { color: var(--color-text-mut); }
.checkpoint:hover .checkpoint__dot { transform: scale(1.15); }
.checkpoint:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 6px; }

.ritual__hint {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-5);
  color: var(--color-text-dim);
  font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase;
  transition: opacity var(--dur-base) var(--ease-spring);
}
.ritual__hint svg { animation: nudgeDown 1.8s ease-in-out infinite; }
.ritual__hint.is-faded { opacity: 0; }
@keyframes nudgeDown {
  0%,100% { transform: translateY(0); opacity: .6; }
  50%     { transform: translateY(3px); opacity: 1; }
}

/* PHONE */
.ritual__phone {
  position: relative;
  display: grid; place-items: center;
  perspective: 1200px;
}
.ritual__phoneglow {
  position: absolute;
  width: 120%; height: 120%;
  inset: -10% auto auto -10%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(124,111,240,.18), transparent 70%);
  filter: blur(40px);
  pointer-events: none; z-index: 0;
}

.phone {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 9 / 19;
  background: linear-gradient(180deg, #1A2030 0%, #0E121B 100%);
  border: 1px solid var(--color-border-2);
  border-radius: 42px;
  padding: 14px;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 0 8px rgba(20,24,35,.5);
  z-index: 1;
}
.phone__notch {
  position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 22px;
  background: #05070C;
  border-radius: 999px; z-index: 2;
}
.phone__status {
  position: absolute;
  top: 22px; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px;
  color: var(--color-text);
  font-family: var(--font-display); font-weight: 500;
  z-index: 3;
  padding: 0 30px;
}
.phone__icons { display: inline-flex; gap: 5px; align-items: center; }
.ic-signal, .ic-wifi, .ic-batt {
  display: inline-block;
  background: var(--color-text);
  border-radius: 1.5px;
}
.ic-signal { width: 12px; height: 8px; clip-path: polygon(0 100%, 25% 60%, 25% 100%, 50% 30%, 50% 100%, 75% 10%, 75% 100%, 100% 0, 100% 100%); }
.ic-wifi   { width: 10px; height: 8px; clip-path: polygon(50% 0, 100% 50%, 75% 75%, 50% 50%, 25% 75%, 0 50%); }
.ic-batt   { width: 16px; height: 8px; border: 1px solid var(--color-text); background: transparent; position: relative; border-radius: 2px; }
.ic-batt::before { content:""; position:absolute; left:1px; top:1px; bottom:1px; width: 70%; background: var(--color-text); border-radius: 1px; }
.ic-batt::after  { content:""; position:absolute; right:-2px; top:2px; bottom:2px; width:1.5px; background: var(--color-text); border-radius: 0 1px 1px 0; }

.phone__screen {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #0E121B 0%, #141823 100%);
  border-radius: 30px;
  overflow: hidden;
  padding: 50px 16px 16px;
}

/* SCENES — cross-fade */
.scene {
  position: absolute;
  inset: 50px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition:
    opacity .55s var(--ease-out),
    transform .55s var(--ease-out);
  pointer-events: none;
}
.scene.is-active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.scene__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px;
  color: var(--color-text-dim);
  text-transform: uppercase; letter-spacing: .12em;
}
.scene__streak { display: inline-flex; align-items: center; gap: 5px; color: var(--color-warn); }
.streak-flame {
  width: 8px; height: 8px;
  border-radius: 50% 50% 50% 0;
  background: var(--color-warn);
  transform: rotate(-45deg);
  box-shadow: 0 0 8px rgba(245,184,107,.6);
  animation: flicker 1.6s ease-in-out infinite;
}
@keyframes flicker {
  0%,100% { transform: rotate(-45deg) scale(1); opacity: 1; }
  50%     { transform: rotate(-45deg) scale(1.15); opacity: .85; }
}

/* Scene 0 — Glance */
.glance-card {
  background: linear-gradient(180deg, rgba(94,234,212,.08), transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 22%, transparent);
  border-radius: 16px;
  padding: 16px;
  display: grid; gap: 4px; justify-items: center; text-align: center;
}
.glance-card__label {
  font-size: 9px;
  color: var(--color-text-dim);
  letter-spacing: .12em; text-transform: uppercase;
}
.glance-card__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: -.03em;
  color: var(--color-text);
  line-height: 1;
}
.glance-card__sub { font-size: 11px; color: var(--color-success); }

.calc-list {
  display: grid; gap: 6px;
  font-size: 11px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.calc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  opacity: 0;
  transform: translateY(8px);
  color: var(--color-text);
}
.calc-row.is-shown { animation: calcIn .5s var(--ease-out) forwards; }
@keyframes calcIn {
  to { opacity: 1; transform: translateY(0); }
}
.calc-row__label { color: var(--color-text-mut); }
.calc-row__val { color: var(--color-text); font-weight: 500; }
.calc-row__val.neg { color: var(--color-text-mut); }
.calc-row__val.hi  { color: var(--color-success); font-size: 13px; }
.calc-row--total {
  background: linear-gradient(180deg, rgba(94,234,212,.08), rgba(94,234,212,.02));
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}

/* Scene 1 — Tag */
.tx-list {
  display: grid; gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tx {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  opacity: 0;
  transform: translateX(40px);
}
.tx.is-shown { animation: txIn .45s var(--ease-out) forwards; }
@keyframes txIn {
  to { opacity: 1; transform: translateX(0); }
}
.tx__icon {
  grid-row: span 2;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-2);
  color: var(--color-text-mut);
}
.tx__icon--coffee { color: var(--color-warn); }
.tx__icon--subs   { color: var(--color-quest-b); }
.tx__icon--food   { color: var(--color-success); }
.tx__body { display: flex; flex-direction: column; gap: 2px; }
.tx__merchant { font-size: 12px; color: var(--color-text); font-weight: 500; }
.tx__time { font-size: 9px; color: var(--color-text-dim); letter-spacing: .04em; text-transform: uppercase; }
.tx__amt { font-size: 12px; color: var(--color-text); font-weight: 500; }
.tx__pill {
  grid-column: 2 / 4;
  justify-self: end;
  margin-top: 2px;
  opacity: 0;
  transform: scale(.7);
}
.tx.is-tagged .tx__pill { animation: pillPop .45s var(--ease-spring) forwards; }
@keyframes pillPop {
  0%   { opacity: 0; transform: scale(.7); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.pill {
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pill--mint {
  background: rgba(94,234,212,.12);
  color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
}
.pill--violet {
  background: rgba(124,111,240,.15);
  color: var(--color-quest-b);
  border: 1px solid color-mix(in srgb, var(--color-quest-b) 35%, transparent);
}

.tx-toast {
  margin-top: auto;
  display: inline-flex; justify-content: center; align-items: center; gap: 6px;
  padding: 10px;
  background: rgba(94,234,212,.08);
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
  border-radius: 12px;
  color: var(--color-success);
  font-size: 11px;
  opacity: 0;
  transform: translateY(10px);
}
.tx-toast.is-shown { animation: calcIn .45s var(--ease-out) forwards; }

/* Scene 2 — Nudge */
.push {
  position: relative;
  padding: 12px;
  background: linear-gradient(180deg, rgba(124,111,240,.16), rgba(124,111,240,.06));
  border: 1px solid color-mix(in srgb, var(--color-quest-b) 40%, transparent);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-40px) scale(.95);
  box-shadow: 0 18px 40px -16px rgba(124,111,240,.55);
}
.push.is-shown { animation: pushDrop .7s var(--ease-spring) forwards; }
@keyframes pushDrop {
  0%   { opacity: 0; transform: translateY(-40px) scale(.95); }
  60%  { opacity: 1; transform: translateY(4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.push__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 9px;
  color: var(--color-text-mut);
  text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: 6px;
}
.push__app { display: inline-flex; align-items: center; gap: 5px; }
.push__icon {
  width: 12px; height: 12px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--color-quest-a), var(--color-success));
}
.push__body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text);
}
.push__body strong {
  color: var(--color-success);
  font-weight: 500;
}
.push__actions {
  display: flex; gap: 6px; margin-top: 10px;
}
.push__btn {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-2);
  color: var(--color-text);
  font-size: 11px;
  cursor: pointer;
}
.push__btn--primary {
  background: linear-gradient(180deg, var(--color-quest-a), var(--color-quest-a));
  border-color: var(--color-quest-b);
  color: #fff;
}

.quest-card {
  margin-top: auto;
  padding: 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.quest-card__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--color-text);
  margin-bottom: 8px;
}
.quest-card__bar {
  height: 5px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.quest-card__bar span {
  display: block; height: 100%;
  width: var(--w);
  background: linear-gradient(90deg, var(--color-quest-a), var(--color-quest-b));
  border-radius: 999px;
  transition: width 1.4s var(--ease-out);
}
.quest-card__delta {
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px;
  color: var(--color-success);
  opacity: 0;
  transform: translateY(6px);
}
.quest-card__delta.is-shown {
  animation: calcIn .5s var(--ease-out) forwards;
}

/* Tablet / mobile */
@media (max-width: 900px) {
  .ritual { height: calc(var(--ritual-vh, 100vh) * 2.6 + 60vh); }
  .ritual__layout { grid-template-columns: 1fr; gap: 32px; }
  .ritual__phone { order: -1; }
  .phone { width: min(260px, 100%); }
  .ritual__steps { min-height: 280px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ritual { height: auto; }
  .ritual__stage { position: relative; height: auto; padding-block: 64px; }
  .ritual-step { position: relative; opacity: 1; transform: none; margin-bottom: 32px; }
  .scene { position: relative; inset: auto; opacity: 1; transform: none; }
  .scene:not(.is-active) { display: none; }
  .calc-row, .tx, .tx-toast, .push, .quest-card__delta {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}

/* ============ QUESTS ============ */
.quests__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.quests__bullets { color: var(--color-text-mut); display: grid; gap: 10px; margin-top: var(--space-5); }
.quests__bullets li { position: relative; padding-left: 20px; }
.quests__bullets li::before {
  content: "";
  position: absolute; left: 0; top: 11px;
  width: 8px; height: 1.5px;
  background: var(--color-quest-b);
  border-radius: 1px;
}

.quests__card {
  position: relative;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(124,111,240,.18), transparent 55%),
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-2) 100%);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--glow-quest);
}
.quests__cardhead {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.quests__chip {
  font-size: var(--fs-xs);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(124,111,240,.15);
  color: var(--color-quest-b);
  border: 1px solid color-mix(in srgb, var(--color-quest-b) 35%, transparent);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.quests__cardtitle { font-size: var(--fs-lg); }

.quests__ring {
  position: relative;
  display: grid; place-items: center;
  margin-block: var(--space-4);
}
.quests__ringfill { transition: stroke-dasharray var(--dur-slow) var(--ease-spring); }
.quests__ringtext {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 2px; text-align: center;
}
.quests__pct {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  display: block;
}
.quests__pctsub {
  font-size: var(--fs-xs);
  color: var(--color-success);
  display: block;
}

.quests__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}
.quests__meta dt { color: var(--color-text-dim); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; }
.quests__meta dd {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

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

/* ============ SAFE TO SPEND ============ */
.sts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.sts__hint { color: var(--color-text-dim); font-size: var(--fs-sm); margin-top: var(--space-4); }

.sts__demo {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-2) 100%);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3vw, 36px);
}
.sts__readout {
  display: grid; gap: 6px;
  text-align: left;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.sts__label { font-size: var(--fs-xs); color: var(--color-text-dim); text-transform: uppercase; letter-spacing: .12em; }
.sts__amount {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  letter-spacing: -.03em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-base) var(--ease-spring);
}
.sts__amount.is-warn { color: var(--color-warn); }
.sts__amount.is-soft { color: var(--color-risk); }
.sts__sub { color: var(--color-text-mut); font-size: var(--fs-sm); }

.sts__slider { display: grid; gap: 14px; margin-top: var(--space-5); }
.sts__sliderlabel {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--fs-sm); color: var(--color-text-mut);
}
.sts__sliderlabel output {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-success) 0 var(--sts-pct, 50%), var(--color-border-2) var(--sts-pct, 50%) 100%);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--color-border-2);
}
input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--color-success);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-text);
  border: 4px solid var(--color-surface-2);
  box-shadow: 0 0 0 1px var(--color-success), 0 6px 18px -6px rgba(94,234,212,.5);
  margin-top: -8px;
  transition: transform var(--dur-fast) var(--ease-spring);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-text);
  border: 4px solid var(--color-surface-2);
  box-shadow: 0 0 0 1px var(--color-success);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.08); }
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--color-success), 0 0 0 5px rgba(94,234,212,.2);
}

.sts__legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
}
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot--ok   { background: var(--color-success); }
.dot--warn { background: var(--color-warn); }
.dot--soft { background: var(--color-risk); }

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

/* ============ PRIVACY ============ */
.privacy__grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.privacy-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 30px);
  color: var(--color-text-mut);
}
.privacy-card h3 {
  color: var(--color-text);
  margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 8px;
}
.privacy-card h3::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 4px rgba(94,234,212,.12);
}
@media (max-width: 820px) { .privacy__grid { grid-template-columns: 1fr; } }

/* ============ WAITLIST ============ */
.waitlist__wrap {
  max-width: var(--container-narrow);
  text-align: left;
}
.waitlist-form {
  margin-top: var(--space-6);
  display: grid; gap: var(--space-5);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-2) 100%);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 36px);
}
.waitlist-form__fine {
  font-size: var(--fs-xs);
  color: var(--color-text-dim);
}
.waitlist-success {
  margin-top: var(--space-6);
  text-align: center;
  padding: var(--space-7);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-2) 100%);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-xl);
  display: grid; gap: 10px; justify-items: center;
  color: var(--color-text-mut);
}
.waitlist-success svg { color: var(--color-success); }
.waitlist-success h3 { color: var(--color-text); font-size: var(--fs-lg); }

/* ============ FAQ ============ */
.faq__list { margin-top: var(--space-6); max-width: 820px; }