/* ReportSample (the pivot, Nov 6): the one sample Compare Report design, rendered from
   assets/data/report-sample.json by scripts/render-report-sample.mjs. Self-contained: works on the
   new homepage and inside the older page templates alike. */
.rs{font-family:'DM Sans','DM Sans Fallback',system-ui,sans-serif;color:#1E2633;border:1px solid #D9DDE4;border-radius:12px;overflow:hidden;background:#FFFFFF;text-align:left}
.rs *{box-sizing:border-box}
.rs-head{background:#001C44;color:#FFFFFF;padding:20px 24px;display:flex;align-items:center;gap:16px}
.rs-head img{flex:none;height:44px;width:auto;display:block}
.rs-kicker{margin:0;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#00B0FF}
.rs-title{margin:2px 0 0;font-size:20px;line-height:1.3;font-weight:700;color:#FFFFFF}
.rs-meta{margin:4px 0 0;font-size:14px;line-height:1.5;color:#C5CFDF}
.rs-body{padding:24px;display:flex;flex-direction:column;gap:20px}
.rs-cards{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rs-card{border:1px solid #D9DDE4;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.rs-card .rs-k{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#3A4252}
.rs-card .rs-v{font-size:18px;line-height:1.25;font-weight:700;color:#001C44;margin-top:6px}
.rs-card .rs-who{font-size:14px;font-weight:700;color:#001C44}
.rs-card .rs-note{font-size:13px;line-height:1.45;color:#3A4252}
.rs-chip{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:700;letter-spacing:0;background:#FFFFFF;color:#001C44;border:1.5px solid #001C44}
/* Round 2 (R2-06, 8 Nov): navy and greys with one bright-blue accent, the lowest rate; the letters, not colour, tell S, T, A and R apart. */
.rs-card.rs-r{border-color:#00B0FF;box-shadow:inset 0 3px 0 #00B0FF}
.rs-table{position:relative;overflow-x:auto;border:1px solid #D9DDE4;border-radius:12px}
.rs-table table{width:100%;min-width:620px;border-collapse:collapse;font-size:13px;line-height:1.35;font-variant-numeric:tabular-nums}
.rs-table th,.rs-table td{padding:10px 7px;border-top:1px solid #E1E5EB;text-align:center;vertical-align:middle;color:#001C44}
.rs-table thead th{border-top:0;background:#001C44;color:#FFFFFF;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:bottom}
.rs-table thead th.rs-price{background:#001C44}
.rs-table th:first-child,.rs-table td:first-child{text-align:left;padding-left:12px}
.rs-table th:last-child,.rs-table td:last-child{text-align:left}
.rs-table tbody th{font-weight:700;white-space:nowrap}
.rs-table td{font-weight:600}
.rs-table td small{display:block;font-size:11px;font-weight:400;color:#5B6577}
.rs-table td.rs-lead{background:#E6F5FD}
.rs-table td .rs-chip{width:18px;height:18px;font-size:11px;margin-left:6px;vertical-align:middle}
.rs-table td.rs-sec{font-weight:400;line-height:1.4;min-width:120px}
.rs-table tr.rs-ineligible th,.rs-table tr.rs-ineligible td{color:#5B6577;font-weight:400;font-style:italic}
.rs-specialist{margin:0;background:#F3F4F7;border-radius:12px;padding:16px 20px;font-size:16px;line-height:1.5;color:#1E2633}
.rs-specialist b{color:#001C44}
.rs-caption{margin:12px 0 0;font-size:14px;line-height:1.5;color:#3A4252}
.rs-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* The report sizes itself to the space it's given, not the window (6 Nov): four cards in a row from
   840px of its own width (below that "Longest term" and "GSA + guarantee" wrapped: fit and alignment,
   6 Nov), two by two down to 440px, then a swipe row. */
.rs-figure{container:rs / inline-size}
@container rs (max-width:839px){
  .rs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container rs (max-width:640px){
  .rs-head{padding:16px}
  .rs-body{padding:16px}
}
@container rs (max-width:440px){
  .rs-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .rs-card{scroll-snap-align:start}
}
@supports not (container-type:inline-size){
  @media (max-width:760px){
    .rs-head{padding:16px}
    .rs-body{padding:16px}
    .rs-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
    .rs-card{scroll-snap-align:start}
  }
}

.rs-figure { margin: 0; min-width: 0; }
.rs--simple .rs-table table { min-width: 0; }
/* The S.T.A.R. legend under the table, and the compact table for the homepage and hubs (6 Nov) */
.rs-legend{margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;line-height:1.4;color:#3A4252}
.rs-legend__item{display:inline-flex;align-items:center;gap:6px}
.rs-legend .rs-chip{width:20px;height:20px;font-size:11px}
.rs--compact .rs-table table{min-width:520px}
/* The specialist note as a card (6 Nov, design review 11 §4): the right-hand visual of Commercial's
   "A specialist, from report to settlement" section; the note under that page's report is dropped, so
   it shows once. The figures are Lender A's own row from report-sample.json. */
.rs-notecard{margin:0;display:flex;flex-direction:column;gap:16px;padding:24px;background:#FFFFFF;border:1px solid #D9E1EC;border-radius:16px;box-shadow:0 12px 32px rgba(0,28,68,.08);color:#1E2633;min-width:0}
.rs-notecard__kicker{margin:0;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4A5568}
.rs-notecard__text{margin:0;font-size:clamp(18px,17.12px + .225vw,20px);line-height:1.45;font-weight:500;color:#001C44}
.rs-notecard__facts{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rs-notecard__facts div{min-width:0;padding:12px 14px;background:#F3F4F7;border-radius:12px}
.rs-notecard__facts dt{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:14px;color:#4A5568}
.rs-notecard__facts dt .rs-chip{margin:0}
.rs-notecard__facts dd{margin:0;font-size:17px;font-weight:600;color:#001C44;overflow-wrap:anywhere}
.rs-notecard__facts dd small{display:block;font-size:13px;font-weight:400;color:#4A5568}
.rs-notecard__facts .rs-notecard__watch{grid-column:1/-1;background:#F3F4F7}
.rs-notecard__facts .rs-notecard__watch dd{font-size:16px}
.rs-notecard__who{margin:0;font-size:14px;line-height:1.5;color:#4A5568}
@media (max-width:420px){.rs-notecard{padding:20px}.rs-notecard__facts{grid-template-columns:minmax(0,1fr);gap:8px}.rs-notecard__facts div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:10px 12px}.rs-notecard__facts dt{margin:0}.rs-notecard__facts dd{text-align:right}.rs-notecard__facts dd small{display:inline;margin-left:4px}.rs-notecard__facts .rs-notecard__watch dd{flex-basis:100%;text-align:left}}
/* The table's headings on one line, with room between them: "Loan amount" wrapped and "Repayment"
   met "Security & structure" (fit and alignment, 6 Nov) */
.rs-table thead th{white-space:nowrap;padding-left:10px;padding-right:10px}
.rs-table th:last-child,.rs-table td:last-child{padding-left:16px;padding-right:12px}
.rs-table tr.rs-soft th,.rs-table tr.rs-soft td{color:#3A4252;font-weight:400}
.rs-table tr.rs-soft td b{color:#001C44;font-weight:700}