/* Long-form legal pages (privacy.html, terms.html). Loads after styles.css and
   reuses its colors, header and footer. Every measurement is a knob here. */
:root {
  --legal-width:        760px; /* widest the reading column gets */
  --legal-pad-top:       56px; /* space between the header and the page title */
  --legal-pad-bottom:    88px; /* space between the last section and the footer */
  --legal-title-size:    clamp(40px, 5.5vw, 60px); /* page title size */
  --legal-h2-size:       28px; /* section heading size */
  --legal-h2-top:        48px; /* space above each section heading */
  --legal-h3-size:       17px; /* sub-heading size */
  --legal-body-size:     16px; /* paragraph and list text size */
  --legal-line-height:  1.7;   /* paragraph line spacing */
  --legal-block-gap:     14px; /* space between paragraphs and lists */
  --legal-toc-pad:       22px; /* padding inside the contents box */
  --legal-radius:         8px; /* corner rounding of boxes and tables */
  --legal-anchor-offset: 96px; /* keeps headings clear of the sticky header on jump */
  --legal-phone-pad-top: 32px; /* title spacing on phones */
}

.legal-page {
  max-width: var(--legal-width);
  margin: 0 auto;
  padding: var(--legal-pad-top) clamp(20px, 4vw, 32px) var(--legal-pad-bottom);
  color: var(--ink);
  font-size: var(--legal-body-size);
  line-height: var(--legal-line-height);
}

.legal-page h1 {
  margin: 0 0 8px;
  font-size: var(--legal-title-size);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.legal-meta {
  margin: 0 0 var(--legal-block-gap);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.legal-page .eyebrow {
  margin-bottom: 14px;
}

.legal-page h2 {
  margin: var(--legal-h2-top) 0 var(--legal-block-gap);
  scroll-margin-top: var(--legal-anchor-offset);
  font-size: var(--legal-h2-size);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.legal-page h3 {
  margin: 28px 0 8px;
  font-size: var(--legal-h3-size);
  color: var(--ink);
}

.legal-page p,
.legal-page ul,
.legal-page ol {
  margin: 0 0 var(--legal-block-gap);
}

.legal-page ul,
.legal-page ol {
  padding-left: 1.4em;
}

.legal-page li {
  margin-bottom: 6px;
}

.legal-page a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-page strong {
  color: var(--ink);
}

.legal-callout,
.legal-toc {
  margin: 24px 0;
  padding: var(--legal-toc-pad);
  border: 1px solid var(--line);
  border-radius: var(--legal-radius);
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

.legal-callout p:last-child {
  margin-bottom: 0;
}

.legal-caps {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.legal-toc strong {
  display: block;
  margin-bottom: 8px;
}

.legal-toc ol {
  margin: 0;
  columns: 2;
  column-gap: 32px;
  font-size: 15px;
}

.legal-toc li {
  break-inside: avoid;
}

.legal-table-wrap {
  margin: 0 0 var(--legal-block-gap);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--legal-radius);
}

.legal-table-wrap table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.55;
}

.legal-table-wrap th,
.legal-table-wrap td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal-table-wrap th {
  background: var(--tint);
  color: var(--tint-ink-strong);
  font-weight: 800;
}

.legal-table-wrap tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 720px) {
  .legal-page {
    padding-top: var(--legal-phone-pad-top);
  }

  .legal-toc ol {
    columns: 1;
  }
}