/* ============================================================
  baseRate customer portal · Brand refresh
  Midnight navy + electric teal, crisp soft-grey surfaces,
  and clean geometric sans typography.
  ============================================================ */
:root {
  /* core palette */
  --br-ink:        #071A3D;  /* Midnight Navy */
  --br-pine:       #071A3D;  /* Primary brand */
  --br-pine-hover: #05132E;
  --br-sea:        #00C2A8;  /* Electric Teal */
  --br-gold:       #00A892;  /* Numeric accent */
  --br-gold-tint:  #E5FAF6;

  /* neutrals */
  --br-paper: #F5F7FA;
  --br-mist:  #EBF0F7;
  --br-cloud: #FFFFFF;
  --br-line:  #D6DEEA;
  --br-slate: #4F607E;
  --br-faint: #7D8DAA;

  /* functional */
  --br-success: #0A9F73; --br-success-bg: #E7F8F3;
  --br-warning: #9B6A18; --br-warning-bg: #FCF2E2;
  --br-error:   #BE3C50; --br-error-bg:   #FCEBEE;
  --br-info:    #1D73B4; --br-info-bg:    #EAF4FD;

  /* typography */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --font-data:    'Spline Sans Mono', monospace;

  /* shape & depth - sharp, automotive-grade edges */
  --radius-input: 2px;
  --radius-card:  4px;
  --radius-pill:  2px;
  --shadow-card:  0 1px 3px rgba(7,26,61,.06), 0 10px 26px rgba(7,26,61,.08);
  --shadow-raise: 0 2px 5px rgba(7,26,61,.10), 0 18px 44px rgba(7,26,61,.12);

  font-size: 16px;
}

* { box-sizing: border-box; }
button, a, summary { -webkit-tap-highlight-color: rgba(0,194,168,.18); }
:target, .view, .hero, .journey-strip, .docs-needed, .faq-block { scroll-margin-top: 76px; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--br-ink);
  background:
    radial-gradient(1000px 420px at 15% -15%, #dce7fb 0%, rgba(220,231,251,0) 60%),
    radial-gradient(900px 380px at 95% 0%, #ddfbf5 0%, rgba(221,251,245,0) 55%),
    var(--br-paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: 1020px; margin: 0 auto; padding: 0 1.25rem; }
.hidden { display: none !important; }
.mt-half { margin-top: .5rem; }
.mfa-qr { max-width: 200px; margin: .5rem 0; padding: 8px; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; }
.mfa-qr svg { width: 100%; height: auto; display: block; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-top: .5rem; }
.profile-grid > div { display: flex; flex-direction: column; gap: .15rem; }
.role-select { padding: .35rem .5rem; border: 1.5px solid var(--br-line); border-radius: 8px; background: #fff; color: var(--br-ink); font: inherit; max-width: 100%; }
.profile-badge { cursor: pointer; }
.btn-outline { background: transparent; color: var(--br-ink); border: 1.5px solid var(--br-line); }
.btn-outline:hover { background: var(--br-mist); border-color: var(--br-pine, #0f766e); }
.login-methods .btn { text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding-top: .7rem; padding-bottom: .7rem; }
.login-methods .method-sub { font-weight: 400; font-size: .85em; color: #64748b; }
.mfa-badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .12rem .55rem; border-radius: 999px; vertical-align: middle; margin-left: .4rem; }
.mfa-badge-on { background: var(--br-success-bg); color: var(--br-success); }
.mfa-badge-off { background: var(--br-mist); color: #64748b; }

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--font-data);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--br-sea);
}

/* top bar */
.topbar {
  background: var(--br-pine);
  border-bottom: 1px solid rgba(255,255,255,.12);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1rem; }
.brand { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; text-decoration: none; display: inline-flex; align-items: baseline; min-width: 0; }
.brand span { color: var(--br-sea); }
.brand .brand-tld { font-style: normal; font-weight: 600; font-size: .85rem; color: #8EDFD4; letter-spacing: .01em; }
.topbar nav { display: flex; align-items: center; gap: .85rem; position: relative; }
.nav-actions { display: flex; align-items: center; gap: .85rem; }
/* The profile quick-menu trigger only appears on narrow screens (see media). */
.nav-menu-toggle {
  display: none;
  align-items: center;
  gap: .2rem;
  height: 38px;
  padding: 0 .55rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0,194,168,.45);
  background: rgba(0,194,168,.12);
  color: #9EF3E7;
  cursor: pointer;
}
.nav-menu-toggle:hover { background: rgba(0,194,168,.2); color: #fff; }
.nav-menu-avatar {
  flex: none;
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--br-pine); color: #fff;
  font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.nav-menu-avatar svg { width: 16px; height: 16px; }
.nav-menu-name {
  max-width: 8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .85rem; font-weight: 600; color: inherit;
}
.nav-menu-name:empty { display: none; }
.nav-menu-chevron { transition: transform .18s ease; }
.nav-menu-toggle[aria-expanded="true"] .nav-menu-chevron { transform: rotate(180deg); }

/* ── Notification bell ───────────────────────────────────────────────────────
   A standalone topbar icon for signed-in customers (hidden when logged out via
   .nav-auth-only). Clicking it opens a light dropdown panel listing the
   customer's notifications; an unread badge sits on the bell. */
.notif-wrap { position: relative; display: inline-flex; }
.notif-bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(0,194,168,.45);
  background: rgba(0,194,168,.12);
  color: #9EF3E7;
  cursor: pointer;
}
.notif-bell:hover { background: rgba(0,194,168,.2); color: #fff; }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-size: .66rem; font-weight: 700; line-height: 1;
  color: #fff; background: var(--br-error, #d64545);
  border: 2px solid var(--br-ink-deep, #0B1F3A); border-radius: 999px;
  box-sizing: border-box;
}
.notif-badge.hidden { display: none; }
.notif-panel {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  width: 340px; max-width: 88vw;
  background: var(--br-cloud);
  color: var(--br-ink);
  border: 1px solid var(--br-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raise);
  z-index: 40;
  overflow: hidden;
}
.notif-panel.hidden { display: none; }
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--br-line);
}
.notif-head strong { font-size: .95rem; color: var(--br-ink); }
.notif-readall {
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--br-sea);
  padding: .15rem .25rem;
}
.notif-readall:hover { text-decoration: underline; }
.notif-readall:disabled { color: var(--br-faint); cursor: default; text-decoration: none; }
.notif-list { max-height: min(420px, 60vh); overflow-y: auto; }
.notif-item {
  display: flex; gap: .6rem; align-items: flex-start;
  width: 100%; text-align: left;
  padding: .7rem .85rem;
  background: none; border: none; border-bottom: 1px solid var(--br-line);
  cursor: pointer; font: inherit;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--br-mist); }
.notif-item.is-unread { background: rgba(0,194,168,.06); }
.notif-item.is-unread:hover { background: rgba(0,194,168,.1); }
.notif-dot {
  flex: none; width: 8px; height: 8px; margin-top: .4rem;
  border-radius: 50%; background: var(--br-faint);
}
.notif-item.is-unread .notif-dot { background: var(--br-sea); }
.notif-item.sev-success .notif-dot { background: #2e9e6b; }
.notif-item.sev-warning .notif-dot { background: var(--br-error, #d64545); }
.notif-body { min-width: 0; flex: 1; }
.notif-title { font-size: .86rem; font-weight: 600; color: var(--br-ink); }
.notif-text { font-size: .78rem; color: var(--br-slate); margin-top: .12rem; line-height: 1.35; }
.notif-time { font-family: var(--font-data); font-size: .68rem; color: var(--br-faint); margin-top: .2rem; }
.notif-empty { padding: 1.4rem .85rem; text-align: center; color: var(--br-slate); font-size: .84rem; }

/* "Talk to us" shows as an icon-only circle when the items sit inline; the text
   label only appears inside the profile dropdown. */
.nav-phone-label { display: none; }
.nav-ico { display: inline-flex; align-items: center; justify-content: center; }
.topbar nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  color: #C6D4EC;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.topbar nav a:hover { color: var(--br-sea); }
.topbar nav a.nav-cta {
  border: 1px solid rgba(0,194,168,.45);
  border-radius: var(--radius-pill);
  color: #9EF3E7;
  padding: 0 .9rem;
}
.topbar nav a.nav-cta:hover {
  background: rgba(0,194,168,.16);
  color: #fff;
}
.nav-label-short { display: none; }
.topbar nav a.nav-phone {
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0,194,168,.45);
  color: #9EF3E7;
}
.topbar nav a.nav-phone:hover {
  background: rgba(0,194,168,.16);
  color: #fff;
}
.profile-badge {
  display: inline-block; vertical-align: middle; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .72rem; font-weight: 700; color: #9EF3E7;
  background: rgba(0,194,168,.12); border: 1px solid rgba(0,194,168,.35);
  border-radius: var(--radius-pill); padding: .25rem .7rem;
}

/* ── Signed-in: collapse every nav item into one profile quick-menu ──────────
   Once logged in the top bar carries too many items, so on every width we tuck
   them behind a single profile trigger. The dropdown is a crisp light account
   menu (header + uniform rows with leading icons), like an enterprise console.
   Logged-out visitors keep the lean inline layout (just "Talk to us"). */
body.authed .nav-menu-toggle { display: inline-flex; }
body.authed .nav-actions {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: .12rem;
  min-width: 256px;
  padding: .45rem;
  background: var(--br-cloud);
  color: var(--br-ink);
  border: 1px solid var(--br-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raise);
  z-index: 30;
  display: none;
}
body.authed .nav-actions.open { display: flex; }

/* Uniform menu rows - neutralise the inline pill/circle treatments. */
body.authed .nav-actions a,
body.authed .nav-actions a.nav-cta,
body.authed .nav-actions a.nav-phone {
  width: 100%;
  height: auto;
  min-height: 42px;
  justify-content: flex-start;
  gap: .7rem;
  padding: 0 .65rem;
  border: none;
  border-radius: var(--radius-input);
  color: var(--br-ink);
  font-weight: 500;
  font-size: .9rem;
}
body.authed .nav-actions a:hover,
body.authed .nav-actions a.nav-cta:hover,
body.authed .nav-actions a.nav-phone:hover {
  background: var(--br-mist);
  color: var(--br-ink);
}
body.authed .nav-actions .nav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--br-slate);
}
body.authed .nav-actions a:hover .nav-ico { color: var(--br-pine); }
body.authed .nav-phone-label { display: inline; }
body.authed .nav-label-full { display: inline; }
body.authed .nav-label-short { display: none; }

/* Divider + destructive affordance for Sign out. */
body.authed .nav-actions #nav-signout {
  margin-top: .25rem;
  padding-top: .5rem;
  border-top: 1px solid var(--br-line);
  border-radius: 0 0 var(--radius-input) var(--radius-input);
}
body.authed .nav-actions #nav-signout:hover { background: var(--br-error-bg); color: var(--br-error); }
body.authed .nav-actions #nav-signout:hover .nav-ico { color: var(--br-error); }

/* The verified-profile badge becomes a rich account header. */
body.authed .nav-actions .profile-badge {
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: none;
  margin: .1rem .1rem .35rem;
  padding: .5rem .55rem .7rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--br-line);
  border-radius: 0;
  font-size: inherit;
  font-weight: 400;
}
body.authed .nav-actions .profile-badge.hidden { display: none; }
.pm-avatar {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--br-pine); color: #fff;
  font-family: var(--font-display); font-size: .82rem; font-weight: 700; letter-spacing: .02em;
}
.pm-avatar svg { width: 18px; height: 18px; }
.pm-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; gap: .1rem; }
.pm-name {
  font-size: .92rem; font-weight: 700; color: var(--br-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-sub {
  display: flex; align-items: center; gap: .35rem;
  font-family: var(--font-data); font-size: .72rem; color: var(--br-slate);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-sub svg { width: 12px; height: 12px; flex: none; color: var(--br-faint); }

/* returning-customer resume banner */
.resume-banner {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.25rem; padding: .9rem 1.1rem;
  background: rgba(0,194,168,.08);
  border: 1px solid rgba(0,194,168,.35);
  border-radius: 8px;
}
.resume-banner.hidden { display: none; }
.resume-banner-text { flex: 1 1 auto; min-width: 200px; font-size: .95rem; color: #0A2352; }
.resume-banner-text strong { margin-right: .35rem; }
.resume-banner .btn { flex: 0 0 auto; }
.resume-banner-close {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  font-size: 1.3rem; line-height: 1; color: #5b6b86; padding: 0 .25rem;
}
.resume-banner-close:hover { color: #0A2352; }

main.container { padding: 2.7rem 1.25rem 4rem; }

/* hero - navy masthead */
.hero {
  background: linear-gradient(140deg, #061736 0%, #0A2352 54%, #0C2C61 100%);
  color: #fff;
  border-radius: 4px; padding: 3.5rem 2rem 3rem;
  text-align: center;
  border: 1px solid rgba(0,194,168,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -90px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(0,194,168,.28) 0%, rgba(0,194,168,0) 65%);
  pointer-events: none;
}
.hero .eyebrow { color: #94EFE0; }
.hero h1 {
  font-weight: 700; font-size: clamp(2.2rem, 5.3vw, 3.55rem);
  letter-spacing: -0.03em; line-height: 1.03; margin: .75rem auto .9rem;
  max-width: 790px;
}
.hero h1 em { font-family: var(--font-display); font-style: normal; font-weight: 700; color: var(--br-sea); }
.hero p { color: #CAD8EE; max-width: 650px; margin: 0 auto 1.4rem; font-size: 1.08rem; }
.hero-chips { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.6rem; }
.hero-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.hero .btn-primary { background: var(--br-sea); color: var(--br-pine); }
.hero .btn-primary:hover { background: #06D5B8; }
.hero .btn-ghost { color: #CFE0F6; border-color: rgba(255,255,255,.36); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; }

/* rate chip (signature element) */
.rate-chip {
  display: inline-flex; align-items: baseline; gap: .5rem;
  background: var(--br-gold-tint); border: 1px solid #EBD9B8;
  border-radius: var(--radius-pill); padding: 6px 16px;
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
}
.rate-chip .num { font-weight: 600; font-size: 1.15rem; color: #8F6420; }
.rate-chip .unit { font-size: .72rem; color: #A8854A; text-transform: uppercase; letter-spacing: .08em; }
.rate-chip.on-dark { background: rgba(0,194,168,.12); border-color: rgba(0,194,168,.35); }
.rate-chip.on-dark .num { color: #8EFFF0; }
.rate-chip.on-dark .unit { color: #A7E9E0; }

.cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.card {
  background: var(--br-cloud); border: 1px solid var(--br-line);
  border-radius: var(--radius-card); padding: 1.5rem; box-shadow: var(--shadow-card);
  position: relative;
}
.card::before {
  content: "";
  display: block;
  width: 38px;
  height: 4px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--br-sea), #62e4d4);
  margin-bottom: .9rem;
}
.card h3 { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 600; color: var(--br-ink); }
.card p { margin: 0; color: var(--br-slate); font-size: .95rem; }

/* rate freshness stamp (under hero chips) */
.rate-freshness {
  font-size: .78rem; color: #9DB4D6; max-width: 560px;
  margin: -0.6rem auto 1.4rem;
}

/* journey strip - numbered end-to-end process */
.journey-strip { margin-top: 2.6rem; }
.journey-strip h2, .docs-needed h2, .faq-block h2 {
  font-size: 1.35rem; font-weight: 700; color: var(--br-ink);
  letter-spacing: -0.02em; margin: 0 0 1rem;
}
.journey-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem; counter-reset: journey;
}
.journey-steps li {
  counter-increment: journey;
  background: var(--br-cloud); border: 1px solid var(--br-line);
  border-radius: var(--radius-card); padding: 1rem 1.1rem;
  box-shadow: var(--shadow-card);
}
.journey-steps li::before {
  content: counter(journey);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,194,168,.14); color: var(--br-pine);
  font-family: var(--font-data); font-weight: 600; font-size: .85rem;
  margin-bottom: .55rem;
}
.journey-steps li b { display: block; font-size: .95rem; color: var(--br-ink); margin-bottom: .25rem; }
.journey-steps li span { font-size: .85rem; color: var(--br-slate); line-height: 1.45; }
.journey-note { margin-top: .9rem; font-size: .9rem; }

/* what you will need */
.docs-needed { margin-top: 2.6rem; }
.docs-needed > .muted { margin: -0.5rem 0 1rem; }
.docs-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem;
}
.docs-list li {
  background: var(--br-cloud); border: 1px solid var(--br-line);
  border-radius: var(--radius-card); padding: 1rem 1.1rem;
  box-shadow: var(--shadow-card);
  border-left: 4px solid var(--br-sea);
}
.docs-list li b { display: block; font-size: .95rem; color: var(--br-ink); margin-bottom: .25rem; }
.docs-list li span { font-size: .85rem; color: var(--br-slate); line-height: 1.45; }

/* FAQ accordion (native details, no script) */
.faq-block { margin-top: 2.6rem; max-width: 820px; }
.faq-block details {
  background: var(--br-cloud); border: 1px solid var(--br-line);
  border-radius: var(--radius-card); margin-bottom: .6rem;
  box-shadow: var(--shadow-card);
}
.faq-block summary {
  cursor: pointer; padding: .95rem 1.15rem;
  font-weight: 600; font-size: .98rem; color: var(--br-ink);
  list-style: none; position: relative;
}
.faq-block summary::-webkit-details-marker { display: none; }
.faq-block summary::after {
  content: "+"; position: absolute; right: 1.1rem; top: 50%;
  transform: translateY(-50%); color: var(--br-sea);
  font-size: 1.25rem; font-weight: 600;
}
.faq-block details[open] summary::after { content: "\2212"; }
.faq-block details p {
  margin: 0; padding: 0 1.15rem 1rem;
  color: var(--br-slate); font-size: .93rem; line-height: 1.55;
}

/* buttons - pill, generous hit areas */
.btn {
  display: inline-block; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  padding: .8rem 1.75rem; transition: all .15s ease;
}
.btn:focus-visible { outline: 3px solid var(--br-sea); outline-offset: 2px; }
.btn-primary { background: var(--br-sea); color: var(--br-pine); }
.btn-primary:hover { background: #05D2B6; transform: translateY(-1px); box-shadow: var(--shadow-raise); }
.btn-primary:disabled { background: var(--br-mist); color: var(--br-faint); cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost { background: transparent; color: var(--br-ink); border: 1.5px solid var(--br-line); }
.btn-ghost:hover { background: var(--br-mist); }
.btn-ico { vertical-align: -2px; margin-right: .3rem; }
.btn-accent { background: var(--br-pine); color: #fff; }
.btn-accent:hover { background: var(--br-pine-hover); transform: translateY(-1px); box-shadow: var(--shadow-raise); }

/* wizard stepper */
.steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; flex-wrap: wrap; counter-reset: step; }
.steps li {
  flex: 1; min-width: 130px; text-align: center; padding: .55rem .25rem;
  border-bottom: 3px solid var(--br-line); color: var(--br-slate);
  font-size: .85rem; font-weight: 600; counter-increment: step;
}
.steps li::before {
  content: counter(step);
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; margin-right: .5rem; border-radius: 50%;
  font-family: var(--font-data); font-size: .75rem; font-weight: 600;
  background: var(--br-mist); color: var(--br-slate); border: 1.5px solid var(--br-line);
  vertical-align: middle;
}
.steps li.active { border-color: var(--br-pine); color: var(--br-ink); }
.steps li.active::before {
  background: var(--br-cloud); border-color: var(--br-pine); color: var(--br-pine);
  box-shadow: 0 0 0 4px rgba(0,194,168,.16);
}
.steps li.done { border-color: var(--br-pine); color: var(--br-sea); }
.steps li.done::before { content: "✓"; background: var(--br-pine); border-color: var(--br-pine); color: #fff; }

fieldset.step { border: 0; padding: 0; margin: 0; }

/* licence scan box */
.scan-box {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  background: var(--br-mist); border: 1.5px dashed var(--br-line);
  border-radius: var(--radius-card); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.scan-box .scan-copy { flex: 1; min-width: 240px; }
.scan-box h3 { margin: 0 0 .25rem; font-size: 1.05rem; font-weight: 600; color: var(--br-pine); }
.scan-box p { margin: 0; color: var(--br-slate); font-size: .88rem; }
.scan-actions { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; min-width: 200px; }
.scan-btn { cursor: pointer; text-align: center; }
.scan-status { margin: 0; font-size: .85rem; font-weight: 500; max-width: 260px; text-align: right; }
.scan-status.busy { color: var(--br-slate); }
.scan-status.ok { color: var(--br-success); }
.scan-status.err { color: var(--br-error); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }

/* contact verification panel */
.verify-panel {
  background: var(--br-info-bg); border: 1.5px solid #C5DEEB;
  border-radius: var(--radius-card); padding: 1.5rem; margin-top: 1.5rem;
}
.verify-panel .subhead { margin-top: 0; color: #1D4C63; }
.verify-panel > .muted { margin: 0 0 1rem; font-size: .9rem; }
.verify-block label { color: var(--br-ink); }
.verify-dest { font-weight: 400; color: var(--br-slate); font-size: .8rem; }
.verify-block .verify-code {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  letter-spacing: .35em; font-size: 1.2rem; max-width: 200px;
}
.verify-row { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.verify-row .btn { padding: .55rem 1.2rem; font-size: .9rem; }
.verify-status { margin: .5rem 0 0; font-size: .85rem; font-weight: 500; min-height: 1.2em; }
.verify-status.busy { color: var(--br-slate); }
.verify-status.ok { color: var(--br-success); }
.verify-status.err { color: var(--br-error); }
label { display: flex; flex-direction: column; gap: .35rem; font-size: .92rem; font-weight: 600; color: var(--br-ink); }
input, select {
  font-family: var(--font-body); font-size: 1rem; padding: .75rem .9rem;
  border: 1.5px solid var(--br-line); border-radius: var(--radius-input);
  background: var(--br-cloud); color: var(--br-ink); width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input[type="number"] { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
input::placeholder { color: var(--br-faint); }
input:hover, select:hover { border-color: #AFC1DC; }
input:focus, select:focus { outline: none; border-color: var(--br-sea); box-shadow: 0 0 0 4px rgba(0,194,168,.16); }
input.invalid, select.invalid { border-color: var(--br-error); }
input.invalid:focus, select.invalid:focus { box-shadow: 0 0 0 4px rgba(179,64,47,.12); }
.subhead { margin: 1.5rem 0 .75rem; font-size: 1.15rem; font-weight: 600; }

.wizard-nav { display: flex; justify-content: space-between; margin-top: 1.75rem; gap: .75rem; }
.form-error { color: var(--br-error); font-weight: 500; margin-top: .9rem; background: var(--br-error-bg); border: 1px solid #F0CDC5; border-radius: var(--radius-input); padding: .8rem 1rem; font-size: .92rem; }

/* review + consent */
.review {
  background: var(--br-cloud); border: 1px solid var(--br-line);
  border-radius: var(--radius-card); padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-card);
}
.review h4 {
  margin: 1rem 0 .4rem; font-family: var(--font-data); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--br-sea);
}
.review h4:first-child { margin-top: 0; }
.review dl { display: grid; grid-template-columns: minmax(140px, 35%) 1fr; gap: .3rem .8rem; margin: 0; font-size: .92rem; }
.review dt { color: var(--br-slate); font-weight: 400; }
.review dd { margin: 0; font-weight: 600; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: .88rem; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .review { padding: 1.15rem; }
  .review dl { grid-template-columns: 1fr; gap: .1rem; }
  .review dt { margin-top: .55rem; font-size: .82rem; }
  .review dt:first-of-type { margin-top: 0; }
  .review dd { font-size: .92rem; }
}
.consent { flex-direction: row; align-items: flex-start; gap: .6rem; font-weight: 400; margin-top: .9rem; color: var(--br-slate); font-size: .88rem; }
.consent input { width: auto; margin-top: .25rem; accent-color: var(--br-pine); }

/* processing */
.processing { text-align: center; padding: 3rem 0; }
.spinner {
  width: 44px; height: 44px; margin: 0 auto 1.25rem; border-radius: 50%;
  border: 4px solid var(--br-line); border-top-color: var(--br-pine); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.progress-log { list-style: none; padding: 0; max-width: 420px; margin: 1rem auto 0; text-align: left; color: var(--br-slate); }
.progress-log li { padding: .3rem 0; }
.progress-log li::before { content: "✓ "; color: var(--br-success); font-weight: 700; }
.progress-log li.pending::before { content: "… "; color: var(--br-slate); }

/* outcome */
.outcome {
  background: var(--br-cloud); border: 1px solid var(--br-line); border-radius: var(--radius-card);
  padding: 2.5rem 2rem; text-align: center; margin-bottom: 1.5rem; box-shadow: var(--shadow-card);
}
.outcome .badge,
.badge {
  display: inline-block; padding: .4rem 1.1rem; border-radius: var(--radius-pill); font-weight: 700;
  font-size: .88rem; letter-spacing: .02em; margin-bottom: .9rem;
}
.badge-approved { background: var(--br-success-bg); color: #14573C; border: 1px solid #C4E4D4; }
.badge-conditional { background: var(--br-warning-bg); color: #6E4B11; border: 1px solid #EEDCB4; }
.badge-declined { background: var(--br-error-bg); color: #7C2C20; border: 1px solid #F0CDC5; }
.badge-info { background: var(--br-info-bg); color: #1D4C63; border: 1px solid #C5DEEB; }
.outcome h2 { margin: 0 0 .5rem; font-weight: 700; }
.outcome p { color: var(--br-slate); max-width: 540px; margin: 0 auto .5rem; }
.outcome .ref { font-size: .85rem; color: var(--br-slate); margin-top: 1.25rem; }
.outcome .ref code { font-family: var(--font-data); background: var(--br-mist); padding: .2rem .5rem; border-radius: 2px; user-select: all; }
code { font-family: var(--font-data); }

.score-row { display: flex; justify-content: center; gap: 2.5rem; margin: 1.5rem 0; flex-wrap: wrap; }
.score-row .stat { text-align: center; }
.score-row .stat b {
  display: block; font-family: var(--font-data); font-weight: 600; font-size: 1.5rem;
  color: var(--br-gold); font-variant-numeric: tabular-nums;
}
.score-row .stat span { font-family: var(--font-data); font-size: .7rem; color: var(--br-slate); text-transform: uppercase; letter-spacing: .1em; }
.reasons { text-align: left; max-width: 560px; margin: 1rem auto 0; color: var(--br-slate); font-size: .92rem; }

/* best-matched lender panel */
.match-panel {
  text-align: left; max-width: 560px; margin: 1.5rem auto 0;
  background: var(--br-cloud); border: 1.5px solid var(--br-line); border-radius: var(--radius-card);
  padding: 1.5rem 1.6rem; box-shadow: var(--shadow-card);
}
.match-head { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.match-head h3 { margin: 0; font-size: 1.2rem; font-weight: 600; }
.match-eyebrow {
  flex-basis: 100%; font-family: var(--font-data); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--br-slate); margin-bottom: .15rem;
}
.match-figures { display: flex; gap: 2rem; margin: 1.1rem 0 .4rem; flex-wrap: wrap; }
.match-figures .stat b {
  display: block; font-family: var(--font-data); font-size: 1.45rem; font-weight: 600;
  color: var(--br-gold); font-variant-numeric: tabular-nums;
}
.match-figures .stat span { font-family: var(--font-data); font-size: .7rem; color: var(--br-slate); text-transform: uppercase; letter-spacing: .1em; }
.match-product { margin: .2rem 0 0; font-weight: 600; font-size: .95rem; }
.match-also { margin: 1.1rem 0 .4rem; font-size: .82rem; color: var(--br-slate); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-data); }
.match-list { list-style: none; padding: 0; margin: 0; }
.match-list li { display: flex; justify-content: space-between; padding: .45rem 0; border-top: 1px solid var(--br-line); font-size: .92rem; }
.match-list .match-name { font-weight: 500; }
.match-list .match-rate { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--br-slate); }
.match-note { margin: 1rem 0 0; font-size: .82rem; }

/* offers */
.offers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.offer {
  background: var(--br-cloud); border: 1.5px solid var(--br-line); border-radius: var(--radius-card);
  padding: 1.75rem; display: flex; flex-direction: column; box-shadow: var(--shadow-card);
}
.offer.accepted { border-color: var(--br-success); box-shadow: 0 0 0 3px var(--br-success-bg); }
.offer h3 { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 600; }
.offer .rate {
  font-family: var(--font-data); font-size: 2rem; font-weight: 600;
  color: var(--br-gold); font-variant-numeric: tabular-nums;
}
.offer .rate small { font-family: var(--font-data); font-size: .85rem; font-weight: 500; color: var(--br-slate); }
.offer .repay { font-size: 1.1rem; margin: .4rem 0 1rem; color: var(--br-slate); }
.offer .repay strong { font-family: var(--font-data); font-weight: 600; color: var(--br-gold); font-variant-numeric: tabular-nums; font-size: 1.2rem; }
.offer dl { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; margin: 0 0 1rem; font-size: .88rem; flex: 1; }
.offer dt { color: var(--br-slate); }
.offer dd { margin: 0; font-weight: 600; text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: .84rem; }
.offer ul { padding-left: 1.1rem; margin: 0 0 1.25rem; color: var(--br-slate); font-size: .85rem; }
.offer .btn { width: 100%; }
.accepted-banner {
  display: flex; gap: 12px;
  background: var(--br-success-bg); border: 1px solid #C4E4D4; border-radius: var(--radius-input);
  padding: 1.1rem 1.25rem; margin-top: 1.5rem; color: #14573C; font-weight: 500; font-size: .95rem;
}
.accepted-banner code { font-family: var(--font-data); }

/* track / portal */
.track-form { display: flex; gap: .75rem; align-items: flex-end; max-width: 560px; margin-bottom: 1.5rem; }
.track-form label { flex: 1; }
.track-form .btn { align-self: flex-end; }
.track-intro { margin: 0 0 1rem; max-width: 760px; }

/* A signed-in customer reaches their application through their session (the
   bearer token already proves identity), so the public "track by reference"
   lookup + its reference-based intro are redundant and confusing - hide them
   when authenticated. The anonymous lookup stays available when logged out. */
body.authed #view-track #track-form,
body.authed #view-track .track-intro { display: none; }

/* Email step-up (surname + DOB) - stacked, never crammed into one row */
.stepup-form { display: flex; flex-direction: column; gap: .9rem; max-width: 560px; margin-bottom: 1.5rem; }
.stepup-form > p { margin: 0; }
.stepup-fields { display: flex; gap: .9rem; }
.stepup-fields label { flex: 1; min-width: 0; }
.stepup-form .btn-block { margin-bottom: 0; }
@media (max-width: 560px) {
  .stepup-fields { flex-direction: column; }
}

.track-code-row {
  display: flex;
  align-items: flex-end;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .6rem;
}

#track-code {
  font-family: var(--font-data);
  letter-spacing: .35em;
  font-size: 1.1rem;
  max-width: 210px;
}

.track-approval-wait {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: .55rem;
}

.track-approval-wait .spinner {
  margin: 0;
  width: 28px;
  height: 28px;
  border-width: 3px;
}
.portal-card {
  background: var(--br-cloud); border: 1px solid var(--br-line);
  border-radius: var(--radius-card); padding: 1.75rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-card);
}
.portal-card h3 { margin: 0 0 1rem; font-weight: 600; }
.track-ref {
  margin: .3rem 0 .75rem;
  color: var(--br-slate);
  font-size: .82rem;
}
.track-ref strong {
  font-family: var(--font-data);
  font-weight: 600;
  color: var(--br-ink);
}
.dashboard-list { display: grid; gap: 1rem; }
.dashboard-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.dashboard-item {
  border: 1px solid var(--br-line); border-radius: var(--radius-card);
  padding: 1.1rem 1.25rem; background: #fff;
}
.dashboard-item .score-row { margin: .9rem 0; gap: 1.75rem; }
.dashboard-item-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.dashboard-item-head .track-ref { margin: 0; font-size: .95rem; }
.dashboard-item-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-top: .5rem;
  border-top: 1px solid var(--br-line); padding-top: .75rem;
}
.dashboard-item-foot .when { font-family: var(--font-data); font-size: .74rem; color: var(--br-slate); }
.btn-sm { padding: .4rem .9rem; font-size: .82rem; }

/* ── Logged-in dashboard: hero, quick actions, stat tiles ──────────────── */
.dash-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.dash-greeting { min-width: 0; }
.dash-eyebrow {
  font-family: var(--font-data); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--br-slate);
}
.dash-title {
  margin: .3rem 0 .4rem; font-family: var(--font-display);
  font-size: 1.7rem; line-height: 1.1;
}
.dash-sub { margin: 0; color: var(--br-slate); max-width: 52ch; }
.dash-id { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.dash-id-badge {
  font-family: var(--font-data); font-size: .8rem; color: var(--br-pine);
  background: var(--br-gold-tint); border: 1px solid var(--br-sea);
  padding: .35rem .7rem; border-radius: var(--radius-pill);
}

.dash-actions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.dash-action {
  display: flex; align-items: flex-start; gap: .9rem; text-align: left;
  padding: 1.1rem 1.15rem; background: var(--br-cloud);
  border: 1px solid var(--br-line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); cursor: pointer; font: inherit; color: var(--br-ink);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dash-action:hover { transform: translateY(-2px); box-shadow: var(--shadow-raise); border-color: var(--br-sea); }
.dash-action:focus-visible { outline: 2px solid var(--br-sea); outline-offset: 2px; }
.dash-action-ico {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--radius-card); background: var(--br-mist); color: var(--br-pine);
}
.dash-action-ico svg { width: 22px; height: 22px; }
.dash-action.is-accent .dash-action-ico { background: var(--br-pine); color: #fff; }
.dash-action-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.dash-action-text strong { font-weight: 600; font-size: .98rem; }
.dash-action-text span { font-size: .82rem; color: var(--br-slate); line-height: 1.35; }
.dash-action-go { flex: none; color: var(--br-faint); font-size: 1.1rem; margin-top: .55rem; transition: transform .15s ease, color .15s ease; }
.dash-action:hover .dash-action-go { color: var(--br-sea); transform: translateX(3px); }

.dash-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.dash-stat {
  background: var(--br-cloud); border: 1px solid var(--br-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 1.1rem 1rem; text-align: center;
}
.dash-stat b {
  display: block; font-family: var(--font-display); font-size: 1.9rem;
  line-height: 1; color: var(--br-pine); margin-bottom: .35rem;
}
.dash-stat span {
  font-family: var(--font-data); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--br-slate);
}
.dash-stat-contracts b { color: var(--br-gold); }

.dash-empty { text-align: center; }
.dash-empty .dash-empty-ico {
  display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: .5rem;
  border-radius: 50%; background: var(--br-mist); color: var(--br-slate);
}
.dash-empty .dash-empty-ico svg { width: 28px; height: 28px; }
.dash-empty .pillar-actions { justify-content: center; }

@media (max-width: 560px) {
  .dash-action-go { display: none; }
  .dash-title { font-size: 1.4rem; }
}
.connect-help .muted { margin: -.5rem 0 1rem; font-size: .9rem; }
.connect-topic {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--br-slate);
  margin-bottom: 1rem;
}
.connect-topic select {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--br-ink);
  background: #fff;
  border: 1px solid var(--br-line);
  border-radius: var(--radius-input);
}
.connect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.connect-status {
  margin: 1rem 0 0;
  padding: .65rem .8rem;
  font-size: .88rem;
  border-radius: var(--radius-input);
  border: 1px solid var(--br-line);
  background: var(--br-paper);
}
.connect-status.is-ok { border-color: var(--br-sea); color: var(--br-pine); }
.connect-status.is-error { border-color: #c0492f; color: #c0492f; }

/* "Talk to us by voice" - in-browser voice AI agent call */
.voicecall {
  margin-top: 1rem;
  border: 1px solid var(--br-line);
  border-radius: var(--radius-card);
  background: var(--br-paper);
  overflow: hidden;
}
.voicecall.is-live { border-color: var(--br-sea); }
.voicecall.is-ended { opacity: .85; }
.voicecall-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--br-line);
  background: #fff;
}
.voicecall-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--br-slate); flex: none;
}
.voicecall.is-live .voicecall-dot {
  background: var(--br-sea);
  animation: voicecall-pulse 1.4s ease-in-out infinite;
}
@keyframes voicecall-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .55; }
}
.voicecall-state { font-size: .85rem; font-weight: 600; color: var(--br-ink); flex: 1; }
.voicecall-log {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .8rem;
}
.voicecall-line { display: flex; flex-direction: column; gap: .12rem; max-width: 92%; }
.voicecall-line.from-you { align-self: flex-end; align-items: flex-end; }
.voicecall-line.from-ai, .voicecall-line.from-agent { align-self: flex-start; }
.voicecall-who {
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--br-slate);
}
.voicecall-line p {
  margin: 0; padding: .5rem .7rem;
  font-size: .88rem; line-height: 1.45;
  border-radius: var(--radius-card); background: #fff;
  border: 1px solid var(--br-line);
}
.voicecall-line.from-you p { background: var(--br-sea); color: #fff; border-color: transparent; }
.voicecall-line.from-agent p { border-color: var(--br-sea); }

.salesai-thread { margin-top: 1rem; }
.salesai-msgs {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .25rem;
}
.salesai-msg { display: flex; flex-direction: column; gap: .15rem; max-width: 92%; }
.salesai-msg.from-you { align-self: flex-end; align-items: flex-end; }
.salesai-msg.from-ai { align-self: flex-start; }
.salesai-who { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--br-slate); }
.salesai-msg p {
  margin: 0;
  padding: .55rem .75rem;
  font-size: .9rem;
  line-height: 1.45;
  border-radius: var(--radius-card);
  background: var(--br-paper);
  border: 1px solid var(--br-line);
}
.salesai-msg.from-you p { background: var(--br-pine); color: #fff; border-color: var(--br-pine); }
.salesai-dots { display: inline-flex; align-items: center; gap: .25rem; }
.salesai-dots span {
  width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--br-sea); opacity: .5;
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.salesai-dots span:nth-child(2) { animation-delay: .18s; }
.salesai-dots span:nth-child(3) { animation-delay: .36s; }
.salesai-progress { margin: .85rem 0 .35rem; }
.salesai-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.salesai-steps li { font-size: .78rem; color: var(--br-slate); }
.salesai-steps li.done { color: var(--br-pine); font-weight: 600; }
.salesai-next { margin: .4rem 0 0; font-size: .82rem; font-weight: 600; color: var(--br-sea); }
.salesai-form { display: flex; gap: .5rem; margin-top: .75rem; }
.salesai-form input {
  flex: 1;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--br-ink);
  background: #fff;
  border: 1px solid var(--br-line);
  border-radius: var(--radius-input);
}
.salesai-bar { display: flex; justify-content: flex-end; margin-bottom: .4rem; }
.salesai-voice {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--br-mist); color: var(--br-pine);
  border: 1px solid var(--br-line); border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 600; padding: .3rem .65rem; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.salesai-voice:hover { background: var(--br-gold-tint); border-color: rgba(0,194,168,.32); }
.salesai-voice.active { background: var(--br-pine); border-color: var(--br-pine); color: #fff; }
.salesai-voice .salesai-voice-off { display: inline; }
.salesai-voice .salesai-voice-on { display: none; }
.salesai-voice.active .salesai-voice-off { display: none; }
.salesai-voice.active .salesai-voice-on { display: inline; }
.salesai-mic {
  display: flex; align-items: center; justify-content: center;
  background: var(--br-mist); color: var(--br-pine); border: 1px solid var(--br-line);
  border-radius: var(--radius-pill); width: 40px; height: 40px; padding: 0; flex: none;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.salesai-mic:hover { background: var(--br-gold-tint); border-color: rgba(0,194,168,.32); }
.salesai-mic.listening {
  background: var(--br-gold-tint); border-color: var(--br-gold); color: #087766;
  animation: mic-pulse 1.2s ease-in-out infinite;
}

.track-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  margin-bottom: .65rem;
}
.track-progress-copy {
  font-size: .8rem;
  color: var(--br-slate);
  font-weight: 600;
}
.progress-steps {
  list-style: none;
  margin: .8rem 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem .75rem;
}
.progress-steps li {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .55rem;
  border: 1px solid var(--br-line);
  border-radius: 2px;
  background: #fff;
  color: var(--br-faint);
  font-size: .81rem;
  font-weight: 600;
}
.progress-steps li.done {
  color: #0c6f5e;
  border-color: rgba(0,194,168,.35);
  background: rgba(0,194,168,.08);
}
.progress-steps li span {
  font-family: var(--font-data);
  font-size: .92rem;
  line-height: 1;
}
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 1rem 1.5rem; border-left: 2px solid var(--br-line); margin-left: .4rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: .2rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--br-pine); border: 2px solid var(--br-cloud);
}
.timeline .when { font-family: var(--font-data); font-size: .74rem; color: var(--br-slate); display: block; }

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.workflow-bar {
  width: 100%;
  height: 8px;
  border-radius: 2px;
  background: var(--br-mist);
  border: 1px solid var(--br-line);
  overflow: hidden;
  margin: .55rem 0 1rem;
}

.workflow-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #00c2a8, #4fe7d4);
}

.workflow-fill.pct-0 { width: 0%; }
.workflow-fill.pct-5 { width: 5%; }
.workflow-fill.pct-10 { width: 10%; }
.workflow-fill.pct-15 { width: 15%; }
.workflow-fill.pct-20 { width: 20%; }
.workflow-fill.pct-25 { width: 25%; }
.workflow-fill.pct-30 { width: 30%; }
.workflow-fill.pct-35 { width: 35%; }
.workflow-fill.pct-40 { width: 40%; }
.workflow-fill.pct-45 { width: 45%; }
.workflow-fill.pct-50 { width: 50%; }
.workflow-fill.pct-55 { width: 55%; }
.workflow-fill.pct-60 { width: 60%; }
.workflow-fill.pct-65 { width: 65%; }
.workflow-fill.pct-70 { width: 70%; }
.workflow-fill.pct-75 { width: 75%; }
.workflow-fill.pct-80 { width: 80%; }
.workflow-fill.pct-85 { width: 85%; }
.workflow-fill.pct-90 { width: 90%; }
.workflow-fill.pct-95 { width: 95%; }
.workflow-fill.pct-100 { width: 100%; }

.workflow-phases {
  display: grid;
  gap: .7rem;
}

.phase-item {
  border: 1px solid var(--br-line);
  border-radius: 4px;
  padding: .7rem .8rem;
  background: #fff;
}

.phase-item.is-done {
  border-color: rgba(0,194,168,.35);
  box-shadow: 0 0 0 2px rgba(0,194,168,.1);
}

.phase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .3rem;
}

.phase-item p {
  margin: 0;
  color: var(--br-slate);
  font-size: .84rem;
}

.phase-tag {
  display: inline-block;
  border-radius: var(--radius-pill);
  border: 1px solid var(--br-line);
  background: var(--br-mist);
  padding: .18rem .55rem;
  font-size: .68rem;
  font-weight: 700;
  color: var(--br-slate);
  white-space: nowrap;
}

.phase-tag.done {
  color: #0a6d59;
  border-color: rgba(0,194,168,.35);
  background: rgba(0,194,168,.12);
}

.next-actions {
  margin: .9rem 0 .4rem;
  padding-left: 1.05rem;
  color: var(--br-slate);
  font-size: .86rem;
}

.next-actions li { margin: .3rem 0; }

.pillar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .8rem;
}

.pillar-actions .btn {
  font-size: .86rem;
  padding: .54rem .95rem;
}

.lifecycle-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin: .3rem 0 .9rem;
}

.lifecycle-stats > div {
  border: 1px solid var(--br-line);
  background: #fff;
  border-radius: 2px;
  padding: .55rem .6rem;
  text-align: center;
}

.lifecycle-stats b {
  display: block;
  font-family: var(--font-data);
  font-size: 1.02rem;
}

.lifecycle-stats span {
  font-size: .72rem;
  color: var(--br-slate);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.lifecycle-opps {
  display: grid;
  gap: .55rem;
}

.lifecycle-opps article {
  border: 1px solid var(--br-line);
  border-radius: 4px;
  background: #fff;
  padding: .7rem .8rem;
}

.lifecycle-opps h4 {
  margin: 0 0 .3rem;
  font-size: .92rem;
}

.lifecycle-opps p {
  margin: 0;
  font-size: .84rem;
  color: var(--br-slate);
}

/* utility (CSP-safe, no inline styles) */
.center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.muted { color: var(--br-slate); }
.score-row.left { justify-content: flex-start; }

/* footer */
.footer { background: var(--br-ink); color: #C9DAD3; padding: 2rem 0; font-size: .8rem; }
.footer p { margin: 0; max-width: 760px; }
.footer strong { color: #fff; }

/* Assistant panel */
.assistant { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.assistant-toggle {
  font-family: var(--font-body); cursor: pointer;
  background: var(--br-pine); color: #fff; border: 0;
  border-radius: var(--radius-pill); padding: .4rem .9rem .4rem .4rem; box-shadow: var(--shadow-raise);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  display: inline-flex; align-items: center; gap: .6rem; max-width: calc(100vw - 2.5rem);
}
.assistant-toggle:hover { background: var(--br-pine-hover); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.toggle-avatar {
  width: 2.5rem; height: 2.5rem; flex: none; position: relative;
  border-radius: 999px; background-color: rgba(255,255,255,.16);
  box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}
.toggle-status {
  position: absolute; right: -1px; bottom: -1px;
  width: .7rem; height: .7rem; border-radius: 999px;
  background: #36d399; box-shadow: 0 0 0 2px var(--br-pine);
}
.toggle-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.toggle-title { font-weight: 700; font-size: .92rem; }
.toggle-sub { font-size: .72rem; color: #B9E7DD; font-weight: 500; }
.guide-avatar {
  width: 1.6rem; height: 1.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  line-height: 1;
  flex: none;
}
.guide-avatar-photo {
  background-image: url('assets/lending-specialist-avatar.jpg');
  background-size: cover;
  background-position: center top;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
@media (max-width: 520px) {
  .assistant { right: .9rem; bottom: .9rem; }
  .toggle-sub { display: none; }
  .toggle-title { font-size: .85rem; }
  .toggle-avatar { width: 2.1rem; height: 2.1rem; }
}
.assistant-panel {
  width: min(360px, calc(100vw - 2.5rem));
  background: var(--br-cloud); border: 1px solid var(--br-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-raise);
  display: flex; flex-direction: column; overflow: hidden;
}
.assistant-head {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--br-pine); color: #fff; padding: .7rem 1rem; font-size: .9rem;
  gap: .5rem;
}
.assistant-head-brand {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  flex: 1 1 auto;
}
.assistant-head-brand strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assistant-head-brand .guide-avatar {
  width: 1.5rem;
  height: 1.5rem;
}
.assistant-head button {
  background: none; border: 0; color: #C9DAD3; font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.assistant-head button:hover { color: #fff; }
.assistant-msgs {
  height: 300px; overflow-y: auto; padding: 1rem; display: flex;
  flex-direction: column; gap: .6rem; background: var(--br-paper);
}
.msg { max-width: 88%; padding: .6rem .85rem; border-radius: 4px; font-size: .88rem; line-height: 1.45; }
.msg-ai { background: var(--br-mist); color: var(--br-ink); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-user { background: var(--br-pine); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg-typing { display: inline-flex; align-items: center; gap: .25rem; padding: .7rem .85rem; }
.msg-typing span {
  width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--br-sea); opacity: .5;
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.msg-typing span:nth-child(2) { animation-delay: .18s; }
.msg-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-.28rem); opacity: 1; }
}
.assistant-chips { display: flex; gap: .4rem; flex-wrap: wrap; padding: .6rem 1rem 0; background: var(--br-cloud); }
.chip {
  font-family: var(--font-body); font-size: .78rem; font-weight: 600; cursor: pointer;
  background: var(--br-mist); color: var(--br-sea); border: 1px solid var(--br-line);
  border-radius: var(--radius-pill); padding: .35rem .8rem; transition: all .15s;
}
.chip:hover { background: var(--br-gold-tint); border-color: rgba(0,194,168,.28); color: #067C6A; }
.assistant-form { display: flex; gap: .5rem; padding: .75rem 1rem .4rem; background: var(--br-cloud); }
.assistant-form input { flex: 1; font-size: .9rem; padding: .55rem .8rem; }
.assistant-form .btn { padding: .55rem 1.1rem; font-size: .9rem; }
.assistant-disclaimer { margin: 0; padding: 0 1rem .7rem; font-size: .7rem; color: var(--br-faint); background: var(--br-cloud); }

/* ── voice guide controls ── */
.guide-head-actions { display: flex; align-items: center; gap: .4rem; flex: none; }
.assistant-head .guide-icon-btn {
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-pill); font-size: .72rem; font-weight: 600;
  padding: .25rem .65rem; cursor: pointer;
}
.assistant-head .guide-icon-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
.assistant-form .guide-mic,
.assistant-form .guide-audio {
  display: flex; align-items: center; justify-content: center;
  background: var(--br-mist); color: var(--br-pine); border: 1px solid var(--br-line);
  border-radius: var(--radius-pill); width: 38px; height: 38px; padding: 0; flex: none;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.assistant-form .guide-mic:hover,
.assistant-form .guide-audio:hover { background: var(--br-gold-tint); border-color: rgba(0,194,168,.32); }
.assistant-form .guide-mic.listening {
  background: var(--br-gold-tint); border-color: var(--br-gold); color: #087766;
  animation: mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 194, 168, .45); }
  50% { box-shadow: 0 0 0 7px rgba(0, 194, 168, 0); }
}
.assistant-form .guide-audio.active {
  background: var(--br-pine); border-color: var(--br-pine); color: #fff;
}
.assistant-form .guide-audio.active:hover { background: var(--br-pine-hover, #0F352E); }
.assistant-form .guide-audio.active svg line {
  transform-box: fill-box; transform-origin: center;
  animation: wave-bounce 1s ease-in-out infinite;
}
.assistant-form .guide-audio.active svg line:nth-child(1) { animation-delay: .15s; }
.assistant-form .guide-audio.active svg line:nth-child(2) { animation-delay: .3s; }
.assistant-form .guide-audio.active svg line:nth-child(3) { animation-delay: 0s; }
.assistant-form .guide-audio.active svg line:nth-child(4) { animation-delay: .45s; }
.assistant-form .guide-audio.active svg line:nth-child(5) { animation-delay: .25s; }
@keyframes wave-bounce {
  0%, 100% { transform: scaleY(.45); }
  50% { transform: scaleY(1); }
}

/* ── Stage 1: conversational quote ── */
.convo-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.25rem; margin: 1.5rem 0 2rem; align-items: start; }
.chat-card {
  background: linear-gradient(180deg, #091f48 0%, #071a3d 100%);
  border: 1px solid rgba(0,194,168,.25);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-head {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.03);
  color: #E7F1FF;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: .78rem 1rem; font-size: .9rem; font-weight: 600;
}
.chat-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--br-sea); display: inline-block; }
.chat-msgs {
  height: 380px; overflow-y: auto; padding: 1rem; display: flex;
  flex-direction: column; gap: .6rem; background: transparent;
}
.chat-chips { display: flex; gap: .4rem; flex-wrap: wrap; padding: .6rem 1rem 0; background: transparent; }
.chip-faq { background: rgba(255,255,255,.05); color: #c7d8f3; border-color: rgba(255,255,255,.2); border-style: solid; }
.chat-form { display: flex; gap: .5rem; padding: .75rem 1rem .9rem; background: transparent; }
.chat-form input { flex: 1; font-size: .95rem; padding: .6rem .85rem; }
.chat-form .btn { padding: .6rem 1.2rem; font-size: .95rem; }

.chat-card .msg-ai {
  background: rgba(255,255,255,.08);
  color: #EDF4FF;
  border: 1px solid rgba(255,255,255,.12);
}
.chat-card .msg-user {
  background: var(--br-sea);
  color: #032a24;
}
.chat-card .chip {
  background: rgba(255,255,255,.07);
  color: #d9e7fb;
  border-color: rgba(255,255,255,.22);
}
.chat-card .chip:hover {
  background: rgba(0,194,168,.18);
  color: #bafff6;
  border-color: rgba(0,194,168,.45);
}

.chat-card .chat-form input {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.chat-card .chat-form input::placeholder { color: #a4b8d9; }
.chat-card .chat-form input:focus {
  border-color: var(--br-sea);
  box-shadow: 0 0 0 4px rgba(0,194,168,.15);
}

.quote-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.quote-card {
  background: var(--br-cloud); border: 1px solid var(--br-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 1.25rem; position: sticky; top: 1rem;
}
.quote-card h3 { margin: 0 0 .75rem; font-size: 1.05rem; color: var(--br-pine); }
.fact-pills { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.fact-pills li {
  font-size: .76rem; font-weight: 600; padding: .3rem .7rem; border-radius: var(--radius-pill);
  background: var(--br-mist); color: var(--br-faint); border: 1px solid var(--br-line);
}
.fact-pills li.lit { background: var(--br-gold-tint); color: #067C6A; border-color: rgba(0,194,168,.3); }
.quote-display { background: var(--br-paper); border: 1px solid var(--br-line); border-radius: 4px; padding: 1rem; margin-bottom: .9rem; }
.quote-locked { margin: 0; color: var(--br-faint); font-size: .85rem; }
.quote-weekly { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .6rem; }
.quote-weekly .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 1.9rem; font-weight: 600; color: var(--br-gold); }
.quote-weekly .unit { color: var(--br-slate); font-size: .9rem; }
.quote-rates { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0; font-size: .85rem; }
.quote-rates dt { color: var(--br-slate); }
.quote-rates dd { margin: 0; text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--br-ink); font-weight: 600; }
.quote-note { margin: .6rem 0 0; font-size: .72rem; color: var(--br-faint); }
.stp-badge {
  background: var(--br-gold-tint); border: 1px solid rgba(0,194,168,.28); color: #067C6A;
  border-radius: 4px; padding: .6rem .9rem; font-size: .85rem; font-weight: 600; margin-bottom: .9rem;
}
.btn-block { display: block; width: 100%; text-align: center; margin-bottom: .5rem; }

/* ── Stage 2: pre-fill, computed amount, forks ── */
.prefill-panel {
  background: linear-gradient(180deg, #f4fbff 0%, #eff7ff 100%);
  border: 1px solid #d0dff3;
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.prefill-panel h3 { margin: 0 0 .6rem; font-size: .95rem; color: var(--br-pine); }
.prefill-panel .muted { margin: .6rem 0 0; font-size: .78rem; }
.prefill-items { display: flex; flex-wrap: wrap; gap: .4rem; }
.prefill-chip {
  background: var(--br-cloud); border: 1px solid var(--br-line); color: var(--br-sea);
  font-size: .8rem; font-weight: 600; padding: .3rem .75rem; border-radius: var(--radius-pill);
}
.computed-amount {
  background: var(--br-paper); border: 1px solid var(--br-line); border-radius: 4px;
  padding: .7rem 1rem; font-size: .95rem; color: var(--br-slate); margin: 1rem 0;
}
.computed-amount .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--br-gold); }
.fork-note {
  background: var(--br-mist); border-left: 3px solid var(--br-sea); border-radius: 0;
  padding: .7rem 1rem; font-size: .85rem; color: var(--br-slate); margin: .75rem 0;
}

/* ── Step 1: applicant-type chooser ── */
.applicant-type {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .75rem; margin: .5rem 0 1rem;
}
.type-card {
  display: flex; flex-direction: column; gap: .25rem; cursor: pointer;
  border: 1.5px solid var(--br-line); border-radius: var(--radius-card);
  padding: .85rem 1rem; font-weight: 400; transition: border-color .15s, background .15s;
}
.type-card:hover { border-color: var(--br-sea); }
.type-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.type-card:has(input:checked) { border-color: var(--br-pine); background: var(--br-mist); }
.type-card .type-title { font-weight: 700; color: var(--br-pine); font-size: .95rem; }
.type-card .type-desc { font-size: .82rem; color: var(--br-slate); }
.context-panel {
  background: var(--br-cloud); border: 1.5px solid var(--br-line);
  border-radius: var(--radius-card); padding: 1rem; margin: 0 0 1rem;
}
.context-panel.hidden { display: none; }

/* ── Stage 3: document vault ── */
.vault { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0 1.25rem; }
.vault-slot {
  background: var(--br-cloud); border: 1.5px solid var(--br-line); border-radius: var(--radius-card);
  padding: 1rem; display: flex; flex-direction: column; gap: .6rem;
}
.vault-title { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.vault-title h4 { margin: 0; font-size: .95rem; color: var(--br-pine); }
.vault-state {
  font-size: .7rem; font-weight: 700; padding: .2rem .6rem; border-radius: var(--radius-pill);
  background: var(--br-mist); color: var(--br-faint); white-space: nowrap;
}
.vault-state[data-state="done"] { background: #E4F3EA; color: #176B45; }
.vault-state[data-state="review"] { background: var(--br-gold-tint); color: #067C6A; }
.vault-slot > p { margin: 0; font-size: .8rem; color: var(--br-slate); }
.vault-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.vault-btn { font-size: .85rem; padding: .5rem 1rem; cursor: pointer; }
/* Visually hide the file input without display:none. iOS Safari and some
   mobile WebKit browsers refuse to open the picker when a label's wrapped
   file input is display:none, so we keep it in the layout but off-screen. */
.vault-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.vault-status { margin: 0; font-size: .78rem; min-height: 1em; }
.vault-status.ok { color: #176B45; }
.vault-status.err { color: #B3261E; }
.vault-status.busy { color: var(--br-slate); }
.vault-fields {
  display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; margin: 0;
  background: var(--br-paper); border: 1px solid var(--br-line); border-radius: 2px; padding: .6rem .75rem;
  font-size: .78rem;
}
.vault-fields dt { color: var(--br-faint); }
.vault-fields dd { margin: 0; color: var(--br-ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.vault-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; }
.vault-checks .pass { color: #176B45; }
.vault-checks .fail { color: #8F6420; }
.chain-note {
  background: var(--br-mist); border-radius: 4px; padding: .8rem 1rem; font-size: .9rem;
  color: var(--br-slate); margin: .75rem 0 1rem;
}
.advice-boundary { font-size: .82rem; }
.footer .advice-boundary { color: #E5EEEA; margin-bottom: .6rem; }

#view-apply,
#view-track {
  background: #fff;
  border: 1px solid var(--br-line);
  border-radius: 4px;
  box-shadow: var(--shadow-card);
  padding: 1.4rem 1.2rem;
}

#view-apply h2,
#view-track h2 {
  margin-top: .1rem;
  font-size: clamp(1.6rem, 2.9vw, 2.2rem);
  letter-spacing: -0.02em;
}

@media (max-width: 900px) {
  .convo-grid { grid-template-columns: 1fr; }
  .quote-card { position: static; }
  .vault { grid-template-columns: 1fr; }
  .pillar-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .container { padding: 0 .9rem; }
  .container {
    padding-left: max(.9rem, env(safe-area-inset-left));
    padding-right: max(.9rem, env(safe-area-inset-right));
  }
  .topbar-inner {
    height: auto;
    min-height: 56px;
    padding-top: .55rem;
    padding-bottom: .55rem;
    gap: .55rem;
    flex-wrap: nowrap;
  }
  .brand {
    font-size: 1.02rem;
    letter-spacing: -0.01em;
    flex: 0 1 auto;
    min-width: 0;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand .brand-tld {
    display: inline;
    font-size: .72rem;
  }
  .topbar nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    white-space: nowrap;
    flex: none;
  }
  /* The signed-in profile dropdown (body.authed, defined above) already covers
     every width. Logged-out keeps a lean inline layout - on small screens the
     hero carries the big "Create account" CTA, so the topbar shows just the
     compact Sign in + Talk icon. */
  .topbar nav a.nav-phone { width: 34px; height: 34px; }
  #nav-create { display: none; }

  .hero { padding: 2.5rem 1.25rem 2rem; }
  .hero h1 { font-size: 1.95rem; }
  .hero p { font-size: 1rem; }
  .hero-chips { gap: .6rem; }
  .hero-chips .rate-chip {
    width: 100%;
    justify-content: center;
  }

  .chat-form {
    flex-direction: column;
    align-items: stretch;
  }
  .chat-form .btn {
    width: 100%;
  }

  /* keep inputs at 16px so iOS Safari does not zoom on focus */
  input, select, textarea,
  .chat-form input,
  .track-form input,
  .assistant-form input {
    font-size: 16px;
  }

  /* comfortable thumb-friendly tap targets for pills/chips */
  .chip,
  .chat-chips .chip,
  .assistant-chips .chip {
    min-height: 40px;
    padding: .55rem .9rem;
    display: inline-flex;
    align-items: center;
  }

  #view-apply,
  #view-track { padding: 1rem .9rem; }
  .track-form { flex-direction: column; align-items: stretch; }
  .track-form .btn { align-self: stretch; }
  .progress-steps { grid-template-columns: 1fr; }
  .chat-msgs { height: 300px; }
  .lifecycle-stats { grid-template-columns: 1fr; }
  .pillar-actions .btn { width: 100%; }

  .assistant {
    right: .6rem;
    bottom: .6rem;
    left: auto;
  }
  .assistant {
    right: calc(.6rem + env(safe-area-inset-right));
    bottom: calc(.6rem + env(safe-area-inset-bottom));
  }
  .assistant-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0;
    line-height: 1;
    overflow: hidden;
  }
  .assistant-toggle .toggle-copy {
    display: none;
  }
  .assistant-toggle .toggle-avatar {
    width: 100%;
    height: 100%;
  }
  .assistant-panel {
    width: min(96vw, 360px);
    max-height: 74vh;
  }
  .assistant-head { padding: .6rem .7rem; gap: .4rem; }
  .assistant-head-brand { gap: .35rem; }
  .assistant-head-brand strong { font-size: .82rem; }
  .assistant-head .guide-icon-btn {
    padding: .22rem .5rem;
    font-size: .68rem;
    white-space: nowrap;
  }
  .assistant-msgs { height: min(260px, 42vh); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Certifier worklist (internal staff) ─────────────────────────────────── */
.certify-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.certify-count {
  margin: 0 0 .75rem;
  font-weight: 600;
}
.certify-card-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.certify-rate {
  margin: .25rem 0 .75rem;
  font-size: .92rem;
}
.precheck-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.precheck {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .55rem .7rem;
  border: 1px solid var(--br-line);
  border-left-width: 3px;
  background: var(--br-paper);
}
.precheck.ok { border-left-color: var(--br-success); }
.precheck.fail { border-left-color: var(--br-error); }
.precheck-mark {
  flex: none;
  font-weight: 700;
  line-height: 1.4;
}
.precheck.ok .precheck-mark { color: var(--br-success); }
.precheck.fail .precheck-mark { color: var(--br-error); }
.precheck-body {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.precheck-body .muted { font-size: .82rem; }
.certify-notes-label {
  display: block;
  margin-bottom: .75rem;
  font-size: .85rem;
  color: var(--br-slate);
}
.certify-notes {
  display: block;
  width: 100%;
  margin-top: .25rem;
  padding: .55rem .7rem;
  border: 1px solid var(--br-line);
  background: var(--br-cloud);
  color: var(--br-ink);
  font: inherit;
}
.certify-notes:focus {
  outline: none;
  border-color: var(--br-sea);
}
@media (max-width: 560px) {
  .certify-head { flex-direction: column; }
}

/* ── Auth gate (fully logged-in CAS portal) ─────────────────────────────── */
body.logged-out .nav-auth-only { display: none; }
body.authed .nav-guest-only { display: none !important; }

.auth-gate {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2.5rem 0 3rem;
}
.auth-hero h1 {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1.15;
  margin: .5rem 0 .75rem;
}
.auth-hero > p { color: var(--br-slate); font-size: 1.02rem; max-width: 38ch; }
.auth-points {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.auth-points li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--br-slate);
  font-size: .92rem;
}
.auth-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--br-gold);
  font-weight: 700;
}
.auth-actions { display: grid; gap: 1rem; }
.auth-card {
  background: var(--br-cloud);
  border: 1px solid var(--br-line);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.auth-card-primary { border-color: var(--br-sea); }
.auth-card h3 {
  font-family: var(--font-display);
  margin: 0 0 .4rem;
  font-size: 1.15rem;
}
.auth-card p { margin: 0 0 1rem; }
.auth-card .btn-block + .btn-block { margin-top: .6rem; }

/* Partner accreditation (activation gate) fields */
#activate-fields label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin: 0 0 .9rem;
}
#activate-fields input,
#activate-fields select {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .6rem .7rem;
  border: 1px solid var(--br-line);
  border-radius: var(--radius-card);
  background: #fff;
  font: inherit;
}
#activate-fields small { display: block; margin-top: .3rem; font-weight: 400; }

/* Business ABR ABN lookup status */
.abn-status { margin: .4rem 0 0; font-size: .82rem; }
.abn-status.is-ok { color: var(--br-sea); font-weight: 600; }
.abn-status.is-error { color: var(--br-error); }

@media (max-width: 820px) {
  .auth-gate { grid-template-columns: 1fr; gap: 1.75rem; padding: 1.5rem 0 2rem; }
  .auth-hero h1 { font-size: 1.8rem; }
  .auth-hero > p { max-width: none; }
}

/* ============================================================
  Operations / OEM portal (#admin) - role-based admin + partner
  ============================================================ */
.admin-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin: 0 0 1.25rem;
}
.admin-head h2 { margin: 0; }
.admin-head-actions { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.admin-range-label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .72rem; color: var(--br-slate); font-weight: 600;
}
.admin-select {
  font-family: var(--font-body); font-size: .85rem; padding: .4rem .6rem;
  border: 1px solid var(--br-line); border-radius: var(--radius-input);
  background: var(--br-cloud); color: var(--br-ink);
}
.admin-tabs {
  display: flex; gap: .25rem; border-bottom: 1px solid var(--br-line);
  margin: 0 0 1.25rem; overflow-x: auto;
}
.admin-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  color: var(--br-slate); padding: .6rem .9rem; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.admin-tab:hover { color: var(--br-pine); }
.admin-tab.is-active { color: var(--br-pine); border-bottom-color: var(--br-sea); }

/* KPI tiles */
.admin-kpis {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; margin-bottom: 1.25rem;
}
.admin-kpis-4 { grid-template-columns: repeat(4, 1fr); }
.admin-kpis-3 { grid-template-columns: repeat(3, 1fr); }
.admin-kpi {
  background: var(--br-cloud); border: 1px solid var(--br-line);
  border-radius: var(--radius-card); padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .15rem; box-shadow: var(--shadow-card);
}
.admin-kpi.is-accent { background: var(--br-gold-tint); border-color: var(--br-sea); }
.admin-kpi-value { font-family: var(--font-data); font-size: 1.5rem; font-weight: 700; color: var(--br-ink); font-variant-numeric: tabular-nums; }
.admin-kpi-label { font-size: .72rem; color: var(--br-slate); text-transform: uppercase; letter-spacing: .04em; }

/* Card grid */
.admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.admin-grid .portal-card { margin: 0; }
.admin-grid .portal-card h3 { margin: 0 0 .85rem; font-size: 1rem; }
.admin-span-2 { grid-column: span 2; }
.admin-span-3 { grid-column: span 3; }

/* CSP-safe SVG charts */
.admin-bar { width: 100%; height: 8px; display: block; }
.admin-bar-track { fill: var(--br-mist); }
.admin-bar-fill { fill: var(--br-pine); }
.admin-bar-fill.fill-pine { fill: var(--br-pine); }
.admin-bar-fill.fill-sea { fill: var(--br-sea); }
.admin-bar-fill.fill-gold { fill: var(--br-gold); }
.admin-spark { width: 100%; height: 90px; display: block; }
.admin-spark-line { fill: none; stroke: var(--br-sea); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.admin-spark-dot { fill: var(--br-pine); }

/* Funnel */
.admin-funnel { display: flex; flex-direction: column; gap: .7rem; }
.admin-funnel-row { display: grid; grid-template-columns: 150px 1fr 56px; align-items: center; gap: .75rem; }
.admin-funnel-meta { display: flex; flex-direction: column; }
.admin-funnel-meta b { font-family: var(--font-data); font-size: 1.05rem; }
.admin-funnel-meta span { font-size: .72rem; color: var(--br-slate); }
.admin-funnel-conv { font-family: var(--font-data); font-size: .8rem; text-align: right; color: var(--br-gold); }

/* Recent applications */
.admin-recent { display: flex; flex-direction: column; }
.admin-recent-row {
  display: grid; grid-template-columns: 32px 1.4fr 1fr auto auto; align-items: center;
  gap: .65rem; padding: .55rem 0; border-top: 1px solid var(--br-line); cursor: pointer;
}
.admin-recent-row:first-child { border-top: none; }
.admin-recent-row:hover { background: var(--br-mist); }
.admin-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--br-mist);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: var(--br-pine);
}
.admin-recent-name { display: flex; flex-direction: column; line-height: 1.2; }
.admin-recent-name small { color: var(--br-faint); font-family: var(--font-data); font-size: .68rem; }
.admin-recent-vehicle { font-size: .85rem; color: var(--br-slate); }
.admin-recent-time { font-size: .72rem; color: var(--br-faint); white-space: nowrap; }

/* Lenders */
.admin-lenders { display: flex; flex-direction: column; gap: .55rem; }
.admin-lender-row { display: grid; grid-template-columns: 1.4fr auto 48px 90px; align-items: center; gap: .6rem; font-size: .85rem; }
.admin-lender-name { font-weight: 600; }
.admin-lender-num { font-family: var(--font-data); }
.admin-lender-rate { font-family: var(--font-data); color: var(--br-gold); text-align: right; }
.admin-lender-bar { width: 90px; }

/* Stage timings */
.admin-timings { display: flex; flex-direction: column; gap: .5rem; }
.admin-timing-row { display: flex; justify-content: space-between; align-items: center; font-size: .88rem; padding: .15rem 0; }
.admin-timing-row b { font-family: var(--font-data); }
.admin-timing-total { border-top: 1px solid var(--br-line); margin-top: .35rem; padding-top: .6rem; }

/* Alerts */
.admin-alerts { display: flex; flex-direction: column; gap: .7rem; }
.admin-alert { display: flex; gap: .6rem; align-items: flex-start; }
.admin-alert-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: .35rem; flex: none; background: var(--br-info); }
.admin-alert-warning .admin-alert-dot { background: var(--br-warning); }
.admin-alert-success .admin-alert-dot { background: var(--br-success); }
.admin-alert-info .admin-alert-dot { background: var(--br-info); }
.admin-alert-body { display: flex; flex-direction: column; line-height: 1.3; }
.admin-alert-body small { color: var(--br-slate); font-size: .78rem; }

/* Vehicle insights */
.admin-vehicles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.admin-veh-card { display: flex; flex-direction: column; gap: .35rem; padding: .8rem; background: var(--br-mist); border-radius: var(--radius-card); }
.admin-veh-card b { font-size: .95rem; }
.admin-veh-conv { font-family: var(--font-data); font-size: .75rem; color: var(--br-gold); }

/* Applications table */
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; }
.admin-search { flex: 1 1 320px; max-width: 420px; padding: .55rem .8rem; border: 1px solid var(--br-line); border-radius: var(--radius-input); font-family: var(--font-body); font-size: .9rem; }
.admin-count { white-space: nowrap; }
.admin-table { padding: 0; overflow: hidden; }
.admin-table-head, .admin-table-row {
  display: grid; grid-template-columns: 130px 1.3fr 1.3fr 110px 130px 90px; align-items: center;
  gap: .6rem; padding: .7rem 1rem;
}
.admin-table.admin-table-5 .admin-table-head, .admin-table.admin-table-5 .admin-table-row {
  grid-template-columns: 130px 1.4fr 1.4fr 130px 90px;
}
.admin-table-head { background: var(--br-mist); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--br-slate); font-weight: 700; }
.admin-table-row { border-top: 1px solid var(--br-line); cursor: pointer; font-size: .86rem; }
.admin-table-row:hover { background: var(--br-mist); }
.admin-cell-ref { font-family: var(--font-data); font-size: .76rem; color: var(--br-pine); }
.admin-empty { padding: 1.2rem 1rem; }

/* User management */
.admin-table-users .admin-table-head, .admin-table-users .admin-table-row { grid-template-columns: 1.5fr 1.4fr 120px 120px; }
.admin-user-name { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.admin-user-row { cursor: pointer; }
.admin-users-hint { margin-top: .8rem; }
.admin-user-sub { margin: -.5rem 0 1rem; font-family: var(--font-data); font-size: .8rem; }
.admin-user-form { display: flex; flex-direction: column; gap: .7rem; }
.admin-user-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; font-weight: 600; color: var(--br-slate); }
.admin-user-form input, .admin-user-form select { padding: .5rem .6rem; border: 1px solid var(--br-line); border-radius: var(--radius-input); font-family: var(--font-body); font-size: .9rem; }

/* Exceptions */
.admin-exceptions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.admin-exception { margin: 0; border-left: 3px solid var(--br-line); }
.admin-exception.admin-sev-high { border-left-color: var(--br-error); }
.admin-exception.admin-sev-medium { border-left-color: var(--br-warning); }
.admin-exc-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.admin-exc-title { margin: .5rem 0 .2rem; font-weight: 600; }
.admin-exc-action { margin: 0 0 .8rem; font-size: .82rem; }
.admin-sev-badge.admin-sev-high { background: var(--br-error-bg); color: var(--br-error); }
.admin-sev-badge.admin-sev-medium { background: var(--br-warning-bg); color: var(--br-warning); }
.admin-sev-badge.admin-sev-low { background: var(--br-info-bg); color: var(--br-info); }

/* Connect CX */
.admin-cx-head, .admin-cx-row { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
.admin-leads { display: flex; flex-direction: column; }
.admin-lead-row { display: grid; grid-template-columns: 1.3fr 1fr auto auto; align-items: center; gap: .5rem; padding: .5rem 0; border-top: 1px solid var(--br-line); font-size: .82rem; }
.admin-lead-row:first-child { border-top: none; }

/* Detail modal */
.admin-detail { display: flex; flex-direction: column; gap: .4rem; }
.admin-detail-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; padding: .2rem 0; border-bottom: 1px dashed var(--br-line); }
.admin-detail-row span { color: var(--br-slate); }
.admin-detail-h { margin: 1rem 0 .5rem; font-size: .95rem; }
.admin-journey { margin: 0; padding-left: 1.1rem; font-size: .84rem; }
.admin-journey li { margin: .2rem 0; }
.admin-modal-overlay { position: fixed; inset: 0; background: rgba(7,26,61,.45); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 1000; }
.admin-modal { background: var(--br-cloud); border-radius: var(--radius-card); padding: 1.5rem; max-width: 520px; width: 100%; max-height: 85vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-raise); }
.admin-modal h3 { margin: 0 0 1rem; }
.admin-modal-close { position: absolute; top: .6rem; right: .8rem; background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--br-slate); }

@media (max-width: 900px) {
  .admin-grid { grid-template-columns: 1fr; }
  .admin-span-2, .admin-span-3 { grid-column: span 1; }
  .admin-kpis { grid-template-columns: repeat(3, 1fr); }
  .admin-vehicles { grid-template-columns: repeat(2, 1fr); }
  .admin-exceptions { grid-template-columns: 1fr; }
  .admin-table-head, .admin-table-row,
  .admin-table.admin-table-5 .admin-table-head, .admin-table.admin-table-5 .admin-table-row {
    grid-template-columns: 1fr 1fr auto;
  }
  .admin-table-head span:nth-child(n+4), .admin-table-row span:nth-child(n+4) { display: none; }
  .admin-cx-head, .admin-cx-row { grid-template-columns: 1.4fr 1fr 1fr; }
  .admin-cx-head span:nth-child(n+4), .admin-cx-row span:nth-child(n+4) { display: none; }
}
@media (max-width: 560px) {
  .admin-kpis { grid-template-columns: repeat(2, 1fr); }
  .admin-funnel-row { grid-template-columns: 110px 1fr 44px; }
  .admin-recent-row { grid-template-columns: 28px 1.4fr auto; }
  .admin-recent-vehicle { display: none; }
}

/* How we assessed your application - per-factor criteria breakdown */
.criteria-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .7rem; }
.criteria-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3rem; font-size: .92rem; color: var(--br-ink); }
.criteria-rating { font-weight: 700; font-size: .78rem; letter-spacing: .02em; }
.crit-good { color: #00A892; }
.crit-fair { color: #C9923B; }
.crit-low  { color: #C0392B; }
.workflow-fill.crit-good { background: #00C2A8; }
.workflow-fill.crit-fair { background: #C9923B; }
.workflow-fill.crit-low  { background: #C0392B; }
.criteria-reasons { margin-top: .8rem; }
.criteria-note { margin-top: .65rem; font-size: .78rem; }