/* Long form legal pages. Reuses the tokens from styles.css. */

.legal {
  width: min(760px, calc(100% - 48px));
  padding: 120px 0 96px;
}

.crumbs {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 24px;
}

.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs span { margin: 0 6px; }

.legal h1 {
  font-size: clamp(36px, 6vw, 52px);
  margin-bottom: 20px;
}

.legal h2 {
  font-size: clamp(22px, 3vw, 27px);
  margin-top: 48px;
  margin-bottom: 14px;
}

.legal p {
  margin-bottom: 16px;
  color: rgba(245, 241, 236, 0.82);
  line-height: 1.7;
}

.legal-lede {
  font-size: 19px;
  color: var(--text) !important;
}

.legal-updated {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted) !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--stroke);
}

.legal-list {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 20px;
}

.legal-list li {
  margin-bottom: 12px;
  color: rgba(245, 241, 236, 0.82);
  line-height: 1.7;
}

.legal-list strong,
.legal p strong { color: var(--text); font-weight: 800; }

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

.legal-back {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--stroke);
  font-weight: 800;
}

@media (max-width: 620px) {
  .legal { padding: 96px 0 64px; }
}