/*
 * Wagepage.
 *
 * Light-grounded, with dark used as a BAND rather than as a theme. The original
 * reason for light-only was display ads needing white backgrounds, and that
 * reason lapsed when the ad code was removed (commit ae0ec1a). AdSense is still
 * the intent though, so the page stays predominantly light: the ink band is the
 * net-pay answer and the assumptions strip, never a whole page, so any future ad
 * slot still lands on white.
 *
 * THE PAYSLIP. A payslip is banded because each band is a different kind of
 * money: what you earned, what was taken, what is left. The page borrows that,
 * so a colour change always means a change of subject rather than decoration.
 * Figures are monospace and tabular so columns line up, the way they do on the
 * paper version.
 *
 * The pay bar is the design signature. A salary is one quantity cut into
 * pieces, so the page is built around showing those pieces at their real
 * relative sizes. Everything else stays out of its way.
 */

:root {
  color-scheme: light;

  --wp-ink: #14161a;
  --wp-ink-soft: #5a6270;
  --wp-line: #e2e5ea;
  --wp-bg: #ffffff;
  --wp-bg-soft: #f6f7f9;
  --wp-accent: #1c6b4a;

  /* The slice palette. Take-home is the only green: it is the thing you keep,
     and it should read as the good news at a glance. Everything else is a
     deduction and sits in warmer or cooler neutrals so the eye groups them. */
  --wp-take: #1c6b4a;
  --wp-tax: #b3341f;
  --wp-ni: #d97706;
  --wp-loan: #7c3aed;
  --wp-pension: #2563eb;

  --wp-radius: 10px;
  --wp-maxw: 720px;

  /* Payslip bands. Tinted grounds, not saturated ones: they have to sit under
     body text at AA without turning the page into a colour chart. */
  --wp-band-earn: #edf4f0;
  --wp-band-ded:  #fbefec;
  --wp-band-note: #fdf6e8;
  --wp-band-ink:  #0e1613;
  --wp-band-ink-soft: #a9bcb2;

  /* Apple's minimum, named once so it cannot drift per control. */
  --wp-tap: 48px;

  --wp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

body {
  margin: 0;
  background: var(--wp-bg);
  color: var(--wp-ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wp-wrap { max-width: var(--wp-maxw); margin: 0 auto; padding: 0 20px; }

/*
 * THE DISPLAY FACE IS THE MONOSPACE, and that is the decision rather than a
 * placeholder waiting for a webfont.
 *
 * A payslip is set in monospace because columns of figures have to line up. So
 * the site's voice comes from the thing the subject already uses, at display
 * size, rather than from a serif borrowed off a design reference. It is also
 * distinct from the two skins it must not resemble: popstats is a large serif
 * gazetteer, and the Catona reference is an extra-light serif.
 *
 * It costs nothing. ui-monospace resolves to SF Mono, Cascadia or Consolas,
 * which are already on the device, so there is no webfont request, no FOUT and
 * no LCP cost. A self-hosted face can still drop in later by changing this one
 * declaration; nothing else depends on it.
 *
 * Only the H1 takes it. Section headings stay on the system sans, because a
 * heading like "Why two gov.uk pages give different answers" is a sentence and
 * monospace makes sentences harder to read. Boldness in one place.
 */
h1 {
  font-family: var(--wp-mono);
  /* Floor is 1.6rem because monospace sets about 15% wider than the sans it
     replaced, so the old max-width:560px override that used to do this is gone:
     the clamp is now the only thing sizing the H1. */
  font-size: clamp(1.6rem, 5.2vw, 2.3rem);
  font-weight: 650;
  line-height: 1.14;
  margin: 0 0 .55rem;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
h2 { font-size: 1.3rem; margin: 2.5rem 0 .75rem; letter-spacing: -0.018em; font-weight: 680; text-wrap: balance; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; letter-spacing: -0.008em; }
p { margin: 0 0 1rem; }
a { color: var(--wp-accent); }

.wp-lead { font-size: 1.1rem; color: var(--wp-ink-soft); margin-bottom: 1.5rem; }

/* ---------------- header ---------------- */

.wp-header {
  border-bottom: 1px solid var(--wp-line);
  padding: 14px 0;
  margin-bottom: 28px;
}
.wp-header .wp-wrap { display: flex; align-items: center; justify-content: space-between; }
.wp-logo { font-weight: 700; text-decoration: none; color: var(--wp-ink); letter-spacing: -0.02em; }
.wp-logo span { color: var(--wp-accent); }

/* ---------------- the tool ---------------- */

.wp-tool {
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-radius);
  padding: 22px;
  background: var(--wp-bg);
}

.wp-field { margin-bottom: 16px; }
.wp-field label,
.wp-fieldset-label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--wp-ink-soft);
  margin-bottom: 6px;
}

/* Style the control, not a list of input types. Naming date/number/select
   individually is how text inputs end up unstyled the moment one gets added. */
.wp-tool input:not([type=checkbox]):not([type=radio]),
.wp-tool select {
  width: 100%;
  min-height: var(--wp-tap);
  padding: 11px 12px;
  font: inherit;
  color: inherit;
  background: var(--wp-bg);
  border: 1px solid var(--wp-line);
  border-radius: 8px;
}
/* Figures you type are figures: monospace and tabular so a salary lines up with
   the answer it produces, and so 11111 and 88888 are the same width. */
.wp-tool input[inputmode=numeric],
.wp-tool input[type=number] {
  font-family: var(--wp-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.wp-tool input:focus-visible,
.wp-tool select:focus-visible {
  outline: 2px solid var(--wp-accent);
  outline-offset: 1px;
  border-color: var(--wp-accent);
}

.wp-row { display: flex; gap: 12px; }
.wp-row > * { flex: 1; }

.wp-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--wp-line);
  border-radius: 999px;
  font-size: .9rem;
  cursor: pointer;
  user-select: none;
}
.wp-check:has(input:checked) {
  border-color: var(--wp-accent);
  background: #f0f7f3;
  color: var(--wp-accent);
  font-weight: 600;
}
.wp-check input { accent-color: var(--wp-accent); }

/* ---------------- result ---------------- */

.wp-result { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--wp-line); }

.wp-headline { line-height: 1.1; margin-bottom: 4px; }
.wp-headline-num {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.wp-headline-unit { font-size: 1.1rem; color: var(--wp-ink-soft); margin-left: 4px; }
.wp-sub { color: var(--wp-ink-soft); font-size: .95rem; margin-bottom: 20px; }

/* The bar itself. */
.wp-bar {
  display: flex;
  height: 46px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--wp-bg-soft);
}
.wp-slice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2px;
  overflow: hidden;
  transition: flex-basis .18s ease;
}
.wp-slice-val {
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 6px;
}
.wp-slice--take    { background: var(--wp-take); }
.wp-slice--tax     { background: var(--wp-tax); }
.wp-slice--ni      { background: var(--wp-ni); }
.wp-slice--loan    { background: var(--wp-loan); }
.wp-slice--pension { background: var(--wp-pension); }

.wp-legend { list-style: none; margin: 14px 0 0; padding: 0; }
.wp-legend-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--wp-line);
  font-size: .93rem;
}
.wp-legend-item:last-child { border-bottom: 0; }
.wp-swatch { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.wp-swatch--take    { background: var(--wp-take); }
.wp-swatch--tax     { background: var(--wp-tax); }
.wp-swatch--ni      { background: var(--wp-ni); }
.wp-swatch--loan    { background: var(--wp-loan); }
.wp-swatch--pension { background: var(--wp-pension); }
.wp-legend-label { flex: 1; }
.wp-legend-val { font-variant-numeric: tabular-nums; font-weight: 600; }

.wp-note {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--wp-bg-soft);
  border-radius: 8px;
  font-size: .92rem;
  line-height: 1.55;
}
.wp-note strong { color: var(--wp-ink); }

.wp-error { color: var(--wp-tax); font-size: .92rem; margin: 12px 0 0; }

/* ---------------- tables ---------------- */

.wp-table-scroll { overflow-x: auto; }
table.wp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  margin: 0 0 1rem;
}
.wp-table th, .wp-table td { padding: 9px 10px; border-bottom: 1px solid var(--wp-line); text-align: left; }
.wp-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wp-ink-soft); }
.wp-table .wp-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------- trust ---------------- */

.wp-stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: .85rem;
  color: var(--wp-ink-soft);
  margin: 10px 0 0;
}
.wp-stamp strong { color: var(--wp-ink); font-weight: 600; }

.wp-footer {
  margin-top: 56px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--wp-line);
  font-size: .88rem;
  color: var(--wp-ink-soft);
}

@media (max-width: 560px) {
  .wp-row { flex-direction: column; gap: 0; }
  .wp-headline-num { font-size: 2.1rem; }
}

/* ---------------- tax code ---------------- */

.wp-optional {
  font-weight: 400;
  text-transform: none;
  color: var(--wp-ink-soft);
  opacity: .75;
}

/* Uppercase display without mangling what the visitor typed. Tax codes are
   conventionally uppercase and the parser is case-insensitive, so this is
   cosmetic and the value is left alone. */
#wp-tax-code { text-transform: uppercase; }

.wp-code-msg {
  margin: -4px 0 16px;
  font-size: .87rem;
  color: var(--wp-accent);
}
.wp-code-msg--bad { color: var(--wp-tax); }

/* Reserved for things the visitor should act on, rather than merely know. */
.wp-note--warn {
  background: #fdf3f1;
  border-left: 3px solid var(--wp-tax);
}

/* ---------------- comparison strip ---------------- */

/* The reason anyone searches company car tax: the spread between an EV and a
   petrol on the same list price is enormous and invisible until you see it side
   by side. Bars, not a table, because the point is the ratio. */
.wp-cmp { list-style: none; margin: 0; padding: 0; }
.wp-cmp-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr 2.5rem 5rem;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: .9rem;
}
.wp-cmp-label { display: flex; flex-direction: column; line-height: 1.25; }
.wp-cmp-sub { font-size: .75rem; color: var(--wp-ink-soft); font-weight: 400; }
.wp-cmp-track { background: var(--wp-bg-soft); border-radius: 4px; height: 20px; overflow: hidden; }
.wp-cmp-fill {
  display: block;
  height: 100%;
  background: var(--wp-tax);
  border-radius: 4px;
  transition: width .18s ease;
}
.wp-cmp-pct { font-size: .8rem; color: var(--wp-ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.wp-cmp-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .wp-cmp-row { grid-template-columns: 6.5rem 1fr 4.5rem; }
  .wp-cmp-pct { display: none; }
}

/* ---------------- maternity timeline ---------------- */

/* 52 bars, one per week. The shape IS the story: six weeks near-normal, a wall
   at week 7, then 13 weeks of nothing. Phase blocks would average that away. */
.wp-timeline {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 120px;
  padding: 0;
  margin: 4px 0 10px;
  border-bottom: 2px solid var(--wp-line);
}
.wp-wk {
  flex: 1;
  min-width: 0;
  border-radius: 2px 2px 0 0;
  transition: height .18s ease;
}
.wp-wk--ninety { background: var(--wp-take); }
.wp-wk--flat   { background: var(--wp-ni); }
.wp-wk--unpaid { background: var(--wp-line); }
/* Weeks beyond the leave actually taken: present but greyed, so shortening the
   slider reads as "not taking these" rather than the chart simply shrinking. */
.wp-wk--off { opacity: .22; }

.wp-timeline-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: .8rem;
  color: var(--wp-ink-soft);
  margin-bottom: 4px;
}
.wp-timeline-key span { display: inline-flex; align-items: center; gap: 6px; }
.wp-timeline-key .wp-swatch { display: inline-block; }
.wp-swatch--ninety { background: var(--wp-take); }
.wp-swatch--flat   { background: var(--wp-ni); }
.wp-swatch--unpaid { background: var(--wp-line); }
.wp-timeline-axis { margin-left: auto; }

input[type=range] { accent-color: var(--wp-accent); padding: 0; }

/* ---------------- home ---------------- */

.wp-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wp-tool-card {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-radius);
  text-decoration: none;
  color: inherit;
}
.wp-tool-card:hover { border-color: var(--wp-accent); }
.wp-tool-card b { display: block; color: var(--wp-accent); margin-bottom: 2px; }
.wp-tool-card span { font-size: .92rem; color: var(--wp-ink-soft); }

.wp-related {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--wp-line);
}
.wp-related h2 { margin-top: 0; font-size: 1.05rem; }

/* ================ tool layout ================
 *
 * Result-first. The single most-reported problem with this site was that you
 * landed on a "take-home pay calculator", saw a form, and had to scroll past
 * five fields to reach the number you came for. On a 375x812 phone the answer
 * was cut off by the viewport edge.
 *
 * So: one question, answered immediately, then options to refine. Salary is the
 * only field that is genuinely required; region, tax code, pension and student
 * loan are all refinements and can wait behind a disclosure.
 *
 * Mobile   — primary field, ANSWER, then "More options".
 * Desktop  — two columns, answer on the right and sticky, everything visible.
 *
 * The grid areas do the reordering, so the DOM stays in a sensible reading
 * order for screen readers and the source order never fights the layout.
 */

.wp-shell {
  display: grid;
  grid-template-areas:
    "primary"
    "answer"
    "secondary";
  gap: 18px;
}
.wp-primary   { grid-area: primary; }
.wp-answer    { grid-area: answer; }
.wp-secondary { grid-area: secondary; }

@media (min-width: 880px) {
  .wp-shell {
    grid-template-areas:
      "primary   answer"
      "secondary answer";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto 1fr;
    gap: 22px 28px;
    align-items: start;
  }
  /* The answer follows you down the options. It is the whole point of the page;
     it should never be the thing that scrolls away. */
  .wp-answer { position: sticky; top: 20px; }
}

/* The primary question gets weight the refinements do not. */
.wp-field--primary label {
  font-size: 1rem;
  color: var(--wp-ink);
  margin-bottom: 8px;
}
.wp-field--primary input {
  font-size: 1.35rem !important;
  font-weight: 600;
  padding: 14px 14px !important;
  font-variant-numeric: tabular-nums;
}

/* ---------------- the answer panel ---------------- */

/* A tinted surface so the answer reads as the answer, not as more form. */
.wp-answer-panel {
  background: var(--wp-bg-soft);
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-radius);
  padding: 18px;
}
.wp-answer-panel .wp-result {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* The bar leads. It is the one thing here nobody else has, and it says "this is
   where your money goes" before you have read a single number. */
.wp-answer-panel .wp-bar { margin-bottom: 14px; }
.wp-answer-panel .wp-headline { margin-bottom: 2px; }
.wp-answer-panel .wp-headline-num { font-size: 2.2rem; }

/* ---------------- more options ---------------- */

.wp-more {
  border: 1px solid var(--wp-line);
  border-radius: 8px;
  padding: 0;
}
.wp-more > summary {
  padding: 11px 14px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  color: var(--wp-ink-soft);
  list-style: none;
  user-select: none;
}
.wp-more > summary::-webkit-details-marker { display: none; }
.wp-more > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform .15s ease;
}
.wp-more[open] > summary::before { transform: rotate(90deg); }
.wp-more[open] > summary { border-bottom: 1px solid var(--wp-line); }
.wp-more-body { padding: 14px 14px 2px; }
.wp-more .wp-field:last-child { margin-bottom: 12px; }

@media (min-width: 880px) {
  /* With two columns there is room to show everything, so the disclosure stops
     earning its keep. JS opens it; the border and summary get out of the way. */
  .wp-more { border: 0; }
  .wp-more > summary { display: none; }
  .wp-more-body { padding: 0; }
}

/* ---------------- byline ---------------- */

/* The trust strip under the H1. Small, quiet, but present before the tool, so
   the "sourced from gov.uk, checked on this date" signal is the first thing
   after the headline rather than the last thing on the page. */
.wp-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: .85rem;
  color: var(--wp-ink-soft);
  margin: -6px 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wp-line);
}
.wp-byline a { color: var(--wp-accent); }

/* ---------------- divergence chart ---------------- */

/* Two threshold lines pulling apart, with the gap shaded. Inline SVG so it adds
   no request and scales with its container. */
.wp-chart-wrap { margin: 0 0 20px; }
.wp-chart { width: 100%; height: auto; display: block; color: var(--wp-ink-soft); }

/* ---------------- tax code checker ---------------- */

.wp-code-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.wp-code-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--wp-accent);
  background: #f0f7f3;
  border-radius: 6px;
  padding: 4px 10px;
}
.wp-code-means { font-size: 1.05rem; font-weight: 600; }
.wp-code-detail { font-size: .93rem; color: var(--wp-ink-soft); line-height: 1.55; margin: 0; }

/* ---------------- salary sacrifice bars ---------------- */

/* Two bars on one scale. The pension bar being visibly longer than the cost bar
   is the whole argument, so they must share a scale or it means nothing. */
.wp-ss-bars { margin: 4px 0 16px; }
.wp-ss-row { display: grid; grid-template-columns: 9rem 1fr 4.5rem; align-items: center; gap: 10px; padding: 5px 0; font-size: .9rem; }
.wp-ss-track { background: var(--wp-bg-soft); border-radius: 4px; height: 22px; overflow: hidden; }
.wp-ss-fill { display: block; height: 100%; border-radius: 4px; transition: width .18s ease; }
.wp-ss-fill--cost { background: var(--wp-ni); }
.wp-ss-fill--pot { background: var(--wp-take); }
.wp-ss-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.wp-ss-note { font-size: .8rem; color: var(--wp-ink-soft); margin: 0 0 4px 9.6rem; }

@media (max-width: 560px) {
  .wp-ss-row { grid-template-columns: 7rem 1fr 4rem; font-size: .85rem; }
  .wp-ss-note { margin-left: 0; }
}

/* ---------------- embeddable chart ---------------- */

.wp-embed-preview {
  width: 100%;
  height: auto;
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-radius);
}
.wp-embed-code {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  line-height: 1.5;
  padding: 12px;
  border: 1px solid var(--wp-line);
  border-radius: 8px;
  background: var(--wp-bg-soft);
  color: var(--wp-ink);
  resize: vertical;
}

/* ---------------- nav and breadcrumbs ---------------- */

.wp-nav { display: flex; gap: 18px; font-size: .92rem; }
.wp-nav a { color: var(--wp-ink-soft); text-decoration: none; font-weight: 600; }
.wp-nav a:hover { color: var(--wp-accent); }

/* Breadcrumbs sit above the content, not inside it, so a reader landing deep
   from search sees where they are before they see the tool. */
.wp-crumbs {
  font-size: .84rem;
  color: var(--wp-ink-soft);
  margin-bottom: 14px;
  margin-top: -14px;
}
.wp-crumbs a { color: var(--wp-ink-soft); }
.wp-crumb-sep { margin: 0 7px; opacity: .5; }

.wp-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 14px;
}
.wp-footer-nav a { color: var(--wp-ink-soft); }

@media (max-width: 560px) {
  .wp-nav { gap: 12px; font-size: .85rem; }
}

/* ---------------- the payslip: bands, sticky answer, motion ---------------- */

/*
 * THE STICKY ANSWER. Measured on the live take-home page at 375x812 before this
 * existed: the answer sat 597px down a 7,216px page and nothing was sticky, so
 * scrolling to read what National Insurance costs you took the figure it cost
 * you off the screen. Every comparison meant scrolling back.
 *
 * Sticky rather than fixed, so it pins only while the tool is on screen and
 * releases when you have left it. It does not follow you into the prose.
 */
.wp-answer { position: relative; }

/*
 * THE PINNED ANSWER, and why it is not position:sticky.
 *
 * Sticky pins an element within its own parent's box. The headline's parent is
 * .wp-result, which is 366px tall, so a sticky headline releases after 366px of
 * a 7,300px page: it survives the breakdown directly under it and is gone long
 * before "where the money goes". Measured, not assumed.
 *
 * So the real answer travels in a separate fixed bar that appears only once the
 * live figure has left the screen, and hides again when you scroll back to it.
 * It mirrors the headline rather than duplicating the logic, so it cannot
 * disagree with the number it is copying.
 */
.wp-pinned {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 30;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 20px;
  background: var(--wp-band-ink);
  color: #fff;
  /* Hidden by being translated off the top, not by visibility. Transitioning
     visibility is a footgun: it also makes innerText return empty, which is how
     this looked broken while the logic underneath was correct. */
  transform: translateY(-100%);
  pointer-events: none;
}
.wp-pinned[data-show="1"] { transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
  .wp-pinned { transition: transform 220ms ease; }
}
.wp-pinned .n {
  font-family: var(--wp-mono);
  font-size: 1.25rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.wp-pinned .u {
  font-family: var(--wp-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp-band-ink-soft);
}
@media (min-width: 721px) { .wp-pinned { display: none; } }

@media (max-width: 720px) {
  .wp-headline-num { font-size: 2rem; }

  /* The byline is load-bearing for E-E-A-T so it stays in the DOM where it is,
     but it does not need three lines of a phone screen before the tool. */
  .wp-byline { gap: 4px 14px; font-size: .78rem; margin-bottom: 16px; padding-bottom: 12px; }
  .wp-lead { margin-bottom: 16px; }
  .wp-tool { padding: 18px; border-radius: 0; margin-left: -20px; margin-right: -20px; border-left: none; border-right: none; }
}

/* Figures anywhere in a result read as a payslip column. */
.wp-headline-num,
.wp-num,
.wp-rows .wp-num,
.wp-table .wp-num { font-variant-numeric: tabular-nums; }

/* ---- the bands ---- */
/*
 * A band is a change of subject, never decoration. Earnings, deductions, the
 * answer, and the caveats. If a section is not one of those four things it does
 * not get a band.
 */
.wp-band {
  margin: 22px -20px;
  padding: 20px;
  border-left: 4px solid transparent;
}
.wp-band > :first-child { margin-top: 0; }
.wp-band > :last-child { margin-bottom: 0; }
.wp-band--earn { background: var(--wp-band-earn); border-left-color: var(--wp-take); }
.wp-band--ded  { background: var(--wp-band-ded);  border-left-color: var(--wp-tax); }
.wp-band--note { background: var(--wp-band-note); border-left-color: var(--wp-ni); }
.wp-band--ink  { background: var(--wp-band-ink); border-left-color: var(--wp-take); color: #eef4f0; }
.wp-band--ink a { color: #7fd3aa; }
.wp-band--ink .wp-band-label { color: #7fd3aa; }
.wp-band-label {
  font-family: var(--wp-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp-ink-soft);
  margin: 0 0 8px;
  display: block;
}
@media (min-width: 721px) {
  .wp-band { margin-left: 0; margin-right: 0; border-radius: var(--wp-radius); }
}

/* ---- motion ----
 * One moment, on the thing that carries meaning: the bar segments grow to their
 * real share when a figure changes. Nothing counts up, because a number that is
 * still animating is a number you cannot read, and this site's whole argument is
 * that its numbers can be checked.
 */
@media (prefers-reduced-motion: no-preference) {
  .wp-bar > * { transition: width 900ms cubic-bezier(.22, 1, .36, 1); }
  .wp-ss-fill { transition: width 900ms cubic-bezier(.22, 1, .36, 1); }
}

/* Header and footer links measured at 16-27px tall. Padding rather than a height,
   so the text stays where it is and only the hit area grows. */
@media (max-width: 720px) {
  .wp-header a, .wp-nav a, footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .wp-header .wp-logo { min-height: 44px; display: inline-flex; align-items: center; }
}