/* ═══════════════════════════════════════════════════════════════════
   Financials Studio — Onboarding pages prototype
   Layered on top of ../../landing-site/tokens.css. Mirrors the landing
   page's voice (Fraunces serif headlines, navy + gold, generous breath)
   while compressing the hero down to a single-column form card so a
   first-time visitor can finish in one screen.
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--charcoal);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { display: block; max-width: 100%; height: auto; }
a    { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ─────────────────────────────────────────────────── nav (slim) ── */

.nav {
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
}
.nav-inner {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 14px var(--pad-side);
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.brand-logo {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.nav-cta-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-link-soft {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--navy);
  opacity: 0.78;
}
.nav-link-soft:hover { opacity: 1; }

/* ─────────────────────────────────────────────────── stage ── */

.stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 7vw, 96px) var(--pad-side);
  position: relative;
  overflow: hidden;
  background:
    /* warm gold sweep across the whole top, anchored on the right */
    radial-gradient(ellipse 90% 70% at 80% 0%,
        rgba(232, 180, 58, 0.18),
        rgba(232, 180, 58, 0) 60%),
    /* second gold pass top-left so no corner reads as flat */
    radial-gradient(ellipse 60% 50% at 10% 5%,
        rgba(232, 180, 58, 0.08),
        rgba(232, 180, 58, 0) 65%),
    /* cool navy wash bottom-left to balance the warm top */
    radial-gradient(ellipse 70% 60% at 0% 100%,
        rgba(26, 58, 107, 0.10),
        rgba(26, 58, 107, 0) 65%),
    /* subtle navy → bone diagonal to keep the canvas alive end-to-end */
    linear-gradient(135deg,
        rgba(238, 242, 248, 0.6) 0%,
        rgba(247, 249, 252, 0) 55%,
        rgba(255, 250, 235, 0.45) 100%),
    var(--bg);
}

/* ─────────────────────────────────────────────────── card ── */

.card {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
  width: 100%;
  max-width: 520px;
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  gap: 24px;
}

.card-wide { max-width: 640px; }

.card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-upper);
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gold-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  justify-self: start;
}
.card-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--gold);
}

.card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.06;
  letter-spacing: var(--ls-tight-2);
  color: var(--navy);
  margin: 0;
}

.card-lede {
  font-size: var(--fs-body-lg);
  color: var(--charcoal);
  margin: 0;
  max-width: 46ch;
}
.card-lede strong {
  color: var(--navy);
  font-weight: 600;
}

.card-meta {
  font-size: var(--fs-body-sm);
  color: var(--muted);
  margin: 0;
}

/* ─────────────────────────────────────────────────── divider ── */

.or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--ls-upper-narrow);
  text-transform: uppercase;
  color: var(--muted);
}
.or::before, .or::after {
  content: "";
  height: 1px;
  background: var(--hairline);
}

/* ─────────────────────────────────────────────────── google ── */

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 13px 20px;
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--charcoal);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-cta);
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.btn-google:hover {
  border-color: var(--navy);
  background: #fbfcfe;
  transform: translateY(-1px);
}
.btn-google svg { width: 18px; height: 18px; }

/* ─────────────────────────────────────────────────── form ── */

.form {
  display: grid;
  gap: 18px;
}

.field {
  display: grid;
  gap: 6px;
}
.field label {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--navy);
}
.field input,
.field select {
  font: inherit;
  font-size: var(--fs-body);
  color: var(--charcoal);
  background: var(--paper);
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-cta);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 58, 107, 0.12);
}
.field input[readonly] {
  background: var(--bg-soft);
  color: var(--muted);
  cursor: not-allowed;
}

/* Custom select: kill the native chevron + whitespace, render a navy
   caret SVG flush against the right edge so the affordance matches
   our other inputs. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231a3a6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1.5 6,6.5 11,1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.field select::-ms-expand { display: none; }

.field .hint {
  font-size: var(--fs-meta);
  color: var(--muted);
}
.field.is-invalid input,
.field.is-invalid select {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(184, 34, 53, 0.10);
}
.field-error {
  font-size: var(--fs-meta);
  color: var(--danger);
  margin: 0;
}

/* Two-column row: align labels + inputs across columns and let any
   per-field hint live in a third row that spans both columns. Without
   align-items:start the differing hint lengths push columns out of
   sync (the original "Confirm Password too low" bug). */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  align-items: start;
}
.field-row .row-hint {
  grid-column: 1 / -1;
  font-size: var(--fs-meta);
  color: var(--muted);
  margin: -2px 0 0;
}
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────── alerts ── */

.alert {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-1);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}
.alert-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.alert strong { font-weight: 600; }
.alert-info {
  background: rgba(26, 58, 107, 0.06);
  color: var(--info);
  border: 1px solid rgba(26, 58, 107, 0.18);
}
.alert-info .alert-icon { color: var(--info); }
.alert-error {
  background: rgba(184, 34, 53, 0.06);
  color: var(--danger);
  border: 1px solid rgba(184, 34, 53, 0.20);
}
.alert-error .alert-icon { color: var(--danger); }
.alert-success {
  background: rgba(46, 139, 87, 0.06);
  color: var(--success);
  border: 1px solid rgba(46, 139, 87, 0.20);
}
.alert-success .alert-icon { color: var(--success); }

/* ─────────────────────────────────────────────────── ctas ── */

.actions {
  display: grid;
  gap: 14px;
}

.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 22px;
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--paper);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--r-cta);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.cta-primary:hover { background: var(--navy-soft); transform: translateY(-1px); }
.cta-primary[disabled],
.cta-primary[aria-busy="true"] {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}

.cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  font-family: var(--sans);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--r-cta);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.cta-ghost:hover { border-color: var(--navy); background: rgba(26, 58, 107, 0.04); }

/* ─────────────────────────────────────────────────── footer ── */

.foot {
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--muted);
}
.foot a {
  color: var(--navy);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.foot a:hover { border-bottom-color: var(--navy); }

.legal {
  font-size: var(--fs-meta);
  color: var(--muted-2);
  text-align: center;
  margin: 0;
}
.legal a { color: var(--muted); border-bottom: 1px solid var(--hairline); }

/* ─────────────────────────────────────────────────── reveal ── */

.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-std) var(--ease-out),
    transform var(--dur-std) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ─────────────────────────────────────────────────── spinner ── */

.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(26, 58, 107, 0.18);
  border-top-color: var(--navy);
  border-radius: var(--r-pill);
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.6s; }
}
/* ═══════════════════════════════════════════════════════════════════
   Financials Studio — Tenant onboarding wizard prototype
   Layered on top of tokens.css + onboarding.css. Adds the wizard frame
   (left progress rail + right step panel), the partner-roster repeating
   row, the payment-method segmented tabs, and the review summary. Reuses
   .field / .cta-primary / .alert-* etc. from onboarding.css unchanged.
   ═══════════════════════════════════════════════════════════════════ */

/* ───── wizard frame ──────────────────────────────────────────────── */

/* Wider stage so the two-column layout breathes. */
.stage--wizard {
  align-items: flex-start;            /* top-aligned: forms can run long */
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.wizard {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
  width: 100%;
  max-width: 1080px;                  /* wider so the partner row breathes */
  display: grid;
  grid-template-columns: 280px 1fr;   /* slightly wider rail to balance */
  /* No overflow:hidden here — that clipped popovers (payment-method
     dropdown, etc.) when they extended past the wizard's bottom. The
     rail clips its own gradient via its border-radius below; the right
     pane has a flat colour so no bleed-through to worry about. */
}

@media (max-width: 760px) {
  .wizard { grid-template-columns: 1fr; }
}

/* ───── left rail — progress steps ────────────────────────────────── */

.wizard-rail {
  background: linear-gradient(180deg,
      rgba(238, 242, 248, 0.7) 0%,
      rgba(238, 242, 248, 0) 75%),
    var(--bg-soft, #f7f9fc);
  border-right: 1px solid var(--hairline);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Round the rail's outer corners so its gradient doesn't bleed past
     the wizard's rounded edge now that the wizard itself isn't clipping. */
  border-top-left-radius: var(--r-2);
  border-bottom-left-radius: var(--r-2);
}
@media (max-width: 760px) {
  .wizard-rail {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    border-radius: var(--r-2) var(--r-2) 0 0;
  }
}

.wizard-rail-eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-upper);
  text-transform: uppercase;
  color: var(--muted);
}

.wizard-rail-title {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: var(--ls-tight-2);
  color: var(--navy);
  margin: 0;
}

.wizard-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.wizard-step {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-1);
  font-size: var(--fs-body-sm);
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wizard-step:hover { background: rgba(26, 58, 107, 0.04); }

.wizard-step-dot {
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: var(--muted);
}

.wizard-step.is-current {
  color: var(--navy);
  font-weight: 600;
  background: rgba(26, 58, 107, 0.06);
}
.wizard-step.is-current .wizard-step-dot {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}

.wizard-step.is-done { color: var(--charcoal); }
.wizard-step.is-done .wizard-step-dot {
  background: var(--success, #2e8b57);
  border-color: var(--success, #2e8b57);
  color: var(--paper);
}

.wizard-step.is-skip { opacity: 0.45; }

.wizard-rail-foot {
  margin-top: auto;
  font-size: var(--fs-meta);
  color: var(--muted-2);
  line-height: 1.55;
}

/* ───── right pane — step panel ───────────────────────────────────── */

.wizard-pane {
  padding: clamp(36px, 4.5vw, 56px);
}

/* Each step panel is itself a vertical grid. Without this, the eyebrow /
   title / lede / form / nav stack would rely on default browser margins,
   which is what produced the cramped feel reported on the screenshots.
   The [hidden] override is essential — display:grid otherwise clobbers
   the HTML `hidden` attribute and every panel renders at once. */
.wizard-panel {
  display: grid;
  gap: 28px;
}
.wizard-panel[hidden] { display: none; }
.wizard-panel > .wizard-pane-eyebrow + .wizard-pane-title { margin-top: 4px; }
.wizard-panel > .wizard-pane-title + .wizard-pane-lede   { margin-top: -18px; }
/* And add a little extra breathing room above whatever comes after the
   lede, on top of the panel's grid gap. */
.wizard-panel > .wizard-pane-lede + * { margin-top: 6px; }

.wizard-pane-eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-upper);
  text-transform: uppercase;
  color: var(--muted);
}

.wizard-pane-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
  letter-spacing: var(--ls-tight-2);
  color: var(--navy);
  margin: 0;
}

.wizard-pane-lede {
  font-size: var(--fs-body);
  color: var(--charcoal);
  margin: 0;
  max-width: 52ch;
}

.wizard-pane-section { display: grid; gap: 8px; }
.wizard-pane-section h3 {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}

/* ───── step nav (Back / Next at the bottom of every panel) ───────── */

.wizard-nav {
  display: flex;
  gap: 12px;
  justify-content: flex-end;          /* primary actions right-aligned, like a dialog footer */
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  margin-top: 12px;
}
.wizard-nav .cta-primary,
.wizard-nav .cta-ghost {
  width: auto;
  min-width: 160px;                   /* equal-width pairing — no jagged edges */
  padding-top: 13px;
  padding-bottom: 13px;               /* match heights so primary + ghost line up perfectly */
  font-size: var(--fs-body);
}
.wizard-nav-back {
  margin-right: auto;                 /* Back hugs the left, the primary actions stay right */
  min-width: 0;
}

/* ───── partner roster (AccountingFirm step) ──────────────────────── */

.partners {
  display: grid;
  gap: 14px;
}

/* Each partner is a small card. Header row carries the name input + the
   default toggle + remove. Body row carries title + auditor reg-no.
   Originally these all sat on one line; with the wide reg-no input the
   row clipped at the wizard's right edge and the radio + × clustered
   confusingly together. The card layout makes each control's purpose
   obvious without horizontal compression. */
.partner {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  background: var(--bg-soft, #f7f9fc);
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
}
.partner .field { gap: 4px; }
.partner .field label { font-size: var(--fs-meta); }
.partner .field input {
  padding: 10px 12px;
  font-size: var(--fs-body-sm);
}

.partner-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: stretch;             /* siblings fill the row height — no baseline drift */
}
.partner-head .field { min-width: 0; }   /* lets the name input shrink without overflowing */
.partner-head .partner-default,
.partner-head .partner-remove {
  align-self: end;                  /* sit on the input's baseline (under the label, level with the input) */
}

.partner-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .partner-head { grid-template-columns: 1fr; }
  .partner-body { grid-template-columns: 1fr; }
}

.partner-default {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--charcoal);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.partner-default:hover { border-color: var(--navy); }
.partner-default input { width: 14px; height: 14px; accent-color: var(--gold); }
.partner-default.is-default {
  border-color: var(--gold);
  background: var(--gold-bg);
  color: var(--navy);
  font-weight: 600;
}

.partner-remove {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.partner-remove:hover { color: var(--danger); border-color: var(--danger); }

.partner-add {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--navy);
  background: transparent;
  border: 1px dashed var(--navy);
  border-radius: var(--r-1);
  cursor: pointer;
}
.partner-add:hover { background: rgba(26, 58, 107, 0.05); }

/* ───── payment-method picker (custom select with logos in options) ── */

.pm-select-wrap {
  display: grid;
  gap: 8px;
  position: relative;
}
.pm-select-wrap > label {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--navy);
}

.pm-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-cta);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pm-select-trigger:hover { border-color: var(--navy); }
.pm-select-trigger[aria-expanded="true"] {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 58, 107, 0.12);
}
.pm-select-current {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pm-select-current-logos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pm-select-current-logos img { display: block; height: 20px; width: auto; }
.pm-select-current-label { color: var(--charcoal); font-weight: 500; }

.pm-select-caret {
  width: 12px;
  height: 8px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.pm-select-trigger[aria-expanded="true"] .pm-select-caret { transform: rotate(180deg); }

.pm-select-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  gap: 2px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-cta);
  box-shadow: var(--shadow-2, 0 12px 32px rgba(0,0,0,0.10));
}
.pm-select-pop[hidden] { display: none; }    /* display:grid above clobbers HTML `hidden` without this */
.pm-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--charcoal);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.pm-option:hover,
.pm-option:focus-visible {
  background: rgba(26, 58, 107, 0.05);
  outline: none;
}
.pm-option.is-selected {
  background: rgba(26, 58, 107, 0.06);
  color: var(--navy);
  font-weight: 600;
}
.pm-option-logos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;            /* keeps option labels left-aligned across rows */
}
.pm-option-logos img { display: block; height: 18px; width: auto; }
.pm-option-label { flex: 1; }

.pm-panel { display: none; }
.pm-panel.is-active { display: grid; gap: 16px; }

/* Card-input grouping: PAN row, then expiry+CVV row. */
.card-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
@media (max-width: 480px) {
  .card-row { grid-template-columns: 1fr; }
}

.pm-test-hint {
  font-size: var(--fs-meta);
  color: var(--muted-2);
  background: rgba(232, 180, 58, 0.10);
  border: 1px dashed rgba(232, 180, 58, 0.45);
  border-radius: var(--r-1);
  padding: 8px 12px;
  line-height: 1.5;
}

/* ───── review summary ────────────────────────────────────────────── */

.review {
  display: grid;
  gap: 18px;
}
.review-section {
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  padding: 16px 18px;
  display: grid;
  gap: 10px;
}
.review-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.review-section-title {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}
.review-section-edit {
  font-size: var(--fs-meta);
  color: var(--navy);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  border-top: none; border-left: none; border-right: none;
  padding: 0;
}
.review-section-edit:hover { border-bottom-color: var(--navy); }

.review-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 6px 18px;
  font-size: var(--fs-body-sm);
}
.review-grid dt {
  color: var(--muted);
  font-weight: 500;
}
.review-grid dd {
  color: var(--charcoal);
  margin: 0;
}
.review-empty { color: var(--muted-2); font-style: italic; }

/* ───── user menu (top-right of nav) ──────────────────────────────── */

.user-menu {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--navy);
  cursor: pointer;
  font: inherit;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.user-menu:hover { background: rgba(26, 58, 107, 0.05); border-color: var(--hairline); }
.user-menu[aria-expanded="true"] { background: rgba(26, 58, 107, 0.05); border-color: var(--hairline); }

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.user-name {
  font-size: var(--fs-body-sm);
  font-weight: 500;
}

.user-caret {
  width: 10px;
  height: 7px;
  color: var(--muted);
}

/* Anchor the popover under the user-menu button. The wrapper needs an
   explicit positioning context so right:0 means "right edge of the
   button cluster", not "right edge of <body>" (which the previous
   `right: var(--pad-side)` was unable to control reliably and got
   clipped by the wizard's overflow:hidden box). */
.nav-cta-wrap { position: relative; }

.user-menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  display: grid;
  gap: 4px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  box-shadow: var(--shadow-2, 0 12px 32px rgba(0,0,0,0.10));
  z-index: 50;
}
.user-menu-pop[hidden] { display: none; }   /* display:grid above clobbers HTML `hidden` without this */
.user-menu-email {
  display: block;
  padding: 8px 10px 6px;
  font-size: var(--fs-meta);
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 4px;
}
.user-menu-item {
  display: block;
  padding: 8px 10px;
  font-size: var(--fs-body-sm);
  color: var(--charcoal);
  border-radius: 6px;
  text-decoration: none;
}
.user-menu-item:hover { background: rgba(26, 58, 107, 0.05); color: var(--navy); }

/* ───── dev controls (prototype-only — never ports to Blazor) ─────── */

.dev-controls {
  position: fixed;
  bottom: 16px;
  left: 16px;                         /* moved from right → left so the wizard's Continue button isn't obscured */
  z-index: 99;
  background: rgba(26, 58, 107, 0.96);
  color: white;
  padding: 14px 16px;
  border-radius: var(--r-1);
  font-size: var(--fs-meta);
  display: grid;
  gap: 10px;
  min-width: 220px;
  box-shadow: var(--shadow-2, 0 12px 32px rgba(0,0,0,0.18));
}
.dev-controls h4 {
  margin: 0 0 4px;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-upper);
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
}
.dev-controls label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dev-controls select {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: var(--fs-meta);
}
.dev-controls .dev-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}