/* pAud AI Lite intake site. Colour and font tokens copied from Paud-prod frontend/src/index.css
   (the paud.dev design language, issue #32 there): dark is the default, light follows
   `prefers-color-scheme: light`. No colours outside these tokens. */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/SpaceGrotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk Fallback'; src: local('Arial'); size-adjust: 113%; ascent-override: 87%; descent-override: 26%; line-gap-override: 0%; }

:root {
  --bg: #0c0c0e;
  --surface: #141418;
  --surface-2: #08080a;
  --ink: #f5f5f4;
  --ink-2: #b4b4ba;
  --ink-3: #9a9aa1;
  --ink-4: #8b8b92; /* 4.5:1 or more on every background token, soft ones included */
  --line: #ffffff17;
  --line-2: #ffffff0d;
  --line-firm: #ffffff5c; /* input and control borders: 3:1 or more on surface and surface-2 (WCAG 1.4.11) */
  --accent: #b57bee;
  --accent-ink: #0c0c0e;
  --accent-soft: #b57bee1a;
  --accent-fill: #b57bee;
  --accent-fill-ink: #0c0c0e;
  --hot: #f0554e;
  --hot-ink: #0c0c0e;
  --hot-soft: #f0554e1a;
  --warn: #f0a020;
  --warn-soft: #f0a0201a;
  --ok: #35c46b;
  --ok-soft: #35c46b1a;
  --sans: 'Space Grotesk', 'Space Grotesk Fallback', system-ui, sans-serif;
  /* paud.dev's --wr-mono: labels, tags and figures in the system monospace, not a
     webfont, so the two sites set them identically. */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --t-xs: 12px; /* uppercase mono labels only (state pills, tags) */
  --t-sm: 13px; /* the smallest body-level text (WCAG small text, P5) */
  --t-md: 14px;
  --t-lg: 16px;
  --t-xl: 20px;
  --t-2xl: 24px;
  --t-3xl: 32px;
  --t-4xl: 44px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --measure: 68ch;
  --gutter: clamp(16px, 4vw, 56px);
  --dur-1: 150ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --radius: 0; /* square, like paud.dev */
  /* paud.dev's .hp-inner: 1280px of content, plus the gutter either side. */
  --page-max: calc(1280px + 2 * var(--gutter));
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg: #faf9f7;
    --surface: #ffffff;
    --surface-2: #f3f1ed;
    --ink: #141418;
    --ink-2: #3f3f46;
    --ink-3: #5e5e66;
    --ink-4: #6b6b72;
    --line: #e6e3de;
    --line-2: #f1efea;
    --line-firm: #8c8882;
    --accent: #6d30c4;
    --accent-ink: #ffffff;
    --accent-soft: #f4edfd;
    --accent-fill: #b57bee;
    --accent-fill-ink: #141418;
    --hot: #c12f29;
    --hot-ink: #ffffff;
    --hot-soft: #fdf0ef;
    --warn: #9a5c00;
    --warn-soft: #fdf1dc;
    --ok: #1f7a3f;
    --ok-soft: #e3f5e9;
    color-scheme: light;
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-lg)/1.6 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3 { line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--s4); }
/* Anything the page scrolls to (an anchor, a focused heading or field, the error summary) stops
   below the sticky bar instead of under it. --bar-clear is the bar plus breathing room. */
:root { --bar-clear: 88px; }
[id], h1, h2, h3, a[name], .error-box { scroll-margin-top: var(--bar-clear); }
h1 { font-size: clamp(var(--t-2xl), 5vw, var(--t-4xl)); max-width: 22ch; font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h3:focus { outline: none; }
p, ul, ol, dl { margin: 0 0 var(--s4); }
code { font-family: var(--mono); font-size: var(--t-md); }

.wrap { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: var(--s2); }
.skip:focus { left: var(--s2); background: var(--surface); padding: var(--s2) var(--s3); z-index: 2; }
.eyebrow { font-family: var(--mono); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); margin: 0 0 var(--s3); }
.muted { color: var(--ink-3); }
.fine { color: var(--ink-4); font-size: var(--t-sm); margin: var(--s2) 0 0; }

/* ---------- bar and footer ---------- */
/* The bar follows paud.dev's nav: 64 px, sticky, the brandmark at 21x18 beside a 15 px bold
   wordmark, quiet 13 px links, one square accent button. */
.bar { position: sticky; top: 0; z-index: 10; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.brand-mark { display: block; flex: none; width: 21px; height: 18px; }
.brand-lite { color: var(--ink-3); font-weight: 400; }
.bar-nav { display: flex; align-items: center; gap: var(--s5); min-width: 0; }
.bar-link { color: var(--ink-3); font-size: 13px; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; transition: color var(--dur-1) var(--ease); }
.bar-link:hover { color: var(--ink); }
.bar-arrow, .button-arrow { margin-left: 8px; }
.bar-cta { background: var(--accent-fill); color: var(--accent-fill-ink); font-size: 13px; font-weight: 700; letter-spacing: 0.01em; padding: 9px 16px; text-decoration: none; white-space: nowrap; }
@media (max-width: 880px) { .bar-link-more { display: none; } }
@media (max-width: 480px) { .bar-cta { display: none; } }
.foot { border-top: 1px solid var(--line); margin-top: var(--s8); padding: var(--s6) 0; color: var(--ink-3); font-size: var(--t-md); }
.foot-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.foot a { color: var(--ink-3); font-size: 13px; text-decoration: none; transition: color var(--dur-1) var(--ease); }
.foot a:hover { color: var(--ink); }

/* ---------- landing ---------- */
.hero { padding: var(--s8) 0 var(--s6); }
.lede { font-size: var(--t-xl); color: var(--ink-2); max-width: 62ch; }

/* The landing page sets type at paud.dev's scale: the hero headline as its
   .hero-h1 (60px, 700, -0.04em) and section headings as its .wr-h2 (46px, 700,
   -0.035em). Scoped to .landing so the status, legal and sign-in pages keep
   their quieter headings. */
.landing .hero h1 {
  font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -0.04em;
  max-width: 17ch; margin-bottom: 22px;
}
.landing .band > h2 {
  font-size: clamp(29px, 3.5vw, 46px); font-weight: 700; line-height: 1.08;
  letter-spacing: -0.035em; max-width: 22ch; margin-bottom: var(--s5);
}
.landing .split h2, .landing .panel h2 {
  font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.12;
  letter-spacing: -0.03em;
}
/* Section intros read like paud.dev's .wr-lede (20px, up to 62ch); the smaller
   notes under a block run wider than a lede, as on paud.dev, not boxed in. */
.landing .journey-intro, .landing .samples-intro {
  font-size: clamp(17px, 1.65vw, 20px); line-height: 1.6; color: var(--ink-2); max-width: 62ch;
}
.landing .band > p.muted, .landing .entry figcaption { max-width: 80ch; }
.band { padding: var(--s6) 0; border-top: 1px solid var(--line-2); }
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); }
.card p:last-child { margin: 0; color: var(--ink-2); }
.stat { font-family: var(--mono); font-size: var(--t-3xl); color: var(--accent); margin: 0 0 var(--s2); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s6); }
.ticks { padding-left: var(--s5); max-width: var(--measure); }
.ticks li { margin-bottom: var(--s2); }
.ticks li::marker { color: var(--accent); }

/* From upload to deletion: four steps on one line, joined by a hairline with a square node on
   each step (the systems strip's marks); one column on narrow screens. */
.timeline { list-style: none; padding: 0; margin: var(--s5) 0 var(--s4); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.timeline li { position: relative; padding-top: var(--s4); border-top: 1px solid var(--line); }
.timeline li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--accent); }
.timeline li:last-child::before { background: var(--ok); }
.timeline-k { font-family: var(--mono); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin: 0 0 var(--s2); }
.timeline p:last-child { color: var(--ink-2); margin: 0; }
@media (max-width: 880px) {
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline li { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 var(--s5) var(--s5); }
  .timeline li:last-child { padding-bottom: 0; }
  .timeline li::before { top: 0.45em; left: -5px; }
}

/* One entry from a library: paud.dev's "A pattern it learned" card (pl-art), in this site's
   tokens. A mono label above, the pattern as the title, then label/value rows on a hairline. */
.entry { margin: 0; max-width: 640px; }
.entry-l { font-family: var(--mono); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s2); }
.entry-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(var(--s4), 2vw, var(--s5)); margin: 0 0 var(--s3); }
.entry-k { color: var(--ink-3); font-size: var(--t-sm); margin: 0 0 var(--s1); }
.entry-t { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; margin: 0 0 var(--s3); }
.entry-n { border-top: 1px solid var(--line); padding-top: var(--s3); margin: 0; display: grid; gap: var(--s2); }
.entry-n > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
.entry-n dt { color: var(--ink-3); font-size: var(--t-sm); }
.entry-n dd { margin: 0; font-size: var(--t-md); font-weight: 600; color: var(--ink); }
.entry figcaption { font-size: var(--t-md); }
@media (max-width: 480px) { .entry-n > div { grid-template-columns: 1fr; gap: 0; } }

/* One order, every system: paud.dev's "Your stack" strip (pl-stack). Left to right in the order
   goods move, each tile a system and what pAud reads from it; one column on narrow screens. */
.journey-intro { max-width: var(--measure); color: var(--ink-2); }
.stack { list-style: none; padding: var(--s4) 0; margin: var(--s5) 0 var(--s4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s4); }
.stack li { display: grid; align-content: start; gap: var(--s1); min-width: 0; padding-top: var(--s3); border-top: 2px solid var(--accent-soft); position: relative; }
.stack li::before { content: ""; position: absolute; top: -5px; left: 0; width: 8px; height: 8px; background: var(--accent); }
.stack b { font-family: var(--mono); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--ink); }
.stack span { color: var(--ink-3); font-size: var(--t-sm); line-height: 1.45; }
@media (max-width: 1000px) {
  .stack { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .stack li { grid-template-columns: 9.5rem minmax(0, 1fr); align-items: baseline; gap: var(--s3); padding: var(--s3) 0 var(--s3) var(--s4); border-top: 0; border-left: 2px solid var(--accent-soft); }
  .stack li + li { border-top: 1px solid var(--line-2); }
  .stack li::before { top: calc(var(--s3) + 0.55em); left: -5px; }
}
@media (max-width: 480px) { .stack li { grid-template-columns: 1fr; gap: var(--s1); } }

/* Explore a sample (docs/samples.md): the hero's note, the chooser band and the compact
   chooser beside the form. Cards in this site's tokens: a mono tag, the sample as the title,
   what you'll see, the size facts as figures, one primary link at the foot. */
.hero-note { color: var(--ink-3); font-size: var(--t-md); margin: 0; max-width: 72ch; }
.nowrap { white-space: nowrap; }
.samples { list-style: none; padding: 0; margin: var(--s5) 0 var(--s4); max-width: 1040px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s4); }
.sample { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--accent); border-radius: var(--radius); padding: clamp(var(--s4), 2vw, var(--s5)); }
.sample-tag { font-family: var(--mono); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s2); }
.sample-t { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 var(--s2); }
.sample-d { color: var(--ink-2); margin: 0 0 var(--s3); }
.sample-see { color: var(--ink-2); font-size: var(--t-md); border-top: 1px solid var(--line); padding-top: var(--s3); margin: 0 0 var(--s4); }
.sample-k { display: block; font-family: var(--mono); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s1); }
.sample-n { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s5); }
.sample-n dt { color: var(--ink-3); font-size: var(--t-sm); }
.sample-n dd { margin: 0; font-family: var(--mono); font-size: var(--t-xl); color: var(--ink); }
.sample-go { margin: auto 0 var(--s3); }
.sample-go .button { width: 100%; justify-content: center; }
.sample .fine { margin: 0; }
.start-with-samples { display: grid; grid-template-columns: minmax(0, 760px) minmax(240px, 320px); gap: var(--s6); align-items: start; }
.samples-aside { position: sticky; top: var(--bar-clear); border-left: 2px solid var(--accent-soft); padding-left: var(--s5); }
.landing .samples-aside h2 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 var(--s2); }
.samples-compact { list-style: none; padding: 0; margin: 0 0 var(--s3); }
.samples-compact li { display: grid; padding: var(--s2) 0; border-top: 1px solid var(--line); }
.samples-compact a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.samples-compact .fine { margin: 0; }
@media (max-width: 1000px) {
  .start-with-samples { grid-template-columns: minmax(0, 1fr); }
  .samples-aside { position: static; max-width: 760px; border-left: 0; border-top: 2px solid var(--accent-soft); padding: var(--s4) 0 0; }
}

/* ---------- the intake panel ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(var(--s4), 4vw, var(--s6)); max-width: 760px; }
.step { border-top: 1px solid var(--line-2); padding-top: var(--s5); margin-top: var(--s4); }
.notice { background: var(--warn-soft); border-left: 3px solid var(--warn); padding: var(--s3) var(--s4); }
.error-box { background: var(--hot-soft); border-left: 3px solid var(--hot); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); }
.status { color: var(--ink-2); min-height: 1.6em; margin: 0; }
.form { display: grid; gap: var(--s4); }
.field { display: grid; gap: var(--s1); }
label, legend { font-weight: 500; }
input[type=text], input[type=email], input[type=date], input:not([type]), textarea, input[type=file] {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-firm);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  min-height: 44px;
}
::placeholder { color: var(--ink-4); opacity: 1; } /* the UA grey was 2.08:1 on surface-2 */
textarea { resize: vertical; }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--hot); }
.field-error { color: var(--hot); font-size: var(--t-md); margin: 0; }
.date-range { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s2); min-width: 0; }
.date-range legend { padding: 0; }
.date-range .fine { margin: 0; }
.date-range-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
.consents { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); margin: 0; display: grid; gap: var(--s3); }
.consents legend { padding: 0 var(--s2); }
.check { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); }
.check label { font-weight: 400; }
.consent-links { display: block; font-size: var(--t-md); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.button {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--accent-fill);
  color: var(--accent-fill-ink);
  border: 1px solid var(--accent-fill);
  border-radius: var(--radius);
  padding: 14px 32px;
  min-height: 48px;
  text-decoration: none;
  cursor: pointer;
  justify-self: start;
  transition: opacity var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.button.secondary { background: transparent; color: var(--ink); border-color: var(--line-firm); padding: 14px 30px; }
.button.secondary:hover { border-color: var(--ink-3); }
.hero .actions { margin: 0 0 var(--s4); }
/* Phones: the two hero buttons stack full width, "Start your library" on top. */
@media (max-width: 480px) {
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .button { justify-content: center; }
}
.link-button { font: inherit; background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; padding: var(--s2); min-height: 44px; }
.link-button:disabled { color: var(--ink-4); cursor: not-allowed; }
.turnstile { min-height: 65px; margin: 0 0 var(--s4); }
.progress-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s3); align-items: center; }
.progress-row label { grid-column: 1 / -1; font-weight: 400; color: var(--ink-3); font-size: var(--t-md); }
progress { width: 100%; height: 10px; accent-color: var(--accent); }
.progress-steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-4); }
.progress-steps li { counter-increment: step; display: inline-flex; align-items: center; gap: var(--s2); }
.progress-steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-firm); }
.progress-steps li.done { color: var(--ink-3); }
.progress-steps li.done::before { content: "✓"; color: var(--ok); border-color: var(--ok); }
.progress-steps li[aria-current=step] { color: var(--ink); font-weight: 700; }
.progress-steps li[aria-current=step]::before { background: var(--accent-fill); color: var(--accent-fill-ink); border-color: var(--accent-fill); }
.button[aria-busy=true] { cursor: progress; }
input[type=file]:disabled { opacity: 0.6; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s5); }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; }

/* ---------- legal pages ---------- */
.legal { max-width: var(--measure); padding: var(--s6) 0; }
.legal h2 { font-size: var(--t-xl); margin-top: var(--s6); }
.legal table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.legal th, .legal td { border-bottom: 1px solid var(--line); padding: var(--s2) var(--s3); text-align: left; vertical-align: top; }

/* ---------- status pages (#22) ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.status-page { max-width: 820px; }
.status-page .eyebrow code { text-transform: none; letter-spacing: 0; }
.status-page .lede { margin-bottom: var(--s5); }
.status-page .facts.panel { margin-bottom: var(--s5); }
.signed-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2) var(--s4); margin: 0 0 var(--s5); font-size: var(--t-md); }
.signed-in .link-button { padding-left: 0; }
.submissions { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.submissions .card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.submission-link code { font-size: var(--t-lg); }
.pill { font-family: var(--mono); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); background: var(--accent-soft); border-radius: var(--radius); padding: var(--s1) var(--s2); }
.status-actions { margin: 0 0 var(--s2); }
/* The delete link is quiet (R3-P3) but keeps a 44 px tap target. */
.quiet-delete a { display: inline-flex; align-items: center; min-height: 44px; }
.danger-link { color: var(--hot); min-height: 44px; display: inline-flex; align-items: center; }
.report { border-top: 1px solid var(--line); margin-top: var(--s6); padding-top: var(--s6); }
.report-part { margin-top: var(--s5); }
.report-part h3 { font-size: var(--t-xl); }
.issues { padding-left: var(--s5); display: grid; gap: var(--s4); }
.issue { padding: var(--s3) var(--s4); border-left: 3px solid var(--warn); background: var(--warn-soft); }
.issue-blocker { border-left-color: var(--hot); background: var(--hot-soft); }
.issue p { margin: 0 0 var(--s2); }
.issue p:last-child { margin: 0; }

@media (max-width: 480px) {
  .facts { grid-template-columns: 1fr; }
  .facts dd { margin-bottom: var(--s2); }
  .stat { font-size: var(--t-2xl); }
}