/* ============================================================================
   MONITOR · the legal pages
   Terms and privacy are plain static HTML: they have to be readable when the
   application is down, when JavaScript is off, and to a crawler. They borrow
   home.css for the type and colour tokens and add nothing but measure.
   ========================================================================== */

.legal-page {
  position: relative; z-index: 2;
  max-width: 76ch; margin: 0 auto; padding: 48px 24px 110px;
}
.legal-nav { margin-bottom: 54px; }
.legal-nav a {
  color: var(--fg-2); text-decoration: none; font-size: 14.5px; font-weight: 500;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.legal-nav a:hover { color: var(--fg); border-bottom-color: var(--line-2); }

.legal-page h1 { font-size: clamp(32px, 5vw, 46px); letter-spacing: -.03em; }
.legal-page .updated { color: var(--fg-3); font-size: 14px; margin: 10px 0 30px; }
.legal-page .lede { font-size: 18px; line-height: 1.65; color: var(--fg-2); font-weight: 300; }

.legal-page h2 {
  font-size: 20px; margin: 44px 0 12px; letter-spacing: -.02em;
  padding-top: 26px; border-top: 1px solid var(--line);
}
/* The first rule under the lede would otherwise sit tight against it. */
.legal-page .lede + h2 { margin-top: 52px; }

.legal-page p, .legal-page li { font-size: 16px; line-height: 1.7; color: var(--fg-2); font-weight: 300; }
.legal-page p { margin: 0 0 14px; }
.legal-page ul { margin: 0 0 14px; padding-left: 22px; }
.legal-page li { margin-bottom: 8px; }
.legal-page b { color: var(--fg); font-weight: 600; }
.legal-page a { color: var(--sky); }

.legal-foot {
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
  font-size: 13.5px; color: var(--fg-3);
}
.legal-foot a { color: var(--fg-2); text-decoration: none; }
.legal-foot a:hover { color: var(--fg); }
.legal-foot span:last-child { margin-left: auto; }

@media (max-width: 620px) {
  .legal-page { padding: 32px 20px 80px; }
  .legal-foot span:last-child { margin-left: 0; width: 100%; }
}