/* per-page polish: privacy
   Scope: privacy.html specific ,  .lay, .ph, .leg, .toc, .tldr, .lead
   NEVER generic selectors ,  all scoped to avoid collisions.
*/

/* ── Layout: top breathing room ── */
/* 2F: centre the content block in the viewport (proto .lay left ~176px
   of dead grid track on the right at 1280) by capping .lay to the
   used width so `margin:0 auto` truly centres it. */
.lay {
  padding-top: 64px !important;
}
@media (min-width: 981px) {
  .lay {
    max-width: 1024px !important;
    grid-template-columns: 220px minmax(0, 740px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }
}

/* ── Page header ── */
.ph .h1 {
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
}
.ph .meta {
  font-size: 11px !important;
  color: var(--ink-faint) !important;
  letter-spacing: .03em !important;
}

/* ── TOC: accent active state ── */
/* CANON sec 12.1  -  content-TOC active = paper bg + shadow-sm. */
.lay aside.toc a.on {
  color: var(--ink) !important;
  background: var(--paper) !important;
  box-shadow: var(--shadow-sm) !important;
  font-weight: 600 !important;
}
.lay aside.toc a:hover {
  color: var(--ink) !important;
}
.lay aside.toc .te {
  color: var(--ink-mute) !important;
  letter-spacing: .12em !important;
  font-weight: 500 !important;
}

/* TOC page switcher pills */
.lay aside.toc .ot a {
  font-size: 10.5px !important;
  color: var(--ink-mute) !important;
  transition: color .15s, background .15s, border-color .15s !important;
}
.lay aside.toc .ot a.cur {
  color: var(--accent) !important;
  border-color: var(--accent-line) !important;
  background: var(--accent-soft) !important;
}
.lay aside.toc .ot a:hover:not(.cur) {
  color: var(--ink) !important;
  background: var(--bg-2) !important;
}

/* ── TL;DR summary callout ── */
.tldr {
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 var(--r-lg) var(--r-lg) 0 !important;
  font-size: 14px !important;
  line-height: 1.62 !important;
}

/* ── Lead ── */
.lead {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--ink-soft) !important;
}

/* ── Legal body: generous line-height, measure ── */
/* 2F: widen the legal prose measure (62ch ~480px caused ragged
   short lines + ~50% dead space) to ~700px to fill the column. */
.leg p {
  font-size: 14.5px !important;
  line-height: 1.74 !important;
  max-width: 700px !important;
}
.leg li {
  font-size: 14.5px !important;
  line-height: 1.68 !important;
}
.leg li::before {
  background: color-mix(in srgb, var(--accent) 60%, var(--ink-faint)) !important;
}
/* CANON sec 10  -  h2 = 22 / 640 / -.02em. */
.leg h2 {
  font-size: 22px !important;
  font-weight: 640 !important;
  letter-spacing: -.02em !important;
  margin-top: 40px !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

/* ── Mobile ── */
@media (max-width: 980px) {
  .lay {
    padding-top: 40px !important;
  }
}