/* Brand tokens are copied from styles.css rather than shared. That stylesheet
   centres one card over fixed animated blobs, which a long document has to undo
   more than reuse, and keeping the two files apart means an edit here cannot
   regress the live landing page. Only the tokens this page uses are copied. */
:root {
  --primary: #ff007a;
  --secondary: #ffb7d9;
  --text: #484848;
  --text-soft: #7a7a7a;
  --surface: #ffffff;
  --page: #fff5fa;
  --border: rgba(255, 0, 122, 0.12);

  --font-display: "Fredoka", "Google Sans", system-ui, sans-serif;
  --font-body: "Google Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout ---------- */

.legal {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 44px 24px 64px;
}

/* Prose is capped tighter than the column so measure stays readable while the
   table of contents and callout can use the full width */
.legal p,
.legal ul {
  max-width: 68ch;
}

.legal section + section {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}

/* ---------- Header ---------- */

.legal__back {
  display: inline-block;
  margin-bottom: 26px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
}

.legal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--primary);
}

.legal__updated {
  margin: 8px 0 0;
  font-size: 0.875rem;
  color: var(--text-soft);
}

.legal__lead {
  margin: 20px 0 0;
  font-size: 1.0625rem;
  color: var(--text-soft);
}

/* ---------- Table of contents ---------- */

.toc {
  margin: 32px 0 44px;
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.toc__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 30px;
}

.toc__list li {
  margin: 0 0 6px;
  break-inside: avoid;
  font-size: 0.9375rem;
}

/* ---------- Headings ---------- */

.legal h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);

  /* Anchor jumps from the table of contents would otherwise butt the heading
     against the top of the viewport */
  scroll-margin-top: 20px;
}

.legal h3 {
  margin: 26px 0 8px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
}

/* ---------- Prose ---------- */

.legal p {
  margin: 0 0 16px;
}

.legal ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

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

.legal li::marker {
  color: var(--primary);
}

.legal p:last-child,
.legal ul:last-child {
  margin-bottom: 0;
}

/* ---------- Links ---------- */

.legal a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 0, 122, 0.3);
  transition: border-color 0.2s ease;
}

.legal a:hover,
.legal a:focus-visible {
  border-color: var(--primary);
}

/* Twelve underlined entries in a row reads as noise, so the rule only appears
   on hover here */
.toc a,
.legal__back {
  border-bottom-color: transparent;
}

.legal a:focus-visible {
  outline: 3px solid rgba(255, 0, 122, 0.4);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Callout ---------- */

.callout {
  margin: 0;
  padding: 20px 24px;
  background: rgba(255, 183, 217, 0.3);
  border-left: 4px solid var(--primary);
  border-radius: 0 16px 16px 0;
}

.callout p:last-child {
  margin-bottom: 0;
}

/* ---------- Footer ---------- */

.legal__footer {
  margin-top: 48px;
  padding-top: 24px;
  font-size: 0.8rem;
  color: var(--text-soft);
  border-top: 1px solid var(--border);
}

.legal__footer p {
  margin: 0 0 6px;
}

/* Two columns of contents squeeze onto too many lines below this, and the page
   gutters need to give way to the text */
@media (max-width: 640px) {
  .legal {
    padding: 32px 18px 48px;
  }

  .toc {
    margin: 26px 0 36px;
    padding: 18px 20px;
    border-radius: 16px;
  }

  .toc__list {
    columns: 1;
  }

  .legal section + section {
    margin-top: 32px;
    padding-top: 28px;
  }

  .callout {
    padding: 16px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}