/* ==========================================================================
   PAGES — LEGAL (Privacy Policy, Terms of Service)
   One stylesheet, both pages. Reading comes first: a narrow measure, clear
   numbered sections and a sticky contents rail that tracks your position.
   ========================================================================== */

.lg-hero { padding-bottom: clamp(3rem, 6vw, 5rem); }
.lg-hero .page-hero__title { max-width: 16ch; }
.lg-updated {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-small);
  color: var(--fg-on-dark);
}
.lg-updated .num { color: var(--tw-blue); }

.lg-grid {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* Contents rail */
.lg-toc { position: sticky; top: calc(var(--header-h, 70px) + 2rem); }
.lg-toc .label { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.lg-toc ol { margin-top: var(--space-4); display: grid; gap: 0.1rem; counter-reset: none; }
.lg-toc a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.4rem 0.5rem 0.4rem 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--fg-muted);
  border-left: 2px solid transparent;
  padding-left: 0.75rem;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.lg-toc a .num { color: inherit; opacity: 0.65; }
.lg-toc a:hover { color: var(--fg); }
.lg-toc a.is-active { color: var(--fg); border-left-color: var(--tw-blue); font-weight: 700; }
.lg-toc a.is-active .num { color: var(--accent-text); opacity: 1; }

/* Body */
.lg-prose { max-width: 40rem; }
.lg-sec { scroll-margin-top: calc(var(--header-h, 70px) + 2rem); }
/* .prose spaces its DIRECT children; these paragraphs sit inside <section>. */
.lg-sec > * + * { margin-top: 1.25em; }
.lg-sec > ul, .lg-sec > ol { margin-block: 1.25em; }
.lg-sec + .lg-sec { margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: clamp(2.5rem, 4vw, 3.5rem); border-top: 1px solid var(--line); }
.lg-prose h2 {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
}
.lg-prose h2 .num { font-size: 0.75rem; color: var(--accent-text); }
.lg-prose h2 + p { margin-top: 1em; }
.lg-prose ul li::before { background: var(--tw-orange); }

/* A line that carries more weight than the rest of the clause. */
.lg-lead-line { font-weight: 600; color: var(--fg) !important; }

/* Short lists set in two columns so a checklist doesn't run down the page. */
.lg-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .lg-cols { grid-template-columns: 1fr; } }

/* Helpful aside pointing at real site content. */
.lg-aside {
  padding: var(--space-5);
  border-left: 3px solid var(--tw-blue);
  background: var(--bg-alt);
  font-size: var(--fs-small);
}

.lg-contact {
  display: grid;
  gap: 0.35rem;
  margin-top: 1.25em;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  font-size: var(--fs-small);
  color: var(--fg-muted);
}
.lg-contact strong { font-family: var(--font-display); font-size: 1.0625rem; color: var(--fg); }
.lg-contact a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.lg-contact__flag { margin-top: var(--space-3); }

.lg-note {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

@media (max-width: 900px) {
  .lg-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .lg-toc { position: static; padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
  .lg-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-prose { max-width: none; }
}
@media (max-width: 560px) { .lg-toc ol { grid-template-columns: 1fr; } }