/* =================================================================
   Seller onboarding wizard — pre-signup pages.
   Maps the Claude Design handoff bundle's `styles.css` onto our
   existing marketing tokens so the HTML class names from the
   handoff translate 1:1 to ERB. Also covers Step-3 (valuation
   reveal) layout, which the bundle didn't include.
   ================================================================= */

* { box-sizing: border-box; }

.onboarding-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-gray-50);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
  color: var(--base-text);
}
/* Signed-in seller theme — light mint page background (#F1F7F5) so the whole
   4-step wizard reads as one consistent surface. Light mode only: dark mode
   already uses the plain --base-bg-base for both flows, so no dark-mode
   change is needed here. */
.onboarding-body.onb-theme--dashboard { background: #F1F7F5; }

/* ---------- HORIZONTAL STEPPER (new funnel) ---------- */
.onb-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 24px 18px;
  gap: 0;
}
.onb-stepper__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.onb-stepper__node {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gray-300);
  background: #fff;
  color: var(--base-text-tertiary);
  font-size: var(--text-sm); font-weight: var(--fw-bold);
  display: grid; place-items: center;
  transition: background .2s, border-color .2s, color .2s;
}
.onb-stepper__item.is-done .onb-stepper__node {
  background: var(--color-brand-green);
  border-color: var(--color-brand-green);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(31, 94, 58, 0.12);
}
.onb-stepper__item.is-active .onb-stepper__node {
  background: var(--color-brand-green);
  border-color: var(--color-brand-green);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(31, 94, 58, 0.12);
}
.onb-stepper__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--base-text-tertiary);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.onb-stepper__item.is-active .onb-stepper__label {
  color: var(--color-brand-green);
}
.onb-stepper__connector {
  flex: 1;
  height: 1.5px;
  background: var(--color-gray-300);
  margin: 0 4px;
  margin-bottom: 18px;
  min-width: 24px;
}

/* New centered funnel shell (replaces sidebar shell for redesigned steps) */
.onb-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 64px;
}
.onb-card {
  background: #fff;
  border: 1px solid var(--base-border-tertiary);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(10,31,20,.04), 0 1px 3px rgba(10,31,20,.04);
  overflow: hidden;
}
.onb-card .onb-eyebrow {
  font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--base-text-tertiary);
  margin-bottom: 8px;
}
.onb-card .onb-title {
  font-size: var(--text-3xl); font-weight: var(--fw-bold); letter-spacing: -0.02em;
  color: var(--color-gray-950); margin: 0 0 6px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.onb-card .onb-sub {
  font-size: var(--text-md); color: var(--base-text-secondary); margin: 0;
}
.onb-head { padding: 36px 44px 8px; }
.onb-body { padding: 16px 44px 8px; }
.onb-foot {
  padding: 16px 44px 28px;
  display: flex; align-items: center; gap: 12px; justify-content: flex-end;
  border-top: 1px solid var(--base-border-tertiary);
  margin-top: 8px;
}
.onb-foot .onb-foot__left { margin-right: auto; }

/* Step icon badge */
.onb-icon-badge {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: #e8f0ea;
  color: var(--color-brand-green);
  display: grid; place-items: center;
  margin-bottom: 20px;
}

/* Helper / callout box */
.onb-helper {
  background: #e8f0ea;
  border-left: 3px solid var(--color-brand-green);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: var(--text-base);
  color: var(--color-gray-800);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* ---------- CONNECT PAGE (step 1 — location picker) ---------- */

/* Error banner */
.onb-alert-error {
  display: flex; align-items: center; gap: 8px;
  background: #fef2f2; border: 1px solid #fca5a5;
  border-radius: 12px; padding: 10px 14px;
  font-size: var(--text-base); color: #b91c1c;
  margin-bottom: 16px;
}

/* Exact location card */
.connect-exact-card {
  border: 1.5px solid var(--base-border-secondary);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.connect-exact-card.is-active {
  border-color: var(--color-brand-green, #14422a);
  box-shadow: 0 0 0 1px var(--color-brand-green, #14422a);
}
.connect-exact-card__header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
}
.connect-exact-card__title {
  font-size: var(--text-lg); font-weight: var(--fw-semibold);
  color: var(--base-text-primary);
  margin-bottom: 2px;
}
.connect-exact-card__desc {
  font-size: var(--text-base); color: var(--base-text-tertiary);
}

/* Circular icon badge for exact location */
.connect-location-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #e8f0ea;
  color: var(--color-brand-green);
  display: grid; place-items: center;
  flex: 0 0 44px;
}

/* Privacy strip — below exact card */
.connect-privacy-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--color-gray-50);
  border: 1px solid var(--base-border-tertiary);
  border-radius: 14px;
}
.connect-privacy-strip__icon {
  color: var(--base-text-tertiary);
  flex: 0 0 auto;
}
.connect-privacy-strip__text {
  flex: 1; min-width: 0;
}
.connect-privacy-strip__label {
  font-size: var(--text-md); font-weight: var(--fw-semibold);
  color: var(--base-text-primary);
  display: block;
}
.connect-privacy-strip__desc {
  font-size: var(--text-base); color: var(--base-text-tertiary);
  display: block;
}
@media (max-width: 560px) {
  .connect-privacy-strip { flex-wrap: wrap; }
  .connect-privacy-strip .onb-btn { width: 100%; text-align: center; }
}

/* "← Use exact location instead" link in prox view */
.connect-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-md); font-weight: var(--fw-medium);
  color: var(--color-brand-green);
  background: none; border: none; padding: 0;
  cursor: pointer; margin-bottom: 14px;
}
.connect-back-link:hover { text-decoration: underline; }

/* Badge used in prox view heading */
.connect-panel__badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  background: #d1fae5; color: #065f46;
  border-radius: 20px; padding: 2px 8px;
  vertical-align: middle;
}

/* Proximity area card */
.connect-prox-card {
  border: 1.5px solid var(--base-border-secondary);
  border-radius: 16px;
  padding: 20px;
}
.connect-prox-card.is-active {
  border-color: var(--color-brand-green, #14422a);
  box-shadow: 0 0 0 1px var(--color-brand-green, #14422a);
}

/* Radius toggle row */
.connect-radius {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px; flex-wrap: wrap;
}
.connect-radius__label {
  font-size: var(--text-base); color: var(--base-text-secondary);
  white-space: nowrap; margin-right: 2px;
}
.connect-radius__btn {
  border: 1px solid var(--base-border-secondary);
  background: #fff;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: var(--text-base); font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.connect-radius__btn.is-selected {
  border-color: var(--color-brand-green, #14422a);
  background: #eef5ef;
  color: var(--color-brand-green, #14422a);
}
.connect-radius__btn:hover:not(.is-selected) {
  border-color: var(--base-border-primary);
}

/* Privacy note at bottom of prox card */
.connect-prox-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--base-border-tertiary);
  font-size: var(--text-base); color: var(--base-text-secondary);
  line-height: 1.5;
}
.connect-prox-note svg {
  color: var(--color-brand-green);
  flex: 0 0 auto;
  margin-top: 1px;
}

/* Muted/disabled Continue button */
.onb-btn--muted {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- WIZARD TOP NAV ---------- */
.onboarding-nav {
  position: sticky; top: 0; z-index: 30;
  height: 64px; background: #fff;
  border-bottom: 1px solid var(--base-border-tertiary);
  display: flex; align-items: center; padding: 0 24px;
}
.onboarding-nav__inner {
  max-width: 1440px; width: 100%; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px;
}
.onboarding-nav__logo { display: flex; align-items: center; gap: 8px; height: 28px; text-decoration: none; }
.onboarding-nav__logo img { height: 28px; }
.onboarding-nav__center {
  justify-self: center;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.onboarding-nav__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 1px;
}
.onboarding-nav__exit {
  font-size: var(--text-md);
  color: var(--base-text-secondary);
  text-decoration: none;
  font-weight: var(--fw-medium);
  /* reset button element styles */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.onboarding-nav__exit:hover { color: var(--color-gray-950); }
.onboarding-nav__exit--center {
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: var(--base-text-secondary);
  text-decoration: none;
  letter-spacing: 0.01em;
  /* reset button element styles */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.onboarding-nav__exit--center:hover { color: var(--color-gray-950); }

/* Step-dots indicator (used on step 3) */
.step-dots { display: inline-flex; gap: 6px; }
.step-dots .dot { display: inline-block; width: 18px; height: 4px; border-radius: 2px; background: var(--color-gray-300); }
.step-dots .dot.is-on { background: var(--color-gray-950); }

.onboarding-main { width: 100%; }

/* ---------- WIZARD SHELL (sidebar + main) ---------- */
.shell {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 32px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px clamp(16px, 3vw, 40px) 64px;
  align-items: start;
}
.shell .main-col {
  min-width: 0;
}
.vp-topstep { display: none; }
@media (max-width: 880px) {
  /* Full-bleed sheet: no page gutters — the wizard is a white "screen", not a
     floating card on a page (see the card rules below). */
  .shell { grid-template-columns: 1fr; gap: 0; padding: 0; }
  /* Mobile: the heavy desktop rail is replaced by a compact top stepper. */
  .shell .progress-col { display: none; }
  .vp-topstep {
    display: block;
    position: sticky;
    /* Dock under the sticky 64px onboarding nav — with top: 0 it slides
       beneath the nav (z 6 vs 30) and reads as "the progress bar disappears". */
    top: 64px;
    z-index: 6;
    background: #fff;
    border-bottom: 1px solid #ececec;
    margin: 0;
    padding: 10px 16px;
  }
  .vp-topstep__segs { display: flex; gap: 6px; margin-bottom: 6px; }
  .vp-topstep__seg { flex: 1; height: 5px; border-radius: 99px; background: #e5e7eb; }
  .vp-topstep__seg.is-on { background: var(--color-brand-green, #1f5e3a); }
  .vp-topstep__meta {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-brand-green, #1f5e3a);
  }

  /* Sticky action bar — dock the wizard footer (Back / Save / Continue) to the
     bottom, in the thumb zone, with a top hairline + lift shadow. The footer already
     stacks (Continue full-width) at ≤520; this keeps it pinned as the form scrolls. */
  .onboarding-card .card-foot.card-foot--wizard {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #fff;
    border-top: 1px solid #ececec;
    box-shadow: 0 -6px 18px rgba(10, 31, 20, 0.06);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }

  /* App-like sticky chrome on phones: nav (already sticky) > steps bar (docked
     under it above) > compact step header (eyebrow + title + sub-step counter;
     the long description is web-only) > content scrolls > Back/Continue footer
     docked at the bottom. overflow must be visible here: the card's
     overflow: hidden makes every sticky descendant inert — it's why the
     footer's sticky above never engaged and Continue had to be scrolled to.
     The card itself flattens into a full-bleed white sheet (no border/radius/
     shadow) so the wizard reads as an app screen, not a card on a page. */
  /* Extra class in the selector: the base `.onboarding-card { overflow: hidden }`
     sits LATER in this file, so an equal-specificity override here would lose. */
  .onboarding-body .onboarding-card {
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* Fill the screen below the nav + steps bar so the footer sits at the
       bottom even on short steps: the sheet reads as a full app screen, and
       the card's flex column + the growing body push the footer down. */
    min-height: calc(100vh - 119px);
    min-height: calc(100dvh - 119px);
  }
  .onboarding-body .onboarding-card .card-body { flex: 1 1 auto; }
  /* .onboarding-body prefix throughout: the base card rules later in the file
     would out-order equal-specificity overrides here (same trap as overflow). */
  .onboarding-body .onboarding-card .card-head {
    position: sticky;
    top: 108px; /* 64px nav + compact steps bar (49px), tucked 5px under it */
    z-index: 4;
    background: #fff;
    padding: 10px 16px 12px;
  }
  .onboarding-body .onboarding-card .card-head .card-eyebrow { font-size: var(--text-sm); margin-bottom: 3px; }
  .onboarding-body .onboarding-card .card-head .card-title { font-size: var(--text-2xl); margin: 0; }
  .onboarding-body .onboarding-card .card-head .card-sub { display: none; }
  /* Same 16px breathing room on every side of the scrolling content — the gap
     under the header equals the gap above the footer. */
  .onboarding-body .onboarding-card .card-body { padding: 16px; }

  /* Native app: the web logo bar (64px .onboarding-nav) isn't rendered — pushed
     screens get the native toolbar instead — so every sticky offset shifts up. */
  .onboarding-body.is-native .vp-topstep { top: 0; }
  .onboarding-body.is-native .onboarding-card .card-head { top: 44px; }
  .onboarding-body.is-native .onboarding-card {
    min-height: calc(100vh - 55px);
    min-height: calc(100dvh - 55px);
  }
  /* The native center FAB pokes ~30px up into the WebView bottom — keep the
     wizard picker sheets' last rows clear of it. */
  .onboarding-body.is-native .vp-sheet {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
  /* Same clearance for the docked footer: without it the centered
     "Save for later" link sits under the FAB. */
  .onboarding-body.is-native .onboarding-card .card-foot.card-foot--wizard {
    padding-bottom: calc(44px + env(safe-area-inset-bottom));
  }
}

/* Narrow centered shell — used on the final confirmation step where
   no progress sidebar is shown and the card should sit comfortably
   at reading width rather than spanning the viewport. */
.shell--narrow {
  display: block;
  max-width: 560px;
  padding: 32px 24px 64px;
}

/* ---------- PROGRESS RAIL ---------- */
.rail {
  position: sticky; top: 88px;
  background: #fff;
  border: 1px solid var(--base-border-tertiary);
  border-radius: 18px;
  padding: 22px 22px 20px;
  box-shadow:
    0 1px 0 rgba(10, 31, 20, 0.04),
    0 4px 24px rgba(10, 31, 20, 0.06);
}
.rail h6 {
  margin: 0 0 4px;
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--base-text-tertiary);
}
.rail-eyebrow {
  font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .12em;
  text-transform: uppercase; color: var(--base-text-tertiary);
  margin-bottom: 4px;
}
.rail-title {
  font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--color-gray-950);
  margin: 0 0 16px; letter-spacing: -0.02em;
}
.rail-progress { height: 4px; background: var(--color-gray-100); border-radius: 999px; overflow: hidden; margin-bottom: 24px; }
.rail-progress > span { display: block; height: 100%; background: var(--color-brand-green); transition: width .4s cubic-bezier(.4,0,.2,1); }
.rail-divider { border: 0; border-top: 1px solid var(--base-border-tertiary); margin: 18px 0; }

.rail-step {
  display: flex; gap: 12px; padding: 12px 10px;
  border-radius: 12px; cursor: default;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.rail-step.is-clickable { cursor: pointer; }
.rail-step.is-clickable:hover { background: var(--color-gray-50); border-color: var(--base-border-tertiary); }
.rail-step.is-clickable:focus-visible { outline: 2px solid var(--color-brand-green); outline-offset: 2px; }
.rail-step.current {
  background: var(--color-gray-950);
  border-radius: 16px;
  padding: 14px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.rail-step.current .step-title { color: #fff; }
.rail-step.current .step-meta  { color: rgba(255,255,255,.65); }
.rail-step.done .step-bullet { background: var(--color-brand-green); color: #fff; border-color: var(--color-brand-green); }
.rail-step.current .step-bullet { background: #fff; color: var(--color-gray-950); border-color: #fff; }
.onboarding-body.onb-theme--dashboard .rail-step.current { background: var(--color-brand-green); }
.onboarding-body.onb-theme--dashboard .rail-step.current .step-bullet { color: var(--color-brand-green); }

.step-bullet {
  flex: 0 0 24px; height: 24px; border-radius: 999px;
  border: 1.5px solid var(--color-gray-300);
  background: #fff; color: var(--base-text-tertiary);
  display: grid; place-items: center;
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  margin-top: 2px;
}
.step-bullet svg { width: 14px; height: 14px; }
.step-body { flex: 1; min-width: 0; }
.step-title { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--color-gray-800); margin: 0 0 2px; }
.step-meta { font-size: var(--text-sm); color: var(--base-text-tertiary); }

.rail-summary-block { margin-top: 6px; }
.rail-summary-block + .rail-summary-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--base-border-tertiary); }
.rail-summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rail-summary-head h6 { margin: 0; }
.rail-summary { font-size: var(--text-sm); color: var(--base-text-tertiary); }
.rail-summary .row { display: flex; justify-content: space-between; padding: 4px 0; gap: 12px; }
.rail-summary .row b { color: var(--color-gray-900); font-weight: var(--fw-semibold); text-align: right; }
.rail-summary .row.estimate { padding-top: 10px; border-top: 1px solid var(--base-border-tertiary); margin-top: 6px; }
.rail-summary .row.estimate b { color: var(--color-brand-green); }
/* Shared .estimate-disclaimer, sized down for the rail's narrow column. */
.rail-disclaimer { margin-top: 6px; font-size: var(--text-xs); line-height: 1.45; }
.rail-edit {
  font-size: var(--text-sm); color: var(--base-text-secondary);
  text-decoration: underline; text-underline-offset: 3px;
}
.rail-edit:hover { color: var(--color-gray-950); }

/* ---------- MAIN CONTENT ---------- */
.main-col { min-width: 0; }

/* ---------- CARD ---------- */
/* Main wizard shell — must clip children so corners stay round (form = .onboarding-card on seller steps). */
.onboarding-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--base-border-tertiary);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(10, 31, 20, 0.05),
    0 8px 32px rgba(10, 31, 20, 0.07);
}
.onboarding-card .card-head {
  padding: 28px 32px 20px;
  background: #fff;
  border-bottom: 1px solid var(--base-border-tertiary);
}
.onboarding-card .card-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--base-text-tertiary);
  margin-bottom: 10px;
}
.card-eyebrow {
  font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-brand-green, #14422a);
  margin-bottom: 10px;
}
.card-title { font-size: clamp(22px, 2.5vw, 30px); font-weight: var(--fw-bold); letter-spacing: -0.03em; line-height: 1.18; margin: 0 0 8px; color: var(--color-gray-950); }
.card-sub { font-size: var(--text-lg); line-height: 1.55; color: var(--base-text-secondary); margin: 0; }
.onboarding-card .card-body { padding: 24px 32px 28px; }
.onboarding-card .card-foot {
  padding: 18px 32px 26px;
  display: flex; flex-wrap: wrap; gap: 12px 16px;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid var(--base-border-tertiary);
  margin-top: 0;
  background: var(--color-gray-50);
}
.onboarding-card .card-foot .left {
  margin-right: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.onb-link-quiet {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--base-text-tertiary);
  text-decoration: none;
  padding: 6px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.onb-link-quiet:hover { color: var(--color-gray-950); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) {
  .onboarding-card .card-foot:not(.card-foot--wizard) {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .onboarding-card .card-foot:not(.card-foot--wizard) .left {
    margin-right: 0;
    width: 100%;
    justify-content: space-between;
  }
  .onboarding-card .card-foot:not(.card-foot--wizard) .onb-btn--primary { width: 100%; }
}

/* Seller wizard footer — matches reference: Back | Save for later | Continue → */
.onboarding-card .card-foot.card-foot--wizard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 20px;
  background: #fff;
}
.card-foot--wizard .card-foot__start { justify-self: start; }
.card-foot--wizard .card-foot__mid { justify-self: center; }
.card-foot--wizard .card-foot__end { justify-self: end; }
@media (max-width: 560px) {
  .onboarding-card .card-foot.card-foot--wizard {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .card-foot--wizard .card-foot__start { order: 2; justify-self: start; }
  .card-foot--wizard .card-foot__mid { order: 3; justify-self: stretch; }
  .card-foot--wizard .card-foot__mid .onb-btn--outline { width: 100%; }
  .card-foot--wizard .card-foot__end { order: 1; justify-self: stretch; }
  .card-foot--wizard .card-foot__end .onb-btn--primary { width: 100%; }

  /* Seller steps (card-foot--wizard-compact): match the mobile design — square
     icon-only Back beside a full-width Continue on one row, "Save for later" as
     a plain text link centered below. Buyer onboarding keeps the stacked layout
     above (its start button carries text like "Skip for now"). */
  /* Must out-rank `.onboarding-card .card-foot.card-foot--wizard` above. */
  .onboarding-card .card-foot.card-foot--wizard-compact { grid-template-columns: auto minmax(0, 1fr); }
  .card-foot--wizard-compact .card-foot__start { order: 1; }
  .card-foot--wizard-compact .card-foot__end { order: 2; justify-self: stretch; }
  .card-foot--wizard-compact .card-foot__mid { order: 3; grid-column: 1 / -1; justify-self: center; }
  .card-foot--wizard-compact .card-foot__start .onb-btn--link {
    width: 52px; height: 52px; padding: 0; justify-content: center;
    border: 1.5px solid #e5e5e5; border-radius: 14px; background: #fff;
    /* font-size 0 hides the "Back" text node visually; it stays readable to
       screen readers, and the chevron below is sized back up explicitly. */
    color: #0a0a0a; font-size: 0;
  }
  .card-foot--wizard-compact .card-foot__start .onb-ic { width: 20px; height: 20px; }
  .card-foot--wizard-compact .card-foot__end .onb-btn--primary {
    height: 52px; border-radius: 14px; font-size: var(--text-lg); font-weight: var(--fw-bold);
  }
  .card-foot--wizard-compact .card-foot__mid .onb-btn--outline {
    width: auto; height: auto; border: 0; background: none; box-shadow: none;
    padding: 2px 8px; font-size: var(--text-base); font-weight: var(--fw-medium);
    color: var(--base-text-tertiary, #737373);
  }
}

/* Grouped fields — soft panel inside the card */
.onb-form-panel {
  background: var(--color-gray-50);
  border: 1px solid var(--base-border-tertiary);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.onb-form-panel .field { margin-bottom: 0; }
.onb-form-panel:last-child { margin-bottom: 0; }

/* Grid gap handles spacing — cancel the field's own bottom margin. */
.onboarding-card .onb-basics-grid .field { margin-bottom: 0; }
.onboarding-card .onb-basics-grid .field-error { margin-top: 6px; }

/* Tighter rows + no height-stretching on all wizard grids */
.onboarding-card .field-grid-2,
.onboarding-card .field-grid-3 {
  align-items: start;
  row-gap: 12px;
}
.onboarding-card .onb-basics-grid {
  gap: 16px 28px;
}

/* ---------- FORM ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field > label { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--color-gray-800); }
.field > label.onb-label-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.onb-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--base-text-tertiary);
  cursor: pointer;
  line-height: 0;
}
.onb-info:hover, .onb-info:focus-visible { color: var(--color-gray-800); outline: none; }
.onb-info__icon { width: 14px; height: 14px; }
.onb-info__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-gray-950);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 10px;
  border-radius: 6px;
  width: max-content;
  max-width: 260px;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .1s ease;
  z-index: 20;
}
.onb-info__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--color-gray-950);
}
.onb-info:hover .onb-info__bubble,
.onb-info:focus-visible .onb-info__bubble {
  opacity: 1;
  visibility: visible;
}
.field .hint { font-size: var(--text-sm); color: var(--base-text-tertiary); }

/* Exact/Approximate location toggle — Step 1, shared by both the anonymous
   funnel and the signed-in dashboard flow (see location.html.erb). */
.onb-loc-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 2px; padding: 3px; border-radius: 10px;
  background: var(--color-gray-100); width: 100%; margin-bottom: 10px;
}
.onb-loc-seg__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; border: none; border-radius: 7px; background: transparent;
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--base-text-tertiary); cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s, box-shadow .15s;
}
.onb-loc-seg__btn.is-selected {
  background: var(--base-bg-low, #fff); color: var(--base-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .07), 0 0 0 0.5px rgba(15, 23, 42, .06);
}
.onb-loc-seg__btn.is-selected svg { color: var(--color-brand-green); }

/* Place confirmation chip — replaces the search input once a place is
   picked, so the field reads as "done" instead of a plain filled text
   input. See location.js for the collapse/expand behavior. */
.onb-place-chip[hidden] { display: none; }
.onb-place-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--color-brand-green), transparent 70%);
  background: color-mix(in oklab, var(--color-brand-green), transparent 94%);
}
.onb-place-chip__pin { display: flex; color: var(--color-brand-green); flex: 0 0 auto; }
.onb-place-chip__name {
  flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--base-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.onb-place-chip__change {
  flex: 0 0 auto; border: none; background: transparent; padding: 0;
  font: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--color-brand-green); cursor: pointer; text-decoration: underline;
}

/* Small reassurance line under the location fields. */
.onb-trust-note {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 16px;
  font-size: var(--text-sm); color: var(--base-text-tertiary);
}
.onb-trust-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--color-brand-green); }
/* minmax(0, 1fr), not bare 1fr: a bare 1fr track's min is the items' min-content,
   so a wide control (num-stepper, picker button) silently grows the track past the
   card and gets clipped by the card's overflow:hidden on phones. */
.field-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field-grid-2 .field { margin-bottom: 0; }
.field-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.field-grid-3 .field { margin-bottom: 0; }
@media (max-width: 600px) {
  .field-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .field-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Practice-info: specialty + 2 counts in one tight row */
.pi-field-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 16px; align-items: start; max-width: 620px; }
@media (max-width: 640px) { .pi-field-row { grid-template-columns: 1fr; max-width: none; } }

/* Constrain specialty type to match one column of the field-grid-2 below */
.pi-field-specialty { max-width: calc(50% - 8px); }
@media (max-width: 600px) { .pi-field-specialty { max-width: none; } }

/* Practice-info: section divider between type and scale fields */
.pi-divider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.pi-divider-row::before,
.pi-divider-row::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--base-border-tertiary);
}
.pi-divider-label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--base-text-tertiary);
  white-space: nowrap;
}

/* Practice-info: privacy callout below the form panel */
.pi-listing-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 13px 15px;
  background: color-mix(in oklab, var(--color-brand-green), transparent 93%);
  border: 1px solid color-mix(in oklab, var(--color-brand-green), transparent 70%);
  border-radius: 14px;
  font-size: var(--text-base);
  line-height: 1.55;
  color: #166534;
}
.pi-listing-note__icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin-top: 2px;
  color: var(--color-brand-green);
}

/* Practice info — chairs/doctors: compact picker (JS-enhanced) */
.onb-compact-select {
  position: relative;
}
.onb-compact-select:not(.onb-compact-select--ready) .onb-compact-select__trigger,
.onb-compact-select:not(.onb-compact-select--ready) .onb-compact-select__menu {
  display: none;
}
.onb-compact-select--ready .onb-compact-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.onb-compact-select__native {
  width: 100%;
}
.onb-compact-select__trigger.onb-select {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  color: var(--base-text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.onb-compact-select__trigger.onb-select:hover {
  background-color: var(--color-gray-50);
}
.onb-compact-select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}
.onb-compact-select__chev {
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.onb-compact-select__trigger[aria-expanded="true"] .onb-compact-select__chev {
  transform: rotate(180deg);
  opacity: 0.85;
}
/* Absolute fallback before JS; open menus use --floating + fixed coords in JS */
.onb-compact-select__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 200;
  margin: 0;
  background: #fff;
  border: 1px solid var(--border-secondary, var(--base-border-tertiary));
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 4px;
  overflow: hidden;
}
.onb-compact-select__menu.onb-compact-select__menu--floating {
  z-index: 10050;
}
/* Vertical list — compact type, calm selection (no loud fill) */
.onb-compact-select__panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: min(46vh, 240px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.onb-compact-select__panel::-webkit-scrollbar {
  width: 5px;
}
.onb-compact-select__panel::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--color-gray-400), transparent 45%);
  border-radius: 999px;
}
.onb-compact-select__opt {
  border: 0;
  border-radius: 8px;
  background: transparent;
  margin: 0;
  width: 100%;
  padding: 7px 12px;
  min-height: 34px;
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-gray-700);
  transition: background 0.12s ease, color 0.12s ease;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
.onb-compact-select__opt:hover {
  background: var(--color-gray-50);
  color: var(--color-gray-950);
}
.onb-compact-select__opt:focus-visible {
  outline: none;
  background: var(--color-gray-100);
  color: var(--color-gray-950);
}
.onb-compact-select__opt.is-selected {
  background: var(--color-gray-100);
  color: var(--color-gray-950);
  font-weight: var(--fw-semibold);
}
.onb-compact-select__opt.is-selected:hover {
  background: color-mix(in oklab, var(--color-gray-100), var(--color-gray-200) 35%);
  color: var(--color-gray-950);
}
@media (max-width: 480px) {
  .onb-compact-select__panel {
    max-height: min(42vh, 260px);
    padding: 3px 0;
  }
  .onb-compact-select__opt {
    min-height: 40px;
    padding: 9px 14px;
    font-size: var(--text-md);
  }
  .onb-compact-select__menu {
    border-radius: 14px;
    padding: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .onb-compact-select__trigger.onb-select,
  .onb-compact-select__chev,
  .onb-compact-select__opt {
    transition: none;
  }
  .onb-compact-select__opt:active {
    transform: none;
  }
}


/* .onb-input / .onb-select / .onb-input-wrap base styles live in
   marketing/pages.css so they're available on both the onboarding layout
   and the marketing /sellers layout (which both render the basics form). */

/* =================================================================
   Bottom-sheet picker (mobile valuation wizard). Replaces the native
   <select> for Profit margin (step 1) and Specialty (step 2). A field
   button opens a slide-up sheet of option rows; picking one writes a
   hidden input and closes. No native <select> (matches the design's
   "no native selects" rule and kills the full-screen white <select>
   dialog the Android WebView draws). The controller re-parents the
   sheet onto <body> so position:fixed resolves to the viewport (the
   .fade-in card carries a transform). Values from ValuationPhone.dc.html.
   ================================================================= */
.vp-picker { position: relative; }

/* Desktop (>880px) keeps the original native <select>; mobile/tablet and the native app
   swap to the bottom-sheet trigger. Both drive the same <select>, so the desktop UX is
   unchanged and only mobile/native gets the sheet. */
.vp-picker__native { display: block; }
.vp-field-btn { display: none; }
@media (max-width: 880px) {
  .vp-picker__native { display: none; }
  .vp-field-btn { display: flex; }
}
.onboarding-body.is-native .vp-picker__native { display: none; }
.onboarding-body.is-native .vp-field-btn { display: flex; }

.vp-field-btn {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 60px;
  padding: 11px 16px;
  background: #fff;
  border: 1.5px solid #d4d4d4;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(10, 31, 20, 0.04);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.vp-picker.is-filled .vp-field-btn { border-color: #cfe3d6; }
.vp-field-btn__text { min-width: 0; }
.vp-field-btn__value { display: block; font-size: var(--text-lg); font-weight: var(--fw-semibold); color: #a3a3a3; }
.vp-picker.is-filled .vp-field-btn__value { color: #0a0a0a; }
.vp-field-btn__hint { display: block; font-size: var(--text-sm); color: #737373; margin-top: 2px; }
.vp-field-btn__chev { width: 18px; height: 18px; flex: 0 0 18px; color: #a3a3a3; }

.vp-sheet-root { position: fixed; inset: 0; z-index: 1000; }
.vp-sheet-root[hidden] { display: none; }
.vp-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 14, 0.42);
  animation: vpScrimIn 0.2s ease both;
}
.vp-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  max-width: 640px;
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
  max-height: 84%;
  display: flex;
  flex-direction: column;
  animation: vpSheetIn 0.3s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
.vp-sheet__handle {
  flex: 0 0 auto;
  width: 38px;
  height: 5px;
  border-radius: 99px;
  background: #e5e5e5;
  margin: 10px auto 4px;
}
.vp-sheet__head { flex: 0 0 auto; padding: 8px 20px 14px; border-bottom: 1px solid #f0efea; }
.vp-sheet__title { margin: 0; font-size: var(--text-xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: #0a0a0a; }
.vp-sheet__sub { margin: 4px 0 0; font-size: var(--text-base); color: #737373; }
.vp-sheet__body {
  /* flex-basis must be auto (content height), not 0: the sheet is position:absolute
     with bottom:0 and only a max-height (no definite height), so it sizes to content.
     A flex child with basis 0 in an auto-height flex column collapses to ~0 height,
     which hid the option list below the viewport on mobile/native. With basis auto the
     sheet grows to fit the options (capped at max-height 84%), and min-height:0 +
     overflow-y let it shrink and scroll once that cap is hit. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

.vp-sheet-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  margin-bottom: 8px;
  background: #fff;
  border: 1.5px solid #e5e5e5;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.vp-sheet-opt.is-selected { background: #eef5ef; border-color: #1f5e3a; }
.vp-sheet-opt__radio {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 99px;
  border: 2px solid #d4d4d4;
  background: #fff;
  position: relative;
}
.vp-sheet-opt.is-selected .vp-sheet-opt__radio { border-color: #1f5e3a; background: #1f5e3a; }
.vp-sheet-opt.is-selected .vp-sheet-opt__radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: #fff;
}
.vp-sheet-opt__text { flex: 1; min-width: 0; }
.vp-sheet-opt__title { display: block; font-size: var(--text-lg); font-weight: var(--fw-semibold); color: #0a0a0a; }
.vp-sheet-opt__title--single { flex: 1; }
.vp-sheet-opt__sub { display: block; font-size: var(--text-sm); color: #737373; margin-top: 1px; }
.vp-sheet-opt__check { width: 18px; height: 18px; flex: 0 0 18px; color: #1f5e3a; display: none; }
.vp-sheet-opt.is-selected .vp-sheet-opt__check { display: block; }

@keyframes vpSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes vpScrimIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .vp-sheet, .vp-scrim { animation: none !important; }
}

/* ---------- BUTTONS ---------- */
.onb-btn {
  height: 44px; padding: 0 18px;
  border-radius: 12px; font-size: var(--text-md); font-weight: var(--fw-semibold);
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  cursor: pointer; transition: background .15s, border-color .15s;
  font-family: inherit; text-decoration: none;
}
.onb-btn--primary { background: var(--bg-primary); color: var(--text-on-primary); border-color: var(--bg-primary); box-shadow: var(--shadow-inset-btn); }
.onb-btn--primary:hover { background: var(--bg-primary-hover); border-color: var(--bg-primary-hover); }
.onb-btn--primary:disabled { background: var(--color-gray-300); border-color: var(--color-gray-300); color: #fff; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════
   Signed-in seller theme (.onb-theme--dashboard, set in layouts/onboarding.html.erb
   when continuing_practice?) — Design System v2, LIGHT mode.

   This surface can't inherit tailwind/themes/*-v2.css: those are scoped to the
   dashboard body classes (body.brokering-body-seller etc.) and this layout renders
   body.onboarding-body with the MARKETING bundle. So v2 is restated here, for this
   variant only, and the public /list-a-practice funnel keeps its own marketing look.

   The brand token override below is the load-bearing line: the five original rules in
   this block already read var(--color-brand-green), which the marketing bundle sets to
   forest #29804E — so re-pointing it at mint turns the active rail step, the bullets and
   the primary CTA mint for free, rather than restating each one.
   ══════════════════════════════════════════════════════════════════════════ */
.onboarding-body.onb-theme--dashboard {
  --color-brand-green:        #0EA184; /* mint-500 — fills */
  --color-brand-green-deep:   #0A6E5C; /* mint-700 — accent text */
  --color-brand-green-75:     #E7F7F1; /* mint-50  — tints */
  --color-brand-green-bright: #2FB294;
  --bg-primary:       #0EA184;
  --bg-primary-hover: #0B8770;
  --font-display: "Figtree", "Inter", InterVariable, ui-sans-serif, system-ui, sans-serif;
}
/* v2 canvas: flat white, matching .brokering-main on the dashboard (was a mint tint). */
.onboarding-body.onb-theme--dashboard { background: #fff; }
/* Figtree for the step heading + rail title, as on the dashboard. */
.onboarding-body.onb-theme--dashboard :is(h1, h2, h3, .card-head .onb-title, .rail-title) {
  font-family: var(--font-display);
}
/* Pill buttons. */
.onboarding-body.onb-theme--dashboard :is(.onb-btn, .onb-btn--primary, .onb-btn--outline, .onb-btn--muted) {
  border-radius: 999px;
}
.onboarding-body.onb-theme--dashboard .onb-btn--primary { background: var(--color-brand-green); border-color: var(--color-brand-green); }
.onboarding-body.onb-theme--dashboard .onb-btn--primary:hover { background: var(--bg-primary-hover); border-color: var(--bg-primary-hover); }
/* Shadow-only cards, 16px radius — the dashboard's one card family. */
.onboarding-body.onb-theme--dashboard :is(.onboarding-card, .rail) {
  border: none;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}
/* v2 inputs: 12px radius, 1.5px border, mint focus ring. */
.onboarding-body.onb-theme--dashboard :is(.field input[type="text"], .field input[type="number"], .field input[type="email"], .field select, .field textarea, .onb-input, .onb-select) {
  border-radius: 12px;
  border-width: 1.5px;
}
.onboarding-body.onb-theme--dashboard :is(.field input[type="text"], .field input[type="number"], .field input[type="email"], .field select, .field textarea, .onb-input, .onb-select):focus {
  border-color: var(--color-brand-green);
  box-shadow: 0 0 0 3px var(--color-brand-green-75);
  outline: none;
}
/* Prefixed/suffixed fields are ONE control, not two boxes. The wrap owns the border,
   radius, background and focus ring; the icon and the input sit inside it borderless.
   Before this, the icon box drew a 1px outline rounded on its left while the input drew
   its own — and the blanket `.onb-input { border-radius: 12px; border-width: 1.5px }`
   above rounded ALL FOUR of the input's corners at a heavier weight than the prefix,
   out-specifying the base `.onb-input-wrap--prefix .onb-input { border-radius: 0 8px 8px
   0 }`. The result read as a detached magnifier button next to a separate text field. */
.onboarding-body.onb-theme--dashboard .onb-input-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--base-border-tertiary);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
/* Once a place is picked, location.js sets `field.hidden = true` and reveals the green
   confirmation chip in its place, so the step reads as done instead of leaving a filled
   text input sitting there. The base handles that with `.onb-input-wrap[hidden] {
   display: none }` at (0,2,0) — but the `display: flex` above weighs (0,3,0) and beat it,
   so the hidden input kept rendering and you saw BOTH the filled field and the chip.
   Restated here at (0,3,1) so `hidden` wins again. Any `display` set on a component that
   the app also toggles via the hidden attribute needs this guard. */
.onboarding-body.onb-theme--dashboard .onb-input-wrap[hidden] {
  display: none;
}
.onboarding-body.onb-theme--dashboard .onb-input-wrap:focus-within {
  border-color: var(--color-brand-green);
  box-shadow: 0 0 0 3px var(--color-brand-green-75);
}
.onboarding-body.onb-theme--dashboard .onb-input-wrap :is(.onb-input-prefix, .onb-input-suffix) {
  border: 0;
  background: transparent;
  color: var(--base-text-tertiary);
}
/* Nothing inside the wrap draws an edge, ring or outline — in ANY state. The wrap is
   the only element with a visible border, and its :focus-within ring is the sole focus
   indicator.

   The doubled `.onb-input.onb-input` is deliberate. The blanket input rule further up is
   scoped `:is(.field input[type=text], ..., .onb-input, ...)`, and :is() takes the
   specificity of its most specific argument — the attribute selector — so that rule
   weighs (0,4,1) and beat two earlier (0,4,0) attempts here. Doubling the class reaches
   (0,5,0) for the resting state and (0,6,0) with :focus-within, which nothing else in
   the cascade matches. Covering both states in one place is what finally killed the
   ghost outline AND the 1px seam that showed between the icon and the text on focus. */
.onboarding-body.onb-theme--dashboard .onb-input-wrap .onb-input.onb-input,
.onboarding-body.onb-theme--dashboard .onb-input-wrap:focus-within .onb-input.onb-input,
.onboarding-body.onb-theme--dashboard .onb-input-wrap :is(.onb-input-prefix, .onb-input-suffix) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.onboarding-body.onb-theme--dashboard .onb-input-wrap .onb-input.onb-input {
  flex: 1 1 auto;
  min-width: 0;
}
.onboarding-body.onb-theme--dashboard .onb-input-wrap :is(.onb-input-prefix, .onb-input-suffix) {
  color: var(--base-text-tertiary);
}

/* iOS zooms the viewport when a focused input is under 16px; the base scale puts these
   at 15px. Bump them on phones only (responsive DoD: text inputs >=16px at <=640). */
@media (max-width: 640px) {
  .onboarding-body.onb-theme--dashboard :is(.onb-input, .onb-select, .field input, .field textarea, .field select) {
    font-size: var(--text-xl);
  }
}

/* Selected option cards + chips pick up the mint tint rather than forest. */
.onboarding-body.onb-theme--dashboard .opt.is-on,
.onboarding-body.onb-theme--dashboard .chip.is-on {
  border-color: var(--color-brand-green);
  background: var(--color-brand-green-75);
  color: var(--color-brand-green-deep);
}
.onb-btn--outline { background: #fff; color: var(--color-gray-900); border-color: var(--border-secondary); }
.onb-btn--outline:hover { background: var(--color-gray-100); }
.onb-btn--link { background: none; border: 0; color: var(--base-text-secondary); padding: 8px; height: auto; }
.onb-btn--link:hover { color: var(--color-gray-950); }
/* >=44px touch target for the wizard Back link on phone (WCAG 2.5.5 / dashboard convention) */
@media (max-width: 640px) {
  .onb-btn--link { min-height: 44px; }
}

/* ---------- OPTION CARDS ---------- */
.opt-grid { display: grid; gap: 10px; }
.opt-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.opt-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) { .opt-grid.cols-3, .opt-grid.cols-2 { grid-template-columns: 1fr; } }
.opt {
  text-align: left;
  background: #fff;
  border: 1px solid var(--base-border-tertiary);
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  display: flex; flex-direction: column; gap: 4px;
  font-family: inherit;
  width: 100%;
}
.opt:hover { border-color: var(--color-gray-400); }
.opt.is-selected {
  border-color: var(--color-brand-green, #14422a);
  background: #eef5ef;
  box-shadow: 0 0 0 1px var(--color-brand-green, #14422a) inset;
}
.opt .opt-title { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--color-gray-950); }
.opt.is-selected .opt-title { color: var(--color-brand-green, #14422a); }
.opt .opt-desc { font-size: var(--text-sm); color: var(--base-text-tertiary); }
.opt .opt-icon-wrap {
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--color-gray-100);
  display: grid; place-items: center; margin-bottom: 8px;
  color: var(--base-text);
}

/* ---------- NUMBER STEPPER ---------- */
.num-stepper {
  display: flex; align-items: stretch;
  border: 1px solid var(--border-secondary);
  border-radius: 12px; overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-input);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.num-stepper:focus-within {
  border-color: var(--base-border-focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--base-border-focus), transparent 80%);
}
.num-stepper button {
  width: 44px; flex: 0 0 44px;
  border: 0; background: transparent;
  color: var(--base-text-secondary);
  font-size: var(--text-xl); font-weight: var(--fw-medium);
  cursor: pointer; font-family: inherit;
  display: grid; place-items: center;
}
.num-stepper button:hover { background: var(--color-gray-100); color: var(--color-gray-950); }
.num-stepper button:disabled { color: var(--color-gray-300); cursor: not-allowed; background: transparent; }
.num-stepper input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  text-align: center;
  font: inherit; font-size: var(--text-lg); font-weight: var(--fw-semibold);
  color: var(--color-gray-950);
  height: 42px;
  outline: none;
}
.num-stepper input::-webkit-outer-spin-button,
.num-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-stepper input[type=number] { -moz-appearance: textfield; }
.num-stepper .num-stepper__divider { width: 1px; background: var(--base-border-tertiary); }

/* ---------- SEGMENTED TIMELINE ---------- */
.timeline-track {
  position: relative;
  background: var(--color-gray-100);
  border-radius: 999px;
  height: 56px; padding: 4px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.timeline-opt {
  border: 0; background: transparent; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--base-text-secondary);
  cursor: pointer; padding: 4px 8px;
  font-family: inherit;
}
.timeline-opt.is-on { background: var(--color-gray-950); color: #fff; }
.timeline-opt .when { font-size: var(--text-2xs); opacity: .65; font-weight: var(--fw-medium); }

/* ---------- READINESS SLIDER ---------- */
.readiness {
  border: 1px solid var(--base-border-tertiary); border-radius: 12px;
  padding: 16px;
}
.readiness-row { display: flex; align-items: center; gap: 12px; }
.readiness-num { font-size: var(--text-3xl); font-weight: var(--fw-bold); color: var(--color-gray-950); letter-spacing: -0.02em; min-width: 52px; }
.readiness-label { font-size: var(--text-base); color: var(--base-text-secondary); margin-bottom: 8px; }
.readiness-scale { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--base-text-tertiary); margin-top: 4px; }

input[type=range].onb-slider {
  width: 100%; -webkit-appearance: none; height: 6px;
  border-radius: 999px; background: var(--color-gray-300);
  outline: none;
}
input[type=range].onb-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  border-radius: 999px; background: var(--color-gray-950);
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2);
  cursor: pointer;
}
input[type=range].onb-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 999px; background: var(--color-gray-950);
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer;
}

/* ---------- CHIP GROUP ---------- */
.chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 1px solid var(--base-border-tertiary); background: #fff;
  border-radius: 999px; padding: 9px 16px;
  font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--base-text-secondary);
  cursor: pointer; font-family: inherit;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.chip:hover { border-color: color-mix(in oklab, var(--color-brand-green), var(--base-border-tertiary)); }
.chip.is-on {
  background: color-mix(in oklab, var(--color-brand-green), #fff 90%);
  color: var(--color-brand-green, #14422a);
  border-color: color-mix(in oklab, var(--color-brand-green), #fff 40%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-brand-green), transparent 65%);
}

/* ---------- TEXTAREA ---------- */
.onb-textarea {
  width: 100%; min-height: 88px;
  padding: 12px 14px; font: inherit; font-size: var(--text-md);
  border: 1px solid var(--border-secondary);
  border-radius: 12px; resize: vertical;
  box-shadow: var(--shadow-input);
}
.onb-textarea:focus {
  outline: none; border-color: var(--base-border-focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--base-border-focus), transparent 80%);
}

/* ---------- QUESTIONNAIRE MODE (deal preferences) ---------- */
.q-head-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.q-counter {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--base-text-tertiary);
  letter-spacing: .04em;
}
.q-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}
.q-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--color-gray-200);
  transition: width .22s cubic-bezier(.4,0,.2,1), background .22s ease;
  flex-shrink: 0;
}
.q-dot.is-active {
  width: 22px;
  background: var(--color-brand-green);
}
.q-dot.is-done {
  background: color-mix(in oklab, var(--color-brand-green), transparent 45%);
}

/* Single-question card: suppress section dividers */
.onboarding-card--q .sent-section {
  border-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.onboarding-card--q .sent-section:first-child { padding-top: 0; }

/* Larger question heading */
.onboarding-card--q .sent-q {
  font-size: clamp(18px, 2.2vw, 24px);
  margin-bottom: 6px;
}

@keyframes q-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.q-animate { animation: q-slide-in .2s ease both; }

/* ---------- SENTIMENT SECTIONS ---------- */
.sent-section {
  margin-bottom: 0;
  padding: 22px 0;
  border-bottom: 1px solid var(--base-border-tertiary);
}
.sent-section:first-child { padding-top: 4px; }
.sent-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.sent-q { font-size: var(--text-lg); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--color-gray-950); margin: 0 0 6px; }
.sent-help { font-size: var(--text-base); line-height: 1.5; color: var(--base-text-secondary); margin: 0 0 16px; max-width: 52ch; }

/* Timeline as tappable cards (replaces narrow select) */
.onb-timeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}
.onb-timeline-grid .opt {
  min-height: 72px;
  justify-content: center;
  text-align: center;
  padding: 12px 10px;
}
.onb-timeline-grid .opt .opt-title { font-size: var(--text-base); line-height: 1.35; }

/* ---------- ERROR MESSAGES ---------- */
.field-error {
  font-size: var(--text-sm); color: var(--color-red-700); margin-top: 4px;
}

/* ---------- VALUATION REVEAL (Step 3) ---------- */
.reveal {
  max-width: 1280px; margin: 0 auto;
  padding: 48px 32px 80px;
}
.reveal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1000px) {
  .reveal-grid { grid-template-columns: 1fr; gap: 32px; }
}

.reveal-main { min-width: 0; }
.reveal-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-success-secondary);
  color: var(--text-on-success-secondary);
  padding: 6px 14px; border-radius: 999px;
  font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 20px;
}
.reveal-eyebrow svg { color: var(--color-green-700); }
.reveal-number {
  font-size: clamp(48px, 6.5vw, 88px); font-weight: var(--fw-bold);
  letter-spacing: -0.04em; line-height: 1.0;
  color: var(--color-gray-950);
  font-variant-numeric: tabular-nums;
  margin: 0 0 12px;
}
.reveal-tag { font-size: var(--text-xl); color: var(--base-text-secondary); margin: 0 0 8px; }
.reveal-meta { font-size: var(--text-base); color: var(--base-text-tertiary); margin: 0 0 14px; }
.reveal-meta b { color: var(--color-gray-900); font-weight: var(--fw-semibold); }
/* Honest one-liner right where the number is. The full disclaimer sits in the
   "How we came up with this" card, because 50 words above the fold is too much
   weight for the first thing a seller reads. */
.reveal-disclaimer { margin: 0 0 30px; }

/* The .reveal-position* percentile widget was deleted here (2026-07). Two divergent
   position_pct formulas meant the same practice read 37th or 10th percentile depending
   on whether the ONNX model loaded, and the 6.0× anchor put almost every seller in the
   "Below market" third of the track.
   position_pct is now gone entirely. Valuations::MarketPosition replaced it with three
   bands against the typical multiple for the specialty, which is what the benchmark data
   supports. It renders on the broker-facing Destimate only; keep the seller's first
   screen free of a market-position widget. */

.reveal-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 20px;
}
/* The reveal shows TWO tiles now (collections, and the range as a percent of it).
   The margin tile went because the funnel never asks for a margin and never
   discloses the 20% it assumes, and the EBITDA multiple went with it because it
   cannot be reconciled without one. */
.reveal-stats--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reveal-stat {
  border: 1px solid var(--base-border-tertiary);
  border-radius: 12px; padding: 18px 20px; background: #fff;
}
.reveal-stat__label { font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--base-text-tertiary); margin-bottom: 6px; }
.reveal-stat__value { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--color-gray-950); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* Phone: the three stat tiles must fit 375px, so shrink padding and type (the design
   uses 19px values / 8px gap) and let the tracks shrink so nothing overflows or clips. */
@media (max-width: 640px) {
  .reveal-stats { gap: 8px; }
  .reveal-stat { padding: 12px 10px; border-radius: 14px; }
  .reveal-stat__label { font-size: var(--text-xs); letter-spacing: .04em; margin-bottom: 5px; }
  .reveal-stat__value { font-size: var(--text-xl); }
}

.reveal-card {
  background: #fff;
  border: 1px solid var(--base-border-tertiary);
  border-radius: 12px; padding: 22px 24px;
}
.reveal-card h3 { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--color-gray-950); margin: 0 0 8px; }
.reveal-card p { font-size: var(--text-md); line-height: 1.55; color: var(--base-text-secondary); margin: 0; }
/* The shared .estimate-disclaimer is a <p>, so `.reveal-card p` above out-specifies
   it and the disclaimer inherits the explainer's exact size and colour. Without this
   the two run together as one paragraph with no visual break. Two class selectors so
   it wins, and a hairline so it reads as a separate note rather than more explainer. */
.reveal-card .reveal-card__disclaimer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--base-border-tertiary);
  font-size: var(--text-sm);
  color: var(--base-text-tertiary);
}

/* ---------- CTA SIDEBAR ---------- */
.reveal-cta-col { position: sticky; top: 88px; }
.reveal-cta {
  background: var(--color-brand-cream, #f6f3ec);
  border: 1px solid var(--base-border-tertiary);
  border-radius: 16px; padding: 28px 28px 24px;
  box-shadow: var(--shadow-card);
}
.reveal-cta__pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.05); color: var(--base-text-secondary);
  padding: 4px 10px; border-radius: 999px;
  font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 16px;
}
.reveal-cta__pill svg { color: var(--base-text-secondary); }
.reveal-cta__title { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--color-gray-950); line-height: 1.25; margin: 0 0 10px; letter-spacing: -0.01em; }
.reveal-cta__sub { color: var(--base-text-secondary); font-size: var(--text-md); margin: 0 0 20px; line-height: 1.5; }
.reveal-cta__btn {
  width: 100%; background: var(--color-gray-950); color: #fff;
  border: 0; border-radius: 14px; padding: 14px;
  font-size: var(--text-md); font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; font-family: inherit;
  text-decoration: none;
}
.reveal-cta__btn:hover { background: var(--color-gray-800); }
.reveal-cta__list { list-style: none; padding: 0; margin: 20px 0 0; font-size: var(--text-md); }
.reveal-cta__list li { display: flex; gap: 10px; padding: 7px 0; color: var(--color-gray-800); align-items: center; }
.reveal-cta__list li svg { color: var(--base-text-tertiary); flex: 0 0 16px; }
.reveal-cta__foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--base-border-tertiary);
  font-size: var(--text-sm); color: var(--base-text-tertiary);
}
.reveal-cta__foot svg { color: var(--base-text-tertiary); flex: 0 0 14px; }

/* ---------- VALUATION REVEAL LOADER ---------- */
.reveal-loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--color-gray-50);
  background-image: radial-gradient(circle, var(--color-gray-300) 1px, transparent 1px);
  background-size: 24px 24px;
  display: grid; place-items: center;
  animation: onb-fade .2s ease both;
}
.reveal-loader.is-leaving { animation: onb-fade-out .5s ease both; }
@keyframes onb-fade-out { from { opacity: 1; } to { opacity: 0; } }
.reveal-loader__inner {
  /* min(460px, 100%): the stage-pill row's min-content can exceed a phone
     viewport, and a plain max-width lets the box grow past the screen. */
  width: 100%; max-width: min(460px, 100%); padding: 0 24px;
  text-align: center; position: relative; z-index: 1;
}

/* Orrery — SVG constellation: practice at center, comparables in orbit,
   data threads flowing inward, halos rippling outward */
.reveal-loader__orrery {
  width: 100%; max-width: 300px; margin: 0 auto 24px;
}
.reveal-loader__orrery svg {
  width: 100%; height: auto; display: block; overflow: visible;
}

/* Threads — faint by default; light up + flow inward when their quadrant ignites */
.orrery-thread {
  stroke: var(--color-brand-green);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 22 360;
  stroke-dashoffset: 382;
  opacity: 0.06;
  transition: opacity 0.6s ease;
}
.reveal-loader__orrery.is-q1 .orrery-thread--q1,
.reveal-loader__orrery.is-q2 .orrery-thread--q2,
.reveal-loader__orrery.is-q3 .orrery-thread--q3,
.reveal-loader__orrery.is-q4 .orrery-thread--q4 {
  opacity: 0.75;
  animation: thread-flow 2.2s linear infinite;
}
@keyframes thread-flow { to { stroke-dashoffset: 0; } }

/* Major stars — dim until their quadrant's stage activates, then IGNITE */
.orrery-major {
  fill: var(--color-brand-green);
  opacity: 0.15;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.6s ease;
}
.reveal-loader__orrery.is-q1 .orrery-major--q1,
.reveal-loader__orrery.is-q2 .orrery-major--q2,
.reveal-loader__orrery.is-q3 .orrery-major--q3,
.reveal-loader__orrery.is-q4 .orrery-major--q4 {
  opacity: 1;
  filter: drop-shadow(0 0 6px var(--color-brand-green));
  animation: major-ignite 1.6s ease-in-out infinite;
}
@keyframes major-ignite {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.35); }
}

/* Minor stars — decorative twinkling backdrop, independent of stages */
.orrery-minor {
  fill: var(--color-brand-green);
  animation: star-twinkle 4s ease-in-out infinite;
}
.orrery-minor:nth-of-type(1)  { animation-delay: 0.0s; }
.orrery-minor:nth-of-type(2)  { animation-delay: 0.7s; }
.orrery-minor:nth-of-type(3)  { animation-delay: 1.3s; }
.orrery-minor:nth-of-type(4)  { animation-delay: 1.8s; }
.orrery-minor:nth-of-type(5)  { animation-delay: 0.4s; }
.orrery-minor:nth-of-type(6)  { animation-delay: 2.1s; }
.orrery-minor:nth-of-type(7)  { animation-delay: 0.9s; }
.orrery-minor:nth-of-type(8)  { animation-delay: 1.5s; }
.orrery-minor:nth-of-type(9)  { animation-delay: 0.2s; }
.orrery-minor:nth-of-type(10) { animation-delay: 1.1s; }
.orrery-minor:nth-of-type(11) { animation-delay: 0.6s; }
.orrery-minor:nth-of-type(12) { animation-delay: 2.4s; }
@keyframes star-twinkle {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.55; }
}

/* Halos — concentric ripples radiating outward from the practice */
.orrery-halo {
  fill: none;
  stroke: var(--color-brand-green);
  stroke-width: 1.5;
  animation: halo-expand 2.6s ease-out infinite;
}
.orrery-halo--1 { animation-delay: 0s; }
.orrery-halo--2 { animation-delay: 0.86s; }
.orrery-halo--3 { animation-delay: 1.72s; }
@keyframes halo-expand {
  0%   { r: 6;  opacity: 0.55; }
  100% { r: 52; opacity: 0; }
}

/* Anchor — your practice, glowing & breathing */
.orrery-anchor {
  fill: var(--color-brand-green);
  filter: drop-shadow(0 0 10px color-mix(in oklab, var(--color-brand-green), transparent 30%));
  transform-box: fill-box;
  transform-origin: center;
  animation: anchor-breathe 2.6s ease-in-out infinite;
}
@keyframes anchor-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

.reveal-loader__title {
  font-size: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: -0.01em;
  color: var(--color-gray-950); margin: 0 0 12px;
}

/* AI-powered badge */
.reveal-loader__tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: color-mix(in oklab, var(--color-brand-green), transparent 88%);
  color: var(--color-green-800, #166534);
  border: 1px solid color-mix(in oklab, var(--color-brand-green), transparent 68%);
  padding: 4px 12px; border-radius: 999px;
  font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase;
  margin: 0 0 22px;
}
.reveal-loader__tag-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-brand-green);
  animation: ml-dot-pulse 1.5s ease-in-out infinite;
}
@keyframes ml-dot-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.75); }
  50%      { opacity: 1;    transform: scale(1.25); }
}

/* Cycling status line — quieter, contemplative */
.reveal-loader__line {
  font-size: var(--text-md); color: var(--base-text-secondary);
  min-height: 1.5em;
  animation: onb-line-fade .5s ease both;
  margin: 0 0 20px;
}
@keyframes onb-line-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Progress bar */
.reveal-loader__bar {
  max-width: 280px; margin: 0 auto 22px;
  height: 5px; background: var(--color-gray-200);
  border-radius: 999px; overflow: hidden;
}
.reveal-loader__bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--color-brand-green), color-mix(in oklab, var(--color-brand-green), #fff 30%));
  border-radius: 999px; transition: width .15s linear;
  position: relative; overflow: hidden;
}
.reveal-loader__bar-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  animation: bar-shimmer 1.3s ease-in-out infinite;
}
@keyframes bar-shimmer { from { transform: translateX(-200%); } to { transform: translateX(300%); } }

/* Pipeline stage indicators — the "torch" passes through them */
.reveal-loader__stages {
  display: flex; align-items: center; justify-content: center;
  /* wrap: four uppercase pills don't fit one row on narrow phones */
  flex-wrap: wrap;
  gap: 8px; margin: 0 0 22px;
}
.reveal-loader__stage {
  font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase;
  color: var(--base-text-tertiary);
  background: #fff;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--color-gray-200);
  transition: background .45s cubic-bezier(0.2, 0.9, 0.3, 1.2),
              color .45s ease, border-color .45s ease,
              transform .45s cubic-bezier(0.2, 0.9, 0.3, 1.2),
              box-shadow .45s ease;
}
/* Active = the current torch: solid green, scaled up, glowing */
.reveal-loader__stage.is-active {
  background: var(--color-brand-green);
  color: #fff;
  border-color: var(--color-brand-green);
  transform: scale(1.12);
  box-shadow: 0 4px 16px color-mix(in oklab, var(--color-brand-green), transparent 50%);
}
/* Done = previously activated: lit green tint, settled back to normal size */
.reveal-loader__stage.is-done {
  background: color-mix(in oklab, var(--color-brand-green), transparent 78%);
  color: var(--color-green-800, #166534);
  border-color: color-mix(in oklab, var(--color-brand-green), transparent 55%);
}
.reveal-loader__stage-sep {
  font-size: var(--text-xs); color: var(--color-gray-300); line-height: 1;
  transition: color .45s ease;
}
.reveal-loader__stage-sep.is-passed { color: var(--color-brand-green); }

/* Model provenance footer */
.reveal-loader__model { font-size: var(--text-xs); color: var(--base-text-tertiary); letter-spacing: .025em; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .orrery-thread,
  .orrery-major,
  .orrery-minor,
  .orrery-halo,
  .orrery-anchor,
  .reveal-loader__bar-fill::after,
  .reveal-loader__tag-dot { animation: none; }
  .orrery-minor { opacity: 0.5; }
  .reveal-loader__orrery.is-q1 .orrery-major--q1,
  .reveal-loader__orrery.is-q2 .orrery-major--q2,
  .reveal-loader__orrery.is-q3 .orrery-major--q3,
  .reveal-loader__orrery.is-q4 .orrery-major--q4 { animation: none; transform: none; }
}

/* ---------- SIGNUP MODAL ---------- */
.onb-modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 24px;
}
.onb-modal[hidden] { display: none; }
.onb-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 10, 10, .55);
  animation: onb-fade .2s ease both;
}
.onb-modal__panel {
  position: relative;
  width: 100%; max-width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px 24px;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,.25);
  animation: onb-modal-pop .25s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes onb-modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.onb-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: 0; background: transparent;
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--base-text-tertiary);
  cursor: pointer;
}
.onb-modal__close:hover { background: var(--color-gray-100); color: var(--color-gray-950); }
.onb-modal__head { text-align: center; margin-bottom: 24px; }
.onb-modal__eyebrow {
  font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--base-text-tertiary); margin: 0 0 10px;
}
.onb-modal__title {
  font-size: var(--text-3xl); font-weight: var(--fw-bold); letter-spacing: -0.025em;
  color: var(--color-gray-950); margin: 0 0 6px;
}
.onb-modal__sub { font-size: var(--text-base); color: var(--base-text-secondary); margin: 0; }
.onb-modal__foot-note {
  font-size: var(--text-sm); color: var(--base-text-tertiary);
  text-align: center; margin: 12px 0 0;
}

.onb-modal__oauth {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border-secondary);
  color: var(--color-gray-950);
  height: 48px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: var(--text-md); font-weight: var(--fw-semibold);
  cursor: pointer; font-family: inherit;
  margin: 0;
}
.onb-modal__oauth:hover { background: var(--color-gray-100); }
.onb-modal__oauth-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  font-weight: var(--fw-bold); color: var(--color-brand-navy);
}
.onb-modal__oauth-img { width: 20px; height: 20px; }

.onb-modal__divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 16px;
  font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: .12em;
  text-transform: uppercase; color: var(--base-text-tertiary);
}
.onb-modal__divider::before, .onb-modal__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--base-border-tertiary);
}

.onb-modal__form { display: flex; flex-direction: column; gap: 8px; }
.onb-modal__label {
  font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--color-gray-800);
  margin-top: 4px;
}
.onb-modal__hint {
  font-size: var(--text-sm); color: var(--base-text-tertiary);
  margin: 0 0 4px;
}
.onb-modal__consent {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--text-sm); color: var(--base-text-secondary); line-height: 1.5;
  margin: 2px 0; cursor: pointer;
}
.onb-modal__consent input { margin-top: 2px; flex-shrink: 0; }
.onb-modal__consent a { color: var(--color-gray-950); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.onb-modal__submit { margin-top: 4px; width: 100%; }
.onb-modal__signin {
  text-align: center; font-size: var(--text-base); color: var(--base-text-secondary);
  margin: 18px 0 0;
}
.onb-modal__signin a { color: var(--color-gray-950); font-weight: var(--fw-semibold); }

.onb-modal__sent { text-align: center; padding: 8px 4px 0; }
.onb-modal__sent-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-success-secondary);
  color: var(--color-green-700);
  margin: 0 auto 18px;
}
.onb-modal__sent-icon svg { width: 24px; height: 24px; }
.onb-modal__sent .onb-modal__title { margin-bottom: 8px; }
.onb-modal__sent .onb-modal__sub { color: var(--base-text-secondary); font-size: var(--text-md); line-height: 1.5; margin-bottom: 18px; }
.onb-modal__sent .onb-modal__sub b { color: var(--color-gray-950); font-weight: var(--fw-semibold); }
.onb-modal__sent-hint {
  font-size: var(--text-sm); color: var(--base-text-tertiary);
  margin: 0; line-height: 1.5;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px;
}
.onb-modal__sent-resend-form { display: inline; margin: 0; }
.onb-modal__sent-resend {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--color-gray-950); font-weight: var(--fw-semibold);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.onb-modal__sent-resend:hover { color: var(--color-gray-700); }

/* ---------- TRANSITIONS ---------- */
.fade-in { animation: onb-fade .3s ease both; }
@keyframes onb-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- ICONS (used inline by views) ---------- */
.onb-ic { width: 18px; height: 18px; flex: 0 0 18px; }

/* =================================================================
   Broker wizard shims.
   The broker step templates (app/views/brokers/steps/*) and the
   shared brokerage_profile partials were authored against Jumpstart
   Pro's Tailwind-driven theme, but the onboarding layout only loads
   the marketing stylesheet bundle. These rules map the Jumpstart
   form/button/alert classes (and the small set of Tailwind utility
   classes the broker views depend on) onto the existing onboarding
   visual language so the wizard renders correctly.
   ================================================================= */

/* Form fields */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-label { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--color-gray-800); }
.form-control {
  width: 100%; padding: 0 14px; min-height: 44px;
  background: #fff; border: 1px solid var(--border-secondary, var(--base-border-secondary));
  border-radius: 12px; font-size: var(--text-md); color: var(--base-text);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: var(--shadow-input);
}
textarea.form-control { padding: 12px 14px; min-height: 96px; resize: vertical; line-height: 1.5; }
.form-control:focus {
  outline: none;
  border-color: var(--base-border-focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--base-border-focus), transparent 80%);
}
.form-control::placeholder { color: var(--base-text-tertiary); }
.form-checkbox {
  width: 16px; height: 16px; accent-color: var(--color-gray-950);
}
.form-hint { font-size: var(--text-sm); color: var(--base-text-tertiary); margin: 0; }

/* Buttons (extends marketing/site.css definitions) */
.btn-secondary {
  background: #fff; color: var(--color-gray-900);
  border-color: var(--border-secondary, var(--base-border-secondary));
}
.btn-secondary:hover { background: var(--color-gray-100); }

/* Alerts */
.alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 12px; font-size: var(--text-md);
  border: 1px solid var(--base-border-tertiary); background: #fff;
}
.alert > svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.alert > div { min-width: 0; }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }

/* Email verification banner — flexes the body and the action buttons inline. */
.email-verification-banner {
  align-items: center;
  margin: 16px clamp(16px, 4vw, 32px) 0;
  flex-wrap: wrap;
}
.email-verification-banner__body { flex: 1 1 280px; min-width: 240px; }
.email-verification-banner__body h4 { margin: 0; font-size: var(--text-md); font-weight: var(--fw-semibold); }

/* Practice claim invite — public broker-sent ownership claim page */
.claim-invite-shell {
  max-width: 760px;
  padding-top: 42px;
}

.claim-invite-card {
  box-shadow:
    0 1px 0 rgba(10, 31, 20, 0.05),
    0 16px 42px rgba(10, 31, 20, 0.08);
}

.claim-invite-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  margin-bottom: 18px;
  border: 1px solid var(--base-border-tertiary);
  border-radius: 999px;
  background: var(--color-gray-50);
  color: var(--base-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

.claim-invite-kicker__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-brand-green);
  box-shadow: 0 0 0 4px rgba(31, 94, 58, 0.12);
}

.claim-invite-summary {
  display: grid;
  border: 1px solid var(--base-border-tertiary);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 18px;
}

.claim-invite-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.38fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--base-border-tertiary);
}

.claim-invite-row:last-child {
  border-bottom: 0;
}

.claim-invite-row span {
  color: var(--base-text-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.claim-invite-row strong {
  min-width: 0;
  color: var(--color-gray-950);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.claim-invite-email {
  font-family: var(--font-mono);
  font-size: var(--text-base) !important;
  font-weight: var(--fw-semibold) !important;
}

.claim-invite-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--text-sm) !important;
}

.claim-invite-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.claim-invite-status.is-ready {
  background: #ecfdf5;
  color: #065f46 !important;
}

.claim-invite-status.is-blocked {
  background: #fffbeb;
  color: #92400e !important;
}

.claim-invite-message {
  margin-bottom: 0;
}

.claim-invite-message strong,
.claim-invite-message span {
  display: block;
}

.claim-invite-message strong {
  margin-bottom: 2px;
  color: currentColor;
  font-size: var(--text-md);
}

.claim-invite-message span {
  line-height: 1.5;
}

.claim-invite-code-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.claim-invite-code-form .form-group {
  flex: 1 1 220px;
  margin-bottom: 0;
}

.claim-invite-code {
  max-width: 220px;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  letter-spacing: .14em;
  font-weight: var(--fw-bold);
}

.claim-invite-actions form {
  margin: 0;
}

.claim-invite-footnote {
  color: var(--base-text-tertiary);
  font-size: var(--text-base);
  line-height: 1.45;
}

@media (max-width: 560px) {
  .claim-invite-shell {
    padding-top: 24px;
  }

  .claim-invite-row {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 13px 14px;
  }

  .claim-invite-code-form {
    align-items: stretch;
    flex-direction: column;
  }

  .claim-invite-code {
    max-width: none;
  }

  .claim-invite-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .claim-invite-actions .onb-foot__left {
    width: 100%;
    margin-right: 0;
  }

  .claim-invite-actions .btn,
  .claim-invite-actions form,
  .claim-invite-actions form .btn,
  .claim-invite-actions form input[type="submit"] {
    width: 100%;
  }
}
.email-verification-banner__body p { margin: 2px 0 0; font-size: var(--text-base); color: inherit; opacity: 0.9; }
.email-verification-banner__actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.email-verification-banner__form { margin: 0; }

/* Visually hide an element while keeping it focusable for screen readers /
   keyboard navigation. Used by chip checkboxes wrapped in .chip labels. */
.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;
}

/* When a `<label class="chip">` wraps a checkbox + text, .is-on is toggled
   by the toggle-chip Stimulus controller. The bare `:has(:checked)` fallback
   keeps the visual state correct even before the JS connects. */
label.chip { user-select: none; }
label.chip:has(input:checked) {
  background: color-mix(in oklab, var(--color-brand-green), #fff 90%);
  color: var(--color-brand-green, #14422a);
  border-color: color-mix(in oklab, var(--color-brand-green), #fff 40%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-brand-green), transparent 65%);
}

/* Layout utilities (Tailwind-name shims, scoped to wizard usage) */
.flex          { display: flex; }
.flex-wrap     { flex-wrap: wrap; }
.flex-col      { flex-direction: column; }
.flex-1        { flex: 1 1 0%; min-width: 0; }
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.justify-center{ justify-content: center; }
.shrink-0      { flex-shrink: 0; }
.min-w-0       { min-width: 0; }
.text-center   { text-align: center; }
.mx-auto       { margin-left: auto; margin-right: auto; }

.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }

.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }

.w-4  { width: 16px; }
.w-5  { width: 20px; }
.w-10 { width: 40px; }
.w-12 { width: 48px; }
.h-4  { height: 16px; }
.h-5  { height: 20px; }
.h-10 { height: 40px; }
.h-12 { height: 48px; }

.rounded-full { border-radius: 9999px; }
.rounded-lg   { border-radius: 12px; }

.text-sm  { font-size: var(--text-base); line-height: 1.5; }
.text-lg  { font-size: var(--text-xl); line-height: 1.4; }
.text-xl  { font-size: var(--text-xl); font-weight: var(--fw-semibold); line-height: 1.3; }
.text-2xl { font-size: var(--text-2xl); font-weight: var(--fw-bold); line-height: 1.25; letter-spacing: -0.01em; }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold     { font-weight: var(--fw-bold); }
.truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.text-primary    { color: var(--color-gray-950); }
.text-base-500   { color: var(--base-text-tertiary); }
.text-base-900   { color: var(--color-gray-900); }
.bg-primary\/10  { background-color: color-mix(in oklab, var(--color-gray-950), transparent 90%); }
.bg-base-50      { background-color: var(--color-gray-50); }
.bg-green-100    { background-color: #d1fae5; }
.bg-white        { background: #fff; }

.space-y-3 > * + * { margin-top: 12px; }
.space-y-6 > * + * { margin-top: 24px; }

.grid              { display: grid; }
.grid-cols-1       { grid-template-columns: 1fr; }
.gap-4             { gap: 16px; }
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:flex-row    { flex-direction: row; }
}

/* Practice-type chip used in deals step (label-wrapped checkbox) */
.has-\[\:checked\]\:border-primary:has(:checked) { border-color: var(--color-gray-950); }
.has-\[\:checked\]\:bg-primary\/10:has(:checked) { background-color: color-mix(in oklab, var(--color-gray-950), transparent 92%); }
.has-\[\:checked\]\:text-primary:has(:checked)   { color: var(--color-gray-950); }
.border        { border: 1px solid var(--base-border-tertiary); }
.border-base-300 { border-color: var(--base-border-tertiary); }
.text-base-600   { color: var(--base-text-secondary); }
.hover\:border-primary:hover { border-color: var(--color-gray-950); }
.transition-colors { transition: background-color .15s, border-color .15s, color .15s; }
.cursor-pointer  { cursor: pointer; }
.text-left       { text-align: left; }

/* Dark-mode tailwind classes used in templates: silently inert (no dark theme on wizard) */
.dark\:text-base-100,
.dark\:bg-base-800,
.dark\:bg-green-900\/30,
.dark\:border-base-700,
.dark\:text-base-300 { /* no-op: marketing/onboarding layout is light-only */ }

/* Save & exit flash message */
.onboarding-flash {
  max-width: 56rem;
  margin: 1rem auto 0;
  padding: .625rem 1rem;
  border-radius: .5rem;
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
}
.onboarding-flash--alert {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
}
.onboarding-flash--notice {
  background: #E7F7F1;
  border: 1px solid #C4EBDF;
  color: #0A6E5C;
}

/* On the buyer stepper — a full-height flex island (height: 100dvh - 64px) — a
   flash in normal flow pushes the whole split-screen down. Float it over the top
   instead so it reads as a banner and the layout doesn't shift. Scoped via
   :has(.buyer-setup) so seller/broker onboarding (no such element) is untouched. */
.onboarding-main:has(.buyer-setup) { position: relative; }
.onboarding-main:has(.buyer-setup) .onboarding-flash {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 40; margin: 0;
  width: calc(100% - 48px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
}

/* ============================================================
   MOBILE TYPE SCALE (phones + native app, <=640px)
   textZoom is pinned to 100 in the app, so CSS px render 1:1, and
   the device's wide (~448px) viewport reads small. This is the
   readable mobile scale for the logged-out wizard — applied here in
   one place (desktop typography is untouched above this breakpoint):
     eyebrow 12 · caption/hint 13 · label 15 · body/field 16 ·
     sub-title/question 18 · title 22.
   (Card eyebrow/title live in the <=880 compact block; reveal stat
   tiles in their own <=640 block — both already bumped to this scale.)
   ============================================================ */
@media (max-width: 640px) {
  .onboarding-card .card-body .field > label { font-size: var(--text-lg); }
  .onboarding-card .card-body .field .hint { font-size: var(--text-base); }
  .onb-textarea { font-size: var(--text-lg); }
  /* Signup modal + any form-control field on these pages: 16px reads well and
     avoids mobile input zoom (label stays 13). */
  .form-control { font-size: var(--text-lg); }
  .vp-field-btn__hint { font-size: var(--text-base); }
  .vp-sheet-opt__title { font-size: var(--text-lg); }
  .vp-sheet-opt__sub { font-size: var(--text-base); }
  .sent-q { font-size: var(--text-xl); }
  .sent-help { font-size: var(--text-md); }
  .opt .opt-desc { font-size: var(--text-base); }
}

/* ---------- BUYER ALERT ZONES (step 2 preferences) ---------- */
.onb-alert--error {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: var(--text-base);
}
.onb-alert--error ul { margin: 0; padding-left: 18px; }

.onb-zones-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.onb-zones-head > div { min-width: 0; }

.onb-btn--sm { height: 36px; padding: 0 12px; font-size: var(--text-base); border-radius: 10px; flex-shrink: 0; }
.onb-btn--sm .onb-ic { width: 15px; height: 15px; flex: 0 0 15px; }

.onb-zones-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.onb-zones-list:empty { margin: 0; }

.onb-zone-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.onb-zone-row.hidden { display: none; }

.onb-zone-field { display: flex; flex-direction: column; gap: 5px; }
.onb-zone-field > label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--base-text-secondary); }
.onb-zone-field--place { flex: 1 1 auto; min-width: 0; }
.onb-zone-field--radius { flex: 0 0 130px; }

.onb-zone-remove {
  flex: 0 0 auto;
  height: 44px; width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--base-border-tertiary);
  background: #fff;
  color: var(--base-text-tertiary);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.onb-zone-remove:hover { border-color: #fca5a5; color: #dc2626; background: #fef2f2; }

.onb-zones-map {
  position: relative;
  margin-top: 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--base-border-tertiary);
  background: var(--color-gray-50, #fafafa);
}
.onb-zones-map__canvas { height: 240px; width: 100%; }
.onb-zones-map__empty {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  font-size: var(--text-base);
  color: var(--base-text-tertiary);
  background: color-mix(in oklab, var(--color-gray-50, #fafafa), transparent 8%);
}
.onb-zones-map__empty.flex { display: flex; }

@media (max-width: 560px) {
  .onb-zone-field--place { flex: 1 1 100%; }
  .onb-zone-field--radius { flex: 1 1 auto; }
  .onb-zones-map__canvas { height: 200px; }
}

/* ══════════════════════════════════════════════════════════════════════
   DARK MODE — seller onboarding stepper (also the logged-in "Create a
   listing" flow, see docs/dashboard-redesign-design-system.md). Most rules
   above already consume tokens (--base-*, --bg-*, --text-*) redefined for
   .dark in colors_and_type.css and flip for free. This block only overrides
   the raw hex literals those rules used instead of a token. Scoped to
   .dark .onboarding-body so the public /sellers calculator (marketing
   layout, no .onboarding-body) is untouched.
   ══════════════════════════════════════════════════════════════════════ */

/* Numbered stepper (valuation reveal) */
.dark .onboarding-body .onb-stepper__node { background: var(--base-bg-low); border-color: var(--base-border-secondary); }
.dark .onboarding-body .onb-stepper__connector { background: var(--base-border-secondary); }

/* Card shell */
.dark .onboarding-body .onb-card { background: var(--base-bg-low); }
.dark .onboarding-body .onb-card .onb-title { color: var(--base-text); }
.dark .onboarding-body .onb-icon-badge,
.dark .onboarding-body .onb-helper { background: rgba(47,140,88,0.16); color: var(--text-primary); }
.dark .onboarding-body .onb-helper { color: var(--base-text-secondary); }
.dark .onboarding-body .onb-alert-error {
  background: var(--bg-danger-secondary);
  border-color: rgba(240,163,163,0.4);
  color: var(--text-danger);
}

/* Page background — .onboarding-body sets its own bg (--color-gray-50, never
   redefined in dark), overriding the generic `html,body{background:var(--background)}`
   rule in colors_and_type.css. */
.dark .onboarding-body { background: var(--base-bg-base); }

/* Top nav + flash */
.dark .onboarding-body .onboarding-nav { background: var(--base-bg-base); border-bottom-color: var(--base-border-tertiary); }
.dark .onboarding-body .onboarding-nav__exit,
.dark .onboarding-body .onboarding-nav__exit--center { color: var(--base-text-secondary); }
.dark .onboarding-body .onboarding-nav__exit:hover,
.dark .onboarding-body .onboarding-nav__exit--center:hover { color: var(--base-text); }
.dark .onboarding-body .onboarding-flash--alert {
  background: var(--bg-danger-secondary);
  border-color: rgba(240,163,163,0.4);
  color: var(--text-danger);
}

/* Progress rail (left sidebar) */
.dark .onboarding-body .rail { background: var(--base-bg-low); border-color: var(--base-border-tertiary); }
.dark .onboarding-body .rail h6 { color: var(--base-text-tertiary); }
.dark .onboarding-body .rail-title { color: var(--base-text); }
.dark .onboarding-body .rail-progress { background: var(--base-bg-high); }
.dark .onboarding-body .rail-divider { border-top-color: var(--base-border-tertiary); }
.dark .onboarding-body .rail-step.is-clickable:hover { background: var(--base-bg-high); border-color: var(--base-border-tertiary); }
.dark .onboarding-body .rail-step.current { background: var(--bg-primary); }
.dark .onboarding-body .rail-step.current .step-title { color: var(--text-on-primary); }
.dark .onboarding-body .rail-step.current .step-meta { color: rgba(255,255,255,.75); }
.dark .onboarding-body .rail-step.done .step-bullet { background: var(--bg-primary); color: var(--text-on-primary); border-color: var(--bg-primary); }
.dark .onboarding-body .rail-step.current .step-bullet { background: var(--text-on-primary); color: var(--bg-primary); border-color: var(--text-on-primary); }
.dark .onboarding-body .step-bullet { background: var(--base-bg-high); border-color: var(--base-border-secondary); color: var(--base-text-tertiary); }
.dark .onboarding-body .step-title { color: var(--base-text); }
.dark .onboarding-body .rail-summary .row b { color: var(--base-text); }
.dark .onboarding-body .rail-summary .row.estimate b { color: var(--text-primary); }
.dark .onboarding-body .rail-edit:hover { color: var(--base-text); }

/* Card head/body/foot */
.dark .onboarding-body .onboarding-card { background: var(--base-bg-low); }
.dark .onboarding-body .onboarding-card .card-head { background: var(--base-bg-low); border-bottom-color: var(--base-border-tertiary); }
.dark .onboarding-body .card-title { color: var(--base-text); }
.dark .onboarding-body .onboarding-card .card-foot { background: var(--base-bg-high); border-top-color: var(--base-border-tertiary); }
.dark .onboarding-body .onboarding-card .card-foot.card-foot--wizard { background: var(--base-bg-low); }
@media (max-width: 640px) {
  .dark .onboarding-body .card-foot--wizard-compact .card-foot__start .onb-btn--link {
    border-color: var(--base-border-secondary);
    background: var(--base-bg-low);
    color: var(--base-text);
  }
}
.dark .onboarding-body .onb-link-quiet:hover { color: var(--base-text); }
.dark .onboarding-body .onb-form-panel { background: var(--base-bg-high); border-color: var(--base-border-tertiary); }
.dark .onboarding-body .field > label { color: var(--base-text-secondary); }
.dark .onboarding-body .onb-loc-seg { background: var(--base-bg-high); }
.dark .onboarding-body .onb-loc-seg__btn.is-selected { background: var(--base-bg-highest); }
.dark .onboarding-body .onb-place-chip { background: color-mix(in oklab, var(--color-brand-green), transparent 85%); }
.dark .onboarding-body .onb-info:hover, .dark .onboarding-body .onb-info:focus-visible { color: var(--base-text); }
.dark .onboarding-body .onb-info__bubble { background: var(--base-bg-highest); color: var(--base-text); }
.dark .onboarding-body .onb-info__bubble::after { border-top-color: var(--base-bg-highest); }
.dark .onboarding-body .field-error { color: var(--text-danger); }

/* Specialty picker (bottom-sheet) */
.dark .onboarding-body .vp-field-btn { background: rgba(255,255,255,0.04); border-color: var(--base-border-secondary); }
.dark .onboarding-body .vp-picker.is-filled .vp-field-btn { border-color: rgba(47,140,88,0.4); }
.dark .onboarding-body .vp-field-btn__value { color: var(--base-text-tertiary); }
.dark .onboarding-body .vp-picker.is-filled .vp-field-btn__value { color: var(--base-text); }
.dark .onboarding-body .vp-field-btn__hint { color: var(--base-text-tertiary); }
.dark .onboarding-body .vp-field-btn__chev { color: var(--base-text-tertiary); }
.dark .onboarding-body .vp-scrim { background: rgba(0,0,0,0.6); }
.dark .onboarding-body .vp-sheet { background: var(--base-bg-highest); }
.dark .onboarding-body .vp-sheet__handle { background: var(--base-border-secondary); }
.dark .onboarding-body .vp-sheet__head { border-bottom-color: var(--base-border-tertiary); }
.dark .onboarding-body .vp-sheet__title { color: var(--base-text); }
.dark .onboarding-body .vp-sheet__sub { color: var(--base-text-tertiary); }
.dark .onboarding-body .vp-sheet-opt { background: var(--base-bg-low); border-color: var(--base-border-secondary); }
.dark .onboarding-body .vp-sheet-opt.is-selected { background: rgba(47,140,88,0.16); border-color: var(--text-primary); }
.dark .onboarding-body .vp-sheet-opt__radio { border-color: var(--base-border-secondary); background: var(--base-bg-low); }
.dark .onboarding-body .vp-sheet-opt.is-selected .vp-sheet-opt__radio { border-color: var(--text-primary); background: var(--text-primary); }
.dark .onboarding-body .vp-sheet-opt.is-selected .vp-sheet-opt__radio::after { background: var(--base-bg-base); }
.dark .onboarding-body .vp-sheet-opt__title { color: var(--base-text); }
.dark .onboarding-body .vp-sheet-opt__sub { color: var(--base-text-tertiary); }
.dark .onboarding-body .vp-sheet-opt__check { color: var(--text-primary); }

/* Buttons */
.dark .onboarding-body .onb-btn--outline { background: var(--base-bg-low); color: var(--base-text); border-color: var(--base-border-secondary); }
.dark .onboarding-body .onb-btn--outline:hover { background: var(--base-bg-high); }
.dark .onboarding-body .onb-btn--link { color: var(--base-text-secondary); }
.dark .onboarding-body .onb-btn--link:hover { color: var(--base-text); }

/* Option cards + number stepper */
.dark .onboarding-body .opt { background: var(--base-bg-low); border-color: var(--base-border-tertiary); }
.dark .onboarding-body .opt:hover { border-color: var(--base-border-secondary); }
.dark .onboarding-body .opt.is-selected { background: rgba(47,140,88,0.16); box-shadow: 0 0 0 1px var(--text-primary) inset; }
.dark .onboarding-body .opt .opt-title { color: var(--base-text); }
.dark .onboarding-body .opt.is-selected .opt-title { color: var(--text-primary); }
.dark .onboarding-body .opt .opt-icon-wrap { background: var(--base-bg-high); color: var(--base-text); }
.dark .onboarding-body .num-stepper { background: rgba(255,255,255,0.04); border-color: var(--base-border-secondary); }
.dark .onboarding-body .num-stepper button:hover { background: var(--base-bg-high); color: var(--base-text); }
.dark .onboarding-body .num-stepper button:disabled { color: var(--base-text-disabled); }
.dark .onboarding-body .num-stepper input { color: var(--base-text); }
.dark .onboarding-body .num-stepper .num-stepper__divider { background: var(--base-border-tertiary); }

/* Chip group + textarea */
.dark .onboarding-body .chip { background: var(--base-bg-low); border-color: var(--base-border-tertiary); color: var(--base-text-secondary); }
.dark .onboarding-body .chip:hover { border-color: rgba(47,140,88,0.5); }
.dark .onboarding-body .chip.is-on {
  background: rgba(47,140,88,0.18);
  color: var(--text-primary);
  border-color: rgba(47,140,88,0.5);
  box-shadow: 0 0 0 1px rgba(47,140,88,0.35);
}
.dark .onboarding-body .onb-textarea { background: rgba(255,255,255,0.04); border-color: var(--base-border-secondary); color: var(--base-text); }

/* Deal-preferences question mode */
.dark .onboarding-body .q-counter { color: var(--base-text-tertiary); }
.dark .onboarding-body .q-dot { background: var(--base-bg-highest); }
.dark .onboarding-body .q-dot.is-active { background: var(--bg-primary); }
.dark .onboarding-body .q-dot.is-done { background: rgba(47,140,88,0.5); }
.dark .onboarding-body .sent-section { border-bottom-color: var(--base-border-tertiary); }
.dark .onboarding-body .sent-q { color: var(--base-text); }
.dark .onboarding-body .sent-help { color: var(--base-text-secondary); }

/* Valuation reveal. The .reveal-position* overrides were removed with the widget
   itself, see the note beside .reveal-stats. The shared .estimate-disclaimer needs
   no entry here: it styles off --base-text-* / --type-*, which this bundle already
   re-points per mode, so all three modes come for free. */
.dark .onboarding-body .reveal-number,
.dark .onboarding-body .reveal-stat__value,
.dark .onboarding-body .reveal-card h3,
.dark .onboarding-body .reveal-cta__title { color: var(--base-text); }
.dark .onboarding-body .reveal-meta b { color: var(--base-text); }
.dark .onboarding-body .reveal-stat,
.dark .onboarding-body .reveal-card { background: var(--base-bg-low); border-color: var(--base-border-tertiary); }
.dark .onboarding-body .reveal-cta { background: var(--base-bg-low); border-color: var(--base-border-tertiary); }
.dark .onboarding-body .reveal-cta__pill { background: rgba(255,255,255,0.08); color: var(--base-text-secondary); }
.dark .onboarding-body .reveal-cta__pill svg { color: var(--base-text-secondary); }
.dark .onboarding-body .reveal-cta__btn { background: var(--bg-primary); color: var(--text-on-primary); }
.dark .onboarding-body .reveal-cta__btn:hover { background: var(--bg-primary-hover); }
.dark .onboarding-body .reveal-cta__list li { color: var(--base-text-secondary); }
.dark .onboarding-body .reveal-cta__foot { border-top-color: var(--base-border-tertiary); }

/* Reveal loader (analysis animation) */
.dark .onboarding-body .reveal-loader {
  background: var(--base-bg-base);
  background-image: radial-gradient(circle, var(--base-border-secondary) 1px, transparent 1px);
}
.dark .onboarding-body .reveal-loader__title { color: var(--base-text); }
.dark .onboarding-body .reveal-loader__line { color: var(--base-text-secondary); }
.dark .onboarding-body .reveal-loader__bar { background: var(--base-bg-highest); }
.dark .onboarding-body .reveal-loader__stage {
  background: var(--base-bg-low);
  border-color: var(--base-border-secondary);
  color: var(--base-text-tertiary);
}
.dark .onboarding-body .reveal-loader__stage.is-active { background: var(--bg-primary); color: var(--text-on-primary); border-color: var(--bg-primary); }
.dark .onboarding-body .reveal-loader__stage.is-done {
  background: rgba(47,140,88,0.18);
  color: var(--text-primary);
  border-color: rgba(47,140,88,0.4);
}
.dark .onboarding-body .reveal-loader__stage-sep { color: var(--base-border-secondary); }
.dark .onboarding-body .reveal-loader__stage-sep.is-passed { color: var(--text-primary); }
.dark .onboarding-body .reveal-loader__model { color: var(--base-text-tertiary); }

/* Quick-signup modal */
.dark .onboarding-body .onb-modal__backdrop { background: rgba(0,0,0,0.66); }
.dark .onboarding-body .onb-modal__panel { background: var(--base-bg-highest); }
.dark .onboarding-body .onb-modal__close { color: var(--base-text-tertiary); }
.dark .onboarding-body .onb-modal__close:hover { background: var(--base-bg-high); color: var(--base-text); }
.dark .onboarding-body .onb-modal__eyebrow,
.dark .onboarding-body .onb-modal__foot-note,
.dark .onboarding-body .onb-modal__hint,
.dark .onboarding-body .onb-modal__sent-hint { color: var(--base-text-tertiary); }
.dark .onboarding-body .onb-modal__title,
.dark .onboarding-body .onb-modal__sent .onb-modal__sub b,
.dark .onboarding-body .onb-modal__label { color: var(--base-text); }
.dark .onboarding-body .onb-modal__sub,
.dark .onboarding-body .onb-modal__sent .onb-modal__sub,
.dark .onboarding-body .onb-modal__consent,
.dark .onboarding-body .onb-modal__signin { color: var(--base-text-secondary); }
.dark .onboarding-body .onb-modal__oauth { background: var(--base-bg-low); border-color: var(--base-border-secondary); color: var(--base-text); }
.dark .onboarding-body .onb-modal__oauth:hover { background: var(--base-bg-high); }
.dark .onboarding-body .onb-modal__divider { color: var(--base-text-tertiary); }
.dark .onboarding-body .onb-modal__divider::before,
.dark .onboarding-body .onb-modal__divider::after { background: var(--base-border-tertiary); }
.dark .onboarding-body .onb-modal__consent a,
.dark .onboarding-body .onb-modal__signin a,
.dark .onboarding-body .onb-modal__sent-resend { color: var(--base-text); }
.dark .onboarding-body .onb-modal__sent-resend:hover { color: var(--base-text-secondary); }

/* ══════════════════════════════════════════════════════════════════════
   BUYER ONBOARDING STEPPER (v2 design language)
   Full-screen intro + 4-question stepper. Matches the "Buyer Onboarding
   Prototype" from Dental Deals Design System v2 (teal #0EA184 + Plus Jakarta
   Sans display), so its palette is defined locally here — NOT the marketing
   green (#29804E) — and stays scoped to .buyer-setup. Light-mode only, like
   the rest of this wizard. See docs/dashboard-redesign-design-system.md.
   ══════════════════════════════════════════════════════════════════════ */
.buyer-setup {
  --bs-green: #0EA184;   --bs-green-600: #0B8770; --bs-green-700: #0A6E5C;
  --bs-tint: #E7F7F1;    --bs-tint-2: #C4EBDF;
  --bs-ink: #222222;     --bs-ink-2: #484848;
  --bs-muted: #5E5E5E;   --bs-muted-2: #767676;   --bs-faint: #A0A0A0;
  --bs-line: #EBEBEB;    --bs-line-2: #DDDDDD;     --bs-wash: #F7F7F7;
  --bs-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  height: calc(100dvh - 64px);
  display: flex;
  flex-direction: column;
  background: #fff;
}
.onboarding-body.is-native .buyer-setup { height: 100dvh; }
.buyer-setup__form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.buyer-setup__body { flex: 1; min-height: 0; overflow-y: auto; }

/* Header extras (rendered in the layout's nav_right, outside .buyer-setup) */
.buyer-setup__saveexit {
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: var(--text-base); font-weight: 600; color: #0EA184;
  text-decoration: underline; text-underline-offset: 3px;
}
.buyer-setup__saveexit:hover { color: #0B8770; }

/* Icons + animations */
.buyer-setup .bs-ic { width: 18px; height: 18px; flex: none; }
.buyer-setup .bs-ic--brand { color: var(--bs-green); }
@keyframes bs-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bs-pop  { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

/* Step visibility */
.bs-step { display: none; }
.bs-question.is-active { display: block; animation: bs-fade .25s ease; }
.bs-intro.is-active { display: grid; animation: bs-fade .25s ease; }

.bs-eyebrow {
  font-size: var(--text-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bs-green-700); margin-bottom: 16px;
}

/* ---- Intro (split screen) ---- */
.bs-intro { grid-template-columns: 1fr 1fr; min-height: 100%; }
.bs-intro__copy { padding: 60px 54px; display: flex; flex-direction: column; justify-content: center; }
.bs-intro__title {
  font-family: var(--bs-display); font-size: var(--text-3xl); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.12; color: var(--bs-ink); margin: 0 0 16px;
}
.bs-intro__lede { font-size: var(--text-lg); line-height: 1.6; color: var(--bs-muted); margin: 0 0 28px; max-width: 42ch; }
.bs-intro__points { list-style: none; padding: 0; margin: 34px 0 0; display: flex; gap: 22px; }
.bs-intro__points li { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); color: var(--bs-muted-2); }
.bs-intro__art {
  position: relative; background: var(--bs-wash); border-left: 1px solid var(--bs-wash);
  display: flex; align-items: center; justify-content: center; padding: 40px; overflow: hidden;
}
.bs-intro__art-glow { position: absolute; inset: 0; background: radial-gradient(circle at 68% 26%, var(--bs-tint), var(--bs-wash) 62%); }
.bs-preview { position: relative; width: 270px; display: grid; gap: 12px; }
.bs-preview__card { background: #fff; border: 1px solid var(--bs-line); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,.08); }
.bs-preview__thumb { height: 66px; background: linear-gradient(135deg, var(--bs-tint), var(--bs-wash)); position: relative; }
.bs-preview__badge { position: absolute; top: 9px; left: 10px; font-size: var(--text-2xs); font-weight: 700; background: #15803D; color: #fff; border-radius: 999px; padding: 3px 9px; }
.bs-preview__body { padding: 12px 14px; }
.bs-preview__price { font-size: var(--text-xl); font-weight: 700; color: var(--bs-green-700); }
.bs-preview__meta { font-size: var(--text-sm); color: var(--bs-muted-2); }
.bs-preview__row { background: #fff; border: 1px solid var(--bs-line); border-radius: 12px; padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; font-size: var(--text-base); font-weight: 600; color: var(--bs-ink); }
.bs-preview__row-price { color: var(--bs-green-700); font-weight: 700; }

/* ---- Question shell ---- */
.bs-q { max-width: 620px; margin: 0 auto; padding: 48px 32px 32px; }
.bs-q--wide { max-width: 760px; }
.bs-q__count { font-size: var(--text-base); font-weight: 700; color: var(--bs-faint); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.bs-q__title { font-family: var(--bs-display); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; color: var(--bs-ink); margin: 0 0 6px; }
.bs-q__sub { font-size: var(--text-lg); color: var(--bs-muted-2); margin: 0 0 24px; }
.bs-field-error { margin-top: 12px; font-size: var(--text-base); font-weight: 600; color: #C13515; }
.bs-alert { margin: 0 0 18px; padding: 12px 16px; border-radius: 10px; background: #FEF2F2; border: 1px solid #FBD5D5; color: #C13515; font-size: var(--text-base); }
.bs-alert ul { margin: 0; padding-left: 18px; }

/* ---- Q1 buyer-type cards ---- */
.bs-cards { display: grid; gap: 12px; }
.bs-card {
  text-align: left; cursor: pointer; font: inherit; display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: 12px; background: #fff; border: 1.5px solid var(--bs-line);
  transition: border-color .15s, background .15s;
}
.bs-card:hover { border-color: var(--bs-tint-2); }
.bs-card.is-selected { background: var(--bs-tint); border-color: var(--bs-green); }
.bs-card__icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--bs-wash); color: var(--bs-green); }
.bs-card.is-selected .bs-card__icon { background: #fff; }
.bs-card__icon .bs-ic { width: 22px; height: 22px; }
.bs-card__text { flex: 1; }
.bs-card__title { display: block; font-size: var(--text-lg); font-weight: 600; color: var(--bs-ink); }
.bs-card__desc { display: block; font-size: var(--text-base); color: var(--bs-muted-2); margin-top: 2px; }
.bs-card__check { width: 24px; height: 24px; border-radius: 999px; background: var(--bs-green); color: #fff; display: none; align-items: center; justify-content: center; flex: none; }
.bs-card__check .bs-ic { width: 15px; height: 15px; }
.bs-card.is-selected .bs-card__check { display: flex; animation: bs-pop .2s ease; }

/* ---- Q2 specialty pills ---- */
.bs-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.bs-pill {
  cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; font-size: var(--text-md); font-weight: 600;
  background: #fff; border: 1.5px solid var(--bs-line); color: var(--bs-ink-2); transition: .15s;
}
.bs-pill:hover { border-color: var(--bs-tint-2); }
.bs-pill.is-on { background: var(--bs-tint); border-color: var(--bs-green); color: var(--bs-green-700); }
.bs-pill__check { width: 15px; height: 15px; color: var(--bs-green); display: none; }
.bs-pill.is-on .bs-pill__check { display: inline-flex; }

/* ---- Q3 zones (real alert-zones, v2 accent) ---- */
.bs-zones__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bs-zones__label { font-size: var(--text-md); font-weight: 600; color: var(--bs-ink-2); }
.buyer-setup .onb-zones-list { margin: 0; }
.buyer-setup .onb-zones-map { margin-top: 14px; border-radius: 12px; border-color: var(--bs-line); background: var(--bs-wash); }
.buyer-setup .onb-input:focus,
.buyer-setup .form-control:focus { border-color: var(--bs-green); box-shadow: 0 0 0 3px rgba(14,161,132,.15); outline: none; }

/* ---- Q4 budget ---- */
.bs-budget { display: grid; gap: 10px; }
.bs-budget__row {
  text-align: left; cursor: pointer; font: inherit; display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 11px; background: #fff; border: 1.5px solid var(--bs-line); transition: .15s;
}
.bs-budget__row:hover { border-color: var(--bs-tint-2); }
.bs-budget__row.is-selected { background: var(--bs-tint); border-color: var(--bs-green); }
.bs-radio { width: 20px; height: 20px; border-radius: 999px; flex: none; border: 2px solid #C2C2C2; display: flex; align-items: center; justify-content: center; }
.bs-budget__row.is-selected .bs-radio { border-color: var(--bs-green); }
.bs-radio__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--bs-green); transform: scale(0); transition: transform .15s; }
.bs-budget__row.is-selected .bs-radio__dot { transform: scale(1); }
.bs-budget__label { font-size: var(--text-lg); font-weight: 600; color: var(--bs-ink); }

/* ---- Footer ---- */
.bs-foot { display: flex; align-items: center; gap: 20px; padding: 16px 24px; border-top: 1px solid var(--bs-wash); background: #fff; flex: none; }
.bs-foot[hidden] { display: none; }
.bs-progress { flex: 1; display: flex; gap: 7px; }
.bs-seg { flex: 1; height: 6px; border-radius: 999px; background: var(--bs-line); transition: background .2s; }
.bs-seg.is-on { background: var(--bs-green); }

/* ---- Buttons ---- */
.bs-btn { cursor: pointer; font: inherit; border-radius: 999px; font-weight: 600; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.bs-btn--primary { background: var(--bs-green); color: #fff; border-color: var(--bs-green); font-size: var(--text-md); padding: 10px 24px; box-shadow: 0 1px 0 0 rgba(255,255,255,.2) inset; }
.bs-btn--primary:hover { background: var(--bs-green-600); border-color: var(--bs-green-600); }
.bs-btn--primary:disabled { background: var(--bs-line); border-color: var(--bs-line); color: var(--bs-faint); cursor: not-allowed; box-shadow: none; }
.bs-btn--lg { font-size: var(--text-lg); padding: 13px 26px; }
.bs-btn--back { background: #fff; border: 1px solid var(--bs-line-2); color: var(--bs-ink-2); font-size: var(--text-md); padding: 10px 20px; }
.bs-btn--back:hover { border-color: #bbb; }
.bs-btn--outline { background: #fff; border: 1px solid var(--bs-line-2); color: var(--bs-ink-2); }
.bs-btn--outline:hover { border-color: var(--bs-green); color: var(--bs-green-700); }
.bs-btn--sm { font-size: var(--text-base); padding: 8px 14px; display: inline-flex; align-items: center; gap: 6px; }
.bs-btn--sm .bs-ic { width: 15px; height: 15px; }

/* Keep the Userback "Feedback" FAB clear of the stepper's Next/submit button —
   both hug the bottom-right corner. Lift the widget above the footer. Scoped to
   the stepper via :has(.buyer-setup); a no-op when the widget isn't present.
   Higher specificity + !important to beat Userback's own bottom:8px rule.

   The lift is per-surface because the footers are not the same height: the v3
   seller shell puts a 4px act bar on top of its 88px bar, and at 88px the FAB
   sat exactly on the progress strip.

   Declared on the BODY, not on .onb-s: #userback_button_container is a sibling of
   the shell, so a custom property set on the shell never reaches it. */
body.onboarding-body:has(.onb-s) { --onb-fab-bottom: 92px; }

/* On a phone the seller footer's bar drops its fixed height and wraps, growing to
   about 99px, so the desktop lift would put the FAB back on top of the content.
   Measured at 390px, not guessed. */
@media (max-width: 767px) {
  body.onboarding-body:has(.onb-s) { --onb-fab-bottom: 100px; }
}

body.onboarding-body:is(:has(.buyer-setup), :has(.onb-v2), :has(.onb-s)) > #userback_button_container,
body.onboarding-body:is(:has(.buyer-setup), :has(.onb-v2), :has(.onb-s)) > #userback_button_container .userback-button,
body.onboarding-body:is(:has(.buyer-setup), :has(.onb-v2), :has(.onb-s)) > #userback_button_container [class*="userback-button"]:not(.userback-button-content),
body.onboarding-body:is(:has(.buyer-setup), :has(.onb-v2), :has(.onb-s)) > #userback_button_container button,
body.onboarding-body:is(:has(.buyer-setup), :has(.onb-v2), :has(.onb-s)) > #userback_button_container [role="button"] {
  bottom: var(--onb-fab-bottom, 88px) !important;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .bs-intro { grid-template-columns: 1fr; }
  .bs-intro__art { display: none; }
  .bs-intro__copy { padding: 40px 28px; }
  .bs-intro__title { font-size: var(--text-2xl); }
}
@media (max-width: 640px) {
  .buyer-setup__saveexit { white-space: nowrap; }
  .bs-q { padding: 32px 20px 24px; }
  .bs-q__title { font-size: var(--text-xl); }
  .bs-intro__copy { padding: 32px 20px; }
  .bs-intro__title { font-size: var(--text-xl); }
  .bs-intro__points { flex-direction: column; gap: 10px; }
  .bs-foot { gap: 12px; padding: 12px 16px; }
  .bs-btn--back { padding: 10px 14px; }
  .bs-btn--primary { padding: 10px 16px; }
}
/* ══════════════════════════════════════════════════════════════════════════
   SIGNED-IN SETUP — the design's four-question IA (.onb-v2)
   Source: Buyer Onboarding Prototype, role: seller. Measured off the rendered
   prototype at 1440: content column 660px centred, no rail; option cards 293x67 with
   an 11px radius and a 1.5px #EBEBEB border; a fixed bottom bar carrying Back, one
   progress segment per question, and the forward CTA.

   Rendered ONLY under .onb-theme--dashboard (see setup_v2?) so the public
   /list-a-practice funnel keeps its rail-and-card layout untouched.
   ══════════════════════════════════════════════════════════════════════════ */
.onb-v2 { display: flex; justify-content: center; padding: 56px 24px 140px; }
.onb-v2__col { width: 100%; max-width: 660px; }

.onb-v2__eyebrow {
  font-size: var(--text-md);
  color: var(--base-text-tertiary);
  margin: 0 0 6px;
}
.onb-v2__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl, 27px);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--base-text);
  margin: 0 0 4px;
}
.onb-v2__sub {
  font-size: var(--text-lg);
  color: var(--base-text-secondary);
  margin: 0 0 26px;
}
.onb-v2__grouplabel {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--base-text-tertiary);
  margin: 0 0 10px;
}
.onb-v2__error {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: var(--text-md);
  margin-bottom: 16px;
}

/* Option-card grid, 2-up (prototype: 293x67 cards in a 660 column). */
.onb-v2__opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.onb-v2__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 67px;
  padding: 0 16px;
  border: 1.5px solid var(--base-border-tertiary);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--base-text);
  transition: border-color 150ms ease, background 150ms ease;
}
.onb-v2__opt:hover { border-color: var(--color-gray-300, #d4d4d4); }
.onb-v2__opt.is-on,
.onb-v2__opt:has(input:checked) {
  border-color: var(--color-brand-green);
  background: var(--color-brand-green-75);
  color: var(--color-brand-green-deep);
}
/* The radio itself is the accessible control but visually replaced by the card. */
.onb-v2__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.onb-v2__opt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: 0 0 auto;
  background: var(--base-bg-high);
  color: var(--base-text-secondary);
}
.onb-v2__opt.is-on .onb-v2__opt-icon,
.onb-v2__opt:has(input:checked) .onb-v2__opt-icon {
  background: #fff;
  color: var(--color-brand-green);
}
.onb-v2__opt-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid var(--color-gray-300, #c2c2c2);
  flex: 0 0 auto;
}
.onb-v2__opt.is-on .onb-v2__opt-dot,
.onb-v2__opt:has(input:checked) .onb-v2__opt-dot {
  border-color: var(--color-brand-green);
  border-width: 5px;
}

/* Label/hint + counter rows (Question 4). */
.onb-v2__rows { display: flex; flex-direction: column; margin-bottom: 26px; }
.onb-v2__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--base-border-tertiary);
}
.onb-v2__row:last-child { border-bottom: 0; }
.onb-v2__row-label { display: block; font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--base-text); }
.onb-v2__row-hint { display: block; font-size: var(--text-md); color: var(--base-text-tertiary); margin-top: 2px; }
.onb-v2__counter { display: inline-flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.onb-v2__counter-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1.5px solid var(--base-border-tertiary);
  background: #fff;
  color: var(--base-text-secondary);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}
.onb-v2__counter-btn:hover:not(:disabled) { border-color: var(--color-brand-green); color: var(--color-brand-green); }
.onb-v2__counter-btn:disabled { opacity: .4; cursor: not-allowed; }
.onb-v2__counter-input {
  width: 44px;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--text-xl, 18px);
  font-weight: var(--fw-semibold);
  color: var(--base-text);
  -moz-appearance: textfield;
}
.onb-v2__counter-input::-webkit-outer-spin-button,
.onb-v2__counter-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Fixed bottom bar: Back | progress segments | forward CTA. */
.onb-v2__bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--base-border-tertiary);
  padding: 14px 24px;
  z-index: 20;
}
.onb-v2__bar-inner {
  max-width: 1392px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  /* The Userback feedback FAB is lifted vertically to bottom:88px (see the
     #userback_button_container rule above), so it floats ABOVE this bar instead of
     sitting on the Next button — no horizontal gutter needed, and Next hugs the corner. */
}
.onb-v2__back {
  flex: 0 0 auto;
  min-width: 84px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1.5px solid var(--base-border-tertiary);
  background: #fff;
  color: var(--base-text);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.onb-v2__back:hover { border-color: var(--color-gray-300, #d4d4d4); text-decoration: none; }
.onb-v2__back.is-hidden { visibility: hidden; }
.onb-v2__segs {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.onb-v2__seg {
  flex: 1 1 0;
  height: 5px;
  border-radius: 999px;
  background: var(--base-bg-high);
}
.onb-v2__seg.is-done { background: var(--color-brand-green); }
.onb-v2__next {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--color-brand-green);
  color: #fff;
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.onb-v2__next:hover { background: var(--bg-primary-hover); }

@media (max-width: 767px) {
  .onb-v2 { padding: 28px 16px 120px; }
  .onb-v2__opts { grid-template-columns: minmax(0, 1fr); }
  /* The feedback FAB stays a ~154px pill on phones (measured 174px in from the right at
     390px). Reserving that horizontally leaves too little for Back + segments + Next —
     they wrap onto three lines. So on phones the bar clears the FAB VERTICALLY instead:
     extra bottom padding lifts the controls above it, and the FAB floats in the space
     below them. No horizontal reserve needed, so the segments span the full width. */
  .onb-v2__bar { padding: 12px 16px 62px; }
  .onb-v2__bar-inner {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding-right: 0;
  }
  .onb-v2__segs { order: 1; flex: 1 0 100%; gap: 6px; }
  .onb-v2__back { order: 2; }
  .onb-v2__next { order: 3; margin-left: auto; }
}

/* ── Signed-in valuation reveal (.onb-v2--reveal) ───────────────────────────
   The design's centred hero: eyebrow, the mid figure at display scale, the likely range,
   three stat cells in a hairline box, the estimate-not-an-appraisal note, then the CTA into
   the listing. No bottom progress bar — the questions are done.

   Eyebrow AND figure are brand deep green (design #0A6E5C = --color-brand-green-deep), not
   ink — the estimate is the one thing on the screen, so the design colours it rather than
   relying on size alone. The figure stays at --text-4xl: that role is defined as "valuation
   VALUE" (typography.css), so it matches the app's other valuation heroes. The prototype's
   68px is a function of its narrow canvas (7vw), not a different role. */
.onb-v2--reveal { padding: 84px 24px 96px; }
.onb-v2__col--center { text-align: center; }

.onb-v2__reveal-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-green-deep);
  margin: 0 0 14px;
}
.onb-v2__reveal-number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-brand-green-deep);
  margin: 0 0 10px;
}
/* This is now a RANGE ("$1.6M to $2.8M", ~14 chars) rather than the single ~5-char
   figure it was built for, so it needs a ladder. 48px x 14 chars overflows a phone
   long before the container does. */
@media (max-width: 880px) { .onb-v2__reveal-number { font-size: var(--text-3xl); } }
@media (max-width: 480px) { .onb-v2__reveal-number { font-size: var(--text-2xl); } }
.onb-v2__reveal-range {
  font-size: var(--text-lg);
  color: var(--base-text-secondary);
  margin: 0 0 26px;
}
.onb-v2__reveal-range strong { color: var(--base-text); font-weight: var(--fw-semibold); }

/* Three cells inside one hairline box, split by dividers — the prototype's
   `border:1px;border-radius:12px;overflow:hidden` group. The box is what makes the trio read
   as a single spec sheet instead of three loose captions. Hairline uses the same
   --base-border-tertiary the v2 option cards use, not the prototype's raw #EBEBEB. */
.onb-v2__reveal-stats {
  display: inline-flex;
  justify-content: center;
  margin: 0 0 22px;
  border: 1px solid var(--base-border-tertiary);
  border-radius: 12px;
  overflow: hidden;
}
.onb-v2__reveal-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 22px;
  border-left: 1px solid var(--base-border-tertiary);
}
.onb-v2__reveal-stat:first-child { border-left: 0; }
.onb-v2__reveal-stat-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--base-text-tertiary);
}
.onb-v2__reveal-stat-value {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--base-text);
}

.onb-v2__reveal-note {
  max-width: 34rem;
  margin: 0 auto 28px;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--base-text-tertiary);
}

.onb-v2__reveal-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--color-brand-green);
  color: #fff;
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.onb-v2__reveal-cta:hover { background: var(--bg-primary-hover); color: #fff; text-decoration: none; }
.onb-v2__reveal-back {
  display: block;
  margin-top: 14px;
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--base-text-tertiary);
}

@media (max-width: 640px) {
  .onb-v2--reveal { padding: 44px 16px 72px; }
  /* Three cells don't fit a phone width; stack them inside the same box and turn the
     vertical dividers into horizontal rules. The box border itself stays. */
  .onb-v2__reveal-stats { display: flex; flex-direction: column; align-self: stretch; }
  .onb-v2__reveal-stat { border-left: 0; border-top: 1px solid var(--base-border-tertiary); }
  .onb-v2__reveal-stat:first-child { border-top: 0; }
}

/* ── Setup intro (.onb-v2--intro) ───────────────────────────────────────────
   The design's seller `intro` screen: a 1fr 1fr split, pitch left, an illustrative
   estimate card on a mint radial wash right. Full-bleed — it is the only setup screen
   without the centred 660px column or the bottom progress bar, because it asks nothing. */
.onb-v2--intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100dvh - var(--onb-topbar-h, 64px));
  padding: 0;
}
.onb-v2__intro-pitch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 54px;
}
.onb-v2__intro-eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-green-deep);
  margin: 0 0 16px;
}
/* --text-3xl (30px) is the display role; the prototype's 36px is not on the scale. */
.onb-v2__intro-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--base-text);
  margin: 0 0 16px;
  /* The design sets the headline over two lines. Its 36px in a narrower frame wraps on its
     own; --text-3xl (30px, the display role — 36px is off-scale) fits one line in a 720px
     half, so cap the measure to keep the design's two-line shape. */
  max-width: 22ch;
}
.onb-v2__intro-lede {
  font-size: var(--text-xl);
  line-height: 1.6;
  color: var(--base-text-secondary);
  margin: 0 0 28px;
  max-width: 42ch;
}
.onb-v2__intro-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--color-brand-green);
  color: #fff;
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.onb-v2__intro-cta:hover { background: var(--bg-primary-hover); color: #fff; text-decoration: none; }
.onb-v2__intro-points {
  display: flex;
  gap: 22px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.onb-v2__intro-point {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
  color: var(--base-text-tertiary);
}
.onb-v2__intro-point svg { color: var(--color-brand-green); flex: none; }

.onb-v2__intro-aside {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background:
    radial-gradient(circle at 68% 26%, var(--color-brand-green-75), var(--base-bg-base) 62%);
}
.onb-v2__intro-card {
  width: 262px;
  padding: 26px 30px;
  background: var(--base-bg-low, #fff);
  border: 1px solid var(--base-border-tertiary);
  border-radius: 16px;
  box-shadow: 0 2px 16px rgb(0 0 0 / 0.08);
}
.onb-v2__intro-card-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--base-text-tertiary);
  margin: 0;
}
/* Marks the figures below as illustrative — a seller lands here having answered nothing. */
.onb-v2__intro-card-tag {
  letter-spacing: 0.04em;
  color: var(--base-text-tertiary);
  background: var(--base-bg-base);
  border-radius: 999px;
  padding: 2px 7px;
}
.onb-v2__intro-card-figure {
  font-family: var(--font-display);
  /* --text-2xl, not --text-3xl: the example is a 14-char range now, and the aside
     card is narrow. */
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  color: var(--color-brand-green-deep);
  margin: 8px 0 2px;
  white-space: nowrap;
}
.onb-v2__intro-card-range {
  font-size: var(--text-base);
  color: var(--base-text-tertiary);
  margin: 0;
}
.onb-v2__intro-card-rule {
  height: 1px;
  background: var(--base-bg-base);
  margin: 16px 0;
}
.onb-v2__intro-card-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-base);
  color: var(--base-text-tertiary);
  margin: 0;
}
.onb-v2__intro-card-pct { font-weight: var(--fw-bold); color: var(--color-brand-green); }

/* Tablet and below: the aside stops being a column and sits under the pitch, so the
   estimate card still reads but never squeezes the copy into a gutter. */
@media (max-width: 1023px) {
  .onb-v2--intro { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .onb-v2__intro-pitch { padding: 44px 32px 32px; }
  .onb-v2__intro-aside { padding: 32px; }
}
@media (max-width: 640px) {
  .onb-v2__intro-pitch { padding: 32px 20px 24px; }
  .onb-v2__intro-lede { max-width: none; }
  .onb-v2__intro-points { flex-direction: column; gap: 10px; margin-top: 26px; }
  .onb-v2__intro-aside { padding: 24px 20px 32px; }
  .onb-v2__intro-card { width: 100%; max-width: 320px; }
}

/* ── Shared v3 question bodies inside the funnel's card ──────────────────────
   The public funnel renders the OLD rail-and-card chrome around the SAME question
   partials the signed-in stepper uses (branched in _setup_shell). Those fields are
   `.onb-s__*` and the v3 design draws them borderless — correct on a bare centred
   column, but inside a bordered card they read as unstyled text on a page.

   Scoped to `.onboarding-card`, so the signed-in stepper's own borderless look is
   untouched. Values are this sheet's existing field vocabulary (12px radius,
   1.5px border, mint focus ring) rather than new ones. */
.onboarding-card :is(.onb-s__search-input, .onb-s__money-input, .onb-s__input, .onb-s__textarea) {
  border: 1.5px solid var(--color-gray-200, #e5e5e5);
  border-radius: 12px;
  background: #fff;
}

.onboarding-card :is(.onb-s__search-input, .onb-s__money-input, .onb-s__input, .onb-s__textarea):focus {
  border-color: var(--color-brand-green, #205e3a);
  box-shadow: 0 0 0 3px var(--color-brand-green-75, #e7f7f1);
  outline: none;
}

/* The money field's own wrap already draws the currency prefix inside the control,
   so the border belongs to the input and the prefix must not gain a second one. */
.onboarding-card .onb-s__money-prefix {
  border: 0;
  background: transparent;
}

/* The clickable controls, same reasoning as the fields above: the v3 design draws
   option cards and counters as borderless blocks that read as grouped on a bare
   centred column, and as loose unstyled text inside a bordered card.

   The counter's BORDER belongs to the group, not to its three children: they sit
   flush inside a rounded, overflow-hidden box, so bordering each one draws three
   boxes where the design has one. Same rule the .onb-s__counter-btn focus style
   already follows. */
.onboarding-card .onb-s__opt {
  border: 1.5px solid var(--color-gray-200, #e5e5e5);
  background: #fff;
}

.onboarding-card .onb-s__opt:hover {
  border-color: var(--color-brand-green, #205e3a);
}

/* Selected. Both spellings: the preset cards toggle .is-on from Stimulus, the
   radio-backed ones only ever have their input checked. */
.onboarding-card .onb-s__opt.is-on,
.onboarding-card .onb-s__opt:has(input:checked) {
  border-color: var(--color-brand-green, #205e3a);
  box-shadow: 0 0 0 1px var(--color-brand-green, #205e3a);
}

.onboarding-card .onb-s__counter {
  border: 1.5px solid var(--color-gray-200, #e5e5e5);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* The seams between - / value / + . The group owns the outer border; these are
   the internal dividers only. */
.onboarding-card .onb-s__counter-input {
  border-left: 1px solid var(--base-border-tertiary, #ececec);
  border-right: 1px solid var(--base-border-tertiary, #ececec);
}