/* The onboarding, v3 Lean (R86, 11 October 2026): shared/onboarding.js. Henry's handoff of 10 October fixes every value
   here (its README, "Shell" and "Screens", and the prototype "Onboarding v3 Lean"): the desk, the white shell with the
   slim blue bar on its top edge, Back, the brand and a quiet Skip, then one step at a time in a 728px column (1040 for
   the film). Three dark steps (the film, the counting, the market) turn the shell to the ground colour; the shell stays
   on the page between steps, so it cross-fades. Every rule is under .ob and reads the app's tokens (app.css :root) with
   the same values as fallbacks, so /start/, which does not load app.css, looks the same. 390px phones to 1440 desktops,
   one screen each (R67): a step's answers scroll inside it on a screen too short for them, its buttons stay in view.
   Reduced motion: nothing moves. */
.ob {
  --ob-ink: var(--ink, #201E1D); --ob-paper: var(--paper, #F3F2F2); --ob-ground: #0f0e0e; --ob-blue: var(--blue, #4169E1); --ob-blue-hover: var(--blue-hover, #2F51B8);
  --ob-blue-light: #8FA7F0; --ob-tint: var(--tint, #EEF2FC); --ob-red: var(--red, #9b2c2c); --ob-muted: var(--muted, #6b6a66); --ob-desk: var(--desk, #dedbd7);
  --ob-body: var(--body, #3f3e3b); --ob-fill: var(--fill, #e6e4e1); --ob-subtle: var(--subtle, #faf9f8);
  --ob-serif: var(--serif, "Instrument Serif", Georgia, serif); --ob-sans: var(--sans, "Instrument Sans", system-ui, sans-serif); --ob-ease: var(--ease, cubic-bezier(.2,.7,.2,1));
  --ob-line: rgba(32,30,29,.1); --ob-edge: rgba(32,30,29,.16);
  position: relative; box-sizing: border-box; height: 100vh; height: 100dvh; overflow: hidden; padding: 18px;
  height: calc(100dvh - var(--ac-consent-h, 0px)); /* U, 7 October 2026: and ends above the cookie banner until it is answered (consent.js), here and in the app's cover, so Next is never under it */
  background: var(--ob-desk); color: var(--ob-ink); font: 400 14px/1.5 var(--ob-sans); -webkit-font-smoothing: antialiased; text-align: left;
}
.ob *, .ob *::before, .ob *::after { box-sizing: border-box; }
.ob[hidden], .ob [hidden] { display: none !important; }
/* In the app it covers the shell, the gate and the phone notice (z-index 20) alike, and never scrolls. */
.ob.ob-app { position: fixed; inset: 0; z-index: 30; overflow: hidden; overscroll-behavior: contain; }
.ob :where(button), .ob :where(select), .ob :where(input) { font: inherit; color: inherit; } /* R117: :where(), so each control's own type and colour (.ob-chip, .ob-btn, .ob-back, .ob-skip, .ob-select...) win over this reset, as the handoff gives them; as `.ob button` it outranked them all */
.ob :focus-visible { outline: 2px solid var(--ob-blue); outline-offset: 2px; }
.ob .ob-h:focus, .ob .ob-h:focus-visible { outline: none; } /* the heading takes the focus on arrival, for the screen reader; no ring */
.ob-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* ── the shell ─────────────────────────────────────────────────────────── */
.ob-shell { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; border: 1px solid rgba(32,30,29,.14); border-radius: 12px; background: #fff; color: var(--ob-ink); box-shadow: 0 16px 48px rgba(32,30,29,.13); transition: background .35s, color .35s, border-color .35s; }
.ob-shell.dark { border-color: var(--ob-ground); background: var(--ob-ground); color: var(--ob-paper); }
.ob-bar { height: 3px; flex: none; overflow: hidden; background: var(--ob-fill); transition: background .35s; }
.ob-shell.dark .ob-bar { background: rgba(243,242,242,.14); }
.ob-bar i { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--ob-blue); transition: width .45s var(--ob-ease); }
.ob-frame { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ob-top { flex: none; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); grid-auto-rows: minmax(34px, auto); align-items: center; gap: 10px; padding: 12px 16px 0; } /* a row of 34px with or without Back and Skip, so the brand never moves */
.ob-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; opacity: .7; font: 600 13px/1 var(--ob-sans); cursor: pointer; transition: opacity .16s, background .16s; }
.ob-back:hover { opacity: 1; background: rgba(127,127,127,.12); }
.ob-brand { grid-column: 2; display: inline-flex; align-items: center; gap: 9px; font: 400 19px/1 var(--ob-serif); letter-spacing: -.01em; white-space: nowrap; }
.ob-brand img { display: block; width: 26px; height: 26px; }
.ob-skip { grid-column: 3; justify-self: end; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ob-muted); font: 500 13px/1 var(--ob-sans); white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(32,30,29,.25); text-underline-offset: 3px; cursor: pointer; transition: color .16s; }
.ob-skip:hover { color: var(--ob-ink); }
.ob-shell.dark .ob-skip { color: rgba(243,242,242,.6); text-decoration-color: rgba(243,242,242,.25); }
.ob-shell.dark .ob-skip:hover { color: var(--ob-paper); }
/* R117: the top bar's right cell (Save and finish later, Skip, the counter), and the counter: a 64 x 4 bar and "3 of 8". */
.ob-top-r { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ob-save .ob-narrow { display: none; }
.ob-counter { display: inline-flex; align-items: center; gap: 8px; padding-left: 4px; font: 500 12.5px/1 var(--ob-sans); font-variant-numeric: tabular-nums; color: var(--ob-muted); white-space: nowrap; }
.ob-counter > i { display: block; width: 64px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--ob-fill); }
.ob-counter > i > i { display: block; height: 100%; border-radius: 2px; background: var(--ob-blue); transition: width .45s var(--ob-ease); }
.ob-shell.dark .ob-counter { color: rgba(243,242,242,.6); }
.ob-shell.dark .ob-counter > i { background: rgba(243,242,242,.14); }
.ob-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: 728px; margin: 0 auto; padding: 30px 24px 28px; container-type: inline-size; }
.ob-body.wide { max-width: 1040px; }
.ob-step { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.ob-enter .ob-h, .ob-enter .ob-sub, .ob-enter .ob-main { animation: obUp .42s var(--ob-ease) both; }
.ob-enter .ob-sub { animation-delay: .04s; }
.ob-enter .ob-strip { animation: obUp .42s var(--ob-ease) .06s both; }
.ob-enter .ob-main { animation-delay: .08s; }
@keyframes obUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── words ─────────────────────────────────────────────────────────────── */
.ob-eyebrow { margin: 0 0 12px; font: 600 10.5px/1 var(--ob-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ob-blue); }
.ob-shell.dark .ob-eyebrow { color: var(--ob-blue-light); }
.ob-h { margin: 0; font: 400 42px/1.05 var(--ob-serif); font-size: clamp(29px, 6.4cqw, 42px); letter-spacing: -.018em; text-wrap: balance; } /* R117: v4's 6.4cqw of the question's column */
.ob-sub { margin: 12px 0 0; max-width: 56ch; font: 400 15px/1.5 var(--ob-sans); color: var(--ob-muted); }
.ob-shell.dark .ob-sub { color: rgba(243,242,242,.7); }
.ob-note { margin: 10px 0 0; font: 400 12.5px/1.5 var(--ob-sans); color: var(--ob-muted); }
.ob-note-back { margin: 18px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--ob-tint); color: var(--ob-blue-hover); font: 500 13.5px/1.45 var(--ob-sans); }
.ob-error { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(155,44,44,.3); border-left: 3px solid var(--ob-red); border-radius: 10px; background: #fff; }
.ob-error p { margin: 0 0 8px; color: var(--ob-red); font: 500 13.5px/1.5 var(--ob-sans); }
.ob-error p:last-child { margin-bottom: 0; }
.ob-error .ob-btn { height: 34px; padding: 0 14px; font-size: 13px; box-shadow: none; }
.ob-field-err { margin: 8px 2px 0; color: var(--ob-red); font: 500 13px/1.4 var(--ob-sans); }

/* ── the answers, between the question and the buttons (R67) ──────────── */
.ob-main { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px 6px; scrollbar-width: thin; }
.ob-main.film { flex: 1 1 auto; container-type: size; overflow: hidden; }
/* R67: answers that scroll fade at the edge that has more beyond it (onboarding.js edges). */
.ob-main[data-more] { -webkit-mask-image: var(--ob-fade); mask-image: var(--ob-fade); }
.ob-main[data-more="below"] { --ob-fade: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); }
.ob-main[data-more="above"] { --ob-fade: linear-gradient(to top, #000 calc(100% - 28px), transparent); }
.ob-main[data-more="above below"] { --ob-fade: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 44px), transparent); }

/* ── buttons ───────────────────────────────────────────────────────────── */
.ob-acts { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 26px; padding-bottom: env(safe-area-inset-bottom); }
.ob-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border: 1.5px solid rgba(32,30,29,.22); border-radius: 10px; background: #fff; color: var(--ob-ink); font: 600 14.5px/1 var(--ob-sans); white-space: nowrap; cursor: pointer; transition: transform .16s, background .16s, border-color .16s, box-shadow .16s; }
.ob-btn.primary { border-color: var(--ob-blue); background: var(--ob-blue); color: #fff; box-shadow: 0 6px 16px rgba(65,105,225,.26); }
.ob-btn.primary:hover { border-color: var(--ob-blue-hover); background: var(--ob-blue-hover); transform: translateY(-1px); }
.ob-btn.primary[disabled] { border-color: var(--ob-fill); background: var(--ob-fill); color: var(--ob-muted); box-shadow: none; cursor: not-allowed; transform: none; }
.ob-shell.dark .ob-btn.primary[disabled] { border-color: rgba(243,242,242,.14); background: rgba(243,242,242,.14); color: rgba(243,242,242,.6); }
.ob-quiet { height: 46px; padding: 0 6px; border: 0; background: transparent; color: var(--ob-muted); font: 500 13.5px/1 var(--ob-sans); text-decoration: underline; text-decoration-color: rgba(32,30,29,.25); text-underline-offset: 3px; cursor: pointer; transition: color .16s; }
.ob-quiet:hover { color: var(--ob-ink); }
.ob-status { font: 500 13.5px/1.4 var(--ob-sans); color: rgba(243,242,242,.55); }
.ob-toggle { display: block; align-self: flex-start; margin-top: 18px; padding: 6px 2px; border: 0; background: transparent; color: var(--ob-muted); font: 500 13.5px/1.3 var(--ob-sans); text-align: left; text-decoration: underline; text-decoration-color: rgba(32,30,29,.25); text-underline-offset: 3px; cursor: pointer; transition: color .16s; }
.ob-toggle:hover, .ob-toggle.on { color: var(--ob-ink); text-decoration-color: currentColor; }

/* ── choices, chips, cards ─────────────────────────────────────────────── */
.ob-choices { display: grid; gap: 10px; margin-top: 28px; }
.ob-choice { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 58px; padding: 14px 16px 14px 18px; border: 1.5px solid var(--ob-edge); border-radius: 12px; background: #fff; color: var(--ob-ink); font: 600 15.5px/1.35 var(--ob-sans); text-align: left; cursor: pointer; transition: border-color .16s, background .16s, transform .16s, color .16s; }
.ob-choice:hover { border-color: var(--ob-blue); transform: translateY(-1px); }
.ob-choice.on { border-color: var(--ob-blue); background: var(--ob-tint); color: var(--ob-blue-hover); }
.ob-choice-l { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.ob-choice-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--ob-subtle); color: var(--ob-ink); transition: background .16s, color .16s; }
.ob-choice.on .ob-choice-ico, .ob-buyer.on .ob-choice-ico { background: #fff; color: var(--ob-blue-hover); }
.ob-tick { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid rgba(32,30,29,.24); border-radius: 50%; background: #fff; color: transparent; transition: background .16s, border-color .16s, color .16s; }
.ob-tick.sm { width: 20px; height: 20px; }
.on > .ob-tick, .on > .ob-plan-top > .ob-tick { border-color: var(--ob-blue); background: var(--ob-blue); color: #fff; }
.ob-two { grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); margin-top: 16px; } /* R117: v4's 260, two across beside the rail */
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ob-chip { min-height: 40px; padding: 0 16px; border: 1.5px solid rgba(32,30,29,.18); border-radius: 999px; background: #fff; color: var(--ob-ink); font: 600 13.5px/1.2 var(--ob-sans); cursor: pointer; transition: transform .16s, border-color .16s, background .16s, color .16s; }
.ob-chip:hover { border-color: var(--ob-blue); transform: translateY(-1px); }
.ob-chip.on { border-color: var(--ob-blue); background: var(--ob-tint); color: var(--ob-blue-hover); }
.ob-chip[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.ob-buyers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 10px; margin-top: 26px; } /* R117: v4's 260 */
.ob-buyer { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1.5px solid var(--ob-edge); border-radius: 13px; background: #fff; color: var(--ob-ink); text-align: left; cursor: pointer; transition: border-color .16s, background .16s, transform .16s; }
.ob-buyer:hover { border-color: var(--ob-blue); transform: translateY(-1px); }
.ob-buyer.on { border-color: var(--ob-blue); background: var(--ob-tint); }
.ob-buyer-t { min-width: 0; }
.ob-buyer-t b { display: block; font: 600 16px/1.3 var(--ob-sans); }
.ob-buyer.on .ob-buyer-t b { color: var(--ob-blue-hover); }
.ob-buyer-t span { display: block; margin-top: 4px; font: 400 13.5px/1.45 var(--ob-sans); color: var(--ob-muted); }

/* ── the budget ────────────────────────────────────────────────────────── */
.ob-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; font: 500 13.5px/1 var(--ob-sans); color: var(--ob-muted); }
.ob-select { height: 34px; max-width: 100%; padding: 0 30px 0 12px; border: 1.5px solid rgba(32,30,29,.18); border-radius: 999px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23201E1D' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat right 12px center; color: var(--ob-ink); font: 600 13px/1 var(--ob-sans); cursor: pointer; appearance: none; -webkit-appearance: none; }
.ob-select:hover { border-color: var(--ob-blue); }
.ob-money { display: flex; align-items: center; gap: 10px; height: 52px; margin-top: 10px; padding: 0 16px; border: 1.5px solid var(--ob-blue); border-radius: 12px; background: #fff; box-shadow: 0 0 0 3px var(--ob-tint); }
.ob-money-cur { flex: none; font: 600 13px/1 var(--ob-sans); letter-spacing: .04em; color: var(--ob-muted); }
.ob-money input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--ob-ink); font: 600 17px/1 var(--ob-sans); -moz-appearance: textfield; appearance: textfield; }
.ob-money input::-webkit-inner-spin-button, .ob-money input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ob .ob-money input:focus-visible { outline: none; } /* the field's own frame shows the focus */
/* R117: the dealer's weekly spend. The readout, then two range inputs over one 4px track, transparent but for their
   thumbs (the only part that takes the pointer), the blue span between the handles from --lo and --hi. */
.ob-spend { display: block; margin-top: 28px; font: 400 44px/1 var(--ob-serif); font-size: clamp(30px, 7cqw, 44px); letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--ob-ink); }
.ob-dual { position: relative; height: 36px; margin-top: 22px; }
.ob-dual-track, .ob-dual-fill { position: absolute; top: 16px; height: 4px; border-radius: 2px; }
.ob-dual-track { left: 0; right: 0; background: var(--ob-fill); }
.ob-dual-fill { left: var(--lo); right: var(--hi); background: var(--ob-blue); }
.ob .ob-dual input { position: absolute; inset: 0; width: 100%; height: 36px; margin: 0; padding: 0; background: transparent; pointer-events: none; outline: none; -webkit-appearance: none; appearance: none; }
.ob-dual input::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.ob-dual input::-moz-range-track { height: 4px; background: transparent; }
.ob-dual input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 22px; height: 22px; margin-top: -9px; border: 3px solid #fff; border-radius: 50%; background: var(--ob-blue); box-shadow: 0 0 0 1px rgba(32,30,29,.12), 0 2px 6px rgba(32,30,29,.2); pointer-events: auto; cursor: grab; }
.ob-dual input::-moz-range-thumb { box-sizing: border-box; width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; background: var(--ob-blue); box-shadow: 0 0 0 1px rgba(32,30,29,.12), 0 2px 6px rgba(32,30,29,.2); pointer-events: auto; cursor: grab; }
.ob-dual input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--ob-tint), 0 2px 6px rgba(32,30,29,.2); }
.ob-dual input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--ob-tint), 0 2px 6px rgba(32,30,29,.2); }
.ob .ob-dual input:focus-visible { outline: none; } /* the thumb's ring shows the focus */

/* ── R117: the Business step (dealers) ────────────────────────────────── */
.ob-biz { display: grid; gap: 22px; margin-top: 24px; }
.ob-group { display: grid; gap: 10px; min-width: 0; }
.ob-group.ob-name { gap: 8px; }
.ob-label { font: 600 13.5px/1.3 var(--ob-sans); color: var(--ob-ink); }
.ob-label span { font-weight: 400; color: var(--ob-muted); }
.ob-hint { font: 400 12.5px/1.5 var(--ob-sans); color: var(--ob-muted); }
.ob-group .ob-chips { margin-top: 0; }
.ob .ob-text { display: block; width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid rgba(32,30,29,.18); border-radius: 12px; background: #fff; color: var(--ob-ink); font: 600 16px/1 var(--ob-sans); outline: none; transition: border-color .16s, box-shadow .16s; }
.ob .ob-text:focus, .ob .ob-text.ob-other { border-color: var(--ob-blue); box-shadow: 0 0 0 3px var(--ob-tint); }
.ob .ob-text.ob-other { height: 46px; font-size: 15px; } /* an Other's field opens already focused-looking */
.ob .ob-text:focus-visible { outline: none; } /* the field's own frame shows the focus */

/* ── the film ──────────────────────────────────────────────────────────── */
/* It fills whatever height is left, its width following the ratio: the cq units read .ob-main, a size container on this
   step. R91 (12 October 2026): the launch film is one 16:9 cut, a video, so the phone's 9:16 cut has gone; the 70px are
   its 14px margin and the script's line under it (two lines at most, 15px/1.45, and its 10px margin). Sound on sits on
   the film's corner, blue while the film plays without its sound, and larger at the foot of the poster while nothing
   plays yet, below the poster's own title. */
.ob-film { position: relative; display: block; margin: 14px auto 0; overflow: hidden; border-radius: 12px; background: #0a0a0a; width: min(100%, calc((100cqh - 70px) * 16 / 9)); height: min(calc(100cqh - 70px), calc(100cqw * 9 / 16)); }
.ob-film-v { display: block; width: 100%; height: 100%; object-fit: contain; background: #0a0a0a; }
.ob-film-line { min-height: 2.9em; max-width: 60ch; margin: 10px auto 0; text-align: center; font: 500 15px/1.45 var(--ob-sans); color: var(--ob-paper); text-wrap: balance; }
.ob-film-sound { position: absolute; right: 12px; bottom: 12px; height: 34px; padding: 0 14px; border: 1px solid rgba(243,242,242,.3); border-radius: 999px; background: rgba(15,14,14,.72); color: var(--ob-paper); font: 600 13px/1 var(--ob-sans); white-space: nowrap; cursor: pointer; transition: background .16s, border-color .16s; }
.ob-film-sound:hover { background: rgba(15,14,14,.9); }
.ob-film[data-film="muted"] .ob-film-sound, .ob-film[data-film="waiting"] .ob-film-sound { border-color: var(--ob-blue); background: var(--ob-blue); color: #fff; }
.ob-film[data-film="muted"] .ob-film-sound:hover, .ob-film[data-film="waiting"] .ob-film-sound:hover { border-color: var(--ob-blue-hover); background: var(--ob-blue-hover); }
.ob-film[data-film="waiting"] .ob-film-sound { right: 50%; bottom: 16px; transform: translateX(50%); height: 46px; padding: 0 22px; font-size: 14.5px; box-shadow: 0 6px 16px rgba(65,105,225,.26); }

/* ── the counting and the market (dark) ───────────────────────────────── */
.ob-count { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 28px; margin-top: 34px; }
.ob-count-disc { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(65,105,225,.18), transparent 60%), #141313; box-shadow: inset 0 0 0 1px rgba(243,242,242,.08); color: var(--ob-blue-light); }
.ob-count-disc auc-mark { display: block; width: 112px; height: 112px; color: var(--ob-blue-light); }
.ob-lines { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ob-lines li { display: flex; align-items: flex-start; gap: 12px; font: 500 16px/1.4 var(--ob-sans); color: rgba(243,242,242,.6); opacity: .28; transform: translateY(4px); transition: opacity .4s, transform .4s, color .4s; }
.ob-lines li.now, .ob-lines li.done { opacity: 1; transform: none; }
.ob-lines li.done { color: var(--ob-paper); }
.ob-line-tick { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid rgba(243,242,242,.2); border-radius: 50%; color: var(--ob-ground); transition: background .4s, border-color .4s; }
.ob-lines li.done .ob-line-tick { border-color: var(--ob-blue-light); background: var(--ob-blue-light); }
.ob-lots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 10px; margin-top: 26px; }
.ob-lot { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid rgba(243,242,242,.12); border-radius: 12px; background: #1a1918; }
.ob-lot img, .ob-lot-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #232221; }
.ob-lot > div { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; }
.ob-lot b { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font: 600 14px/1.3 var(--ob-sans); color: var(--ob-paper); } /* a house's long title, three lines at most */
.ob-lot span { font: 400 12.5px/1.4 var(--ob-sans); color: rgba(243,242,242,.62); }
.ob-lot .ob-lot-money { margin-top: 2px; font-weight: 600; color: var(--ob-blue-light); }

/* ── the plan ──────────────────────────────────────────────────────────── */
.ob-plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); column-gap: 28px; margin: 24px 0 0; padding: 4px 20px; border: 1px solid var(--ob-line); border-radius: 13px; background: #fff; }
.ob-plan-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid rgba(32,30,29,.08); }
.ob-plan-row:nth-child(-n+2) { border-top-color: transparent; }
.ob-plan-row dt { flex: none; font: 500 13.5px/1.4 var(--ob-sans); color: var(--ob-muted); }
.ob-plan-row dd { min-width: 0; margin: 0; font: 600 14.5px/1.4 var(--ob-sans); color: var(--ob-ink); text-align: right; overflow-wrap: anywhere; }

/* ── R117: the rail (dream to how) ─────────────────────────────────────── */
/* On a desktop, a 340px column beside the question, the body's full height: the plan card at the top (two ghost cards
   behind it; its rows scroll inside it when they outgrow it, the header fixed) and the coach card at the foot, never out
   of the frame. On a phone (900px and under) no rail: the answered values as a row of chips under the title, scrolling
   sideways to the frame's edges. The question's column is the inline-size container either way, for the title's cqw. */
.ob-rail { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-width: 0; min-height: 0; padding: 26px 24px 22px; border: 1px solid rgba(32,30,29,.08); border-radius: 18px; background: linear-gradient(180deg, #F3F2F2 0%, #F8F7F6 100%); }
.ob-rail-stack { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: 16px; }
.ob-rail-ghost { position: absolute; left: 16px; right: 16px; top: -16px; height: 40px; border: 1px solid rgba(32,30,29,.08); border-radius: 14px; background: rgba(255,255,255,.55); }
.ob-rail-ghost.near { left: 8px; right: 8px; top: -8px; border-color: rgba(32,30,29,.1); background: rgba(255,255,255,.85); }
.ob-rail-card { position: relative; display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; border: 1px solid rgba(32,30,29,.12); border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(32,30,29,.08); }
.ob-rail-head { display: flex; align-items: center; gap: 12px; flex: none; padding: 14px 18px 12px; border-bottom: 1px solid rgba(32,30,29,.08); }
.ob-rail-disc { display: grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: #0c0c0e; }
.ob-rail-disc auc-mark { display: block; width: 40px; height: 40px; }
.ob-rail-disc.biz { background: var(--ob-ink); color: var(--ob-paper); font: 400 15px/1 var(--ob-serif); letter-spacing: .02em; }
.ob-rail-who { min-width: 0; }
.ob-rail-who b { display: block; font: 600 14.5px/1.3 var(--ob-sans); color: var(--ob-ink); overflow-wrap: anywhere; }
.ob-rail-who span { display: block; margin-top: 2px; font: 400 12.5px/1.4 var(--ob-sans); color: var(--ob-muted); }
.ob-rail-rows { position: relative; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 2px 18px 4px; scrollbar-width: thin; }
.ob-rail-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 0; border-top: 1px solid rgba(32,30,29,.08); }
.ob-rail-row:first-child { border-top-color: transparent; }
.ob-rail-row dt { flex: none; font: 500 12.5px/1.4 var(--ob-sans); color: var(--ob-muted); transition: color .2s; }
.ob-rail-row.ob-now dt { color: var(--ob-blue-hover); }
.ob-rail-row dd { min-width: 0; margin: 0; font: 600 13px/1.4 var(--ob-sans); color: var(--ob-ink); text-align: right; overflow-wrap: anywhere; }
.ob-rail-bar { display: inline-block; max-width: 100%; height: 8px; border-radius: 4px; background: var(--ob-fill); vertical-align: middle; }
.ob-coach { display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: end; gap: 10px; flex: none; }
.ob-coach-disc { display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: #0c0c0e; box-shadow: 0 0 0 1.5px rgba(32,30,29,.08); }
.ob-coach-disc auc-mark { display: block; width: 36px; height: 36px; }
.ob-coach-card { padding: 14px 16px; border: 1px solid var(--ob-line); border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: 0 8px 24px rgba(32,30,29,.06); }
.ob-coach-card b { display: block; margin-bottom: 6px; font: 600 13.5px/1.3 var(--ob-sans); color: var(--ob-ink); }
.ob-coach-card p { margin: 0; font: 400 13px/1.5 var(--ob-sans); color: var(--ob-body); }
.ob-strip { display: flex; gap: 6px; margin: 16px -24px 0; padding: 0 24px; overflow-x: auto; list-style: none; scrollbar-width: none; }
.ob-strip::-webkit-scrollbar { display: none; }
.ob-strip li { flex: none; padding: 7px 11px; border-radius: 999px; background: var(--ob-tint); color: var(--ob-blue-hover); font: 600 12px/1 var(--ob-sans); white-space: nowrap; }
@media (min-width: 901px) {
  .ob-body.ob-railed { display: grid; grid-template-columns: minmax(0,1fr) 340px; grid-template-rows: minmax(0,1fr); column-gap: 44px; max-width: 1160px; }
  .ob-body.ob-railed > .ob-step { container-type: inline-size; }
  .ob-strip { display: none; }
}
@media (max-width: 900px) {
  .ob-rail { display: none; }
}

/* ── the savings ───────────────────────────────────────────────────────── */
.ob-big { display: block; margin-top: 30px; font: 400 72px/1 var(--ob-serif); font-size: clamp(44px, 10cqw, 72px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ob-ink); }
.ob-cap { margin: 8px 0 0; font: 500 14px/1.4 var(--ob-sans); color: var(--ob-muted); }
.ob-range { margin-top: 26px; }
.ob-range input { display: block; width: 100%; height: 36px; margin: 0; accent-color: var(--ob-blue); cursor: pointer; }
.ob-ends { display: flex; justify-content: space-between; margin-top: 6px; font: 500 12px/1 var(--ob-sans); color: var(--ob-muted); }

/* ── the popup and the dialog, over the shell ─────────────────────────── */
.ob-pop { position: absolute; inset: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 18px; overflow: auto; background: rgba(15,14,14,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: obFade .25s ease both; }
@keyframes obFade { from { opacity: 0; } to { opacity: 1; } }
.ob-pop-card { position: relative; width: min(500px, 100%); max-width: 100%; max-height: 100%; min-height: 0; overflow: hidden; padding: 26px 26px 22px; border: 1px solid rgba(243,242,242,.14); border-radius: 22px; background: radial-gradient(120% 80% at 50% 0%, rgba(65,105,225,.28), transparent 60%), var(--ob-ground); color: var(--ob-paper); box-shadow: 0 40px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(243,242,242,.08); text-align: center; }
.ob-pop-in { animation: obPop .5s var(--ob-ease) both; }
@keyframes obPop { from { opacity: .2; transform: scale(.94); } to { opacity: 1; transform: none; } }
.ob-pop-disc { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto; overflow: hidden; border-radius: 50%; background: #0b0b0d; box-shadow: 0 0 0 2px var(--ob-blue), 0 0 40px rgba(65,105,225,.45); }
.ob-pop-disc auc-mark { display: block; width: 56px; height: 56px; }
.ob-pop-eyebrow { margin: 14px 0 0; font: 600 10.5px/1.2 var(--ob-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ob-blue-light); }
.ob-pop-title { margin: 8px 0 0; font: 400 30px/1.08 var(--ob-serif); letter-spacing: -.018em; text-wrap: balance; }
.ob-pop-num { display: block; margin-top: 14px; font: 400 64px/1 var(--ob-serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ob-paper); text-shadow: 0 0 40px rgba(65,105,225,.5); }
.ob-pop-pill { display: inline-block; margin-top: 14px; padding: 7px 13px; border-radius: 999px; background: var(--ob-blue); color: #fff; font: 600 11px/1 var(--ob-sans); letter-spacing: .08em; text-transform: uppercase; }
.ob-pop-foot { margin: 18px 0 0; font: 400 12px/1.5 var(--ob-sans); color: rgba(243,242,242,.5); }
.ob-pop-hold { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--ob-blue); }
.ob-confirm { padding: 0; overflow: auto; }
.ob-confirm-top { padding: 22px 26px 0; }
.ob-confirm-top .ob-pop-pill { margin-top: 12px; }
.ob-confirm-price { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 16px; }
.ob-confirm-price s { font: 400 24px/1 var(--ob-serif); color: rgba(243,242,242,.4); text-decoration-thickness: 1.5px; }
.ob-confirm-price b { font: 400 56px/1 var(--ob-serif); letter-spacing: -.03em; color: var(--ob-paper); }
.ob-confirm-price .na, .ob-offer .na, .ob-plan-price .na { font: 500 14px/1.4 var(--ob-sans); letter-spacing: 0; }
.ob-confirm-unit { margin: 6px 0 0; font: 500 14px/1.4 var(--ob-sans); color: rgba(243,242,242,.7); }
.ob-confirm-list { display: grid; gap: 7px; margin: 18px 26px 0; padding: 0; list-style: none; text-align: left; }
.ob-confirm-list li { display: flex; align-items: center; gap: 11px; font: 500 14px/1.35 var(--ob-sans); color: rgba(243,242,242,.85); }
.ob-confirm-tick { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(143,167,240,.18); color: var(--ob-blue-light); }
.ob-confirm-tick svg { width: 11px; height: 11px; }
.ob-confirm-acts { display: grid; gap: 6px; margin: 18px 26px; }
.ob-pop-go { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--ob-blue); color: #fff; font: 600 15.5px/1 var(--ob-sans); cursor: pointer; box-shadow: 0 10px 30px rgba(65,105,225,.45); transition: transform .16s, background .16s; }
.ob-pop-go:hover { background: var(--ob-blue-hover); transform: translateY(-1px); }
.ob-pop-no { height: 36px; padding: 0 6px; border: 0; background: transparent; color: rgba(243,242,242,.5); font: 500 13px/1 var(--ob-sans); text-decoration: underline; text-decoration-color: rgba(243,242,242,.25); text-underline-offset: 3px; cursor: pointer; }
.ob-pop-no:hover { color: var(--ob-paper); }
/* R117: Save and finish later's dialog, light, over a lighter scrim; then Link sent, naming the address, and an ink Done. */
.ob-pop.light { background: rgba(32,30,29,.42); }
.ob-later { width: min(440px, 100%); max-width: 100%; max-height: 100%; overflow: auto; padding: 26px; border: 1px solid rgba(32,30,29,.12); border-radius: 18px; background: #fff; color: var(--ob-ink); box-shadow: 0 30px 80px rgba(32,30,29,.3); text-align: left; animation: obPop .35s var(--ob-ease) both; }
.ob-later-eyebrow { margin: 0; font: 600 10.5px/1 var(--ob-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ob-blue); }
.ob-later-t { margin: 10px 0 0; font: 400 28px/1.1 var(--ob-serif); letter-spacing: -.018em; text-wrap: balance; }
.ob .ob-later-t:focus, .ob .ob-later-t:focus-visible { outline: none; } /* the title takes the focus when the dialog opens, for the screen reader; no ring */
.ob-later-sub { margin: 10px 0 0; font: 400 14px/1.5 var(--ob-sans); color: var(--ob-muted); }
.ob-later-sub b { font-weight: 600; color: var(--ob-ink); overflow-wrap: anywhere; }
.ob-later-form { display: grid; gap: 10px; margin-top: 18px; }
.ob .ob-later-form .ob-text { height: 48px; padding: 0 14px; font: 500 15px/1 var(--ob-sans); }
.ob-later-form .ob-quiet { height: 36px; justify-self: center; }
.ob-later .ob-btn.ink { margin-top: 18px; border-color: var(--ob-ink); background: var(--ob-ink); color: #fff; }
.ob-later .ob-btn.ink:hover { transform: translateY(-1px); }

/* ── the paywall and the beta offer ───────────────────────────────────── */
.ob-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 10px; margin-top: 24px; padding-top: 10px; }
.ob-plan-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 18px 18px 16px; border: 1.5px solid var(--ob-edge); border-radius: 13px; background: #fff; color: var(--ob-ink); text-align: left; cursor: pointer; transition: border-color .16s, background .16s, box-shadow .16s; }
.ob-plan-card:hover { border-color: var(--ob-blue); }
.ob-plan-card.on { border-color: var(--ob-blue); background: var(--ob-tint); box-shadow: 0 0 0 3px var(--ob-tint); }
.ob-badge { position: absolute; top: -10px; left: 14px; padding: 4px 9px; border-radius: 999px; background: var(--ob-blue); color: #fff; font: 600 10px/1 var(--ob-sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ob-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; font: 600 13.5px/1.3 var(--ob-sans); color: var(--ob-muted); }
.ob-plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin-top: 4px; min-height: 38px; }
.ob-plan-price b { font: 400 38px/1 var(--ob-serif); letter-spacing: -.02em; color: var(--ob-ink); }
.ob-plan-price > span { font: 500 13.5px/1 var(--ob-sans); color: var(--ob-muted); }
.ob-price-wait { display: inline-block; width: 92px; height: 32px; border-radius: 8px; background: linear-gradient(90deg, var(--ob-fill) 0%, #f3f1ef 50%, var(--ob-fill) 100%); background-size: 200% 100%; animation: obShimmer 1.4s linear infinite; }
@keyframes obShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.ob-table { width: 100%; margin-top: 20px; border-collapse: collapse; font: 400 12.5px/1.4 var(--ob-sans); color: var(--ob-body); }
.ob-table th, .ob-table td { padding: 10px 10px 10px 0; border-top: 1px solid rgba(32,30,29,.08); text-align: left; vertical-align: top; }
.ob-table thead th { padding-top: 0; padding-bottom: 9px; border-top: 0; font: 600 10px/1 var(--ob-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ob-muted); }
.ob-table tbody th { font-weight: 600; color: var(--ob-ink); }
.ob-table tbody td { font-weight: 600; color: var(--ob-ink); }
.ob-table tbody td.free { font-weight: 400; color: var(--ob-body); }
.ob-table tbody td.sel { color: var(--ob-blue-hover); }
.ob-offer { margin: 26px 0 0; font: 400 19px/1.35 var(--ob-sans); color: var(--ob-body); }
.ob-offer b { font: 400 54px/1 var(--ob-serif); letter-spacing: -.02em; color: var(--ob-ink); }
.ob-pill { display: inline-block; margin: 16px 0 0; padding: 7px 13px; border-radius: 999px; background: var(--ob-tint); color: var(--ob-blue-hover); font: 600 13px/1 var(--ob-sans); }

/* ── the welcome, the marks, the teams ────────────────────────────────── */
.ob-welcome { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 14px 16px; border: 1.5px solid var(--ob-blue); border-radius: 14px; background: #fff; box-shadow: 0 0 0 4px var(--ob-tint); color: var(--ob-ink); font: 500 16px/1.4 var(--ob-sans); }
.ob-welcome-disc { display: grid; place-items: center; flex: none; width: 52px; height: 52px; overflow: hidden; border-radius: 50%; background: #0c0c0e; }
.ob-welcome-disc auc-mark { display: block; width: 52px; height: 52px; }
.ob-welcome-t { min-width: 0; overflow-wrap: anywhere; }
.ob-welcome-eyebrow { display: block; margin-bottom: 6px; font: 600 10px/1 var(--ob-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ob-muted); }
.ob-welcome-note { margin: 16px 0 0; max-width: 56ch; font: 400 14px/1.55 var(--ob-sans); color: var(--ob-muted); }
.ob-marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; margin-top: 26px; }
.ob-mark { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 14px 8px 13px; border: 1.5px solid var(--ob-edge); border-radius: 13px; background: #fff; color: var(--ob-ink); text-align: center; cursor: pointer; transition: border-color .16s, background .16s, transform .16s; }
.ob-mark:hover { border-color: var(--ob-blue); transform: translateY(-1px); }
.ob-mark.on { border-color: var(--ob-blue); background: var(--ob-tint); }
.ob-mark-orb { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 10px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.045), transparent 55%), #0b0b0d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.ob-mark-orb auc-mark { display: block; width: 78px; height: 78px; }
.ob-mark-name { font: 600 14px/1.3 var(--ob-sans); }
.ob-mark.on .ob-mark-name { color: var(--ob-blue-hover); }
.ob-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 8px; margin-top: 26px; }
.ob-team { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 58px; padding: 10px 14px 10px 12px; border: 1.5px solid var(--ob-edge); border-radius: 12px; background: #fff; color: var(--ob-ink); text-align: left; cursor: pointer; transition: border-color .16s, background .16s; }
.ob-team:hover { border-color: var(--ob-blue); }
.ob-team.on { border-color: var(--ob-blue); background: var(--ob-tint); }
.ob-team-orb { flex: none; display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; background: #0c0c0e; box-shadow: 0 0 0 1.5px var(--team, transparent); }
.ob-team-orb auc-mark { display: block; width: 34px; height: 34px; }
.ob-team-name { flex: 1; min-width: 0; font: 600 14.5px/1.3 var(--ob-sans); }
.ob-team.on .ob-team-name { color: var(--ob-blue-hover); }
.ob-team-n { flex: none; font: 500 12.5px/1.2 var(--ob-sans); font-variant-numeric: tabular-nums; color: var(--ob-muted); white-space: nowrap; }
.ob-team-n.na { font-style: italic; }

/* ── widths ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ob { padding: 12px; }
  .ob-shell { min-height: calc(100vh - 24px); min-height: calc(100dvh - 24px - var(--ac-consent-h, 0px)); }
}
/* Phones: the screen is the shell. Every step still fits one screen of a 390 x 844 phone (and a 375 x 667 one, its
   answers scrolling inside it): the primary button takes the width, under the thumb; the marks go four across, the
   teams and the budget's six two across; the paywall's table keeps its five columns in a smaller type. */
@media (max-width: 600px) {
  .ob { padding: 0; }
  .ob-shell { min-height: 100vh; min-height: calc(100dvh - var(--ac-consent-h, 0px)); border: 0; border-radius: 0; box-shadow: none; }
  .ob-top { padding: 8px 8px 0; }
  .ob-body { padding: 18px 18px 16px; }
  .ob-h { font-size: 30px; }
  .ob-sub { margin-top: 8px; font-size: 14.5px; }
  .ob-acts { margin-top: auto; padding-top: 18px; }
  .ob-acts .ob-btn.primary { flex: 1 1 auto; }
  .ob-choices { margin-top: 20px; gap: 8px; }
  .ob-choice { min-height: 50px; padding: 10px 14px 10px 16px; font-size: 15px; }
  .ob-chips { margin-top: 20px; gap: 7px; }
  .ob-chip { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
  .ob-buyers { grid-template-columns: minmax(0,1fr); margin-top: 20px; }
  .ob-buyer { padding: 14px; }
  .ob-two { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
  .ob-two .ob-choice { min-height: 48px; padding: 8px 10px 8px 12px; font-size: 14px; }
  .ob-two .ob-tick { width: 18px; height: 18px; }
  .ob-inline { margin-top: 16px; gap: 8px; }
  .ob-count { gap: 18px; margin-top: 26px; }
  .ob-count-disc { width: 84px; height: 84px; }
  .ob-count-disc auc-mark { width: 78px; height: 78px; }
  .ob-lines li { font-size: 15px; }
  .ob-lots { grid-template-columns: minmax(0,1fr); gap: 8px; margin-top: 18px; }
  .ob-lot { flex-direction: row; }
  .ob-lot img, .ob-lot-img { width: 108px; height: auto; aspect-ratio: auto; min-height: 92px; flex: none; }
  .ob-lot > div { padding: 10px 12px; gap: 3px; }
  .ob-plan { grid-template-columns: minmax(0,1fr); margin-top: 18px; padding: 2px 16px; }
  .ob-plan-row { padding: 10px 0; }
  .ob-plan-row:nth-child(2) { border-top-color: rgba(32,30,29,.08); }
  .ob-big { margin-top: 22px; }
  /* The three plans as rows, the name and its tick on the left, the price on the right, so the table stays in reach. */
  .ob-plans { grid-template-columns: minmax(0,1fr); gap: 12px; margin-top: 14px; }
  .ob-plan-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 10px; padding: 14px 14px 12px; }
  .ob-plan-top { grid-column: 1; grid-row: 1; flex-direction: row-reverse; justify-content: flex-end; gap: 10px; width: auto; font-size: 14px; }
  .ob-plan-price { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 2px; min-height: 0; margin: 0; text-align: right; }
  .ob-plan-price b { font-size: 28px; }
  .ob-plan-price > span { font-size: 12px; }
  .ob-table { font-size: 11.5px; }
  .ob-table th, .ob-table td { padding: 8px 6px 8px 0; }
  .ob-offer b { font-size: 44px; }
  .ob-marks { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; margin-top: 18px; }
  .ob-mark { padding: 8px 4px 8px; border-radius: 11px; }
  .ob-mark-orb { width: min(64px, 100%); height: auto; aspect-ratio: 1; margin-bottom: 6px; }
  .ob-mark-orb auc-mark { width: 92%; height: 92%; }
  .ob-mark-name { font-size: 12.5px; }
  .ob-teams { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; margin-top: 18px; }
  .ob-team { display: grid; grid-template-columns: auto minmax(0,1fr) auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 1px; min-height: 52px; padding: 7px 8px; }
  .ob-team-orb { grid-row: 1 / span 2; width: 28px; height: 28px; }
  .ob-team-orb auc-mark { width: 28px; height: 28px; }
  .ob-team-name { grid-column: 2; grid-row: 1; align-self: end; font-size: 13px; line-height: 1.2; }
  .ob-team-n { grid-column: 2; grid-row: 2; align-self: start; font-size: 11.5px; }
  .ob-team .ob-tick { grid-column: 3; grid-row: 1 / span 2; width: 18px; height: 18px; }
  .ob-pop { padding: 12px; }
  .ob-pop-card { padding: 22px 18px 18px; }
  .ob-confirm { padding: 0; }
  .ob-confirm-top { padding: 20px 18px 0; }
  .ob-confirm-list { margin: 16px 18px 0; }
  .ob-confirm-acts { margin: 16px 18px; }
  .ob-pop-title { font-size: 26px; }
  .ob-pop-num { font-size: 52px; }
  .ob-confirm-price b { font-size: 48px; }
  /* R117: the chips bleed to the phone's edges; Save for later; the counter as its words alone (the shell's own bar
     shows the fill), and none beside Save for later, so the top row keeps the brand clear; fields at 16px, which a
     phone does not zoom into. */
  .ob-strip { margin: 14px -18px 0; padding: 0 18px; }
  .ob-save .ob-wide { display: none; }
  .ob-save .ob-narrow { display: inline; }
  .ob-top-r .ob-save { padding: 0 4px; }
  .ob-counter > i { display: none; }
  .ob-counter.by-later { display: none; }
  .ob-biz { gap: 18px; margin-top: 18px; }
  .ob .ob-text.ob-other, .ob .ob-later-form .ob-text { font-size: 16px; }
  .ob-spend { margin-top: 22px; }
  .ob-later { padding: 22px 18px 18px; }
}
/* Laptops (1280 x 640) and short windows: the same steps, tighter, so each still fits. */
@media (max-height: 760px) {
  .ob-body { padding-top: 20px; padding-bottom: 18px; }
  .ob-top { padding-top: 8px; }
  .ob-h { font-size: clamp(27px, 5.2cqw, 36px); }
  .ob-sub { margin-top: 8px; font-size: 14.5px; }
  .ob-choices, .ob-chips, .ob-buyers, .ob-marks, .ob-teams, .ob-plan, .ob-lots, .ob-plans { margin-top: 18px; }
  .ob-choice { min-height: 50px; padding-top: 10px; padding-bottom: 10px; }
  .ob-two { margin-top: 12px; }
  .ob-acts { margin-top: 18px; }
  .ob-btn { height: 44px; }
  .ob-count { margin-top: 22px; }
  .ob-big { margin-top: 18px; font-size: clamp(40px, 8cqw, 60px); }
  .ob-range { margin-top: 16px; }
  .ob-mark { padding: 10px 8px 10px; }
  .ob-mark-orb { width: 70px; height: 70px; margin-bottom: 8px; }
  .ob-mark-orb auc-mark { width: 64px; height: 64px; }
  .ob-team { min-height: 50px; padding-top: 7px; padding-bottom: 7px; }
  .ob-plan-row { padding: 9px 0; }
  .ob-plan-card { padding: 14px 16px 12px; }
  .ob-plan-price b { font-size: 32px; }
  .ob-table { margin-top: 12px; }
  .ob-table th, .ob-table td { padding-top: 7px; padding-bottom: 7px; }
  .ob-welcome { margin-top: 18px; }
  .ob-offer { margin-top: 18px; }
  .ob-lot img, .ob-lot-img { aspect-ratio: 16 / 9; }
  /* R117 */
  .ob-biz { gap: 16px; margin-top: 18px; }
  .ob-spend { margin-top: 20px; }
  .ob-dual { margin-top: 16px; }
  .ob-rail { padding: 22px 22px 20px; gap: 18px; }
}
/* Shorter still (a 1280 x 640 laptop with the cookie banner still open leaves the shell about 530px): tighter again. */
@media (max-height: 680px) and (min-width: 601px) {
  .ob-body { padding: 12px 24px 14px; }
  .ob-top { padding-top: 6px; }
  .ob-h { font-size: clamp(24px, 4.4cqw, 31px); }
  .ob-sub { margin-top: 6px; font-size: 14px; line-height: 1.45; }
  .ob-choices, .ob-chips, .ob-buyers, .ob-marks, .ob-teams, .ob-plan, .ob-lots, .ob-plans { margin-top: 12px; }
  .ob-choices { gap: 7px; }
  .ob-choice { min-height: 42px; padding: 7px 14px 7px 16px; font-size: 14.5px; }
  .ob-choice-ico { width: 32px; height: 32px; }
  .ob-two { margin-top: 10px; }
  .ob-chips { gap: 6px; }
  .ob-chip { min-height: 34px; padding: 0 13px; font-size: 13px; }
  .ob-inline { margin-top: 12px; }
  .ob-note { margin-top: 6px; }
  .ob-money { height: 44px; margin-top: 8px; }
  .ob-acts { margin-top: 12px; }
  .ob-btn { height: 42px; }
  .ob-toggle { margin-top: 10px; }
  .ob-count { margin-top: 14px; }
  .ob-count-disc { width: 96px; height: 96px; }
  .ob-count-disc auc-mark { width: 90px; height: 90px; }
  .ob-lines { gap: 9px; }
  .ob-lot img, .ob-lot-img { aspect-ratio: 2 / 1; }
  .ob-lot > div { padding: 9px 12px 10px; gap: 3px; }
  .ob-big { margin-top: 10px; font-size: clamp(36px, 7cqw, 52px); }
  .ob-range { margin-top: 10px; }
  .ob-plan-row { padding: 7px 0; }
  .ob-plans { padding-top: 8px; }
  .ob-plan-card { padding: 10px 14px 9px; }
  .ob-plan-price { min-height: 0; margin-top: 2px; }
  .ob-plan-price b { font-size: 28px; }
  .ob-table { margin-top: 8px; }
  .ob-table th, .ob-table td { padding-top: 5px; padding-bottom: 5px; }
  .ob-table thead th { padding-bottom: 6px; }
  .ob-offer { margin-top: 12px; }
  .ob-offer b { font-size: 44px; }
  .ob-welcome { margin-top: 12px; }
  .ob-welcome-note { margin-top: 10px; }
  .ob-mark { padding: 8px 6px; }
  .ob-mark-orb { width: 58px; height: 58px; margin-bottom: 6px; }
  .ob-mark-orb auc-mark { width: 54px; height: 54px; }
  .ob-team { min-height: 44px; padding-top: 5px; padding-bottom: 5px; }
  .ob-pop { padding: 10px; }
  .ob-pop-card { padding: 16px 22px 14px; }
  .ob-pop-disc { width: 46px; height: 46px; }
  .ob-pop-disc auc-mark { width: 46px; height: 46px; }
  .ob-pop-title { font-size: 26px; }
  .ob-pop-num { margin-top: 8px; font-size: 50px; }
  .ob-pop-foot { margin-top: 10px; }
  .ob-confirm { padding: 0; }
  .ob-confirm-top { padding: 14px 22px 0; }
  .ob-confirm-price { margin-top: 8px; }
  .ob-confirm-price b { font-size: 44px; }
  .ob-confirm-list { gap: 4px; margin: 10px 22px 0; }
  .ob-confirm-acts { gap: 2px; margin: 10px 22px 10px; }
  .ob-pop-go { height: 44px; }
  /* R117: the Business step, the slider and the rail, tighter again; the coach card stays in the frame. */
  .ob-biz { gap: 12px; margin-top: 12px; }
  .ob-group { gap: 7px; }
  .ob-group.ob-name { gap: 6px; }
  .ob .ob-text { height: 44px; }
  .ob .ob-text.ob-other { height: 40px; }
  .ob-spend { margin-top: 12px; }
  .ob-dual { margin-top: 10px; }
  .ob-rail { padding: 18px 20px 16px; gap: 14px; }
  .ob-rail-stack { margin-top: 14px; }
  .ob-rail-head { padding: 11px 16px 10px; }
  .ob-rail-rows { padding: 1px 16px 3px; }
  .ob-rail-row { padding: 5px 0; }
  .ob-coach-card { padding: 11px 14px; }
  .ob-later { padding: 20px 22px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .ob-body { padding: 12px 16px 12px; }
  .ob-h { font-size: 26px; }
  .ob-sub { font-size: 13.5px; }
  .ob-choice { min-height: 44px; }
  .ob-two .ob-choice { min-height: 42px; }
  .ob-chip { min-height: 34px; padding: 0 12px; font-size: 13px; }
  .ob-acts { padding-top: 12px; }
  .ob-btn { height: 44px; }
  .ob-plan-row { padding: 7px 0; }
}
/* The narrowest phones (360px and under): the brand and Skip for now share the top row without touching. */
@media (max-width: 360px) {
  .ob-brand { gap: 6px; font-size: 17px; }
  .ob-brand img { width: 22px; height: 22px; }
  .ob-skip, .ob-back { padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .ob *, .ob *::before, .ob *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Henry, 7 October 2026 (through U): a placeholder goes once its field is clicked, as U's rule does on the site's other stylesheets; scoped to the onboarding, last of its placeholder rules. */
.ob input:focus::placeholder, .ob textarea:focus::placeholder { color: transparent; }