/* Privacy Policy and Terms of Service redesign (2026-09). Shared by
   privacy.html and terms.html, scoped to body.legal-page. Tokens and the
   self-hosted Fraunces come from styles.css, shared with the homepage, the
   blog, the FAQ and the Security page. */
.legal-page { --lg-hair: #E2D9C8; --lg-body: #2A2F3D; --lg-header: var(--header-h); }
/* Focus rings in the page body only; the shared header and footer keep theirs. */
.legal-page .lg-wrap :focus-visible { outline: 2px solid var(--gold-text-strong); outline-offset: 2px; }

.legal-page .lg-wrap { max-width: calc(1200px + 48px); margin: 0 auto; padding: 0 24px 120px; }

/* Hero and body share one grid: a 260px column, a 96px gap, then the text
   column of up to 680px. The hero sits in the text column. */
.legal-page .lg-hero,
.legal-page .lg-body { display: grid; grid-template-columns: 260px minmax(0, 680px); column-gap: 96px; }
.legal-page .lg-hero { padding-top: 88px; }
.legal-page .lg-hero__inner { grid-column: 2; min-width: 0; }
.legal-page .lg-body { align-items: start; margin-top: 56px; }

.legal-page .lg-eyebrow { margin: 0 0 20px; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--gold-text); }
.legal-page .lg-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 1.04; letter-spacing: -1.6px; color: var(--navy); }
.legal-page .lg-meta { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.legal-page .lg-note { display: flex; align-items: flex-start; gap: 12px; margin: 24px 0 0; padding: 16px 20px; border-radius: 16px; background: var(--cream-deep); font-size: 16px; line-height: 1.6; color: var(--lg-body); }
/* Several dated notes stack as one group, newest first. */
.legal-page .lg-note + .lg-note { margin-top: 8px; }
.legal-page .lg-note__dot { flex: none; width: 8px; height: 8px; margin-top: calc((1.6em - 8px) / 2); border-radius: 50%; background: var(--gold); }

/* The section numeral. Part of the heading's own text ("1."), only styled.
   Not italic: the self-hosted Fraunces italic "1" is a bare slanted stroke, so
   "11." read as "II." (the subset has no lnum/alternate figures to switch to).
   Upright Fraunces has a flagged, footed "1" at heading size; the small
   contents lists use the sans, where even that is too thin to tell apart. */
.legal-page .lg-num { font-family: var(--font-display); font-style: normal; font-weight: 400; color: var(--gold-text); }
.legal-page .lg-toc .lg-num,
.legal-page .lg-toc-phone .lg-num { font-family: var(--font-stack); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Table of contents, desktop: sticky beside the text, scrolls inside itself
   when it's taller than the screen. */
.legal-page .lg-toc { position: sticky; top: calc(var(--lg-header) + 24px); max-height: calc(100vh - var(--lg-header) - 48px); overflow-y: auto; overscroll-behavior: contain; }
.legal-page .lg-toc__title { margin: 0 0 14px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-text); }
.legal-page .lg-toc ol,
.legal-page .lg-toc-phone ol { margin: 0; padding: 0; list-style: none; }
.legal-page .lg-toc a { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; align-content: center; min-height: 36px; padding: 6px 0 6px 14px; border-left: 2px solid var(--rule); font-size: 14px; line-height: 1.35; color: var(--text-muted); text-decoration: none; }
.legal-page .lg-toc a[aria-current="true"] { border-left-color: var(--gold); font-weight: 600; color: var(--navy); }
/* Inside the scrolling list an outer ring would be clipped. */
.legal-page .lg-wrap .lg-toc a:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .legal-page .lg-toc a:hover { color: var(--navy); } }

/* Table of contents, phone and tablet: a closed <details>. */
.legal-page .lg-toc-phone { display: none; }
.legal-page .lg-toc-phone details { border-radius: 16px; background: var(--cream-deep); }
.legal-page .lg-toc-phone summary { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 12px 20px; border-radius: 16px; font-size: 15px; line-height: 1.4; color: var(--navy); cursor: pointer; list-style: none; }
.legal-page .lg-toc-phone summary::-webkit-details-marker { display: none; }
.legal-page .lg-toc-phone__label { font-weight: 600; }
.legal-page .lg-toc-phone__count { color: var(--text-muted); }
.legal-page .lg-toc-phone__chevron { flex: none; width: 9px; height: 9px; margin: -4px 4px 0 auto; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); }
.legal-page .lg-toc-phone details[open] .lg-toc-phone__chevron { margin-top: 4px; transform: rotate(-135deg); }
.legal-page .lg-toc-phone ol { padding: 0 20px 6px; }
.legal-page .lg-toc-phone li { border-top: 1px solid var(--rule); }
.legal-page .lg-toc-phone a { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; align-content: center; min-height: 44px; padding: 10px 0; font-size: 15px; line-height: 1.35; color: var(--text-muted); text-decoration: none; }
/* --gold-text is under 4.5:1 on cream-deep; the darker gold is 5.1:1. */
.legal-page .lg-toc-phone .lg-num { color: var(--gold-text-strong); }

/* Sections */
.legal-page .lg-section { padding-top: 36px; border-top: 1px solid var(--lg-hair); overflow-wrap: break-word; }
.legal-page .lg-section + .lg-section { margin-top: 36px; }
.legal-page .lg-section h2 { margin: 0 0 16px; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: -0.3px; color: var(--navy); scroll-margin-top: calc(var(--header-h) + 24px); text-wrap: balance; }
.legal-page .lg-section h3 { margin: 28px 0 10px; font-family: var(--font-stack); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--navy); }
.legal-page .lg-section p,
.legal-page .lg-section li { font-size: 17px; line-height: 1.7; color: var(--lg-body); text-wrap: pretty; }
.legal-page .lg-section p { margin: 0 0 16px; }
.legal-page .lg-section ul { margin: 0 0 16px; padding-left: 1.3em; }
.legal-page .lg-section > :last-child { margin-bottom: 0; }
.legal-page .lg-section li + li { margin-top: 8px; }
.legal-page .lg-section li::marker { color: var(--gold-text); }
.legal-page .lg-section strong { font-weight: 600; color: var(--navy); }
.legal-page .lg-section code { padding: 1px 5px; border-radius: 4px; background: var(--cream-deep); font-family: var(--font-mono); font-size: 0.88em; color: var(--navy); }
.legal-page .lg-section a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-page .lg-section a:hover { color: var(--navy); }

/* The contact address stands on its own line, so it gets a full-size tap
   target without moving anything. Links inside sentences stay inline. */
.legal-page .lg-section .lg-contact a { display: inline-block; padding: 13px 0; margin: -13px 0; }

/* End links. No navy CTA box on the legal pages, by design. */
.legal-page .lg-end { display: flex; flex-wrap: wrap; gap: 0 32px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule); }
.legal-page .lg-end a { display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-page .lg-end a:hover { color: var(--navy); }

@media (max-width: 1023px) {
  .legal-page .lg-hero,
  .legal-page .lg-body { grid-template-columns: minmax(0, 680px); }
  .legal-page .lg-hero { padding-top: 64px; }
  .legal-page .lg-hero__inner { grid-column: 1; }
  .legal-page .lg-body { row-gap: 32px; margin-top: 32px; }
  .legal-page .lg-toc { display: none; }
  .legal-page .lg-toc-phone { display: block; }
}

@media (max-width: 480px) {
  .legal-page .lg-wrap { padding: 0 16px 64px; }
  .legal-page .lg-hero { padding-top: 40px; }
  .legal-page .lg-eyebrow { margin-bottom: 14px; }
  .legal-page .lg-title { font-size: 40px; letter-spacing: -1px; }
  .legal-page .lg-meta { margin-top: 12px; font-size: 14px; }
  .legal-page .lg-note { margin-top: 20px; font-size: 15px; }
  .legal-page .lg-body { margin-top: 24px; }
  .legal-page .lg-section { padding-top: 28px; }
  .legal-page .lg-section + .lg-section { margin-top: 28px; }
  .legal-page .lg-section h2 { font-size: 23px; letter-spacing: -0.2px; }
  .legal-page .lg-section p,
  .legal-page .lg-section li { font-size: 16px; }
  .legal-page .lg-end { flex-direction: column; margin-top: 40px; padding-top: 12px; }
  .legal-page .lg-end a { align-self: flex-start; }
}