/* ===========================================================================
   Page styling.

   Colours, fonts, spacing and layout all come from custom properties that the
   Worker writes into a <style> block per request — so editing settings in
   /admin restyles this file's output without touching this file.

   The values below are fallbacks only, used if that block is ever missing.
   Derived shades (hover, strong border, focus ring) are computed with
   color-mix so the editor only has to expose one colour per role.
   =========================================================================== */

:root {
  --bg: #fbfbfa;
  --bg-card: #ffffff;
  --bg-subtle: #f4f4f2;
  --text: #1a1a19;
  --text-muted: #6b6a66;
  --border: #e3e2de;
  --accent: #1a1a19;
  --accent-text: #ffffff;

  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-size: 16px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --card-width: 432px;
  --amount-cols: 3;
  --pad: 24px;
  --gap: 8px;
  --page-fill: auto;
}

/* Derived from the eight editable colours above. */
:root {
  --bg-subtle-hover: color-mix(in srgb, var(--bg-subtle) 92%, var(--text));
  --border-strong: color-mix(in srgb, var(--border) 65%, var(--text));
  --accent-ring: color-mix(in srgb, var(--accent) 18%, transparent);
  --success: color-mix(in srgb, var(--accent) 40%, #1c7c54);
}

/* ===========================================================================
   Base
   =========================================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

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

/* ===========================================================================
   Layout
   =========================================================================== */

/*
 * Centred vertically by auto margins rather than by justify-content.
 *
 * `justify-content: center` on a column taller than the window pushes the top
 * of the content above the scroll origin, where no amount of scrolling can
 * reach it — the heading is simply gone. Auto margins collapse to nothing once
 * the content fills the window, so a long page scrolls from its true top.
 */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  min-height: 100dvh;
  padding: 44px 20px;
}

.page > :first-child {
  margin-top: var(--page-fill);
}

.page > :last-child {
  margin-bottom: var(--page-fill);
}

.header {
  max-width: var(--card-width);
  text-align: center;
}

.header__name {
  margin: 0;
  font-size: 1.75em;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.header__tagline {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.975em;
}

/* The fee, stated before anyone reaches the card fields. */
.header__breakdown {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.8125em;
}

.card {
  width: 100%;
  max-width: var(--card-width);
  padding: var(--pad);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.footer {
  max-width: var(--card-width);
  color: var(--text-muted);
  font-size: 0.8125em;
  text-align: center;
}

.footer p {
  margin: 6px 0;
}

.footer__tip {
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
}

.footer__tip:empty {
  display: none;
}

/* Visibility toggles from settings, applied as body classes so that the
   server render and the editor's live preview stay in agreement. */
.hide-step-numbers .step__number {
  display: none;
}

.hide-footer-tip .footer__tip {
  display: none;
}

/* ===========================================================================
   Steps
   =========================================================================== */

.step + .step {
  margin-top: calc(var(--pad) + 2px);
  padding-top: calc(var(--pad) - 2px);
  border-top: 1px solid var(--border);
}

.step__heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-size: 0.9375em;
  font-weight: 600;
}

.step__number {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.35em;
  height: 1.35em;
  background: var(--bg-subtle);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 0.8em;
  font-weight: 600;
}

.step__hint {
  margin: -6px 0 12px;
  color: var(--text-muted);
  font-size: 0.8125em;
}

/* ===========================================================================
   Amounts
   =========================================================================== */

.amounts {
  display: grid;
  grid-template-columns: repeat(var(--amount-cols), 1fr);
  gap: var(--gap);
}

.amount {
  padding: 12px 4px;
  background: var(--bg-subtle);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.amount:hover {
  background: var(--bg-subtle-hover);
}

.amount[aria-pressed='true'] {
  background: var(--bg-card);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.amount--custom {
  grid-column: 1 / -1;
}

/* ===========================================================================
   Custom amount field
   =========================================================================== */

.field {
  display: block;
  margin-top: 12px;
}

.field__label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 0.8125em;
  font-weight: 500;
}

.field__input {
  width: 100%;
  padding: 11px 13px 11px 28px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: inherit;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.field__hint {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.75em;
}

/* Same thing, inside a <label> where a <p> would be invalid markup. */
.field__note {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.75em;
  line-height: 1.5;
}

.currency {
  position: relative;
  display: block;
}

.currency__symbol {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* ===========================================================================
   Payment methods
   =========================================================================== */

.methods {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  transition: opacity 0.15s ease;
}

.methods.is-disabled {
  opacity: 0.45;
}

.method {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.method__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  background: var(--bg-card);
  color: var(--text);
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.method__button:hover:not(:disabled) {
  background: var(--bg-subtle);
}

.method__button:disabled {
  cursor: not-allowed;
}

.method__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.method__name {
  font-weight: 600;
}

.method__note {
  color: var(--text-muted);
  font-size: 0.75em;
  line-height: 1.35;
}

.method__action {
  flex-shrink: 0;
  padding: 7px 12px;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: calc(var(--radius) * 0.6);
  font-size: 0.8125em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===========================================================================
   Expanded detail (Zelle, Apple Cash)
   =========================================================================== */

.method__detail {
  padding: 4px 15px 15px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}

/* Label on its own line so long emails get the full width to themselves. */
.copyrow {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'label button'
    'value value';
  align-items: center;
  gap: 3px 10px;
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: calc(var(--radius) * 0.6);
}

.copyrow__label {
  grid-area: label;
  color: var(--text-muted);
  font-size: 0.6875em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.copyrow__value {
  grid-area: value;
  min-width: 0;
  overflow-wrap: break-word;
  font-size: 0.875em;
  font-weight: 550;
}

.copyrow__button {
  grid-area: button;
  padding: 5px 11px;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius) * 0.45);
  font: inherit;
  font-size: 0.75em;
  font-weight: 600;
  cursor: pointer;
}

.copyrow__button.is-copied {
  color: var(--success);
  border-color: var(--success);
}

.steps {
  margin: 0;
  padding-left: 20px;
  color: var(--text-muted);
  font-size: 0.8125em;
}

.steps li + li {
  margin-top: 5px;
}

.detail__action {
  display: block;
  margin-top: 13px;
  padding: 11px;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: var(--radius);
  font-size: 0.875em;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

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

/* Shown inside a payment row when starting a card payment fails. */
.method__error {
  margin: 0;
  padding: 0 15px 12px;
  color: color-mix(in srgb, var(--text) 35%, #b3261e);
  font-size: 0.8125em;
}

/* ===========================================================================
   Result page (after a card payment)
   =========================================================================== */

.result {
  text-align: center;
}

.result__badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  background: var(--bg-subtle);
  border-radius: 50%;
  color: var(--success);
  font-size: 1.25em;
}

.result__title {
  margin: 0 0 8px;
  font-size: 1.25em;
  font-weight: 650;
}

.result__body {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375em;
}

.link {
  display: inline-block;
  margin-top: 20px;
  color: var(--text);
  font-size: 0.875em;
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
}

.link:hover {
  border-color: var(--accent);
}

.result__badge--muted {
  color: var(--text-muted);
}

/* ===========================================================================
   Home page form
   =========================================================================== */

/* The payment page's amount box has a currency symbol; these don't. */
.field__input--plain {
  padding-left: 13px;
}

.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__note {
  margin: 12px 0 0;
  font-size: 0.8125em;
}

.form__note.is-error {
  color: color-mix(in srgb, var(--text) 30%, #b3261e);
}

.form__thanks {
  margin: 0;
  padding: 8px 0;
  color: var(--text);
  font-size: 0.9375em;
  text-align: center;
}

.field__textarea {
  width: 100%;
  min-height: 84px;
  padding: 11px 13px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: inherit;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.submit {
  width: 100%;
  margin-top: 18px;
  padding: 13px;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.submit:hover:not(:disabled) {
  opacity: 0.88;
}

.submit:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* ===========================================================================
   One-time / monthly choice
   =========================================================================== */

.frequency {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: var(--gap);
  padding: 4px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
}

.frequency__option {
  padding: 9px 4px;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: calc(var(--radius) * 0.75);
  font: inherit;
  font-size: 0.875em;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.frequency__option[aria-pressed='true'] {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.monthly-note {
  margin: -4px 0 12px;
  color: var(--text-muted);
  font-size: 0.75em;
}

/* ===========================================================================
   The card page (/checkout)
   =========================================================================== */

.checkout-card {
  text-align: center;
}

/* Stripe draws its form inside here. The form itself lives in an iframe, so
   its own colours come from your Stripe branding settings, not from this file. */
.checkout {
  min-height: 220px;
}

.checkout__status {
  margin: 0;
  padding: 24px 0;
  color: var(--text-muted);
  font-size: 0.875em;
}

.checkout__status--error {
  color: var(--text);
  padding: 8px 0 16px;
}

.checkout__back {
  display: inline-block;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.8125em;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}

.checkout__back:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

/* ===========================================================================
   Social links
   =========================================================================== */

.socials {
  width: 100%;
  max-width: var(--card-width);
  margin: 18px 0 0;
  text-align: center;
}

.socials__heading {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 0.8125em;
  font-weight: 500;
}

.socials__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.socials__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.socials__link:hover {
  color: var(--text);
  border-color: var(--border-strong, var(--text-muted));
  transform: translateY(-1px);
}

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

.socials__icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* Readable by a screen reader, invisible to everyone else. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   An invoice, when the page is showing one
   =========================================================================== */

/* An invoice leaves one step, so the numbering and the divider between the
   two steps stop making sense. */
.is-invoice .step + .step {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.is-invoice .step__number {
  display: none;
}

.is-invoice .header__tagline:empty {
  display: none;
}

.invoice {
  padding-bottom: calc(var(--pad) - 2px);
  margin-bottom: calc(var(--pad) - 8px);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.invoice__label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8125em;
}

.invoice__amount {
  margin: 4px 0 2px;
  font-size: 2.1em;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.invoice__what {
  margin: 0;
  font-size: 0.975em;
}

.invoice__note {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.8125em;
  text-align: left;
  white-space: pre-wrap;
}

.invoice__due {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 0.8125em;
}

.invoice__due.is-late {
  color: var(--text);
  font-weight: 550;
}

/* ===========================================================================
   Nothing here (404)
   =========================================================================== */

.result__actions {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.result__actions .submit {
  display: block;
  text-align: center;
  text-decoration: none;
}

.result__link {
  justify-self: center;
}

/* ===========================================================================
   Support assistant

   A button fixed to the corner of the page, and the panel it opens. It sits
   above everything, so it is deliberately the only thing on the site with a
   z-index — anything else that needed one would be competing with the help.
   =========================================================================== */

.agent-open {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font: inherit;
  font-size: 0.875em;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.agent-open:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.agent-open__icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.agent {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 41;
  display: flex;
  flex-direction: column;
  width: min(370px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 32px));
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.agent[hidden] {
  display: none;
}

.agent__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px 13px 16px;
  border-bottom: 1px solid var(--border);
}

.agent__title {
  margin: 0;
  font-size: 0.9375em;
  font-weight: 650;
}

.agent__close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  font: inherit;
  font-size: 1.125em;
  line-height: 1;
  cursor: pointer;
}

.agent__close:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.agent__log {
  flex: 1;
  min-height: 120px;
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agent__msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 0.875em;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agent__msg--them {
  align-self: flex-start;
  background: var(--bg-subtle);
  color: var(--text);
}

.agent__msg--you {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-text);
}

.agent__msg--problem {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* Three dots while it is thinking. Kept as text so it needs no extra markup. */
.agent__msg--waiting {
  color: var(--text-muted);
  font-style: italic;
}

.agent__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
}

.agent__chip {
  padding: 7px 11px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 0.8125em;
  cursor: pointer;
  text-align: left;
}

.agent__chip:hover {
  border-color: var(--border-strong);
}

.agent__form {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}

.agent__input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 0.875em;
}

.agent__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.agent__send {
  padding: 0 14px;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.875em;
  font-weight: 600;
  cursor: pointer;
}

.agent__send:disabled {
  opacity: 0.5;
  cursor: progress;
}

.agent__foot {
  margin: 0;
  padding: 0 16px 12px;
  color: var(--text-muted);
  font-size: 0.75em;
  text-align: center;
}

/* ===========================================================================
   Events: a goal and how close it is
   =========================================================================== */

.goal {
  padding-bottom: var(--pad);
  margin-bottom: var(--pad);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.goal__title {
  margin: 0 0 6px;
  font-size: 1.25em;
  font-weight: 650;
}

.goal__blurb {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 0.9375em;
  line-height: 1.5;
  white-space: pre-wrap;
  text-align: left;
}

.goal__bar {
  height: 10px;
  background: var(--bg-subtle);
  border-radius: 999px;
  overflow: hidden;
}

.goal__fill {
  height: 100%;
  min-width: 3px;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.goal__figures {
  margin: 10px 0 0;
  font-size: 0.9375em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.goal__figures.is-reached {
  color: var(--success);
}

.goal__ends {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.8125em;
}

/* The way in to an event, from the page that advertises it. */
.events {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: var(--card-width);
  margin: 0 auto 14px;
}

.events__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.events__item:hover {
  border-color: var(--border-strong);
}

.events__name {
  font-weight: 600;
  font-size: 0.9375em;
}

.events__progress {
  color: var(--text-muted);
  font-size: 0.8125em;
  font-variant-numeric: tabular-nums;
  align-self: center;
}

.events__bar {
  grid-column: 1 / -1;
  height: 6px;
  margin-top: 4px;
  background: var(--bg-subtle);
  border-radius: 999px;
  overflow: hidden;
}

.events__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

/* ===========================================================================
   Reading pages: terms, privacy, about
   =========================================================================== */

/* Reading pages start at the top whatever the theme says. */
.page--reading {
  align-items: flex-start;
  padding-top: 48px;
  padding-bottom: 48px;
  --page-fill: 0;
}

.prose {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: var(--pad);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.prose__title {
  margin: 0 0 4px;
  font-size: 1.5em;
  font-weight: 650;
}

.prose__updated {
  margin: 0 0 24px;
  color: var(--text-muted);
  font-size: 0.8125em;
}

.prose__heading {
  margin: 28px 0 8px;
  font-size: 1.0625em;
  font-weight: 650;
}

.prose__p {
  margin: 0 0 14px;
  font-size: 0.9375em;
  line-height: 1.65;
  /* Single line breaks inside a paragraph are kept, because somebody writing a
     policy in a plain box uses them to mean something. */
  white-space: pre-wrap;
}

.prose__list {
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: 0.9375em;
  line-height: 1.65;
}

.prose__list li {
  margin-bottom: 6px;
}

.prose__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.prose__link {
  margin-top: 0;
}

/* The agreement box on the request form. */
.agree__row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.875em;
  line-height: 1.5;
}

.agree__link {
  margin-top: 0;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}

/* The About text on the home page, above the form. */
/* The way on to the About page, under the introduction. */
.header__more {
  margin: 10px 0 0;
  font-size: 0.925em;
}