/* ═══════════════════════════════════════════════════════════════
   Legal pages (DS) — /privacy-policy, /terms, /refund-policy,
   /cookie-policy. One stylesheet, one body
   (marketing/legal/_legal_page.html) driven by the doc dict each entry
   template supplies. Replaces the pre-DS legal.css (deleted).

   A legal document is a reading surface, so the type is set for long-form
   prose (65–72ch measures, generous leading) rather than the marketing
   display scale. Everything comes from theme.css tokens.
   ═══════════════════════════════════════════════════════════════ */

/* 124px top, matching the other migrated pages (pricing/examples): the DS
   navbar is FIXED and there is no body-level offset any more (the legacy
   80px was deleted at the source in marketing.css, stage 5), so a migrated
   page carries its own clearance from the fixed navbar. The pre-DS value (a
   48-80px clamp, sized
   for the old in-flow navbar) left 4px between the navbar's bottom edge and
   the eyebrow. */
.lg {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 124px 20px clamp(3rem, 5vw, 4.5rem);
  color: var(--foreground);
}

@media (max-width: 768px) {
  .lg { padding-top: 108px; }
}

/* ── Header ─────────────────────────────────────────────────────── */

.lg__header {
  max-width: 62ch;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.25rem);
}

.lg__title {
  font-family: var(--font-sans);
  font-size: clamp(30px, 4.2vw, 40px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--foreground);
  margin: 10px 0 0;
}

.lg__intro {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: var(--body-foreground);
  margin: 14px 0 0;
}

/* Last updated / Entity — a definition list, so it stays a <dl>. */
.lg__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 14px 0 0;
  margin: 22px 0 0;
  border-top: 1px solid var(--border);
}

.lg__meta-row {
  display: grid;
  grid-template-columns: minmax(6rem, 8.5rem) 1fr;
  align-items: baseline;
}

.lg__meta-value {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--body-foreground);
  margin: 0;
}

/* ── Body: sticky TOC + content ─────────────────────────────────── */

.lg__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

/* Hidden below 960px — a 13rem rail plus a 72ch measure does not fit, and
   the sections are short enough to scroll. */
.lg__toc { display: none; }

.lg__toc-heading { margin: 0 0 8px; }

.lg__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: lg-toc;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lg__toc-link {
  display: block;
  padding: 5px 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.15s ease;
}
.lg__toc-link:hover,
.lg__toc-link:focus-visible { color: var(--foreground); }

.lg__content {
  max-width: 72ch;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.75vw, 2rem);
}

.lg__section {
  scroll-margin-top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lg__section:not(:first-of-type) {
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--border-subtle);
}

.lg__section-title {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--foreground);
  margin: 0;
}

.lg__subheading {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin: 8px 0 0;
}

.lg__p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.72;
  letter-spacing: -0.01em;
  color: var(--body-foreground);
  margin: 0;
}

/* ── Lists — custom markers so the marker colour is a token ─────── */

.lg__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  counter-reset: lg-item;
}

.lg__item {
  position: relative;
  padding-left: 24px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--body-foreground);
}

.lg__list:not(.lg__list--ordered) > .lg__item::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted-foreground);
}

.lg__list--ordered > .lg__item {
  counter-increment: lg-item;
  padding-left: 30px;
}

.lg__list--ordered > .lg__item::before {
  content: counter(lg-item) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}

.lg__term { color: var(--foreground); font-weight: 600; }

/* ── Note aside ─────────────────────────────────────────────────── */

.lg__note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--muted);
  padding: 13px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--body-foreground);
}

/* ── Tables ─────────────────────────────────────────────────────
   Rendered by the DS table() macro; this only sets the density a legal
   table needs. `.lg__table` is the macro's WRAPPER (its `cls`), so the
   cell rules reach through it — (0,2,1) beats the component's
   `:where()`-neutralised (0,1,1) base. */

.lg__table .table th,
.lg__table .table td {
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  vertical-align: top;
  white-space: normal;
}

.lg__table .table td { color: var(--body-foreground); }

.lg__table caption {
  caption-side: top;
  padding: 10px 14px 0;
  font-family: var(--font-sans);
  font-size: 12px;
  text-align: left;
  color: var(--muted-foreground);
}

/* Rule 6's caveat: the pre-DS stylesheet gave these tables
   `min-width: 540px` BELOW 640px, so an inner scroller could not save them —
   mobile Chrome counts the full box into the root scroll area and the whole
   page panned sideways. A phone gets cells that genuinely fit instead. */
@media (max-width: 640px) {
  .lg__table .table th,
  .lg__table .table td {
    padding: 8px 10px;
    font-size: 12.5px;
  }
}

/* ── Contact block ──────────────────────────────────────────────── */

.lg__contact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body-foreground);
  margin-top: 4px;
}

.lg__contact a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  width: fit-content;
}
.lg__contact a:hover { color: var(--foreground); }

/* ── Desktop: the TOC rail appears ──────────────────────────────── */

@media (min-width: 960px) {
  .lg__body {
    grid-template-columns: 13rem minmax(0, 1fr);
    align-items: start;
  }

  .lg__toc {
    display: block;
    position: sticky;
    top: 6rem;
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
  }
}

/* ── Phone: the meta rows stack, tap targets grow ───────────────── */

@media (max-width: 640px) {
  .lg__meta-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Keyed on the pointer, not width (see ds.css): the TOC rail only renders
   above 960px, which a touch tablet reaches. */
@media (any-pointer: coarse) {
  .lg__toc-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .lg__contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}