/* DSCR Rental Pricer. A quiet, light look: warm grey page, white cards with hairline borders, DM Sans at regular
   weights, and a thin serif (Libre Caslon Display) for page titles and the "Who's pricing today?" cards only.
   TVC maroon (#86091E, from the logo) is the accent for buttons, links and titles; pastel blue (--pick) marks
   whatever is chosen (cards, ticks, segments, the chosen rate). No decorative icons: choices are plain text,
   dropdowns and tick boxes. */
:root {
  --bg: #f6f5f2;
  --surface: #ffffff;
  --surface-2: #fafaf8;
  --surface-3: #f0efec;
  --glance: #eeefed;
  --glance-line: #dfe2e4;
  --line: #e5e7ea;
  --line-2: #dcdfe4;
  --ink: #23262d;
  --ink-2: #464b55;
  --muted: #7b818a;
  --faint: #a3a9b2;
  --accent: #86091e;
  --accent-ink: #6c0718;
  --accent-soft: #efdadd;
  --accent-tint: #fbf4f5;
  /* Whatever is chosen (cards, ticks, segments, the chosen rate): pastel blue */
  --pick: #6b9bd1;
  --pick-ink: #24508a;
  --pick-muted: #5f7ea6;
  --pick-soft: #d3e3f6;
  --pick-tint: #eef5fd;
  --ring: rgba(134, 9, 30, 0.14);
  --ok: #2e7d5b;
  --ok-soft: #e7f2eb;
  --warn: #8a5a12;
  --warn-soft: #fbf5e8;
  --warn-line: #f0e0bd;
  --err: #b3261e;
  --err-soft: #fcedeb;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 4px rgba(21, 36, 66, 0.02);
  --shadow-lift: 0 2px 6px rgba(21, 36, 66, 0.05), 0 12px 32px rgba(21, 36, 66, 0.09);
  --serif: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Every wizard screen is the same height, so the buttons sit in the same place and nothing scrolls on a laptop. */
  --wizard-h: 516px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.55 var(--sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-ink); }
strong { font-weight: 600; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { flex: none; }

/* ---------- Header ---------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-inner { max-width: 1320px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand img { height: 34px; width: auto; display: block; }
.brand-divider { width: 1px; height: 24px; background: var(--line-2); }
.brand-name { font-size: 14.5px; font-weight: 500; white-space: nowrap; color: var(--ink); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--muted); }
.header-divider { width: 1px; height: 16px; background: var(--line-2); }
.rates-live[hidden] + .role-chip[hidden] + .header-divider, .header-divider:has(+ .whoami[hidden]) { display: none; }
/* Who they're pricing as, always in view: "Pricing as Retail broker ⌄". A click changes it. */
.role-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 12px; color: var(--muted); white-space: nowrap; transition: border-color 0.15s, background 0.15s; }
.role-chip strong { color: var(--accent-ink); font-weight: 600; }
.role-chip svg { width: 13px; height: 13px; transition: transform 0.15s; }
.role-chip:hover { border-color: var(--accent-soft); background: var(--accent-tint); }
.role-chip:hover svg { transform: translateY(1px); }
.rates-live { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.rates-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.whoami { white-space: nowrap; color: var(--ink-2); }
.whoami button { border: 0; background: none; padding: 0; margin-left: 2px; color: var(--accent); font-size: 12.5px; }
.whoami button:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Page ---------- */
.page { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 22px 24px 22px; }
.loading { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 120px 0; color: var(--muted); }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin 0.8s linear infinite; display: inline-block; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.eyebrow { display: flex; align-items: flex-start; gap: 8px; font-size: 10px; line-height: 15px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.eyebrow::before { content: ""; width: 4px; height: 4px; margin-top: 5.5px; border-radius: 50%; background: var(--accent); flex: none; }
.intro h1 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); }

/* ---------- Stepper: 01 Loan & property › 02 Numbers › 03 Your rates ---------- */
.stepper { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex: none; }
.stepper li { display: flex; align-items: center; }
.stepper li + li::before { content: "›"; color: var(--faint); font-size: 15px; margin: 0 10px 2px; }
.step-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 8px 4px 4px; border-radius: 999px; color: var(--faint); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.step-btn:disabled { cursor: default; }
.step-num { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; background: var(--surface-3); color: var(--muted); flex: none; }
.step-btn.is-active { color: var(--ink); }
.step-btn.is-active .step-num { background: var(--accent); color: #fff; }
.step-btn.is-done { color: var(--ink-2); }
.step-btn.is-done:hover { background: var(--surface-3); }
.step-btn.is-done .step-num { background: var(--accent-soft); color: var(--accent); }
.step-num svg { width: 12px; height: 12px; }

/* ---------- Layout ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: stretch; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.step-card { padding: 22px 28px 0; display: flex; flex-direction: column; min-height: var(--wizard-h); animation: rise 0.25s ease both; }

/* Section titles inside a card, divided by a hairline like a form on paper */
.sec-head { margin-bottom: 14px; }
.sec-head h2 { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 20px; }
.sec-head p { font-size: 12px; color: var(--muted); line-height: 17px; }
.step-card .sec-head ~ .sec-head { margin: 20px -28px 14px; padding: 18px 28px 0; border-top: 1px solid var(--line); }

/* Questions */
.q { min-width: 0; }
.row-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 20px; }
.row-2 + .row-2, .row-2 + .q { margin-top: 14px; }
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 18px; margin-bottom: 6px; }
.q-label, .lbl { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); line-height: 18px; margin-bottom: 6px; }
.q-head .q-label { margin-bottom: 0; }
.lbl em { font-style: normal; font-weight: 400; color: var(--faint); }
.hint-line { margin-top: 5px; font-size: 11.5px; line-height: 16px; color: var(--muted); }
.err { color: var(--err); font-size: 12px; line-height: 16px; margin-top: 5px; }

/* Inputs and dropdowns */
.field { position: relative; }
.input { width: 100%; height: 42px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface); padding: 0 12px; font-size: 14px; font-weight: 400; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; appearance: none; }
.input::placeholder { color: var(--faint); }
.input:hover { border-color: #c9cdd4; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.field.has-prefix .input { padding-left: 25px; }
.field .prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 14px; }
select.input { padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%237b818a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.is-invalid .input, .input.is-invalid { border-color: var(--err); }
.is-invalid .input:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.14); }

/* Yes/no questions as tick-box cards */
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.check:hover { border-color: #c9cdd4; }
.check:has(input:checked) { border-color: var(--pick); background: var(--pick-tint); }
.check input { width: 15px; height: 15px; accent-color: var(--pick); margin: 2px 0 0; flex: none; cursor: pointer; }
.check strong { display: block; font-weight: 500; font-size: 12.5px; line-height: 18px; color: var(--ink); }
.check small { display: block; color: var(--muted); font-size: 11.5px; line-height: 15px; margin-top: 1px; }
.check:has(input:checked) strong { color: var(--pick-ink); }
.check:has(input:checked) small { color: var(--pick-muted); }
.tick-line { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 17px; color: var(--ink-2); cursor: pointer; }
.tick-line input { width: 14px; height: 14px; margin: 1px 0 0; accent-color: var(--pick); flex: none; cursor: pointer; }

/* Address, and the state read from it */
.state-line { min-height: 28px; margin-top: 5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.state-line .err { margin-top: 0; }
.state-ok { color: var(--ink-2); }

/* Loan amount */
.ltv-tag { font-size: 11px; font-weight: 500; color: var(--pick-ink); background: var(--pick-tint); border: 1px solid var(--pick-soft); border-radius: 999px; padding: 0 8px; line-height: 18px; }
.ltv-tag:empty { display: none; }
.ltv-picks { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.ltv-picks > span { white-space: nowrap; }
.ltv-picks .seg { flex: 1; }

/* Joined buttons (loan-to-value on the wizard; DSCR and prepayment on the rates screen) */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; height: 30px; margin-top: 4px; border-radius: 7px; background: var(--surface-3); }
.seg button { border: 0; border-radius: 5px; background: none; font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; padding: 0 2px; transition: background 0.12s, color 0.12s; }
.seg button:hover:not(.is-on):not([aria-disabled="true"]) { background: rgba(255, 255, 255, 0.7); }
.seg button.is-on { background: var(--pick-tint); color: var(--pick-ink); box-shadow: 0 1px 2px rgba(31, 30, 29, 0.08), inset 0 0 0 1px var(--pick); }
.seg button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.seg.seg-form { margin-top: 0; }
.seg.seg-ltv { height: 28px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 42px; padding: 0 20px; border-radius: 7px; border: 1px solid transparent; font-weight: 500; font-size: 13.5px; text-decoration: none; transition: background 0.15s, border-color 0.15s, transform 0.1s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-primary:disabled { opacity: 0.6; cursor: progress; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); border-color: #c9cdd4; }
.btn-quiet { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
.btn-quiet:hover { background: var(--surface-2); }
.btn-sm { height: 32px; padding: 0 14px; font-size: 12.5px; border-radius: 6px; }
.btn-block { width: 100%; }
.btn-lg { height: 46px; font-size: 14px; padding: 0 24px; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.link-btn { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 500; font-size: 12.5px; display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.link-btn:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.link-btn svg { width: 13px; height: 13px; }

.card-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto -28px 0; padding: 14px 28px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.step-card > :nth-last-child(2) { margin-bottom: 20px; }
.card-nav .note { color: var(--muted); font-size: 12px; }

/* ---------- Sidebar: your loan at a glance ---------- */
.aside { display: flex; flex-direction: column; gap: 14px; }
.summary { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; background: var(--glance); border-color: var(--glance-line); box-shadow: none; overflow: hidden; }
.summary-title { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.big-amount { font-size: 32px; font-weight: 500; letter-spacing: -0.035em; margin-top: 6px; line-height: 1.1; color: var(--ink); }
.big-amount.is-empty { color: #c9ccd0; }
.big-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.facts { list-style: none; padding: 0; margin: 12px 0 14px; display: flex; flex-direction: column; }
.facts li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(35, 38, 45, 0.07); font-size: 12px; }
.facts li > span:first-child { color: var(--muted); }
.facts li > span:last-child { color: var(--ink); font-weight: 500; text-align: right; }
.facts .fact-ltv { flex-direction: column; gap: 5px; }
.fact-row { display: flex; justify-content: space-between; gap: 12px; }
.fact-row span:first-child { color: var(--muted); }
.fact-row span:last-child { color: var(--ink); font-weight: 500; }
.meter { height: 4px; border-radius: 999px; background: #dcdedd; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.3s ease; }
.meter.is-over > span { background: var(--err); }
.teaser { margin: auto -20px -18px; padding: 14px 20px 16px; background: var(--surface); border-top: 1px solid var(--glance-line); }
.teaser-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.teaser-rate { font-size: 28px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.15; margin-top: 4px; display: flex; align-items: baseline; gap: 10px; color: var(--ink); }
.teaser-rate small { font-size: 12px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.teaser-empty { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.5; }
.teaser-flags { min-width: 0; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--warn); overflow: hidden; text-overflow: ellipsis; }

/* Talk to Billie Adams about your loan. / Contact the TVC team → */
.help { padding: 2px 4px; font-size: 12.5px; line-height: 18px; color: var(--muted); }
.help strong { color: var(--ink-2); font-weight: 500; }
.help-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-weight: 500; color: var(--accent); text-decoration: none; }
.help-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.help-link svg { width: 13px; height: 13px; transition: transform 0.15s; }
.help-link:hover svg { transform: translateX(2px); }

/* ---------- About you: one card, a maroon panel beside the form ---------- */
.welcome { display: grid; grid-template-columns: 1.05fr 1fr; overflow: hidden; animation: rise 0.3s ease both; }
.welcome-side { background: linear-gradient(155deg, #9a1028 0%, var(--accent) 45%, #5c0512 100%); color: #fbf3f4; padding: 44px; display: flex; flex-direction: column; gap: 28px; position: relative; }
.welcome-side::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.1), transparent); pointer-events: none; }
.welcome-side .eyebrow { color: #f2c4cb; }
.welcome-side .eyebrow::before { background: #f2c4cb; }
.welcome-side h1 { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.06; letter-spacing: -0.01em; color: #fff; margin-top: 8px; max-width: 520px; }
.welcome-side p { color: #f0d6da; font-size: 14.5px; font-weight: 300; line-height: 1.6; margin-top: 16px; max-width: 420px; }
.perks { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; max-width: 440px; }
.perks li { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 12.5px; font-weight: 300; line-height: 18px; color: #ecc9cf; }
.perks strong { display: block; color: #fff; font-weight: 500; font-size: 14px; line-height: 20px; }
.perk-num { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: #f2c4cb; line-height: 20px; flex: none; }
.welcome-pane { display: flex; flex-direction: column; min-width: 0; }
.welcome-pane.is-entering > * { animation: pane-in 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes pane-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.welcome-form, .chooser { padding: 40px 44px 34px; display: flex; flex-direction: column; flex: 1; }
.welcome-form h2, .chooser h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.welcome-form .lede, .chooser .lede { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* Who's pricing today? Three cards in a 2×2 grid: a small maroon tag (Retail or Wholesale), the role in the serif, one
   plain line. The fourth spot is a quiet dashed "Not sure which one fits?" tile, so it doesn't read as a fourth choice.
   Hovering lifts a card and draws a blue edge; picking one turns it pastel blue with a ticked circle before moving on. */
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.role { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-height: 118px; padding: 16px 44px 16px 20px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); color: var(--ink); transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s, background 0.18s; }
.role-help { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 118px; padding: 16px 20px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--surface-2); font-size: 12.5px; line-height: 17px; color: var(--muted); }
.role-help strong { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-2); }
.role-help .help-link { margin-top: 8px; font-size: 13px; }
.role::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pick); transform: scaleY(0); transform-origin: bottom; transition: transform 0.22s ease; }
.role:hover { border-color: #c9cdd4; box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.role:hover::before, .role.is-on::before { transform: scaleY(1); }
.role:active { transform: translateY(0); }
.role-tag { font-size: 10px; font-weight: 700; line-height: 15px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.role-title { font-family: var(--serif); font-size: 23px; line-height: 1.15; letter-spacing: -0.01em; margin-top: 7px; }
.role-desc { font-size: 12.5px; line-height: 17px; color: var(--muted); margin-top: 5px; }
.role-mark { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; transition: border-color 0.18s; }
.role-mark svg { width: 13px; height: 13px; stroke-width: 2.5; }
.role:hover .role-mark { border-color: var(--pick); }
.role.is-on { border-color: var(--pick); background: var(--pick-tint); box-shadow: inset 0 0 0 1px var(--pick), var(--shadow-lift); }
.role.is-on .role-mark { background: var(--pick); border-color: var(--pick); color: #fff; animation: mark-pop 0.28s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.role.is-on .role-tag, .role.is-on .role-title { color: var(--pick-ink); }
.role.is-on .role-desc { color: var(--pick-muted); }
@keyframes mark-pop { from { transform: scale(0.4); } to { transform: scale(1); } }
.chooser .fine { margin-top: auto; padding-top: 18px; }
.chooser-back { margin-top: auto; padding-top: 18px; align-self: center; }

/* "Pricing as Borrower · Change" above their details */
.picked { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; height: 26px; padding: 0 2px 0 11px; margin-bottom: 12px; border-radius: 999px; background: var(--pick-tint); border: 1px solid var(--pick-soft); font-size: 12px; color: var(--pick-muted); }
.picked strong { color: var(--pick-ink); font-weight: 600; }
.picked .link-btn { font-size: 12px; height: 100%; padding: 0 9px; margin-left: 5px; border-left: 1px solid var(--pick-soft); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 24px; }
.form-grid .full { grid-column: 1 / -1; }
.welcome-form .btn { margin-top: 24px; }
.fine { color: var(--faint); font-size: 11.5px; margin-top: 12px; text-align: center; }

/* ---------- Notices and toast ---------- */
.notice { padding: 14px 18px; border-radius: var(--radius-sm); background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); margin-bottom: 20px; animation: rise 0.25s ease both; }
.notice strong { display: block; font-weight: 600; }
.notice.is-error { background: var(--err-soft); border-color: #f2c9c5; color: var(--err); }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 9px; font-size: 13px; box-shadow: var(--shadow-lift); z-index: 50; animation: rise 0.2s ease both; max-width: calc(100vw - 32px); }

.site-footer { border-top: 1px solid var(--line); background: #f2f2ef; padding: 10px 24px; text-align: center; color: var(--faint); font-size: 11px; line-height: 1.6; }

/* ---------- Address suggestions ---------- */
.combo { position: relative; }
.combo-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); max-height: 320px; overflow-y: auto; animation: rise 0.12s ease both; }
.combo-list li[role="option"] { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.combo-list li[role="option"] strong { font-weight: 500; font-size: 13px; line-height: 18px; color: var(--ink); }
.combo-list li[role="option"] small { color: var(--muted); font-size: 11.5px; line-height: 16px; }
.combo-list li.is-active, .combo-list li[role="option"]:hover { background: var(--pick-tint); }
.combo-status { display: flex; align-items: center; gap: 10px; padding: 9px 10px; font-size: 12px; color: var(--muted); }
.combo-status .spinner { width: 13px; height: 13px; border-width: 1.5px; }
li[role="option"] + .combo-status { border-top: 1px solid var(--line); margin-top: 4px; }
.combo-foot { padding: 6px 10px 3px; font-size: 10.5px; color: var(--faint); text-align: right; border-top: 1px solid var(--line); margin-top: 4px; }

/* Wizard screens are one fixed height on laptops and desktops; shorter windows (a 1366x768 laptop) get tighter spacing,
   so the whole page, footer included, fits without scrolling. */
@media (min-width: 981px) {
  .step-card { height: var(--wizard-h); min-height: 0; }
}
@media (min-width: 981px) and (max-height: 760px) {
  :root { --wizard-h: 452px; }
  .header-inner { height: 54px; }
  .brand img { height: 30px; }
  .page { padding-top: 14px; padding-bottom: 12px; }
  .intro { margin-bottom: 12px; }
  .intro h1 { font-size: 28px; }
  .eyebrow { margin-bottom: 4px; }
  .step-card { padding-top: 16px; }
  .sec-head { margin-bottom: 10px; }
  .step-card .sec-head ~ .sec-head { margin-top: 14px; margin-bottom: 10px; padding-top: 12px; }
  .row-2 + .row-2, .row-2 + .q { margin-top: 10px; }
  .input { height: 38px; }
  .state-line { min-height: 24px; margin-top: 3px; }
  .step-card > :nth-last-child(2) { margin-bottom: 12px; }
  .card-nav { padding-top: 10px; padding-bottom: 10px; }
  .card-nav .btn { height: 38px; }
  .check { padding: 8px 12px; }
  .summary { padding: 14px 18px; }
  .big-amount { font-size: 28px; }
  .facts { margin: 8px 0 10px; }
  .facts li { padding: 5px 0; }
  .teaser { margin: auto -18px -14px; padding: 10px 18px 12px; }
  .teaser-rate { font-size: 26px; }
  .site-footer { padding: 6px 24px; }
  .site-footer p + p { display: none; }
  .welcome-side { padding: 32px 40px; gap: 20px; }
  .welcome-side h1 { font-size: 38px; }
  .welcome-side p { margin-top: 12px; }
  .perks li { padding: 9px 0; }
  .welcome-form, .chooser { padding: 22px 40px 16px; }
  .welcome-form h2, .chooser h2 { font-size: 25px; }
  .picked { margin-bottom: 8px; }
  .roles { margin-top: 18px; gap: 10px; }
  .role, .role-help { min-height: 108px; padding-top: 14px; padding-bottom: 14px; }
  .role-title { font-size: 21px; margin-top: 5px; }
  .form-grid { margin-top: 16px; gap: 10px 18px; }
  .sms-optin small { line-height: 14px; }
  .welcome-form .btn { margin-top: 18px; height: 42px; }
  .fine { margin-top: 10px; }
}

/* ---------- Small screens ---------- */
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .step-card { min-height: 0; }
  .intro { flex-direction: column; align-items: flex-start; gap: 12px; }
  .welcome { grid-template-columns: 1fr; }
  .welcome-pane[data-pane="choose"] { order: -1; } /* the choice comes first, without scrolling past the panel */
  .welcome-side { padding: 32px 28px; }
  .welcome-side h1 { font-size: 34px; }
  .perks { margin-top: 4px; }
}
@media (max-width: 700px) {
  .header-inner { height: 56px; padding: 0 16px; gap: 12px; }
  .brand img { height: 28px; }
  .brand-divider, .brand-name, .rates-live, .header-divider, .whoami, .role-chip-as { display: none !important; }
  .header-right { gap: 8px; }
  .page { padding: 16px 16px 32px; }
  .intro h1 { font-size: 26px; }
  .stepper { overflow-x: auto; max-width: 100%; }
  .stepper li + li::before { margin: 0 4px 2px; }
  .step-btn { padding-right: 4px; gap: 6px; }
  .step-btn:not(.is-active) .step-label { display: none; }
  .step-card { padding: 18px 18px 0; }
  .step-card .sec-head ~ .sec-head { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
  .row-2, .form-grid { grid-template-columns: 1fr; }
  .ltv-picks { flex-direction: column; align-items: stretch; gap: 6px; }
  .card-nav { margin: 24px -18px 0; padding: 12px 18px; position: sticky; bottom: 0; z-index: 5; }
  .card-nav .note { display: none; }
  .card-nav .btn-primary { flex: 1; }
  .welcome-side { padding: 26px 20px; gap: 20px; }
  .welcome-side h1 { font-size: 30px; }
  .welcome-form, .chooser { padding: 26px 20px; }
  .welcome-form h2, .chooser h2 { font-size: 24px; }
  .roles { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .role, .role-help { min-height: 0; }
  .role-title { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Your rates ----------
   The same frame as the wizard screens: title and steps on top, then one big card (your rate, every option, Back)
   and a 300px card beside it with two tabs, Term sheet and Adjust. Both cards are the one wizard height. */
.rates-card { padding-top: 20px; }
.rates-card > :nth-last-child(2) { margin-bottom: 14px; }
/* "Talk to Billie Adams about your loan. Contact the TVC team →" beside Back */
.nav-help { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 10px; padding: 0; font-size: 12px; text-align: right; }
.nav-help .help-link { margin-top: 0; }

/* Your rate and what is paid at closing */
.rq { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 22px; align-items: center; }
.rq-left { min-width: 0; }
.rq-label { display: flex; align-items: center; gap: 8px; height: 18px; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.rq-rate { font-size: 50px; line-height: 1; font-weight: 300; letter-spacing: -0.045em; margin-top: 6px; color: var(--ink); height: 50px; }
.rq-rate .pct { font-size: 26px; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.rq-pay { margin-top: 8px; font-size: 12.5px; color: var(--muted); display: flex; align-items: baseline; gap: 4px; min-height: 22px; }
.rq-pay strong { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.rq-meta { margin-top: 3px; font-size: 12px; color: var(--muted); min-height: 18px; }
.rq-left.is-error .rq-pay { font-size: 13px; color: var(--err); }
.delta { height: 18px; padding: 0 7px; border-radius: 999px; font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 500; display: inline-flex; align-items: center; animation: rise 0.2s ease both; }
.delta.is-down { background: var(--ok-soft); color: var(--ok); }
.delta.is-up { background: var(--err-soft); color: var(--err); }
.tick-fade { animation: tickfade 0.15s ease; }
@keyframes tickfade { from { opacity: 0.35; } to { opacity: 1; } }

.cost { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; align-self: center; }
.cost-label { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; line-height: 16px; }
.cost-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; column-gap: 8px; align-items: center; height: 28px; font-size: 12.5px; }
.cost-row > span:first-child { color: var(--muted); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; min-width: 0; overflow: hidden; }
.cost-row > span:nth-child(2), .cost-row > span:nth-child(3) { text-align: right; font-weight: 500; white-space: nowrap; }
.cost-row.total { border-top: 1px solid var(--line-2); margin-top: 2px; }
.cost-row.total > span:first-child { color: var(--ink); font-weight: 500; }
.cost-row.total > span:nth-child(2), .cost-row.total > span:nth-child(3) { font-size: 14px; font-weight: 600; }
.fee-name { display: inline-flex; align-items: center; gap: 2px; }
.fee-step { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); overflow: hidden; }
.fee-step button { border: 0; background: transparent; width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink-2); touch-action: manipulation; }
.fee-step button svg { width: 13px; height: 13px; pointer-events: none; }
.fee-step button:hover { background: var(--accent-tint); color: var(--accent-ink); }
.fee-step button[aria-disabled="true"] { color: var(--line-2); background: transparent; cursor: not-allowed; }
.fee-step input { width: 46px; height: 24px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-size: 12.5px; padding: 0; background: transparent; }
.fee-step input:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-tint); }
.credit { color: var(--ok); font-weight: 500; }
/* Brokers: the asterisk on "Paid at closing*" is a link; a click (or hover) opens its note in the tip popup */
.fn-mark { border: 0; background: none; padding: 0 3px; margin-left: 1px; height: 16px; border-radius: 4px; vertical-align: top; font-size: 14px; font-weight: 700; line-height: 18px; color: var(--accent); cursor: pointer; }
.fn-mark:hover, .fn-mark[aria-expanded="true"] { color: var(--accent-ink); background: var(--accent-tint); }

/* The line under the rate: the savings sentence, or a warning with its fix right next to it */
.rq-strip { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-height: 32px; margin-top: 12px; padding: 0 2px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.rq-strip:empty { visibility: hidden; }
.rq-strip .strip-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-strip .strip-text.strip-lead { flex: none; font-weight: 500; }
.rq-strip .link-btn { flex: none; font-size: 12.5px; }
.rq-strip.is-warn, .rq-strip.is-err { border-top: 0; border-radius: 7px; padding: 4px 12px; }
.rq-strip.is-warn { background: var(--warn-soft); color: #5f3d08; box-shadow: inset 0 0 0 1px var(--warn-line); }
.rq-strip.is-err { background: var(--err-soft); color: var(--err); }
.fix-check { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 12.5px; font-weight: 500; color: var(--ink); cursor: pointer; padding: 3px 10px 3px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--warn-line); }
.fix-check:hover { border-color: var(--pick); }
.fix-check input { width: 14px; height: 14px; margin: 0; accent-color: var(--pick); cursor: pointer; }

/* Every rate as a tile: one click to choose. Rows are balanced (10 rates are 5 + 5); --cols is set by the page. */
.opts { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 10px -28px 0; padding: 10px 28px 0; border-top: 1px solid var(--line); container: opts / inline-size; }
.opts-head { display: flex; align-items: baseline; gap: 10px; min-height: 22px; }
.opts-head h2 { font-size: 15px; font-weight: 600; flex: none; }
.opts-help { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opts-head .link-btn { flex: none; font-size: 12.5px; }
/* "All rates" is about choosing a rate, so it's a small pastel-blue pill, set apart from the maroon "Why this rate?" */
.opts-all { flex: none; align-self: center; height: 22px; padding: 0 10px; border: 1px solid var(--pick-soft); border-radius: 999px; background: var(--pick-tint); color: var(--pick-ink); font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; transition: background 0.12s, border-color 0.12s; }
.opts-all:hover { background: var(--pick-soft); border-color: var(--pick); }
.opts-all:focus-visible { outline-color: var(--pick); }
.updating { display: none; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); flex: none; }
.updating .spinner { width: 12px; height: 12px; border-width: 1.5px; }
.is-updating .updating { display: inline-flex; }
.is-updating .rq-rate, .is-updating .rq-pay, .is-updating .cost, .is-updating .tiles { opacity: 0.55; transition: opacity 0.15s; }
.is-stale .rq-rate, .is-stale .rq-pay, .is-stale .cost, .is-stale .tiles { opacity: 0.5; }
/* Six rates at most, in two rows of three. The two rows always take the same space, so the card keeps its height
   whether a menu has 4 rates or 15 (the rest are under "All rates"). */
.tiles { --tile-h: 86px; flex: none; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-auto-rows: var(--tile-h); gap: 8px; min-height: calc(var(--tile-h) * 2 + 8px); align-content: start; margin-top: 10px; }
/* Each tile: the rate, its price at closing with the points ("+$3,000 (1 pt)"), and the monthly payment.
   The chosen one is pastel blue (--pick), like every other chosen thing. */
.tile { position: relative; border: 1px solid var(--line-2); background: var(--surface); border-radius: 8px; padding: 12px 14px 10px; text-align: left; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; transition: border-color 0.12s, background 0.12s, box-shadow 0.12s, transform 0.12s; }
.tile:hover { border-color: #c4c9d0; background: var(--surface-2); }
.tile:active { transform: scale(0.98); }
.tile:focus-visible { outline-color: var(--pick); }
.tile.is-on { border-color: var(--pick); background: var(--pick-tint); box-shadow: inset 0 0 0 1px var(--pick); }
.t-rate { font-size: 18px; line-height: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.t-cost { max-width: 100%; margin-top: 2px; font-size: 12.5px; line-height: 18px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-pts { font-weight: 400; }
.t-pay { font-size: 11.5px; line-height: 16px; color: var(--muted); white-space: nowrap; }
.t-bar { position: absolute; left: 14px; bottom: 5px; height: 2px; border-radius: 2px; width: calc((100% - 28px) * var(--w, 0)); background: var(--line); }
.tile.is-on .t-rate, .tile.is-on .t-cost { color: var(--pick-ink); }
.tile.is-on .t-pay { color: var(--pick-muted); }
.tile.is-on .t-bar { background: var(--pick); }
.tiles-empty { grid-column: 1 / -1; color: var(--muted); font-size: 13px; padding: 40px 0; text-align: center; }
/* Narrower cards: "$6,750 Spread/Premium" without its points, which "Paid at closing" shows */
@container opts (max-width: 700px) {
  .t-cost .credit .t-pts { display: none; }
}
@container opts (max-width: 359px) {
  .tile { padding-left: 9px; padding-right: 9px; } /* three across on a phone: room for "$6,750 credit" (or Spread/Premium, which wraps) */
  .t-bar { left: 9px; width: calc((100% - 18px) * var(--w, 0)); }
}

/* "All 15 rates": every rate in one list; the chosen one is pastel blue */
.all-rates { margin: 10px 22px 0; max-height: min(400px, 56vh); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.all-rate { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; width: 100%; padding: 8px 12px; border: 0; border-top: 1px solid var(--line); background: var(--surface); text-align: left; font-size: 13px; color: var(--ink-2); }
.all-rate:first-child { border-top: 0; }
.all-rate > span:first-child { font-weight: 500; color: var(--ink); }
.all-rate > span:last-child { color: var(--muted); font-size: 12px; }
.all-rate:hover { background: var(--surface-2); }
.all-rate.is-on { background: var(--pick-tint); box-shadow: inset 3px 0 0 var(--pick); }
.all-rate.is-on > span { color: var(--pick-ink); }

/* Skeletons while the first rates load */
.skel, .skel-tile { background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: 6px; }
.skel { display: inline-block; }
.skel-rate { width: 150px; height: 44px; }
.skel-line { width: 160px; height: 14px; }
.skel-tile { border: 0; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }

/* The card beside the rates: Term sheet and Adjust tabs. Both panels sit in the same spot (the hidden one is
   invisible and inert), so the card is as tall as the taller tab and never changes height when switching. */
.side-card { flex: 1; min-height: 0; padding: 16px 18px; display: flex; flex-direction: column; animation: rise 0.25s ease both; }
.side-tabs { flex: none; height: 32px; margin: 0 0 20px; }
.side-tabs button { font-size: 12.5px; }
.side-panels { flex: 1; min-height: 0; display: grid; }
.side-panels > [role="tabpanel"] { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; }
.side-panels > .is-off { visibility: hidden; }
@media (min-width: 981px) {
  .side-card { height: var(--wizard-h); }
}

/* Adjust: "← Edit loan & property" (and Reset once something changed), then the what-ifs */
.pz-links { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 18px; margin-bottom: 12px; }
.pz-links .link-btn { font-size: 12px; }
.pz-row { margin: 8px -8px 0; padding: 0 8px; border-radius: 8px; }
.pz-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.pz-pair .pz-label { height: 20px; }
.pz-pair .pz-sub:empty { display: none; }
select.input-pz { height: 34px; margin-top: 2px; padding: 0 26px 0 10px; font-size: 13px; background-position: right 8px center; }
.pz-row.is-flash { animation: rowflash 1.6s ease; }
@keyframes rowflash { 0%, 40% { background: var(--pick-tint); box-shadow: 0 0 0 1px var(--pick-soft); } 100% { background: transparent; box-shadow: none; } }
.pz-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 20px; }
.pz-top label, .pz-label { font-size: 12.5px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 2px; }
.readout { width: 104px; border: 0; border-bottom: 1px dashed var(--line-2); background: transparent; font-size: 14px; font-weight: 500; text-align: right; padding: 0 0 1px; color: var(--ink); border-radius: 0; }
.readout.readout-sm { width: 48px; }
.readout:hover { border-bottom-color: var(--faint); }
.readout:focus { outline: none; border-bottom: 1px solid var(--accent); box-shadow: 0 2px 0 -1px var(--ring); }
.pz-sub { font-size: 11px; line-height: 15px; min-height: 15px; color: var(--muted); margin-top: 1px; }
.pz-sub.is-warn { color: var(--warn); }
.pz-switch { display: flex; align-items: center; gap: 4px; height: 26px; }
/* The confirmations sit at the bottom of the Adjust tab, where the Download button is on the Term sheet tab. */
.pz-elig { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 10px; padding-bottom: 2px; box-shadow: inset 0 1px 0 var(--line); border-radius: 0; }
.pz-elig.is-flash { border-radius: 8px; }

.rng { position: relative; margin-top: 2px; touch-action: pan-y; }
.rng input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; --p: 0; }
.rng input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: linear-gradient(to right, var(--accent) calc(8px + (100% - 16px) * var(--p)), var(--line-2) 0); }
.rng input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border-radius: 50%; background: #fff; border: 1.5px solid var(--accent); box-shadow: 0 1px 3px rgba(31, 30, 29, 0.18); transition: transform 0.12s; }
.rng input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.rng input[type="range"]::-moz-range-track { height: 3px; border-radius: 999px; background: var(--line-2); }
.rng input[type="range"]::-moz-range-progress { height: 3px; border-radius: 999px; background: var(--accent); }
.rng input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1.5px solid var(--accent); }
.rng input[type="range"]:focus-visible { outline: none; }
.rng input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-ink); }
.rng input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--accent-ink); }
.rng input[type="range"]:disabled { opacity: 0.5; cursor: not-allowed; }
.rng .ticks { position: relative; height: 12px; margin: 0 8px; }
.rng .ticks:not(:has(span)) { height: 5px; } /* score marks have no labels */
.rng .ticks i { position: absolute; left: calc(var(--t) * 100%); top: 0; width: 1px; height: 4px; background: var(--line-2); }
.rng .ticks i span { position: absolute; top: 4px; left: 0; transform: translateX(-50%); font: 10px/1 var(--sans); color: var(--muted); font-style: normal; white-space: nowrap; }

.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 500; color: var(--ink); cursor: pointer; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 32px; height: 18px; border-radius: 999px; background: var(--line-2); position: relative; flex: none; transition: background 0.15s; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.15s; }
.switch input:checked + .track { background: var(--pick); }
.switch input:checked + .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px var(--ring); }

/* Term sheet tab */
.ts .lede { color: var(--muted); font-size: 11.5px; }
.ts-summary { margin-top: 8px; padding: 9px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; line-height: 18px; display: flex; flex-direction: column; color: var(--ink-2); }
.ts-summary strong { font-size: 14px; font-weight: 600; line-height: 21px; color: var(--ink); }
.ts .q { margin-top: 10px; }
.ts .lbl { margin-bottom: 5px; }
.ts .input { height: 36px; font-size: 13px; padding: 0 10px; }
.ts .btn-primary { margin-top: auto; height: 42px; }
.ts .ts-borrower { margin-bottom: 14px; }
.ts-fee { display: flex; align-items: center; gap: 8px; margin: -2px 0 14px; font-size: 12px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.ts-fee input { width: 14px; height: 14px; margin: 0; accent-color: var(--pick); flex: none; }
.sheet-foot { color: var(--muted); font-size: 11.5px; text-align: center; margin-top: 8px; }
.dropzone { border: 1px dashed var(--line-2); border-radius: var(--radius-sm); padding: 9px 12px; min-height: 48px; display: flex; align-items: center; gap: 10px; background: var(--surface-2); cursor: pointer; width: 100%; text-align: left; transition: border-color 0.15s, background 0.15s; }
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-tint); }
.dropzone strong { display: block; font-size: 12.5px; font-weight: 500; }
.dropzone span span { font-size: 11px; color: var(--muted); }
.logo-preview { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; display: flex; align-items: center; gap: 10px; }
.logo-preview .frame { flex: 1; min-width: 0; height: 38px; display: flex; align-items: center; justify-content: center; background: repeating-conic-gradient(#f4f2ec 0% 25%, #fff 0% 50%) 50% / 14px 14px; border-radius: 6px; padding: 4px; }
.logo-preview img { max-width: 100%; max-height: 30px; display: block; }
.logo-preview .actions { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.logo-preview .link-btn { font-size: 11.5px; }
.logo-preview.is-fixed .frame { background: var(--surface-2); }

/* Tips and dialogs */
.tip-btn { border: 0; background: none; width: 18px; height: 18px; padding: 0; margin-left: 2px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--faint); vertical-align: middle; flex: none; }
.tip-btn svg { width: 13px; height: 13px; pointer-events: none; }
.tip-btn:hover, .tip-btn[aria-expanded="true"] { color: var(--accent-ink); background: var(--accent-tint); }
.tip { position: fixed; z-index: 60; max-width: 260px; padding: 10px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); font-size: 12px; line-height: 1.5; color: var(--ink-2); animation: rise 0.15s ease both; }
.dlg { border: 0; border-radius: var(--radius); padding: 0; width: min(480px, calc(100vw - 32px)); box-shadow: var(--shadow-lift); color: var(--ink); }
.dlg::backdrop { background: rgba(31, 30, 29, 0.32); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 6px; }
.dlg-head h2 { font-size: 17px; font-weight: 600; }
.icon-x { border: 0; background: none; width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); }
.icon-x:hover { background: var(--surface-3); }
.icon-x svg { width: 17px; height: 17px; }
.dlg-list { list-style: none; margin: 0; padding: 4px 22px 4px; }
.dlg-list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.dlg-list li span:first-child { color: var(--muted); }
.dlg-list li.sub-total, .dlg-list li.total { font-weight: 500; }
.dlg-list li.sub-total span:first-child, .dlg-list li.total span:first-child { color: var(--ink); }
.dlg-list li.total { border-top: 1px solid var(--line-2); font-weight: 600; }
.dlg-fixes { list-style: none; margin: 4px 0 0; padding: 0 22px; }
.dlg-fixes li { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.dlg-fixes li:first-child { border-top: 0; }
.dlg-bullets { margin: 6px 0 0; padding: 0 22px 0 40px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.dlg-bullets li + li { margin-top: 6px; }
.dlg-text { padding: 10px 22px 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.dlg-foot { margin-top: 14px; padding: 12px 22px 16px; font-size: 11.5px; color: var(--muted); background: var(--surface-2); border-top: 1px solid var(--line); }
.dlg-actions { display: flex; justify-content: flex-end; padding: 16px 22px 20px; }

/* Phone bottom bar */
.mobile-bar { display: none; }
.mobile-bar.flash .mb-text { animation: barflash 0.4s ease; }
@keyframes barflash { from { background: var(--accent-tint); } to { background: transparent; } }

/* Laptops and desktops: rows keep fixed heights so both cards fit the one wizard height. */
@media (min-width: 981px) {
  .rng input[type="range"] { height: 20px; }
  .rq-pay { line-height: 22px; }
  .rq-pay strong { line-height: 22px; }
  .opts-head { height: 22px; line-height: 22px; }
}
/* Short laptop windows (a 1366x768 screen): the same squeeze screens 1 and 2 get, so the cards stay 452px. */
@media (min-width: 981px) and (max-height: 760px) {
  .rates-card { padding-top: 14px; }
  .rates-card > :nth-last-child(2) { margin-bottom: 10px; }
  .rq-rate { font-size: 42px; height: 42px; margin-top: 4px; }
  .rq-pay { margin-top: 4px; }
  .rq-meta { margin-top: 1px; }
  .cost { padding: 6px 12px; }
  .cost-row { height: 24px; }
  .rq-strip { margin-top: 8px; min-height: 30px; }
  .opts { margin-top: 10px; padding-top: 8px; }
  .tiles { --tile-h: 78px; margin-top: 8px; gap: 6px; min-height: calc(var(--tile-h) * 2 + 6px); }
  .tile { padding: 9px 12px 8px; }
  .t-rate { font-size: 17px; line-height: 21px; }
  .t-cost { font-size: 12px; line-height: 17px; }
  .t-pay { font-size: 11px; line-height: 15px; }
  .side-card { padding: 14px 16px; }
  .side-tabs { margin-bottom: 16px; }
  .pz-row { margin-top: 6px; }
  .ts .q { margin-top: 8px; }
  .ts .ts-borrower { margin-bottom: 10px; }
  .ts-fee { margin-bottom: 10px; }
}

/* Small screens: the cards stack (rates first) and the side card grows to fit the taller tab */
@media (max-width: 700px) {
  .opts { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
  .rates-card .card-nav { position: static; }
}

/* Phone: one column, the live rate and the PDF button stay pinned at the bottom */
@media (max-width: 899px) {
  .page.is-dash ~ .site-footer { padding-bottom: calc(24px + 96px + env(safe-area-inset-bottom)); }
  .ts .btn-primary { height: 48px; }
  select.input-pz { height: 40px; font-size: 16px; }
  .rq { grid-template-columns: 1fr; row-gap: 12px; }
  .rq-rate { font-size: 44px; height: 44px; }
  .cost-row { height: 36px; }
  .fee-step button { width: 36px; height: 36px; }
  .fee-step input { height: 36px; font-size: 16px; }
  .rq-strip { flex-wrap: wrap; padding: 6px 10px; }
  .rq-strip .strip-text { white-space: normal; }
  .opts-head { flex-wrap: wrap; }
  .opts-help { flex-basis: 100%; order: 3; white-space: normal; }
  .tiles { grid-auto-rows: auto; min-height: 0; }
  .tile { min-height: 64px; }
  .t-cost { white-space: normal; } /* narrow tiles: the points wrap under the amount */
  .rng input[type="range"] { height: 32px; }
  .rng input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10.5px; }
  .rng input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }
  .seg { height: 40px; }
  .seg button { font-size: 13px; }
  .mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(31, 30, 29, 0.06); backdrop-filter: blur(8px); }
  .mobile-bar:empty { display: none; }
  .mb-text { display: flex; flex-direction: column; border-radius: 8px; padding: 2px 4px; }
  .mb-text strong { font-size: 19px; font-weight: 500; line-height: 1.1; }
  .mb-text span { font-size: 11.5px; color: var(--muted); }
  .mobile-bar .btn { height: 44px; padding: 0 16px; }
  .is-dash ~ .toast, .page.is-dash + .site-footer + .toast { bottom: 84px; }
}
@media (max-width: 699px) {
  .dlg { margin: auto 0 0; width: 100%; max-width: none; border-radius: 14px 14px 0 0; max-height: 80vh; overflow: auto; padding-bottom: env(safe-area-inset-bottom); }
}