/*
  Aloop marketing site — the one shared stylesheet.

  The app's design system is the source of truth (ios/AloopIOS/Sources/AloopIOS/DesignSystem):
  a white ground, #1a1a1a ink, neutral greys made of that ink at an opacity, 1px hairlines,
  16px card radius, 56px ink pill buttons, and the app's three bundled faces —
  Satoshi (names and the wordmark), Archivo (everything you read), Fragment Mono (short
  uppercase labels, never a sentence). Light only, as the app is.

  What the site does NOT take from the app: phone-scale type, floating glass chrome, and the
  rule that the display face is only for names. A website needs a headline voice, a reading
  measure for long documents, and real navigation.

  Every text colour below is checked against the ground it sits on (white everywhere, the
  landing included); the ratio is noted beside it.
*/

/* ---------- fonts (self-hosted; licences in /fonts) ----------
   Archivo and Fragment Mono are Latin subsets of the app's bundled faces (SIL OFL). Satoshi is the
   foundry's own web file, unmodified: its ITF Free Font License allows self-hosting but forbids
   subsetting or converting it, so it is the one face here that is not cut down. */

@font-face { font-family: 'Satoshi'; src: url('/fonts/Satoshi-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/fonts/Satoshi-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/fonts/Archivo-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/fonts/Archivo-SemiBold.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fragment Mono'; src: url('/fonts/FragmentMono-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }

/* Metric-matched fallbacks, so the swap to the real face moves nothing. Each override is measured
   from the face's own tables against Arial (Courier New for mono) over a run of English text. */
@font-face { font-family: 'Satoshi Fallback'; src: local('Arial'); font-weight: 500; size-adjust: 102.5%; ascent-override: 98.5%; descent-override: 23.4%; line-gap-override: 9.8%; }
@font-face { font-family: 'Satoshi Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 700; size-adjust: 98%; ascent-override: 103.1%; descent-override: 24.5%; line-gap-override: 10.2%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'); font-weight: 400; size-adjust: 98.6%; ascent-override: 89.1%; descent-override: 21.3%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600; size-adjust: 94.9%; ascent-override: 92.6%; descent-override: 22.1%; line-gap-override: 0%; }
@font-face { font-family: 'Fragment Mono Fallback'; src: local('Courier New'); size-adjust: 103%; ascent-override: 92.2%; descent-override: 24.3%; line-gap-override: 0%; }

:root {
  color-scheme: light;

  /* ink — the app's Theme.color.ink, and its opacity steps flattened onto white */
  --ink: #1a1a1a;          /* 17.4:1 on white */
  --text: #2e2e2e;         /* reading text — 13.6:1 */
  --muted: #6a6a6a;        /* the app's textSecondaryStrong (65%) — 5.4:1 on white */
  --line: rgba(26, 26, 26, 0.08);         /* the app's hairline */
  --line-strong: rgba(26, 26, 26, 0.18);  /* the app's borderControl */

  --ground: #ffffff;
  --sunken: #ececef;        /* the app's surfaceSunken */
  --muted-surface: #f1f1f3; /* the app's surfaceMuted */

  --error: #983228;         /* the app's onStatusError — 7.6:1 on white */
  --error-tint: #f8eeed;

  --font-display: 'Satoshi', 'Satoshi Fallback', Helvetica, Arial, sans-serif;
  --font-sans: 'Archivo', 'Archivo Fallback', Helvetica, Arial, sans-serif;
  --font-mono: 'Fragment Mono', 'Fragment Mono Fallback', ui-monospace, monospace;

  --radius: 12px;      /* the app's one corner — fields, cards, panels (Decision 0691; was 12 and 16) */
  --radius-pill: 999px;

  --page: 1200px;
  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 48px);
  --header-h: 72px;
}

/* ---------- base ---------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { flex: 1 0 auto; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

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

.container {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 10;
  padding: 12px 18px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

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

.site-header { position: relative; z-index: 2; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}

/* ---------- buttons (the app's PrimaryButtonStyle / OutlineButtonStyle) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:focus-visible { outline-offset: 4px; border-radius: var(--radius-pill); }

.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #3a3a3a; color: #fff; }

.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink); }

/* ---------- landing (index.html) ---------- */

/* The landing is the app's splash (Decision 0827): a white ground, and the polished silver "A" pendant on its rolo
   chain beside "loop", swinging. The lockup is laid out in the splash's design points (SplashView.swift), one point
   being --u px: "loop" is Satoshi Bold at 60 pt, tracked -0.02em, and the pendant's slot runs from the A's left edge
   (138 pt) to the text's origin (183.43 pt), so the pendant hangs exactly where the app draws it. The slot sits on the
   baseline with no height, so the script can read the baseline from it. The still in the slot is the splash's first
   frame, chain and pendant (design points x 112–208, y 0–498), so the whole necklace is there from the first paint;
   the script draws the moving one on the canvas and hides the still once it has. The canvas is in
   front of the text (and lets every click through), so the A passes in front of "loop" when it swings over it. */
body.landing { background: var(--ground); }

.landing {
  --u: clamp(0.9px, 0.072vw + 0.712px, 1.75px);
  position: relative;
  display: flex;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;   /* a sideways drag swings the necklace rather than panning */
}

.necklace { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; }

.landing__hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: clamp(96px, 16vh, 176px);
  padding-bottom: clamp(48px, 9vh, 112px);
  text-align: center;
}

.lockup {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(60 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--ink);
  touch-action: none;   /* a finger on the A grabs it rather than scrolling */
  -webkit-user-select: none;
  user-select: none;
}
.lockup__a { display: inline-block; position: relative; width: calc(45.43 * var(--u)); height: 0; vertical-align: baseline; }
.lockup.is-live .lockup__a img { visibility: hidden; }
.lockup__a img {
  position: absolute;
  left: calc(-26 * var(--u));
  bottom: calc(-18 * var(--u));
  width: calc(96 * var(--u));
  max-width: none;
  height: calc(498 * var(--u));
  pointer-events: none;
}

.tagline {
  margin: clamp(28px, 4vw, 44px) auto 0;
  max-width: 28ch;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

.landing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  margin-top: clamp(32px, 4vw, 44px);
}
.landing__actions .btn { flex: 1 1 100%; }

/* The lockup itself never moves: the canvas pendant is placed from it every frame. */
@media (prefers-reduced-motion: no-preference) {
  .landing__hero > :not(.lockup) { animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .landing__hero > :nth-child(3) { animation-delay: 0.08s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- statement pages (404, get-the-app) ---------- */

.statement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--header-h) - 260px);
  padding-top: clamp(56px, 10vh, 120px);
  padding-bottom: clamp(56px, 10vh, 120px);
}
.statement__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.statement__text {
  margin: 20px 0 0;
  max-width: 44ch;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--text);
}
.statement__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ---------- interior pages: title ---------- */

.page-hero { padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 44px); }
.page-hero__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

/* The legal pages and Help wrap their title and body in `container container--prose`. */
.container--prose { max-width: calc(var(--measure) + 2 * var(--gutter)); }

/* ---------- long-form documents (legal pages, Help, the report page) ---------- */

.prose {
  padding-top: 0;
  padding-bottom: clamp(72px, 10vw, 128px);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
}

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

.prose__meta {
  margin: 0 0 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.prose p { margin: 0 0 1em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-decoration: underline; }
/* A button set inside a document (take-it-down.html's "Open the request form") keeps its own colours. */
.prose a.btn { text-decoration: none; }
.prose a.btn--primary, .prose a.btn--primary:hover { color: #fff; }
.prose p:has(> a.btn:only-child) { margin: 1.6em 0; }

.prose h2 {
  margin: 2.6em 0 0.7em;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  scroll-margin-top: 24px;
  text-wrap: balance;
}
.prose h3 {
  margin: 2em 0 0.5em;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  scroll-margin-top: 24px;
}
/* A document's first heading sits under the version line, not a full section break below it. */
.prose__meta + h2, .prose__toc + h2 { margin-top: 0; }

.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.prose li { margin: 0 0 0.55em; padding-left: 0.2em; }
.prose li > ul, .prose li > ol { margin: 0.55em 0 0; }
.prose li::marker { color: var(--muted); }
.prose ol > li::marker { font-variant-numeric: tabular-nums; }

.prose code { font-family: var(--font-mono); font-size: 0.86em; }

/* Tables: hairline rules, mono column labels, no fills. */
.prose table {
  width: 100%;
  margin: 1.4em 0 1.8em;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
.prose th {
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  color: var(--muted);
}
.prose td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th:last-child, .prose td:last-child { padding-right: 0; }
/* The privacy policy's six-column table scrolls inside its own wrapper rather than crushing. */
.prose div[style*="overflow"] { margin: 1.4em 0 1.8em; -webkit-overflow-scrolling: touch; }
.prose div[style*="overflow"] table { min-width: 760px; margin: 0; }
.prose div[style*="overflow"]:focus-visible { outline-offset: 4px; }

/* ---------- table of contents (the existing <nav class="prose__toc"> in each document) ---------- */

/* The list's own numbers are hidden: the documents number their sections themselves (12A, 5B…),
   and an <ol>'s automatic count drifts from those after the first lettered section. */
.prose__toc {
  margin: 0 0 48px;
  padding: 20px 24px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.prose__toc > p {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.prose__toc ol, .prose__toc ul { margin: 0; padding: 0; list-style: none; }
.prose__toc li { margin: 0; padding: 0; }
.prose__toc li ul { padding-left: 16px; }
.prose__toc a {
  display: block;
  padding: 7px 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  text-decoration: none;
}
.prose__toc a:hover { color: var(--ink); text-decoration: underline; }

/* Wide screens: the contents become a sticky column beside the document. CSS only — the document's
   markup is untouched; every other child of the section is placed in the second column. */
@media (min-width: 1080px) {
  .prose:has(> .prose__toc),
  main:has(.prose__toc) .page-hero .container--prose {
    max-width: calc(var(--page));
  }
  main:has(.prose__toc) .page-hero .container--prose {
    padding-left: calc(var(--gutter) + 248px + 72px);
  }
  .prose:has(> .prose__toc) {
    display: grid;
    grid-template-columns: 248px minmax(0, var(--measure));
    column-gap: 72px;
    align-items: start;
  }
  .prose:has(> .prose__toc) > * { grid-column: 2; }
  .prose:has(> .prose__toc) > .prose__toc {
    grid-column: 1;
    grid-row: 1 / span 400;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    margin: 0;
    padding: 0 0 0 0;
    border: 0;
    border-radius: 0;
    overscroll-behavior: contain;
  }
  .prose:has(> .prose__toc) > .prose__toc a { padding: 5px 0 5px 14px; font-size: 14px; color: var(--muted); border-left: 1px solid var(--line); }
  .prose:has(> .prose__toc) > .prose__toc li ul a { padding-left: 28px; }
  .prose:has(> .prose__toc) > .prose__toc a:hover { color: var(--ink); border-left-color: var(--ink); text-decoration: none; }
  .prose:has(> .prose__toc) > .prose__toc > p { padding-left: 14px; }
}

/* ---------- footer ---------- */

/* One band, no inner rules. Rows are 32px for a mouse and 44px for touch. */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  background: var(--ground);
}

/* One centred line on every page and every phone (Decision 0827): the company line first, quietly, then the three
   links (Help, Terms, Privacy; Help links everything else, Decision 0801), then the Instagram and TikTok icons, the
   way out. The markup keeps its order (the footer is byte-identical on every page); `display: contents` lets the
   company line step out of its group to lead. The links sit closer together than the three groups do. Links are 32 px
   rows for a mouse, 44 px on touch; the icons are 44 px square, 32 px wide on phones. */
.site-footer__inner {
  --group-gap: 32px;
  --link-gap: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--group-gap);
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
}

.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--link-gap);
}
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
}
.site-footer__nav a:hover { color: var(--ink); text-decoration: underline; }

.site-footer__meta { display: contents; }
.site-footer__legal { order: -1; margin: 0; font-size: 13px; color: var(--muted); white-space: nowrap; }
.site-footer__social { display: flex; order: 1; }
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  transition: background-color 0.2s ease;
}
.site-footer__social a:hover { background: var(--muted-surface); }
.site-footer__icon { display: block; width: 20px; height: 20px; }

/* Phones: the same line, tightened to fit. 16 px of side padding, the links at 13 px, the icons 32 px wide, and the
   room left shared out as gaps, the groups' half as wide again as the links' (12 and 18 px at 375 px wide, 8 and 13 at
   360). Below about 345 px it wraps. */
@media (max-width: 520px) {
  .site-footer__inner {
    --link-gap: clamp(5px, calc((100vw - 318px) / 5), 14px);
    --group-gap: calc(var(--link-gap) * 1.5);
    padding: 4px 16px;
  }
  .site-footer__nav a { font-size: 13px; }
  .site-footer__social a { width: 32px; }
}

@media (pointer: coarse) {
  .site-footer__nav a { min-height: 44px; }
}

/* ---------- the report form (report.html; Decision 0567) ---------- */

.report-form { display: grid; gap: 16px; margin: 32px 0 40px; }
.report-form[hidden], .report-form [hidden] { display: none; }
.report-form fieldset {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 20px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.report-form legend {
  padding: 0 6px;
  margin-left: -6px;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}
.report-form label { margin-top: 10px; font-weight: 600; font-size: 15px; color: var(--ink); }
.report-form .rf-optional { font-weight: 400; color: var(--muted); }
.report-form .rf-hint { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

.report-form .rf-choice, .report-form .rf-check, .report-form .rf-choices label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.report-form .rf-choices { display: grid; gap: 0; }
.report-form .rf-choice label, .report-form .rf-check label, .report-form .rf-choices label {
  flex: 1;
  margin-top: 0;
  padding: 10px 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
}
.report-form .rf-choice input, .report-form .rf-check input, .report-form .rf-choices input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 12px 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.report-form .rf-check { margin-top: 8px; }

.report-form input[type=text], .report-form input[type=email], .report-form input[type=tel], .report-form textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  transition: border-color 0.15s ease;
}
.report-form textarea { resize: vertical; }
.report-form input:hover, .report-form textarea:hover { border-color: rgba(26, 26, 26, 0.4); }
.report-form input:focus-visible, .report-form textarea:focus-visible { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 1px; border-radius: var(--radius); }
.report-form input[type=radio]:focus-visible, .report-form input[type=checkbox]:focus-visible { outline-offset: 2px; border-radius: 4px; }

/* After the base field and hover rules, and as specific as they are, so an invalid field stays red. */
.report-form input[aria-invalid=true], .report-form textarea[aria-invalid=true],
.report-form input[aria-invalid=true]:hover, .report-form textarea[aria-invalid=true]:hover { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.report-form .btn { justify-self: start; margin-top: 8px; }
.report-form .btn:disabled { opacity: 0.55; cursor: progress; }
.prose .rf-error { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--error); }
.report-status { min-height: 1.5em; margin: 0; color: var(--ink); }

.report-note {
  margin: 0 0 4px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--muted-surface);
}
.report-note p:last-child { margin-bottom: 0; }

.report-errors {
  margin: 0 0 24px;
  padding: 16px 20px;
  border: 1px solid var(--error);
  border-radius: var(--radius);
  background: var(--error-tint);
  color: var(--error);
}
.prose .report-errors h2 { margin: 0 0 8px; font-size: 17px; color: var(--error); }
.report-errors ul { margin-bottom: 0; }
.report-errors a { color: var(--error); }

.report-done {
  margin: 32px 0 40px;
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.prose .report-done h2 { margin-top: 0; }
.report-errors:focus-visible, .report-done:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.report-reference { font-family: var(--font-mono); font-weight: 400; word-break: break-all; }

.report-needs-js {
  margin: 32px 0;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--muted-surface);
}
.report-needs-js p:last-child { margin-bottom: 0; }

/* ---------- small screens ---------- */

@media (max-width: 720px) {
  body, .prose { font-size: 16px; }
  .statement__actions .btn { flex: 1 1 100%; }
  .prose__toc { padding: 16px 20px 8px; }
  .prose h2 { font-size: 19px; }
  .report-form fieldset { padding: 16px 16px 20px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- print ---------- */

@media print {
  @page { margin: 18mm 16mm; }
  body { display: block; background: #fff; color: #000; font-size: 10.5pt; line-height: 1.5; }
  .skip-link, .site-footer__nav, .site-footer__social, .necklace, .landing__actions, .statement__actions,
  .prose__toc, .report-form, .report-needs-js { display: none !important; }
  .site-header__inner { min-height: 0; padding-bottom: 8mm; }
  .container, .container--prose, .prose:has(> .prose__toc), main:has(.prose__toc) .page-hero .container--prose {
    display: block; max-width: none; padding: 0;
  }
  .page-hero { padding: 0 0 6mm; }
  .page-hero__title { font-size: 22pt; max-width: none; }
  .prose { padding: 0; font-size: 10.5pt; color: #000; }
  .prose h2 { font-size: 13pt; break-after: avoid; page-break-after: avoid; }
  .prose h3 { font-size: 11pt; break-after: avoid; page-break-after: avoid; }
  .prose p, .prose li { orphans: 3; widows: 3; }
  .prose table, .prose tr { break-inside: avoid; }
  .prose div[style*="overflow"] { overflow: visible !important; }
  .prose div[style*="overflow"] table { min-width: 0; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; word-break: break-all; }
  .site-footer { border-top: 1px solid #ccc; }
  .lockup.is-live .lockup__a img { visibility: visible; }
  .site-footer__inner { display: block; padding: 4mm 0 0; }
  .site-footer__legal { margin: 0; color: #444; }
}