/* ─────────────────────────────────────────────────────────────────
   Strikepoint design system, ported to this site's markup.

   Source: design_handoff_strikepoint/. Tokens, type scale, geometry
   and components follow that handoff; the content, the calculators
   and every figure remain this site's own.

   Three rules carry most of the look, and breaking any one of them
   is what makes a port of this drift back into a generic card UI:

     1. NO SHADOWS, ANYWHERE. Depth comes from 1px hairlines and the
        split between the warm page and the near-white surface.
     2. Radius 2px on buttons, inputs and pills. Panels are square.
     3. Every figure is mono. Every eyebrow and tag is mono, uppercase
        and letter-spaced. Prose is IBM Plex Sans; headings are
        Newsreader. Nothing else.

   The grid-of-cells effect is a 1px rule-coloured background behind a
   `gap: 1px` grid of surface-coloured cells, so the hairlines between
   cells are the container showing through.
   ───────────────────────────────────────────────────────────────── */

:root {
  --bg: #fbf9f4;
  --surface: #fffdf9;
  --surface-alt: #f6f2e8;

  --ink: #1c1a15;
  --ink-70: #55503f;
  --ink-45: #6e6a5f;
  --muted: #8a8474;
  --muted-light: #a9a292;

  --rule: #e4dfd3;
  --fill-faint: #e7e2d6;
  --track: #f1ede2;

  --accent: #a24e28;
  --accent-soft: #c4a08c;
  --negative: #9c3b2e;
  --on-dark: #c9c2b0;

  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ui: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius: 2px;
  --page: 1180px;
  --gutter: 24px;
  --measure: 70ch;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-wrap: balance;
}

h2 {
  font-size: 30px;
  line-height: 1.15;
  margin: 40px 0 14px;
}

h3 {
  font-size: 22px;
  line-height: 1.25;
  margin: 28px 0 8px;
}

p {
  margin: 0 0 20px;
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.08em 0.34em;
}

input[type='number'] {
  -moz-appearance: textfield;
}

hr.section-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 56px 0 0;
}

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

/* ── Masthead ─────────────────────────────────────────────────────
   Sticky, 62px, translucent over a blur. The diamond is a 13px square
   rotated 45° — the only graphic mark in the entire design. */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 249, 244, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 62px;
  margin: 0;
  padding: 0 var(--gutter);
}

@media (min-width: 1228px) {
  .masthead {
    padding: 0 calc((100vw - var(--page)) / 2 + var(--gutter));
  }
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  padding: 12px 0;
}

.wordmark::before {
  content: '';
  width: 13px;
  height: 13px;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}

.wordmark:hover {
  text-decoration: none;
  color: var(--ink);
}

.wordmark strong {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* The tagline is not in the reference masthead. Kept for the footer
   and hidden here so the bar stays at its 62px rhythm. */
.masthead .wordmark span {
  display: none;
}

.masthead nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.masthead nav a {
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ink-45);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.masthead nav a:hover {
  color: var(--ink);
  text-decoration: none;
  border-bottom-color: var(--rule);
}

.masthead nav a.cta {
  margin-left: 12px;
  padding: 9px 16px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--radius);
  border-bottom: 0;
}

.masthead nav a.cta:hover {
  background: var(--accent);
  color: var(--bg);
  border-bottom: 0;
}

@media (max-width: 720px) {
  .masthead nav a.cta {
    display: none;
  }
}

/* ── Page frame ───────────────────────────────────────────────── */

.breadcrumb,
article,
.hero,
.page-head,
.prose,
.calc-card,
.breakdown,
.ad-slot,
.disclaimer,
.toc,
.key-points,
.companion,
hr.section-rule {
  max-width: var(--page);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

article {
  padding-left: 0;
  padding-right: 0;
}

.breadcrumb {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 32px;
  padding-bottom: 0;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb span[aria-hidden] {
  padding: 0 0.5rem;
  color: var(--rule);
}

.page-head {
  padding-top: 24px;
  padding-bottom: 8px;
}

.deck {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 62ch;
  margin: 0 0 28px;
}

/* ── Verification strip ───────────────────────────────────────────
   The reference byline strip: bounded above by a 1px ink rule and
   below by a hairline, mono 12px, generous horizontal gaps. */

.verified-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-70);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 16px 0;
  margin: 0;
}

.verified-strip strong {
  font-weight: 500;
  color: var(--ink);
}

.verified-strip--projected {
  border-top-color: var(--accent);
  color: var(--accent);
}

/* ── The calculator panel ─────────────────────────────────────────
   One bordered panel, inputs and outputs split by a vertical hairline.
   The output column is align-content:start so it never stretches to
   match a long form — the reference does the same, and it is what
   keeps a 24-field calculator from padding out a huge empty block. */

.calc-card {
  margin-top: 32px;
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .calc-card {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

/* Full-bleed to the page grid rather than the container padding. */
@media (min-width: 1228px) {
  .calc-card,
  .breakdown {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Panel header bar and footer strip span both columns of the panel grid. */
.calc-panel-head,
.calc-panel-foot {
  grid-column: 1 / -1;
}

.calc-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule);
}

.calc-panel-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.calc-panel-title h2 {
  font-size: 26px;
  margin: 0;
}

.panel-index {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.panel-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}

.calc-panel-foot {
  border-top: 1px solid var(--rule);
  padding: 14px 24px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.calc-form {
  padding: 26px 24px;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 900px) {
  .calc-form {
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }
}

.calc-results {
  padding: 26px 24px;
  display: grid;
  gap: 24px;
  align-content: start;
}

@media (min-width: 900px) {
  .calc-results {
    position: sticky;
    top: 78px;
    max-height: calc(100vh - 94px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.card-heading {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}

.calc-results .card-heading {
  margin-bottom: 0;
}

/* ── Fields ───────────────────────────────────────────────────── */

.calc-form .field + .field,
.calc-form .field-group + .field {
  margin-top: 22px;
}

.field {
  margin-bottom: 0;
}

.field.is-hidden {
  display: none;
}

.field label {
  display: block;
  font-size: 13px;
  color: var(--ink-70);
  margin-bottom: 7px;
}

.field-input {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}

.field-input:focus-within {
  border-color: var(--accent);
}

.affix {
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  background: var(--surface-alt);
  border-right: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
}

.affix--suffix {
  border-right: 0;
  border-left: 1px solid var(--rule);
}

.field input[type='number'],
.field select {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 9px 11px;
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: transparent;
}

.field input[type='number']:focus {
  outline: none;
}

.field select {
  font-family: var(--ui);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg);
}

.field select:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.field-help {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 7px 0 0;
  text-wrap: pretty;
}

.field-group {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 22px 0 0;
  padding: 20px 0 0;
}

.field-group > legend {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 8px 0 0;
}

.field-group .field + .field {
  margin-top: 22px;
}

.field--year {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 22px;
  margin-bottom: 22px;
}

.advanced {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  margin-top: 22px;
}

.advanced summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

.advanced summary:hover {
  color: var(--accent);
}

.privacy-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  margin: 22px 0 0;
}

/* ── Output cells ─────────────────────────────────────────────────
   The hairline cell grid: a rule-coloured background showing through
   a 1px gap between surface-coloured cells. */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.tile {
  background: var(--surface);
  padding: 16px 16px 14px;
  border: 0;
  border-radius: 0;
}

.tile:first-child {
  grid-column: 1 / -1;
}

.tile-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 6px;
}

.tile-value {
  display: block;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.tile:first-child .tile-value {
  font-size: 26px;
  color: var(--accent);
}

.tile-unit {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  padding-left: 0.35rem;
}

.tile-help {
  display: block;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 3px;
  text-wrap: pretty;
}

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

.result-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
}

.result-table th {
  text-align: left;
  font-weight: 400;
  font-family: var(--ui);
  font-size: 13.5px;
  color: var(--ink-70);
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.result-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 10px 0 10px 14px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  color: var(--ink);
}

.result-table tr:last-child th,
.result-table tr:last-child td {
  border-bottom: 0;
}

.result-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px;
}

.result-table--example {
  max-width: 34rem;
  margin-top: 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 4px 18px;
}

.breakdown {
  margin-top: 32px;
}

.breakdown summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 14px;
}

.breakdown summary:hover {
  color: var(--accent);
}

.breakdown .result-table {
  max-width: 44rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.breakdown .result-table th {
  padding-left: 18px;
}

.breakdown .result-table td.num {
  padding-right: 18px;
}

/* ── Ad slots ─────────────────────────────────────────────────────
   Dashed placeholders at the reference sizes, reserved up front so
   filling them shifts nothing. Deliberately unlike the calculator
   panel so an ad can never be mistaken for the tool. */

.ad-slot {
  min-height: 104px;
  margin: 40px auto;
  border: 1px solid transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}

.ad-slot--rect {
  min-height: 250px;
}

/* The dashed frame and the label appear only once ads are live. Before that
   the slot still reserves its exact height — so enabling ads shifts nothing —
   but an empty dashed box captioned "Advertisement" reads as an unfinished
   site, and "under construction" is a documented AdSense rejection reason. */
.ads-live .ad-slot {
  border-color: #d8d2c2;
  border-style: dashed;
}

.ads-live .ad-slot::after {
  content: 'Advertisement';
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-light);
}

.ads-live .ad-slot:has(ins[data-ad-status='filled'])::after {
  display: none;
}

/* ── Prose ────────────────────────────────────────────────────── */

.prose {
  padding-top: 8px;
}

.prose > p,
.prose > ul,
.prose > ol {
  max-width: var(--measure);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-70);
}

.prose > ul,
.prose > ol {
  padding-left: 20px;
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
}

.prose h2 {
  max-width: var(--measure);
}

.prose h3 {
  max-width: var(--measure);
}

.note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-70);
  background: var(--surface-alt);
  border: 0;
  border-left: 2px solid var(--rule);
  border-radius: 0;
  padding: 14px 18px;
  max-width: var(--measure);
}

.note--warn {
  background: var(--surface);
  border-left-color: var(--accent);
}

.disclaimer {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  margin-top: 48px;
}

/* ── Formula ──────────────────────────────────────────────────── */

.formula {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
}

.formula li {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
}

.step-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.step-expr {
  display: block;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 10px 12px;
  overflow-x: auto;
}

.step-note {
  display: block;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-70);
  margin-top: 10px;
  text-wrap: pretty;
}

/* ── Questions ────────────────────────────────────────────────── */

.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 24px 0;
  max-width: var(--measure);
}

.faq-item:first-of-type {
  border-top: 1px solid var(--ink);
}

.faq-item h3 {
  font-size: 21px;
  margin: 0 0 10px;
}

.faq-item p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-70);
  margin: 0 0 12px;
}

.faq-item p:last-child {
  margin-bottom: 0;
}

/* ── Sources ──────────────────────────────────────────────────── */

.sources {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
  border-top: 1px solid var(--rule);
}

.sources li {
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
  font-size: 14px;
}

/* ── Card lists ───────────────────────────────────────────────────
   The reference index grid: hairline cells, mono meta, square edges,
   surface-alt on hover. */

.card-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.card-list--wide {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.card-list li {
  display: flex;
}

.card-list a {
  display: block;
  width: 100%;
  background: var(--surface);
  padding: 24px 22px 22px;
  color: var(--ink);
  text-decoration: none;
  min-height: 168px;
}

.card-list a:hover {
  background: var(--surface-alt);
  color: var(--ink);
  text-decoration: none;
}

.card-list a {
  display: flex;
  flex-direction: column;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.card-index {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent);
}

.card-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.card-list a strong {
  display: block;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.card-list a > span:not(.card-top):not(.card-out) {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-70);
  text-wrap: pretty;
}

/* What the tool gives you, generated from its own primary outputs so the
   promise on the index cannot drift from the page. */
.card-out {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

.card-out::before {
  content: '→ ';
}

/* ── Guide furniture ──────────────────────────────────────────── */

.key-points {
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 22px 24px;
  margin-bottom: 36px;
}

.key-points h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.key-points ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-70);
  max-width: var(--measure);
}

.toc {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0 20px;
  margin: 0 auto 36px;
  max-width: var(--page);
}

.toc h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.toc ol {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 9px;
  font-size: 14px;
  max-width: var(--measure);
}

.toc a {
  color: var(--ink-70);
}

.toc a:hover {
  color: var(--accent);
}

/* The two-way link between a guide and its calculator. */
.companion {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-70);
  border-left: 2px solid var(--accent);
  padding: 6px 0 6px 18px;
  margin: 0 auto 36px;
  max-width: var(--page);
}

/* ── Home ─────────────────────────────────────────────────────── */

.hero {
  padding-top: 72px;
  padding-bottom: 40px;
}

.hero h1 {
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.02;
  margin-bottom: 20px;
}

.hero .deck {
  font-size: 17px;
  max-width: 52ch;
}

.hero-claim {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--ink-70);
  border-top: 1px solid var(--ink);
  padding-top: 16px;
  margin: 28px 0 0;
  max-width: 62ch;
}

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

footer {
  border-top: 1px solid var(--rule);
  background: var(--surface-alt);
  margin-top: 72px;
}

.footer-grid {
  max-width: var(--page);
  margin: 0 auto;
  padding: 48px var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
}

.footer-brand .wordmark {
  padding: 0;
  margin-bottom: 10px;
}

.footer-brand .wordmark::before {
  width: 11px;
  height: 11px;
}

.footer-brand .wordmark strong {
  font-size: 19px;
}

.footer-brand p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 32ch;
}

.footer-col {
  display: grid;
  gap: 8px;
  align-content: start;
  font-size: 14px;
}

.footer-col h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}

.footer-col a {
  color: var(--ink-70);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-note {
  max-width: var(--page);
  margin: 0 auto;
  padding: 18px var(--gutter) 40px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* ── Ungated banner ───────────────────────────────────────────── */

.ungated-banner {
  margin: 0;
  padding: 12px var(--gutter);
  background: var(--negative);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 12.5px;
  text-align: center;
}

.ungated-banner code {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--bg);
}

/* ── Reduced motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .calc-results {
    position: static;
    max-height: none;
  }
}

/* ── Print ────────────────────────────────────────────────────────
   People print these for their accountant. */

@media print {
  .ad-slot,
  .masthead nav,
  .breadcrumb,
  #related,
  .toc,
  footer nav {
    display: none !important;
  }

  body {
    background: #fff;
    font-size: 11pt;
  }

  .masthead {
    position: static;
    background: none;
    backdrop-filter: none;
  }

  .calc-card {
    display: block;
  }

  .calc-results {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .calc-form {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  a {
    color: #000;
  }
}