/* Privacy and terms pages. Builds on styles.css. */
.legal { padding: 150px 0 110px; background: var(--ink); }

.legal-head { max-width: 820px; margin-bottom: 56px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.legal-head h1 { font-size: clamp(40px, 5.2vw, 68px); margin: 26px 0 20px; max-width: none; }
.legal-lede { color: #c8ced3; font-size: 18px; max-width: 60ch; margin: 0 0 18px; }
.legal-meta { color: var(--muted); font-size: 14px; margin: 0; }

.legal-body { max-width: 72ch; color: #c8ced3; font-size: 16px; line-height: 1.75; }
.legal-body h2 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.02em; line-height: 1.2; color: var(--white); margin: 48px 0 14px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 16px; }
.legal-body strong { color: var(--white); font-weight: 600; }
.legal-body ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.legal-body li { position: relative; padding-left: 22px; }
.legal-body li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--signal); transform: skewX(-12deg); }
.legal-body a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: #e5ff78; }

@media (max-width: 720px) {
  .legal { padding: 120px 0 80px; }
  .legal-lede { font-size: 17px; }
}