/* ==========================================================
   The 32-screen onboarding flow (Onboarding::Step/Flow, ScreenComponent).
   Scoped under .new-onboarding, same tokens as variables.css, same file
   layout as the rest of new_onboarding/*.css — but a distinct class
   namespace (.ob-*) from the older JS-driven flow's short classes
   (.oc, .qt, .phone, ...), which this file never touches. The visual
   language (padding, radii, type scale, color use) is carried over from
   that older, already-shipped system so the two flows read as the same
   product, not two different apps.
   ========================================================== */

/* Every fieldset's <legend class="sr-only"> (single/multi/grid/accordion/
   triedgroups) relies on this existing — it's undefined anywhere in this
   layout's stylesheets since Tailwind (which ships it) isn't loaded here.
   Without it, every choice screen showed its question a second time as
   plain visible text. */
.new-onboarding .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- device frame ----------
   The old flow wraps its screens in a separate .phone div inside
   .new-onboarding; this flow renders one .ob-screen directly inside
   .new-onboarding per page load, so the frame treatment goes on
   .ob-screen itself rather than .new-onboarding, leaving every other
   .new-onboarding consumer (the old flow, the pre-login tutorial)
   untouched. */
.new-onboarding .ob-screen {
  width: 100%;
  max-width: 393px;
  height: 100dvh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--white) 0%, var(--warm-cream) 100%);
}

@media (min-height: 853px) and (min-width: 500px) {
  /* On a real phone this rule never applies at all — a viewport this wide
     only happens in a desktop browser. Without a backdrop distinct from
     the screen's own near-white background, the rounded corners and shadow
     below read as barely-there padding, not a device on a surface (the
     artifact's own reasoning for its gallery backdrop: "deliberately not
     the app cream so devices read as objects"). :has() scopes this to
     exactly the container showing an .ob-screen, so mobile rendering and
     the older .phone-based flow sharing this same layout are untouched. */
  .new-onboarding:has(.ob-screen) {
    background: var(--sand);
  }

  .new-onboarding .ob-screen {
    max-height: 852px;
    margin-top: calc((100dvh - 852px) / 2);
    border-radius: 44px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 25px 80px rgba(0, 0, 0, .1);
  }
}

/* Every real screen (Onboarding::ScreenComponent's template) wraps its
   body and footer in <form class="ob-form">, so .ob-screen's flex column
   never reaches .ob-body/.ob-cta directly — the form has to relay it.
   Screens with no form (the plan reveal, the loader) render .ob-body/
   .ob-cta as .ob-screen's own direct children, where this isn't needed. */
.new-onboarding .ob-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ---------- top bar: back button + progress ---------- */
.new-onboarding .ob-top {
  position: relative;
  z-index: 50;
  padding: 10px 24px 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  margin: 0 24px;
}

@media (min-height: 700px) {
  .new-onboarding .ob-top { padding-top: 16px; }
}

.new-onboarding .ob-back {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--text-primary);
}
.new-onboarding .ob-back:active { transform: scale(.92) }
.new-onboarding .ob-back svg { color: var(--text-primary) }

/* Keep the questionnaire Back arrow beside progress in native webviews too.
   Native history and the previous applicable question are not always the same. */

.new-onboarding .ob-progress {
  flex: 1;
  height: 3px;
  background: var(--sand);
  border-radius: 2px;
  overflow: hidden;
}

.new-onboarding .ob-progress-fill {
  height: 100%;
  background: var(--coral);
  border-radius: 2px;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.new-onboarding .ob-progress-pct {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- body: eyebrow / question / context / why ---------- */
.new-onboarding .ob-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 28px 24px;
  display: flex;
  flex-direction: column;
}

.new-onboarding .ob-eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 12px;
}

.new-onboarding .ob-question {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.18;
  color: var(--text-primary);
  margin: 0 0 8px;
  letter-spacing: -.02em;
}

.new-onboarding .ob-context {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 20px;
}

.new-onboarding .ob-input { margin-bottom: 20px; }

.new-onboarding .ob-why {
  /* flex-shrink: 0 — overflow:hidden (needed to clip the summary's flat top
     to this box's own rounded corners) resets a flex item's automatic
     minimum size to 0 per the flexbox spec, so on a screen with a tall
     input below it (the accordion groups) this box gets squeezed to
     nothing instead of the input scrolling — .ob-body already scrolls. */
  flex-shrink: 0;
  margin: 4px 0 20px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--sand-light);
  overflow: hidden;
}
.new-onboarding .ob-why summary {
  padding: 13px 15px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.new-onboarding .ob-why summary::-webkit-details-marker { display: none }
.new-onboarding .ob-why summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.5px solid var(--text-hint);
  border-bottom: 1.5px solid var(--text-hint);
  transform: rotate(45deg);
  transition: transform .2s;
}
.new-onboarding .ob-why[open] summary::after { transform: rotate(-135deg) }
.new-onboarding .ob-why p {
  margin: 0;
  padding: 0 15px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------- footer: CTA ---------- */
.new-onboarding .ob-cta {
  position: relative;
  z-index: 20;
  padding: 12px 24px calc(env(safe-area-inset-bottom, 16px) + 12px);
  flex-shrink: 0;
  background: var(--white);
  /* Pushes to the bottom of whichever flex column it's actually in —
     .ob-form on a regular screen, .ob-screen itself on the reveal/loader,
     which render it as a direct child with no form wrapper at all. */
  margin-top: auto;
}

.new-onboarding .ob-continue {
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 16px;
  font-family: var(--font-b);
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .2s;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  color: var(--white);
  box-shadow: 0 4px 20px rgba(239, 83, 80, .25);
  text-decoration: none;
}
.new-onboarding .ob-continue:hover { transform: translateY(-1px) }
.new-onboarding .ob-continue:active { transform: translateY(0) scale(.985) }

.new-onboarding .ob-continue-secondary {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 0;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
}
.new-onboarding .ob-continue-secondary:hover { color: var(--text-primary) }

.new-onboarding .ob-foot {
  text-align: center;
  font-size: 12px;
  color: var(--text-hint);
  margin: 12px 0 0;
}

/* ---------- choice inputs (single / multi / grid / bristol / accordion / triedgroups all share this) ----------
   .ob-choice-input is the real, native input; .ob-choice is its adjacent
   sibling <label> (not a wrapper), so :checked + label is what drives the
   selected state — no JS needed for the visual toggle. */
.new-onboarding .ob-choices,
.new-onboarding .ob-group-body {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.new-onboarding .ob-choice-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.new-onboarding .ob-choice {
  padding: 13px 14px;
  border: 1.5px solid var(--border);
  border-radius: 13px;
  cursor: pointer;
  transition: all .15s;
  background: var(--white);
  display: flex;
  align-items: center;
  gap: 12px;
  -webkit-tap-highlight-color: transparent;
}
.new-onboarding .ob-choice:hover { border-color: var(--border-hover); background: var(--sand-light) }
.new-onboarding .ob-choice-input:checked + .ob-choice {
  border-color: var(--coral);
  background: var(--coral-glow);
}
.new-onboarding .ob-choice-input:focus-visible + .ob-choice {
  outline: 2px solid var(--coral-deep);
  outline-offset: 2px;
}

/* radio/checkbox indicator, drawn on the label since the input itself is
   visually hidden — one shape does for both single- and multi-select. */
.new-onboarding .ob-choice::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  transition: all .15s;
}
.new-onboarding .ob-choice-input:checked + .ob-choice::before {
  border-color: var(--coral);
  border-width: 6px;
}

.new-onboarding .ob-choice-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.new-onboarding .ob-choice-label {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.35;
}
.new-onboarding .ob-choice-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  display: block;
}

.new-onboarding .ob-other-reveal { margin: 8px 0 0 32px; }
.new-onboarding .ob-other-reveal[hidden] { display: none; }
.new-onboarding .ob-other-reveal .ob-text { height: 44px; font-size: 15px; }

/* ---------- grid (a 2-up variant of the same choice card) ---------- */
.new-onboarding .ob-grid {
  border: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.new-onboarding .ob-choice-grid {
  flex-direction: column;
  text-align: center;
  padding: 18px 14px;
}
.new-onboarding .ob-choice-grid::before { margin-bottom: 2px }

/* ---------- bristol ---------- */
.new-onboarding .ob-bristol {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.new-onboarding .ob-bristol-type {
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all .15s;
  background: var(--white);
}
.new-onboarding .ob-bristol-type::before { content: none } /* no radio dot on the image cards */
.new-onboarding .ob-bristol-type:hover { border-color: var(--border-hover) }
.new-onboarding .ob-choice-input:checked + .ob-bristol-type {
  border-color: var(--coral);
  background: var(--coral-glow);
}
.new-onboarding .ob-bristol-art {
  width: auto;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
}
.new-onboarding .ob-bristol-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-hint);
  min-width: 44px;
  flex-shrink: 0;
  white-space: nowrap;
}
.new-onboarding .ob-choice-input:checked + .ob-bristol-type .ob-bristol-name { color: var(--coral) }
.new-onboarding .ob-bristol-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.35;
  flex: 1;
}

.new-onboarding .ob-mixed-order {
  margin: -2px 0 0 34px;
  padding: 10px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* An unconditional display: flex above beats the browser's own
   [hidden] { display: none } UA rule — same author-stylesheet-always-wins
   fix already applied to .ob-severity/.ob-reveal-group, just missed here
   when this screen was built. Without it "hidden" toggles the DOM
   attribute correctly (confirmed via JS) while the section keeps
   rendering anyway — the actual bug Allan saw, not a JS logic bug. */
.new-onboarding .ob-mixed-order[hidden] { display: none; }
.new-onboarding .ob-mixed-order-title { font-size: 12.5px; font-weight: 600; color: var(--text-secondary) }
.new-onboarding .ob-mixed-order-row { display: flex; align-items: center; gap: 10px }
.new-onboarding .ob-mixed-order-row label { font-size: 12.5px; color: var(--text-muted); width: 36px; flex-shrink: 0 }
.new-onboarding .ob-mixed-order-select {
  flex: 1;
  height: 40px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
  font-family: var(--font-b);
  font-size: 13.5px;
  color: var(--text-primary);
  background: var(--white);
}

/* ---------- accordion groups (diagnoses / family / medications / tried) ---------- */
.new-onboarding .ob-accordion { display: flex; flex-direction: column; gap: 8px; }
.new-onboarding .ob-group {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
}
.new-onboarding .ob-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.new-onboarding .ob-group-head::-webkit-details-marker { display: none }
.new-onboarding .ob-group-head:hover { background: var(--sand-light) }
.new-onboarding .ob-group-head::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.5px solid var(--text-hint);
  border-bottom: 1.5px solid var(--text-hint);
  transform: rotate(45deg);
  transition: transform .2s;
  flex-shrink: 0;
}
.new-onboarding .ob-group[open] .ob-group-head::after { transform: rotate(-135deg) }
.new-onboarding .ob-group-name { font-size: 14.5px; font-weight: 600; color: var(--text-primary); }
.new-onboarding .ob-group-examples { font-size: 12px; color: var(--text-hint); }
.new-onboarding .ob-group-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--coral);
  min-width: 16px;
  text-align: right;
}
.new-onboarding .ob-group-count:empty { display: none }
.new-onboarding .ob-group-body {
  border: none;
  padding: 0 16px 14px;
  gap: 6px;
}
.new-onboarding .ob-group-body .ob-choice {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
}
.new-onboarding .ob-group-body .ob-choice::before { width: 18px; height: 18px; border-radius: 5px; }
.new-onboarding .ob-group-body .ob-choice-input:checked + .ob-choice::before {
  border-width: 2px;
  background: var(--coral);
}

/* ---------- slider ---------- */
.new-onboarding .ob-slider { padding-top: 8px; }
.new-onboarding .ob-slider-value {
  display: block;
  text-align: center;
  font-family: var(--font-d);
  font-size: 48px;
  color: var(--coral);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: 16px;
}
.new-onboarding .ob-slider-input {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--coral) var(--fill, 0%), var(--slider-track) var(--fill, 0%));
  outline: none;
  margin-bottom: 8px;
}
.new-onboarding .ob-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--coral);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(239, 83, 80, .3);
}
.new-onboarding .ob-slider-input::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--coral);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(239, 83, 80, .3);
}
.new-onboarding .ob-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-hint);
}

/* ---------- text input ---------- */
.new-onboarding .ob-text {
  width: 100%;
  height: 54px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 0 18px;
  font-family: var(--font-b);
  font-size: 17px;
  color: var(--text-primary);
  background: var(--white);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.new-onboarding .ob-text::placeholder { color: var(--text-hint); font-weight: 300 }
.new-onboarding .ob-text:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-glow) }

/* ---------- content pending (screens with no real content yet) ---------- */
.new-onboarding .ob-content-pending {
  padding: 32px 0;
  text-align: center;
  color: var(--text-hint);
  font-size: 14px;
  border: 1.5px dashed var(--border);
  border-radius: 14px;
}

/* ---------- trust screen ---------- */
.new-onboarding .ob-screen[data-testid="screen-welcome"] .ob-body,
.new-onboarding .ob-screen[data-testid="screen-trust"] .ob-body {
  justify-content: center;
}

/* ---------- loader ----------
   No .ob-form/.ob-body here (composing.html.erb renders directly into
   .ob-screen) — but it does have the shared .ob-top header now, which
   must stay pinned at the top rather than centered with everything else,
   so the centered content lives in its own .ob-loader-body flex item
   instead of centering being set on .ob-loader itself. */
.new-onboarding .ob-loader { overflow-y: auto; }
.new-onboarding .ob-loader-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 24px 24px;
}
.new-onboarding .ob-loader .ob-question { margin-bottom: 24px; }

/* Big number + bar + stage label, not a ring — matches the artifact's own
   loader SCREEN (RENDER.loader() in onboarding-30.html), not ico.loader,
   the small decorative ring icon used only as a thumbnail elsewhere in the
   artifact. Real progress (Turbo Stream broadcasts already drive it), just
   styled to this layout instead of a ring's. */
.new-onboarding .ob-loader-progress { width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; }
.new-onboarding .ob-loader-pct {
  font-family: var(--font-d);
  font-size: 52px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.new-onboarding .ob-loader-bar { width: 100%; height: 6px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.new-onboarding .ob-loader-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--coral);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.new-onboarding .ob-loader-stage {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  min-height: 20px;
  margin: 10px 0 0;
}

/* The narrowing panel — the funnel from the whole library down to what's
   open today, each row real as its stage completes (Plan::NarrowingCounts). */
.new-onboarding .ob-loader-narrowing { width: 100%; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.new-onboarding .ob-loader-narrow-row { display: flex; align-items: baseline; gap: 14px; text-align: left; }
.new-onboarding .ob-loader-narrow-number {
  font-family: var(--font-d);
  font-size: 24px;
  font-weight: 700;
  color: var(--coral);
  min-width: 42px;
  flex-shrink: 0;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.new-onboarding .ob-loader-narrow-text { font-size: 13.5px; color: var(--text-secondary); line-height: 1.35; }

.new-onboarding .ob-loader-hint { font-size: 12.5px; color: var(--text-hint); line-height: 1.5; text-align: center; }

/* ---------- recap ---------- */
.new-onboarding .ob-recap { display: flex; flex-direction: column; gap: 8px; }
.new-onboarding .ob-recap-group {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
}
.new-onboarding .ob-recap-group summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.new-onboarding .ob-recap-group summary::-webkit-details-marker { display: none }
.new-onboarding .ob-recap-group summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--text-hint);
  border-bottom: 1.5px solid var(--text-hint);
  transform: rotate(45deg);
  transition: transform .2s;
  flex-shrink: 0;
}
.new-onboarding .ob-recap-group[open] summary::after { transform: rotate(-135deg) }
.new-onboarding .ob-recap-heading { font-size: 14.5px; font-weight: 600; color: var(--text-primary); }
.new-onboarding .ob-recap-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-hint);
  margin-left: auto;
}
.new-onboarding .ob-recap-list { margin: 0; padding: 0 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.new-onboarding .ob-recap-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.new-onboarding .ob-recap-row:first-child { border-top: none; padding-top: 0; }
.new-onboarding .ob-recap-row dt { font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
.new-onboarding .ob-recap-row dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}
/* A long or multi-value answer (e.g. several checked options) needs to wrap
   within its own box, not push "Change" into the middle of its first line
   — flex-wrap above sends "Change" to its own line once this box can't
   share a line with it, rather than baseline-aligning to a mid-wrap value. */
.new-onboarding .ob-recap-value { min-width: 0; }
.new-onboarding .ob-recap-change {
  font-size: 12px;
  color: var(--coral);
  font-weight: 600;
  text-decoration: none;
}
.new-onboarding .ob-recap-cta-note {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin: 12px 0 0;
}

/* ---------- plan reveal ----------
   .ob-plan now carries the shared .ob-top header too, same as every other
   screen, so the padded/scrollable role that used to live directly on it
   moved to .ob-plan-body instead — .ob-top has to sit outside that
   padding, not inside it, the same relationship .ob-top/.ob-body already
   have on a regular step screen. .ob-cta needs no padding cancellation
   here anymore for the same reason it never needed any there: it was only
   ever compensating for .ob-plan's own padding, which .ob-plan no longer
   carries. */
.new-onboarding .ob-plan-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 24px 0;
}
.new-onboarding .ob-plan-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.new-onboarding .ob-plan-group-header { display: flex; align-items: center; gap: 10px; }
.new-onboarding .ob-plan-group-header b { font-size: 14.5px; line-height: 1.25; color: var(--text-primary); }
.new-onboarding .ob-plan-group-number {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--coral);
  color: #fff;
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.new-onboarding .ob-plan-group.locked { gap: 8px; opacity: .66; }
.new-onboarding .ob-plan-group.locked .ob-plan-group-header b { color: var(--text-muted); font-weight: 500; }
.new-onboarding .ob-plan-group.locked .ob-plan-group-number { background: var(--sand); color: var(--text-muted); padding: 5px; }
.new-onboarding .ob-plan-group.locked .ob-plan-group-number svg { width: 100%; height: 100%; }
.new-onboarding .ob-plan-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.new-onboarding .ob-plan-item {
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--white);
  border: 1.5px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.new-onboarding .ob-plan-item-name {
  font-family: var(--font-d);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.01em;
  margin: 0;
}
.new-onboarding .ob-plan-item-language {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}
.new-onboarding .ob-plan-item-burden {
  font-size: 12px;
  color: var(--text-hint);
  margin: 0;
}
.new-onboarding .ob-plan-item .ob-why { margin: 6px 0 0; }

/* What to expect, from the Narrator. Quieter than the action line above it:
   it is context for the week, not the thing to do today. */
.new-onboarding .ob-plan-item-expect {
  font-size: 12.5px;
  color: var(--text-hint);
  line-height: 1.5;
  margin: 0;
}

/* The method. Same disclosure chrome as .ob-why, which it also carries, so
   only what is inside it needs styling. */
.new-onboarding .ob-method-steps {
  margin: 0;
  padding: 0 15px 4px 32px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.new-onboarding .ob-method-steps li { margin-bottom: 8px; }
.new-onboarding .ob-method-step-do { display: block; }
.new-onboarding .ob-method-step-next {
  display: block;
  font-size: 12px;
  color: var(--text-hint);
  margin-top: 2px;
}
/* The two bounds are the reason this disclosure exists, so they are the one
   thing in it that does not read as small print. */
.new-onboarding .ob-method-bound {
  margin: 0;
  padding: 8px 15px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.new-onboarding .ob-method-bound:last-child { padding-bottom: 14px; }
.new-onboarding .ob-method-bound b { color: var(--text-primary); font-weight: 700; }
/* Softer than the two bounds, which are the reason the disclosure exists and
   stay the one thing in it that is not styled as small print. */
.new-onboarding .ob-method-caution b { color: var(--text-secondary); }

.new-onboarding .ob-plan-held {
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  padding: 4px 16px;
  margin-top: 4px;
}
.new-onboarding .ob-plan-held summary {
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
}
.new-onboarding .ob-plan-held summary::-webkit-details-marker { display: none }
.new-onboarding .ob-plan-held ul { margin: 0; padding: 0 0 12px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.new-onboarding .ob-plan-held li { font-size: 13px; color: var(--text-secondary); line-height: 1.45; }

/* ---------- plan reveal: starting point and the sheet ---------- */

/* The objective's own baselines, above the plan. Numbers lead, because the
   number is the thing she recognises about her own situation; the tail is
   read second and is sized for that. */
.new-onboarding .ob-plan-starting {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  padding: 0 2px 18px;
}
.new-onboarding .ob-plan-starting-label {
  flex-basis: 100%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-hint);
}
.new-onboarding .ob-plan-stat {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
}
.new-onboarding .ob-plan-stat b {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--coral);
}

.new-onboarding .ob-plan-actions {
  display: flex;
  gap: 10px;
  padding: 18px 0 4px;
}
.new-onboarding .ob-plan-action {
  flex: 1;
  appearance: none;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: transparent;
  padding: 13px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}
.new-onboarding .ob-plan-action:active { background: var(--sand); }

/* A native dialog, so focus trapping, Escape and inert-behind come from the
   browser. ::backdrop is why it is not a positioned div. */
.new-onboarding .ob-sheet {
  width: min(560px, 100%);
  max-height: 88dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--white);
  color: var(--text-primary);
  overflow: hidden;
  /* Column, so the sticky header takes its own row and the body is the only
     thing that scrolls. The inner div used to carry the height cap, which left
     the dialog itself unbounded and long content ran off the bottom. */
  display: flex;
  flex-direction: column;
}
.new-onboarding .ob-sheet::backdrop { background: rgba(20, 16, 14, .45); }
.new-onboarding .ob-sheet-inner { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 28px; }
.new-onboarding .ob-sheet-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 12px;
  background: inherit;
}
.new-onboarding .ob-sheet-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.new-onboarding .ob-sheet-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  padding: 0 4px;
  color: var(--text-muted);
  cursor: pointer;
}
/* The care map had no styles at all until 2026-09-01. It has been on the reveal
   since 08-31 rendering with browser defaults, so its headings outweighed the
   sheet's own and its lists kept their bullets — inside a panel where every
   other list has none. Nobody had looked at it. */
.new-onboarding .ob-care-map-section { padding-top: 12px; }
.new-onboarding .ob-care-map-heading {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.new-onboarding .ob-care-map-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.new-onboarding .ob-care-map-lines li {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.new-onboarding .ob-care-map-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.new-onboarding .ob-sheet-section { padding-bottom: 22px; }
.new-onboarding .ob-sheet-section > h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.new-onboarding .ob-sheet-section > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.new-onboarding .ob-sheet-section > ul > li {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* Sits above the screen rather than over it: this flow has a fixed CTA at the
   bottom and a progress bar at the top, and a floating toast would land on one
   of them. */
.new-onboarding .ob-flash {
  margin: 0;
  padding: 12px 20px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--sand);
  border-bottom: 1px solid var(--border);
}
.new-onboarding .ob-flash-alert { color: var(--coral); }

.new-onboarding .ob-remark { display: flex; gap: 8px; align-items: center; padding-bottom: 8px; }
.new-onboarding .ob-remark .ob-text { flex: 1; min-width: 0; }
.new-onboarding .ob-decline-note {
  margin: 0;
  padding: 0 0 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-hint);
}
.new-onboarding .ob-decline form { display: flex; gap: 8px; align-items: center; padding: 0 0 12px; }
.new-onboarding .ob-decline .ob-text { flex: 1; min-width: 0; }
.new-onboarding .ob-decline-submit {
  appearance: none;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: transparent;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}

.new-onboarding .ob-swap > ul > li { display: flex; flex-direction: column; gap: 4px; }
.new-onboarding .ob-swap > ul > li b { color: var(--text-primary); font-weight: 700; }
.new-onboarding .ob-swap > ul > li i { font-style: normal; }
.new-onboarding .ob-swap-spent { margin: 0 0 10px; font-size: 13px; color: var(--text-hint); }
.new-onboarding .ob-swap-form { display: flex; gap: 8px; align-items: center; padding-top: 4px; }
.new-onboarding .ob-swap-select {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
}
.new-onboarding .ob-swap-submit {
  appearance: none;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: transparent;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}

.new-onboarding .ob-why-line {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.new-onboarding .ob-why-line:last-child { margin-bottom: 0; }
.new-onboarding .ob-sequence > ul > li b { color: var(--text-primary); font-weight: 700; }
.new-onboarding .ob-sequence-after {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ---------- paywall ---------- */
.new-onboarding .ob-paywall-heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-hint);
  margin: 4px 0 0;
}

.new-onboarding .ob-paywall-freetag {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--coral);
  padding-left: 13px;
  margin: 14px 0 6px;
}

.new-onboarding .ob-paywall-timeline {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.new-onboarding .ob-paywall-outrow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  padding-left: 13px;
}
.new-onboarding .ob-paywall-outrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
  bottom: 0;
  width: 1.5px;
  background: var(--border-hover);
}
.new-onboarding .ob-paywall-outrow:first-child::before { top: 0; border-radius: 1px 1px 0 0; }
.new-onboarding .ob-paywall-outrow:last-child::before { border-radius: 0 0 1px 1px; }
.new-onboarding .ob-paywall-outrow.free::before { background: var(--coral); }
.new-onboarding .ob-paywall-outday {
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 700;
  color: var(--coral);
  min-width: 56px;
  padding-top: 1px;
}
.new-onboarding .ob-paywall-outbody { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.new-onboarding .ob-paywall-outtext { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.new-onboarding .ob-paywall-outbar { display: block; height: 5px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.new-onboarding .ob-paywall-outbar i { display: block; height: 100%; border-radius: 999px; background: var(--coral); }
.new-onboarding .ob-paywall-outrow:not(.free) .ob-paywall-outbar i { background: var(--coral-deep); }

.new-onboarding .ob-paywall-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin: 22px 0 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.new-onboarding .ob-paywall-starrow { display: flex; gap: 2px; }
.new-onboarding .ob-paywall-starrow svg { width: 15px; height: 15px; fill: var(--coral); }
.new-onboarding .ob-paywall-starstext { font-size: 13px; color: var(--text-secondary); }
.new-onboarding .ob-paywall-starstext b { font-family: var(--font-d); font-weight: 700; color: var(--text-primary); }

.new-onboarding .ob-paywall-prices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.new-onboarding .ob-paywall-price {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  padding: 13px 14px;
}
.new-onboarding .ob-paywall-price.on { border-color: var(--coral); background: var(--coral-glow); }
.new-onboarding .ob-paywall-price-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; }
.new-onboarding .ob-paywall-price.on .ob-paywall-price-radio { border-color: var(--coral); border-width: 6px; }
.new-onboarding .ob-paywall-price-label b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; }
.new-onboarding .ob-paywall-price-label b em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--green);
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
}
.new-onboarding .ob-paywall-price-label i { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }
.new-onboarding .ob-paywall-price-value {
  font-family: var(--font-d);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.025em;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.new-onboarding .ob-paywall-price-value i { display: block; font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--text-muted); font-family: var(--font-b); }

.new-onboarding .ob-paywall-botnote { margin: 12px 0 20px; font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.4; }

/* ---------- share ---------- */
.new-onboarding .ob-share-card {
  margin: 0 0 16px;
  padding: 24px;
  border-radius: 16px;
  background: var(--sand-light);
  border: 1.5px solid var(--border);
}
.new-onboarding .ob-share-message {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
  font-style: normal;
}
.new-onboarding .ob-share-privacy {
  font-size: 12.5px;
  color: var(--text-hint);
  text-align: center;
  margin: 0 0 20px;
}
.new-onboarding .ob-share-targets { display: flex; gap: 10px; margin-bottom: 8px; }
.new-onboarding .ob-share-target {
  flex: 1;
  text-align: center;
  padding: 13px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  background: var(--white);
}
.new-onboarding .ob-share-target:hover { border-color: var(--border-hover); background: var(--sand-light) }

/* "Full bleed coral, which is the register the app already uses when it
   stops asking and starts telling" — the prototype's own reasoning for the
   one screen (share) that inverts to a solid coral background instead of
   the cream every other screen uses. */
.new-onboarding .ob-screen--coral {
  background: linear-gradient(168deg, var(--coral), var(--coral-deep));
}
.new-onboarding .ob-screen--coral .ob-back {
  border-color: rgba(255, 255, 255, .38);
  background: transparent;
  color: #fff;
}
.new-onboarding .ob-screen--coral .ob-back svg { color: #fff; }
.new-onboarding .ob-screen--coral .ob-progress { background: rgba(255, 255, 255, .24); }
.new-onboarding .ob-screen--coral .ob-progress-fill { background: #fff; }
.new-onboarding .ob-screen--coral .ob-progress-pct { color: rgba(255, 255, 255, .72); }
.new-onboarding .ob-screen--coral .ob-eyebrow { color: rgba(255, 255, 255, .82); }
.new-onboarding .ob-screen--coral .ob-question { color: #fff; }
.new-onboarding .ob-screen--coral .ob-context { color: rgba(255, 255, 255, .84); }
.new-onboarding .ob-screen--coral .ob-continue {
  background: #fff;
  color: var(--coral-deep);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
}
.new-onboarding .ob-screen--coral .ob-continue-secondary { color: rgba(255, 255, 255, .8); }
.new-onboarding .ob-screen--coral .ob-share-card { background: rgba(255, 255, 255, .16); border-color: transparent; }
.new-onboarding .ob-screen--coral .ob-share-message { color: #fff; }
.new-onboarding .ob-screen--coral .ob-share-privacy { color: rgba(255, 255, 255, .74); }
.new-onboarding .ob-screen--coral .ob-share-target {
  background: rgba(255, 255, 255, .92);
  border-color: transparent;
}

/* ---------- select-then-set (bodymap / symptoms / assistfreq) ----------
   A choice card whose severity/frequency control lives just under it,
   revealed by onboarding--steps--severity-group when its checkbox is
   checked (the control's own [disabled] state, toggled by that same
   controller, is what keeps an unselected item out of the submitted
   value — no server-side filtering needed). */
.new-onboarding .ob-choice-icon {
  width: auto;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}
.new-onboarding .ob-severity {
  margin: -2px 0 8px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--sand-light);
}
.new-onboarding .ob-severity[hidden] { display: none; }
.new-onboarding .ob-severity-value {
  display: block;
  text-align: center;
  font-family: var(--font-d);
  font-size: 28px;
  font-weight: 700;
  color: var(--coral);
  line-height: 1;
  margin-bottom: 8px;
}
.new-onboarding .ob-severity-input {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--coral) var(--fill, 0%), var(--slider-track) var(--fill, 0%));
  outline: none;
  margin-bottom: 8px;
}
.new-onboarding .ob-severity-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--coral);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.new-onboarding .ob-severity-input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--coral);
  cursor: pointer;
}
.new-onboarding .ob-severity-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-hint);
}
.new-onboarding .ob-frequency-select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-b);
  font-size: 14px;
  background: var(--white);
  color: var(--text-primary);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236F6B67' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.new-onboarding .ob-frequency-select:focus { border-color: var(--coral); outline: none; }

/* ---------- reveal-if-any group (bloodq's colour/amount axes) ---------- */
.new-onboarding .ob-reveal-group { margin-top: 20px; }
.new-onboarding .ob-reveal-group[hidden] { display: none; }
.new-onboarding .ob-reveal-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-hint);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 8px;
}
/* Colour swatch dot for bloodq's colour options — reuses .ob-choice's own
   layout, just shows a colour dot instead of the usual radio indicator
   (colour communicates the choice directly, matching how the legacy screen
   keeps a filled circle rather than a plain radio here). */
.new-onboarding .ob-choice-color::before { content: none; }
.new-onboarding .ob-choice-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- trust (the welcome screen's credibility block) ---------- */
.new-onboarding .ob-screen[data-testid="screen-welcome"] .ob-body { justify-content: flex-start; }
.new-onboarding .ob-trust-lines { margin-bottom: 20px; }
.new-onboarding .ob-trust-line {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 6px;
}

/* Rotating single-term "typewriter" per line — ported from the artifact's
   own pure-CSS technique (onboarding-30.html), tuned for its exact 6-term
   arrays. Every word stays in the DOM; only opacity/width move, so this
   degrades to the first word, statically, under prefers-reduced-motion. */
.new-onboarding .ob-trust-typing { position: relative; display: inline-block; color: var(--coral); font-weight: 600; }
.new-onboarding .ob-trust-typing-word { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; }
.new-onboarding .ob-trust-typing-sizer { visibility: hidden; }
.new-onboarding .ob-trust-typing-max { position: static; display: inline-block; }
.new-onboarding .ob-trust-typing-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--coral);
}
@keyframes ob-typshow { 0%, 16.4% { opacity: 1 } 16.5%, 100% { opacity: 0 } }
@keyframes ob-typtype { 0% { width: 0 } 7%, 100% { width: 100% } }
@keyframes ob-typcar { 50% { border-right-color: transparent } }
@media (prefers-reduced-motion: reduce) {
  .new-onboarding .ob-trust-typing-word,
  .new-onboarding .ob-trust-typing-fill { animation: none !important; }
  .new-onboarding .ob-trust-typing-word { opacity: 0; }
  .new-onboarding .ob-trust-typing .ob-trust-typing-word:first-of-type { opacity: 1; }
  .new-onboarding .ob-trust-typing-fill { width: auto; border-right-color: transparent; }
}
.new-onboarding .ob-trust-items {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.new-onboarding .ob-trust-items li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.new-onboarding .ob-trust-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
}
.new-onboarding .ob-trust-close {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 20px;
}
.new-onboarding .ob-trust-foot {
  font-size: 12px;
  color: var(--text-hint);
  text-align: center;
  margin: 0;
}

/* ---------- day one ---------- */
.new-onboarding .ob-day-one .ob-body { justify-content: center; text-align: center; }
.new-onboarding .ob-day-one .ob-context { margin-bottom: 4px; }
.new-onboarding .ob-day-one-answers { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.new-onboarding .ob-day-one-answers .ob-continue,
.new-onboarding .ob-day-one-answers .ob-continue-secondary { margin: 0; }

/* Grouped initial questionnaire uses the same Gs surfaces and controls as Plan. */
.gs-onboarding-topic { max-width: 680px; margin: 0 auto; padding: 24px 20px 48px; color: var(--gs-text-primary, #292524); }
.gs-onboarding-heading { margin: 0 0 24px; }
.gs-onboarding-heading h1 { font-size: clamp(26px, 5vw, 34px); line-height: 1.15; font-weight: 700; margin: 8px 0 14px; letter-spacing: -.025em; }
.gs-onboarding-heading p, .gs-onboarding-hint { font-size: 14px; line-height: 1.55; color: var(--gs-text-secondary, #645c55); }
.gs-onboarding-kicker { text-transform: uppercase; letter-spacing: .1em; font-size: 11px !important; font-weight: 700; }
.gs-onboarding-field { border: 0; min-width: 0; padding: 20px 0; margin: 0; }
.gs-onboarding-field + .gs-onboarding-field { border-top: 1px solid var(--gs-border, #e6ded5); }
.gs-onboarding-field legend { font-weight: 600; font-size: 16px; line-height: 1.5; padding: 0; margin-bottom: 8px; }
.gs-onboarding-field select, .gs-onboarding-field input[type=number], .gs-onboarding-field input[type=text], .gs-onboarding-field textarea { display: block; width: 100%; min-height: 46px; border: 1px solid var(--gs-border, #d6ccc1); border-radius: 10px; background: var(--gs-card, #fff); color: var(--gs-text-primary, #292524); padding: 10px 12px; font: inherit; margin: 8px 0; }
.gs-onboarding-field input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--gs-coral, #ed6b5a); }
.gs-onboarding-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gs-onboarding-options label { display: flex; align-items: center; gap: 10px; padding: 10px; min-height: 46px; border: 1px solid var(--gs-border, #e6ded5); border-radius: 10px; font-size: 14px; line-height: 1.4; }
.gs-onboarding-options label:has(input:checked) { border-color: var(--gs-coral, #ed6b5a); background: var(--gs-coral-glow, #fff1eb); }
.gs-onboarding-inline-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr); align-items: center; gap: 12px; font-size: 14px; }
.gs-onboarding-details { border-top: 1px solid var(--gs-border, #e6ded5); padding-top: 16px; }
.gs-onboarding-details summary { cursor: pointer; font-weight: 600; padding: 12px 0; }
.gs-onboarding-none { display: flex; gap: 10px; align-items: center; padding: 12px 0; }
.gs-onboarding-error { border-left: 3px solid var(--gs-red, #b42318); background: var(--gs-card, #fff); padding: 14px; margin-bottom: 16px; }
.gs-onboarding-topic :focus-visible { outline: 3px solid var(--gs-coral, #ed6b5a); outline-offset: 3px; }
.gs-onboarding-fields [hidden] { display: none !important; }
@media (max-width: 420px) { .gs-onboarding-options { grid-template-columns: 1fr; } .gs-onboarding-topic { padding: 20px 16px 36px; } }

.gs-onboarding-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.new-onboarding .gs-onboarding-screen { max-width: 720px; background: var(--gs-sand); color: var(--gs-text-primary); border-radius: 24px; }
.gs-onboarding-screen .gs-onboarding-topic { width: 100%; flex: 1; min-height: 0; overflow-y: auto; }
.gs-onboarding-screen .ob-top { padding-bottom: 12px; }
.gs-onboarding-screen .ob-top, .gs-onboarding-screen .ob-back { color: var(--gs-text-primary); background: var(--gs-sand); }
.gs-onboarding-screen .ob-progress-pct { color: var(--gs-text-secondary); }
.gs-onboarding-screen .ob-question, .gs-onboarding-screen .ob-recap-heading { color: var(--gs-text-primary); }
.gs-onboarding-screen .ob-body { background: var(--gs-sand); }
@media (max-width: 499px) { .new-onboarding .gs-onboarding-screen { border-radius: 0; } }