/* Prose styling for /terms/ and /privacy/. The landing page styles everything
   inline, so these element rules are scoped to .legal and can't reach it. */

.legal {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 88px 32px 96px;
}

.legal h1 {
  font-size: 44px;
  letter-spacing: -0.02em;
}

.legal .updated {
  margin-top: 14px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #6b6e75;
}

.legal section { margin-top: 44px; }

.legal h2 {
  font-size: 21px;
  color: #eeeff3;
  letter-spacing: -0.01em;
}

.legal section p {
  margin-top: 14px;
  color: #9aa0a9;
  font-size: 16px;
  line-height: 1.75;
}

.legal section ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.legal section li {
  position: relative;
  margin-top: 11px;
  padding-left: 22px;
  color: #9aa0a9;
  font-size: 16px;
  line-height: 1.7;
}

/* Orange marker rather than a bullet glyph — matches the accents used site-wide. */
.legal section li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff6b1a;
}

.legal strong { color: #eeeff3; font-weight: 600; }
.legal em { color: #c7cbd2; font-style: italic; }

@media (max-width: 640px) {
  .legal { padding: 56px 22px 72px; }
  .legal h1 { font-size: 32px; }
}