/* /sba-loan-rates — "What rate are SBA borrowers really getting?"
   Step 1 is a white card: an odometer number and a field of every loan as a dot; filtering lights up your dots.
   Step 2 drops your rate in. The 504 view builds this month's rate up from its parts.
   Built on tokens.css and site.css (Portrait Text, ABC Marfa, paper). Motion stops under prefers-reduced-motion. */

:root {
  --sr-card: #FFFFFF;
  --sr-muted: rgba(27, 26, 25, 0.62);
  --sr-quiet: rgba(27, 26, 25, 0.46);
  --sr-hair: var(--ink-hairline);
  --sr-hair2: rgba(27, 26, 25, 0.2);
  --sr-blue: var(--ink-binder-blue);
  --sr-blue-soft: rgba(37, 99, 235, 0.08);
  --sr-warm: var(--ink-first-light-warm);
  --sr-cool: var(--ink-first-light-cool);
  --sr-warm-d: #DE9A6E;
  --sr-cool-d: #7F8EB4;
  --sr-good: #1F7A4D;
  --sr-bad: #B4471F;
  --sr-ease: cubic-bezier(0.16, 0.84, 0.24, 1);
  --sr-shadow: 0 1px 2px rgba(27, 26, 25, 0.04), 0 12px 32px rgba(27, 26, 25, 0.05);
}

.sr-page { padding: 0; }
.sr-page > .site-container:first-child { padding-bottom: 8px; } /* "Why your rate matters" and the summary below it are in <main> too */
.sr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; }
.sr-page [hidden], .sr-risk [hidden] { display: none !important; }
:where(.sr-page) :where(button, input, select) { font-family: var(--ink-sans); color: inherit; }

/* ---------- hero ---------- */
.sr-hero { padding: 56px 0 8px; }
.sr-hero__h1 {
  font-family: var(--ink-serif); font-weight: 400;
  font-size: clamp(38px, 5.6vw, 66px); line-height: 1.04; letter-spacing: -0.015em;
  margin: 14px 0 16px; max-width: 900px; text-wrap: balance;
}
.sr-hero__h1 em { font-style: italic; }
.sr-hero__lede { color: var(--sr-muted); font-size: 18px; line-height: 1.5; max-width: 640px; margin: 0; text-wrap: pretty; }
.sr-prog { display: inline-flex; margin-top: 26px; padding: 4px; border-radius: 999px; border: 1px solid var(--sr-hair2); background: var(--sr-card); }
.sr-prog button { border: 0; background: transparent; color: var(--sr-muted); padding: 9px 18px; border-radius: 999px; cursor: pointer; font-size: 15px; line-height: 1.2; transition: background 200ms var(--ink-ease), color 200ms var(--ink-ease); }
.sr-prog button[aria-selected="true"] { background: var(--ink-carbon); color: var(--ink-paper); }

/* ---------- step heads ---------- */
.sr-step { display: flex; align-items: center; gap: 12px; margin: 44px 0 14px; }
.sr-step__n { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink-carbon); display: grid; place-items: center; font-size: 14px; flex: none; }
.sr-step__h { font-family: var(--ink-serif); font-weight: 400; font-size: clamp(27px, 3.4vw, 38px); line-height: 1.1; margin: 0; text-wrap: balance; }
.sr-step__eye { margin-left: auto; }

.sr-card { background: var(--sr-card); border: 1px solid var(--sr-hair); border-radius: 16px; box-shadow: var(--sr-shadow); padding: 32px; position: relative; }
.sr-card + .sr-card { margin-top: 16px; }
/* the site header is sticky (72px): scrolling a card into view leaves its top line showing */
.sr-card, .sr-step { scroll-margin-top: 88px; }
.sr-reveal { transition: opacity 240ms var(--ink-ease); }
.sr-reveal.is-loading { opacity: 0.55; }

/* ---------- the reveal ---------- */
.sr-say { font-size: 18px; color: var(--sr-muted); margin: 0; min-height: 1.5em; }
.sr-say b { color: var(--ink-carbon); font-weight: 400; }
.sr-bigrow { display: flex; align-items: flex-end; gap: 18px 36px; flex-wrap: wrap; margin-top: 6px; }
.sr-big { font-family: var(--ink-serif); font-weight: 400; font-size: clamp(92px, 15vw, 168px); line-height: 0.95; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; min-height: 0.95em; }
.sr-od { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.sr-od > span { display: flex; flex-direction: column; transition: transform 1.5s var(--sr-ease); transition-delay: var(--d, 0s); }
.sr-od > span > span { height: 1em; line-height: 1em; display: block; }
.sr-big .sr-u { font-size: 0.4em; color: var(--sr-muted); margin-left: 6px; letter-spacing: 0; }
.sr-side { display: grid; gap: 10px; padding-bottom: 14px; }
.sr-tag { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--sr-muted); opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.5s; transition-delay: var(--d, 0s); }
.sr-tag.is-on { opacity: 1; transform: none; }
.sr-tag b { font-family: var(--ink-serif); font-weight: 400; font-size: 30px; color: var(--ink-carbon); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.sr-bench { font-size: 13px; color: var(--sr-quiet); min-height: 1.4em; }
.sr-bench .is-dn { color: var(--sr-good); }
.sr-bench .is-up { color: var(--sr-bad); }

.sr-galaxy-h { display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; align-items: baseline; margin-top: 26px; font-size: 13px; color: var(--sr-muted); }
.sr-galaxy-h b { color: var(--ink-carbon); font-weight: 400; }
.sr-galaxy { position: relative; margin-top: 10px; height: 360px; }
.sr-galaxy canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sr-gl { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--sr-muted); margin-top: 8px; }
.sr-gl i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
/* the site has one weight: the takeaway's lead is set apart by colour, not an underline (that would read as a link) */
.sr-insight { margin: 14px 0 0; font-size: 14px; color: var(--sr-muted); background: var(--ink-paper); border-radius: 10px; padding: 10px 14px; }
.sr-insight b { font-weight: 400; color: var(--ink-carbon); }

/* ---------- filters ---------- */
.sr-narrow { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--sr-hair); }
.sr-narrow__h { font-family: var(--ink-sans); font-size: 16px; font-weight: 400; margin: 0 0 14px; }
.sr-narrow__h span { color: var(--sr-muted); }
.sr-filters { display: grid; grid-template-columns: 1.5fr 1.4fr 0.9fr auto; gap: 12px; align-items: end; }
.sr-f { min-width: 0; }
.sr-f__lab { display: block; font-size: 12px; letter-spacing: var(--ink-track-caps); text-transform: uppercase; color: var(--sr-muted); margin-bottom: 7px; }
.sr-combo { position: relative; }
.sr-field { width: 100%; height: 46px; border: 1px solid var(--sr-hair2); background: var(--sr-card); border-radius: 10px; padding: 0 38px 0 14px; outline: none; font-size: 16px; text-overflow: ellipsis; transition: border-color 160ms var(--ink-ease), box-shadow 160ms var(--ink-ease), background 160ms var(--ink-ease); }
.sr-field::placeholder { color: rgba(27, 26, 25, 0.5); }
.sr-field:hover { border-color: rgba(27, 26, 25, 0.36); }
.sr-field:focus { border-color: var(--ink-carbon); box-shadow: 0 0 0 3px rgba(27, 26, 25, 0.08); }
.sr-field.is-set { border-color: var(--sr-blue); background: var(--sr-blue-soft); }
.sr-field--select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231B1A19' stroke-opacity='.6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; }
.sr-clear { position: absolute; right: 8px; top: 9px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--sr-muted); cursor: pointer; font-size: 18px; line-height: 1; }
.sr-clear:hover { background: rgba(27, 26, 25, 0.06); color: var(--ink-carbon); }
.sr-list { position: absolute; z-index: 20; left: 0; right: 0; top: 50px; background: var(--sr-card); border: 1px solid var(--sr-hair2); border-radius: 10px; box-shadow: 0 14px 40px rgba(27, 26, 25, 0.12); margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow-y: auto; }
.sr-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 7px; cursor: pointer; font-size: 15px; }
.sr-list li.is-on, .sr-list li:hover { background: var(--ink-paper); }
.sr-list .sr-nm { min-width: 0; }
.sr-list .sr-code, .sr-list .sr-meta { color: var(--sr-quiet); font-size: 12px; }
.sr-list .sr-code { margin-left: 6px; }
.sr-list .sr-meta { white-space: nowrap; }
.sr-list li.sr-empty { cursor: default; color: var(--sr-muted); background: none; }
.sr-toggle { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--sr-hair2); border-radius: 10px; background: var(--sr-card); cursor: pointer; white-space: nowrap; font-size: 15px; user-select: none; }
.sr-toggle[aria-checked="true"] { border-color: var(--sr-blue); background: var(--sr-blue-soft); }
.sr-sw { width: 34px; height: 20px; border-radius: 999px; background: var(--sr-hair2); position: relative; flex: none; transition: background 0.2s; }
.sr-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--sr-card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.2s; }
.sr-toggle[aria-checked="true"] .sr-sw { background: var(--sr-blue); }
.sr-toggle[aria-checked="true"] .sr-sw::after { transform: translateX(14px); }
.sr-picks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--sr-muted); }
.sr-pick { border: 1px solid var(--sr-hair2); background: transparent; border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 13px; transition: border-color 140ms var(--ink-ease), transform 140ms var(--ink-ease); }
.sr-pick:hover { border-color: var(--ink-carbon); transform: translateY(-1px); }
.sr-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sr-notes:empty { display: none; }
.sr-note { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; background: var(--ink-paper); border: 1px solid var(--sr-hair); border-radius: 14px; padding: 6px 12px; font-size: 13px; }
.sr-note button { border: 0; background: none; color: var(--sr-blue); cursor: pointer; padding: 0; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- the inline email step ---------- */
.sr-unlock { margin-top: 16px; border: 1px solid var(--ink-carbon); border-radius: 14px; background: var(--ink-paper); padding: 20px 22px; display: grid; gap: 14px; scroll-margin: 96px; }
.sr-unlock__h { font-family: var(--ink-serif); font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0; }
.sr-unlock__h span { color: var(--sr-blue); }
.sr-unlock__lead { margin: 4px 0 0; color: var(--sr-muted); }
.sr-u-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.sr-u-row input { height: 50px; border: 1px solid var(--sr-hair2); border-radius: 10px; padding: 0 14px; outline: none; font-size: 16px; background: var(--sr-card); min-width: 0; }
.sr-u-row input:focus { border-color: var(--ink-carbon); box-shadow: 0 0 0 3px rgba(27, 26, 25, 0.08); }
.sr-u-row input[aria-invalid="true"] { border-color: var(--sr-bad); }
.sr-u-go { height: 50px; }
.sr-qs { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.sr-qs__q { font-size: 13px; color: var(--sr-muted); margin-right: 2px; }
.sr-qs label { position: relative; }
.sr-qs input { position: absolute; opacity: 0; pointer-events: none; }
.sr-chip { display: inline-block; border: 1px solid var(--sr-hair2); border-radius: 999px; padding: 6px 13px; cursor: pointer; font-size: 14px; background: var(--sr-card); transition: background 140ms var(--ink-ease), color 140ms var(--ink-ease), border-color 140ms var(--ink-ease); }
.sr-chip:hover { border-color: var(--ink-carbon); }
.sr-qs input:checked + .sr-chip { background: var(--ink-carbon); color: var(--ink-paper); border-color: var(--ink-carbon); }
.sr-qs input:focus-visible + .sr-chip { outline: 2px solid var(--sr-blue); outline-offset: 2px; }
.sr-u-fine { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--sr-quiet); }
.sr-u-fine button { border: 0; background: none; color: var(--sr-muted); text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0; }
.sr-err { color: var(--sr-bad); font-size: 13px; margin: 0; }
.sr-err button { border: 0; background: none; font: inherit; color: var(--sr-blue); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 8px 2px; margin: -8px 0 -8px 2px; }
.sr-say:focus { outline: none; } /* focused after the email step, for screen readers and the next Tab */

/* ---------- details card ---------- */
.sr-details__top { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.sr-details__h { font-family: var(--ink-serif); font-weight: 400; font-size: 28px; line-height: 1.15; margin: 0; text-wrap: balance; }
.sr-chart { margin-top: 14px; position: relative; }
.sr-chart__ylab { font-size: 12px; color: var(--sr-muted); margin-bottom: 4px; }
.sr-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.sr-chart text { font-family: var(--ink-sans); font-size: 11px; fill: var(--sr-muted); }
.sr-chart .sr-end { font-family: var(--ink-serif); font-size: 18px; fill: var(--ink-carbon); font-variant-numeric: lining-nums; }
.sr-chart .sr-endk { font-size: 11px; fill: var(--sr-muted); }
.sr-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; color: var(--sr-muted); margin-top: 8px; }
.sr-legend i { display: inline-block; width: 22px; border-top: 2.5px solid var(--ink-carbon); vertical-align: middle; margin-right: 7px; }
.sr-legend i.is-d { border-top-style: dashed; }
.sr-legend i.is-g { border-top-color: #A9A6A1; border-top-width: 1.5px; }
.sr-legend i.is-b { border-top-color: var(--sr-blue); }
.sr-tip { position: absolute; pointer-events: none; background: var(--ink-carbon); color: var(--ink-paper); font-size: 12px; line-height: 1.45; border-radius: 8px; padding: 8px 10px; white-space: nowrap; transform: translate(-50%, -100%); z-index: 2; }
.sr-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; margin-top: 26px; }
.sr-tables:empty { display: none; }
.sr-tables h4 { font-family: var(--ink-sans); font-size: 12px; letter-spacing: var(--ink-track-caps); text-transform: uppercase; color: var(--sr-muted); font-weight: 400; margin: 0 0 8px; }
.sr-tbl { overflow-x: auto; }
.sr-tbl table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.sr-tbl th { text-align: left; font-weight: 400; font-size: 12px; color: var(--sr-muted); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--sr-hair2); white-space: nowrap; }
.sr-tbl td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--sr-hair); }
.sr-tbl .is-r { text-align: right; padding-right: 0; padding-left: 10px; white-space: nowrap; }
.sr-tbl tr.sr-row { cursor: pointer; }
.sr-tbl tr.sr-row:hover td, .sr-tbl tr.sr-row:focus-visible td { background: var(--ink-paper); }
.sr-tbl tr.sr-row:focus-visible { outline: 2px solid var(--sr-blue); outline-offset: -2px; }
.sr-lk { text-decoration: underline; text-decoration-color: var(--sr-hair2); text-underline-offset: 3px; }
.sr-best { font-size: 11px; color: var(--sr-good); background: rgba(31, 122, 77, 0.1); border-radius: 999px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; }
.sr-tcap { font-size: 12px; color: var(--sr-quiet); margin: 8px 0 0; }
/* the column a lender table is ranked by: darker, with its direction (screen readers get aria-sort instead) */
.sr-tbl th[aria-sort] { color: var(--ink-carbon); }
.sr-tbl th[aria-sort]::after { margin-left: 3px; }
.sr-tbl th[aria-sort="ascending"]::after { content: "\2191"; content: "\2191" / ""; }
.sr-tbl th[aria-sort="descending"]::after { content: "\2193"; content: "\2193" / ""; }
/* a picked lender's rank among the search's other lenders, and the note when no lender has enough loans to list */
.sr-rank7 { max-width: 36em; }
.sr-rank7 b { font-weight: 400; color: var(--ink-carbon); }
.sr-tables .sr-rank { margin: 0; grid-column: 1 / -1; }
.sr-rank button { border: 0; background: none; color: var(--sr-blue); cursor: pointer; padding: 0; font-size: 14px; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.sr-tables .sr-lnote { margin: 0; grid-column: 1 / -1; }
.sr-foot { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--sr-hair); font-size: 12px; color: var(--sr-muted); }
.sr-foot p { margin: 0 0 4px; }

/* ---------- Step 2: your rate ---------- */
.sr-compare { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px 44px; align-items: start; }
.sr-compare__intro { color: var(--sr-muted); margin: 0 0 18px; font-size: 16px; }
.sr-cform { display: grid; gap: 12px; }
.sr-cin { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sr-cin label { display: block; font-size: 12px; letter-spacing: var(--ink-track-caps); text-transform: uppercase; color: var(--sr-muted); margin-bottom: 7px; }
.sr-affix { position: relative; }
.sr-affix input { width: 100%; height: 54px; border: 1px solid var(--sr-hair2); border-radius: 10px; padding: 0 14px; outline: none; font-size: 22px; font-family: var(--ink-serif); background: var(--sr-card); font-variant-numeric: lining-nums tabular-nums; }
.sr-affix input:focus { border-color: var(--ink-carbon); box-shadow: 0 0 0 3px rgba(27, 26, 25, 0.08); }
.sr-affix--pre input { padding-left: 28px; }
.sr-affix--suf input { padding-right: 32px; }
.sr-affix span { position: absolute; top: 15px; color: var(--sr-muted); font-size: 18px; pointer-events: none; }
.sr-affix--pre span { left: 13px; }
.sr-affix--suf span { right: 13px; }
/* "Prime + [2.75] %": a quote as a spread over prime; "Quoted a fixed rate instead?" drops the prefix */
.sr-affix--prime input { padding-left: 84px; }
.sr-affix span.sr-affix__pf { left: 13px; right: auto; top: 17px; font-family: var(--ink-sans); font-size: 15px; }
.sr-affix--prime.is-fixed input { padding-left: 14px; }
.sr-affix--prime.is-fixed .sr-affix__pf { display: none; }
.sr-swap { display: block; border: 0; background: none; padding: 6px 0 0; color: var(--sr-muted); font-size: 12px; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sr-swap:hover { color: var(--ink-carbon); }
.sr-result { min-height: 220px; display: grid; align-content: start; gap: 14px; }
.sr-result__empty { color: var(--sr-quiet); font-size: 14px; border: 1px dashed var(--sr-hair2); border-radius: 12px; padding: 22px; }
.sr-verdict { font-family: var(--ink-serif); font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; margin: 0; text-wrap: balance; font-variant-numeric: lining-nums; }
.sr-verdict .is-g { color: var(--sr-good); }
.sr-verdict .is-r { color: var(--sr-bad); }
.sr-vsub { margin: 0; color: var(--sr-muted); }
.sr-strip { position: relative; height: 92px; }
.sr-strip canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sr-cheaper { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--sr-muted); }
.sr-cheaper button { border: 1px solid var(--sr-hair2); background: var(--sr-card); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 13px; text-align: left; }
.sr-cheaper button:hover { border-color: var(--ink-carbon); }
.sr-cheaper button b { font-weight: 400; color: var(--sr-good); margin-left: 4px; }

/* ---------- 504 ---------- */
.sr-wf { margin-top: 22px; display: grid; gap: 8px; }
.sr-wf__r { display: grid; grid-template-columns: 230px minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: 13px; }
.sr-wf__bar { height: 20px; position: relative; }
.sr-wf__bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; transform-origin: left; transform: scaleX(0); transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1); transition-delay: var(--d, 0s); }
.sr-wf.is-on .sr-wf__bar i { transform: none; }
.sr-wf__v { text-align: right; font-variant-numeric: tabular-nums; }
.sr-wf__r--tot { border-top: 1px solid var(--sr-hair2); padding-top: 8px; }
.sr-why { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.sr-why > div { background: var(--ink-paper); border-radius: 12px; padding: 14px 16px; font-size: 14px; }
.sr-why b { display: block; font-weight: 400; font-family: var(--ink-serif); font-size: 18px; margin-bottom: 4px; }
.sr-src { font-size: 12px; color: var(--sr-quiet); margin: 14px 0 0; }
.sr-src a { color: inherit; }

/* ---------- why it matters ---------- */
.sr-risk { padding-top: 56px; padding-bottom: 88px; }
.sr-risk__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px 56px; align-items: center; border-top: 1px solid var(--ink-carbon); padding-top: 40px; }
.sr-risk__h { font-family: var(--ink-serif); font-weight: 400; font-size: clamp(30px, 4vw, 46px); line-height: 1.06; margin: 12px 0 14px; text-wrap: balance; }
.sr-risk p { color: var(--sr-muted); font-size: 16px; margin: 0 0 18px; max-width: 520px; }
.sr-bars { display: grid; gap: 18px; }
.sr-bars__lab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; margin-bottom: 6px; }
.sr-bars__lab b { font-family: var(--ink-serif); font-size: 26px; font-weight: 400; line-height: 1; font-variant-numeric: lining-nums; }
.sr-bars__track { height: 18px; border-radius: 6px; background: var(--sr-hair); overflow: hidden; }
.sr-bars__fill { height: 100%; border-radius: 6px; }
.sr-bars__x { font-family: var(--ink-serif); font-size: 64px; line-height: 1; margin-top: 6px; font-variant-numeric: lining-nums; }
.sr-bars__x span { font-family: var(--ink-sans); font-size: 15px; color: var(--sr-muted); margin-left: 8px; }
.sr-bars__s { font-size: 12px; color: var(--sr-quiet); }

/* ---------- written in at build time (scripts/sba-rates/bake-page.mjs) ---------- */
/* The headline numbers are in the HTML as text. With scripts on (html.sr-live, set in the page's <head> before the
   first paint) the odometer takes their place, so the text waits unseen, as the empty slot did before the numbers
   loaded, instead of showing and rolling back to zero. Without scripts they show, and so do the tags beside them (the
   page's <noscript> rule); html.sr-off shows both when the API or js/sba-rates.js fails to load. */
.sr-live .sr-big__txt { visibility: hidden; }
.sr-live.sr-off .sr-big__txt { visibility: visible; }
.sr-off .sr-tag { opacity: 1; transform: none; }

/* ---------- the numbers behind this page: the plain-HTML summary at the bottom ---------- */
.sr-facts { padding-bottom: 96px; }
.sr-facts__in { border-top: 1px solid var(--ink-carbon); padding-top: 40px; }
.sr-facts__h { font-family: var(--ink-serif); font-weight: 400; font-size: clamp(30px, 4vw, 46px); line-height: 1.06; margin: 12px 0 16px; max-width: 900px; text-wrap: balance; }
.sr-facts__lede { color: var(--sr-muted); font-size: 18px; line-height: 1.5; max-width: 720px; margin: 0; text-wrap: pretty; }
.sr-facts__date { font-size: 12px; color: var(--sr-quiet); margin: 12px 0 0; }
.sr-facts__b { margin-top: 52px; }
.sr-facts__h3 { font-family: var(--ink-serif); font-weight: 400; font-size: 28px; line-height: 1.15; margin: 0 0 10px; text-wrap: balance; }
.sr-facts__p { color: var(--sr-muted); font-size: 16px; max-width: 680px; margin: 0 0 16px; text-wrap: pretty; }
.sr-facts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 40px 56px; }
.sr-facts__grid > div { min-width: 0; }
.sr-facts h4 { font-family: var(--ink-sans); font-size: 12px; letter-spacing: var(--ink-track-caps); text-transform: uppercase; color: var(--sr-muted); font-weight: 400; margin: 0 0 8px; }
.sr-facts .sr-tbl { max-width: 860px; }
.sr-facts .sr-tbl td small { display: block; font-size: 12px; color: var(--sr-quiet); margin-top: 2px; }
.sr-facts .sr-tbl tr.is-tot td { border-top: 1px solid var(--sr-hair2); }
.sr-facts a { color: inherit; text-underline-offset: 2px; }
.sr-faq { max-width: 860px; border-bottom: 1px solid var(--sr-hair); }
.sr-faq details { border-top: 1px solid var(--sr-hair); }
.sr-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 20px 0; font-family: var(--ink-serif); font-size: 21px; line-height: 1.3; text-wrap: balance; }
.sr-faq summary::-webkit-details-marker { display: none; }
.sr-faq summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-top: 7px; background: linear-gradient(var(--ink-carbon), var(--ink-carbon)) center / 14px 1px no-repeat, linear-gradient(var(--ink-carbon), var(--ink-carbon)) center / 1px 14px no-repeat; }
.sr-faq details[open] summary::after { background: linear-gradient(var(--ink-carbon), var(--ink-carbon)) center / 14px 1px no-repeat; }
.sr-faq summary:focus-visible { outline: 2px solid var(--sr-blue); outline-offset: 2px; }
.sr-faq p { margin: 0 0 22px; color: var(--sr-muted); font-size: 16px; line-height: 1.6; max-width: 64ch; }
.sr-facts__src { font-size: 13px; line-height: 1.6; color: var(--sr-muted); max-width: 760px; margin: 0; }

.sr-rise { animation: sr-rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) both; animation-delay: var(--d, 0s); }
@keyframes sr-rise { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 900px) {
  .sr-filters { grid-template-columns: 1fr 1fr; }
  .sr-f--len { grid-column: 1 / -1; }
  .sr-compare, .sr-risk__in { grid-template-columns: 1fr; }
  .sr-card { padding: 22px 18px; }
  .sr-wf__r { grid-template-columns: 170px minmax(0, 1fr) 56px; }
}
@media (max-width: 560px) {
  .sr-hero { padding-top: 32px; }
  .sr-hero__lede { font-size: 17px; }
  .sr-step { margin-top: 36px; }
  .sr-step__eye { display: none; }
  .sr-filters { grid-template-columns: 1fr; }
  .sr-toggle { width: 100%; }
  .sr-u-row { grid-template-columns: 1fr; }
  .sr-galaxy { height: 300px; }
  .sr-hide-sm { display: none; }
  .sr-tables { grid-template-columns: 1fr; }
  .sr-tables > div { min-width: 0; }
  .sr-tbl table { font-size: 13px; }
  .sr-tbl th { padding-right: 6px; }
  .sr-tbl td { padding: 10px 6px 10px 0; }
  .sr-tbl .is-r { padding-right: 0; padding-left: 6px; }
  .sr-affix input { font-size: 19px; padding: 0 10px; }
  .sr-affix--pre input { padding-left: 24px; }
  .sr-affix--suf input { padding-right: 28px; }
  .sr-affix--pre span { left: 10px; }
  .sr-affix--suf span { right: 10px; }
  .sr-affix--prime input { padding-left: 70px; }
  .sr-affix span.sr-affix__pf { left: 10px; top: 18px; font-size: 14px; }
  .sr-affix--prime.is-fixed input { padding-left: 10px; }
  .sr-wf__r { grid-template-columns: 1fr 56px; row-gap: 4px; }
  .sr-wf__bar { grid-column: 1 / -1; grid-row: 2; }
  .sr-bars__x { font-size: 52px; }
  .sr-risk { padding-top: 40px; padding-bottom: 64px; }
  .sr-facts { padding-bottom: 72px; }
  .sr-facts__lede { font-size: 17px; }
  .sr-facts__b { margin-top: 44px; }
  .sr-facts__h3 { font-size: 25px; }
  .sr-faq summary { font-size: 19px; padding: 18px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-od > span, .sr-tag, .sr-wf__bar i { transition: none !important; }
  .sr-rise { animation: none; }
}