/* ── Onboarding guided live-import wizard (onboarding live-import wizard S1) ──
 *
 * TWO sections:
 *   1. `.onboard-wizard` — the FULL-SCREEN, BRAND-LOCKED first-client setup
 *      takeover. Like login.css it pins the ROASt brand palette (gold→coral→
 *      pink) hex-by-hex and deliberately does NOT read the 22 in-app theme
 *      tokens (`--accent` etc.) — it is the third member of the brand-locked
 *      surface family (landing, login, wizard) per DESIGN.md §24 / plan §5.4.
 *   2. `.onboard-resume-banner` — the IN-APP resume nudge on the dashboard. It
 *      DOES use theme tokens (it lives inside the themed app shell).
 *
 * Animation is deferred to S8 — only plain CSS transitions here.
 */

/* ═══════════════════ 1. Brand-locked full-screen wizard ═══════════════════ */

.onboard-wizard {
  /* ROASt landing palette — hex-pinned, theme-independent (mirrors login.css) */
  --ow-bg:        #ffffff;
  --ow-text:      #0a0b0d;
  --ow-text-2:    #3a3f47;
  --ow-text-3:    #62666d;
  --ow-text-4:    #9ca0a8;
  --ow-border:    rgba(0, 0, 0, 0.09);
  --ow-field:     #fafafa;
  --ow-coral:     #f37771;
  --ow-pink:      #ef5386;
  --ow-gold:      #faa963;
  --ow-accent-text: #d6356a;            /* readable coral-pink on white */
  --ow-grad:      linear-gradient(92.88deg, #faa963 9.16%, #f37771 50%, #ef5386 90.84%);
  --ow-rail-bg:   #08090A;              /* near-pure black — matches the login dark panel (login.css .login-page split #08090A) */
  --ow-rail-text: rgba(255, 255, 255, 0.88);
  --ow-rail-muted: rgba(255, 255, 255, 0.52);

  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;          /* the WIZARD never scrolls — the rail stays pinned; only the stage scrolls (S4 long beats) */
  display: grid;
  grid-template-columns: minmax(300px, 384px) 1fr;
  grid-template-rows: 100vh; /* pin the row to the viewport so the stage cell can't auto-grow to content — it scrolls instead */
  background: var(--ow-bg);
  color: var(--ow-text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  outline: none;
}

/* ── Left rail — dark brand panel with the roadmap ──
   Floats like the in-app nav sidebar (base.css .nav-sidebar): inset 12px from the
   wizard edges, 10px radius, the same soft drop shadow — so the setup chrome feels
   consistent with the app it's about to drop the user into. Keeps the near-black
   brand fill. The margin insets the rail inside its grid cell; the parent's white
   background becomes the breathing room around the floating panel. */
.onboard-wizard-rail {
  position: relative;
  overflow: hidden;
  margin: 12px;
  background: var(--ow-rail-bg);
  color: var(--ow-rail-text);
  padding: 40px 36px;
  border-radius: 10px;
  /* matches base.css .nav-sidebar box-shadow exactly (floating-panel consistency) */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 6px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* warm gold→coral→pink glow rising from the bottom of the rail */
.onboard-wizard-rail::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -260px;
  width: 640px;
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(243, 119, 113, 0.24) 0%,
    rgba(250, 169, 99, 0.10) 42%,
    transparent 72%);
  filter: blur(40px);
  pointer-events: none;
}
.onboard-wizard-rail > * { position: relative; z-index: 1; }

.onboard-wizard-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.onboard-wizard-logo { display: block; }
.onboard-wizard-wordmark { height: 19px; width: auto; color: #ffffff; }

.onboard-wizard-rail-heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ow-rail-muted);
}

/* vertical stepper */
.onboard-wizard-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.onboard-wizard-step {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ow-rail-muted);
  transition: background 0.2s ease, color 0.2s ease;
}
.onboard-wizard-step-marker {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: var(--ow-rail-muted);
  background: transparent;
}
.onboard-wizard-step--current {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}
.onboard-wizard-step--current .onboard-wizard-step-marker {
  border-color: transparent;
  /* 2-stop DIAGONAL coral→pink (NOT the 3-stop --ow-grad): on a 24px circle the
     gold-at-9% / pink-at-90% horizontal band lit up the left+right edges either
     side of the digit. A corner-to-corner coral→pink reads as one solid, bolder
     wash with no symmetric side-highlights. */
  background: linear-gradient(140deg, #f37771 0%, #ef5386 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 83, 134, 0.4);
}
.onboard-wizard-step--done { color: rgba(255, 255, 255, 0.7); }
.onboard-wizard-step--done .onboard-wizard-step-marker {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.onboard-wizard-trust {
  margin: auto 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ow-rail-muted);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Right stage — light, the active beat ── */
.onboard-wizard-stage {
  position: relative;
  min-height: 0;             /* allow the grid cell to shrink below its content so overflow-y actually scrolls */
  overflow-y: auto;          /* the scroll viewport — content scrolls between the pinned rail + the sticky action footer */
  display: flex;
  flex-direction: column;
  align-items: center;       /* centre the inner column horizontally */
  justify-content: flex-start;
  /* no bottom padding — the sticky action footer sits flush at the bottom */
  padding: 56px 56px 0;
}
/* The stage is a bare <main>, so the global app-layout rule
   `main { margin-left: 224px }` (base.css — offsets the main panel next to the
   224px nav sidebar) leaks in and shoves the whole white pane right, throwing
   the centred content off (the wizard has no nav sidebar). Neutralise it.
   Scoped under `.onboard-wizard` so the specificity (0,2,0) also beats the
   `body.nav-collapsed main { margin-left: 76px }` sibling (0,1,2). */
.onboard-wizard .onboard-wizard-stage { margin: 0; }
/* faint coral glow behind the stage content (mirrors login .login-glow) */
.onboard-wizard-stage::before {
  content: '';
  position: absolute;
  right: 6%;
  top: 30%;
  width: 520px;
  height: 420px;
  background: radial-gradient(ellipse at center,
    rgba(243, 119, 113, 0.10) 0%,
    rgba(239, 83, 134, 0.05) 36%,
    transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.onboard-wizard-skip {
  /* fixed to the viewport (= stage's top-right) so it stays put while the stage scrolls */
  position: fixed;
  z-index: 3;
  top: 28px;
  right: 32px;
  background: none;
  border: none;
  color: var(--ow-text-4);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color 0.16s ease, background 0.16s ease;
}
.onboard-wizard-skip:hover { color: var(--ow-text-2); background: rgba(0, 0, 0, 0.04); }
.onboard-wizard-skip:disabled { opacity: 0.5; cursor: default; }

.onboard-wizard-stage-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  /* vertical auto-margins centre the column when it's shorter than the
     viewport, and collapse to 0 when it's taller (so it top-aligns + scrolls
     from the top rather than clipping — the classic flex-overflow fix). */
  margin: auto 0;
  animation: onboardWizardFade 0.32s ease both;
}
@keyframes onboardWizardFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .onboard-wizard-stage-inner { animation: none; }
}

.onboard-wizard-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ow-accent-text);
  margin-bottom: 16px;
}
.onboard-wizard-title {
  font-size: 31px;
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ow-text);
  margin: 0 0 16px;
}
.onboard-wizard-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ow-text-3);
  margin: 0 0 28px;
}
.onboard-wizard-lede strong { color: var(--ow-text-2); font-weight: 600; }

.onboard-wizard-promise {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.onboard-wizard-promise li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ow-text-3);
}
.onboard-wizard-promise li strong { color: var(--ow-text); font-weight: 600; }
.onboard-wizard-promise-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--ow-grad);
}

.onboard-wizard-placeholder {
  border: 1px dashed var(--ow-border);
  background: var(--ow-field);
  border-radius: 14px;
  padding: 20px 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ow-text-3);
  margin-bottom: 32px;
}

.onboard-wizard-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Sticky footer: stays flush at the bottom of the scrolling stage so the
     primary action is always reachable on long beats; on short beats there's
     no scroll so it just sits at the end of the (vertically-centred) column.
     Solid bg cleanly covers content scrolling beneath it; the stage has no
     bottom padding so bottom:0 sits flush (the bar carries its own). */
  position: sticky;
  bottom: 0;
  margin-top: 32px;
  padding: 18px 0 28px;
  background: var(--ow-bg);
}
.onboard-wizard-btn {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, opacity 0.16s ease, background 0.16s ease;
}
.onboard-wizard-btn--primary {
  background: var(--ow-grad);
  background-clip: padding-box;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(239, 83, 134, 0.32);
}
.onboard-wizard-btn--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 9px 26px rgba(239, 83, 134, 0.4); }
.onboard-wizard-btn--primary:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.onboard-wizard-btn--ghost {
  background: transparent;
  border-color: var(--ow-border);
  color: var(--ow-text-2);
}
.onboard-wizard-btn--ghost:hover { border-color: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.02); }

/* ── Step 1: name-your-workspace field ── */
.onboard-wizard-field { margin-bottom: 30px; }
.onboard-wizard-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ow-text-2);
  margin-bottom: 8px;
}
.onboard-wizard-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 15px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--ow-border);
  background: var(--ow-field);
  color: var(--ow-text);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.onboard-wizard-input::placeholder { color: var(--ow-text-4); }
.onboard-wizard-input:focus {
  outline: none;
  border-color: var(--ow-coral);
  box-shadow: 0 0 0 3px rgba(243, 119, 113, 0.16);
  background: #ffffff;
}
.onboard-wizard-input:disabled { opacity: 0.6; cursor: default; }
.onboard-wizard-field-hint {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ow-text-4);
}

/* ── Step 2: platform connect cards ── */
.onboard-wizard-platforms {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}
.onboard-wizard-platform {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 15px 18px;
  border-radius: 14px;
  border: 1px solid var(--ow-border);
  background: #ffffff;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.16s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.onboard-wizard-platform:hover {
  border-color: rgba(243, 119, 113, 0.5);
  box-shadow: 0 6px 22px rgba(239, 83, 134, 0.12);
  transform: translateY(-1px);
}
.onboard-wizard-platform:focus-visible {
  outline: none;
  border-color: var(--ow-coral);
  box-shadow: 0 0 0 3px rgba(243, 119, 113, 0.18);
}
.onboard-wizard-platform-logo {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--ow-field);
  border: 1px solid var(--ow-border);
}
.onboard-wizard-platform-logo svg { width: 22px; height: 22px; }
.onboard-wizard-platform-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.onboard-wizard-platform-name { font-size: 15px; font-weight: 600; color: var(--ow-text); }
.onboard-wizard-platform-blurb { font-size: 13px; color: var(--ow-text-3); }
.onboard-wizard-platform-cta {
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ow-accent-text);
}

/* "Coming soon" state — Meta pre-App-Review for non-allowlisted users. Muted,
   non-interactive; neutralises the hover lift the base rule applies. */
.onboard-wizard-platform--soon {
  cursor: default;
  opacity: 0.6;
  background: var(--ow-field);
}
.onboard-wizard-platform--soon:hover {
  border-color: var(--ow-border);
  box-shadow: none;
  transform: none;
}
.onboard-wizard-platform--soon .onboard-wizard-platform-cta { color: var(--ow-text-3); }

/* inline trial disclosure (folds TrialWarningModal into the connect beat) */
.onboard-wizard-disclosure {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--ow-coral) 28%, var(--ow-border));
  background: color-mix(in srgb, var(--ow-coral) 6%, var(--ow-bg));
  margin-bottom: 30px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ow-text-3);
}
.onboard-wizard-disclosure strong { color: var(--ow-text); font-weight: 600; }
.onboard-wizard-disclosure-icon { flex: 0 0 auto; margin-top: 1px; color: var(--ow-accent-text); }

/* connecting + connected states */
.onboard-wizard-connecting {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px;
  border-radius: 14px;
  border: 1px solid var(--ow-border);
  background: var(--ow-field);
  margin-bottom: 30px;
}
.onboard-wizard-connecting-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.onboard-wizard-connecting-text strong { font-size: 15px; font-weight: 600; color: var(--ow-text); }
.onboard-wizard-connecting-text span { font-size: 13px; color: var(--ow-text-3); }
.onboard-wizard-spinner {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(243, 119, 113, 0.25);
  border-top-color: var(--ow-coral);
  animation: onboardWizardSpin 0.7s linear infinite;
}
@keyframes onboardWizardSpin { to { transform: rotate(360deg); } }
.onboard-wizard-connected {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, #15b886 38%, var(--ow-border));
  background: color-mix(in srgb, #15b886 8%, var(--ow-bg));
  margin-bottom: 30px;
  font-size: 14.5px;
  color: var(--ow-text-2);
}
.onboard-wizard-connected-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #15b886;
  color: #ffffff;
}

/* ── Step 2: Import your data (OnboardingImportStep) ── */
.ow-import-status {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px;
  border-radius: 14px;
  border: 1px solid var(--ow-border);
  background: var(--ow-field);
  margin-bottom: 30px;
}

.ow-import-note {
  border: 1px solid var(--ow-border);
  background: var(--ow-field);
  border-radius: 13px;
  padding: 15px 17px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ow-text-3);
  margin-bottom: 26px;
}
.ow-import-note strong { color: var(--ow-text); font-weight: 600; }
.ow-import-note--warn {
  border-color: color-mix(in srgb, var(--ow-gold) 42%, var(--ow-border));
  background: color-mix(in srgb, var(--ow-gold) 9%, var(--ow-bg));
}
.ow-import-note--calm {
  border-color: color-mix(in srgb, var(--ow-coral) 24%, var(--ow-border));
  background: color-mix(in srgb, var(--ow-coral) 5%, var(--ow-bg));
}

/* confirm-basics card */
.ow-import-confirm {
  border: 1px solid var(--ow-border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 26px;
  background: var(--ow-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 34px -22px rgba(0, 0, 0, 0.22);
}
.ow-import-confirm-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }
.ow-import-confirm-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #15b886;
  color: #ffffff;
}
.ow-import-confirm-title { font-size: 16px; font-weight: 700; color: var(--ow-text); letter-spacing: -0.01em; }
.ow-import-confirm-sub { font-size: 13px; color: var(--ow-text-3); margin-top: 2px; }
.ow-import-basics { display: flex; flex-direction: column; gap: 14px; }
.ow-import-basic {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ow-border);
}
.ow-import-basic-label { grid-row: 1 / span 2; font-size: 13px; font-weight: 600; color: var(--ow-text-2); align-self: start; padding-top: 1px; }
.ow-import-basic-value { font-size: 15px; font-weight: 600; color: var(--ow-text); }
.ow-import-basic-hint { font-size: 12px; color: var(--ow-text-4); line-height: 1.45; margin-top: 3px; }

/* currency / timezone chooser (shown only when accounts disagree) */
.ow-import-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.ow-import-choice-opt {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 9px;
  border: 1px solid var(--ow-border);
  background: var(--ow-bg);
  color: var(--ow-text-2);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.ow-import-choice-opt:hover:not(:disabled) { border-color: rgba(243, 119, 113, 0.5); }
.ow-import-choice-opt.is-selected {
  border-color: var(--ow-coral);
  background: color-mix(in srgb, var(--ow-coral) 9%, var(--ow-bg));
  color: var(--ow-accent-text);
  box-shadow: 0 0 0 1px var(--ow-coral);
}
.ow-import-choice-opt:disabled { opacity: 0.55; cursor: default; }

/* live import progress */
.ow-import-progress {
  border: 1px solid var(--ow-border);
  border-radius: 14px;
  padding: 18px 18px 20px;
  background: var(--ow-field);
  margin-bottom: 22px;
}
.ow-import-progress-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ow-import-progress-spinner {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(243, 119, 113, 0.25);
  border-top-color: var(--ow-coral);
  animation: onboardWizardSpin 0.7s linear infinite;
}
.ow-import-progress-head > div { flex: 1 1 auto; min-width: 0; }
.ow-import-progress-title { font-size: 15px; font-weight: 600; color: var(--ow-text); }
.ow-import-progress-sub { font-size: 13px; color: var(--ow-text-3); margin-top: 2px; }
.ow-import-progress-pct { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--ow-accent-text); }
.ow-import-progress-track { height: 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.07); overflow: hidden; }
.ow-import-progress-bar {
  height: 100%;
  border-radius: 6px;
  background: var(--ow-grad);
  transition: width 0.5s ease;
}

/* ── Auto-portfolio-structure opt-in (import step / S6) ──
 * A non-blocking offer shown while the import streams. Yes → arms a `requested`
 * row (S5's after-sync trigger computes it); the card swaps to a calm armed
 * confirmation. Brand-locked via the `.ow-*` tokens. DESIGN.md §10.10.1 A. */
.ow-suggest {
  border: 1px solid color-mix(in srgb, var(--ow-coral) 28%, var(--ow-border));
  background: color-mix(in srgb, var(--ow-coral) 5%, var(--ow-bg));
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.ow-suggest-head { display: flex; align-items: flex-start; gap: 12px; }
.ow-suggest-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--ow-grad);
}
.ow-suggest-text { min-width: 0; }
.ow-suggest-title { font-size: 14.5px; font-weight: 700; color: var(--ow-text); letter-spacing: -0.01em; }
.ow-suggest-sub { font-size: 13px; color: var(--ow-text-3); margin-top: 3px; line-height: 1.5; }
.ow-suggest-actions { display: flex; gap: 10px; margin-top: 14px; }
.ow-suggest-btn {
  appearance: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.ow-suggest-btn:disabled { opacity: 0.55; cursor: default; }
.ow-suggest-btn--yes {
  border: 1px solid transparent;
  color: #ffffff;
  background: var(--ow-grad);
  box-shadow: 0 6px 18px -6px rgba(239, 83, 134, 0.5);
}
.ow-suggest-btn--yes:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 9px 24px -6px rgba(239, 83, 134, 0.5); }
.ow-suggest-btn--no {
  border: 1px solid var(--ow-border);
  background: transparent;
  color: var(--ow-text-2);
}
.ow-suggest-btn--no:hover:not(:disabled) { border-color: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.02); }
/* Armed confirmation — calm, no actions. */
.ow-suggest--armed {
  border-color: color-mix(in srgb, #15b886 32%, var(--ow-border));
  background: color-mix(in srgb, #15b886 6%, var(--ow-bg));
}
.ow-suggest--armed .ow-suggest-ico { background: #15b886; }

/* ── Build a portfolio (OnboardingPortfolioStep — beat 3 / S4) ──
 * The guided first-portfolio builder. Brand-locked via the `.onboard-wizard`
 * tokens above; classes scoped `.ow-pf-*`. */
.ow-pf { display: flex; flex-direction: column; }

/* Section label (Optimisation goal / Pacing strategy) — mirrors the field label. */
.ow-pf-section { margin-bottom: 24px; }
.ow-pf-section-label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--ow-text-3); margin-bottom: 10px;
}

/* Base currency + monthly budget — two equal columns. */
.ow-pf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.ow-pf-fields .onboard-wizard-field { margin-bottom: 0; }
.ow-pf-budget-wrap { position: relative; }
.ow-pf-budget-sym {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; font-weight: 600; color: var(--ow-text-3); pointer-events: none;
}
.ow-pf-budget-input { padding-left: 28px; }

/* Optimisation-goal cards — 2-col grid, matching the in-app modal. */
.ow-pf-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ow-pf-goal {
  position: relative; display: flex; align-items: flex-start; gap: 11px;
  text-align: left; padding: 13px 14px; border-radius: 12px;
  border: 1.5px solid var(--ow-border); background: var(--ow-field); cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.ow-pf-goal:hover:not(:disabled) { border-color: rgba(243, 119, 113, 0.5); }
.ow-pf-goal.is-selected {
  border-color: var(--ow-coral); background: #fff;
  box-shadow: 0 0 0 3px rgba(243, 119, 113, 0.14);
}
.ow-pf-goal:disabled { opacity: 0.55; cursor: default; }
.ow-pf-goal-ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--ow-border); color: var(--ow-accent-text);
}
.ow-pf-goal.is-selected .ow-pf-goal-ico {
  background: var(--ow-grad); background-clip: padding-box; border-color: transparent; color: #fff;
}
.ow-pf-goal-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ow-pf-goal-name { font-size: 14px; font-weight: 600; color: var(--ow-text); }
.ow-pf-goal-desc { font-size: 12px; color: var(--ow-text-3); line-height: 1.35; }
.ow-pf-goal-check { position: absolute; top: 11px; right: 11px; color: var(--ow-accent-text); }

/* Pacing strategy — four equal bar-glyph cards. */
.ow-pf-pacing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ow-pf-pace {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 10px; border-radius: 12px;
  border: 1.5px solid var(--ow-border); background: var(--ow-field); cursor: pointer;
  color: var(--ow-text-4);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}
.ow-pf-pace:hover:not(:disabled) { border-color: rgba(243, 119, 113, 0.5); }
.ow-pf-pace.is-selected {
  border-color: var(--ow-coral); background: #fff; color: var(--ow-accent-text);
  box-shadow: 0 0 0 3px rgba(243, 119, 113, 0.14);
}
.ow-pf-pace:disabled { opacity: 0.55; cursor: default; }
.ow-pf-pace-bars { display: flex; align-items: center; justify-content: center; height: 22px; }
.ow-pf-pace-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ow-text-3);
}
.ow-pf-pace.is-selected .ow-pf-pace-label { color: var(--ow-accent-text); }

.ow-pf-pick { margin-bottom: 28px; }
.ow-pf-pick-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ow-pf-pick-title { font-size: 13px; font-weight: 600; color: var(--ow-text-2); display: flex; align-items: center; gap: 8px; }
.ow-pf-pick-count {
  font-size: 11px; font-weight: 600; color: var(--ow-accent-text);
  background: rgba(243, 119, 113, 0.12); border-radius: 20px; padding: 2px 9px;
}
.ow-pf-selectall {
  font-size: 12px; font-weight: 600; color: var(--ow-accent-text);
  background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.ow-pf-selectall:hover:not(:disabled) { background: rgba(243, 119, 113, 0.08); }
.ow-pf-selectall:disabled { opacity: 0.5; cursor: default; }
.ow-pf-search { margin-bottom: 10px; }
.ow-pf-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--ow-border); border-radius: 12px; padding: 6px; background: var(--ow-field);
}
.ow-pf-list-empty { padding: 18px 12px; font-size: 13px; color: var(--ow-text-3); text-align: center; }
.ow-pf-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; cursor: pointer; text-align: left;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.ow-pf-item:hover:not(:disabled) { background: rgba(0, 0, 0, 0.03); }
.ow-pf-item.is-selected { background: #fff; border-color: rgba(243, 119, 113, 0.4); }
.ow-pf-item:disabled { cursor: default; }
.ow-pf-check {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--ow-border); background: #fff;
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.ow-pf-check.is-on { background: var(--ow-grad); background-clip: padding-box; border-color: transparent; }
.ow-pf-item-logo { flex: 0 0 auto; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.ow-pf-item-logo svg { width: 16px; height: 16px; }
.ow-pf-item-name {
  flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--ow-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ow-pf-item-spend { flex: 0 0 auto; font-size: 12px; color: var(--ow-text-3); font-variant-numeric: tabular-nums; }

/* ── Go live (OnboardingGoLiveStep — beat 4 / S6) ──
 * The two automation-MODE cards (Tom folded these in here from the old
 * productive-wait step) + the kill-switch reassurance. Brand-locked via the
 * `.onboard-wizard` tokens above; classes scoped `.ow-gl-*`. */
.ow-gl { display: flex; flex-direction: column; }
.ow-gl-modes { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }

.ow-gl-mode {
  display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: left;
  padding: 16px 18px; border-radius: 14px;
  border: 1.5px solid var(--ow-border); background: var(--ow-field); cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.ow-gl-mode:hover:not(.is-selected):not(.is-locked) { border-color: rgba(243, 119, 113, 0.5); }
.ow-gl-mode.is-selected {
  border-color: var(--ow-coral); background: #fff;
  box-shadow: 0 0 0 3px rgba(243, 119, 113, 0.14);
}
.ow-gl-mode.is-locked { opacity: 0.6; cursor: default; }
.ow-gl-mode:disabled { cursor: default; }

.ow-gl-mode-head { display: flex; align-items: center; gap: 12px; }
.ow-gl-mode-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--ow-border); color: var(--ow-accent-text);
}
/* padding-box clip so the gradient doesn't bleed a 1px fringe into the
 * transparent border ring (CLAUDE.md gradient-on-bordered-element gotcha). */
.ow-gl-mode.is-selected .ow-gl-mode-ico { background: var(--ow-grad); background-clip: padding-box; border-color: transparent; color: #fff; }
.ow-gl-mode-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ow-gl-mode-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ow-text); }
.ow-gl-mode-tagline { font-size: 12.5px; color: var(--ow-text-3); }
.ow-gl-mode-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ow-accent-text); background: rgba(243, 119, 113, 0.12);
  border-radius: 20px; padding: 2px 8px;
}
.ow-gl-mode-tag--lock { color: var(--ow-text-3); background: rgba(0, 0, 0, 0.06); }

.ow-gl-radio {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--ow-border); background: #fff;
  transition: border-color 0.16s ease;
}
.ow-gl-radio.is-on {
  border-color: var(--ow-coral);
  background:
    radial-gradient(circle at center, var(--ow-coral) 0 5px, transparent 6px);
}

.ow-gl-mode-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ow-gl-mode-points li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--ow-text-2); line-height: 1.4; }
.ow-gl-point-dot {
  flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; margin-top: 7px;
  background: var(--ow-coral);
}

.ow-gl-kill {
  display: flex; align-items: flex-start; gap: 11px; margin-bottom: 8px;
  padding: 13px 15px; border-radius: 12px;
  background: rgba(243, 119, 113, 0.06); border: 1px solid rgba(243, 119, 113, 0.16);
  font-size: 13px; color: var(--ow-text-2); line-height: 1.45;
}
.ow-gl-kill-ico { flex: 0 0 auto; color: var(--ow-accent-text); margin-top: 1px; }

/* ── Narrow viewport fallback ──
 * startClientSetup routes ≤920px to the simple modal, so the full-screen wizard
 * normally never renders this small. If it does (e.g. a resize after open),
 * degrade to a single column with the rail above the stage rather than break.
 */
@media (max-width: 920px) {
  .onboard-wizard { grid-template-columns: 1fr; }
  .onboard-wizard-rail { padding: 24px 22px; gap: 20px; }
  .onboard-wizard-steps { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .onboard-wizard-step-label { display: none; }
  .onboard-wizard-trust { display: none; }
  .onboard-wizard-stage { padding: 32px 22px 48px; }
  .onboard-wizard-title { font-size: 26px; }
  .ow-pf-fields { grid-template-columns: 1fr; gap: 18px; }
  .ow-pf-goals { grid-template-columns: 1fr; }
  .ow-pf-pacing { grid-template-columns: repeat(2, 1fr); }
}

/* ── Shared AccountPicker, brand-locked ──
 * The picker (src/app/components/accounts/AccountPicker.tsx) is theme-adaptive on
 * the Accounts tab via its `--ap-*` tokens (defaulted in accounts.css). Inside
 * the wizard we re-point those same tokens to the hex-pinned ROASt brand palette
 * — the SAME override mechanism `.anim-stage--theme-light` uses to reskin the
 * landing animations (DESIGN.md §24). No fork: one component, the ancestor class
 * swaps the skin. Keep these values in lockstep with the `.onboard-wizard` tokens
 * above. */
.onboard-wizard .ap-picker {
  --ap-bg:        #ffffff;
  --ap-field:     #fafafa;
  --ap-border:    rgba(0, 0, 0, 0.09);
  --ap-text:      #0a0b0d;
  --ap-text3:     #62666d;
  --ap-accent:    #f37771;
  --ap-accent-text: #d6356a;
  --ap-accent-tint: rgba(243, 119, 113, 0.08);
  --ap-accent-ring: rgba(243, 119, 113, 0.5);
  --ap-accent-glow: rgba(243, 119, 113, 0.4);
  --ap-cb-border: rgba(0, 0, 0, 0.22);
  --ap-cta:       linear-gradient(135deg, #faa963, #f37771 50%, #ef5386);
  --ap-cta-text:  #ffffff;
  --ap-cta-glow:  rgba(239, 83, 134, 0.32);
  --ap-danger:    #c4453f;
  max-width: 100%;            /* the wizard stage already caps width */
}

/* ═══════════════════ 2. In-app resume banner (themed) ═══════════════════════
 * Lives inside the app shell, so it READS theme tokens (unlike the wizard).
 */
/* App-wide ROUNDED card — the same rounded/bordered/shadowed card we had on the
   Dashboard, but floated app-wide so it shows on every tab. `position: fixed`
   so it sits above any page without each panel rendering it; INSET to the
   content column (main's 32px horizontal padding) so it reads as a card, not a
   full-bleed bar. `body.has-resume-strip` bumps main's top padding so content
   is never covered. Height is fixed so that bump stays exact. */
.onboard-resume-strip {
  position: fixed;
  top: 72px;                          /* 56px header + 16px gap */
  left: calc(224px + 32px);           /* nav margin (expanded) + main's 32px padding */
  right: 32px;                        /* = main's right padding */
  z-index: 199;                       /* below the header (z:200) */
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  padding: 0 18px;
  box-sizing: border-box;
  border-radius: var(--radius-lg, 14px);
  border: 1px solid var(--border);
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--accent) 9%, var(--panel-bg, var(--bg2))) 0%,
    var(--panel-bg, var(--bg2)) 60%);
  box-shadow: var(--shadow);
  transition: left 0.45s cubic-bezier(0.34, 1.18, 0.64, 1);   /* match the nav spring */
}
body.nav-collapsed .onboard-resume-strip { left: calc(76px + 32px); }

/* Make room for the floating card: header(46) + gap(16) + card(60) + gap(24).
   Bump --shell-content-top on the CONTENT WINDOW only so the whole window drops below
   the resume strip (it drives .content-window's `top` calc — DESIGN.md §8). Scoping
   the var to .content-window (the chrome is now a SIBLING, not a descendant) keeps the
   header + nav at their real 46px — only the window moves down. */
body.has-resume-strip .content-window { --shell-content-top: calc(46px + 16px + 60px + 24px); }

.onboard-resume-strip-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.onboard-resume-strip-title { font-size: 14px; font-weight: 600; color: var(--text); }
.onboard-resume-strip-sub {
  font-size: 13px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.onboard-resume-strip-cta { flex: 0 0 auto; white-space: nowrap; }

/* Narrow: stack the button under the text + let the card grow. */
@media (max-width: 600px) {
  .onboard-resume-strip { height: auto; padding: 12px 16px; flex-direction: column; align-items: stretch; gap: 10px; }
  .onboard-resume-strip-cta { width: 100%; }
}

/* ── Payoff reveal (S5 — the lead-in to Go live) ─────────────────────────────
   A first read of the user's REAL data before the on/off decision. Tiles reuse
   the brand-locked tokens; grade colours are semantic (A/B good, C ok, D/F low).
   ─────────────────────────────────────────────────────────────────────────── */
.ow-py { display: flex; flex-direction: column; }

.ow-py-tiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 6px 0 26px;
}

.ow-py-tile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--ow-border);
  background: var(--ow-field);
}
.ow-py-tile--accent {
  border-color: color-mix(in srgb, var(--ow-coral) 28%, var(--ow-border));
  background: color-mix(in srgb, var(--ow-coral) 5%, var(--ow-bg));
}

.ow-py-tile-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--ow-accent-text);
  background: color-mix(in srgb, var(--ow-coral) 10%, var(--ow-bg));
}
/* Gradient tile icon needs padding-box clip — the 1px transparent border ring
   would otherwise show a gradient fringe (CLAUDE.md gradient-on-border gotcha). */
.ow-py-tile--accent .ow-py-tile-ico {
  color: #fff;
  background: var(--ow-grad);
  background-clip: padding-box;
}

.ow-py-tile-body { flex: 1 1 auto; min-width: 0; }

.ow-py-tile-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
  color: var(--ow-text);
}
.ow-py-tile-sub {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ow-text-3);
}
.ow-py-tile-sub strong { color: var(--ow-text); font-weight: 650; }

/* Grade badge (A–F) — identical size on every tile, pinned top-right (each tile
   is a flex row; the badge is the last child after the flex:1 body, so it
   right-aligns; align-self keeps it at the top regardless of body height). */
.ow-py-grade {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ow-py-grade--good { color: #15894f; background: color-mix(in srgb, #15894f 12%, var(--ow-bg)); }
.ow-py-grade--ok   { color: #b4760f; background: color-mix(in srgb, #b4760f 13%, var(--ow-bg)); }
.ow-py-grade--low  { color: #cf3b5e; background: color-mix(in srgb, #cf3b5e 11%, var(--ow-bg)); }

/* ═══════════════════ 3. D11 first-login landing fork ═══════════════════ */
/* Brand-locked demo-vs-connect choice (onboarding §16.3 / §16.8). Same hex
 * palette as the wizard — theme-independent. Single centred column (no rail). */
.onboard-choice {
  --ow-bg:        #ffffff;
  --ow-text:      #0a0b0d;
  --ow-text-2:    #3a3f47;
  --ow-text-3:    #62666d;
  --ow-border:    rgba(0, 0, 0, 0.09);
  --ow-coral:     #f37771;
  --ow-pink:      #ef5386;
  --ow-gold:      #faa963;
  --ow-accent-text: #d6356a;
  --ow-grad:      linear-gradient(92.88deg, #faa963 9.16%, #f37771 50%, #ef5386 90.84%);

  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--ow-bg);
  color: var(--ow-text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  outline: none;
}
/* warm dawn glow behind the choice */
.onboard-choice::before {
  content: '';
  position: fixed;
  left: 50%;
  top: -200px;
  width: 900px;
  height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, #faa963 22%, transparent), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.onboard-choice-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  text-align: center;
}
.onboard-choice-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
}
.onboard-choice-logo { display: block; }
.onboard-choice-wordmark { height: 24px; color: var(--ow-text); }
.onboard-choice-title {
  font-size: 38px;
  line-height: 1.08;
  font-weight: 680;
  letter-spacing: -0.022em;
  margin: 0 0 14px;
}
.onboard-choice-lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ow-text-2);
  max-width: 560px;
  margin: 0 auto 38px;
}
.onboard-choice-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
}
.onboard-choice-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 26px 26px;
  border-radius: 18px;
  border: 1px solid var(--ow-border);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(10, 11, 13, 0.04), 0 12px 32px -18px rgba(10, 11, 13, 0.18);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  font: inherit;
  color: inherit;
}
.onboard-choice-card:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ow-coral) 38%, var(--ow-border));
  box-shadow: 0 2px 4px rgba(10, 11, 13, 0.05), 0 22px 48px -22px rgba(243, 119, 113, 0.32);
}
.onboard-choice-card:disabled { opacity: 0.62; cursor: default; }
.onboard-choice-card--connect {
  border-color: color-mix(in srgb, var(--ow-coral) 30%, var(--ow-border));
  background: linear-gradient(180deg, color-mix(in srgb, #faa963 6%, #ffffff), #ffffff 62%);
}
.onboard-choice-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--ow-coral) 11%, #fff);
  color: var(--ow-accent-text);
  background-clip: padding-box;       /* gradient-on-bordered-element fringe guard */
}
.onboard-choice-card-icon--brand {
  background: var(--ow-grad);
  color: #fff;
  background-clip: padding-box;
}
.onboard-choice-card-title {
  font-size: 18px;
  font-weight: 640;
  letter-spacing: -0.014em;
  color: var(--ow-text);
}
.onboard-choice-card-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ow-text-3);
}
.onboard-choice-card-cta {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ow-accent-text);
}
.onboard-choice-card-cta--brand { color: var(--ow-accent-text); }
.onboard-choice-trust {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ow-text-3);
  margin: 30px auto 0;
  max-width: 560px;
}

/* ≤720px: the fork stacks (the gate is desktop-only ≥921px, but keep it sane
 * if a narrow window slips through, e.g. a resize after the choice mounts). */
@media (max-width: 720px) {
  .onboard-choice-cards { grid-template-columns: 1fr; }
  .onboard-choice-title { font-size: 30px; }
}