/*
 * Nordic Donors website. Plain CSS, no build step, no external resources
 * (CSP: default-src 'self'; images only from this site or data: URIs).
 *
 * Design: calm and clinical. The logo is a thin teal line drawing inside an
 * ellipse, so the site uses thin teal lines for drawings (the phone on the
 * Forside, on a pale disc with two floating cards), pale teal surfaces for tonal change and
 * hairlines for structure. Shapes follow the app: 16 px cards, 12 px buttons,
 * 10 px fields and rounded-square icon tiles. Headings and body text use the
 * system sans. There are no webfonts.
 *
 * Palette: the app's ink, text, muted and danger, plus the line colour, and
 * the input border (darker than the app's #ACC4CC, which fails 3:1 on white).
 * The surfaces and the strong variants are tints of the same hues. Contrast
 * (the pairs below are asserted in tests/website-legal.test.ts):
 *   text on white 10.1, on surface 9.5, on surface-2 9.1, on danger-surface 8.9;
 *   muted on white 5.7, on surface 5.3, on surface-2 5.1;
 *   ink on white 5.1, on surface 4.8, on surface-2 4.6;
 *   danger on white 6.9, on danger-surface 6.0;
 *   white on ink 5.1, on ink-strong 7.0, on danger 6.9, on danger-strong 8.8;
 *   input border on white 3.9, on surface 3.7; focus ring on white 5.1.
 * Motion: only colour changes of 150 ms, and only inside
 * prefers-reduced-motion: no-preference.
 */
:root {
  --color-bg: #FFFFFF;
  --color-text: #244652;
  --color-muted: #526B73;
  --color-ink: #25778D;
  --color-danger: #A03535;
  --color-line: #D4E4E8;
  --color-border-input: #6B858D;
  --color-focus: #25778D;
  --color-on-ink: #FFFFFF;
  --color-surface: #F3F9FA;
  --color-surface-2: #EAF5F8;
  --color-ink-strong: #1C6174;
  --color-danger-strong: #862B2B;
  --color-danger-surface: #FDECEC;
  --color-bubble: #E9E9EB;
  --color-line-strong: #B4CDD4;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);

  --radius-card: 16px;
  --radius-control: 12px;
  --radius-field: 10px;
  --radius-tile: 9px;

  --wrap: 74rem;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 42rem;
}

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

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

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
}

h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  letter-spacing: -0.006em;
}

h3 {
  margin-top: 24px;
  font-size: 1.1875rem;
  font-weight: 600;
}

p,
ul,
ol,
dl {
  margin: 0 0 16px;
}

ul,
ol {
  padding-left: 24px;
}

li {
  margin-bottom: 4px;
}

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

a:hover {
  text-decoration-thickness: 2px;
}

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

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

svg {
  flex: none;
}

main {
  display: block;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Inline icons: Lucide outlines, always decorative. */
.icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Skip link: off-screen until it has focus. */
.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: var(--radius-control);
  background: var(--color-ink);
  color: var(--color-on-ink);
  transform: translateY(-200%);
}

.skip:focus {
  transform: translateY(0);
}

/* Header: logo left, links right. Below 56rem the links move into a
   menu that opens without JavaScript (details and summary). */
.site-header {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  min-height: 80px;
  padding-block: 12px;
}

.brand {
  display: block;
  flex: none;
  margin-right: auto;
  line-height: 0;
}

.brand img {
  display: block;
  width: 124px;
  height: auto;
}

.nav-inline {
  display: none;
}

.nav-inline ul,
.nav-menu ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-inline li,
.nav-menu li {
  margin: 0;
}

.nav-inline a,
.nav-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-control);
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
}

.nav-inline a:hover,
.nav-menu a:hover {
  background: var(--color-surface-2);
}

.nav-inline a[aria-current="page"],
.nav-menu a[aria-current="page"] {
  background: var(--color-surface-2);
  color: var(--color-ink-strong);
  font-weight: 600;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--color-border-input);
  border-radius: 999px;
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
}

.lang-switch:hover {
  background: var(--color-surface-2);
}

.lang-switch .icon {
  width: 18px;
  height: 18px;
}

.nav-menu {
  position: relative;
}

.nav-menu summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--color-border-input);
  border-radius: 999px;
  color: var(--color-text);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary:hover,
.nav-menu[open] summary {
  background: var(--color-surface-2);
}

.nav-menu .icon-close {
  display: none;
}

.nav-menu[open] .icon-open {
  display: none;
}

.nav-menu[open] .icon-close {
  display: block;
}

.nav-menu ul {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  flex-direction: column;
  min-width: 14rem;
  padding: 8px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  box-shadow: 0 12px 32px rgb(36 70 82 / 16%);
}

@media (max-width: 39.99rem) {
  .site-header__inner {
    position: relative;
    gap: 8px;
  }

  .lang-switch,
  .nav-menu summary {
    padding-inline: 12px;
  }

  .lang-switch .icon {
    display: none;
  }

  /* A wrapped Menu still opens inside the header's viewport bounds. */
  .nav-menu {
    position: static;
  }

  .nav-menu ul {
    right: var(--gutter);
    width: max-content;
    min-width: min(14rem, calc(100% - 2 * var(--gutter)));
    max-width: calc(100% - 2 * var(--gutter));
    overflow-wrap: anywhere;
  }
}

/* At 320 px the logo, the language switch and Menu must fit one row
   without sideways scroll (WCAG 1.4.10), also beside a classic scrollbar. */
@media (max-width: 23.99rem) {
  .site-header__inner {
    gap: 8px 6px;
  }

  .lang-switch,
  .nav-menu summary {
    padding-inline: 10px;
  }

  .brand img {
    width: 88px;
  }
}

@media (min-width: 40rem) {
  .brand img {
    width: 148px;
  }
}

@media (min-width: 56rem) {
  .nav-inline {
    display: block;
  }

  .nav-inline ul {
    gap: 4px;
  }

  .nav-menu {
    display: none;
  }

  .brand img {
    width: 176px;
  }
}

/* Footer: company details left, page links right. */
.site-footer {
  margin-top: 0;
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.9375rem;
}

.site-footer__inner {
  display: grid;
  gap: 24px 48px;
  padding-block: 40px 48px;
}

.site-footer__org p {
  margin: 0 0 4px;
}

.site-footer__name {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li {
  margin: 0;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text);
}

@media (min-width: 48rem) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .site-footer ul {
    flex-direction: column;
    gap: 0;
  }

  .site-footer a {
    min-height: 36px;
  }
}

/* Page head on every page except the Forside. */
.page-head {
  padding-block: clamp(32px, 6vw, 64px) clamp(24px, 4vw, 40px);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface);
}

.page-head h1 {
  max-width: 24ch;
  margin-bottom: 16px;
}

.page-head p {
  max-width: var(--measure);
  margin-bottom: 0;
}

.lead {
  color: var(--color-text);
  font-size: 1.1875rem;
  line-height: 1.55;
}

.updated {
  color: var(--color-muted);
}

/* Long text: a table of contents beside text of at most 42rem. */
.doc {
  display: grid;
  gap: 24px 64px;
  padding-block: 32px 72px;
}

.doc > * {
  min-width: 0;
}

@media (min-width: 64rem) {
  .doc {
    grid-template-columns: 15rem minmax(0, 1fr);
    padding-block: 56px 96px;
  }
}

.toc {
  display: none;
}

.toc-compact {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-bg);
}

.toc-compact summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.toc-compact summary::-webkit-details-marker {
  display: none;
}

.toc-compact summary .icon {
  width: 18px;
  height: 18px;
}

.toc-compact[open] summary .icon {
  transform: rotate(180deg);
}

.toc-compact nav {
  padding: 0 8px 8px;
  border-top: 1px solid var(--color-line);
}

.toc ol,
.toc-compact ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc li,
.toc-compact li {
  margin: 0;
}

.toc a,
.toc-compact a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-field);
  color: var(--color-text);
  line-height: 1.35;
  text-decoration: none;
}

.toc a:hover,
.toc-compact a:hover {
  background: var(--color-surface-2);
  color: var(--color-ink-strong);
}

@media (min-width: 64rem) {
  .toc {
    display: block;
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding-left: 16px;
    border-left: 1px solid var(--color-line);
  }

  .toc-compact {
    display: none;
  }

  .toc a {
    padding: 8px 12px;
    font-size: 0.9375rem;
  }
}

.toc__title {
  margin: 0 0 8px 12px;
  color: var(--color-muted);
  font-size: 0.9375rem;
  font-weight: 600;
}

.prose {
  font-size: 1.0625rem;
  line-height: 1.7;
}

.prose > p,
.prose > ul,
.prose > ol,
.prose > h2,
.prose > h3 {
  max-width: var(--measure);
}

.prose h2 {
  margin: 56px 0 16px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
  scroll-margin-top: 24px;
}

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

.prose h3 {
  margin: 32px 0 8px;
}

.prose li {
  margin-bottom: 8px;
}

/* Privacy data table. It keeps its table layout on every screen width: on
   narrow screens the wrapper scrolls sideways, because display overrides on
   table parts would drop the table semantics for assistive technology. The
   shadows at the edges show that there is more to scroll to. */
.table-scroll {
  max-width: 100%;
  margin: 24px 0 32px;
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(to right, #FFFFFF 30%, rgb(255 255 255 / 0%)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, #FFFFFF 30%, rgb(255 255 255 / 0%)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(36 70 82 / 22%), rgb(36 70 82 / 0%)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(36 70 82 / 22%), rgb(36 70 82 / 0%)) right center / 14px 100% no-repeat scroll;
}

.data-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.data-table caption {
  padding: 16px;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
}

.data-table th,
.data-table td {
  padding: 14px 16px;
  border-top: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  background: var(--color-surface-2);
  font-weight: 600;
}

.data-table tbody tr:nth-child(even) td {
  background: rgb(243 249 250 / 70%);
}

.data-table td:first-child {
  min-width: 16rem;
}

/* Status messages: an icon, a border and text, never colour alone. The
   deletion script sets "notice notice--error" or "notice notice--success"
   on its own regions, so only a region with a message takes space. */
.notice {
  position: relative;
  margin: 16px 0 0;
  padding: 16px 16px 16px 52px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text);
}

.notice::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325778D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

.notice > :last-child {
  margin-bottom: 0;
}

.notice--error {
  border-color: var(--color-danger);
  background: var(--color-danger-surface);
}

.notice--error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A03535' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}

.notice--success {
  border-color: var(--color-ink);
  background: var(--color-surface-2);
}

.notice--success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325778D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* Two-column section: a heading and a short text beside the controls. */
.split {
  display: grid;
  gap: 16px 64px;
  margin-block: 56px;
}

.split__intro > :last-child {
  margin-bottom: 0;
}

.split__intro h2 {
  margin-top: 0;
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  }

  .split__intro {
    position: sticky;
    top: 24px;
    align-self: start;
  }
}

/* Two panels side by side on wide screens, stacked on narrow ones. */
.pair {
  display: grid;
  gap: 16px;
  margin-block: 32px;
}

@media (min-width: 48rem) {
  .pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

.panel {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-bg);
}

.panel--tint {
  border-color: transparent;
  background: var(--color-surface-2);
}

.panel h2,
.panel h3 {
  margin-top: 0;
  font-size: 1.375rem;
}

.panel > :last-child {
  margin-bottom: 0;
}

.panel ul {
  padding-left: 20px;
}

/* Form fields. */
.form-card {
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  box-shadow: 0 1px 2px rgb(36 70 82 / 6%), 0 8px 24px rgb(36 70 82 / 6%);
}

.field {
  margin: 0 0 24px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.field input[type="email"],
.field input[type="password"],
.field input[type="text"] {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 8px 14px;
  border: 2px solid var(--color-border-input);
  border-radius: var(--radius-field);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}

.field input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.field input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0 12px 0 0;
  flex: none;
  accent-color: var(--color-ink);
}

.field--check {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
  padding: 16px;
  border-radius: var(--radius-field);
  background: var(--color-surface);
}

.field--check label {
  display: inline;
  margin: 0;
  font-weight: 400;
}

.field-error {
  margin: 8px 0 0;
  color: var(--color-danger);
  font-weight: 600;
}

.field-error:empty {
  display: none;
}

#confirm-fejl {
  margin: 0 0 8px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-control);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  border-color: var(--color-ink-strong);
  background: var(--color-ink-strong);
}

.form-card .button {
  width: 100%;
  margin-top: 16px;
}

@media (min-width: 40rem) {
  .form-card .button {
    width: auto;
  }
}

.button--danger {
  border-color: var(--color-danger);
  background: var(--color-danger);
}

.button--danger:hover {
  border-color: var(--color-danger-strong);
  background: var(--color-danger-strong);
}

.button:disabled,
.button:disabled:hover {
  border-color: var(--color-border-input);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: not-allowed;
}

/* App Store and Google Play badges. */
.store-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.store-links li {
  margin: 0;
}

.store-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  line-height: 0;
  border-radius: 8px;
}

.store-links img {
  display: block;
  height: 48px;
  width: auto;
}

/* Google's supplied PNG includes transparent clear space. Scale the whole
   artwork so its visible badge matches Apple's, with equal link hit areas. */
.store-links img[src$="google-play-da.png"] {
  height: 64px;
}

/* Forside: purpose and badges left, a phone drawn in the logo's line right. */
.hero {
  overflow: hidden;
  padding-block: clamp(32px, 7vw, 88px) clamp(24px, 5vw, 64px);
}

.hero__grid {
  display: grid;
  align-items: center;
  gap: 32px 48px;
}

.hero h1 {
  margin-bottom: 20px;
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);
}

.hero .lead {
  max-width: 34rem;
  margin-bottom: 32px;
}

.hero h2 {
  margin-bottom: 12px;
  font-size: 1.25rem;
  font-weight: 600;
}

.hero p:last-child {
  max-width: 34rem;
  margin-bottom: 0;
}

.hero__visual {
  justify-self: center;
  width: 100%;
  max-width: 26rem;
}

.phone {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

@media (min-width: 56rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .hero__visual {
    justify-self: end;
    max-width: 30rem;
  }
}

.ph-backdrop {
  fill: var(--color-surface-2);
}

.ph-float {
  filter: drop-shadow(0 8px 16px rgb(36 70 82 / 0.12));
}

.ph-float-card {
  fill: var(--color-bg);
  stroke: var(--color-line);
  stroke-width: 1;
}

.ph-body {
  fill: var(--color-bg);
  stroke: var(--color-ink);
  stroke-width: 3;
}

.ph-screen {
  fill: var(--color-surface);
}

.ph-notch {
  fill: var(--color-text);
}

.ph-card {
  fill: var(--color-bg);
  stroke: var(--color-line);
  stroke-width: 1;
}

.ph-tile {
  fill: var(--color-ink);
}

.ph-glyph {
  fill: none;
  stroke: var(--color-on-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ph-bar {
  fill: var(--color-text);
  opacity: 0.8;
}

.ph-bar-soft {
  fill: var(--color-line-strong);
}

.ph-pill {
  fill: var(--color-surface-2);
}

.ph-step-done {
  fill: var(--color-ink);
}

.ph-step-next {
  fill: var(--color-bg);
  stroke: var(--color-ink);
  stroke-width: 2;
}

.ph-track {
  stroke: var(--color-line-strong);
  stroke-width: 2;
}

.ph-bubble-in {
  fill: var(--color-bubble);
}

.ph-bubble-out {
  fill: var(--color-ink);
}

.ph-bubble-line {
  fill: var(--color-on-ink);
  opacity: 0.85;
}

.ph-tabbar {
  fill: var(--color-bg);
}

.ph-tabline {
  stroke: var(--color-line);
  stroke-width: 1;
}

.ph-tab {
  fill: var(--color-line-strong);
}

.ph-tab-active {
  fill: var(--color-ink);
}

.ph-home {
  fill: var(--color-text);
}

/* What the app does: a grouped list like the app's own settings rows. */
.band {
  border-block: 1px solid var(--color-line);
  background: var(--color-surface);
}

.band .split {
  margin-block: 0;
  padding-block: clamp(40px, 7vw, 88px);
}

.uses {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  list-style: none;
}

.uses li {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 16px 20px;
  font-size: 1.0625rem;
  line-height: 1.45;
}

.uses li + li {
  border-top: 1px solid var(--color-line);
}

.icon-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-tile);
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.icon-tile .icon {
  width: 22px;
  height: 22px;
}

.english-line {
  padding-block: 32px;
  margin: 0;
  color: var(--color-muted);
}

.english-line .wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.english-line .icon {
  margin-top: 2px;
}

.english-line p {
  max-width: var(--measure);
  margin: 0;
}

/* Support. */
.help-grid {
  display: grid;
  gap: 40px 64px;
  padding-block: 40px 72px;
}

@media (min-width: 64rem) {
  .help-grid {
    grid-template-columns: minmax(0, 1fr) 26rem;
    padding-block: 56px 96px;
  }

  .help-grid aside {
    position: sticky;
    top: 24px;
    align-self: start;
  }
}

.help-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-list > li {
  margin: 0;
  padding: 24px 0;
  border-top: 1px solid var(--color-line);
}

.help-list > li:last-child {
  border-bottom: 1px solid var(--color-line);
}

.help-list h3 {
  margin: 0 0 8px;
}

.help-list p {
  max-width: var(--measure);
  margin: 0;
}

.card {
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  box-shadow: 0 1px 2px rgb(36 70 82 / 6%), 0 8px 24px rgb(36 70 82 / 6%);
}

.card h2 {
  margin-top: 0;
}

.card h3 {
  margin: 0 0 8px;
}

.card > :last-child {
  margin-bottom: 0;
}

.card + .card {
  margin-top: 24px;
}

.card--tint {
  border-color: transparent;
  background: var(--color-surface-2);
  box-shadow: none;
}

.contact-list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
}

.contact-list .icon {
  margin-top: 3px;
  color: var(--color-ink);
}

.hours-table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.hours-table caption {
  padding-bottom: 8px;
  text-align: left;
  font-weight: 600;
}

.hours-table th,
.hours-table td {
  padding: 10px 0;
  border-top: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.nowrap {
  white-space: nowrap;
}

.hours-table th {
  width: 40%;
  padding-right: 16px;
  font-weight: 500;
}

.hours-table td {
  font-variant-numeric: tabular-nums;
}

.emergency {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-field);
  background: var(--color-danger-surface);
  font-weight: 600;
}

.emergency .icon {
  margin-top: 2px;
  color: var(--color-danger);
}

/* 404 and not published. */
.simple {
  padding-block: 40px 96px;
}

.simple > * {
  max-width: var(--measure);
}

.link-list {
  margin: 0 0 24px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  list-style: none;
}

.link-list li {
  margin: 0;
}

.link-list li + li {
  border-top: 1px solid var(--color-line);
}

.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 20px;
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
}

.link-list a:hover {
  background: var(--color-surface-2);
  color: var(--color-ink-strong);
}

.link-list .icon {
  width: 18px;
  height: 18px;
  color: var(--color-ink);
}

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

  a,
  summary,
  .button,
  .field input {
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
}