/* =====================================================================
   BROADSHEET FOR EVERY PAGE (prototype v2, 2026-10-16)
   Ports the homepage's look (home.css, "Broadsheet") to the shared article and calculator
   components: hairline rules instead of boxes, square corners, mono kickers, the
   homepage type scale, no glow and no motion. Header, nav and footer are untouched:
   they are already identical on every page, homepage included.
   Scope: body.bs only. Loaded render-blocking after system.css, so no page paints the
   old look first. Palette tokens only; Inter and Space Mono only.
   PROTOTYPE NOTE: page bodies carry hand-typed inline styles, which beat any stylesheet,
   so this file uses !important and [style*=] selectors to reach them. The full rollout
   replaces those overrides with a one-time normaliser that turns the recurring inline
   styles into classes (see SPEC.md).
   ===================================================================== */

body.bs {
  --bs-rule: 1px solid var(--border-hi);
  --bs-rule-strong: 2px solid var(--text);
  --bs-gutter: 32px;
  font-feature-settings: "kern" 1;
}

/* ---- No motion, no glow (the homepage shows neither) ------------------------------- */
body.bs #scroll-progress { display: none !important; }
body.bs main .fade-up,
body.bs main .fade-up--hidden { opacity: 1 !important; transform: none !important; transition: none !important; }
body.bs main .card,
body.bs main .card::after,
body.bs main .prev-next-nav a { box-shadow: none !important; transform: none !important; }
body.bs main .card::after { display: none !important; }

/* ---- Square corners everywhere inside main ---------------------------------------- */
body.bs main :is(div, aside, section, figure, details, table, blockquote, img, canvas, a, button,
  input, select, textarea, span.verify-badge, span.verify-panel, .faq-icon, .step-num, li) {
  border-radius: 0 !important;
}

/* ---- Page header ----------------------------------------------------------------- */
body.bs .section-header { margin-bottom: 32px !important; }
body.bs .page-eyebrow,
body.bs .section-header > .tag.section-label {
  display: block;
  margin: 0 0 16px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-family: var(--font-mono);
  font-size: 11px !important;
  line-height: 1.45;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3) !important;
}
body.bs .page-eyebrow::before,
body.bs .section-header > .tag.section-label::before { content: none !important; }
body.bs main h1.display {
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-weight: 780 !important;
  font-size: clamp(36px, 4.4vw, 60px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.035em !important;
  word-spacing: 0.03em;
  text-wrap: balance;
  color: var(--text);
}
body.bs main h1.display .orange { color: var(--orange-fg) !important; background: none !important; -webkit-text-fill-color: currentColor; }
/* The review band reads like the homepage folio: one mono line between hairlines */
body.bs .review-band {
  margin: 0 0 24px !important;
  padding: 12px 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: var(--bs-rule) !important;
  border-bottom: var(--bs-rule) !important;
}
body.bs .review-band-row { gap: 4px 24px; }
body.bs .review-band-label { color: var(--text-3) !important; }
body.bs .review-band-item { color: var(--text-2); }
body.bs .review-band-note { margin-top: 8px; color: var(--text-3); }
body.bs main p.section-intro {
  margin: 0 0 32px;
  max-width: 34em !important;
  font-size: 20px !important;
  line-height: 1.55 !important;
  letter-spacing: -0.005em;
  color: var(--text-2);
}

/* ---- Notes under the header: rules and left bars, not boxes ------------------------ */
body.bs .scope-note,
body.bs .perspective-note {
  margin: 0 0 24px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}
body.bs .scope-note p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
body.bs .short-answer,
body.bs .answer-block .answer,
body.bs .plain-english {
  margin: 0 0 32px !important;
  padding: 4px 0 4px 16px !important;
  background: none !important;
  border: 0 !important;
  border-left: 2px solid var(--text) !important;
  box-shadow: none !important;
}
body.bs .short-answer-label,
body.bs .pe-label,
body.bs .kf-label,
body.bs .tool-note-title,
body.bs .tool-group-title,
body.bs main .sys-label {
  margin: 0 0 8px !important;
  font-family: var(--font-mono);
  font-size: 11px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3) !important;
}
body.bs .short-answer p { font-size: 19px !important; line-height: 1.55 !important; color: var(--text) !important; max-width: 40em; }
/* Do this now: a ruled row with the homepage's square primary button */
body.bs aside.do-now {
  margin: 0 0 32px !important;
  padding: 16px 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: var(--bs-rule) !important;
  border-bottom: var(--bs-rule) !important;
}
body.bs aside.do-now .do-now-text { color: var(--text); font-size: 17px; }
body.bs aside.do-now a.do-now-link,
body.bs main a.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 24px !important;
  background: var(--text) !important;
  color: var(--bg) !important;
  border: 0 !important;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  filter: none !important;
}
body.bs aside.do-now a.do-now-link::after { content: "\2192"; }
body.bs aside.do-now a.do-now-link:hover { background: var(--orange-fg) !important; color: var(--bg) !important; }
/* On this page: numbered index rows between hairlines */
body.bs details.toc {
  margin: 0 0 48px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: var(--bs-rule-strong) !important;
}
body.bs details.toc > summary {
  padding: 16px 0 8px !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
body.bs details.toc ol { counter-reset: bstoc; list-style: none !important; padding: 0 !important; column-gap: var(--bs-gutter); }
body.bs details.toc li { counter-increment: bstoc; display: flex; gap: 16px; padding: 10px 0; border-top: var(--bs-rule); break-inside: avoid; margin: 0 !important; }
body.bs details.toc li::before {
  content: counter(bstoc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
body.bs details.toc li a { color: var(--text) !important; text-decoration: none; background-image: none !important; }
body.bs details.toc li a:hover { color: var(--orange-fg) !important; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Section headings: the homepage's strong rule above each H2 -------------------- */
body.bs main h2.section-sub,
body.bs main section h2:not(.display):not(#next-steps-title):not(#sources-title) {
  margin: 64px 0 24px !important;
  padding-top: 24px !important;
  border-top: var(--bs-rule-strong) !important;
  font-family: var(--font-display) !important;
  font-weight: 750 !important;
  font-size: clamp(26px, 2.8vw, 36px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  color: var(--text) !important;
}
body.bs main .fade-up:first-child > h2.section-sub { margin-top: 16px !important; }
body.bs main h3:not(.display):not(.bs-keep) {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 21px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
}
body.bs main h4 {
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--text-3) !important;
}

/* ---- Links in prose: orange, with a plain underline instead of the animated one --- */
body.bs main section .container :is(p, li, td, dd) a[href]:not(.do-now-link):not(.btn-primary):not(.src-back):not(details.toc a):not(.page-end a):not(nav a) {
  background-image: none !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  padding-bottom: 0 !important;
  transition: none !important;
}
body.bs main section .container :is(p, li, td, dd) a[href]:hover { color: var(--text) !important; }

/* ---- Content boxes become rules and left-bar notes ---------------------------------- */
body.bs main :is(.key-fact, .callout, .key-takeaway, .region-note, .tool-note, .result-verdict, .tool-differs, .projection-note) {
  margin: 24px 0 !important;
  padding: 4px 0 4px 16px !important;
  background: none !important;
  border: 0 !important;
  border-left: 2px solid var(--text) !important;
  box-shadow: none !important;
  font-style: normal !important;
}
body.bs main .callout::before { content: none !important; }
body.bs main .callout p,
body.bs main .callout { font-size: 17px !important; line-height: 1.6 !important; color: var(--text) !important; font-style: normal !important; }
body.bs main .region-note__tag { background: none !important; padding: 0 !important; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3) !important; }
body.bs main .warn-card { padding: 4px 0 4px 16px !important; background: none !important; border: 0 !important; border-left: 3px solid var(--red) !important; }
body.bs main :is(.card, .concept-block, .step-card, .sgb-cell) {
  padding: 16px 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: var(--bs-rule) !important;
}
body.bs main .sgb-cell { border-top: var(--bs-rule-strong) !important; }
body.bs main .step-num { background: none !important; border: 1px solid var(--border-hi) !important; color: var(--text) !important; font-family: var(--font-mono); }
/* Hand-typed inline boxes: the fill and the rounded border go, a hairline stays */
body.bs main :is(div, aside, section, a, p, li)[style*="background:var(--bg-2)"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="background: var(--bg-2)"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="background:var(--bg-3)"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="background: var(--bg-3)"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="background:var(--card-bg)"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="background:rgba("]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="background: rgba("]:where(:not(.bsn-data)) {
  background: none !important;
  border: 0 !important;
  border-top: var(--bs-rule) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-shadow: none !important;
}
/* ...and boxes that had an accent bar keep a bar, in the homepage's colour (same specificity as
   the rule above and later in the file, so the bar wins) */
body.bs main :is(div, aside, section, a, p, li)[style*="border-left:3px solid var(--orange"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="border-left: 3px solid var(--orange"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="border-left:4px solid var(--orange"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="border-left:3px solid var(--green"]:where(:not(.bsn-data)) {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 2px solid var(--text) !important;
  padding-left: 16px !important;
}
/* Red warning and "not advice" boxes keep a red bar, like the homepage's urgent note */
body.bs main :is(div, aside, section, a, p, li)[style*="rgba(239,68,68"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="rgba(239, 68, 68"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="border-left:3px solid var(--red"]:where(:not(.bsn-data)) {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 3px solid var(--red) !important;
  padding-left: 16px !important;
}
/* Inline mono kickers drop the orange; the homepage keeps orange for the H1 word, big figures and hovers */
body.bs main div[style*="font-family:var(--font-mono)"][style*="color:var(--orange"],
body.bs main span[style*="font-family:var(--font-mono)"][style*="color:var(--orange"] { color: var(--text-3) !important; }

/* ---- Tables: hairline rows, mono headers, no fills --------------------------------- */
body.bs main table { border-collapse: collapse; background: none !important; }
body.bs main table :is(th, td) { background: none !important; border: 0 !important; border-bottom: var(--bs-rule) !important; }
body.bs main table thead th {
  border-bottom: var(--bs-rule-strong) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3) !important;
}
@media (max-width: 600px) {
  body.bs main table.table-stack tr { background: none !important; border: 0 !important; border-top: var(--bs-rule-strong) !important; padding: 12px 0 !important; }
}

/* ---- Figures, diagrams, charts ----------------------------------------------------- */
body.bs main figure.fif-illustration img { border-radius: 0 !important; }
body.bs main figure figcaption,
body.bs main figcaption.dg-cap {
  font-family: var(--font-mono) !important;
  font-style: normal !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.02em;
  text-align: left !important;
  color: var(--text-3) !important;
}
body.bs main figure.dg .dg-frame,
body.bs main .tool-chart,
body.bs main .tool-meter,
body.bs main .chart-wrap,
body.bs main .chart-block,
body.bs main .chart-box {
  background: none !important;
  border: 0 !important;
  border-top: var(--bs-rule) !important;
  border-bottom: var(--bs-rule) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.bs main figure.dg :is(.dg-node, .dg-box, .dg-cell, .dg-seg, .dg-bar) { border-radius: 0 !important; }

/* ---- Verify widget, glossary tips, FAQ --------------------------------------------- */
body.bs main span.verify-badge { background: none !important; border-radius: 0 !important; animation: none !important; }
body.bs main span.verify-panel { background: var(--bg) !important; border: 0 !important; border-top: var(--bs-rule) !important; border-bottom: var(--bs-rule) !important; border-left: 2px solid var(--orange-fg) !important; animation: none !important; }
body.bs main .term-tooltip { border-radius: 0 !important; box-shadow: none !important; border-color: var(--border-hi) !important; }
body.bs main .faq-item { background: none !important; border: 0 !important; border-top: var(--bs-rule) !important; box-shadow: none !important; }
body.bs main .faq-item.open,
body.bs main .faq-item[open] { background: none !important; border-left: 0 !important; }
body.bs main .faq-icon { border-radius: 0 !important; }

/* ---- Page end: next steps as ruled columns, not cards ------------------------------ */
body.bs section.page-end h2,
body.bs section.sources h2 {
  margin: 0 0 16px !important;
  font-family: var(--font-display) !important;
  font-weight: 750 !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  letter-spacing: -0.03em !important;
  border: 0 !important;
  padding: 0 !important;
}
body.bs section.page-end { border-top: var(--bs-rule-strong); padding-top: 24px !important; margin-top: 64px; }
body.bs .next-steps { gap: 0 var(--bs-gutter) !important; }
body.bs .next-step {
  padding: 16px 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: var(--bs-rule) !important;
  box-shadow: none !important;
}
body.bs .next-step--do { border-left: 0 !important; border-top: var(--bs-rule-strong) !important; }
body.bs .next-step .next-step-title { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
body.bs .next-step a { color: var(--text) !important; text-decoration: none !important; }
body.bs .next-step a:hover { color: var(--orange-fg) !important; text-decoration: underline !important; text-underline-offset: 3px; }
body.bs details.toc li a { text-decoration: none !important; }
body.bs details.toc li a:hover { text-decoration: underline !important; }
body.bs aside.discuss-block .share-action { background: none !important; border: 1px solid var(--border-hi) !important; border-radius: 0 !important; }
body.bs footer { margin-top: 64px; }

/* ---- Calculators --------------------------------------------------------------------- */
body.bs main .tool-question { margin-bottom: 8px; }
body.bs main .tool-group {
  padding: 16px 0 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: var(--bs-rule) !important;
}
body.bs main .tool-label { color: var(--text-3) !important; }
body.bs main :is(input[type="number"], input[type="text"], select, textarea),
body.bs main .tool-input,
body.bs main .input-affix {
  background: var(--bg) !important;
  border: 1px solid var(--border-hi) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.bs main :is(input[type="number"], input[type="text"], select, textarea):focus {
  border-color: var(--text) !important;
  outline: 2px solid var(--orange-fg) !important;
  outline-offset: 2px !important;
}
/* Results: the panel goes; numbers get the homepage's big-figure treatment */
body.bs main .result-card,
body.bs main .tool-output > div[style*="border"],
body.bs main .tool-output > div[style*="background"], body.bs main .tool-output > div.bsn-t-out-panel {
  padding: 16px 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: var(--bs-rule) !important;
  box-shadow: none !important;
}
body.bs main .result-card--accent { border-left: 0 !important; border-top: var(--bs-rule-strong) !important; }
body.bs main .result-label { color: var(--text-3) !important; }
body.bs main .result-value { font-weight: 700 !important; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
body.bs main .result-card--accent .result-value { color: var(--orange-fg) !important; font-size: clamp(36px, 4vw, 56px) !important; line-height: 1 !important; }
body.bs main .result-card--center { text-align: left !important; }
/* Hand-typed result numbers set in mono take the homepage's big-figure face: Inter 700, tabular */
body.bs main .tool-output [style*="font-family:var(--font-mono)"][style*="font-weight:700"] {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
body.bs main .tool-meter-track { border-radius: 0 !important; background: var(--border-hi) !important; }
body.bs main .tool-meter-fill { border-radius: 0 !important; }
/* Buttons: square; primary filled with the text colour like the homepage CTA */
body.bs main button:not(.faq-q):not(.verify-close):not(.share-action),
body.bs main .tool-actions button {
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.bs main button[style*="background:var(--orange)"],
body.bs main button[style*="background: var(--orange)"],
body.bs main .tool-btn-primary {
  background: var(--text) !important;
  color: var(--bg) !important;
  border: 0 !important;
}
body.bs main button[style*="background:var(--orange)"]:hover,
body.bs main .tool-btn-primary:hover { background: var(--orange-fg) !important; }
body.bs main .tool-actions button { background: none !important; border: 1px solid var(--border-hi) !important; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }
body.bs main .tool-actions button:hover { border-color: var(--text) !important; color: var(--text) !important; }
body.bs main details.tool-calc,
body.bs main details.tool-assumptions {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: var(--bs-rule) !important;
  border-bottom: var(--bs-rule) !important;
}
body.bs main details:is(.tool-calc, .tool-assumptions) > summary { padding: 14px 0 !important; color: var(--text-3) !important; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

/* =====================================================================
   v2 (2026-10-16), after the first review of the prototype:
   related links read as rows with arrows, one note style, an even section
   rhythm, heavier calculator results, comparison tables that scroll on phones.
   ===================================================================== */

/* ---- One note style: the same bar, padding, label and text everywhere --------------- */
body.bs main :is(.short-answer, .answer-block .answer, .plain-english, .key-fact, .callout, .key-takeaway,
  .region-note, .tool-note, .result-verdict, .tool-differs, .projection-note, .perspective-note) {
  margin: 32px 0 !important;
  padding: 2px 0 2px 20px !important;
  background: none !important;
  border: 0 !important;
  border-left: 2px solid var(--text) !important;
  box-shadow: none !important;
  font-style: normal !important;
}
body.bs main :is(div, aside, section, a, p, li)[style*="border-left:3px solid var(--orange"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="border-left: 3px solid var(--orange"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="border-left:4px solid var(--orange"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="border-left:3px solid var(--green"]:where(:not(.bsn-data)) {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
  padding: 2px 0 2px 20px !important;
}
body.bs main :is(div, aside, section, a, p, li)[style*="rgba(239,68,68"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="rgba(239, 68, 68"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, a, p, li)[style*="border-left:3px solid var(--red"]:where(:not(.bsn-data)),
body.bs main .warn-card {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
  padding: 2px 0 2px 20px !important;
}
body.bs main :is(.short-answer-label, .kf-label, .pe-label, .region-note__tag, .tool-note-title, .kt-title) {
  display: block;
  margin: 0 0 8px !important;
  padding: 0 !important;
  background: none !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--text-3) !important;
}
body.bs main :is(.key-fact, .callout, .key-takeaway, .region-note, .tool-note, .tool-differs, .plain-english) :is(p, li) {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
}
/* Back-to-back notes: a hairline between them instead of two floating bars */
body.bs main :is(.key-fact, .callout, .key-takeaway, .region-note, .tool-note, .tool-differs, .plain-english, .projection-note)
  + :is(.key-fact, .callout, .key-takeaway, .region-note, .tool-note, .tool-differs, .plain-english, .projection-note) {
  margin-top: -16px !important;
  padding-top: 18px !important;
  border-top: var(--bs-rule) !important;
}

/* ---- One section rhythm --------------------------------------------------------------- */
body.bs main section .container > .fade-up { margin-bottom: 48px !important; }
body.bs main :is(figure, .chart-wrap, .chart-block, .tool-chart, .stat-grid-big) { margin-bottom: 40px !important; }
body.bs main :is(div[style*="overflow-x:auto"], div[style*="overflow-x: auto"], .table-wrap), body.bs main div.bsn-t-scroll { margin: 24px 0 40px !important; }

/* ---- Where to go from here: the homepage's ruled link rows, with arrows ------------- */
body.bs .next-step .next-step-title { margin: 4px 0 0 !important; font-size: 18px !important; font-weight: 650 !important; letter-spacing: -0.01em; line-height: 1.35; }
body.bs .next-step .next-step-title a,
body.bs .next-step li > a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  color: var(--text) !important;
  text-decoration: none !important;
}
body.bs .next-step .next-step-title a::after,
body.bs .next-step li > a::after {
  content: "\2192";
  flex: none;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text-3);
}
body.bs .next-step .next-step-title a:hover,
body.bs .next-step li > a:hover,
body.bs .next-step .next-step-title a:hover::after,
body.bs .next-step li > a:hover::after { color: var(--orange-fg) !important; text-decoration: none !important; }
body.bs .next-step .next-step-title a:focus-visible,
body.bs .next-step li > a:focus-visible { outline: 2px solid var(--orange-fg); outline-offset: 3px; }
body.bs .next-step ul { gap: 0 !important; }
body.bs .next-step li { padding: 0 0 12px; border-top: var(--bs-rule); }
body.bs .next-step li:first-child { border-top: 0; }
body.bs .next-step li > a { font-size: 16px !important; font-weight: 650; min-height: 44px; }
body.bs .next-step li > span { margin-top: -6px; font-size: 14px !important; color: var(--text-2) !important; }
body.bs .next-step > p:not(.next-step-title) { margin: 0 !important; font-size: 15px !important; color: var(--text-2) !important; }

/* ---- Calculator results: the answer reads as the payoff -------------------------------- */
body.bs main .tool-layout > :not(.tool-inputs) { border-top: var(--bs-rule-strong); padding-top: 16px; }
body.bs main .result-value { font-size: clamp(28px, 2.8vw, 36px) !important; line-height: 1.05 !important; }
body.bs main .result-card--accent .result-value { font-size: clamp(44px, 4.6vw, 64px) !important; }
body.bs main .tool-output [style*="font-family:var(--font-mono)"][style*="font-weight:700"][style*="font-size:22px"] {
  font-size: clamp(28px, 2.8vw, 36px) !important;
  line-height: 1.1 !important;
}
body.bs main .tool-output [style*="font-family:var(--font-mono)"][style*="font-weight:700"][style*="font-size:18px"] {
  font-size: 19px !important;
  line-height: 1.45 !important;
}

/* ---- Comparison tables on phones: keep the grid, scroll sideways, pin the first column -- */
@media (max-width: 600px) {
  body.bs main table.table-stack:has(thead th:nth-child(3)) { display: table !important; width: auto !important; min-width: 100%; font-size: 14px !important; }
  body.bs main table.table-stack:has(thead th:nth-child(3)) thead { display: table-header-group !important; }
  body.bs main table.table-stack:has(thead th:nth-child(3)) tbody { display: table-row-group !important; }
  body.bs main table.table-stack:has(thead th:nth-child(3)) tr {
    display: table-row !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; background: none !important;
  }
  body.bs main table.table-stack:has(thead th:nth-child(3)) :is(th, td) {
    display: table-cell !important;
    min-width: 9em;
    padding: 10px 14px 10px 0 !important;
    vertical-align: top;
    text-align: left;
  }
  body.bs main table.table-stack:has(thead th:nth-child(3)) td { border-bottom: var(--bs-rule) !important; }
  body.bs main table.table-stack:has(thead th:nth-child(3)) td::before { content: none !important; display: none !important; }
  body.bs main table.table-stack:has(thead th:nth-child(3)) :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 7.5em;
    background: var(--bg) !important;
    box-shadow: 1px 0 0 var(--border-hi);
    font-weight: 600;
  }
  body.bs main :has(> table.table-stack:has(thead th:nth-child(3))) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* The results column opens with the strong rule, so its first row of result cards drops its own top rule */
body.bs main .tool-layout > :not(.tool-inputs) > .result-grid:first-child > .result-card { border-top: 0 !important; padding-top: 4px !important; }

/* =====================================================================
   v3 (2026-10-16), after a three-lens critique of v2 (homepage fidelity,
   the five refinements, accessibility and phone layout).
   ===================================================================== */

/* Notes keep the text measure (the homepage never runs a note past it), one text size, and red bars stay red */
body.bs main :is(.short-answer, .answer-block .answer, .plain-english, .key-fact, .callout, .key-takeaway, .region-note,
  .tool-note, .result-verdict, .tool-differs, .projection-note, .perspective-note, .warn-card),
body.bs main :is(div, aside, section, p)[style*="border-left:3px solid var(--orange"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, p)[style*="border-left: 3px solid var(--orange"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, p)[style*="solid var(--red)"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, p)[style*="rgba(239,68,68"]:where(:not(.bsn-data)) { max-width: 760px; }
body.bs main :is(p.tool-differs, p.projection-note, p.tool-note),
body.bs main :is(div, aside)[style*="solid var(--red)"] > p,
body.bs main :is(div, aside)[style*="rgba(239,68,68"] > p, body.bs main :is(div, aside).bsn-barnote-red > p {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
}
body.bs main :is(.callout, .key-fact, .key-takeaway, .tool-note, div, aside, section, p)[style*="solid var(--red)"]:where(:not(.bsn-data)),
body.bs main :is(div, aside, section, p)[style*="rgba(239,68,68"]:where(:not(.bsn-data)) {
  border-left: 3px solid var(--red) !important;
  padding-left: 20px !important;
}
body.bs main .tool-fineprint {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  color: var(--text-3) !important;
}
body.bs main .takeaways li::before { color: var(--text-3) !important; }

/* The breadcrumb keeps its plain links (the prose-link rule matched its li a) */
body.bs nav.page-breadcrumb a { text-decoration: none !important; background-image: none !important; }
body.bs nav.page-breadcrumb a:hover { text-decoration: underline !important; text-underline-offset: 3px; }

/* Verify badge: a plain underlined mono label, like the homepage's source markers, not an orange chip.
   Its invisible ::before keeps the 44px tap target. */
body.bs main span.verify-badge {
  display: inline !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin: 0 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  vertical-align: baseline !important;
  font-family: var(--font-mono);
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--orange-fg) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.bs main span.verify-badge:is(:hover, :focus-visible) { color: var(--orange-fg) !important; outline: 2px solid var(--orange-fg); outline-offset: 3px; }

/* Field and button edges at 3:1 or better (WCAG 1.4.11): --border-hi is 1.4:1 on --bg, --text-3 is 5.3:1 */
body.bs main :is(input[type="number"], input[type="text"], select, textarea),
body.bs main .tool-input,
body.bs main .input-affix,
body.bs main .tool-actions button,
body.bs aside.discuss-block .share-action { border-color: var(--text-3) !important; }

/* Calculator results: no doubled rules, one orange figure, the payoff full width on phones */
body.bs main .tool-meter { border-bottom: 0 !important; margin-bottom: 0 !important; }
body.bs main .tool-meter-track { background: var(--border-hi) !important; }
body.bs main .tool-meter-fill { background: var(--orange-fg) !important; }
body.bs main .result-grid ~ .result-grid .result-card--accent .result-value { color: var(--text) !important; }
/* v3.1: the Bitcoin scenario keeps its flag in the label, not a second orange figure */
body.bs main .result-grid ~ .result-grid .result-card--accent .result-label { color: var(--orange-fg) !important; }
body.bs main :is(.result-label, .review-band-label) { font-size: 11px !important; }
@media (max-width: 600px) {
  body.bs main .result-grid { grid-template-columns: 1fr 1fr !important; }
  body.bs main .result-grid > .result-card--accent { grid-column: 1 / -1; order: -1; }
  body.bs main .result-value { overflow-wrap: anywhere; }
  body.bs .review-band-sep { display: none !important; }
  body.bs .review-band-row { gap: 4px 16px !important; }
}
/* The phone result bar: a hairline and the big Inter figure, no orange rule or shadow */
@media (max-width: 768px) {
  body.bs main .tool-results-sticky { border-top: var(--bs-rule-strong) !important; box-shadow: none !important; }
  body.bs main .tool-results-sticky .trs-headline { font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: -0.02em; color: var(--text) !important; }
  /* A focused field scrolls clear of the pinned bar (69-79px tall at 200% and 400% zoom and on phones): WCAG 2.4.11,
     technique C43. Release 1.1: on the base and in release 1 Tab could leave fields behind the bar. */
  html:has(body.bs main .tool-results-sticky) { scroll-padding-bottom: 88px; }
}
/* The big result figure's text box (line-height 1, Inter's taller glyph box) ran 4px into the label under it at 200% and
   400% zoom (gate 2 overlap, release 1.1); room under the figure where a label follows it directly */
body.bs main .result-card--accent .result-value:has(+ .result-label) { margin-bottom: 0.12em !important; }

/* Where to go from here: every column opens on the same hairline; no strong rule that reads as an H2 underline */
body.bs .next-step--do { border-top: var(--bs-rule) !important; }
body.bs .next-step .next-step-title { margin-top: 8px !important; }
body.bs .next-step > p:not(.next-step-title) { margin-top: 0 !important; }
@media (max-width: 860px) { body.bs .next-step:first-child { border-top: 0 !important; padding-top: 4px !important; } }

/* Figures: diagram titles as grey kickers; captions in Inter so long ones stay readable */
body.bs main figure.dg .dg-title { color: var(--text-3) !important; }
body.bs main figure figcaption,
body.bs main figcaption.dg-cap {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  color: var(--text-2) !important;
}

/* Tables: regular-weight mono headers, cells flush with the rules */
body.bs main table thead th { font-weight: 400 !important; }
body.bs main table :is(th, td):first-child { padding-left: 0 !important; }

/* ---- Release 1: light-theme contrast where this look removes a fill that text depended on --------------------
   (axe on every page in both themes, 2026-10-16; the content base passes on these elements) */
/* the /wealth-gap/ comparison table sits on a panel hard-coded #111114 in both themes; with the cell fills gone its
   light-theme text is 1.9-2.6:1. The panel loses its fill too, like every hand-typed box here. */
body.bs main .fiatello-wrap { background: none; }
/* scenario figures on /bitcoin/ lose their card fill: brand orange as light-theme text is 2.2:1 */
body.bs.light-mode main .sc-value.orange { color: var(--orange-fg); }

/* bsn:classes:start (generated by tools/ia/normalise_styles.py from tools/ia/bsn-classmap.json; do not edit) */
body.bs main .bsn-barnote.bsn-barnote { border-left: 2px solid var(--text) !important; border-top: 0 !important; margin-bottom: 32px !important; margin-top: 32px !important; max-width: 760px !important; padding-bottom: 2px !important; padding-left: 20px !important; padding-top: 2px !important; }
body.bs main .bsn-barnote-link { border-left: 2px solid var(--text); display: block; margin-bottom: 32px; margin-top: 32px; padding-bottom: 2px; padding-left: 20px; padding-top: 2px; text-decoration: none; }
body.bs main .bsn-barnote-red { border-left: 3px solid var(--red); margin-bottom: 32px; margin-top: 32px; max-width: 760px; padding-bottom: 2px; padding-left: 20px; padding-top: 2px; }
body.bs main .bsn-barnote-wide.bsn-barnote-wide { border-left: 2px solid var(--text) !important; border-top: 0 !important; margin-bottom: 32px !important; margin-top: 32px !important; padding-bottom: 2px !important; padding-left: 20px !important; padding-top: 2px !important; }
body.bs main .bsn-btn-quiet.bsn-btn-quiet { background: var(--bg-2); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-top: 1px solid var(--border); color: var(--text-2); cursor: pointer; font-family: var(--font-mono); font-size: 13px; }
body.bs main .bsn-calc-summary.bsn-calc-summary { font-size: 13px; letter-spacing: 0.05em; }
body.bs main .bsn-card-link { color: inherit; display: block; text-decoration: none; transition: border-color 0.2s, transform 0.15s; }
body.bs main .bsn-cell-c.bsn-cell-c.bsn-cell-c { text-align: center; }
body.bs main .bsn-cell-c-mono.bsn-cell-c-mono.bsn-cell-c-mono { font-family: var(--font-mono); text-align: center; }
body.bs main .bsn-cell-ink { color: var(--text); }
body.bs main .bsn-cell-r.bsn-cell-r.bsn-cell-r { text-align: right; }
body.bs main .bsn-copy { color: var(--text-2); font-size: 16px; line-height: 1.7; }
body.bs main .bsn-copy-13-lh15 { color: var(--text-2); font-size: 13px; line-height: 1.5; }
body.bs main .bsn-copy-13-lh16 { color: var(--text-2); font-size: 13px; line-height: 1.6; }
body.bs main .bsn-copy-13-lh165 { color: var(--text-2); font-size: 13px; line-height: 1.65; }
body.bs main .bsn-copy-13-lh17 { color: var(--text-2); font-size: 13px; line-height: 1.7; }
body.bs main .bsn-copy-14 { color: var(--text-2); font-size: 14px; line-height: 1.7; }
body.bs main .bsn-copy-14-lh155 { color: var(--text-2); font-size: 14px; line-height: 1.55; }
body.bs main .bsn-copy-14-lh16 { color: var(--text-2); font-size: 14px; line-height: 1.6; }
body.bs main .bsn-copy-14-lh165 { color: var(--text-2); font-size: 14px; line-height: 1.65; }
body.bs main .bsn-copy-15 { color: var(--text-2); font-size: 15px; line-height: 1.7; }
body.bs main .bsn-copy-15-lh175 { color: var(--text-2); font-size: 15px; line-height: 1.75; }
body.bs main .bsn-field-label { color: var(--text-3); display: block; }
body.bs main .bsn-field-label-ls10 { color: var(--text-3); display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; }
body.bs main .bsn-field-label-sm { color: var(--text-3); font-size: 11px; }
body.bs main .bsn-fine-11-lh15 { color: var(--text-3); font-size: 11px; line-height: 1.5; }
body.bs main .bsn-fine-12 { color: var(--text-3); font-size: 12px; line-height: 1.6; }
body.bs main .bsn-fine-12-lh155 { color: var(--text-3); font-size: 12px; line-height: 1.55; }
body.bs main .bsn-fine-13-lh15 { color: var(--text-3); font-size: 13px; line-height: 1.5; }
body.bs main .bsn-fineprint { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; }
body.bs main .bsn-flex-8 { column-gap: 8px; display: flex; row-gap: 8px; }
body.bs main .bsn-fs-14 { font-size: 14px; }
body.bs main .bsn-fs-15 { font-size: 15px; }
body.bs main .bsn-fs-17 { font-size: 17px; }
body.bs main .bsn-gloss-alpha { border-top: var(--bs-rule); color: var(--orange-fg); font-family: var(--font-mono); font-size: 13px; font-weight: 600; min-width: 36px; text-align: center; text-decoration: none; }
body.bs main .bsn-gloss-pill-btc { background: rgba(247,147,26,0.08); border-bottom: 1px solid rgba(247,147,26,0.25); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid rgba(247,147,26,0.25); border-right: 1px solid rgba(247,147,26,0.25); border-top: 1px solid rgba(247,147,26,0.25); border-top-left-radius: 3px; border-top-right-radius: 3px; color: var(--text-3); display: inline-block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
body.bs main .bsn-gloss-pill-pf { background: rgba(96,165,250,0.05); border-bottom: 1px solid rgba(96,165,250,0.25); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid rgba(96,165,250,0.25); border-right: 1px solid rgba(96,165,250,0.25); border-top: 1px solid rgba(96,165,250,0.25); border-top-left-radius: 3px; border-top-right-radius: 3px; color: var(--accent-pf); display: inline-block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
body.bs main .bsn-gloss-pill-tax { background: rgba(16,185,129,0.08); border-bottom: 1px solid rgba(16,185,129,0.25); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid rgba(16,185,129,0.25); border-right: 1px solid rgba(16,185,129,0.25); border-top: 1px solid rgba(16,185,129,0.25); border-top-left-radius: 3px; border-top-right-radius: 3px; color: var(--accent-tax); display: inline-block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
body.bs main .bsn-gloss-pill-warn { background: rgba(245,158,11,0.08); border-bottom: 1px solid rgba(245,158,11,0.25); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid rgba(245,158,11,0.25); border-right: 1px solid rgba(245,158,11,0.25); border-top: 1px solid rgba(245,158,11,0.25); border-top-left-radius: 3px; border-top-right-radius: 3px; color: var(--color-warning); display: inline-block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
body.bs main .bsn-gloss-term-head { align-items: center; column-gap: 10px; display: flex; flex-wrap: wrap; row-gap: 10px; }
body.bs main .bsn-gloss-term-links { column-gap: 14px; display: flex; flex-wrap: wrap; row-gap: 8px; }
body.bs main .bsn-gloss-xref { border-bottom: 1px dotted rgba(247,147,26,0.35); color: var(--orange-fg); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-decoration: none; }
body.bs main .bsn-gloss-xref-muted { border-bottom: 1px dotted var(--border); color: var(--text-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-decoration: none; }
body.bs main .bsn-grid-240 { column-gap: 10px; display: grid; font-size: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); row-gap: 10px; }
body.bs main .bsn-illus { max-width: 720px; }
body.bs main .bsn-illus-img { background: #0e0e10; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-top: 1px solid var(--border); display: block; width: 100%; }
body.bs main .bsn-ink { color: var(--text); }
body.bs main .bsn-ink-green.bsn-ink-green { color: var(--green); }
body.bs main .bsn-ink-red.bsn-ink-red { color: var(--red); }
body.bs main .bsn-input-wide { background: var(--bg-3); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-top: 1px solid var(--border); font-family: var(--font-mono); width: 100%; }
body.bs main .bsn-label { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; }
body.bs main .bsn-label-10 { color: var(--text-3); font-family: var(--font-mono); font-size: 10px; }
body.bs main .bsn-label-10-ls10 { color: var(--text-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; }
body.bs main .bsn-label-10-ls12 { color: var(--text-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; }
body.bs main .bsn-label-flat { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; }
body.bs main .bsn-label-green { color: var(--green); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; }
body.bs main .bsn-label-ls08 { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; }
body.bs main .bsn-label-ls10 { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; }
body.bs main .bsn-label-ls14 { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; }
body.bs main .bsn-link.bsn-link { color: var(--orange-fg); }
body.bs main .bsn-link-bare { color: var(--orange-fg); text-decoration: none; }
body.bs main .bsn-link-block { border-top: var(--bs-rule); display: block; text-decoration: none; }
body.bs main .bsn-link-inherit.bsn-link-inherit.bsn-link-inherit.bsn-link-inherit.bsn-link-inherit { color: inherit; }
body.bs main .bsn-link-mono { color: var(--orange-fg); font-family: var(--font-mono); font-size: 11px; }
body.bs main .bsn-link-plain { color: var(--text); text-decoration: none; }
body.bs main .bsn-link-quiet { color: var(--text-2); text-decoration: none; }
body.bs main .bsn-link-row { background: none; border-bottom: 0; border-left: 0; border-right: 0; border-top: var(--bs-rule); color: var(--text-2); padding-left: 0; padding-right: 0; text-decoration: none; }
body.bs main .bsn-link-strong { font-weight: 600; }
body.bs main .bsn-list-14 { color: var(--text-2); font-size: 14px; line-height: 1.7; }
body.bs main .bsn-list-15 { color: var(--text-2); font-size: 15px; line-height: 1.85; }
body.bs main .bsn-list-15-lh18 { color: var(--text-2); font-size: 15px; line-height: 1.8; }
body.bs main .bsn-list-15-note { font-size: 15px; line-height: 1.85; }
body.bs main .bsn-list-16 { color: var(--text-2); font-size: 16px; line-height: 1.85; }
body.bs main .bsn-meta { color: var(--text-3); }
body.bs main .bsn-meta-13 { color: var(--text-3); font-size: 13px; font-weight: 400; }
body.bs main .bsn-meta-mono { color: var(--text-2); font-family: var(--font-mono); font-size: 11px; }
body.bs main .bsn-note-14 { font-size: 14px; line-height: 1.6; }
body.bs main .bsn-panel.bsn-panel { border-bottom: 0 !important; border-top: var(--bs-rule) !important; }
body.bs main .bsn-panel-center { border-top: var(--bs-rule); text-align: center; }
body.bs main .bsn-row-fill { background: var(--bg-3); }
body.bs main .bsn-row-rule { border-top: 1px solid var(--border); }
body.bs main .bsn-row-rule-b { border-bottom: 1px solid var(--border); }
body.bs main .bsn-scroll-x { margin-bottom: 40px; margin-top: 24px; overflow-x: auto; }
body.bs main .bsn-stack-10 { column-gap: 10px; display: flex; flex-direction: column; row-gap: 10px; }
body.bs main .bsn-stack-12 { column-gap: 12px; display: flex; flex-direction: column; row-gap: 12px; }
body.bs main .bsn-stack-14 { column-gap: 14px; display: flex; flex-direction: column; row-gap: 14px; }
body.bs main .bsn-stack-18 { column-gap: 18px; display: flex; flex-direction: column; row-gap: 18px; }
body.bs main .bsn-stack-8 { column-gap: 8px; display: flex; flex-direction: column; row-gap: 8px; }
body.bs main .bsn-stack-8-14 { column-gap: 8px; display: flex; flex-direction: column; font-size: 14px; row-gap: 8px; }
body.bs main .bsn-table-wide.bsn-table-wide.bsn-table-wide { font-size: 14px; min-width: 640px; }
body.bs main .bsn-text-13 { color: var(--text-2); font-size: 13px; }
body.bs main .bsn-text-2 { color: var(--text-2); }
body.bs main .bsn-title { font-weight: 600; }
body.bs main .bsn-title-15 { font-size: 15px; font-weight: 600; }
body.bs main .bsn-title-15-b { font-size: 15px; font-weight: 700; }
body.bs main .bsn-title-15-ink { color: var(--text); font-size: 15px; font-weight: 600; }
body.bs main .bsn-title-16-b { font-size: 16px; font-weight: 700; }
body.bs main .bsn-title-17 { color: var(--text); font-size: 17px; font-weight: 700; }
body.bs main .bsn-title-20-b { font-size: 20px; font-weight: 700; }
body.bs main .bsn-tool-hint { font-size: 11px; color: var(--text-3); margin-top: 4px; }
body.bs main .bsn-tool-input { width: 100%; padding: 9px 12px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-family: var(--font-mono); font-size: 13px; }
body.bs main .foo-btn { background: var(--bg-3); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-top: 1px solid var(--border); cursor: pointer; flex-basis: 0%; flex-grow: 1; font-size: 14px; min-height: 44px; }
body.bs main .bsn-mb-10 { margin-bottom: 10px; }
body.bs main .bsn-mb-12 { margin-bottom: 12px; }
body.bs main .bsn-mb-14 { margin-bottom: 14px; }
body.bs main .bsn-mb-16 { margin-bottom: 16px; }
body.bs main .bsn-mb-20 { margin-bottom: 20px; }
body.bs main .bsn-mb-24 { margin-bottom: 24px; }
body.bs main .bsn-mb-3 { margin-bottom: 3px; }
body.bs main .bsn-mb-32 { margin-bottom: 32px; }
body.bs main .bsn-mb-4 { margin-bottom: 4px; }
body.bs main .bsn-mb-44 { margin-bottom: 44px; }
body.bs main .bsn-mb-48 { margin-bottom: 48px; }
body.bs main .bsn-mb-6 { margin-bottom: 6px; }
body.bs main .bsn-mb-8 { margin-bottom: 8px; }
body.bs main .bsn-mt-0.bsn-mt-0 { margin-top: 0; }
body.bs main .bsn-mt-10 { margin-top: 10px; }
body.bs main .bsn-mt-14.bsn-mt-14 { margin-top: 14px; }
body.bs main .bsn-mt-16 { margin-top: 16px; }
body.bs main .bsn-mt-18 { margin-top: 18px; }
body.bs main .bsn-mt-20 { margin-top: 20px; }
body.bs main .bsn-mt-24 { margin-top: 24px; }
body.bs main .bsn-mt-28 { margin-top: 28px; }
body.bs main .bsn-mt-4.bsn-mt-4 { margin-top: 4px; }
body.bs main .bsn-mt-56 { margin-top: 56px; }
body.bs main .bsn-mt-6 { margin-top: 6px; }
body.bs main .bsn-mt-8 { margin-top: 8px; }
body.bs main .bsn-my-0 { margin-top: 0; margin-bottom: 0; }
body.bs main .bsn-my-32 { margin-top: 32px; margin-bottom: 32px; }
body.bs main .bsn-p-10 { padding: 10px; }
body.bs main .bsn-p-10-0-10-10 { padding: 10px 0 10px 10px; }
body.bs main .bsn-p-10-12 { padding: 10px 12px; }
body.bs main .bsn-p-10-14 { padding: 10px 14px; }
body.bs main .bsn-p-12-16.bsn-p-12-16 { padding: 12px 16px; }
body.bs main .bsn-p-2-8 { padding: 2px 8px; }
body.bs main .bsn-p-8-0-8-10 { padding: 8px 0 8px 10px; }
body.bs main .bsn-p-8-10 { padding: 8px 10px; }
body.bs main .bsn-p-8-12 { padding: 8px 12px; }
body.bs main .bsn-p-8-14 { padding: 8px 14px; }
body.bs main .bsn-p-9-12.bsn-p-9-12 { padding: 9px 12px; }
body.bs main .bsn-pb-1 { padding-bottom: 1px; }
body.bs main .bsn-pb-10 { padding-bottom: 10px; }
body.bs main .bsn-pb-8 { padding-bottom: 8px; }
body.bs main .bsn-pl-20 { padding-left: 20px; }
body.bs main .bsn-pl-22 { padding-left: 22px; }
body.bs main .bsn-pl-24 { padding-left: 24px; }
body.bs main .bsn-pr-10 { padding-right: 10px; }
body.bs main .bsn-pt-10 { padding-top: 10px; }
body.bs main .bsn-pt-8 { padding-top: 8px; }
body.bs main .bsn-px-12 { padding-left: 12px; padding-right: 12px; }
body.bs main .bsn-px-14 { padding-left: 14px; padding-right: 14px; }
body.bs main .bsn-py-10.bsn-py-10 { padding-top: 10px; padding-bottom: 10px; }
body.bs main .bsn-py-14 { padding-top: 14px; padding-bottom: 14px; }
body.bs main .bsn-py-16 { padding-top: 16px; padding-bottom: 16px; }
body.bs main .bsn-py-18 { padding-top: 18px; padding-bottom: 18px; }
body.bs main .bsn-py-20 { padding-top: 20px; padding-bottom: 20px; }
body.bs main .bsn-py-24 { padding-top: 24px; padding-bottom: 24px; }
body.bs main .bsn-py-8 { padding-top: 8px; padding-bottom: 8px; }
/* bsn:classes:end */

/* /banking/ "$1,000 over the years" bars (#vizThousandBars, written by the page's inline script): the value figure beside
   each bar was drawn in the bar's own colour (translucent red, #d4a05a, #f7931a), under 4.5:1 on the light background.
   The figure takes the text colour; the bar keeps its data colour (S7, PLAN.md release 1). */
body.bs main #vizThousandBars > div > div:first-child > span:last-child { color: var(--text) !important; }

/* Class-styled runtime markup (S7). tools/ia/build_overrides.py models only inline style= writes; these scripts write
   markup whose orange or data colour comes from a class in the page's own <style>, or a template the scan saw land in
   two of its three containers. Same rules as the generated block: orange text in runtime markup takes --text (T1)
   except each tool's one orange figure (the largest runtime orange figure on a tool with no static orange figure, as
   the builder picks for 5 others; allowed in tools/ia/runtime-probe-allow.json); toggles render as C3; text in a data
   colour takes a text token while the dot, circle or bar keeps the colour (as #vizThousandBars above). */
body.bs main #bkOutput .bk-headline, body.bs main #bkOutput .bk-kicker-label, body.bs main #bkOutput .bk-value.hs-orange,
body.bs main #hsOutput .hs-divider, body.bs main #ccOutput .cc-scenario.best .cc-scenario-label,
body.bs main #saOutput .sa-total-label, body.bs main #poOptPP > div > strong:first-child { color: var(--text) !important; }
body.bs main #bkCurrentPicker .bk-apy, body.bs main #bkYearsPicker .bk-yr { background: none !important; border: 1px solid var(--text-3) !important; border-radius: 0 !important; }
body.bs main #bkCurrentPicker .bk-apy.bk-apy-on, body.bs main #bkYearsPicker .bk-yr.bk-yr-on { background: var(--text) !important; color: var(--bg) !important; border: 1px solid var(--text) !important; border-radius: 0 !important; }
/* /bitcoin-price-history/ event list (js/page/price-history.js): the numbered circle keeps the event colour; the key,
   price, name and detail took the event colour or near-white (rgba(255,255,255,0.7/0.85)), unreadable in light. */
body.bs main #priceHistoryEvents > div > div:nth-child(2), body.bs main #priceHistoryEvents > div > div:nth-child(3) > span { color: var(--text-2) !important; }
body.bs main #priceHistoryEvents > div > div:nth-child(3), body.bs main #priceHistoryEvents > div > div:nth-child(2) > span,
body.bs main #priceHistoryEvents > div > div:nth-child(3) > strong { color: var(--text) !important; }
/* /tools/paycheck-allocator/ priority badges: the number sat in its category colour on a 12% tint of that colour (owner
   call, section 11 item 8, under 4.5:1 either way); the number takes --text, the tinted circle keeps the colour. */
body.bs main #pa-priorities .pa-priority-grid > div:first-child { color: var(--text) !important; }

/* bsn:overrides:start */
/* Runtime override layer (S7), generated by tools/ia/build_overrides.py from tools/ia/overrides.json, which holds every rule's reason, pages and records. Do not edit. */
/* T1: orange text in runtime markup (not links) -> --text */
body.bs main :is(#nwBtcCallout,#m401Longterm,#barZeroTest,#csBottom,#csCost,#csAdvantage,#colIncomeNeeded,#colLivingWage,#colSavingsRate,#colOpCost,#colNextStep,#debtBreakeven,#result,#dbDetail,#dtiAssessText,#dtiPayoffList,#evGrants,#erNarrative,#fiBtcMilestoneText,#hsRentOutput,#ibHeadline,#inEstateText,#joVerdict,#lnVerdict,#lsContext,#mdBreakdown,#mbProjection,#nmNextText,#nmSovereignty,#nwpProjContent,#nwTips,#ocRevOneTime,#ocRevMonthly,#ocGiveUp,#poCurrentPP,#poInsight,#pnBreakeven,#pnLumpInfo,#pibHeroThen,#rtAtRet,#rcBreakeven,#rcRecText,#rcAca,#rvtWinner,#snCareer,#srFireDate,#srWhatIfOut,#svNegotiable,#saOutput,#teOutRefundText,#teOutBreakdown,#teOptimize,#teProjOut,#tlhAfter,#uxVerdictText) strong[style*="color:var(--orange"],
body.bs main :is(#cbTableBody,#feeCompareBody,#hvTableBody,#dvi-tbody,#ibTableBody,#mvCompareBody,#ocRecurBody,#ocPresetBody,#pa-table,#pibTableBody,#rcTableBody,#ssBreakevenBody) td[style*="color:var(--orange"],
body.bs main :is(#bbResults,#cpuResults,#nmTrack,#saTable,#srTable,#slTable,#teOutBreakdown,#wmTable) div[style*="color:var(--orange"],
body.bs main :is(#colLivingWage,#rmdTableBody,#rvtNetTrad,#rvtNetRoth,#satExamples,#svBreakdown,#slTable) span[style*="color:var(--orange"],
body.bs main #pa-priorities div[style*="color:#f7931a" i],
body.bs main #snBottom strong[style*="color:var(--orange"]:not([style*="font-size:22px"]),
body.bs main #teStateDetail p[style*="color:var(--orange"],
body.bs main #teStateDetail summary[style*="color:var(--orange"]{color:var(--text) !important}
/* T3: runtime panel fills -> hairline */
body.bs main #nwLegend span[style*="background:var(--bg-3)"],
body.bs main #bxQuestions fieldset[style*="background:var(--bg-2)"],
body.bs main #pa-table tr[style*="background:var(--bg-3)"]{background:none !important;border:0 !important;border-top:var(--bs-rule) !important;padding-left:0 !important;padding-right:0 !important;box-shadow:none !important}
/* T4: radius and shadow in runtime markup */
body.bs main :is(#nwLegend,#payBreakdown,#pa-legend,#pa-table) span[style*="border-radius"],
body.bs main :is(#bkOutput,#pxAcctList) p[style*="border-radius"],
body.bs main #bxQuestions label[style*="border-radius"],
body.bs main #bxQuestions fieldset[style*="border-radius"]{border-radius:0 !important}
/* T5: left bars and edges in runtime markup */
body.bs main #pxWarnings div[style*="border-left:3px solid #ef4444" i]{border-top:0 !important;border-bottom:0 !important;border-left:3px solid var(--red) !important;padding-left:20px !important}
body.bs main #colAllocation div[style*="border-left:3px solid var(--color-warning)"]{border-top:0 !important;border-bottom:0 !important;border-left:2px solid var(--color-warning) !important;padding-left:20px !important}
body.bs main #slTable div:is([style*="border-left:3px solid var(--text-2)"],[style*="border-left:3px solid var(--text)"]),
body.bs main #wsNotes div[style*="border-left:3px solid var(--text-3)"]{border-top:0 !important;border-bottom:0 !important;border-left:2px solid var(--text) !important;padding-left:20px !important}
/* T6: buttons in runtime markup */
body.bs main #pibRows button[style*="background:var(--bg-2)"]{background:none !important;border:1px solid var(--text-3) !important}
/* T7: mono bold figures -> Inter, tabular */
body.bs main :is(#colCompareOut,#slTable) div[style*="font-family:var(--font-mono)"][style*="font-weight:700"]{font-family:var(--font-display) !important;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
/* T8: tinted fills in runtime markup */
body.bs main #pdTableBody [style*="background:rgba(255,75,75"]{background:none !important;border-left:3px solid var(--red) !important;padding-left:20px !important}
body.bs main #mmcTbody tr[style*="background:rgba(34,197,94"]{background:none !important}
/* T9: literal text colours -> tokens */
body.bs main #svNCRisk strong[style*="color:#F59E0B" i]{color:var(--color-warning) !important}
body.bs main #result strong[style*="color:#4caf50" i],
body.bs main #dvi-tbody td[style*="color:#4caf50" i],
body.bs main #result span[style*="color:#4caf50" i],
body.bs main #teOutRefundText strong[style*="color:#9EE493" i]{color:var(--green) !important}
body.bs main #result strong[style*="color:#ef5350" i]{color:var(--red) !important}
body.bs main #priceHistoryEvents div[style*="color:rgba(255,255,255,0.85)" i]{color:var(--text) !important}
body.bs main #priceHistoryEvents div[style*="color:rgba(255,255,255,0.7)" i],
body.bs main #priceHistoryEvents span[style*="color:rgba(255,255,255,0.7)" i]{color:var(--text-2) !important}
/* C1: verdict cards and boxes: the state colour on the bar (orange -> --text) */
body.bs main :is(#whatIfDelta,#ff-guidance,#prAlert,#brExplanation,#bbVerdict,#cpuVerdict,#dcRec,#dtiFrontCard,#dtiBackCard,#fooResult,#feRec,#lnOnchainCard,#lnLightningCard,#npvVerdict,#rrVerdict,#rfRecommendation,#rsHeroBox,#ycStatus){background:none !important;box-shadow:none !important;border-top:0 !important;border-right:0 !important;border-bottom:0 !important;border-left-width:2px !important;border-left-style:solid !important;border-radius:0 !important;padding-left:20px !important}
body.bs main #rtVerdict{background:none !important;box-shadow:none !important;border-left:0 !important;border-right:0 !important;border-bottom:0 !important;border-top-width:2px !important;border-top-style:solid !important;border-radius:0 !important;padding-left:0 !important;padding-right:0 !important}
body.bs main :is(#whatIfDelta,#ff-guidance,#dtiFrontCard,#dtiBackCard,#lnOnchainCard),
body.bs main #whatIfDelta[style*="border-left-color: rgb(247, 147, 26)"],
body.bs main :is(#ff-guidance,#dtiFrontCard,#dtiBackCard,#lnOnchainCard,#prAlert,#brExplanation,#bbVerdict,#cpuVerdict,#dcRec,#fooResult,#feRec,#lnLightningCard,#npvVerdict,#rrVerdict,#rfRecommendation,#ycStatus)[style*="border-left-color: var(--orange)"],
body.bs main #rsHeroBox[style*="border-left-color: var(--orange-fg)"]{border-left-color:var(--text) !important}
body.bs main :is(#prAlert,#brExplanation,#bbVerdict,#cpuVerdict,#dcRec,#fooResult,#feRec,#lnLightningCard,#npvVerdict,#rrVerdict,#rfRecommendation,#rsHeroBox,#ycStatus),
body.bs main :is(#cpuVerdict,#dcRec,#fooResult,#feRec,#npvVerdict,#ff-guidance)[style*="border-left-color: var(--text-3)"]{border-left-color:var(--text-3) !important}
body.bs main #rtVerdict{border-top-color:var(--text) !important}
body.bs main #whatIfDelta[style*="border-left-color: rgb(85, 85, 96)"]{border-left-color:#555560 !important}
body.bs main :is(#ff-guidance,#prAlert,#brExplanation,#bbVerdict,#cpuVerdict,#dcRec,#fooResult,#feRec,#npvVerdict,#rrVerdict,#rfRecommendation,#rsHeroBox,#ycStatus)[style*="border-left-color: var(--green)"]{border-left-color:var(--green) !important}
body.bs main :is(#ff-guidance,#brExplanation,#bbVerdict,#cpuVerdict,#fooResult,#feRec,#npvVerdict,#rrVerdict,#rfRecommendation,#rsHeroBox,#ycStatus)[style*="border-left-color: var(--red)"]{border-left-color:var(--red) !important}
body.bs main :is(#dtiFrontCard,#dtiBackCard)[style*="border-left-color: rgb(132, 204, 22)"]{border-left-color:#84cc16 !important}
body.bs main :is(#dtiFrontCard,#dtiBackCard)[style*="border-left-color: rgb(234, 179, 8)"]{border-left-color:#eab308 !important}
body.bs main :is(#dtiFrontCard,#dtiBackCard)[style*="border-left-color: rgb(239, 68, 68)"]{border-left-color:#ef4444 !important}
body.bs main :is(#dtiFrontCard,#dtiBackCard)[style*="border-left-color: rgb(249, 115, 22)"]{border-left-color:#f97316 !important}
body.bs main :is(#dtiFrontCard,#dtiBackCard)[style*="border-left-color: rgb(34, 197, 94)"]{border-left-color:#22c55e !important}
body.bs main :is(#lnOnchainCard,#lnLightningCard)[style*="border-left-color: var(--border)"]{border-left-color:var(--border) !important}
body.bs main #rtVerdict[style*="border-color: var(--color-warning)"]{border-top-color:var(--color-warning) !important}
body.bs main #rtVerdict[style*="border-color: var(--green)"]{border-top-color:var(--green) !important}
body.bs main #rtVerdict[style*="border-color: var(--red)"]{border-top-color:var(--red) !important}
body.bs main #powChain > div[style*="solid rgb(247, 147, 26)"],
body.bs main #powMiners > div[style*="border-color: rgb(247, 147, 26)"]{border-color:var(--text) !important}
body.bs main :is(#powChain,#powMiners) > div[style*="rgba(247, 147, 26"]{background:none !important}
body.bs main :is(#whatIfDelta,#ff-guidance){margin-top:32px !important;margin-bottom:32px !important;padding:2px 0 2px 20px !important;max-width:760px}
body.bs main :is(#dtiBackCard,#dtiFrontCard,#lnOnchainCard){margin-top:32px !important;margin-bottom:32px !important;padding:2px 0 2px 20px !important}
body.bs main :is(#ocForwardOut,#ocReverseOut){border-top:0 !important;border-bottom:0 !important;border-left:2px solid var(--text) !important;padding-left:16px !important;margin-top:32px !important;margin-bottom:32px !important;padding:2px 0 2px 20px !important}
/* C2: state-coloured figures */
body.bs main #powMiners .num[style*="color: rgb(247, 147, 26)"],
body.bs main #powMiners .label[style*="color: rgb(247, 147, 26)"],
body.bs main #powStatus[style*="color: rgb(247, 147, 26)"],
body.bs main #powChain > div[style*="color: var(--orange"]{color:var(--text) !important}
body.bs main :is(#ff-margin,#cbGain,#lsDiff,#pa-margin,#pa-context,#ycShape){--orange:var(--text) !important;--orange-fg:var(--text) !important}
body.bs main :is(#rrRealRate,#rfMonthlySavings,#rfNetSavings,#yc10y2y,#yc10y3m){font-family:var(--font-display) !important;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
body.bs main #ycShape{font-family:var(--font-display) !important;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;font-size:19px !important;line-height:1.45 !important}
/* C3: toggles: active and inactive states */
body.bs main #priceLevelRegimesChartScale button[aria-pressed="true"],
body.bs main :is(#bvsLinear,#bvsLog,#ocTabIdx,#ocTabBtc,#ocTabCustom,#pibLinear,#pibLog,#pibModeSingle,#pibModeBasket,#pibUnitBtc,#pibUnitSats,#teDedStd,#teDedItem):is([style*="background: var(--orange)"],[style*="background:var(--orange)"]){background:var(--text) !important;color:var(--bg) !important;border:1px solid var(--text) !important;border-radius:0 !important}
body.bs main #priceLevelRegimesChartScale button[aria-pressed="false"],
body.bs main :is(#bvsLinear,#bvsLog,#ocTabIdx,#ocTabBtc,#ocTabCustom,#pibLinear,#pibLog,#pibModeSingle,#pibModeBasket,#pibUnitBtc,#pibUnitSats,#teDedStd,#teDedItem):is([style*="background: var(--bg-3)"],[style*="background:var(--bg-3)"],[style*="background: transparent"],[style*="background:transparent"]){background:none !important;border:1px solid var(--text-3) !important;border-radius:0 !important}
/* bsn:overrides:end */