/* The privacy policy and the terms. One stylesheet for both, on top of the
   landing sheet, so the two cannot drift from each other or from the rest of
   the site. The FAQ sets the rhythm; these are longer and are read for a
   specific clause more often than straight through, so they add a contents
   list, a summary box and a table, and nothing else. */

.legal {
  max-width: 48rem;
  margin: 0 auto;
  padding: 3.5rem clamp(1rem, 5vw, 3.5rem) 5rem;
}

.legal h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  text-wrap: balance;
}

.legal__meta {
  font-size: 0.75rem;
  color: var(--faint);
  margin-bottom: 2rem;
}

.legal__lede {
  color: var(--muted);
  margin-bottom: 2rem;
  max-width: 40rem;
  line-height: 1.65;
}

/* The short version, before the long one. */
.legal__summary {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 1.25rem 1.4rem;
  margin-bottom: 2.5rem;
}

/* .legal h2 below would otherwise win the tie and push these down. */
.legal .legal__summary h2 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.legal__summary ul {
  margin: 0;
}

.legal .legal__summary p:last-child {
  margin: 0.4rem 0 0;
}

.legal__toc {
  margin-bottom: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}

.legal .legal__toc h2 {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.legal__toc ol {
  columns: 2 16rem;
  column-gap: 2rem;
  padding-left: 1.2rem;
  margin: 0;
}

.legal__toc li {
  break-inside: avoid;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
}

.legal h2 {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin: 2.6rem 0 0.7rem;
  text-wrap: balance;
  /* Clear of the sticky nav when a contents link lands on it. */
  scroll-margin-top: 5rem;
}

.legal h3 {
  font-size: 1rem;
  margin: 1.6rem 0 0.5rem;
}

.legal p,
.legal li {
  color: var(--muted);
  line-height: 1.65;
  max-width: 68ch;
}

.legal p {
  margin-bottom: 0.8rem;
}

.legal ul,
.legal ol {
  padding-left: 1.3rem;
  margin: 0 0 0.9rem;
}

.legal li {
  margin-bottom: 0.4rem;
}

.legal strong {
  color: var(--text);
  font-weight: 600;
}

.legal a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.2em;
}

.legal a:hover {
  text-decoration-color: var(--accent);
}

.legal code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--text);
}

/* Terms that are written in capitals because the law in some places wants
   the disclaimer conspicuous. Capitals are loud enough; the colour stays the
   body colour. */
.legal__caps {
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

/* The inventory tables scroll inside themselves on a phone rather than
   pushing the page sideways. */
.legal__table {
  overflow-x: auto;
  margin: 0.4rem 0 1.2rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.5;
}

.legal th {
  color: var(--text);
  font-weight: 600;
  background: var(--surface);
  white-space: nowrap;
}

.legal td {
  color: var(--muted);
  min-width: 8rem;
}

/* On a phone the columns share the width instead of scrolling past it. */
@media (max-width: 560px) {
  .legal th,
  .legal td {
    min-width: 0;
    padding: 0.55rem 0.6rem;
  }

  /* A cookie or key name reads as one word; the prose beside it wraps. */
  .legal td code {
    white-space: nowrap;
  }
}

.legal tr:last-child td {
  border-bottom: 0;
}

.legal__end {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
}