/* ═══════════════════════════════════════════════════════════════════════════
   onboard-portal — the forty lines Meridian genuinely does not have.

   Everything else on the page is `mk-`. If a rule here could be a Meridian
   class instead, it is a bug: an invented `mk-` renders as nothing, and a
   hand-rolled copy of one that exists drifts from it.

   THE CURRENT PORTAL HAND-ROLLED `ob-steps` / `ob-step` / `.is-now`. Meridian
   ships `mk-steps`, `mk-step`, `mk-step-marker`, `mk-step-label` and
   `data-mk-step-state="done|current"`, with the connector line and the tick
   already drawn. This file no longer has a step rule in it.

   Every colour is a Meridian token, so both themes come for free.
   ═══════════════════════════════════════════════════════════════════════════ */

.ob-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── brand ───────────────────────────────────────────────────────────────── */
.ob-brand { display: flex; align-items: center; gap: var(--space-2); }
.ob-mark { display: inline-grid; place-items: center; }
.ob-mark img { display: block; border-radius: var(--r-sm); }
.ob-wordmark { font-weight: 700; letter-spacing: -0.01em; }
.ob-env { text-transform: lowercase; }

/* ── the form card ────────────────────────────────────────────────────────
   One column. There was a second one — an aside carrying "what happens next"
   — and it is gone by request: the wizard is four short screens and it says
   what it needs to say in them. */
.ob-shell { display: grid; gap: var(--space-5); }

.ob-main {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}


/* ── type ────────────────────────────────────────────────────────────────── */
.ob-title {
  margin: 0;
  font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.ob-lede { margin: 0; color: var(--text-2); max-width: 58ch; }
.ob-addr { font-variant-numeric: tabular-nums; }
.ob-change { white-space: nowrap; }
.ob-hint { color: var(--text-3); font-size: var(--fs-sm); }
.ob-centred { text-align: center; }


/* ── choice tiles ────────────────────────────────────────────────────────────
   A radio inside its label: the whole tile is the control, it is reachable by
   keyboard, and it needs no script. That is what lets the details step be one
   form for one kind of account, instead of one form with half its fields
   captioned "if a business". */
.ob-choices { display: grid; gap: var(--space-3); }
.ob-choice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  cursor: pointer;
}
.ob-choice:hover { border-color: var(--border-strong); }
.ob-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ob-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ob-choice input { margin-top: 3px; flex: none; }
.ob-choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-choice-title { font-weight: 600; }
.ob-choice-sub { color: var(--text-2); font-size: var(--fs-sm); }

/* ── form groups ─────────────────────────────────────────────────────────────
   A heading per group rather than one long column of fields: the details step
   asks three unrelated things — who you are, what the company is, which
   document — and unlabelled they read as one interrogation. */
.ob-group { display: flex; flex-direction: column; gap: var(--space-3); }
.ob-group-title {
  margin: 0;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.ob-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 560px) { .ob-row { grid-template-columns: 1fr; } }

.ob-submit { width: 100%; }

/* ── the code field ──────────────────────────────────────────────────────────
   One input, deliberately. Four separate boxes need JavaScript to advance
   between them, and this page does not get to use any — a four-box field with
   no script is worse than one box, not better. */
.ob-codefield { max-width: 260px; }
.ob-otp {
  font-size: var(--fs-2xl);
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ob-otp-bad { border-color: var(--danger); }

.ob-resend { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ── done ────────────────────────────────────────────────────────────────── */
.ob-done { align-items: center; text-align: center; }
.ob-tick {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--ok-soft);
  color: var(--ok);
}
.ob-tick svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.ob-props { width: 100%; max-width: 520px; text-align: left; }

.ob-foot { color: var(--text-3); font-size: var(--fs-sm); text-align: center; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}