/* Legal pages (privacy, terms).
   Layered on top of styles.css — reuses its custom properties, nav, footer and buttons, and only
   adds the long-form reading column those pages need. */

.legal {
  padding: 132px 0 96px;
}

.legal__wrap {
  max-width: 78ch;
}

.legal__eyebrow {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple-light);
}

.legal__title {
  margin: 0 0 10px;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.legal__meta {
  margin: 0 0 40px;
  font-size: 14.5px;
  color: var(--muted);
}

/* The plain-language box at the top. The detail below is binding; this is what most people read. */
.legal__summary {
  margin: 0 0 48px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.legal__summary h2 {
  margin: 0 0 14px;
  font-size: 1.05rem;
  letter-spacing: .01em;
}

.legal__summary ul {
  margin: 0;
  padding-left: 20px;
}

.legal__summary li + li {
  margin-top: 9px;
}

.legal h2 {
  margin: 44px 0 14px;
  font-size: 1.32rem;
  letter-spacing: -.01em;
}

.legal p,
.legal li {
  color: #cfc9e4;
  font-size: 1.02rem;
  line-height: 1.72;
}

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

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

.legal li + li {
  margin-top: 8px;
}

.legal a {
  color: var(--purple-light);
  text-underline-offset: 3px;
}

.legal code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: .92em;
}

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

/* Permission table. Scrolls on its own on narrow screens so the page body never does. */
.legal__table {
  width: 100%;
  margin: 0 0 20px;
  border-collapse: collapse;
  font-size: .98rem;
}

.legal__table th,
.legal__table td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  color: #cfc9e4;
  line-height: 1.6;
}

.legal__table th {
  color: var(--text);
  font-size: 12.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.legal__table td:first-child {
  width: 34%;
  color: var(--text);
  font-weight: 600;
}

.legal__table .muted {
  color: var(--muted);
  font-weight: 400;
}

.legal__foot-note {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

@media (max-width: 620px) {
  .legal { padding-top: 108px; }
  .legal__summary { padding: 20px; }
  .legal__table td:first-child { width: 42%; }
  .legal__table th,
  .legal__table td { padding: 11px 10px; }
}