/* Canopy — Buttonwood Finance. Brand: Buttonwood orange leaf on deep slate, Manrope (matches the partner portal). */
:root {
  --night: #17323A;       /* deep slate-teal: top bar, hero, headings */
  --night-2: #21454E;
  --orange: #F68C47;      /* Buttonwood leaf orange: primary actions, active states */
  --orange-2: #E8782F;
  --orange-ink: #A9521A;  /* orange that passes contrast as text on white */
  --orange-wash: #FEF1E7;
  --ink: #1D2B30;
  --muted: #5F6D72;
  --paper: #F3F5F5;
  --sheet: #FFFFFF;
  --line: #DDE3E4;
  --leaf: var(--night);   /* legacy name used in page styles */
  --brass: var(--orange);
  --fit: #23784A;   --fit-bg: #E1F2E7;
  --check: #8A5A06; --check-bg: #FCEFCF;
  --fail: #B23A2F;  --fail-bg: #F9E1DD;
  --listed-bg: #ECF0E9;
  --radius-s: 8px; --radius-m: 14px;
  --shadow: 0 1px 2px rgba(18,63,61,.06), 0 8px 24px -12px rgba(18,63,61,.18);
  --display: "Manrope", system-ui, sans-serif;
  --body: "Manrope", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 15px/1.55 var(--body); }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.02em; color: var(--night); }
h1 { font-size: 2.1rem; font-weight: 800; } h2 { font-size: 1.3rem; font-weight: 800; } h3 { font-size: 1.04rem; font-weight: 700; }
p { margin: 0 0 1em; max-width: 72ch; }
a { color: var(--orange-ink); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
[hidden] { display: none !important; }

/* ---------- buttons & inputs ---------- */
.btn { font: 700 14px/1 var(--body); border: 1.5px solid var(--orange); background: var(--orange); color: var(--night); padding: 12px 18px;
  border-radius: 999px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; text-decoration: none; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--orange-2); border-color: var(--orange-2); }
.btn.ghost { background: transparent; color: var(--night); border-color: #C4CED0; }
.btn.ghost:hover { background: #fff; border-color: var(--night); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--muted); padding: 8px 10px; }
.btn.quiet:hover { color: var(--night); background: transparent; }
.btn.danger { background: transparent; color: var(--fail); border-color: #E8BDB7; }
.btn.danger:hover { background: var(--fail-bg); }
.btn[disabled] { opacity: .55; cursor: progress; }
label { display: block; font-weight: 700; font-size: 13px; margin: 0 0 5px; color: var(--night); }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; font: 500 15px var(--body); color: var(--ink); background: #fff; border: 1.5px solid #CFD8DA; border-radius: var(--radius-s); padding: 10px 12px; }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--orange); outline: 3px solid rgba(246,140,71,.2); }
.field { margin-bottom: 14px; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.field.from-docs input, .field.from-docs select { background: var(--orange-wash); border-color: #F3B88E; }
.error { color: var(--fail); font-size: 14px; font-weight: 600; }

/* ---------- top bar ---------- */
.top { background: var(--night); color: #fff; }
.top .in { max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 28px; min-height: 64px; flex-wrap: wrap; }
.brand { font: 800 18px var(--display); color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; }
.brand img { height: 30px; width: auto; display: block; }
.brand small { font: 600 11px var(--body); color: #A9C4BD; letter-spacing: .02em; display: block; margin-top: 1px; }
.top nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; align-self: stretch; }
.top nav a { color: #CFE0DB; text-decoration: none; padding: 0 12px; font-weight: 600; display: flex; align-items: center; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.top nav a:hover { color: #fff; }
.top nav a[aria-current=page] { color: #fff; border-bottom-color: var(--orange); }
.top .who { font-size: 13px; color: #CFE0DB; display: flex; gap: 10px; align-items: center; }
.top .who button { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; padding: 8px 14px; }
.top .who button:hover { border-color: #fff; }

main.wrap { max-width: 1280px; margin: 0 auto; padding: 28px 20px 80px; }
.panel { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow); }
.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.grid { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* ---------- steps (a real sequence) ---------- */
.steps { display: flex; gap: 0; margin: 0 0 22px; padding: 0; list-style: none; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.steps li { padding: 10px 18px 12px 0; margin-right: 18px; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.steps li b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 12px; margin-right: 8px; }
.steps li.on { color: var(--night); border-color: var(--orange); }
.steps li.done { color: var(--ink); }
.steps li.done b { background: var(--night); color: #fff; border-color: var(--night); }
.steps li.on b { background: var(--orange); color: var(--night); border-color: var(--orange); }

/* ---------- uploads ---------- */
.drop { border: 2px dashed #BFCBCD; border-radius: var(--radius-m); padding: 36px 24px; text-align: center; background: #F8FAF6; cursor: pointer; transition: background .15s, border-color .15s; }
.drop:hover { border-color: var(--orange); }
.drop.over { background: var(--orange-wash); border-color: var(--orange); }
.drop strong { display: block; font: 800 17px var(--display); margin-bottom: 4px; color: var(--night); }
.docs { list-style: none; margin: 16px 0 0; padding: 0; }
.docs li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.docs .kind { font-size: 12px; color: var(--muted); }
.state { font-size: 13px; font-weight: 600; white-space: nowrap; }
.state.ok { color: var(--fit); } .state.busy { color: var(--check); } .state.bad { color: var(--fail); }

/* ---------- pills & status colours ---------- */
.pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.pill.fit { background: var(--fit-bg); color: var(--fit); }
.pill.check { background: var(--check-bg); color: var(--check); }
.pill.fail { background: var(--fail-bg); color: var(--fail); }
.pill.listed { background: var(--listed-bg); color: var(--muted); }
.flag { padding: 9px 12px; border-left: 4px solid var(--check); background: #FFFBEF; margin-bottom: 8px; border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.flag.high { border-color: var(--fail); background: #FDF3F1; }
.flag.low { border-color: #9AAAA5; background: #F6F8F7; }
.flag .ev { font-size: 13px; color: var(--muted); }

/* ---------- top 3 ---------- */
.top3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin-bottom: 8px; }
.pick { background: var(--sheet); border: 1px solid var(--line); border-top: 5px solid var(--fit); border-radius: var(--radius-m); padding: 20px 22px; box-shadow: var(--shadow); }
.pick.check { border-top-color: #D9A92B; }
.pick .rank { font: 700 13px var(--display); color: var(--muted); }
.pick h3 { font-size: 1.3rem; margin: 2px 0 6px; }
.pick .headline { font-weight: 600; margin-bottom: 10px; }
.pick ul { margin: 0 0 10px; padding-left: 18px; } .pick li { margin-bottom: 4px; }
.pick h4 { font-size: 13px; margin: 12px 0 4px; color: var(--muted); }
.pick .contact { font-size: 13px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }

/* ---------- results table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-m); background: #fff; }
table.results { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.results th { text-align: left; font: 650 12.5px var(--body); color: var(--muted); padding: 9px 10px; background: #F3F6F5; border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.results td { padding: 9px 10px; border-bottom: 1px solid #E7ECEA; vertical-align: top; }
.results tr.fit td:first-child { box-shadow: inset 4px 0 var(--fit); }
.results tr.check td:first-child { box-shadow: inset 4px 0 #D9A92B; }
.results tr.fail td:first-child { box-shadow: inset 4px 0 var(--fail); }
.results tr.fail { color: #55605F; }
.results td.c-P { background: var(--fit-bg); } .results td.c-C { background: var(--check-bg); } .results td.c-F { background: var(--fail-bg); }
.results .pol { max-width: 260px; white-space: pre-wrap; max-height: 7.5em; overflow: hidden; }
.results tr.open .pol { max-height: none; }
.why span { display: inline-block; margin: 0 8px 3px 0; }
.why .f { color: var(--fail); } .why .c { color: var(--check); } .why .u { color: var(--muted); } .why .t { font-weight: 650; } .why .o { color: var(--fit); }
.filters { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.filters button { font: 600 13px var(--body); border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.filters button[aria-pressed=true] { background: var(--night); color: #fff; border-color: var(--night); }

/* ---------- features ---------- */
.ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; }
.ticks label { font-weight: 500; font-size: 14px; display: flex; gap: 8px; align-items: center; padding: 4px 0; cursor: pointer; }
.ticks input { width: 17px; height: 17px; accent-color: var(--leaf); }

/* ---------- history ---------- */
table.list { width: 100%; border-collapse: collapse; }
.list td, .list th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.list tr[data-href] { cursor: pointer; } .list tr[data-href]:hover { background: #F2F6F4; }

/* ---------- busy overlay ---------- */
.working { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--orange-wash); border-radius: var(--radius-s); margin: 12px 0; font-weight: 600; color: var(--night); }
.spin { width: 18px; height: 18px; border: 2.5px solid #F9C9A6; border-top-color: var(--orange-2); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 11px 16px;
  border-radius: var(--radius-s); opacity: 0; transition: .2s; pointer-events: none; max-width: 90vw; z-index: 10; }
.toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.bad { background: var(--fail); }

/* ---------- admin ---------- */
.tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tabs button { font: 700 14px var(--body); border: 1.5px solid var(--line); background: #fff; padding: 9px 16px; border-radius: 999px; cursor: pointer; color: var(--night); }
.tabs button[aria-selected=true] { background: var(--night); color: #fff; border-color: var(--night); }
.split { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.lender-list { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-m); background: #fff; }
.lender-list button { all: unset; display: flex; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid #EDF1EF; }
.lender-list button:hover, .lender-list button[aria-current=true] { background: #EAF2EE; }
.tier { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px; margin-bottom: 12px; background: #FBFCFB; }
.tier .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tier .field { margin-bottom: 10px; }
.pol-edit textarea { min-height: 60px; font-size: 14px; }
details summary { cursor: pointer; font-weight: 650; padding: 6px 0; }

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  h1 { font-size: 1.6rem; }
  main.wrap { padding: 20px 16px 60px; }
  .panel { padding: 16px; }
  .docs li { grid-template-columns: 1fr auto; }
}
@media print {
  .top, .steps, .no-print, .filters, .btn { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .panel, .pick { border-color: #bbb; break-inside: avoid; }
  .results .pol { max-height: none; }
  main.wrap { padding: 0; max-width: none; }
}
.results td:nth-child(3) { min-width: 250px; }
.results td:first-child { min-width: 170px; }
.results .pol { min-width: 150px; }
/* estimated tier and rate on each pick */
.pick dl.rate, .assess dl.rate { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 6px 0 12px; padding: 14px; background: #F2F6F1; border-radius: var(--radius-s); font-size: 14px; }
.pick dl.rate dt, .assess dl.rate dt { color: var(--muted); }
.pick dl.rate dd, .assess dl.rate dd { margin: 0; font-weight: 650; text-align: right; }
.names { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.name-list { list-style: none; padding: 0; margin: 0; columns: 2 140px; }
.name-list li { padding: 3px 0; break-inside: avoid; }
/* Admin → Rates */
table.rates input, table.rates select { min-width: 90px; padding: 6px 8px; font-size: 14px; }
table.rates textarea { min-width: 200px; min-height: 44px; font-size: 13px; }
.suggested { background: #FFF6DA !important; border-color: #D9A92B !important; }

/* emphasis on the estimated customer rate */

.pick .rank { color: var(--orange-ink); letter-spacing: .01em; }
.list tr[data-href]:hover { background: #F6F8F8; }
.lender-list button:hover, .lender-list button[aria-current=true] { background: var(--orange-wash); }
.table-wrap { box-shadow: var(--shadow); }
.pick dl.rate dd .sub { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.panel.summary { margin-top: 20px; }
.summary .sum-main p { font-size: 16px; max-width: 80ch; }
.summary .sum-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 28px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
.summary .sum-cols ul { margin: 0; padding-left: 18px; }
.summary .sum-cols h3 { font-size: 14px; }
main.wrap:focus { outline: none; }
@media (max-width: 760px) {
  .top .in { gap: 0 12px; padding: 10px 16px 0; }
  .top .brand { flex: 1; }
  .top nav { order: 3; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 8px -16px 0; padding: 0 8px; }
  .top nav a { padding: 12px 10px 9px; white-space: nowrap; }
  .top .who span { display: none; }
}
/* review: what the documents show, as dot points */
.docs-show .lead { font-size: 16px; font-weight: 600; color: var(--night); margin: 4px 0 14px; }
.docs-show .kp { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 28px; padding-top: 14px; border-top: 1px solid var(--line); margin-top: 6px; }
.docs-show .kp.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 14px; }
.docs-show h3 { font-size: 13.5px; margin: 0 0 6px; }
.docs-show ul { margin: 0 0 8px; padding-left: 18px; }
.docs-show li { margin-bottom: 4px; }
.docs-show ul.flags { list-style: none; padding: 0; }
.docs-show ul.flags li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; padding: 6px 0; border-bottom: 1px solid #EEF2F2; }
.docs-show .ev { display: block; font-size: 12.5px; color: var(--muted); }
.sev { font-size: 11.5px; font-weight: 800; text-align: center; border-radius: 999px; padding: 2px 0; }
.sev.high { background: var(--fail-bg); color: var(--fail); } .sev.medium { background: var(--check-bg); color: var(--check); } .sev.low { background: var(--listed-bg); color: var(--muted); }
.pick ul.docs-needed li::marker { color: var(--orange); }
/* repayment calculator */
.calc { margin-top: 20px; }
.calc-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); gap: 28px; align-items: start; }
.calc .grid.two { grid-template-columns: 1fr 1fr; gap: 0 14px; }
.calc input[type=range] { width: 100%; accent-color: var(--orange); margin: 10px 0 2px; }
.calc label.check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.calc-out { background: var(--night); color: #fff; border-radius: var(--radius-m); padding: 22px 24px; }
.calc-out .big span { display: block; color: #CFE0DB; font-size: 13px; font-weight: 600; }
.calc-out .big strong { display: block; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.calc-out .big small { color: #CFE0DB; }
.calc-out dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.15); }
.calc-out dt { color: #CFE0DB; } .calc-out dd { margin: 0; text-align: right; font-weight: 700; }
.calc-out dd .sub { display: block; font-size: 12px; color: #A9C4BD; font-weight: 600; }
.calc-out .flag { margin-top: 14px; color: var(--ink); }
.calc-out p.small { color: #A9C4BD; margin: 12px 0 0; }
@media (max-width: 760px) { .calc-grid { grid-template-columns: 1fr; } }
table.rates .mini { display: grid; grid-template-columns: repeat(4, minmax(92px, 1fr)); gap: 6px 8px; margin-bottom: 6px; }
table.rates .mini label { font-size: 11px; font-weight: 600; color: var(--muted); margin: 0; }
table.rates .mini input { min-width: 0; width: 100%; padding: 5px 6px; font-size: 13px; }
.calc .grid.three { grid-template-columns: 1fr 1fr 1fr; gap: 0 12px; }
.calc .fees-note { background: #F2F6F1; border-radius: var(--radius-s); padding: 10px 12px; margin-top: 12px; color: var(--ink); }
table.rates .mini label.wide { grid-column: 1 / -1; }
table.rates td textarea + textarea { margin-top: 6px; }
@media (max-width: 760px) { .calc .grid.three { grid-template-columns: 1fr; } }
.calc .assess { border: 1.5px solid var(--line); border-left: 5px solid var(--orange); border-radius: var(--radius-m); padding: 16px 18px; margin: 4px 0 20px; background: #FCFDFD; }
.calc .assess h3 { margin: 0; }
.calc .assess h4 { font-size: 13px; margin: 12px 0 4px; color: var(--muted); }
.calc .assess ul { margin: 0; padding-left: 18px; }
.assess-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
@media (max-width: 760px) { .assess-grid { grid-template-columns: 1fr; } }
/* fees as a short list */
.fees { margin: 0 0 12px; }
.fees h4 { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.fees ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.fees li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #EEF2F2; }
.fees li:last-child { border-bottom: 0; }
.fees li span { color: var(--ink); }
.fees li strong { color: var(--night); text-align: right; max-width: 62%; font-weight: 700; }
/* lender info on cards */
.pick .contact h4, .assess h4 { margin-top: 12px; }
.pick ul.ins li::marker { color: var(--night); }
.bdm dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 14px; }
.bdm dt { color: var(--muted); } .bdm dd { margin: 0; font-weight: 600; word-break: break-word; }

/* Insurances Buttonwood can offer: shown under fees, prominent */
.ins-offer { background: #FFF4EC; border: 1px solid #F9C9A6; border-radius: var(--radius-s); padding: 10px 12px; margin: 0 0 12px; }
.ins-offer h4 { font-size: 13px; color: var(--night); margin: 0 0 6px; }
.ins-offer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ins-offer li { background: #fff; border: 1px solid var(--orange); color: var(--night); border-radius: 999px; padding: 3px 10px 3px 8px; font-size: 13px; font-weight: 700; }
.ins-offer li::before { content: "✓ "; color: var(--orange); }
.ins-offer p { margin: 6px 0 0; }

/* ---------- Working overlay: the leaf fills as Claude works ---------- */
.po { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(120% 90% at 50% 30%, rgba(33,69,78,.97), rgba(16,36,42,.99)); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .25s ease; }
.po.show { opacity: 1; }
.po-card { width: min(420px, 100%); text-align: center; color: #fff; }
.po-logo { height: 30px; width: auto; opacity: .9; margin-bottom: 28px; }
.po-leaf { position: relative; width: 132px; height: 171px; margin: 0 auto 22px; transform-origin: 50% 100%; animation: po-sway 3.2s ease-in-out infinite; filter: drop-shadow(0 0 22px rgba(246,140,71,.35)); }
.po-leaf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.po-leaf-ghost { filter: brightness(0) invert(1); opacity: .14; }
.po-leaf-fill { clip-path: inset(100% 0 0 0); transition: clip-path .35s ease-out; }
.po.finished .po-leaf { animation: po-pop .5s ease-out; }
.po-title { color: #fff; font-size: 22px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; }
.po-stage { margin: 0 0 20px; min-height: 1.5em; color: #F9C9A6; font-weight: 600; }
.po-stage.swap { animation: po-in .35s ease-out; }
.po-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.po-bar-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--orange-2), var(--orange)); transition: width .35s ease-out; }
.po-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }
@keyframes po-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes po-pop { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes po-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .po-leaf, .po.finished .po-leaf, .po-stage.swap { animation: none; } }
@media print { .po { display: none; } }

/* ---------- Top 3 medals: gold, silver, bronze ---------- */
.pick { position: relative; overflow: hidden; }
.pick[class*="medal-"] { --m1: #B8901C; --m2: #F1D77E; --m3: #A9811A; --m-ink: #74560A; --m-wash: #FBF4DC; border-top: 0; padding-top: 25px; }
.pick.medal-2 { --m1: #8D979D; --m2: #E9EDEF; --m3: #7F898F; --m-ink: #4C565C; --m-wash: #F1F4F5; }
.pick.medal-3 { --m1: #9C5F33; --m2: #E6B88E; --m3: #8A522B; --m-ink: #6E3F1E; --m-wash: #F9EDE3; }
.pick[class*="medal-"]::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--m1), var(--m2) 45%, var(--m3)); }
.pick[class*="medal-"]::after { content: ""; position: absolute; inset: 5px 0 auto; height: 120px; background: linear-gradient(180deg, var(--m-wash), rgba(255,255,255,0)); pointer-events: none; }
.pick[class*="medal-"] > * { position: relative; z-index: 1; }
.pick[class*="medal-"] .rank { display: flex; align-items: center; gap: 8px; color: var(--m-ink); font-weight: 800; letter-spacing: .01em; }
.pick .medal, .top-choice .medal { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 800 13px var(--display); color: var(--m-ink);
  background: radial-gradient(circle at 32% 28%, #fff 0 8%, var(--m2) 30%, var(--m1) 78%, var(--m3));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.18); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
@media print { .pick[class*="medal-"]::after { display: none; } }

/* ---------- My deals: search and filters ---------- */
.deal-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.deal-filters select, .deal-filters input { height: 40px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--sheet); padding: 0 10px; font: inherit; font-size: 14px; color: var(--ink); }
.deal-filters select { padding-right: 28px; width: auto; flex: 0 1 auto; margin: 0; }
.deal-filters input { margin: 0; }
.deal-q { flex: 1 1 260px; position: relative; }
.deal-q input { width: 100%; padding-left: 36px;
  background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235F6D72' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat 12px 50%; }
.deal-filters :is(select, input):focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.deals-count { margin: 4px 2px 10px; }
table.deals td.num, table.deals th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.deals tr.month th { text-align: left; font-size: 13px; font-weight: 800; color: var(--night); background: var(--paper); padding: 8px 10px; border-radius: 6px; }
table.deals tr.month:not(:first-child) th { padding-top: 14px; background: none; border-bottom: 1px solid var(--line); border-radius: 0; }
.top-choice { display: inline-flex; align-items: center; gap: 6px; }
.top-choice .medal { --m1: #B8901C; --m2: #F1D77E; --m3: #A9811A; --m-ink: #74560A; width: 20px; height: 20px; font-size: 11px; }
.stage { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #EEF2F2; color: var(--muted); white-space: nowrap; }
.stage.s-reported { background: var(--fit-bg); color: var(--fit); }
.stage.s-matched { background: var(--orange-wash); color: var(--orange-ink); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--sheet); }
.seg button { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--night); color: #fff; }
@media (max-width: 720px) {
  .deal-filters select { flex: 1 1 45%; }
  table.deals th:nth-child(n+4):not(:last-child), table.deals td:nth-child(n+4):not(:last-child) { display: none; }
}

/* ---------- Deal numbers: calculator across the top of the results ---------- */
.calc { margin: 0 0 20px; padding: 18px 22px 16px; }
.calc .calc-head h2 { margin: 0; }
.calc .calc-head { margin-bottom: 12px; gap: 6px 16px; }
.calc-bar { display: grid; grid-template-columns: 1.5fr 1.4fr 1fr .8fr .8fr; gap: 0 14px; align-items: start; }
.calc-bar .field { margin-bottom: 8px; }
.calc-bar .hint, .calc-bar .rate-field .small { font-size: 12px; line-height: 1.35; }
.calc-bar input[type=range] { margin: 6px 0 0; }
.calc-out { display: grid; grid-template-columns: minmax(190px, auto) 1fr; gap: 14px 28px; align-items: center; padding: 18px 22px; margin-top: 4px; }
.calc-out .big strong { font-size: 32px; }
.calc-out .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px 18px; padding-left: 26px; border-left: 1px solid rgba(255,255,255,.15); }
.calc-out .kpi span { display: block; color: #CFE0DB; font-size: 12.5px; font-weight: 600; }
.calc-out .kpi strong { display: block; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.calc-out .kpi small { display: block; color: #A9C4BD; font-size: 11.5px; font-weight: 600; }
.calc-out .flag { grid-column: 1 / -1; margin: 0; }
.calc-more { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.calc-more summary { cursor: pointer; font-weight: 700; color: var(--night); font-size: 14px; }
.calc-more[open] summary { margin-bottom: 10px; }
.calc .grid.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 14px; }
.calc .assess { margin: 14px 0 0; }
.pick .use-calc { position: absolute; top: 18px; right: 16px; z-index: 2; font-size: 13px; padding: 5px 12px; }
.pick.in-calc { box-shadow: 0 0 0 2px var(--orange), var(--shadow); }
.pick.in-calc .use-calc { visibility: hidden; }
@media (max-width: 1000px) { .calc-bar { grid-template-columns: 1fr 1fr 1fr; } .calc .grid.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .calc-bar { grid-template-columns: 1fr 1fr; } .calc-bar > .field:first-child, .calc-bar .rate-field { grid-column: 1 / -1; }
  .calc-out { grid-template-columns: 1fr; } .calc-out .kpis { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.15); }
  .calc .grid.four { grid-template-columns: 1fr; }
}
.calc-out .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.calc-out .kpi:last-child strong { color: #FFB27F; }
@media (max-width: 760px) { .calc-out .kpis { grid-template-columns: 1fr 1fr; } }
.summary .sum-points { margin: 6px 0 0; padding-left: 20px; font-size: 15px; max-width: 80ch; }
.summary .sum-points li { margin-bottom: 4px; } .summary .sum-points li::marker { color: var(--orange); }

/* ---------- Coloured sections on lender cards ---------- */
.tone { border-radius: var(--radius-s); padding: 10px 12px 8px; margin: 12px 0 0; border: 1px solid; }
.tone h4 { margin: 0 0 4px !important; font-size: 13px; }
.tone ul { margin: 0 !important; padding-left: 18px; }
.tone li { margin-bottom: 4px; }
.tone.good { background: #EAF6EE; border-color: #BFE3CB; } .tone.good h4 { color: #1D6B40 !important; } .tone.good li::marker { color: #23784A; }
.tone.watch { background: #FFF7DD; border-color: #F1DC93; } .tone.watch h4 { color: #7A5A00 !important; } .tone.watch li::marker { color: #C99A0A; }
.tone.bad { background: #FDEDEC; border-color: #F3C3BF; } .tone.bad h4 { color: #A3271D !important; } .tone.bad li::marker { color: #C0392B; }

/* ---------- Servicing ---------- */
.servicing { margin: 0 0 20px; padding: 18px 22px; }
.servicing .sv-head h2 { margin: 0; }
.sv-band { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; margin-bottom: 16px; }
.sv-k { padding: 12px 16px; border-right: 1px solid var(--line); background: #F7F9F9; }
.sv-k:last-child { border-right: 0; }
.sv-k span { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sv-k strong { display: block; font-size: 20px; font-weight: 800; color: var(--night); }
.sv-k small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.sv-k.good { background: #EAF6EE; } .sv-k.good strong { color: #1D6B40; }
.sv-k.bad { background: #FDEDEC; } .sv-k.bad strong { color: #A3271D; }
.sv-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.sv-col-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--night); padding-bottom: 4px; margin-bottom: 4px; }
.sv-col-head h3 { margin: 0; font-size: 15px; }
.sv-col ul { list-style: none; margin: 0; padding: 0; }
.sv-line { display: grid; grid-template-columns: 18px minmax(0, 1fr) 112px 70px; grid-template-areas: "c d d x" "c a f p"; gap: 4px 6px; align-items: center; padding: 8px 0; border-bottom: 1px solid #EEF2F2; }
.sv-line > input[type=checkbox] { grid-area: c; align-self: start; margin-top: 7px; accent-color: var(--orange); width: 16px; height: 16px; }
.sv-line .sv-desc { grid-area: d; min-width: 0; }
.sv-line > input[type=number] { grid-area: a; }
.sv-line > select { grid-area: f; }
.sv-line .sv-per { grid-area: p; text-align: right; font-size: 13px; font-weight: 700; color: var(--night); }
.sv-line .sv-x { grid-area: x; justify-self: end; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.sv-line .sv-x:hover { color: #A3271D; background: #FDEDEC; }
.sv-line input[type=number], .sv-line select, .sv-line .sv-label { height: 32px; font-size: 13.5px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; width: 100%; margin: 0; }
.sv-line .sv-label { border-color: transparent; background: transparent; font-weight: 600; padding: 0 4px; }
.sv-line .sv-label:hover, .sv-line .sv-label:focus { border-color: var(--line); background: #fff; }
.sv-line.off { opacity: .5; }
.sv-line.bank { background: linear-gradient(90deg, #FFF7DD, rgba(255,247,221,0)); }
.sv-note { font-size: 12px; color: var(--muted); padding: 0 4px; }
.sv-tag { display: inline-block; font-size: 11px; font-weight: 800; color: #7A5A00; background: #FFEDB0; border-radius: 999px; padding: 1px 7px; }
.linkish { border: 0; background: none; padding: 0; color: var(--orange-ink); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; margin-left: 6px; }
.sv-add { margin-top: 8px; font-size: 13px; padding: 5px 12px; }
.sv-basis { margin-top: 14px; padding: 12px; background: #F2F6F1; border-radius: var(--radius-s); }
.sv-basis .field { margin-bottom: 8px; }
.sv-basis [role=radiogroup] { display: grid; gap: 4px; }
.sv-radio { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; cursor: pointer; }
.sv-radio input { accent-color: var(--orange); }
@media (max-width: 1000px) { .sv-cols { grid-template-columns: 1fr; } .sv-band { grid-template-columns: repeat(3, 1fr); } .sv-k:nth-child(3) { border-right: 0; } .sv-k:nth-child(n+4) { border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .sv-band { grid-template-columns: 1fr 1fr; } .sv-k { border-right: 0; border-top: 1px solid var(--line); } .sv-k:first-child { border-top: 0; } .sv-k:last-child { grid-column: 1 / -1; } }
@media print { .sv-add, .sv-x, .linkish { display: none; } }
.pill.alt { background: #E8EEF6; color: #2B4A73; margin-left: 6px; }
.tone.info { background: #EEF3FA; border-color: #C9D8EE; } .tone.info h4 { color: #2B4A73 !important; } .tone.info li::marker { color: #3E6AA8; }
.sv-band { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.sv-k.spouse strong { color: #1D6B40; }
.sv-shared { border: 1px solid #BFE3CB; background: #EAF6EE; color: #1D6B40; font: inherit; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 0 8px; margin-right: 6px; cursor: pointer; }
.sv-shared.no { border-color: var(--line); background: #F2F4F4; color: var(--muted); }
.sv-spouse { margin-top: 12px; }
.sv-extra { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px dashed var(--line); }
.sv-fixed { display: block; font-weight: 600; font-size: 13.5px; padding: 6px 4px 0; }
.sv-unit { grid-area: f; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.sv-dot { grid-area: c; width: 16px; }
.sv-line.spouse.off-soft .sv-per, .sv-line.spouse.off-soft input[type=number], .sv-line.spouse.off-soft select { opacity: .55; }
.sv-joint { border: 1px solid var(--orange); background: #fff; color: var(--orange-ink); font: inherit; font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 1px 9px; margin-right: 4px; cursor: pointer; }
.sv-joint.on { background: var(--orange); color: #fff; }
.sv-joint:hover { background: var(--orange-wash); } .sv-joint.on:hover { background: var(--orange-2); }
.sv-k.max { background: #FFF4EC; } .sv-k.max strong { color: var(--orange-ink); }

/* ---------- Lender logos ---------- */
.lender-logo { display: inline-grid; place-items: center; flex: none; border-radius: 8px; background: #fff; border: 1px solid var(--line); overflow: hidden; vertical-align: middle; }
.lender-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.lender-logo.initials { background: var(--night); color: #fff; border-color: var(--night); font: 800 11px var(--display); letter-spacing: .02em; }
.with-logo { display: flex; align-items: center; gap: 10px; }
.name-list li { display: flex; align-items: center; gap: 8px; }
.top-choice .lender-logo { border-radius: 6px; }
.logo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: end; margin-top: 14px; padding: 12px; background: #F2F6F1; border-radius: var(--radius-s); }
.logo-row .field { margin: 0; } .logo-row .hint { grid-column: 1 / -1; }
@media (max-width: 640px) { .logo-row { grid-template-columns: 1fr; } }

/* ---------- Submission summary ---------- */
.submission { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: #F8FAF6; }
.submission summary { cursor: pointer; padding: 9px 12px; font-weight: 700; font-size: 14px; color: var(--night); }
.submission[open] summary { border-bottom: 1px solid var(--line); }
.submission .sub-body { position: relative; padding: 10px 12px 4px; font-size: 14px; }
.submission .sub-body p { margin: 0 0 10px; }
.submission .sub-copy { float: right; margin: 0 0 6px 10px; padding: 4px 12px; font-size: 13px; }

/* ---------- Pop-up (suggest an update) ---------- */
dialog.modal { border: 0; border-radius: var(--radius-m); padding: 0; width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 24px 60px rgba(16,36,42,.35); color: var(--ink); background: var(--sheet); }
dialog.modal::backdrop { background: rgba(16,36,42,.55); backdrop-filter: blur(2px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--sheet); }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-x { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.modal-x:hover { background: var(--paper); color: var(--ink); }
dialog.modal .fb-form { padding: 14px 22px 20px; }
.pick .linkish.small { font-size: 13px; margin: 10px 0 0; display: inline-block; }
.fab { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 12px 20px 12px 16px;
  background: var(--night); color: #fff; font: 700 15px var(--display); box-shadow: 0 10px 28px rgba(16,36,42,.35); cursor: pointer; }
.fab:hover { background: var(--night-2); } .fab:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.fab-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: var(--night); font-size: 13px; }
@media (max-width: 560px) { .fab { right: 16px; bottom: 16px; padding: 12px; } .fab { font-size: 0; gap: 0; } .fab-icon { font-size: 14px; width: 28px; height: 28px; } }

/* ---------- Compare up to 3 lenders ---------- */
.cmp-bar { margin-top: 12px; }
.compare { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px 16px; background: #FBFCFC; overflow-x: auto; }
.cmp-body { display: grid; grid-template-columns: 140px repeat(var(--cols, 3), minmax(170px, 1fr)); min-width: 620px; }
.cmp-head { padding: 8px 10px 10px; display: grid; gap: 6px; align-content: start; border-bottom: 2px solid var(--night); }
.cmp-head select, .cmp-head input { height: 34px; font-size: 14px; margin: 0; width: 100%; }
.cmp-head.main { background: #F1F5F6; border-radius: 8px 8px 0 0; }
.cmp-tag { font-size: 11.5px; font-weight: 800; color: var(--orange-ink); }
.cmp-name { font-weight: 800; color: var(--night); }
.cmp-label, .cmp-cell { padding: 8px 10px; border-bottom: 1px solid #EEF2F2; font-size: 14px; }
.cmp-label { color: var(--muted); font-weight: 600; }
.cmp-cell { text-align: right; font-weight: 700; color: var(--night); }
.cmp-cell.main { background: #F1F5F6; }
.cmp-cell.best { background: #EAF6EE; color: #1D6B40; }
.cmp-head .linkish { justify-self: start; margin: 0; }
@media print { .compare { border: 0; padding: 0; } }
.cmp-head select { height: 38px; padding: 0 30px 0 10px; line-height: 38px; }
.cmp-head input { height: 38px; padding: 0 10px; }
.cmp-cell.main.best { background: #DDF0E3; }

/* =========================================================
   Top 3 page, cleaned up (audit Nov 2026)
   Flow: deal numbers + servicing → why these three → cards → other lenders
   ========================================================= */
.deal-title h1 { margin: 0; }
.deal-sub { margin: 4px 0 0; color: var(--muted); font-weight: 600; font-size: 15px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.notice { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px;
  background: var(--orange-wash); border: 1px solid #F9C9A6; border-radius: var(--radius-m); }
.notice p { margin: 0; font-weight: 600; color: var(--night); }
.sec-h { margin: 32px 0 12px; }
.footnote { margin: 18px 0 0; font-size: 12.5px; color: var(--muted); }

/* Servicing collapses to its summary band */
.servicing.collapsed > p { display: none; }
.servicing.collapsed .sv-band { margin-bottom: 0; }
.sv-head { align-items: center !important; gap: 12px; flex-wrap: wrap; }
.sv-head > span { margin-left: auto; }
.sv-toggle { padding: 6px 14px; font-size: 14px; }

/* Why these three: the lead */
.recommend { margin-top: 8px; }
.lead { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; padding: 22px 24px; margin-bottom: 16px;
  background: var(--night); color: #fff; border-radius: var(--radius-m); }
.lead h2 { color: #fff; margin: 0 0 6px; font-size: 20px; }
.lead-gist { margin: 0 0 12px; font-size: 17px; line-height: 1.5; color: #E6F0EC; max-width: 62ch; }
.lead-points { margin: 0; padding: 0; list-style: none; counter-reset: lp; display: grid; gap: 8px; }
.lead-points li { counter-increment: lp; display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; color: #fff; font-size: 15px; }
.lead-points li::before { content: counter(lp); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 800 12px var(--display); color: #4A3A06;
  background: radial-gradient(circle at 32% 28%, #fff 0 8%, #F1D77E 30%, #B8901C 80%); }
.lead-points li:nth-child(2)::before { color: #3E474C; background: radial-gradient(circle at 32% 28%, #fff 0 8%, #E9EDEF 30%, #8D979D 80%); }
.lead-points li:nth-child(3)::before { color: #4A2810; background: radial-gradient(circle at 32% 28%, #fff 0 8%, #E6B88E 30%, #9C5F33 80%); }
.lead-side { border-left: 1px solid rgba(255,255,255,.15); padding-left: 24px; font-size: 14px; }
.lead-side h3 { color: #F9C9A6; font-size: 13px; margin: 0 0 4px; }
.lead-side h3 ~ h3 { margin-top: 12px; }
.lead-side ul { margin: 0; padding-left: 18px; color: #E6F0EC; } .lead-side li { margin-bottom: 3px; }
@media (max-width: 860px) { .lead { grid-template-columns: 1fr; } .lead-side { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.15); padding-top: 14px; } }

/* Cards */
.top3 { align-items: stretch; gap: 18px; }
.pick { display: flex; flex-direction: column; padding: 22px 22px 18px; }
.pick > * { min-width: 0; }
.pick-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pick-top .pill { margin: 0; }
.pick h3.with-logo { font-size: 1.4rem; margin: 12px 0 4px; line-height: 1.2; }
.pick h3 .alt-note { display: block; font-size: 12px; font-weight: 700; color: #2B4A73; letter-spacing: 0; }
.pick .headline { margin: 4px 0 14px; font-weight: 600; color: var(--ink); font-size: 15px; line-height: 1.45; }
.rate-strip { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 4px 12px; padding: 12px 14px; background: #F2F6F1; border-radius: var(--radius-s); }
.rate-strip span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.rate-strip strong { display: block; font-size: 15px; color: var(--night); font-weight: 800; white-space: nowrap; }
.rate-strip .pill { font-size: 12px; padding: 2px 8px; }
.loadings { margin: 6px 2px 0; font-size: 12.5px; color: var(--muted); }
.pick-notes { margin-top: 4px; }
.pick-notes .tone, .assess .tone { border: 0; background: none; padding: 0; margin: 16px 0 0; border-radius: 0; }
.tone h4 { font-size: 13px !important; margin: 0 0 6px !important; }
.tone ul { list-style: none; padding-left: 0 !important; display: grid; gap: 5px; }
.tone li { position: relative; padding-left: 22px; margin: 0 !important; font-size: 14.5px; line-height: 1.45; }
.tone li::before { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 800 10px var(--display); color: #fff; }
.tone.good li::before { content: "✓"; background: #23784A; }
.tone.bad li::before { content: "✕"; background: #C0392B; }
.tone.watch li::before { content: "!"; background: #C99A0A; }
.tone.info li::before { content: "?"; background: #3E6AA8; }
.tone li::marker { content: none; }
.pick-money { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.pick-money .fees { margin: 0; }
.pick-money .ins-offer { margin: 0; padding: 0; background: none; border: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pick-money .ins-offer h4 { margin: 0; font-size: 13px; color: var(--muted); }
.pick-more { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; }
.pick-more + .pick-more { margin-top: 0; }
.pick-more summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--night); list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 2px 0; }
.pick-more summary::-webkit-details-marker { display: none; }
.pick-more summary::after { content: "+"; font-size: 18px; color: var(--muted); font-weight: 600; }
.pick-more[open] summary::after { content: "–"; }
.pick-more .contact { border: 0; margin: 6px 0 0; padding: 0; }
.pick-more.submission { background: none; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
.pick-more.submission summary { padding: 2px 0; }
.pick-more.submission .sub-body { padding: 8px 0 0; }
.pick-actions { margin-top: auto; padding-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.pick-actions .btn { padding: 9px 14px; font-size: 14px; }
.pick .contact h4 { margin-top: 10px; }
.pick.in-calc { box-shadow: 0 0 0 2px var(--orange), var(--shadow); }
@media print { .pick-more { display: block; } .pick-more > *:not(summary) { display: block !important; } .lead { background: #fff; color: var(--ink); border: 1px solid var(--line); }
  .lead h2, .lead-points li, .lead-gist, .lead-side ul { color: var(--ink); } }
.rate-strip { grid-template-columns: 1fr 1fr 1fr; }
.loadings { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 2px 0; }
.loadings .pill { font-size: 11.5px; padding: 2px 8px; }
.pick-actions .btn { padding: 7px 12px; font-size: 13px; flex: 1 1 auto; justify-content: center; text-align: center; }
.sv-limit { width: 120px !important; height: 26px !important; font-size: 12.5px !important; margin: 4px 6px 0 0 !important; display: inline-block; }
.cmp-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sv-open { display: inline-flex; align-items: center; gap: 10px; }
.sv-chip { font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.25); }
.sv-chip.good { background: #EAF6EE; color: #1D6B40; } .sv-chip.bad { background: #FDEDEC; color: #A3271D; }
dialog.sv-modal { width: min(1240px, calc(100vw - 32px)); }
.sv-modal .servicing { margin: 0; border: 0; box-shadow: none; border-radius: 0; padding: 16px 22px 22px; }
.sv-modal .servicing .sv-head h2 { display: none; }
.sv-modal .sv-head { justify-content: flex-start !important; }
.sv-modal .sv-head > span { margin-left: 0; }
.sv-limit-l { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 6px; } .sv-limit-l .sv-limit { margin-left: 4px !important; }

/* ---------- Review the deal: minimisable sections ---------- */
.fold { padding: 0; overflow: hidden; }
.fold-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; }
.fold-btn { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; flex: 1; }
.fold-btn h2 { margin: 0; }
.fold-chev { width: 26px; height: 26px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; flex: none; transition: transform .15s ease; }
.fold-chev::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--night); border-bottom: 2px solid var(--night); transform: translateY(-2px) rotate(45deg); }
.fold.closed .fold-chev { transform: rotate(-90deg); }
.fold-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 6px; }
.fold-body { padding: 0 22px 22px; }
.fold.closed .fold-head { padding-bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .fold-chev { transition: none; } }

/* Form sub-sections */
.form-sec { border-top: 1px solid var(--line); padding: 10px 0 4px; }
.form-sec:first-of-type { border-top: 0; }
.form-sec > summary { cursor: pointer; list-style: none; font-weight: 800; font-size: 14px; color: var(--night); padding: 4px 0 10px; display: flex; align-items: center; gap: 8px; }
.form-sec > summary::-webkit-details-marker { display: none; }
.form-sec > summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: -3px 2px 0; transition: transform .15s ease; }
.form-sec:not([open]) > summary::before { transform: rotate(-45deg); margin-top: 0; }

/* What the documents show */
.docs-gist { font-size: 16px; line-height: 1.55; color: var(--ink); margin: 0 0 16px; max-width: 75ch; }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.topic { background: #F6F8F8; border-radius: var(--radius-s); padding: 14px 16px; border-top: 3px solid var(--night); }
.topic.t-loan { border-top-color: var(--orange); } .topic.t-income { border-top-color: #23784A; } .topic.t-credit { border-top-color: #3E6AA8; } .topic.t-bank { border-top-color: #C99A0A; }
.topic h3 { margin: 0 0 8px; font-size: 14px; color: var(--night); }
.topic ul, .topic-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45; }
.flag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flag-list li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 10px 12px; border-radius: var(--radius-s); background: #F6F8F8; border-left: 4px solid var(--line); }
.flag-list li.sev-high { border-left-color: #C0392B; background: #FDF3F2; } .flag-list li.sev-medium { border-left-color: #C99A0A; background: #FFFAEB; } .flag-list li.sev-low { border-left-color: #8D979D; }
.flag-list strong { display: block; font-weight: 700; color: var(--ink); }
.flag-list .ev { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.ask-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.name-in { height: 34px; font-size: 14px; padding: 0 8px; max-width: 160px; margin: 0; }

/* ---------- New deal ---------- */
.nd { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; max-width: 1080px; margin: 8px auto 0; align-items: start; }
.nd-form { padding: 30px 32px; }
.nd-form h1 { margin: 0 0 6px; }
.nd-lede { margin: 0 0 22px; color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 52ch; }
.nd-form .field input { height: 48px; font-size: 16px; }
.nd-drop { margin-top: 6px; padding: 26px 20px; }
.nd-files { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.nd-files li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; background: #F2F6F1; border-radius: var(--radius-s); font-size: 14px; }
.nd-files li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nd-x { border: 0; background: none; font-size: 18px; color: var(--muted); cursor: pointer; padding: 0 4px; }
.nd-go { margin-top: 20px; width: 100%; justify-content: center; padding: 14px 18px; font-size: 16px; }
.nd-side { background: var(--night); color: #E6F0EC; border-radius: var(--radius-m); padding: 28px 28px 24px; position: relative; overflow: hidden; }
.nd-side::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 200px; height: 260px; background: url("/img/leaf.png") no-repeat center / contain; opacity: .08; transform: rotate(-12deg); pointer-events: none; }
.nd-side h2 { color: #fff; margin: 0 0 16px; font-size: 20px; }
.nd-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 16px; position: relative; z-index: 1; }
.nd-steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; }
.nd-steps li::before { content: counter(s); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--night); font: 800 14px var(--display); }
.nd-steps strong { color: #fff; font-size: 15px; } .nd-steps span { font-size: 14px; color: #CFE0DB; line-height: 1.45; }
.nd-recent { position: relative; z-index: 1; }
.nd-recent h3 { color: #F9C9A6; font-size: 13px; margin: 24px 0 8px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.nd-recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nd-recent li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 6px 0; }
.nd-recent a { color: #fff; font-weight: 700; text-decoration: none; } .nd-recent a:hover { text-decoration: underline; }
.nd-recent li span { color: #A9C4BD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .nd { grid-template-columns: 1fr; } .nd-form { padding: 22px; } }

/* Notes for system: keep one fact per line, easy to scan before copying. */
.submission.sys .sys-notes { margin: 0 0 10px; white-space: pre-wrap; word-break: break-word; font: 13.5px/1.6 inherit; font-family: inherit; color: var(--night); background: none; border: 0; padding: 0; }
.pick-more.submission + .pick-more.submission { border-top: 1px solid var(--line); }

/* Floating buttons: Deal numbers, Servicing and Suggest an update stack bottom-right and open pop-ups. */
.fabs { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fabs .fab { position: static; }
.fab .sv-chip { margin-left: 2px; }
dialog.dn-modal { width: min(1240px, calc(100vw - 32px)); }
.dn-modal .calc { margin: 0; border: 0; box-shadow: none; border-radius: 0; padding: 16px 22px 22px; }
.dn-modal .calc-head h2 { display: none; }
.dn-modal .calc-head { justify-content: flex-start !important; }
.dn-modal .assess { margin-top: 16px; }
main { padding-bottom: 180px; }   /* room so the floating buttons never cover the last card */
@media (max-width: 560px) {
  .fabs { right: 16px; bottom: 16px; gap: 8px; }
  .fabs .fab { right: auto; bottom: auto; }
  .fab .fab-label { display: none; }
  .fab .sv-chip { font-size: 11px; padding: 2px 8px; }
}
@media print { .fabs, dialog.modal { display: none !important; } }

/* Floating buttons all the same size; Servicing turns green (surplus) or red (shortfall). */
.fabs .fab { width: 280px; height: 58px; padding: 0 18px 0 14px; justify-content: flex-start; gap: 12px; text-align: left; }
.fab-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.fab-label { font-size: 15px; }
.fab-sub { font: 700 12px var(--body, inherit); opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fab-sub:empty { display: none; }
.fab.fab-sv.good { background: #1D6B40; } .fab.fab-sv.good:hover { background: #17573A; }
.fab.fab-sv.bad { background: #A3271D; } .fab.fab-sv.bad:hover { background: #8A2018; }
.fab.fab-sv.good .fab-icon, .fab.fab-sv.bad .fab-icon { background: #fff; color: inherit; }
.fab.fab-sv.good .fab-icon { color: #1D6B40; } .fab.fab-sv.bad .fab-icon { color: #A3271D; }
@media (max-width: 560px) {
  .fabs .fab { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .fab .fab-text { display: none; }
}

/* Choice cards are selectable: the selected one feeds Deal numbers and Servicing. */
.pick.selectable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.pick.selectable:hover:not(.in-calc) { box-shadow: 0 0 0 2px rgba(232,131,58,.45), var(--shadow); }
.pick.selectable:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.pick-badges { display: inline-flex; gap: 6px; align-items: center; }
.sel-tag { display: none; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--orange); color: var(--night); }
.pick.in-calc .sel-tag { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .pick.selectable { transition: none; } }

/* =====================================================================
   Refresh: rich & warm. Deep forest-teal, Buttonwood orange, gold.
   Warm sage-tinted paper, bolder type, cards with more depth.
   ===================================================================== */
:root {
  --night: #123F3D;          /* deep forest-teal */
  --night-2: #1B5752;
  --teal: #1F6F66;           /* secondary accent */
  --teal-wash: #E3EFEA;
  --gold: #C79A2E;
  --gold-wash: #FBF3DD;
  --ink: #18302E;
  --muted: #5B6B66;
  --paper: #F1F3EC;          /* warm sage off-white */
  --line: #D9DFD2;
  --radius-m: 18px;
  --shadow: 0 1px 2px rgba(18,63,61,.07), 0 12px 32px -14px rgba(18,63,61,.28);
  --shadow-lg: 0 2px 4px rgba(18,63,61,.08), 0 24px 48px -20px rgba(18,63,61,.38);
}
body { background:
  radial-gradient(1200px 420px at 85% -120px, rgba(31,111,102,.10), transparent 70%),
  radial-gradient(900px 360px at -10% 0, rgba(246,140,71,.07), transparent 70%),
  var(--paper) no-repeat; }
h1 { font-size: 2.45rem; letter-spacing: -0.035em; }
h2 { font-size: 1.38rem; letter-spacing: -0.025em; }

/* top bar */
.top { background: linear-gradient(110deg, #0D3331 0%, #154C49 55%, #1B5A52 100%); box-shadow: inset 0 -3px 0 var(--orange); }
.top .in { min-height: 68px; }
.top nav a { color: #CFE0DB; border-bottom-width: 4px; }
.top nav a[aria-current=page] { color: #fff; background: rgba(255,255,255,.06); }
.brand small { color: #F6B58A; }

/* buttons */
.btn { font-size: 14.5px; padding: 13px 22px; box-shadow: 0 6px 16px -8px rgba(232,120,47,.75); }
.btn:hover { transform: translateY(-1px); }
.btn.ghost, .btn.quiet, .btn.danger { box-shadow: none; }
.btn.ghost { background: #fff; border-color: #C7D2C9; }
.btn.ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn:hover, .btn.ghost:hover { transition: background .15s, border-color .15s, transform .15s; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* inputs */
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea { border-color: #C9D3CA; border-radius: 10px; }
input:hover, select:hover, textarea:hover { border-color: #A9B8AD; }

/* panels */
.panel { border-color: rgba(18,63,61,.08); box-shadow: var(--shadow); }
.fold-chev { background: var(--teal-wash); }
.fold-chev::before { border-color: var(--teal); }
.fold-head h2 { color: var(--night); }

/* deal header: a rich band with the client, numbers and progress */
.deal-hero { background: linear-gradient(120deg, #123F3D 0%, #1B5752 60%, #24695F 100%); color: #fff; border-radius: 22px;
  padding: 26px 30px 0; margin-bottom: 22px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.deal-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(246,140,71,.28), transparent 65%); pointer-events: none; }
.deal-hero > * { position: relative; z-index: 1; }
.deal-hero h1 { color: #fff; }
.deal-hero .deal-sub { color: #F6C29E; font-weight: 700; margin: 4px 0 0; }
.deal-hero .btn.quiet { color: #CFE0DB; } .deal-hero .btn.quiet:hover { color: #fff; }
.deal-hero .btn.danger { color: #FFD3CC; border-color: rgba(255,211,204,.45); background: transparent; }
.deal-hero .btn.danger:hover { background: rgba(178,58,47,.35); color: #fff; }
.deal-hero .steps { border-bottom: 0; margin: 10px 0 0; gap: 4px; }
.deal-hero .steps li { color: #A9C4BD; margin: 0; padding: 12px 18px 14px; border-radius: 12px 12px 0 0; border-bottom: 0; }
.deal-hero .steps li.done { color: #E6F0EC; }
.deal-hero .steps li.done b { background: #E6F0EC; color: var(--night); border-color: #E6F0EC; }
.deal-hero .steps li.on { background: var(--paper); color: var(--night); }
.deal-hero .steps li.on b { background: var(--orange); border-color: var(--orange); color: var(--night); }

/* status pills a touch richer */
.pill { font-weight: 750; padding: 4px 11px; }

/* top 3 cards: more depth, lift on hover */
.pick { box-shadow: var(--shadow); border-left-color: rgba(18,63,61,.1); border-right-color: rgba(18,63,61,.1); border-bottom-color: rgba(18,63,61,.1); }
.pick.selectable:hover:not(.in-calc) { box-shadow: 0 0 0 2px rgba(246,140,71,.55), var(--shadow-lg); }
.pick.in-calc { box-shadow: 0 0 0 3px var(--orange), var(--shadow-lg); }
.rate-strip { background: linear-gradient(135deg, #F3F7F2, #E9F1EC); }

/* "Why these three" and other dark leads pick up the hero gradient */
.lead { background: linear-gradient(120deg, #FFFFFF 0%, #FFFDF7 55%, var(--gold-wash) 100%) !important; color: var(--ink);
  border: 1px solid rgba(199,154,46,.28); border-left: 6px solid var(--gold); box-shadow: var(--shadow); border-radius: 20px; }
.lead h2 { color: var(--night) !important; }
.lead-gist { color: var(--ink) !important; }
.lead-points li { color: var(--ink) !important; }
.lead-side { border-left-color: rgba(199,154,46,.35) !important; }
.lead-side h3 { color: #8A6512 !important; }
.lead-side ul { color: var(--ink) !important; }
.lead-side li::marker { color: var(--gold); }

/* floating buttons match the new teal */
.fab { background: var(--night); box-shadow: 0 10px 24px -10px rgba(13,51,49,.7); }
.fab:hover { background: var(--night-2); }

/* new deal side panel */
.nd-side { background: linear-gradient(150deg, #123F3D 0%, #1B5752 70%, #24695F 100%) !important; box-shadow: var(--shadow-lg); }

@media (max-width: 640px) {
  .deal-hero { padding: 20px 18px 0; border-radius: 18px; }
  .deal-hero .steps li { padding: 10px 12px 12px; font-size: 14px; }
  h1 { font-size: 2rem; }
}
@media print {
  body { background: #fff; }
  .deal-hero { background: none; color: var(--ink); box-shadow: none; padding: 0; }
  .deal-hero h1 { color: var(--ink); } .deal-hero::after { display: none; }
}
html { background: var(--paper); }
body { min-height: 100vh; }

/* Bank statements in Documents for submission: period plus accepted formats */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.docs-needed li.bank-line { list-style: none; margin: 4px 0 10px -18px; padding: 10px 12px; border-radius: 12px; background: var(--teal-wash); }
.bank-title { display: block; font-weight: 800; color: var(--night); margin-bottom: 6px; }
.bf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; font-size: 12.5px; font-weight: 750; background: #fff; border: 1px solid var(--line); color: var(--muted); }
.bf-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 900; background: #E3E8E1; color: var(--muted); }
.bf-chip.ok { color: var(--fit); border-color: #B7DEC5; } .bf-chip.ok .bf-mark { background: var(--fit); color: #fff; }
.bf-chip.no { color: var(--fail); border-color: #F0C3BC; } .bf-chip.no .bf-mark { background: var(--fail); color: #fff; }
.bf-chip.maybe { color: var(--check); border-color: #EBD49A; } .bf-chip.maybe .bf-mark { background: #E3A92B; color: #fff; }
.bank-note { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
@media print { .docs-needed li.bank-line { background: none; padding: 0; margin-left: 0; } }
.nobank-tag { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--teal-wash); color: var(--teal); border: 1px solid #BFD9CF; white-space: nowrap; }
.pick-badges { flex-wrap: wrap; justify-content: flex-end; }

/* Admin: policy text sections collapse */
.pol-group { border: 1px solid var(--line); border-radius: 12px; margin: 8px 0; background: #fff; }
.pol-group > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; font-weight: 800; color: var(--night); list-style: none; }
.pol-group > summary::-webkit-details-marker { display: none; }
.pol-group > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); margin-right: 4px; transition: transform .15s; flex: none; }
.pol-group[open] > summary::before { transform: rotate(45deg); }
.pol-group > summary > span:first-of-type { flex: 1; }
.pol-group[open] > summary { border-bottom: 1px solid var(--line); }
.pol-group > .field { padding: 0 16px; } .pol-group > .field:first-of-type { padding-top: 12px; } .pol-group > .field:last-child { padding-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .pol-group > summary::before { transition: none; } }

/* Every lender (admin view): one collapsible row per lender */
.lender-rows { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.lr { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: inset 5px 0 var(--line); }
.lr.fit { box-shadow: inset 5px 0 var(--fit); } .lr.check { box-shadow: inset 5px 0 #D9A92B; } .lr.fail { box-shadow: inset 5px 0 var(--fail); }
.lr > summary { display: grid; grid-template-columns: 22px minmax(150px, 220px) auto 1fr; align-items: center; gap: 12px; padding: 12px 16px 12px 20px; cursor: pointer; list-style: none; }
.lr > summary::-webkit-details-marker { display: none; }
.lr > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); justify-self: center; transition: transform .15s; }
.lr[open] > summary::before { transform: rotate(45deg); }
.lr[open] > summary { border-bottom: 1px solid var(--line); }
.lr-name strong { color: var(--night); }
.lr-why { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lr.fail .lr-why { color: var(--fail); }
.lr-body { padding: 14px 18px 18px 20px; }
.lr-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.lr-contact { display: flex; gap: 12px; flex-wrap: wrap; }
.lr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.lr-cell { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; background: #FBFCFA; }
.lr-cell.c-P { background: var(--fit-bg); border-color: #CBE6D4; } .lr-cell.c-C { background: var(--check-bg); border-color: #EFDDA9; } .lr-cell.c-F { background: var(--fail-bg); border-color: #F0C9C2; }
.lr-k { font-weight: 800; font-size: 12px; color: var(--night); margin-bottom: 4px; }
.lr-cell .pol { white-space: pre-wrap; max-height: none; max-width: none; min-width: 0; }
@media (max-width: 640px) { .lr > summary { grid-template-columns: 22px 1fr auto; } .lr-why { grid-column: 2 / -1; white-space: normal; } }
@media print { .lr > summary::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .lr > summary::before { transition: none; } }

/* Admin: policy text sections collapse */
.pol-group { border: 1px solid var(--line); border-radius: 12px; margin: 8px 0; background: #fff; }
.pol-group > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; font-weight: 800; color: var(--night); list-style: none; }
.pol-group > summary::-webkit-details-marker { display: none; }
.pol-group > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); margin-right: 4px; transition: transform .15s; flex: none; }
.pol-group[open] > summary::before { transform: rotate(45deg); }
.pol-group > summary > span:first-of-type { flex: 1; }
.pol-group[open] > summary { border-bottom: 1px solid var(--line); }
.pol-group > .field { padding: 0 16px; } .pol-group > .field:first-of-type { padding-top: 12px; } .pol-group > .field:last-child { padding-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .pol-group > summary::before { transition: none; } }

/* Every lender (admin view): one collapsible row per lender */
.lender-rows { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.lr { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: inset 5px 0 var(--line); }
.lr.fit { box-shadow: inset 5px 0 var(--fit); } .lr.check { box-shadow: inset 5px 0 #D9A92B; } .lr.fail { box-shadow: inset 5px 0 var(--fail); }
.lr > summary { display: grid; grid-template-columns: 22px minmax(150px, 220px) auto 1fr; align-items: center; gap: 12px; padding: 12px 16px 12px 20px; cursor: pointer; list-style: none; }
.lr > summary::-webkit-details-marker { display: none; }
.lr > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); justify-self: center; transition: transform .15s; }
.lr[open] > summary::before { transform: rotate(45deg); }
.lr[open] > summary { border-bottom: 1px solid var(--line); }
.lr-name strong { color: var(--night); }
.lr-why { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lr.fail .lr-why { color: var(--fail); }
.lr-body { padding: 14px 18px 18px 20px; }
.lr-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.lr-contact { display: flex; gap: 12px; flex-wrap: wrap; }
.lr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.lr-cell { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; background: #FBFCFA; }
.lr-cell.c-P { background: var(--fit-bg); border-color: #CBE6D4; } .lr-cell.c-C { background: var(--check-bg); border-color: #EFDDA9; } .lr-cell.c-F { background: var(--fail-bg); border-color: #F0C9C2; }
.lr-k { font-weight: 800; font-size: 12px; color: var(--night); margin-bottom: 4px; }
.lr-cell .pol { white-space: pre-wrap; max-height: none; max-width: none; min-width: 0; }
@media (max-width: 640px) { .lr > summary { grid-template-columns: 22px 1fr auto; } .lr-why { grid-column: 2 / -1; white-space: normal; } }
@media print { .lr > summary::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .lr > summary::before { transition: none; } }

/* ---------- Working overlay v2: a growing canopy and a live checklist ---------- */
.po { background: radial-gradient(110% 80% at 30% 20%, rgba(27,87,82,.97), rgba(10,38,36,.99)); }
.po-card { width: min(760px, 100%); display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center; text-align: left; }
.po-scene { position: relative; aspect-ratio: 240 / 230; cursor: pointer; touch-action: manipulation; user-select: none; }
.po-tree { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 26px rgba(246,140,71,.25)); }
.po-trunk { fill: none; stroke: #C9A27A; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s ease-out; }
.po-lean { transform-origin: 120px 214px; transform-box: view-box; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.po-sway { transform-origin: 120px 214px; transform-box: view-box; animation: po-tree-sway 5s ease-in-out infinite; }
.po-tleaf { transform: rotate(var(--r)) scale(0); transform-box: fill-box; transform-origin: center; opacity: 0;
  transition: transform .5s cubic-bezier(.3,1.6,.5,1) var(--d), opacity .3s ease var(--d); }
.po-tleaf.on { transform: rotate(var(--r)) scale(1); opacity: .95; animation: po-flutter 3.6s ease-in-out infinite var(--d); }
.po.finished .po-sway { animation: po-pop .6s ease-out; }
.po-big { position: absolute; left: 0; right: 0; bottom: -6px; text-align: center; }
.po-big .po-pct { font-size: 15px; font-weight: 800; color: #fff; background: rgba(255,255,255,.1); padding: 4px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.po-fall { position: absolute; width: 12px; height: 18px; border-radius: 0 100% 0 100%; pointer-events: none; animation: po-fall 2.2s cubic-bezier(.3,.1,.6,1) forwards; }
.po-title { font-size: 26px; margin: 0 0 4px; }
.po-sub { color: #F6C29E; font-weight: 700; font-size: 14px; margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.po-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.po-step { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,.45); font-weight: 650; font-size: 15px; transition: color .3s; }
.po-step-text { display: flex; flex-direction: column; }
.po-detail { font-size: 12.5px; font-weight: 600; color: #F6C29E; }
.po-detail:empty { display: none; }
.po-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); margin-top: 1px; position: relative; }
.po-step.now { color: #fff; }
.po-step.now .po-dot { border-color: rgba(246,140,71,.3); border-top-color: var(--orange); animation: po-spin .9s linear infinite; }
.po-step.done { color: rgba(255,255,255,.8); }
.po-step.done .po-dot { background: var(--orange); border-color: var(--orange); }
.po-step.done .po-dot::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--night); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@keyframes po-tree-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes po-flutter { 0%, 100% { transform: rotate(var(--r)) scale(1); } 50% { transform: rotate(calc(var(--r) + 12deg)) scale(1.06); } }
@keyframes po-spin { to { transform: rotate(360deg); } }
@keyframes po-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), 160px) rotate(var(--rot)); opacity: 0; } }
@media (max-width: 680px) {
  .po-card { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .po-scene { width: 190px; margin: 0 auto; }
  .po-steps { text-align: left; max-width: 340px; margin: 0 auto 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .po-sway, .po-tleaf.on, .po-step.now .po-dot, .po.finished .po-sway { animation: none; }
  .po-tleaf, .po-trunk, .po-lean { transition: none; }
}

/* ---------- Working overlay v3: our leaf fills, a picture per step, a garden grows behind ---------- */
.po { background: radial-gradient(110% 80% at 30% 20%, #1B5752, #0B2826); overflow: hidden; }
.po-garden { position: absolute; inset: 0; pointer-events: none; }
.po-rise { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, rgba(246,140,71,.16) 0%, rgba(46,139,122,.22) 45%, rgba(46,139,122,0) 100%); transition: height 1s ease-out; }
.po-wave { display: none; }
.po-sprout { position: absolute; bottom: -4px; width: auto; opacity: 0; transform-origin: 50% 100%; transform: scaleX(var(--flip)) rotate(var(--tilt)) scale(0);
  transition: transform .9s cubic-bezier(.3,1.4,.5,1), opacity .6s ease; filter: saturate(.8); }
.po-sprout.on { opacity: .22; transform: scaleX(var(--flip)) rotate(var(--tilt)) scale(1); }
.po-card { position: relative; width: min(780px, 100%); display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: center; text-align: left; }
.po-hero { position: relative; width: 200px; height: 260px; margin: 0 auto; }
.po-hero .po-leaf { width: 200px; height: 258px; margin: 0; animation: po-sway 4s ease-in-out infinite; filter: drop-shadow(0 0 30px rgba(246,140,71,.35)); }
.po-badge { position: absolute; right: -26px; bottom: 34px; width: 92px; height: 92px; border-radius: 50%; background: #fff; color: var(--night);
  display: grid; place-items: center; align-content: center; gap: 2px; box-shadow: 0 10px 30px -8px rgba(0,0,0,.5), 0 0 0 6px rgba(255,255,255,.08); }
.po-badge svg { width: 36px; height: 36px; fill: none; stroke: var(--orange-2, #E8782F); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.po-badge-no { font-size: 10.5px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.po-badge.swap { animation: po-badge-in .45s cubic-bezier(.3,1.5,.5,1); }
.po.finished .po-badge { background: var(--orange); } .po.finished .po-badge svg { stroke: var(--night); } .po.finished .po-badge-no { color: var(--night); }
.po-big { position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; }
.po-big .po-pct { font-size: 15px; font-weight: 800; color: #fff; background: rgba(255,255,255,.1); padding: 4px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.po-title { font-size: 26px; margin: 0 0 4px; }
.po-sub { color: #F6C29E; font-weight: 700; font-size: 14px; margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.po-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.po-step { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,.45); font-weight: 650; font-size: 15px; transition: color .3s; }
.po-step-text { display: flex; flex-direction: column; }
.po-detail { font-size: 12.5px; font-weight: 600; color: #F6C29E; }
.po-detail:empty { display: none; }
.po-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); margin-top: 1px; position: relative; }
.po-step.now { color: #fff; }
.po-step.now .po-dot { border-color: rgba(246,140,71,.3); border-top-color: var(--orange); animation: po-spin .9s linear infinite; }
.po-step.done { color: rgba(255,255,255,.8); }
.po-step.done .po-dot { background: var(--orange); border-color: var(--orange); }
.po-step.done .po-dot::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--night); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@keyframes po-spin { to { transform: rotate(360deg); } }
@keyframes po-wave { to { transform: translateX(28px); } }
@keyframes po-badge-in { 0% { transform: scale(.6) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (max-width: 680px) {
  .po-card { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .po-hero { width: 150px; height: 196px; } .po-hero .po-leaf { width: 150px; height: 194px; }
  .po-badge { width: 76px; height: 76px; right: -34px; } .po-badge svg { width: 30px; height: 30px; }
  .po-steps { text-align: left; max-width: 340px; margin: 0 auto 16px; }
  .po-sprout { max-height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .po-hero .po-leaf, .po-wave, .po-step.now .po-dot, .po-badge.swap { animation: none; }
  .po-sprout, .po-rise { transition: none; }
}

/* Why these three v2: side-by-side comparison with pros and cons */
.lead.lead-v2 { display: block; }
.lead-v2 .lead-gist { margin-bottom: 16px; }
.wc-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; }
.wc { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.wc.medal-1 { border-top-color: #D4A63A; } .wc.medal-2 { border-top-color: #A7B1B6; } .wc.medal-3 { border-top-color: #B97A4A; }
.wc-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wc-head strong { font-size: 16px; color: var(--night); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-head .medal { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--display, inherit); }
.wc.medal-1 .medal { color: #5A3D00; background: radial-gradient(circle at 32% 28%, #fff 0 8%, #F3D27A 30%, #B8862B 80%); }
.wc.medal-2 .medal { color: #3E474C; background: radial-gradient(circle at 32% 28%, #fff 0 8%, #E9EDEF 30%, #8D979D 80%); }
.wc.medal-3 .medal { color: #4A2810; background: radial-gradient(circle at 32% 28%, #fff 0 8%, #E6B88E 30%, #9C5F33 80%); }
.wc-rate { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wc-rate span { font-size: 20px; font-weight: 800; color: var(--night); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.wc-rate small { font-size: 12px; font-weight: 700; color: var(--muted); }
.wc-why { margin: 0; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.wc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.wc-list li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; align-items: start; }
.wc-list li::before { display: grid; place-items: center; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; font-size: 10px; font-weight: 900; color: #fff; }
.wc-list.pros li::before { content: "✓"; background: var(--fit); }
.wc-list.cons li::before { content: "–"; background: #E3A92B; }
.wc-list.cons { padding-top: 6px; border-top: 1px dashed var(--line); }
.lead-extra { margin-top: 14px; border-top: 1px solid rgba(199,154,46,.3); padding-top: 10px; }
.lead-extra > summary { cursor: pointer; font-weight: 750; color: #8A6512; font-size: 14px; }
.lead-extra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 10px; font-size: 14px; }
.lead-extra-grid h3 { font-size: 13px; color: #8A6512; margin: 0 0 4px; }
.lead-extra-grid ul { margin: 0; padding-left: 18px; }
@media (max-width: 900px) { .wc-grid { grid-template-columns: 1fr; } }
@media print { .lead-extra[open], .lead-extra { display: block; } }
.sv-suggest { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 10px 0 4px; padding: 12px 14px; border-radius: 12px;
  background: var(--gold-wash, #FBF3DD); border: 1px solid rgba(199,154,46,.35); font-size: 14px; }
.sv-suggest p { margin: 0; flex: 1 1 320px; }

/* Deal priorities */
.pri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.pri { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.pri:hover { border-color: #A9B8AD; }
.pri:has(input:checked) { border-color: var(--orange); background: #FFF6EF; box-shadow: 0 0 0 1px var(--orange) inset; }
.pri input { margin-top: 3px; accent-color: var(--orange); }
.pri span { display: flex; flex-direction: column; gap: 2px; }
.pri small { color: var(--muted); font-size: 12.5px; }
.pri-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -6px 0 14px; }
.pri-chip { font-size: 12.5px; font-weight: 750; padding: 3px 10px; border-radius: 999px; background: #FFF1E6; color: #9A4A14; border: 1px solid #F6C29E; }
.pri-chip.note { font-weight: 600; background: #fff; color: var(--ink); border-color: var(--line); }
.hit-tag { font-size: 12px; font-weight: 750; padding: 3px 10px; border-radius: 999px; background: #F2F4F7; color: #3B4A55; border: 1px solid #D8DEE4; white-space: nowrap; }
.wc-sub { font-size: 12px; color: var(--muted); margin-top: -6px; }
.wc-hit { font-size: 12.5px; font-weight: 700; color: #3B4A55; }
.sub-body p.sub-head { font-weight: 800; color: var(--night); margin: 10px 0 4px; }
.sub-dots { margin: 0 0 8px; padding-left: 20px; }
.sub-dots li { margin: 2px 0; }
.sub-dots li::marker { color: var(--orange); }
.few-note { margin: -6px 0 14px; font-size: 13.5px; font-weight: 700; color: #8A6512; }

/* Debts to consolidate */
.cons-list { display: grid; gap: 6px; }
.cdebt { display: grid; grid-template-columns: 20px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.cdebt:has(input:checked) { border-color: var(--orange); background: #FFF6EF; box-shadow: 0 0 0 1px var(--orange) inset; }
.cdebt input { accent-color: var(--orange); }
.cons-name { font-weight: 700; color: var(--night); }
.cons-fig { font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cons-total { margin: 10px 0 0; font-weight: 700; color: var(--night); font-size: 14px; }
@media (max-width: 640px) { .cdebt { grid-template-columns: 20px 1fr; } .cons-fig { grid-column: 2; } }

/* Guides (admins only) */
.guides-head { margin-bottom: 18px; } .guides-head p { margin: 4px 0 0; }
.guides-body { display: grid; grid-template-columns: 270px 1fr; gap: 24px; align-items: start; }
.guides-body aside { position: sticky; top: 16px; display: grid; gap: 12px; }
.guide-list { display: grid; gap: 14px; }
.guide-sec h3 { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; font-weight: 800; }
.guide-sec a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 650; font-size: 14.5px; }
.guide-sec a:hover { background: var(--teal-wash); }
.guide-sec a[aria-current="true"] { background: var(--night); color: #fff; }
.guide { padding: 26px 30px; }
.guide-group { margin: 0; font-size: 13px; font-weight: 800; color: var(--orange-2, #E8782F); }
.guide h2 { margin: 2px 0 6px; font-size: 1.6rem; }
.guide-sum { color: var(--muted); margin: 0 0 18px; }
.guide-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 14px; }
.guide-steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; }
.guide-steps li::before { content: counter(step); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--teal-wash); color: var(--night); font-weight: 800; display: grid; place-items: center; font-size: 13px; }
.guide-steps strong { color: var(--night); }
.guide-steps p { margin: 2px 0 0; color: var(--ink); line-height: 1.55; }
.guide-tips { margin-top: 22px; padding: 14px 16px; border-radius: 12px; background: var(--gold-wash, #FBF3DD); border: 1px solid rgba(199,154,46,.3); }
.guide-tips h3 { margin: 0 0 6px; font-size: 14px; color: #8A6512; }
.guide-tips ul { margin: 0; padding-left: 18px; }
@media (max-width: 820px) { .guides-body { grid-template-columns: 1fr; } .guides-body aside { position: static; } .guide { padding: 20px; } }
.guides input[type=search] { width: 100%; padding: 10px 12px; border: 1px solid #C9D3CA; border-radius: 10px; font: inherit; background: #fff; }

/* Rate strip: tier on its own row (long tier names wrap), base and max side by side */
.rate-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rate-strip > div { min-width: 0; }
.rate-strip > div:first-child { grid-column: 1 / -1; }
.rate-strip > div:first-child strong { white-space: normal; }
.rate-strip strong { overflow-wrap: anywhere; }