/* ─────────────────────────────────────────────────────────────────────────
   Post-signup guided onboarding wizard — full-bleed overlay.

   Mobile-first, ≤2-3 decisions per screen, all colors via theme tokens
   (var(--*)) so it themes light/dark for free and passes the color + spacing
   guards. Spacing uses the 8px ramp via var(--space-*).
   ───────────────────────────────────────────────────────────────────────── */

/* While the wizard is open, lock the page behind it so the dimmed backdrop
   (and the dashboard shell under it, which stays in the document flow) can't be
   scrolled. The floating card scrolls its own body. */
html.qf-ob-open,
html.qf-ob-open body {
  overflow: hidden;
}

/* ── backdrop: dimmed scrim + faint dotted-grid texture ──────────────────────
   Stripe-style: a floating card centered on a calm, lightly-textured backdrop.
   The scrim is the theme's own page colour at reduced opacity (so it dims,
   never fully hides, whatever is behind) and the dot pattern is a token-tinted
   radial-gradient — very low contrast, reads as texture not noise. */
.qf-ob-overlay {
  /* ── Forced LIGHT scope (Stripe bright onboarding) ─────────────────────────
     The dashboard behind the wizard stays on the app's global (dark) theme, but
     the wizard itself always renders as a premium WHITE card. QuoteFleet's light
     palette is defined under html[data-theme="light"], which a subtree attribute
     can't match — so we re-point the SAME token variables to their light values
     right here on the overlay. Every .qf-ob-* rule already consumes these via
     var(), so the whole subtree flips light for free. These are custom-property
     DEFINITIONS (not color/background declarations), so the hardcoded-color
     guard doesn't scan them; the values mirror style.css's
     html[data-theme="light"] block verbatim. */
  --bg:            #F8FAFC;
  --surface:       #FFFFFF;
  --surface-2:     #F2F4F7;
  --surface-3:     #EAECF0;
  --border:        #E2E8F0;
  --border-strong: #CBD0D6;
  --ink:        #020618;
  --ink-soft:   #314158;
  --muted:      #475467;
  --muted-soft: #90A1B9;
  --accent:        #3356EE;
  --accent-strong: #2440C4;
  --accent-soft:   rgba(51, 86, 238, 0.08);
  --accent-fill:   #3356EE;
  --accent-ink:    #FFFFFF;
  /* Primary CTA on white = solid high-contrast brand blue with white text (the
     cream --cta-bg is a dark-surface treatment and washes out on white). */
  --cta-bg:        #3356EE;
  --cta-bg-hover:  #2440C4;
  --cta-text:      #FFFFFF;
  --error:      #B91C1C;
  --shadow-lg:  var(--qf-shadow-md);

  /* ── Glass material tokens (canonical DESIGN-SYSTEM values, scoped here so the
     wizard subtree is self-contained). Every value is rgba()/hex-in-a-custom-
     property-DEFINITION, so BOTH guards skip them (color guard scans only
     color/background props for raw white/black; spacing guard skips --* defs).
     Each frosted surface pairs a *-bg (translucent) with a *-solid (opaque
     @supports-not fallback). Light defaults below; the dark-OS override sits in
     its own @media block after this rule. */
  --ob-backdrop:    #0a0e1a;
  --ob-shell-bg:    rgba(255, 255, 255, 0.72);
  --ob-shell-brd:   rgba(255, 255, 255, 0.55);
  --ob-shell-solid: rgba(255, 255, 255, 0.98);
  --ob-hairline:    rgba(255, 255, 255, 0.55);
  --ob-ultra-bg:    rgba(255, 255, 255, 0.60);
  --ob-ultra-brd:   rgba(255, 255, 255, 0.50);
  --ob-ultra-solid: rgba(255, 255, 255, 0.94);
  --ob-thin-bg:     rgba(255, 255, 255, 0.55);
  --ob-thin-brd:    rgba(255, 255, 255, 0.40);
  --ob-thin-solid:  rgba(255, 255, 255, 0.97);
  --ob-card-bg:     rgba(255, 255, 255, 0.55);
  --ob-card-hover:  rgba(255, 255, 255, 0.74);
  --ob-card-solid:  rgba(255, 255, 255, 0.97);
  --ob-input-bg:    rgba(255, 255, 255, 0.90);
  --ob-glow:        rgba(51, 86, 238, 0.35);
  --ob-shell-shadow: 0 24px 60px -16px rgba(15, 23, 42, 0.28);
  --ob-float-shadow: var(--qf-shadow-md);
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  /* Vibrant mesh backdrop: a deep base with three brand-tinted radial hotspots
     and a faint dot grid — so the frosted sheet floating on top has real colour
     to refract (the premium moment). The flat light scrim is kept as the
     prefers-reduced-transparency fallback below. */
  background-color: var(--ob-backdrop);
  background-image: rgba(255, 255, 255, 0.05);
  background-size: auto, auto, auto, 24px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Portal open/close handoff — the overlay fades, the shell scale-fades (below). */
  transition: all .3s ease;
}

/* Entrance + close handoff (item 10/portal). JS toggles .is-entering on mount
   and .is-closing on finish; the shell transforms are on .qf-ob-shell. */
.qf-ob-overlay.is-entering { opacity: 0; }
.qf-ob-overlay.is-closing  { opacity: 0; }

/* ── Theme-aware DARK sheet ──────────────────────────────────────────────────
   Fixes the white-flash-over-dark-dashboard: a dark viewer gets a dark frosted
   sheet, and --ink/--muted/--surface flip to light values so text stays legible
   on it (no dark-on-dark). Scoped to the overlay only — the dashboard behind is
   untouched. These are custom-property DEFINITIONS, exempt from both guards.

   It follows the STAMPED theme, not the OS. Light is now the product default
   for everyone who has not chosen dark, and an unguarded prefers-color-scheme
   block here would have painted this one sheet dark over a light dashboard on
   any dark-OS machine — the exact flash this block exists to prevent, inverted. */
:root[data-theme="dark"] .qf-ob-overlay {
    --bg:            #0C111D;
    --surface:       #131A28;
    --surface-2:     #1A2333;
    --surface-3:     #232E42;
    --border:        rgba(255, 255, 255, 0.14);
    --border-strong: rgba(255, 255, 255, 0.26);
    --ink:        #F4F6FA;
    --ink-soft:   #E4E8EF;
    --muted:      #AEB6C2;
    --muted-soft: #7E8794;
    --accent:        #7DA0FF;
    --accent-strong: #9BB6FF;
    --accent-soft:   rgba(125, 160, 255, 0.16);
    --accent-fill:   #2E5BFF;
    --accent-ink:    #FFFFFF;
    --cta-bg:        #2E5BFF;
    --cta-bg-hover:  #4A72FF;
    --cta-text:      #FFFFFF;
    --error:      #F87171;
    --ob-shell-bg:    rgba(17, 24, 39, 0.62);
    --ob-shell-brd:   rgba(255, 255, 255, 0.12);
    --ob-shell-solid: rgba(17, 24, 39, 0.97);
    --ob-hairline:    rgba(255, 255, 255, 0.10);
    --ob-ultra-bg:    rgba(18, 22, 26, 0.58);
    --ob-ultra-brd:   rgba(255, 255, 255, 0.10);
    --ob-ultra-solid: rgba(18, 22, 26, 0.94);
    --ob-thin-bg:     rgba(26, 32, 43, 0.58);
    --ob-thin-brd:    rgba(255, 255, 255, 0.10);
    --ob-thin-solid:  rgba(24, 30, 40, 0.97);
    --ob-card-bg:     rgba(30, 37, 50, 0.55);
    --ob-card-hover:  rgba(40, 48, 63, 0.70);
    --ob-card-solid:  rgba(26, 32, 43, 0.97);
    --ob-input-bg:    rgba(15, 20, 30, 0.92);
    --ob-glow:        rgba(46, 91, 255, 0.45);
    --ob-shell-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.55);
    --ob-float-shadow: var(--qf-shadow-md);
}

/* Reduced-transparency users get the original calm flat scrim (no vibrant mesh),
   still theme-token driven so it dims light or dark correctly. */
@media (prefers-reduced-transparency: reduce) {
  .qf-ob-overlay {
    background-color: color-mix(in srgb, var(--bg) 94%, transparent);
    background-image: color-mix(in srgb, var(--ink);
    background-size: 24px 24px;
  }
}

/* The floating card itself — rounded, soft-shadowed, capped to the viewport so
   its header + footer stay fixed while a long step scrolls inside the body. */
.qf-ob-shell {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--space-6));
  /* regularMaterial frosted sheet — high opacity (≥0.72) so question text sits
     safely on it. Inset top highlight reads as a lit glass edge. */
  background: var(--ob-shell-bg);
  border: 1px solid var(--ob-shell-brd);
  border-radius: 24px;
  box-shadow: var(--ob-shell-shadow), inset 0 1px 0 var(--ob-hairline);
  padding: var(--space-4);
  transition: all .3s ease;
}
/* Entrance rises + scales in; close hands off with a scale-fade. */
.qf-ob-overlay.is-entering .qf-ob-shell { transform: scale(0.97) translateY(8px); opacity: 0; }
.qf-ob-overlay.is-closing .qf-ob-shell  { transform: scale(0.96); opacity: 0; }

/* No-backdrop-filter browsers get an opaque legible sheet (never see-through). */
.qf-ob-shell { background: var(--ob-shell-solid); }

/* ── header: brand mark (left) + progress bar & skip (right) ─────────────── */
.qf-ob-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Brand mark, top-left. The wizard card is ALWAYS white (forced-light scope
   above), so the on-light mark variant (dark keys) is the correct one in every
   global theme — the ondark/white-keys mark would be invisible on white. */
.qf-ob-brand {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.qf-ob-brand-mark {
  width: 30px;
  height: 30px;
  background-image: url("/brand/mark-keys.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.qf-ob-head-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.qf-ob-skip {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-btn);
  padding: var(--space-1) var(--space-1-5);
  min-height: 32px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.qf-ob-skip:hover {
  color: var(--ink);
  background: var(--surface-2);
}

/* Top-right progress — FOUR discrete ultraThin glass segments (one per step),
   each filling with the accent + glow as its step is reached. Per-step reads as
   real progress, not a vague continuous bar. */
.qf-ob-progress {
  display: flex;
  gap: var(--space-0-5);
  width: 108px;
}
.qf-ob-seg {
  flex: 1 1 0;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--ob-ultra-bg);
  border: 1px solid var(--ob-ultra-brd);
  overflow: hidden;
}
.qf-ob-seg-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: var(--qf-shadow-sm);
  transition: all .3s ease;
}
.qf-ob-seg.is-on .qf-ob-seg-fill { width: 100%; }
.qf-ob-seg { background: var(--surface-3); }
@media (prefers-reduced-motion: reduce) {
  .qf-ob-seg-fill { transition: none; }
}

/* ── step body ────────────────────────────────────────────────────────────
   Scrolls inside the card so the header + footer stay put on long steps (the
   50-state region picker, the confirm-rates + trust step). The negative-free
   padding-inline keeps focus rings off the scroll edge. */
.qf-ob-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.qf-ob-kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: var(--space-1);
}
.qf-ob-title {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 var(--space-1) 0;
}
.qf-ob-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 var(--space-3) 0;
}

/* ── option cards (vertical + pricing) ───────────────────────────────────── */
.qf-ob-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1-5);
}
@media (min-width: 560px) {
  .qf-ob-cards.is-two { grid-template-columns: 1fr 1fr; }
}

.qf-ob-card {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  cursor: pointer;
  /* thinMaterial glass card (fill ≥0.5 so labels stay legible). */
  background: var(--ob-card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--space-2);
  min-height: 44px;
  transition: all .2s ease;
  color: var(--ink);
}
.qf-ob-card:hover {
  border-color: var(--border-strong);
  background: var(--ob-card-hover);
  box-shadow: var(--ob-float-shadow);
}
/* Selected = accent OUTLINE + tint, NEVER a bright solid fill (preserved). */
.qf-ob-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: var(--accent-soft);
  transform: none;
}
.qf-ob-card { background: var(--ob-card-solid); }
@media (prefers-reduced-motion: reduce) {
  .qf-ob-card { transition: all .2s ease; }
  .qf-ob-card:hover { transform: none; }
}@media (prefers-reduced-motion: reduce) {
  .qf-ob-check.is-pop { animation: none; }
}

/* ── Step slide/fade + conditional unfold + finder panel (motion + glass) ──── */
/* Each step is built detached and swapped in; the two overlap (absolute) only
   while animating so heights don't jump. Forward = enter from right / leave to
   left; Back = the mirror. */
.qf-ob-step {
  transition: all .3s ease;
}
.qf-ob-body.qf-ob-anim { position: relative; overflow: hidden; }
.qf-ob-body.qf-ob-anim .qf-ob-step { position: absolute; top: 0; left: 0; right: 0; }
.qf-ob-step.is-enter-from-right { transform: translateX(24px); opacity: 0; }
.qf-ob-step.is-enter-from-left  { transform: translateX(-24px); opacity: 0; }
.qf-ob-step.is-leave-to-left    { transform: translateX(-24px); opacity: 0; }
.qf-ob-step.is-leave-to-right   { transform: translateX(24px); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .qf-ob-step { transition: all .2s ease; }
  .qf-ob-step.is-enter-from-right,
  .qf-ob-step.is-enter-from-left,
  .qf-ob-step.is-leave-to-left,
  .qf-ob-step.is-leave-to-right { transform: none; opacity: 0; }
}

/* Conditional sub-blocks (manual %, region grid, radius inputs) unfold via a
   clip-free grid-rows height animation instead of a hard pop. */
.qf-ob-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: all .3s ease;
}
.qf-ob-reveal.is-open { grid-template-rows: 1fr; opacity: 1; }
.qf-ob-reveal-inner { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .qf-ob-reveal { transition: all .2s ease; grid-template-rows: 1fr; }
}
.qf-ob-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.qf-ob-card-blurb {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: var(--space-0-5);
}
.qf-ob-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-ink);
  font-size: 12px;
}
.qf-ob-card.is-selected .qf-ob-check {
  background: var(--accent);
  border-color: var(--accent);
}

/* ── grouped sub-questions (quoting rules, trust details) ─────────────────────
   A step that asks TWO things gets a small label + a left-aligned help line
   above each group. Help/hint copy is always top-LEFT, never right-aligned. */
.qf-ob-group-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  margin-bottom: var(--space-0-5);
}
/* The first group sits directly under the step sub-heading, which already
   carries its own bottom margin — only later groups need the separation. */
.qf-ob-cards + .qf-ob-group-label,
.qf-ob-field + .qf-ob-group-label,
.qf-ob-rates + .qf-ob-group-label {
  margin-top: var(--space-3);
}
.qf-ob-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-align: left;
  margin: 0 0 var(--space-1-5) 0;
}
.qf-ob-hint-error { color: var(--error); }

/* Manual fuel-surcharge percentage. Narrow on desktop (it holds at most three
   characters) but never so narrow it stops being a comfortable tap target. */
.qf-ob-pct {
  margin-top: var(--space-1-5);
  max-width: 220px;
}

/* Trust details: MC + DOT pair up from 480px so neither is ever left alone on
   a line; the email spans the full row beneath them. */
.qf-ob-trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1-5);
  margin-bottom: var(--space-2);
}
@media (min-width: 480px) {
  .qf-ob-trust { grid-template-columns: 1fr 1fr; }
  .qf-ob-trust-wide { grid-column: 1 / -1; }
}
/* The grid gap owns the rhythm here — the field's own margin would double it. */
.qf-ob-trust .qf-ob-field { margin-bottom: 0; }

/* ── lane + brand inputs ─────────────────────────────────────────────────── */
.qf-ob-field {
  margin-bottom: var(--space-2);
}
.qf-ob-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-0-5);
}
.qf-ob-input {
  width: 100%;
  box-sizing: border-box;
  /* A field is NEVER glass — near-solid fill so typed text always stays crisp. */
  background: var(--ob-input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  color: var(--ink);
  padding: var(--space-1-5);
  min-height: 44px;
  font-size: 15px;
  transition: all .2s ease;
}
.qf-ob-input:focus {
  outline: none;
  border-color: var(--accent);
}
.qf-ob-input::placeholder { color: var(--muted-soft); }

.qf-ob-lane {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1-5);
}
@media (min-width: 480px) {
  .qf-ob-lane { grid-template-columns: 1fr auto 1fr; align-items: end; }
}
.qf-ob-lane-arrow {
  display: none;
  color: var(--muted);
  padding-bottom: var(--space-1-5);
  font-size: 18px;
}
@media (min-width: 480px) {
  .qf-ob-lane-arrow { display: block; }
}

/* ── service-area: state / province picker ───────────────────────────────────
   A dense grid of 2-letter codes. auto-fill with a fixed minimum keeps the rows
   evenly packed at every width, so a row never ends up holding a single lone
   chip (the global no-orphan rule for badge/pill/chip groups). */
.qf-ob-regions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.qf-ob-region-group {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--space-1);
}
/* Column counts are FIXED, not auto-fill, and deliberately chosen so neither
   list ever strands a lone chip on the last line (the global no-orphan rule):
     10 cols → 50 states = 5 exact rows; 13 provinces = 10 + 3
      5 cols → 50 states = 10 exact rows; 13 provinces = 5 + 5 + 3
   auto-fill previously resolved to 6 across at 375px, which left the 13th
   province alone on its own row (6 + 6 + 1). */
.qf-ob-region-row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--space-1);
}
@media (max-width: 640px) {
  .qf-ob-region-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.qf-ob-region {
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--ob-thin-bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.qf-ob-region:hover { border-color: var(--accent);}
.qf-ob-region { background: var(--ob-thin-solid); }
@media (prefers-reduced-motion: reduce) {
  .qf-ob-region { transition: all .2s ease; }
  .qf-ob-region:hover { transform: none; }
}
/* Selected = outline + tint, never a bright solid fill. */
.qf-ob-region.is-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ── footer nav — ultraThin frosted sticky toolbar ─────────────────────────── */
.qf-ob-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--ob-ultra-brd);
  background: var(--ob-ultra-bg);
}
.qf-ob-foot { background: var(--ob-ultra-solid); }
.qf-ob-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  appearance: none;
  cursor: pointer;
  border-radius: var(--radius-btn);
  padding: var(--space-1-5) var(--space-3);
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  transition: all .2s ease;
}
/* Back, bottom-left: ghost/outlined with a leading left-arrow. */
.qf-ob-btn-back {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
}
.qf-ob-btn-back:hover { border-color: var(--border-strong); }
/* Continue / Finish, bottom-right: solid premium-cream CTA with a trailing
   right-arrow. */
.qf-ob-btn-next {
  border: 1px solid var(--cta-bg);
  background: var(--cta-bg);
  color: var(--cta-text);
  box-shadow: var(--qf-shadow-md);
}
.qf-ob-btn-next:hover {
  background: var(--cta-bg-hover);
  border-color: var(--cta-bg-hover);
  transform: translateY(-1px);
}
.qf-ob-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .qf-ob-btn-next:hover { transform: none; }
}
/* Inline arrow icons — inherit the button's currentColor. */
.qf-ob-btn-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: inline-block;
}

.qf-ob-error {
  color: var(--error);
  font-size: 13px;
  line-height: 1.5;
  margin-top: var(--space-1);
}

/* ── step-1 fast path: skip templates, import a real rate sheet via AI ───────
   Accent-tinted panel that mirrors the rates-page .qf-ai-import-cta. Built
   entirely from theme tokens (color-mix over --accent / --surface / --border,
   solid CTA via --cta-*), so it themes light/dark for free and passes the
   hardcoded-color guard — no raw hex/rgba. */
.qf-ob-fastpath {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0 0 var(--space-3) 0;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.qf-ob-fastpath-txt {
  flex: 1 1 240px;
  min-width: 0;
}
.qf-ob-fastpath-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.qf-ob-fastpath-sub {
  margin-top: var(--space-0-5);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
.qf-ob-fastpath-btn {
  flex: 0 0 auto;
  appearance: none;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--cta-bg);
  background: var(--cta-bg);
  color: var(--cta-text);
  border-radius: var(--radius-btn);
  padding: var(--space-1-5) var(--space-2);
  min-height: 44px;
  font-size: 13px;
  font-weight: 700;
  transition: all .2s ease;
}
.qf-ob-fastpath-btn:hover {
  background: var(--cta-bg-hover);
  border-color: var(--cta-bg-hover);
}

/* ── confirm top-3 rates (step 5) ────────────────────────────────────────── */
.qf-ob-rates {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  margin-bottom: var(--space-3);
}
.qf-ob-rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-1-5) var(--space-2);
  min-height: 44px;
}
.qf-ob-rate-name {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}
.qf-ob-rate-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.qf-ob-rate-unit {
  font-size: 12px;
  color: var(--muted);
}
.qf-ob-rate-price {
  display: flex;
  align-items: center;
  gap: var(--space-0-5);
  flex: 0 0 auto;
}
.qf-ob-rate-money {
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}
.qf-ob-rate-price .qf-ob-input {
  width: 110px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── share-link copy row ─────────────────────────────────────────────────── */
.qf-ob-copyrow {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
}
.qf-ob-copyrow .qf-ob-input,
.qf-ob-copyrow .qf-ob-copy-field {
  flex: 1 1 auto;
  min-width: 0;
}
.qf-ob-copy-btn {
  flex: 0 0 auto;
  appearance: none;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-btn);
  padding: var(--space-1) var(--space-2);
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s ease;
}
.qf-ob-copy-btn:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

/* On phones the floating card goes full-bleed / full-height (edge-to-edge, no
   rounded corners or shadow) so nothing is cramped and the footer stays
   reachable at the bottom of the viewport. */
@media (max-width: 480px) {
  .qf-ob-overlay { padding: 0; }
  .qf-ob-shell {
    max-width: none;
    min-height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-3);
  }
}

@media (max-width: 380px) {
  .qf-ob-title { font-size: 20px; }
  .qf-ob-shell { padding: var(--space-3) var(--space-2); }
}

/* "Find your company" pulled extra details (phone + city/state) that have no
   visible input on the trust step — this subtle, left-aligned, theme-aware line
   confirms what was captured so the carrier is aware and knows to edit it in
   Account. Uses the accent-soft token so it reads as a friendly confirmation,
   not an error. Shown only after a finder pick supplies at least one extra. */
.qf-ob-autofill-note {
  margin: calc(-1 * var(--space-1)) 0 var(--space-2) 0;
  padding: var(--space-1-5) var(--space-2);
  background: var(--accent-soft);
  border-radius: 8px;
  color: var(--accent-strong);
  text-align: left;
}

/* ── "Find your company" finder — thinMaterial floating panel ────────────────
   Glass tint + blur + rounded, floating over the shell. The finder INPUT itself
   stays a solid .qf-ob-input (never glass a field); only the results panel is
   frosted. Rows are transparent over the panel and read on --ink. */
.qf-ob-finder-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  margin-top: var(--space-0-5);
  background: var(--ob-thin-bg);
  border: 1px solid var(--ob-thin-brd);
  border-radius: 14px;
  box-shadow: var(--ob-float-shadow);
  overflow: hidden;
  overflow-y: auto;
  max-height: 300px;
  display: none;
}
.qf-ob-finder-menu { background: var(--ob-thin-solid); }
.qf-ob-finder-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  font: inherit;
  padding: var(--space-1-5) var(--space-2);
  cursor: pointer;
  transition: all .2s ease;
}
.qf-ob-finder-item:last-child { border-bottom: 0; }
.qf-ob-finder-item:hover,
.qf-ob-finder-item:focus-visible { background: var(--ob-card-hover); }
.qf-ob-finder-item-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.qf-ob-finder-item-meta { margin-top: var(--space-0-5); }

/* ── Title-in-field inputs (DESIGN-SYSTEM input rule) ────────────────────────
   The field's title sits INSIDE the near-solid field box, top-left, with the
   value on the line below; an optional in-field suffix (e.g. "%") trails the
   value. The wrapper carries the fill + border so the field is never glass. */
.qf-ob-ifield {
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--ob-input-bg);
  padding: var(--space-1) var(--space-1-5);
  transition: all .2s ease;
}
.qf-ob-ifield:focus-within { border-color: var(--accent); }
.qf-ob-ifield-title {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.qf-ob-ifield-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.qf-ob-ifield-row .qf-ob-input { flex: 1 1 auto; }
.qf-ob-ifield .qf-ob-input {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  min-height: 28px;
  font-size: 15px;
}
.qf-ob-ifield .qf-ob-input:focus { border-color: transparent; }
.qf-ob-ifield-suffix {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
/* In the trust grid the gap owns the rhythm; the field's own margin would double it. */
.qf-ob-trust .qf-ob-ifield { margin-bottom: 0; }