/* ============================================================
   Legal pages.

   Loaded after styles.css, which supplies the palette, typography,
   nav, footer and card treatments. Nothing visual is redefined here.
   This file only sets the reading column and adds prose styling.
   ============================================================ */

/* A document reads at a narrower measure than a marketing page, so the
   column is capped inside the shared wrapper rather than replacing it. */
main.wrap { max-width: 760px; padding-top: 64px; padding-bottom: 96px; }

h1 {
  font-weight: 600;
  font-size: clamp(34px, 5vw, 48px); line-height: 1.08;
  letter-spacing: -.038em; margin: 0 0 20px;
}

/* Reuses the site's .tag chip, muted: a timestamp should not read as
   loudly as a "Private beta" badge. */
.tag.date {
  background: var(--sunk); color: var(--mu);
  border: 1px solid var(--bd); margin-bottom: var(--s6);
}

h2 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin: 48px 0 14px; }
h3 { font-size: 16px; font-weight: 600; margin: 28px 0 10px; }

main p { margin: 0 0 16px; color: var(--mu); }
main ul, main ol { margin: 0 0 18px; padding-left: 22px; color: var(--mu); }
main li { margin-bottom: 8px; }
main strong { color: var(--tx); font-weight: 600; }
main a { color: var(--ac); text-decoration: none; border-bottom: 1px solid var(--bd-s); }
main a:hover { border-color: var(--ac); }

/* Same surface, border and shadow as the cards on the landing page. */
table {
  width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14px;
  background: var(--pnl); border: 1px solid var(--bd);
  border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sh-s);
}
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--bd); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-weight: 600; color: var(--tx); background: var(--sunk); font-size: 13px; }
td { color: var(--mu); line-height: 1.6; }

.note {
  background: var(--ac-w); border-left: 3px solid var(--ac);
  padding: 16px 20px; border-radius: 0 var(--r-m) var(--r-m) 0; margin: 0 0 22px;
}
.note p:last-child { margin-bottom: 0; }

.contact {
  background: var(--pnl); border: 1px solid var(--bd);
  border-radius: var(--r-m); padding: 20px 22px; margin: 32px 0 0;
  box-shadow: var(--sh-s);
}
.contact p { margin-bottom: 6px; }
.contact p:last-child { margin-bottom: 0; }

/* The wrapper scrolls, not the table. Overriding display on a table strips
   its row and cell roles, so a screen reader loses the column headings. */
.table-scroll { overflow-x: auto; margin: 0 0 22px; border-radius: var(--r-m); }
.table-scroll table { margin: 0; }
.table-scroll:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

@media (max-width: 767.98px) {
  main.wrap { padding-top: 40px; }
  th, td { min-width: 140px; }
}