/* Legal pages — shared stylesheet for privacy-policy, terms-of-use, cookie-notice, product-policies.
   Mobile-first. Source mockups are 2-breakpoint (base + 1440px only) — no 834px or 1200px tier here,
   matching the frame count in the .dc.html sources. Layout rhythm follows tokens/layout.css +
   tokens/spacing.css; typography follows the token system's two-tier (mobile / desktop) contract. */

/* ---------- Hero ---------- */
.legal-hero {
  padding: var(--dl-space-4) var(--dl-gutter-mobile) var(--dl-space-2);
  display: flex; flex-direction: column; gap: var(--dl-space-1);
}
.legal-hero__eyebrow {
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--dl-text-accent); text-transform: uppercase;
}
.legal-hero__title {
  font-size: var(--dl-h1-size-mobile); font-weight: var(--dl-weight-semibold);
  line-height: var(--dl-h1-lh); letter-spacing: var(--dl-h1-tracking);
  max-width: 22ch; text-wrap: pretty;
}
.legal-hero__updated {
  font-family: var(--dl-font-mono); font-size: var(--dl-caption-size); color: var(--dl-text-secondary);
}
.legal-hero__updated .flag-required { font-size: var(--dl-caption-size); }

@media (min-width: 1440px) {
  .legal-hero { padding: var(--dl-space-6) var(--dl-gutter-desktop) var(--dl-space-1); gap: var(--dl-space-2); }
  .legal-hero__title { font-size: var(--dl-h1-size); max-width: 30ch; }
}

/* ---------- Layout: TOC + content ---------- */
.legal-layout {
  padding: var(--dl-space-3) var(--dl-gutter-mobile) var(--dl-space-6);
  display: flex; flex-direction: column; gap: var(--dl-space-3);
}
@media (min-width: 1440px) {
  .legal-layout {
    padding: var(--dl-space-4) var(--dl-gutter-desktop) var(--dl-space-7);
    display: grid; grid-template-columns: 260px 1fr; gap: var(--dl-space-6);
    align-items: start;
  }
}

/* Table of contents — desktop sticky sidebar */
.legal-toc {
  display: none;
  flex-direction: column; gap: 2px;
  position: sticky; top: var(--dl-space-3);
}
.legal-toc__label {
  font-family: var(--dl-font-mono); font-size: var(--dl-label-size); letter-spacing: var(--dl-label-tracking);
  color: var(--dl-text-secondary); text-transform: uppercase; margin-bottom: var(--dl-space-1);
}
.legal-toc__link {
  display: flex; align-items: center; min-height: 32px;
  font-size: var(--dl-legal-size); color: var(--dl-text-body);
  transition: color var(--dl-duration-fast) var(--dl-ease);
}
.legal-toc__link:hover { color: var(--dl-text-accent); }
@media (min-width: 1440px) {
  .legal-toc { display: flex; }
}

/* Table of contents — mobile disclosure */
.legal-toc-mobile {
  border: var(--dl-border-hairline) solid var(--dl-border-default); border-radius: var(--dl-radius-sm);
  padding: 0 var(--dl-space-2);
}
.legal-toc-mobile summary {
  font-size: 14px; font-weight: var(--dl-weight-medium); color: var(--dl-text-primary); cursor: pointer;
  min-height: var(--dl-target-min); display: flex; align-items: center;
}
.legal-toc-mobile__links { display: flex; flex-direction: column; padding-bottom: var(--dl-inline-gap-tight); }
.legal-toc-mobile__links a {
  display: flex; align-items: center; min-height: var(--dl-target-min);
  font-size: var(--dl-legal-size); color: var(--dl-text-body);
}
@media (min-width: 1440px) {
  .legal-toc-mobile { display: none; }
}

/* ---------- Section content ---------- */
.legal-content {
  display: flex; flex-direction: column; gap: var(--dl-space-3);
  max-width: var(--dl-text-measure);
}
@media (min-width: 1440px) {
  .legal-content { gap: var(--dl-space-4); }
}

.legal-section__title {
  margin: 0 0 10px;
  font-size: var(--dl-h2-size-mobile); font-weight: var(--dl-weight-semibold); line-height: var(--dl-h2-lh);
}
.legal-section__text {
  margin: 0;
  font-size: var(--dl-body-small-size-mobile); line-height: var(--dl-body-small-lh); color: var(--dl-text-body);
}
.legal-section__text a {
  color: var(--dl-text-primary); border-bottom: 1px solid currentColor;
  transition: color var(--dl-duration-fast) var(--dl-ease);
}
.legal-section__text a:hover { color: var(--dl-text-accent); }
@media (min-width: 1440px) {
  .legal-section__title { font-size: var(--dl-h2-size); }
  .legal-section__text { font-size: var(--dl-body-size); line-height: var(--dl-body-lh); }
}