/* Legal page. Reuses the landing page's shell (header, footer, buttons) and
   only adds what a long-form reading page needs: a measure narrow enough to
   read comfortably, and clear heading rhythm. */

.legal-page {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(48px, 7vh, 88px) 24px clamp(64px, 9vh, 110px);
}

.legal-page h1 {
  margin: 10px 0 20px;
  font-family: var(--display, "Anton"), sans-serif;
  font-size: clamp(42px, 6.4vw, 76px);
  line-height: .95;
  font-style: italic;
  text-transform: uppercase;
  color: var(--ink);
}

.legal-intro { margin: 0 0 30px; font-size: 17px; line-height: 1.65; color: rgb(14 27 21 / .72); }

/* An early-stage product should say so where it matters, rather than dressing
   a draft up as settled policy. */
.legal-flag {
  display: grid; gap: 6px;
  margin: 0 0 38px; padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgb(202 138 4 / .3);
  background: rgb(254 249 231 / .9);
  font-size: 14.5px; line-height: 1.6;
}
.legal-flag strong { color: #854d0e; }
.legal-flag span { color: rgb(66 52 12 / .86); }

.legal-toc {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 44px; padding-bottom: 30px;
  border-bottom: 1px solid rgb(14 27 21 / .1);
}
.legal-toc a {
  padding: 8px 14px; border-radius: 99px;
  border: 1px solid rgb(14 27 21 / .14);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.legal-toc a:hover { background: rgb(14 27 21 / .05); border-color: rgb(14 27 21 / .28); }

.legal-section { margin: 0 0 52px; scroll-margin-top: 110px; }
.legal-section h2 {
  margin: 0 0 6px;
  font-family: var(--display, "Anton"), sans-serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-style: italic; text-transform: uppercase; line-height: 1;
  color: var(--green, #0b8a54);
}
.legal-section h3 {
  margin: 30px 0 8px;
  font-size: 16.5px; font-weight: 800; letter-spacing: -.01em;
  color: var(--ink);
}
.legal-section p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.72; color: rgb(14 27 21 / .8); }
.legal-section strong { color: var(--ink); }

.legal-link { color: var(--green, #0b8a54); font-weight: 700; }
.legal-back { margin-top: 8px; }

@media (max-width: 640px) {
  .legal-page { padding-left: 18px; padding-right: 18px; }
  .legal-toc { gap: 6px; }
}