/* The legal pages (privacy/, data-deletion/). Loaded after styles.css.
   They use no intro and no reveal animation: the text is visible the moment
   the page loads, with or without scripts, because a policy has to be
   readable by anyone and by the checkers that read the page as plain HTML. */
.legal { background: var(--paper); color: var(--ink); padding: 150px 0 110px; }
.legal__inner { width: min(760px, calc(100% - 40px)); margin: 0 auto; }
.legal__eyebrow { color: var(--orange-dark); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.legal h1 { font-size: clamp(38px, 5vw, 58px); margin-bottom: 14px; }
.legal__updated { color: rgba(31,30,30,.6); font-size: 14px; margin-bottom: 40px; }
.legal h2 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.03em; margin: 44px 0 14px; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: rgba(31,30,30,.86); }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--orange-dark); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--orange); }
.legal-header { background: rgba(31,30,30,.94); border-color: var(--line-dark); }
@media (max-width: 640px) {
  .legal { padding: 120px 0 80px; }
}