html[data-theme='light'] {
  color-scheme: light;
  --page-bg: #f7f9fc;
  --surface: #ffffff;
  --text-primary: #04090f;
  --text-secondary: #3c4457;
  --brand-primary: #2a23c1;
  --border-subtle: rgba(4, 9, 15, 0.12);
}

html[data-theme='dark'] {
  color-scheme: dark;
  --page-bg: #141618;
  --surface: #26272a;
  --text-primary: #f4f6fa;
  --text-secondary: #c3c8d4;
  --brand-primary: #7ab8ff;
  --border-subtle: rgba(195, 200, 212, 0.16);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Manrope, system-ui, sans-serif;
  background: var(--page-bg);
  color: var(--text-primary);
  line-height: 1.65;
}

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.legal a {
  color: var(--brand-primary);
}

.legal h1,
.legal h2 {
  font-family: Syne, system-ui, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.legal h2 {
  margin-top: 2rem;
}

.legal p {
  color: var(--text-secondary);
}

/* The registered office in the page footer. <address> is the right element
   for it; its default italic is not right for this context. */
address {
  margin-top: 0.5rem;
  color: var(--text-secondary);
  font-style: normal;
  line-height: 1.6;
}