/* Legal document pages (privacy policy, terms).
   Long-form prose rather than marketing layout, so the priorities are
   different from the rest of the site: a readable measure, headings you
   can scan, and tables that stay legible on a phone. */

.legal {
  background: var(--neutral-10);
}

/* ---------------- Header ---------------- */

.legal__header {
  max-width: 720px;
  margin: 0 0 var(--space-block) 0;
}

.legal__eyebrow {
  color: var(--neutral-05);
  margin: 0 0 var(--space-tight) 0;
}

/* .text-h3 (44px) rather than the .text-h2 the pricing page uses for its
   h1 — a document title doesn't need to shout the way a sales page does,
   and 64px against body prose reads as a mismatch. */
.legal__title {
  margin: 0 0 var(--space-row) 0;
}

.legal__updated {
  margin: 0;
  color: var(--neutral-05);
}

/* ---------------- Layout ---------------- */

.legal__inner {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a bare 1fr track is min-content sized, so the
     tables' min-width would push the track wider than the viewport instead
     of letting them scroll inside their own wrapper. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-block);
  align-items: start;
}
@media (min-width: 1024px) {
  .legal__inner {
    /* Fixed sidebar rather than a fraction: the contents list is a fixed
       amount of text, and letting it grow with the viewport would only
       stretch the links, not help anyone read them. */
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-wide);
  }
}

/* ---------------- Contents ---------------- */

.legal__toc {
  border-left: 2px solid var(--accent-display);
  padding-left: var(--space-gap);
}
@media (min-width: 1024px) {
  .legal__toc {
    position: sticky;
    top: calc(var(--header-height) + var(--space-gap));
  }
}

.legal__toc-heading {
  margin: 0 0 var(--space-row) 0;
  color: var(--neutral-05);
}

.legal__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-tight);
}

.legal__toc-list a {
  color: var(--neutral-04);
  text-decoration: none;
  transition: color var(--motion-state) ease;
}
.legal__toc-list a:hover {
  color: var(--main);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal__toc-list a:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: 2px;
}

/* ---------------- Prose ---------------- */

/* Capped in ch, not px: the comfortable measure for reading is a count of
   characters, so this holds regardless of the font size around it.
   min-width:0 is the load-bearing half — as a grid item this defaults to
   min-width:auto, which means it can't shrink below its widest content.
   The tables' min-width then leaked out and widened the whole page on a
   phone instead of scrolling inside .legal__table-wrap. */
.legal__body {
  max-width: 72ch;
  min-width: 0;
}

.legal__section + .legal__section {
  margin-top: var(--space-block);
}

/* scroll-margin so an anchored heading isn't hidden behind the sticky
   header when you jump to it from the contents list. */
.legal__section-heading {
  margin: 0 0 var(--space-gap) 0;
  scroll-margin-top: calc(var(--header-height) + var(--space-gap));
}

/* Sub-heading within a numbered section — the cookie policy groups its
   tables under Strictly necessary / Analytics / Advertising. Smaller than
   the section heading so the numbered sections still read as the top level
   of the document. */
.legal__subheading {
  margin: var(--space-loose) 0 var(--space-row) 0;
  color: var(--neutral-02);
  scroll-margin-top: calc(var(--header-height) + var(--space-gap));
}
.legal__subheading:first-child {
  margin-top: 0;
}

/* Cookie names and other literal identifiers. Monospace so an underscore
   or asterisk in a name like __stripe_mid or _ga_* is unambiguous. */
.legal__body code {
  font-family: var(--font-figure);
  font-size: 0.9em;
  background: var(--neutral-09);
  padding: 1px 5px;
  word-break: break-word;
}

.legal__body p {
  margin: 0 0 var(--space-gap) 0;
  color: var(--neutral-04);
}
.legal__body p:last-child {
  margin-bottom: 0;
}

.legal__body strong {
  font-weight: 600;
  color: var(--neutral-02);
}

.legal__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}
.legal__body a:hover {
  color: var(--accent-hover);
}

.legal__list {
  margin: 0 0 var(--space-gap) 0;
  padding-left: var(--space-gap);
  color: var(--neutral-04);
  display: grid;
  gap: var(--space-tight);
}

/* ---------------- Key/value details ---------------- */

/* A definition list, not a table: the company details are label/value
   pairs with no column headers, which is what <dl> is for. */
.legal__details {
  margin: 0 0 var(--space-gap) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-tight);
}
@media (min-width: 600px) {
  .legal__details {
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
    gap: 0;
  }
}

.legal__details dt {
  color: var(--neutral-05);
  padding: var(--space-tight) 0 0 0;
}
.legal__details dd {
  margin: 0;
  color: var(--neutral-02);
  padding: 0 0 var(--space-tight) 0;
  border-bottom: 1px solid var(--neutral-06);
}
@media (min-width: 600px) {
  .legal__details dt {
    padding: var(--space-tight) var(--space-row) var(--space-tight) 0;
    border-bottom: 1px solid var(--neutral-06);
  }
  .legal__details dd {
    padding: var(--space-tight) 0;
  }
}

/* ---------------- Tables ---------------- */

/* The wrapper scrolls, not the page: a two-column table of retention
   periods still needs a minimum width to stay readable, and without this
   it would widen the whole document on a phone. */
.legal__table-wrap {
  margin: 0 0 var(--space-gap) 0;
  overflow-x: auto;
}

.legal__table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  text-align: left;
}
/* Four columns (cookie / set by / purpose / duration) need more room than
   the two-column tables before they start wrapping every cell to shreds.
   The wrapper still scrolls, so this only affects how early that starts. */
.legal__table--wide {
  min-width: 620px;
}

.legal__table th {
  color: var(--neutral-02);
  font-weight: 600;
  padding: var(--space-tight) var(--space-row) var(--space-tight) 0;
  border-bottom: 1px solid var(--neutral-08);
  vertical-align: top;
}
.legal__table td {
  color: var(--neutral-04);
  padding: var(--space-row) var(--space-row) var(--space-row) 0;
  border-bottom: 1px solid var(--neutral-06);
  vertical-align: top;
}
.legal__table th:last-child,
.legal__table td:last-child {
  padding-right: 0;
}

/* ---------------- Callout ---------------- */

/* Used for the "what we can and can't see" points in the network section
   — the part of this policy people actually want to find. Same accent
   rule as the How It Works callout rather than another bordered box. */
.legal__callout {
  margin: 0 0 var(--space-gap) 0;
  padding: var(--space-gap);
  background: var(--neutral-09);
  border-left: 2px solid var(--accent-display);
}
.legal__callout p:last-child {
  margin-bottom: 0;
}