*,
::before,
::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
} /*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/ /*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: "";
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family:
    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.\!table {
  display: table !important;
}
.table {
  display: table;
}
.hidden {
  display: none;
}
.grow {
  flex-grow: 1;
}
.border {
  border-width: 1px;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
    var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
    var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/**
 * The design system, spec §23.
 *
 * Set for an older, lower-confidence audience rather than for visual fashion.
 * The primary users are grandparents in their sixties and seventies, often
 * reading on a phone at a stressful moment. Accessibility here is the use case,
 * not a compliance exercise.
 *
 * Everything visual lives in this file. Components carry class names that say
 * what a thing is, never how it looks.
 */

:root {
  /* Type. 18px base, not 16: this audience skews 55 to 75. */
  --text-base: 18px;
  --text-sm: 16px; /* absolute floor anywhere on the site */
  --text-lede: 1.2rem;
  /* Scales with the viewport: 2.25rem is right on a laptop and takes four
     lines on a 390px phone, which pushes the answer below the fold before
     the reader has done anything. */
  --text-h1: clamp(1.75rem, 1.35rem + 1.8vw, 2.25rem);
  --text-h2: 1.6rem;
  --text-h3: 1.25rem;
  --text-h4: 1.05rem;

  /* Presbyopia makes tightly set lines hard to track: the eye returns to the
     start of a line and lands on the wrong one. The extra leading costs a
     little scrolling and buys a lot of comfort. */
  --leading: 1.7;
  --leading-tight: 1.2;
  --measure: 64ch;

  /* One spacing scale, so rhythm is consistent rather than per-component. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  --ink: #1a1a1a; /* 17.4:1 on white */
  --ink-muted: #4a4a4a; /* 8.9:1 on white, 8.0:1 on --surface-sunk */
  --ink-inverse: #ffffff;

  --brand: #0b3d2c; /* the masthead and the hero figure */
  --brand-bright: #0b57d0; /* links and the primary action */
  --brand-bright-hover: #08429c;

  --critical: #a8071a;
  --important: #8a4b00;

  --surface: #ffffff;
  --surface-sunk: #f4f4f2;
  --surface-tint: #eef3fd;
  --line: #d4d4d0; /* quiet rules between sections */
  --line-strong: #767676; /* 4.5:1, for borders that must be perceivable */

  --tap: 48px; /* WCAG 2.2 AA target size */
  --focus: 3px solid #0b57d0;
  --focus-offset: 2px;
  --radius: 8px;
}

/* ── Base ───────────────────────────────────────────────────────────────── */

html {
  font-size: var(--text-base);
  scroll-padding-top: var(--s8); /* WCAG 2.2 SC 2.4.11 */
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  /* No web font on the critical path (§31), and none is needed: each of these
     is a well-drawn interface face with generous apertures and distinct 1/l/I,
     which matters more at this reading age than anything we could download. */
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI Variable Text",
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 1rem;
  line-height: var(--leading);
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

h1,
h2,
h3,
h4 {
  line-height: var(--leading-tight);
  margin: var(--s6) 0 var(--s3);
  text-wrap: balance;
  letter-spacing: -0.011em;
}
h1 {
  font-size: var(--text-h1);
  margin-top: 0;
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--text-h2);
}
h3 {
  font-size: var(--text-h3);
  letter-spacing: 0;
}
h4 {
  font-size: var(--text-h4);
  letter-spacing: 0;
}

p,
li {
  max-width: var(--measure);
}
p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

/* Tailwind's preflight strips list markers. Restore them: an unmarked list
   reads as loose paragraphs and loses the "these are separate points" signal. */
ul,
ol {
  margin: 0 0 1.15em;
  padding-left: 1.4em;
}
ul {
  list-style: disc;
}
ol {
  list-style: decimal;
}
li {
  margin-bottom: 0.45em;
}
li:last-child {
  margin-bottom: 0;
}
li > ul,
li > ol {
  margin-top: 0.45em;
}
li::marker {
  color: var(--ink-muted);
}

/* A long URL in a citation must not push the page sideways on a phone. */
p,
li,
dd,
td,
th {
  overflow-wrap: break-word;
}

/* Figures only line up in a column if the digits share a width. */
table,
.tabular,
.money {
  font-variant-numeric: tabular-nums;
}

/* Emphasis carries meaning here, often the difference between what a council
   must do and what it may do, so it needs to be visibly heavier. */
strong,
b {
  font-weight: 650;
}

a {
  color: var(--brand-bright);
  /* Explicit: Tailwind's preflight sets text-decoration: inherit on anchors.
     Links in body text must be distinguishable without colour (WCAG 1.4.1). */
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 2px;
}

button,
[role="button"],
select,
input:not([type="hidden"]) {
  min-height: var(--tap);
  font-size: 1rem;
  font-family: inherit;
}
input[type="radio"],
input[type="checkbox"] {
  min-height: 24px;
  min-width: 24px;
  width: 24px;
  height: 24px;
  accent-color: var(--brand-bright);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  padding: var(--s3) var(--s4);
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

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

.wrap {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 var(--s4);
}

.masthead {
  background: var(--brand);
  color: var(--ink-inverse);
}
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s5);
  padding-top: var(--s3);
  padding-bottom: var(--s3);
}
.masthead__brand {
  color: var(--ink-inverse);
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.05rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  margin-right: auto;
}
.masthead__brand:hover {
  text-decoration: underline;
}
.masthead__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.masthead__nav a {
  display: inline-block;
  color: var(--ink-inverse);
  text-decoration: none;
  padding: var(--s2) 0;
  font-size: var(--text-sm);
}
.masthead__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.masthead__nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
.masthead :focus-visible {
  outline-color: #ffffff;
}

.site-main {
  flex: 1 0 auto;
  padding-top: var(--s6);
  padding-bottom: var(--s7);
}

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface-sunk);
  padding: var(--s5) 0;
  font-size: var(--text-sm);
}
.site-footer p {
  color: var(--ink-muted);
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A rule above a section is the cheapest way to make a long page scannable. */
.section {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.section > :first-child {
  margin-top: 0;
}

/* ── Text ───────────────────────────────────────────────────────────────── */

.lede {
  font-size: var(--text-lede);
  color: var(--ink);
  margin-bottom: var(--s5);
}

/* A figure that carries a sentence on its own, on the About page. The writing
   guide asks for numbers on their own line, and at reading size a bare "£127 a
   week." between two paragraphs just looks like a short paragraph. */
.story-figure {
  font-size: 1.5rem;
  font-weight: 700;
  margin: var(--s4) 0;
}

.hint {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: var(--s3) var(--s5);
  border: 2px solid var(--brand-bright);
  border-radius: var(--radius);
  background: var(--brand-bright);
  color: var(--ink-inverse);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  background: var(--brand-bright-hover);
  border-color: var(--brand-bright-hover);
}
.btn--secondary {
  background: var(--surface);
  color: var(--brand-bright);
}
.btn--secondary:hover {
  background: var(--surface-tint);
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}

/* ── Cards, used for the guide index ────────────────────────────────────── */

.cards {
  list-style: none;
  margin: var(--s5) 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
}
.cards li {
  margin: 0;
  max-width: none;
}
.card {
  display: block;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-bright);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.card:hover {
  background: var(--surface-tint);
  border-color: var(--brand-bright);
}
.card__title {
  display: block;
  font-weight: 650;
  font-size: var(--text-h4);
  color: var(--brand-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: var(--s1);
}
.card__meta {
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

.field {
  display: block;
  margin: 0 0 var(--s5);
}
.field__label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--s1);
}
.field__hint {
  display: block;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--s2);
}
.field__error {
  display: block;
  color: var(--critical);
  font-weight: 600;
  margin-bottom: var(--s2);
}
.field input[type="text"],
.field input[type="date"],
.field select {
  width: 100%;
  max-width: 22rem;
  padding: var(--s2) var(--s3);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
}
.field input[aria-invalid="true"] {
  border-color: var(--critical);
  border-width: 3px;
}

fieldset {
  border: 0;
  margin: 0 0 var(--s5);
  padding: 0;
}
legend {
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--s2);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s2); /* 8px spacing, WCAG 2.2 SC 2.5.8 */
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.choice:hover {
  background: var(--surface-sunk);
}
/* The chosen answer.
   .choice--on is set by the component and works everywhere. :has() is kept
   alongside it so the styling still holds if the markup is ever used without
   the class, but it is no longer what the state depends on: on Safari below
   15.4, which this audience does use, :has() does nothing at all.
   The emphasis is an inset shadow rather than a thicker border, because
   growing the border from 2px to 3px moved the row by a pixel every time
   someone picked an answer. */
.choice--on,
.choice:has(input:checked) {
  border-color: var(--brand-bright);
  box-shadow: inset 0 0 0 1px var(--brand-bright);
  background: var(--surface-tint);
}

/* ── Callouts ───────────────────────────────────────────────────────────── */

.callout {
  border-left: 6px solid var(--brand-bright);
  background: var(--surface-sunk);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout > :last-child {
  margin-bottom: 0;
}
.callout--critical {
  border-left-color: var(--critical);
}
.callout--important {
  border-left-color: var(--important);
}

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

table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--s5) 0;
}
th,
td {
  text-align: left;
  padding: var(--s3);
  border-bottom: 1px solid var(--line);
}
th {
  font-weight: 600;
  background: var(--surface-sunk);
}
caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: var(--s2);
}

/* Wide content scrolls inside its own box; the page never scrolls sideways.
   The box is focusable (see ScrollableTable) so a keyboard can reach it. */
.scroll-x {
  overflow-x: auto;
}
.scroll-x:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

details {
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--s2) var(--s4);
  margin: var(--s5) 0;
}
summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
  padding: var(--s2) 0;
}

/* ── Flags on the result ────────────────────────────────────────────────── */
/* A section per severity, not a card per flag. The heading carries the
   severity in words, so colour is reinforcement rather than the only signal. */

.flag-group {
  border-left: 6px solid var(--line-strong);
  padding-left: var(--s5);
  margin: var(--s6) 0;
}
.flag-group--critical {
  border-left-color: var(--critical);
}
.flag-group--important {
  border-left-color: var(--important);
}
.flag-group--info {
  border-left-color: var(--brand-bright);
}
.flag-group__heading {
  margin-top: 0;
  margin-bottom: var(--s1);
}
.flag-group--critical .flag-group__heading {
  color: var(--critical);
}
.flag-group--important .flag-group__heading {
  color: var(--important);
}
.flag-group__blurb {
  margin: 0 0 var(--s5);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.flag-item {
  margin-bottom: var(--s5);
}
.flag-item:last-child {
  margin-bottom: 0;
}
.flag-item__title {
  margin: 0 0 var(--s1);
  font-size: var(--text-h4);
  font-weight: 650;
}
.flag-item__body {
  padding-left: var(--s4);
}
.flag-item__body > :last-child {
  margin-bottom: 0;
}
.flag-item__source,
.flag-item__action {
  margin: var(--s2) 0 0;
  font-size: var(--text-sm);
}

/* ── Small utilities ────────────────────────────────────────────────────── */
/* A short, closed set. These exist so spacing and colour stop being typed
   into the markup; anything needing more than one of them earns a real class. */

.flush {
  margin: 0;
}
.flush-top {
  margin-top: 0;
}
.flush-bot {
  margin-bottom: 0;
}
.gap-sm {
  margin-top: var(--s2);
}
.gap-md {
  margin-top: var(--s3);
}
.gap-lg {
  margin-top: var(--s5);
}
.gap-xl {
  margin-top: var(--s6);
}
.muted {
  color: var(--ink-muted);
}
.small {
  font-size: var(--text-sm);
}
.big {
  font-size: var(--text-lede);
}
.nowrap {
  white-space: nowrap;
}
.strong {
  font-weight: 600;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

/* ── The headline figure ────────────────────────────────────────────────── */
/* Spec §21: lead with the ceiling, not the estimate. This is the number the
   whole page exists to show, so it gets the only really large type on the
   site, and enough surrounding quiet to be read at a glance on a phone. */

.hero__figure {
  color: var(--brand);
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 700;
  margin: var(--s1) 0;
}
.hero__figure .hero__unit {
  font-size: var(--text-h3);
  font-weight: 600;
}
.hero__annual {
  font-size: var(--text-h3);
  color: var(--brand);
  margin: 0 0 var(--s3);
}

/* The reg 7 case: a second figure, framed as an assumption rather than an
   answer, so it must read as secondary to the one above it. */
.hero--assumed {
  border: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
}
.hero--assumed .hero__figure {
  font-size: 2.25rem;
  margin: 0 0 var(--s1);
}
.hero--assumed .hero__unit {
  font-size: var(--text-h4);
}

/* ── Result page pieces ─────────────────────────────────────────────────── */

.banner-critical {
  background: var(--critical);
  color: var(--ink-inverse);
  padding: var(--s3) 0;
}
.banner-critical p {
  margin: 0;
  color: var(--ink-inverse);
  max-width: none;
}
.banner-critical a {
  color: var(--ink-inverse);
}

.callout__label {
  font-weight: 700;
  margin: 0 0 var(--s2);
}

.estimate {
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
}
.estimate__figure {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 var(--s1);
}
.estimate__note {
  color: var(--ink-muted);
  margin: 0 0 var(--s3);
}

.step-label {
  color: var(--ink-muted);
  margin: 0;
}

/* A row header in a working-out table is a label, not a heading, so it does
   not take the bold weight `th` gets by default. */
.table__rowlabel {
  font-weight: 400;
}

/* The explanatory line under a step in the arithmetic panel. */
.table__note {
  margin-top: 0.25rem;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* ── Letters ─────────────────────────────────────────────────────────── */

.letters {
  list-style: none;
  padding: 0;
  margin: 0;
}
.letters > li {
  margin: 0 0 var(--s5);
}

.letter {
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 6px;
  padding: var(--s4);
  background: var(--surface);
}
.letter__title {
  margin: 0 0 var(--s1);
  font-size: var(--text-base);
}
.letter__why {
  margin: 0 0 var(--s3);
  font-size: var(--text-sm);
}

/* The letter itself. Monospace would read as code; this is a letter someone
   is about to send, so it keeps the body face and just holds its line breaks. */
.letter__body {
  margin: var(--s3) 0;
  padding: var(--s4);
  max-height: 26rem;
  overflow: auto;
  white-space: pre-wrap;
  font: inherit;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.letter__body:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Paragraphs inside a warning body. The last one sits flush so the card does
   not end with a gap; :last-child does that, rather than the component
   working out which paragraph it is on. */
.md-para {
  margin: 0 0 var(--s3);
}
.md-para:last-child {
  margin-bottom: 0;
}

/* The shortfall figure on the backdating panel. Smaller than the headline
   maximum: it is an answer to a follow-up question, not the main one. */
.backdating__figure {
  margin: 0.25rem 0;
  color: var(--brand);
  font-size: 2.25rem;
  line-height: 1.1;
  font-weight: 700;
}
.table__total {
  font-weight: 700;
}

.money-input {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.money-input__prefix {
  font-weight: 600;
}

.share {
  margin: var(--s5) 0;
}
/* Reserves the line the "copied" message appears on, so nothing below it
   jumps when the message arrives. */
.share__status {
  min-height: 1.5rem;
  margin-top: var(--s2);
}

.next-steps li {
  margin-bottom: var(--s4);
}

/* A bordered group: one child's questions, or the means-tested estimate. */
.panel {
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
}
.panel > :first-child {
  margin-top: 0;
}

/* ── Cookie consent ─────────────────────────────────────────────────────── */
/*
 * Fixed to the bottom rather than pushing the page down, because it appears on
 * the calculator and moving a form under someone's cursor is worse than
 * covering the footer. Both buttons are full size: a reject option in small
 * grey text is not a free choice.
 */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  background: var(--brand);
  color: var(--ink-inverse);
  border-top: 4px solid var(--brand-bright);
  padding: var(--s4) 0;
}
.consent__inner {
  display: grid;
  gap: var(--s4);
}
.consent__text p {
  margin: 0 0 var(--s2);
  color: var(--ink-inverse);
  max-width: 60ch;
}
.consent__text p:last-child {
  margin-bottom: 0;
}
.consent__note {
  font-size: var(--text-sm);
}
.consent a {
  color: var(--ink-inverse);
}
.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.consent__actions .btn {
  flex: 1 1 14rem;
}

@media (min-width: 48rem) {
  .consent__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .consent__actions .btn {
    flex: 0 0 auto;
  }
}

.consent-controls {
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
}
.consent-controls p:first-child {
  margin-top: 0;
}
.consent-controls .hint {
  margin-bottom: 0;
}

/**
 * Print stylesheet — spec §19 and §25.
 *
 * Print is a FIRST-CLASS OUTPUT, not an afterthought. The printed page a carer
 * hands to their social worker — with the arithmetic and the citations on it —
 * is what changes outcomes. A Playwright test renders this to PDF and asserts
 * the maximum figure, the arithmetic table and the citations block all appear.
 */

@media print {
  /* A4 and US Letter safe. */
  @page {
    margin: 15mm;
  }

  :root {
    /* Minimum 11pt body text. This audience is older. */
    --text-base: 11pt;
    --text-sm: 11pt;
  }

  html,
  body {
    font-size: 11pt;
    background: #fff !important;
    color: #000 !important;
  }

  /* Black on white. No background colours that eat toner. */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Hide nav, footer, the calculator form and every interactive control. */
  .print-hide,
  nav,
  footer,
  .site-header,
  .site-footer,
  .calculator-form,
  button,
  .btn,
  input,
  select,
  textarea,
  [role="button"],
  .skip-link {
    display: none !important;
  }

  /* …but a control we deliberately print (a checked answer, say) can opt back in. */
  .print-show {
    display: block !important;
  }

  /* Expand every collapsed accordion — the arithmetic panel must print open. */
  details {
    display: block !important;
    border: 1px solid #000 !important;
    page-break-inside: avoid;
  }
  details > summary {
    display: block !important;
    list-style: none;
    font-weight: 700;
  }
  details > summary::-webkit-details-marker {
    display: none;
  }
  details > *:not(summary) {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Keep flag cards and table row groups whole across a page break. */
  .flag-card,
  .citation-item,
  thead,
  tbody tr,
  tfoot,
  .avoid-break {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  h1,
  h2,
  h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Show link URLs, so a printed page is still followable. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }
  /* …but not where the URL is already printed next to the label. */
  .no-print-url a[href^="http"]::after {
    content: "";
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }
  th,
  td {
    border: 1px solid #000 !important;
    padding: 4pt 6pt;
  }

  .callout,
  .flag-card {
    border: 1px solid #000 !important;
    border-left-width: 3pt !important;
    padding: 6pt 8pt;
  }

  .wrap {
    max-width: none;
    padding: 0;
  }

  p,
  li {
    max-width: none;
    orphans: 3;
    widows: 3;
  }

  /* The print-only header and footer blocks. */
  .print-only {
    display: block !important;
  }
}

/* Off-screen until printed. */
.print-only {
  display: none;
}