/* =========================================================================
   Guided onboarding — FULL-SCREEN, single-column, mobile-app style
   (inc/onboard.php shell, refsite/onboard.js engine).
   LIGHT & AIRY palette (matches the theme's paper surfaces) so the takeover
   feels calm and easy, not an overwhelming dark-green wall. One narrow
   centered column carries everything: a soft named-phase indicator, a
   per-question vector badge, the question, options as large tap rows, then
   a quiet evidence footnote; key answers reveal an animated data-chart.
   All colour lives in the tokens below — retint the whole flow from one
   place. The page behind is fully covered and locked; the stage owns its
   own scroll. All motion is reduced-motion gated.
   ========================================================================= */
.obRoot {
  /* ---- Palette tokens — edit here to retint the entire flow ---- */
  --ob-bg1: #f8fbf9;            /* panel wash, top    */
  --ob-bg2: #eef5f0;            /* panel wash, middle */
  --ob-bg3: #e7f0ea;            /* panel wash, bottom */
  --ob-tint: #eaf6ee;           /* soft ambient halo  */
  --ob-ink: #1c3a2e;            /* headings / strong  */
  --ob-body: #40544b;           /* affirmations, body */
  --ob-muted: #6a7d73;          /* captions, eyebrows */
  --ob-brand: #2d7752;          /* primary green      */
  --ob-brand-2: #4b9f70;        /* mid-green accent   */
  --ob-brand-3: #59bf7d;        /* bright fill accent */
  --ob-mint: #9bd1ae;           /* soft mint          */
  --ob-card: rgba(255, 255, 255, .62);  /* chip / chart card */
  --ob-card-hover: #ffffff;
  --ob-line: rgba(45, 119, 82, .12);     /* hairlines        */
  --ob-line-2: rgba(45, 119, 82, .2);    /* control borders  */
  --ob-field: #ffffff;
  --ob-shadow: 0 12px 30px rgba(20, 70, 48, .08);
  --ob-shadow-lift: 0 16px 38px rgba(20, 70, 48, .12);
}

html.obLock, html.obLock body { overflow: hidden; }

.obRoot { position: fixed; inset: 0; z-index: 4000; }
/* display rules would defeat the hidden attribute — never let them. */
.obRoot[hidden], .obLauncher[hidden] { display: none; }

/* Entrance: the takeover fades + settles. */
.obRoot { opacity: 0; transition: opacity .4s ease; }
.obRoot .obPanel { transform: translateY(18px); transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.obRoot.isOpen { opacity: 1; }
.obRoot.isOpen .obPanel { transform: none; }

.obPanel {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background:
    radial-gradient(115% 130% at 50% -12%, var(--ob-tint) 0%, rgba(234, 246, 238, 0) 58%),
    linear-gradient(168deg, var(--ob-bg1) 0%, var(--ob-bg2) 58%, var(--ob-bg3) 100%);
  color: var(--ob-body);
}
.obGrain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Step-matched photography (theme's own set) — far behind a LIGHT scrim, so
   it reads as a faint watermark, never a mood-darkening backdrop. */
.obPhoto { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.obPhoto i {
  position: absolute; inset: 0; opacity: 0;
  background: center / cover no-repeat;
  filter: saturate(.9);
  transition: opacity 1.4s ease;
}
.obPhoto i.isOn { opacity: .14; }
.obPhoto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(248, 251, 249, .62) 0%, rgba(240, 246, 241, .82) 55%, rgba(231, 240, 234, .94) 100%);
}

/* Ambient living signal — a faint sage halo, far back, centered. */
.obAmbient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.obGlow {
  position: absolute; left: 50%; top: -34%; width: 72%; aspect-ratio: 1; border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(120, 200, 152, .3) 0%, transparent 62%);
  animation: obBreath 9s ease-in-out infinite;
}
@keyframes obBreath { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }
.obOrbits { position: absolute; left: 50%; top: 50%; }
.obOrbits i { position: absolute; border-radius: 50%; border: 1px solid rgba(45, 119, 82, .07); transform: translate(-50%, -50%); }
.obOrbits i:nth-child(1) { width: min(120vh, 900px); aspect-ratio: 1; animation: obSpin 80s linear infinite; }
.obOrbits i:nth-child(2) { width: min(170vh, 1300px); aspect-ratio: 1; border-color: rgba(45, 119, 82, .05); }
@keyframes obSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---- Minimal chrome ---------------------------------------------------------- */
.obTop {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(14px, 2.4vh, 22px) clamp(16px, 2.6vw, 30px);
}
.obBrand {
  display: inline-flex; align-items: center; gap: 9px; color: var(--ob-brand);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.obBrand i { width: 6px; height: 6px; border-radius: 50%; background: var(--ob-brand-3); box-shadow: 0 0 0 3px rgba(89, 191, 125, .18); }
.obClose {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--ob-body); font-size: 22px; line-height: 1;
  background: rgba(45, 119, 82, .05); border: 1px solid var(--ob-line);
  transition: background .25s, border-color .25s, transform .25s;
}
.obClose:hover { background: rgba(45, 119, 82, .1); border-color: var(--ob-line-2); transform: rotate(90deg); }
.obClose:focus-visible { outline: 2px solid var(--ob-brand-2); outline-offset: 3px; }

/* ---- The single column -------------------------------------------------------- */
.obColumn {
  position: relative; z-index: 2; flex: 1; min-height: 0;
  width: min(560px, 100% - 40px); margin-inline: auto;
  display: flex; flex-direction: column;
}
/* Soft named-phase progress — no step numbers, so it reads as a
   conversation, not a "Q1 / 8" form the visitor wants to escape. */
.obPhase { flex: none; display: flex; align-items: center; gap: 12px; padding: 4px 2px 16px; }
.obPhaseDots { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.obPhaseDots i {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(45, 119, 82, .16);
  transition: background .45s, transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s;
}
.obPhaseDots i.isDone { background: var(--ob-brand-2); }
.obPhaseDots i.isNow { background: var(--ob-brand-2); transform: scale(1.28); box-shadow: 0 0 0 4px rgba(89, 191, 125, .16); }
.obPhaseName {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ob-brand-2); white-space: nowrap;
}

/* Stage scrolls on its own; content centers when short (margin-auto trick
   keeps the top reachable when it overflows, unlike justify-content). */
.obFlow { flex: 1; display: flex; min-height: 0; }
.obStage {
  flex: 1; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 8px 2px 18px;
  scrollbar-width: thin; scrollbar-color: rgba(45, 119, 82, .28) transparent;
}
.obStage::-webkit-scrollbar { width: 8px; }
.obStage::-webkit-scrollbar-thumb { background: rgba(45, 119, 82, .22); border-radius: 20px; }
.obStage > *:first-child { margin-top: auto; }
.obStage > *:last-child { margin-bottom: auto; padding-bottom: 4px; }

.obStage > * { animation: obIn .45s cubic-bezier(.22, 1, .36, 1) both; }
.obStage > *:nth-child(2) { animation-delay: .07s; }
.obStage > *:nth-child(3) { animation-delay: .14s; }
.obStage > *:nth-child(4) { animation-delay: .2s; }
@keyframes obIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.obAffirm { margin: 0 0 12px; color: var(--ob-body); font-size: 14.5px; line-height: 1.6; }
.obQ {
  margin: 0 0 22px; color: var(--ob-ink); font-weight: 580; letter-spacing: -.016em;
  line-height: 1.14; font-size: clamp(25px, 2.6vw, 34px); outline: none; text-wrap: balance;
}
/* Options: stacked, full-width tap rows — one clear reading line. */
.obChips { display: flex; flex-direction: column; gap: 10px; }
.obChip {
  display: flex; align-items: center; width: 100%; text-align: left;
  padding: 15px 18px; border-radius: 14px;
  color: var(--ob-ink); font: inherit; font-size: 15.5px; font-weight: 520; letter-spacing: .004em;
  text-decoration: none; cursor: pointer;
  background: var(--ob-card); border: 1px solid var(--ob-line-2);
  box-shadow: 0 1px 2px rgba(20, 70, 48, .04);
  transition: border-color .22s, background .22s, box-shadow .28s, transform .28s cubic-bezier(.22, 1, .36, 1);
}
/* Hover moves color + the arrow only — never the row itself (a translate on
   a full-width row overflows the column and flashes a horizontal scrollbar). */
.obChip:hover { border-color: var(--ob-brand-2); background: var(--ob-card-hover); box-shadow: var(--ob-shadow); }
.obChip:focus-visible { outline: 2px solid var(--ob-brand-2); outline-offset: 3px; }
.obChip::after {
  content: "→"; margin-left: auto; padding-left: 14px; color: var(--ob-brand-2);
  opacity: 0; transform: translateX(-6px); transition: opacity .22s, transform .28s cubic-bezier(.22, 1, .36, 1);
}
.obChip:hover::after, .obChip:focus-visible::after { opacity: 1; transform: none; }

/* Action pair (intro / continue / submit) stays a horizontal pill row. */
.obChipsIntro { flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 6px; gap: 12px; }
.obChipsIntro .obChip { width: auto; border-radius: 999px; padding: 13px 22px; }
.obChipsIntro .obChip::after { content: none; }
.obChipsIntro .obChip:hover { transform: translateY(-1px); }
.obChipGo {
  color: #fff; font-weight: 620;
  background: linear-gradient(135deg, var(--ob-brand-3) 0%, var(--ob-brand) 100%);
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(30, 110, 70, .26), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.obChipGo:hover { background: linear-gradient(135deg, #64c98a 0%, #327f58 100%); border-color: transparent; box-shadow: var(--ob-shadow-lift); }
.obChipGo.is-loading { opacity: .6; pointer-events: none; }
.obChipGhost { background: transparent; border-color: var(--ob-line-2); color: var(--ob-brand); box-shadow: none; }
.obChipGhost:hover { background: rgba(45, 119, 82, .06); }
.obBack {
  margin-top: 22px; padding: 0; background: none; border: 0; cursor: pointer; width: max-content;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ob-muted);
}
.obBack:hover { color: var(--ob-ink); }
.obBack:focus-visible { outline: 2px solid var(--ob-brand-2); outline-offset: 3px; }

/* ---- Per-question vector badge -------------------------------------------------- */
.obQIcon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin: 0 0 16px; border-radius: 14px; color: var(--ob-brand);
  background: radial-gradient(120% 120% at 30% 20%, rgba(89, 191, 125, .16), rgba(89, 191, 125, .05));
  border: 1px solid rgba(45, 119, 82, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 20px rgba(20, 70, 48, .08);
}
.obQIcon svg { width: 24px; height: 24px; }

/* ---- Data-charts — a real, animated stat as a reward ---------------------------- */
.obChart {
  margin: 0 0 20px; padding: 16px 16px 14px; border-radius: 16px;
  background: var(--ob-card); border: 1px solid var(--ob-line);
  box-shadow: var(--ob-shadow);
}
.obChartTitle {
  margin: 0 0 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ob-brand-2);
}
.obChartCap { margin: 12px 0 0; color: var(--ob-muted); font-size: 12.5px; line-height: 1.55; }

/* Bars (medication proof) */
.obBarRow {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
  align-items: center; column-gap: 14px; row-gap: 6px; margin: 0 0 14px;
}
.obBarRow:last-of-type { margin-bottom: 0; }
.obBarLabel { grid-column: 1; grid-row: 1; color: var(--ob-ink); font-size: 13.5px; }
.obBarRow b {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  color: var(--ob-brand); font-weight: 700; font-size: 22px; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.obBarTrack { grid-column: 1; grid-row: 2; height: 8px; border-radius: 6px; background: rgba(45, 119, 82, .1); overflow: hidden; }
.obBarTrack i {
  display: block; height: 100%; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--ob-brand-3), var(--ob-brand));
  transition: width 1.05s cubic-bezier(.22, 1, .36, 1);
}
.obChart.isIn .obBarTrack i { width: var(--v); }

/* Timeline (duration reassurance) */
.obTimeline { position: relative; display: flex; justify-content: space-between; padding: 6px 8px 0; }
.obTimeline::before,
.obTimeline::after { content: ""; position: absolute; left: 14px; top: 12px; height: 2px; border-radius: 2px; }
.obTimeline::before { right: 14px; background: rgba(45, 119, 82, .14); }
.obTimeline::after { width: 0; background: linear-gradient(90deg, var(--ob-brand-3), var(--ob-brand)); transition: width 1.1s cubic-bezier(.22, 1, .36, 1); }
.obChart.isIn .obTimeline::after { width: calc(100% - 28px); }
.obTimeNode { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.obTimeNode i {
  width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid rgba(45, 119, 82, .24);
  transition: background .4s, border-color .4s, box-shadow .4s;
}
.obTimeNode em { font-style: normal; font-size: 11px; color: var(--ob-muted); }
.obChart.isIn .obTimeNode i { background: var(--ob-brand-2); border-color: var(--ob-brand-2); box-shadow: 0 0 0 4px rgba(89, 191, 125, .16); }
.obChart.isIn .obTimeNode:nth-child(1) i { transition-delay: .15s; }
.obChart.isIn .obTimeNode:nth-child(2) i { transition-delay: .5s; }
.obChart.isIn .obTimeNode:nth-child(3) i { transition-delay: .85s; }

/* Ring + check (coverage, and the success screen) */
.obChartRing { display: flex; align-items: center; gap: 16px; }
.obChartDone { background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 6px; display: flex; justify-content: center; }
.obRing { position: relative; flex: none; width: 80px; height: 80px; }
.obChartDone .obRing { width: 88px; height: 88px; }
.obRing > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.obRingTrack { stroke: rgba(45, 119, 82, .14); stroke-width: 6; }
.obRingVal {
  stroke: var(--ob-brand-2); stroke-width: 6; stroke-linecap: round; fill: none;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  transform: rotate(-90deg); transform-box: fill-box; transform-origin: center;
  transition: stroke-dashoffset 1.1s cubic-bezier(.22, 1, .36, 1);
}
.obChart.isIn .obRingVal { stroke-dashoffset: var(--off, 0); }
.obRingCheck {
  position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; stroke: var(--ob-brand);
  opacity: 0; transform: scale(.5); transition: opacity .4s .55s, transform .5s .55s cubic-bezier(.34, 1.56, .64, 1);
}
.obChart.isIn .obRingCheck { opacity: 1; transform: scale(1); }
.obRingText { display: flex; flex-direction: column; gap: 3px; }
.obRingText strong { color: var(--ob-ink); font-size: 15px; font-weight: 640; }
.obRingText span { color: var(--ob-muted); font-size: 12.5px; line-height: 1.5; }

/* Half-circle gauge (personalized candidacy read) */
.obChartGauge { text-align: center; }
.obGauge { position: relative; width: min(230px, 82%); margin: 0 auto 2px; }
.obGaugeSvg { width: 100%; height: auto; display: block; }
.obGaugeTrack { stroke: rgba(45, 119, 82, .14); stroke-width: 10; stroke-linecap: round; fill: none; }
.obGaugeVal {
  stroke: var(--ob-brand-2); stroke-width: 10; stroke-linecap: round; fill: none;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.15s cubic-bezier(.22, 1, .36, 1);
}
.obChart.isIn .obGaugeVal { stroke-dashoffset: var(--off); }
.obGaugeMeta { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.obGaugeMeta strong { color: var(--ob-ink); font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.obGaugeMeta > span { color: var(--ob-brand); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* ---- Evidence footnote — supportive, never competing ---------------------------- */
.obEvidence {
  flex: none; display: flex; align-items: baseline; gap: 12px;
  padding: 14px 2px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ob-line);
}
.obEvidenceStat {
  flex: none; color: var(--ob-brand); font-weight: 680; letter-spacing: -.01em;
  font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.obEvidenceText { margin: 0; color: var(--ob-muted); font-size: 12.5px; line-height: 1.5; }
/* Stat swap: re-triggered by onboard.js on every step change. */
.obEvidence.isSwap .obEvidenceStat, .obEvidence.isSwap .obEvidenceText { animation: obIn .5s cubic-bezier(.22, 1, .36, 1) both; }
.obEvidence.isSwap .obEvidenceText { animation-delay: .06s; }

/* ---- Read-back (the reward) -------------------------------------------------- */
.obReadback { margin: 0 0 18px; padding: 0; list-style: none; }
.obReadback li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--ob-line);
}
.obReadback span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ob-muted); white-space: nowrap;
}
.obReadback strong { color: var(--ob-ink); font-size: 14.5px; font-weight: 560; text-align: right; }
.obVerdict {
  margin: 0 0 24px; padding: 14px 16px; border-left: 2px solid var(--ob-brand-3);
  border-radius: 0 12px 12px 0; background: rgba(89, 191, 125, .08);
  color: var(--ob-ink); font-size: 15.5px; line-height: 1.6;
}

/* ---- Contact fields ------------------------------------------------------------ */
.obFields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 22px; }
@media (max-width: 560px) { .obFields { grid-template-columns: 1fr; } }
.obField { display: flex; flex-direction: column; gap: 6px; }
.obField span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ob-muted);
}
.obField input, .obField select {
  width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 12px;
  color: var(--ob-ink); font: inherit; font-size: 15.5px;
  background: var(--ob-field); border: 1px solid var(--ob-line-2);
  transition: border-color .25s, box-shadow .25s;
}
.obField input::placeholder { color: #9fb2a8; }
.obField input:focus, .obField select:focus { outline: none; border-color: var(--ob-brand-2); box-shadow: 0 0 0 3px rgba(89, 191, 125, .16); }
.obField select option { color: #10231d; background: #fff; }
.obFormNote { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: #c0553e; }

/* ---- Success timeline ----------------------------------------------------------- */
.obNext { margin: 0 0 24px; padding: 0; list-style: none; }
.obNext li {
  display: flex; align-items: baseline; gap: 14px; padding: 11px 0;
  border-bottom: 1px solid var(--ob-line);
  color: var(--ob-body); font-size: 15px; line-height: 1.55;
}
.obNext span {
  flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--ob-brand);
}

/* ---- Footer: one quiet line -------------------------------------------------------- */
.obFoot {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap;
  padding: 10px clamp(16px, 2.6vw, 30px) calc(12px + env(safe-area-inset-bottom, 0px));
}
.obPrivacy {
  display: inline-flex; align-items: center; gap: 8px; color: var(--ob-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}
.obPrivacy i { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--ob-brand-3); }
.obCall { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; white-space: nowrap; }
.obCall span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ob-muted);
}
.obCall strong { color: var(--ob-brand); font-size: 14px; font-weight: 660; letter-spacing: -.01em; }
.obCall:hover strong { color: var(--ob-ink); }
@media (max-width: 560px) { .obPrivacy { display: none; } }

/* ---- Floating launcher ------------------------------------------------------------ */
.obLauncher {
  position: fixed; right: clamp(14px, 2.4vw, 26px); bottom: clamp(14px, 2.4vh, 26px); z-index: 3900;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 13px 20px; border-radius: 999px;
  color: #fff; font: inherit; font-size: 13.5px; font-weight: 620; letter-spacing: .01em;
  /* Hardcoded brand green — the launcher lives OUTSIDE .obRoot, so the
     --ob-* palette tokens don't reach it (they'd resolve to nothing and drop
     the background, leaving a washed-out ghost on light mobile backgrounds). */
  background: linear-gradient(145deg, #59bf7d 0%, #2d7752 100%);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: 0 14px 34px rgba(30, 110, 70, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, border-color .25s;
}
.obLauncher:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(30, 110, 70, .36), inset 0 1px 0 rgba(255, 255, 255, .25); }
.obLauncher:focus-visible { outline: 2px solid #2d7752; outline-offset: 3px; }
.obLauncherPulse { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #eafff3; }
.obLauncherPulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #eafff3; opacity: 0;
  animation: obPing 3s cubic-bezier(.22, 1, .36, 1) infinite;
}
@keyframes obPing { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .obRoot, .obRoot .obPanel, .obChip, .obClose, .obLauncher, .obPhaseDots i { transition: none; }
  .obStage > *, .obEvidence.isSwap .obEvidenceStat, .obEvidence.isSwap .obEvidenceText { animation: none; }
  .obGlow, .obOrbits i, .obLauncherPulse::after { animation: none; }
  /* Charts skip the sweep but still land on their final, correct value. */
  .obBarTrack i, .obTimeline::after, .obTimeNode i, .obRingVal, .obRingCheck, .obGaugeVal { transition: none; }
}