/* Thirtyish — one stylesheet for the whole site.
 *
 * ⚠️ 09 §6's blanket exclusion of palette and typography work was LIFTED on
 * 10 August 2026 (decision 51) and the direction settled on 11 August
 * (decision 52, written up in 09a-Design-Direction-and-Tokens.md). The rest
 * of §6 stands and is load-bearing: no logo, no favicon beyond a default,
 * no brand book, no personas, no social, no named author, no second brand,
 * no blog. 📌 The wordmark is styled text and must STAY styled text — a
 * plum band is exactly where a logo normally arrives next, and it must not.
 *
 * The whole palette change is six variables and four rules (09a §5). It is
 * not a redesign, and the reason is a measured one: on a content page the
 * masthead is ~40px of a very long screen and everything below it was
 * near-identical across the hues tested. The band does nearly all the work.
 *
 * TYPOGRAPHY IS DELIBERATELY UNCHANGED. The system stack stays; no web
 * font, no @font-face, no dependency. The tempting option leaned on Avenir
 * Next, which exists on macOS and iOS and not on Windows or Android — it
 * would have looked right to the one person reviewing it and wrong to most
 * readers. 📌 A type decision made on a Mac is a decision about the
 * reviewer's device. Weight, size and letter-spacing carry the load.
 *
 * Mobile-first throughout: every rule is the phone rule, and the two media
 * queries at the bottom add width rather than take it away.
 */

:root {
  --ink: #181528;
  --ink-soft: #5B5270;
  --ink-faint: #6b6b6b;
  --rule: #E6E2EE;
  --rule-soft: #ececec;
  --paper: #ffffff;
  --paper-tint: #f6f6f4;
  /* ── The palette. 09a §4. ──────────────────────────────────────────────
     ⚠️ Contrast ratios below were COMPUTED with a WCAG relative-luminance
     script and re-derived independently in this build — not estimated, not
     recalled. Every number produced by eye in this project so far has been
     wrong, and decision 38 does not stop at the engine boundary. The §8 bar
     is 4.5:1; the narrowest pairing in the set is 4.85:1 (ink-soft on the
     Build 009 tint, down from 6.52:1 — see below), so there is margin — but
     the margin is a fact, not a licence. If you change any colour here,
     RECOMPUTE. Do not assert. */
  --accent: #2E1A5B;      /* 14.84:1 on white (the navy it replaces was 9.17) */
  --accent-on: #ffffff;   /* 14.84:1 on the band */
  /* Build 009 Part B: raised from #F4F1FA (1.12:1 against white) to
     #D5D1DE (1.50:1), computed with the same WCAG relative-luminance script
     as the rest of this block — p=0.20 blend of --accent into white, chosen
     as visibly above the old value while staying well under the 3:1 WCAG
     non-text-contrast threshold for a UI-component BOUNDARY, because this is
     a SURFACE (§ below) and is not meant to read as a coloured box. */
  --accent-tint: #D5D1DE; /* ink 11.90:1 · accent 9.90:1 · ink-soft 4.85:1 */
  --warn-tint: #fdf6e7;
  --warn-rule: #e0c98a;

  --panel-radius: 12px;

  --measure: 34rem;
  --gap: 1rem;

  /* ⚠️ THE SIDE GUTTER. ONE PLACE. DO NOT HARD-CODE THIS VALUE ANYWHERE.
     Build 009 fixed the margin defect by making every panel break out to
     .wrap's edge, which aligned panel text with body text — but it did it
     at .wrap's then-current 1.1rem (17.6px), and pulled panel text INWARD
     from 2.1rem to 1.1rem in the process. So both halves of the change
     moved toward the screen edge, and the second half of David's original
     feedback — "too close to the edge" — was never addressed. Raised here
     to 1.5rem (24px) mobile / 2rem (32px) from 48rem up.

     It is a variable because the old value appeared in SIX places that had
     to move together — .wrap, four breakout rules, a blockquote calc() —
     and Build 009's own note warned the fix "silently reverts" if they
     drift apart. Decision 57: a mechanism beats an instruction on anything
     that has already failed once. To retune the whole page, change these
     two numbers and nothing else. */
  --gutter: 1.5rem;
}

/* Was "known and accepted, do NOT try to solve it" at 1.12:1 against white —
   Build 009 Part B raised it to 1.50:1 (§ above), because the margin
   defect fix (below) means every panel's inset now only reads as
   deliberate if the panel is visible, and 1.12:1 often wasn't on a phone in
   daylight. Still fine for a SURFACE and not for a BOUNDARY — every panel
   below keeps radius and padding rather than relying on the fill alone to
   be seen. Whether 1.50:1 survives a phone in daylight is untested; if a
   future pass finds it still isn't enough, recompute — don't nudge by eye. */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* 1.0625rem rather than 1rem: this cohort reads on a phone and the
     default 16px is a shade tight for 750 words of argument. */
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

/* ── Skip link ─────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-on);
  padding: 0.6rem 1rem;
  z-index: 20;
}
.skip-link:focus { left: 0; }

/* ── Focus. Visible everywhere, never removed. ─────────────────────────── */

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ── Layout ────────────────────────────────────────────────────────────── */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main { display: block; }

/* ── Masthead and the topic nav (the cold-arrival entry point) ─────────── */

/* ⚠️ THE ONLY PLACE THE BRAND RAISES ITS VOICE. A full-bleed saturated
   band, and 09a §2's measured finding is that it does nearly all the work
   of the whole direction — on a content page it is ~40px of a very long
   screen and everything below it was near-identical across the three hues
   tested. It is also decision 44's "framing up at the entry point" made
   physical.

   Plum was chosen on CONNOTATION, not taste: red beside a five-figure
   number reads as a loss or a warning, on pages whose entire job is to make
   the reader less frightened; green reads as growth, one step towards the
   investment register decision 31 keeps this site out of. Plum carries no
   financial connotation at all and no UK bank or lender is using it. 📌 The
   absence of meaning is the feature. ⚠️ That is reasoning from connotation
   with no evidence behind it — reversible in one variable. */
.masthead {
  background: var(--accent);
  padding: 0.75rem 0;
}

.masthead-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Styled text, and it must stay styled text — 09a §6. */
.wordmark {
  font-weight: 700;
  font-size: 1.25rem;          /* ~20px, per 09a §4 */
  letter-spacing: -0.03em;
  color: var(--accent-on);     /* 14.84:1 on the band */
  text-decoration: none;
}
.wordmark:hover { text-decoration: underline; }

/* Softened so it does not compete with the wordmark. COMPUTED: white at 80%
   flattens to #d5d1de over the band, which is 9.9:1 — well clear of 4.5. */
.masthead .strap {
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.8);
}

/* The topic nav. This is the entry-point answer to decision 41: a reader
   landing cold on one page can see the whole topic and get to the tool
   without any page having to restate the flagship. Labels only — no prose,
   because prose here would be new copy and this build does not write copy.

   ⚠️ RESTYLED IN CSS ONLY, Build-006, and that is deliberate. Q8: "the
   section with the links looks Bank-1 out of 10. We need this but we need
   to make it look sexier." Q11, arriving cold on write-off as a first ever
   page: "diving straight to the Heading 'Student Loans' followed by a list
   of links is too brutal."

   📌 The diagnosis is that seven underlined links in a row in a grey box IS
   a list of links — it looks like a directory index, which is the one thing
   a worried stranger does not want to read. The markup is unchanged and
   still labels-only; what changes is that the links become the same PILL
   component the path switch already uses, the grey becomes the palette's
   own tint so the strip reads as a continuation of the plum band rather
   than as an unrelated grey box beneath it, and the calculator stops being
   the first item in a list and starts being the one filled thing on the
   screen. Build-005 §6 chose a nav over a standfirst, breadcrumbs and a
   banner because "the nav is labels, not sentences"; that argument is
   unchanged and this extends it — the problem was never the words. */
/* Build 009 Part C (Q8: "looks right, but too tall" — ~162px of a 390px
   screen). Padding, gap and line-height are all reduced; the pill
   treatment and all seven items are unchanged — see §4a.is-hub etc. below,
   untouched. Measured before/after in the Build 009 note. */
.topic-nav {
  background: var(--accent-tint);
  padding: 0.55rem 0 0.6rem;   /* was 0.85rem 0 0.95rem */
  font-size: 0.875rem;
  line-height: 1.25;           /* was the inherited body value, 1.6 */
}

.topic-nav h2 {
  margin: 0 0 0.35rem;         /* was 0.5rem */
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
}

.topic-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;                 /* was 0.4rem */
}

/* Pills, matching .path-switch. White on the tint per the inversion rule,
   and the underline goes: underlining seven adjacent links is most of what
   made this read as a directory index. Accent on white is 14.84:1. */
.topic-nav li > * {
  display: block;
  padding: 0.22rem 0.6rem;     /* was 0.32rem 0.7rem */
  border-radius: 999px;
  background: var(--paper);
  color: var(--accent);
  text-decoration: none;
}

.topic-nav a:hover { text-decoration: underline; }

/* The calculator is the destination every content page points at, so it is
   the one filled thing here rather than merely the first item. */
.topic-nav .is-hub > * {
  background: var(--accent);
  color: var(--accent-on);
  font-weight: 700;
}

/* The page you are on. It does not need to shout — its own h1 is directly
   below — so it is weight and a flatter fill rather than another accent.
   ⚠️ MUST STAY AFTER the .is-hub rule above. On the tool page the hub IS
   the current page, both selectors have the same specificity, and source
   order is what makes the filled pill correctly drop away once you have
   arrived. Reordering these two silently paints "you are here" as "go
   here". */
.topic-nav [aria-current="page"] {
  background: transparent;
  color: var(--ink-soft);
  font-weight: 700;
}

/* The home page (Build 009 Part A). Same .topic-nav markup and CSS, reused
   inline in the page body rather than as its own chrome band below the
   masthead: the container is a plain .home-topics div, not the .topic-nav
   nav landmark, and it is never inserted via the @chrome marker — so the
   home page gains no band of its own. One modifier turns the row of pills
   into a stack; nothing about .topic-nav's own behaviour changes. */
.topic-nav.home-topics ul {
  flex-direction: column;
  align-items: flex-start;
}

/* ── The next-step block (09a §2, §5.5) ────────────────────────────────── */
/* The second use of the tint, and the reason it is here rather than being
   nice-to-have: without it a content page reverts to the undesigned version
   below the fold, which is where a reader spends nearly all of their time.
   Radius and padding carry the panel, not the fill — the tint is 1.50:1
   against white as of Build 009 Part B (was 1.12:1). */
.next-step {
  background: var(--accent-tint);
  border-radius: var(--panel-radius);
  padding: 1rem 1rem 1.1rem;
  margin: 2.4rem 0 0.5rem;
}

.next-step h2 {
  margin: 0 0 0.7rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
}

/* The calculator, as a filled block rather than a pill — it is the one
   thing a reader who has just finished a page should do next, and every
   content page already links to it as the destination. */
.next-step-hub { margin: 0 0 0.7rem; }

.next-step-hub a {
  display: block;
  background: var(--accent);
  color: var(--accent-on);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  padding: 0.7rem 1rem;
  border-radius: 999px;
}

.next-step-hub a:hover { text-decoration: underline; }

.next-step ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.875rem;
}

.next-step li a {
  display: block;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--accent);
  text-decoration: none;
}

.next-step li a:hover { text-decoration: underline; }

/* ── Typography ────────────────────────────────────────────────────────── */

/* ⚠️ PADDING-TOP ONLY, AND THE SHORTHAND IS THE BUG THIS REPLACES.
   This was `padding: 1.25rem 0 0`. `.page` only ever appears as
   `<main class="wrap page">`, so the shorthand's two zeroes overwrote
   .wrap's `padding: 0 var(--gutter)` — equal specificity (0,1,0), later in
   the file, so it won on source order. THE SIDE GUTTER HAS THEREFORE BEEN
   ZERO ON EVERY MAIN CONTENT AREA ON THE SITE, and the panels' breakout
   (`margin-left: calc(-1 * var(--gutter))`, added Build 009) had nothing to
   break out INTO — they hung 24px past the viewport on each side, giving
   24px of horizontal page overflow and putting body text hard against the
   screen edge at x=0.

   📌 Measured in the live DOM at 320px before this fix: main padding-left
   0px, h1 left 0, document scrollWidth 344 against clientWidth 320. That is
   Build 009's "too close to the edge" in its most extreme possible form,
   and it is what David saw as the preview "truncating text".

   ⚠️ Build 012 checked the standing hypothesis and it was WRONG:
   `.headline .figure { white-space: nowrap }` overflows nothing. Measured
   at 320px across four profiles including the widest reachable figures,
   .headline scrollWidth == clientWidth == 316 every time; the widest
   unbreakable token is "December 2045" at 156px in a 316px box. The nowrap
   is not the defect and has been left alone.

   `article` keeps the horizontal zero it always had — it is a plain block
   inside main and has no padding of its own to restore. */
article, .page { padding-top: 1.25rem; }

h1 {
  font-size: 1.75rem;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}

/* Claim headings (decision 30). These carry the argument on their own, so
   they get real weight and real space above them. */
h2 {
  font-size: 1.1875rem;
  line-height: 1.3;
  margin: 2rem 0 0.4rem;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.0625rem;
  margin: 1.5rem 0 0.4rem;
}

p { margin: 0 0 0.9rem; }

a { color: var(--accent); }

/* The bolded one-line answer under each claim heading (decision 30), and
   the standfirst under the h1 (the decision-36 extension of the pattern).
   Same treatment because they do the same job. */
.answer-line,
.standfirst {
  font-weight: 700;
  margin: 0 0 0.9rem;
}

.standfirst {
  font-size: 1.125rem;
  border-left: 3px solid var(--accent);
  padding-left: 0.8rem;
}

/* The page-opening device — "You're thirtyish and…" (09 §5a). */
.opener {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  margin: 0 0 1.5rem;
}

blockquote {
  margin: 0 0 0.9rem;
  padding: 0.1rem 0 0.1rem 0.9rem;
  border-left: 3px solid var(--rule);
  color: var(--ink-soft);
}

blockquote p:last-child { margin-bottom: 0; }

/* ── Tables ────────────────────────────────────────────────────────────── */

.table-scroll {
  overflow-x: auto;
  margin: 0 0 1.1rem;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
  /* Tables are the cheapest evidence on these pages per unit of argument
     (decision 39), so they must stay readable on a 360px screen rather
     than wrapping into mush. */
  min-width: 19rem;
}

th, td {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}

thead th {
  border-bottom: 2px solid var(--rule);
  font-size: 0.875rem;
}

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Collapsed working (decision 30) ───────────────────────────────────── */

details {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.6rem 0.85rem;
  margin: 0 0 1.1rem;
  background: var(--paper-tint);
}

summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  /* The default marker is small and easy to miss on a phone, and this is
     voice rule 4's "within one click" made physical. */
  padding: 0.15rem 0;
}

details > *:last-child { margin-bottom: 0; }
details[open] > summary { margin-bottom: 0.7rem; }

details blockquote {
  border-left-color: var(--rule);
  font-variant-numeric: tabular-nums;
}

/* ── The sign-off and the sources rule ─────────────────────────────────── */

.signoff {
  font-style: italic;
  color: var(--ink-soft);
  margin: 1.75rem 0 0;
}

.page-sources {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--ink-faint);
}

/* ── The visuals (Part C). Inline HTML/CSS, never images. ──────────────── */

/* Tint, no border, larger radius (09a §5.3). The hairline-box grid these
   four selectors used to draw was most of what read as "bank". */
.visual {
  margin: 1.4rem 0;
  padding: 1rem;
  background: var(--accent-tint);
  border-radius: var(--panel-radius);
}

.visual-caption {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin: 0.8rem 0 0;
}

/* Two-card device: two balances, one identical payment (flagship), and the
   same £5,000 twice (overpaying). Stacked on a phone, side by side above. */
.two-cards {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
}

/* ⚠️ INVERTED, and 09a could not have decided this. §5.3 lists both .visual
   and .borrower-card as taking the tint — but .borrower-card NESTS INSIDE
   .visual, and tint on tint is 1.0:1, so the inner cards would have
   disappeared entirely. 09a §7 says only the answer card and the top of
   write-off.md were ever rendered, and the two-card device appears on
   neither, so the nesting was never seen.
   The visual takes the tint and the cards sit on it in white — raised
   rather than recessed. White on tint is 1.50:1 as of Build 009 Part B
   (was 1.12:1), so the boundary is still carried by RADIUS AND PADDING
   rather than by fill, which is what §4's own "fine for a surface, not for
   a boundary" note requires. */
.borrower-card {
  border-radius: var(--panel-radius);
  padding: 0.85rem;
  background: var(--paper);
}

.borrower-card h4 {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.card-facts {
  margin: 0 0 0.7rem;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.card-facts li { margin: 0 0 0.15rem; }

.card-facts .differs { font-weight: 700; }

/* The figure that is the point of the card. Large, and — where the point
   is that two of them are identical — visibly identical. */
.card-punch {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  display: block;
}

.card-punch-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}

.same .card-punch { color: var(--accent); }

/* The one-bar visual on the-big-scary-number. Two bars on a shared £ axis
   that deliberately DO NOT sum — see the VISUAL 1 comment in that page's
   markdown, rewritten 10 August. */
.bar-figure { margin: 0.4rem 0 0; }

.bar-row { margin: 0 0 0.9rem; }

.bar-label {
  display: block;
  font-size: 0.875rem;
  margin: 0 0 0.3rem;
}

.bar-track {
  background: var(--rule-soft);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 2.1rem;
  background: var(--accent);
}

.bar-fill.secondary {
  background: var(--ink-faint);
}

.bar-value {
  display: block;
  font-weight: 700;
  font-size: 1.0625rem;
  margin-top: 0.3rem;
  font-variant-numeric: tabular-nums;
}

.bar-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  padding-top: 0.2rem;
}

/* ── The tool ──────────────────────────────────────────────────────────── */

.card {
  background: var(--accent-tint);
  border-radius: var(--panel-radius);
  padding: 1rem;
  margin: 0 0 1.1rem;
}

.card > h2:first-child { margin-top: 0; }

/* ⚠️ ONE DELIBERATE EXCEPTION to "drop the border", stated so it can be
   struck in one line if David disagrees. Once every card takes the tint,
   the answer card — which already had the tint — stops being distinguished
   from the three form cards above it, and spec §7 puts the headline "above
   everything else". 09a §5.3's stated reason for dropping borders is that
   "the hairline-box grid was most of the bank reading"; a single 2px accent
   border on the one card that carries the answer is emphasis, not grid. */
.card.answer {
  border: 2px solid var(--accent);
}

.fields { display: grid; gap: 1rem; }

.field { margin: 0; display: block; }

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.hint {
  display: block;
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}

input[type="number"],
input[type="text"],
select {
  font: inherit;
  /* 16px minimum on iOS or Safari zooms the page on focus. */
  font-size: 1rem;
  width: 100%;
  padding: 0.6rem 0.65rem;
  border: 1px solid #8a8a8a;
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}

.prefix-wrap, .suffix-wrap {
  display: flex;
  align-items: stretch;
}

.prefix, .suffix {
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  border: 1px solid #8a8a8a;
  background: var(--paper-tint);
  color: var(--ink-soft);
}

.prefix { border-right: 0; border-radius: 6px 0 0 6px; }
.prefix + input { border-radius: 0 6px 6px 0; }
.suffix { border-left: 0; border-radius: 0 6px 6px 0; }
.suffix-wrap input { border-radius: 6px 0 0 6px; }

/* ── The money sliders (Build-012 Part C) ───────────────────────────────
   `accent-color` is the whole colour treatment: one line, native track and
   thumb, and it keeps the plum without reimplementing a slider out of
   ::-webkit-slider-thumb and ::-moz-range-thumb, which is where a
   hand-rolled range control usually loses its keyboard behaviour.

   The 44px min-height is a touch target, not decoration — the input's own
   painted track is ~20px and the rest is padding around it. */
.slider {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0.45rem 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── "Take me to the answer" (Build-012 Part E) ─────────────────────────
   Full width on a phone, because it sits at the end of a column of
   full-width fields and a button narrower than the field above it reads as
   secondary. 14.84:1 on the accent, the same pairing as the masthead. */
.to-answer-row { margin: 1.25rem 0 0; }

.to-answer {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: var(--accent-on);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
}

.to-answer:hover { opacity: 0.92; }

@media (min-width: 34rem) {
  .to-answer { width: auto; min-width: 16rem; margin: 0 auto; }
}

.hidden { display: none !important; }

.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.verdict {
  display: none;
  margin-top: 0.9rem;
  padding: 0.75rem 0.85rem;
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-size: 0.9375rem;
}
.verdict.shown { display: block; }
.verdict span { display: block; }
.verdict .caveat {
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.waiting { color: var(--ink-soft); margin: 0; }

/* The headline. One sentence, above everything else (§7). */
.headline {
  font-size: 1.3125rem;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
}

.headline .figure { white-space: nowrap; }

/* The two answer figures (09a §4): the lifetime total here, and the monthly
   deduction below. Accent on tint is 9.90:1 as of Build 009 Part B
   (was 13.29:1) — computed. ⚠️ 09a calls this one "the accent pill", which
   is ambiguous between "set in the accent" and "set in a tinted pill". The
   smaller reading is taken; making it a real pill is a background, a
   radius and some padding on this selector. */
.headline .figure.total { color: var(--accent); }

.headline-basis {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}

/* The short "not financial advice" variant, directly beneath the result.
   not-financial-advice.md: same type size as surrounding body text, not
   greyed out, not 10px, never inside a <details>. */
.advice-line {
  margin: 0 0 1.1rem;
  font-size: 1rem;
  color: var(--ink);
}

.cash-terms {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

.deduction {
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
  margin-top: 0.9rem;
}

.deduction .amount {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--accent);   /* 9.90:1 on the tint — computed */
}

/* Sits ABOVE the figure, not below it — see the comment in tool.js. The
   figure is the largest number on the page and must not be met bare. */
.deduction .caption {
  display: block;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-bottom: 0.1rem;
}

.note { font-size: 0.9375rem; color: var(--ink-soft); }

.note-box {
  background: var(--accent-tint);
  border-radius: var(--panel-radius);
  padding: 0.75rem 0.85rem;
  margin: 0 0 1rem;
  font-size: 0.9375rem;
}

/* ⚠️ THE INVERSION RULE, and it is the thing 09a could not have foreseen.
   A pale tint is a surface, not a boundary (§4), so a tinted thing on a
   tinted parent is not merely low-contrast — it is 1.0:1, i.e. gone. Three
   selectors nest inside a tinted parent: .note-box and .path-switch button
   inside .card.answer, and .borrower-card inside .visual. Each is tinted on
   white and white on tint, with radius and padding carrying the boundary
   both ways. 📌 None of this was visible in the mockups, which rendered the
   answer card and the top of write-off.md and nothing that nests. */
.card .note-box,
.card .path-switch button {
  background: var(--paper);
}
.card .path-switch button[aria-pressed="true"] {
  background: var(--accent);
}

/* The threshold-freeze box keeps the warn palette and its border. That
   colour pair is semantic rather than decorative — it marks announced
   policy that is not yet enacted law — and the six tokens in 09a §4 do not
   include the warn pair, so the direction does not reach it. */
.note-box.policy {
  background: var(--warn-tint);
  border: 1px solid var(--warn-rule);
}

.note-box h3 { margin-top: 0; }

/* The sensitivity band — shown only after the answer (decision D). */
.sensitivity { margin: 1.2rem 0 0; }

.sensitivity h3 { margin-top: 0; }

.path-list { margin: 0 0 0.7rem; padding: 0; list-style: none; }

.path-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}

.path-list li:last-child { border-bottom: 0; }

.path-list .path-figure {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.path-list .is-current .path-name { font-weight: 700; }

.path-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
}

/* Filled/tinted rather than outlined (09a §5.4). Fully rounded, tint when
   unpressed, accent when pressed. Accent on tint is 9.90:1 as of Build 009
   Part B (was 13.29:1) and accent-on on accent is 14.84:1 — both computed. */
.path-switch button {
  font: inherit;
  font-size: 0.875rem;
  padding: 0.4rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  cursor: pointer;
}

.path-switch button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-on);
  font-weight: 700;
}

/* ── The chart ─────────────────────────────────────────────────────────── */

.chart-wrap { margin: 1.3rem 0 0; }

.chart { width: 100%; height: auto; display: block; }

.chart-line { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.chart-area { fill: var(--accent); opacity: 0.09; }
.chart-grid { stroke: var(--rule); stroke-width: 1; }
.chart-axis { stroke: var(--ink-faint); stroke-width: 1; }
.chart-writeoff {
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.chart-dot { fill: var(--accent); }
.chart-label { font-size: 10px; fill: var(--ink-soft); }
.chart-label.strong { fill: var(--ink); font-weight: 700; }

/* ── Footer ────────────────────────────────────────────────────────────── */

footer.site {
  margin-top: 2.5rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-tint);
  padding: 1.25rem 0 2rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

footer.site ul {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}

footer.site .advice-line {
  font-size: 0.875rem;
  margin-bottom: 0.6rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Panels break out to the container edge (Build 009 Part B, Q6b) ──────
   .wrap gives everything 1.1rem of side padding. Panels then added their
   own INSIDE that — .card and .visual another 1rem, .note-box and details
   0.85rem, blockquote 0.9rem on the left only — so body text, panel text
   and quoted text each started at a different distance from the edge of
   the same page. Fix: panels carry .wrap's own side padding instead of
   their own, and a matching negative margin pulls their background out to
   .wrap's edge — only the background steps outward, text lines up with
   body text everywhere. Placed after every panel's own rule above, so
   nothing there needs touching and specificity stays equal throughout.
   ⚠️ AMENDED 16 August 2026. These were four rules — this pair plus a
   duplicated 48rem counterpart — because .wrap's padding changed at the
   breakpoint and the breakout had to be restated to track it. They now
   read --gutter, which the breakpoint redefines, so the 48rem duplicates
   are DELETED and the tracking cannot drift. */
.card, .visual, .note-box, details {
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* blockquote has no background, so there is nothing to "step outward" —
   only its left rule and its text need to line up with everything else.
   The rule sits at the .wrap edge and the padding is short by its 3px
   width, so the TEXT still starts exactly where body text does. */
blockquote {
  margin-left: calc(-1 * var(--gutter));
  padding-left: calc(var(--gutter) - 3px);
}

/* ⚠️ Nesting exceptions. Three panels above are also used NESTED inside
   another panel — .note-box and details both sit inside .card.answer
   (render.js), and blockquote sits inside details on the written pages
   (the "details blockquote" rule further up). A nested panel is already
   inside a parent that has just broken out; breaking out a second time
   would push it past its own parent's edge. So these three restore the
   ORIGINAL contained padding and cancel the negative margin. Specificity
   (two classes, or a class and a type, or two types) beats the plain
   .note-box / details / blockquote above regardless of source order or
   which side of the 48rem breakpoint it is compared against, so this one
   block covers both. */
.card .note-box,
.card details {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}
details blockquote {
  margin-left: 0;
  padding-left: 0.9rem;
}

/* ── Wider screens. Additive only. ─────────────────────────────────────── */

@media (min-width: 34rem) {
  .two-cards { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 2.125rem; }
  .headline { font-size: 1.5rem; }
}

@media (min-width: 48rem) {
  body { font-size: 1.09375rem; }

  /* ONE line does what six used to. --gutter is redefined on :root so that
     .wrap AND every breakout rule above pick it up together; restating the
     breakout here is exactly the duplication that let the two drift. */
  :root { --gutter: 2rem; }
}

/* Respect a reader who has asked for less motion. Nothing here animates
   today; this is a standing guard for anything added later. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .topic-nav, .next-step, .path-switch, footer.site ul { display: none; }
  details[open], details { border: 0; padding: 0; background: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DIRECTION 1b — "LEDGER". Adopted 17 August 2026, decision 78.
   ══════════════════════════════════════════════════════════════════════════

   David scored the three Claude Design directions on the DJ Bank Scale
   (bank = 1, whacky youth brand = 10) on 17 August: 1a 3.5, 1b 5–6, 1c 8.
   Thread 019 set the target at 5–6. 📌 1b lands on it exactly, and 1c was
   rejected as overshooting a reader who is one cold, worried stranger
   arriving from a search rather than somebody choosing a brand to admire.

   WHY THIS IS ONE APPENDED BLOCK AND NOT THIRTY EDITS ABOVE
   --------------------------------------------------------
   Every rule here overrides an existing rule rather than replacing it, and
   the whole direction can be reverted by deleting from the banner above to
   the banner below. ⚠️ That matters because ONE THING IN HERE IS UNTESTED
   AND MIGHT FAIL (see THE RISK below), and this venture's own history is
   that a change spread across thirty places is a change nobody dares undo.
   📌 THE PHONE CHECK PASSED — 18 August 2026, Thread 035, read outdoors on
   a real handset. So the sentence that stood here — "fold this into the body
   of the file and delete the block; either way this is a staging state, not a
   resting place" — IS WITHDRAWN, deliberately, on 20 August 2026.

   ⚠️ DO NOT FOLD THIS BLOCK INTO THE FILE ABOVE. It was priced before it was
   declined: 435 lines of overrides merged one at a time into the rules they
   override, roughly half a day, carrying a real chance of visual regression,
   in exchange for NOTHING THAT ANY READER SEES. That is precisely the shape
   of work 00-Brief.md's materiality gate exists to stop, and the gate's own
   calibration table is full of jobs like it. This block is the resting place.

   ⚠️ The standing cost of that choice, written down so nobody meets it by
   surprise: the last third of this stylesheet overrides the first two thirds.
   Anyone editing a rule above line 1062 must check down here for an override,
   or the edit will appear to do nothing. That price is known and accepted,
   and it is smaller than the fold-in.

   WHAT THIS IS NOT
   ----------------
   🚫 No markup. No copy. No `render.js`, no `build-pages.js`, no engine.
   The Design exports are non-canonical (decision 74) — every money figure
   in them is invented and several clauses were cut, including one that is
   decision 70's entire remedy. NOTHING from an export reaches a deck or a
   template. This file is the only thing that moves.

   🚫 Not 1b's answer card. That region of the mockup is CD's invention over
   the *unrun* calculator, which it never captured. Its proposals there —
   deleting the balance chart, replacing the breakdown bar — are Tier 2,
   they are product decisions taken silently inside a design, and they are
   not adopted. See §7 below for the one place that bites.

   THE RISK — RAISED, TESTED, AND CLOSED ON 18 AUGUST 2026
   -------------------------------------------------------
   ✅ CLOSED. Leave --rule-1b alone unless a NEW observation reopens it.

   The risk as it stood before the test: 1b deletes the tinted panels and
   carries the entire structure of the page on hairline rules in --rule.
   COMPUTED: #E6E2EE on #F7F3EF is **1.15:1** — fainter than the 1.12:1 tint
   that Build 009 had to raise because it was vanishing on a phone in
   daylight, and fainter than the 1.50:1 it was raised to. Decorative rules
   carry no WCAG requirement, which is exactly why this would have gone
   unnoticed. Had the rules failed to read on a phone, a 750-word page would
   have become the undifferentiated wall of text that "my daughters wouldn't
   make it half way through" was about — the change would have made worse the
   very thing it exists to fix.

   ✅ THE TEST WAS RUN AND THE RULES PASSED. David read them on a handset,
   outdoors, 18 August 2026 (Thread 035). So the 1.15:1 value stands ON
   EVIDENCE rather than on argument, which is the only thing entitling it to
   sit this far below the tint that failed.

   ⚠️ Therefore: do NOT darken --rule-1b as a precaution, and do NOT re-derive
   this from the contrast figure alone — the figure predicted failure and the
   handset disagreed with it. If some future observation genuinely reopens the
   question, darken --rule-1b below and RECOMPUTE. Never nudge by eye.

   CONTRAST, COMPUTED WITH THE WCAG RELATIVE-LUMINANCE METHOD, NOT ASSERTED
   -----------------------------------------------------------------------
     ink       #171320 on paper #F7F3EF   16.53:1
     ink-soft  #5B5270 on paper           6.59:1
     accent    #2E1A5B on paper          13.44:1
     ink-faint #6b6b6b on paper           4.83:1   ⚠️ narrowest, was 5.29
     white on accent (the one filled CTA) 14.84:1
     ink on the warn tint (policy box)   16.96:1

   ✅ The site's floor RISES. Today's narrowest text pairing is ink-soft on
   the tinted panel at 4.85:1; this deletes that panel, so the pairing
   ceases to exist. ⚠️ The new narrowest is --ink-faint at 4.83:1, which is
   above the 4.5 bar but only just, and it is used only for the sources
   rule at the foot of a page.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Two variables carry the palette. Three of 1b's five colours — ink-soft,
     accent and rule — are already ours, unchanged, to the hex digit.
     📌 So this is NOT a reversal of decision 52: the plum survives. It
     moves off the masthead and into rules, swatches and figures. */
  --paper: #F7F3EF;
  --ink: #171320;

  /* Square corners are 1b's actual move — "the absence of radii", warm
     paper, hairline rules, typographic authority rather than boxes. */
  --panel-radius: 0;

  /* The hairline that replaces every panel. Separate from --rule so that
     the phone check has ONE value to change and so that darkening it
     cannot silently alter table borders and the sources rule as well. */
  --rule-1b: #E6E2EE;      /* 1.15:1 on paper. ✅ Tested outdoors on a handset
                              and PASSED, 18 Aug 2026. Read THE RISK above
                              before changing this. */
  --rule-strong: #171320;  /* the 2–3px ink rules under headings and fields */
}

/* ── Masthead. The band goes. ──────────────────────────────────────────────
   ⚠️ THIS CONTRADICTS DECISION 52, and the contradiction is deliberate and
   evidenced rather than accidental. 52's central finding was that on a
   content page the plum band "does nearly all the work". 1b removes the
   band entirely and still scores 5–6 — so either that finding was wrong,
   or it was a finding about HUE and not about THE BAND. 📌 David scored the
   direction as rendered, with no band in it. An inference from four
   treatments loses to a score taken on the thing itself.
   The wordmark stays styled text and must stay styled text — 09 §6. */
.masthead {
  background: var(--paper);
  border-bottom: 3px solid var(--rule-strong);
  padding: 1.25rem 0 1rem;
}

.wordmark {
  color: var(--ink);
  font-weight: 800;
  font-size: 1.625rem;
}

/* The plum, redeployed: a swatch under the wordmark rather than a field
   behind it. ::after rather than an element, so no markup changes. */
.wordmark::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  background: var(--accent);
  margin-top: 6px;
}

.masthead .strap { color: var(--ink-soft); }

/* ── Topic nav. Pills become a row of text. ───────────────────────────────
   Build 006 made these pills because seven underlined links in a grey box
   read as a directory index. 1b's answer to the same problem is different
   and also not a list of links: no box at all, a plain row, and the current
   page marked by a heavy plum underline. */
.topic-nav {
  background: none;
  border-bottom: 1px solid var(--rule-1b);
  padding: 0.8rem 0;
}

/* ⚠️ The nav's h2 is hidden VISUALLY ONLY. 1b shows no heading here, but
   this is a real <h2> labelling a landmark: `display: none` would take it
   out of the accessibility tree as well, which is a regression a sighted
   review cannot see. Same technique as .visually-hidden. */
.topic-nav h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.topic-nav ul { gap: 0.75rem 1rem; }

.topic-nav li > * {
  padding: 0 0 4px;
  border-radius: 0;
  background: none;
  color: var(--ink-soft);
  border-bottom: 4px solid transparent;
}

/* The calculator stops being a filled pill and becomes the weighted item. */
.topic-nav .is-hub > * {
  background: none;
  color: var(--ink);
  font-weight: 800;
}

/* ⚠️ MUST STAY AFTER .is-hub, for the reason the original rule gives: on
   the tool page the hub IS the current page, the selectors have equal
   specificity, and source order is what makes "you are here" stop
   shouting "go here". */
.topic-nav [aria-current="page"] {
  color: var(--ink);
  font-weight: 800;
  border-bottom-color: var(--accent);
}

/* ── Panels become rules. The largest single move in the direction. ────────
   Seven rules in this stylesheet fill a surface with --accent-tint. 1b
   fills none of them. What replaces the fill is a hairline above the block
   and the space around it.
   ⚠️ The breakout is CANCELLED here (margin/padding back to zero). Build
   009 gave panels a negative margin so their BACKGROUND could step out to
   the container edge while their text stayed aligned. With no background
   there is nothing to step out, and 1b's rules span the text column rather
   than the screen — so cancelling it is what makes the rules line up with
   the words above them. */
.card, .visual, .note-box, details, .verdict {
  background: none;
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.card {
  border-top: 1px solid var(--rule-1b);
  padding-top: 1.1rem;
  padding-bottom: 0;
  margin-bottom: 1.5rem;
}

/* ⚠️ Equal specificity to the Build 009 nesting exception above, and later,
   so nested panels lose their 0.85rem inset too and align with everything
   else. Without this a .note-box inside the answer card would be the only
   indented thing on the page. */
.card .note-box,
.card details {
  padding-left: 0;
  padding-right: 0;
}

/* Build 006's inversion rule existed because a tint on a tint is 1.0:1 —
   gone. With no tints anywhere, the inversion has nothing to invert. */
.card .note-box { background: none; }

.note-box {
  border-top: 1px solid var(--rule-1b);
  padding-top: 0.8rem;
  padding-bottom: 0;
}

/* ⚠️ The threshold-freeze box KEEPS its own palette and its border, for the
   reason the original rule gives: warn is semantic rather than decorative —
   it marks announced policy that is not yet law — and 1b's five colours do
   not include a warn pair, so the direction does not reach it. Ink on the
   warn tint computes 16.96:1. */
.note-box.policy {
  background: var(--warn-tint);
  border: 1px solid var(--warn-rule);
  padding: 0.75rem 0.85rem;
}

details {
  border: 0;
  border-top: 1px solid var(--rule-1b);
  padding-top: 0.6rem;
  padding-bottom: 0;
}

blockquote {
  margin-left: 0;
  padding-left: 0.9rem;
  border-left-color: var(--rule-1b);
}

.verdict {
  border-left: 0;
  border-top: 2px solid var(--accent);
  padding: 0.75rem 0 0;
}

/* ── The answer card. Emphasis without a box. ──────────────────────────────
   Build 006 gave this card a 2px accent border as "ONE DELIBERATE
   EXCEPTION to drop the border", because once every card took the tint the
   answer card stopped being distinguished from the three form cards above
   it, and spec §7 puts the headline above everything else. That argument
   survives the direction change; only the device changes. A plum swatch
   above the card does the job a border did, in 1b's own vocabulary. */
.card.answer {
  border: 0;
  border-top: 3px solid var(--rule-strong);
  padding-top: 1.2rem;
}

.card.answer::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background: var(--accent);
  margin: 0 0 0.9rem;
}

/* 🚫 NOT ADOPTED, and this is the one place 1b is refused on its own terms.
   The mockup sets the monthly deduction at 56px against a 26px headline.
   Spec §7 says explicitly not to lead with the monthly figure, and TWO
   consecutive builds independently named the existing 2rem-against-
   1.3125rem as the weakest thing on the most important page. 1b makes that
   worse, not better. 📌 The sizes stay as they are; only the box goes. */

/* ── Typography ───────────────────────────────────────────────────────────
   1b's authority comes from weight and rules, not from size. */
h1 { font-weight: 800; letter-spacing: -0.02em; }

h2 {
  font-weight: 800;
  margin: 2.2rem 0 0.6rem;
}

/* The plum swatch under each claim heading — decision 30's headings given
   1b's mark. ::after, so no markup moves. */
.page h2::after,
article h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background: var(--accent);
  margin: 0.55rem 0 0.75rem;
}

/* The swatch is for claim headings on written pages only — not for the
   calculator's section labels, the nav, the next-step block or a panel
   heading, none of which are claims. */
.topic-nav h2::after,
.next-step h2::after,
.card h2::after,
.note-box h2::after { content: none; }

/* Calculator section labels in small caps — 1b's treatment of "First —
   which plan are you on?" and "Now your numbers". These are labels, not
   claims, and 1b marks the difference. */
.card > h2:first-child {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* The standfirst loses its left rule and becomes an italic line — the
   rule was doing the job the hairlines now do everywhere else. */
.standfirst {
  border-left: 0;
  padding-left: 0;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1875rem;
  color: var(--ink-soft);
}

/* The bolded answer line under each claim heading carries more weight in
   1b, because with the panels gone it is the page's second-loudest thing. */
.answer-line {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
}

/* ── The form ─────────────────────────────────────────────────────────────
   Boxes become underlines. The 44px touch targets and the paired
   slider/typed-box behaviour from Build 012 are untouched — this is paint. */
.field label { color: var(--ink-soft); }

.field input,
.field select {
  border: 0;
  border-bottom: 2px solid var(--rule-strong);
  border-radius: 0;
  background: transparent;
  font-weight: 700;
}

.prefix, .suffix {
  border: 0;
  border-bottom: 2px solid var(--rule-strong);
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 800;
}
.prefix, .prefix + input, .suffix, .suffix-wrap input { border-radius: 0; }

/* "Take me to the answer" becomes a text link with a heavy plum underline.
   ⚠️ Build 012 made this full-width on purpose — a button narrower than
   the fields above it reads as secondary. 1b's version is left-aligned and
   full-width, so that reasoning is preserved. */
.to-answer {
  background: none;
  border: 0;
  border-bottom: 3px solid var(--accent);
  border-radius: 0;
  color: var(--accent);
  font-weight: 800;
  font-size: 1.25rem;
  text-align: left;
  padding: 0.75rem 0;
  min-height: 0;
}
.to-answer:hover { opacity: 1; text-decoration: none; }

@media (min-width: 34rem) {
  .to-answer { width: 100%; min-width: 0; margin: 0; }
}

.path-switch button {
  background: none;
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid transparent;
}
.card .path-switch button { background: none; }
.path-switch button[aria-pressed="true"],
.card .path-switch button[aria-pressed="true"] {
  background: none;
  color: var(--accent);
  font-weight: 800;
  border-bottom-color: var(--accent);
}

/* ── Tables. A heavier head rule, hairlines between rows. ───────────────── */
th { border-bottom: 2px solid var(--rule-strong); }
td, tbody th { border-bottom: 1px solid var(--rule-1b); }

/* ── The next-step block and the footer ───────────────────────────────────
   ⚠️ Neither region was in the capture, so 1b has no opinion on them. These
   are the minimum needed to stop them being the only boxes left on an
   otherwise unboxed page — a judgement, not evidence.
   📌 The hub link KEEPS its fill. It is the one call to action on a content
   page, white on accent is 14.84:1, and 1b's own submit button shows the
   direction is willing to shout once per screen. Square, not round. */
.next-step {
  background: none;
  border-top: 1px solid var(--rule-1b);
  border-radius: 0;
  padding: 1.1rem 0 0;
}
.next-step-hub a { border-radius: 0; }
.next-step li a {
  background: none;
  border-radius: 0;
  padding: 0 0 3px;
  border-bottom: 2px solid var(--rule-1b);
}

footer.site { border-top: 1px solid var(--rule-1b); }

/* ── Anything still round ─────────────────────────────────────────────────
   Swept last, so nothing above has to remember to be square. */
.skip-link, .bar-track, .bar-fill, .borrower-card, .two-cards > * {
  border-radius: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   END DIRECTION 1b — and this block is PERMANENT, not staging (20 Aug 2026).
   ✅ The revert route below is still real and still cheap, and keeping it is
   the whole reason this stays an appended block rather than being folded in:
   delete from the opening banner to here and the site returns to exactly its
   pre-17-August appearance.
   ══════════════════════════════════════════════════════════════════════════ */