/* ── Long-form pages on the v2 chrome: the FAQ, Privacy, Children's Privacy
   and Terms (MAC-431). v2.css owns the bar and the footer; this file is only
   the reading column and the pieces a document has (summary, contents,
   sections, tables, notes, the contact block). Tokens come from v2.css, so
   nothing here sits on the 2.6:1 subtle token: the muted one is 5:1. The
   class names are the ones the legal pages have always carried. ── */

.doc { max-width: 760px; padding-top: clamp(3rem, 8vh, 5.5rem); padding-bottom: clamp(4rem, 10vh, 7rem); }
/* Links in the text are forest and underlined. Zero-specificity on the
   column, so the pill, the contents and a page's own link rules all win. */
:where(.doc) a:not(.pill) { color: var(--color-forest); text-decoration: underline; text-decoration-color: rgba(63,107,76,0.35); text-underline-offset: 3px; }
:where(.doc) a:not(.pill):hover { text-decoration-color: currentColor; }

/* Header: label, headline, the dates. */
.legal-header { margin-bottom: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--color-border); }
.legal-header .label { display: block; }
.legal-header h1 { font-family: var(--display); font-weight: 400; font-size: clamp(38px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.025em; margin: 0.6rem 0 1rem; text-wrap: balance; }
.legal-dates { font-size: 14px; color: var(--ink-soft); line-height: 1.7; margin: 0; }

/* The short version. */
.legal-summary { background: var(--cream-2); border-radius: 16px; padding: 1.75rem 1.85rem; margin-bottom: 3.5rem; }
.legal-summary h2 { font-family: var(--display); font-size: 22px; font-weight: 400; font-style: italic; color: var(--ink); margin: 0 0 1rem; }
.legal-summary ul { margin: 0; padding-left: 1.1rem; }
.legal-summary li { font-size: 15.5px; color: var(--ink-soft); line-height: 1.75; margin-bottom: 0.6rem; }
.legal-summary li:last-child { margin-bottom: 0; }
.legal-summary strong { font-weight: 500; color: var(--ink); }

/* Contents. */
.legal-toc { margin-bottom: 4rem; }
.legal-toc ol { margin: 0; padding-left: 1.4rem; columns: 2; column-gap: 2rem; }
.legal-toc li { font-size: 15px; color: var(--ink-soft); line-height: 1.6; break-inside: avoid; }
.legal-toc a { color: inherit; text-decoration: none; display: inline-block; padding: 0.45rem 0; }
.legal-toc a:hover { color: var(--ink); }

/* Sections. The sticky bar's offset is html { scroll-padding-top } in v2.css. */
.doc section { margin-bottom: 3.25rem; }
.doc h2 { font-family: var(--display); font-size: clamp(24px, 2.4vw, 30px); font-weight: 400; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 1.1rem; }
.doc h3 { font-family: var(--display); font-size: 20px; font-weight: 400; font-style: italic; color: var(--ink); margin: 2rem 0 0.7rem; }
.doc p { font-size: 16px; color: var(--ink); line-height: 1.75; margin: 0 0 1.1rem; }
.doc p:last-child { margin-bottom: 0; }
.doc ul, .doc ol.legal-list { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.doc li { font-size: 16px; color: var(--ink); line-height: 1.75; margin-bottom: 0.55rem; }
.doc strong { font-weight: 500; }

/* Data tables (the subprocessor list). */
.legal-table-wrap { overflow-x: auto; margin: 0 0 1.5rem; -webkit-overflow-scrolling: touch; }
.legal-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.legal-table th { font-family: var(--text); font-size: 13.5px; color: var(--ink-soft); text-align: left; font-weight: 500; padding: 0 1rem 0.7rem 0; border-bottom: 1px solid var(--color-border); }
.legal-table td { font-size: 15px; color: var(--ink); line-height: 1.6; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.legal-table td:last-child, .legal-table th:last-child { padding-right: 0; }
.legal-table td strong { font-weight: 500; }

/* A note in the margin. */
.legal-note { border-left: 2px solid var(--color-walnut); padding: 0.2rem 0 0.2rem 1.25rem; margin: 0 0 1.5rem; }
.legal-note p { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 0.7rem; }
.legal-note p:last-child { margin-bottom: 0; }

/* Contact. */
.legal-contact { background: var(--cream-2); border-radius: 16px; padding: 1.75rem 1.85rem; margin-top: 1rem; }
.legal-contact p { margin-bottom: 0.5rem; }
.legal-contact p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .legal-toc ol { columns: 1; }
  .legal-summary, .legal-contact { padding: 1.35rem; }
}