/* Hallmark · shape: Long Document · genre: atmospheric · theme: Kiln (deal 3/3, seed grupo-alertas-passagens-com-a25a·b75db943·2026-11-14·r0) · job: read · draw: 9954a5
 * hero: Banner · nav: masthead · footer: colophon block · imagery: none · signature: numbered clauses in one 68ch column beside a sticky clause index, set in the home page's serif and navy · kiln: insignia (brand spec 2026-11-14: navy ground, gold signal, Playfair Display)
 * axes: dark/high-contrast-serif/warm · posture: full-palette · contrast: pass · fold: pass · copy: verbatim · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S4 R5 V3 · weakest: P, a legal text argues nothing by nature; kept it plain and numbered so the reader can find the clause they came for instead of decorating it */
/* Hallmark · waive 78 · shape: Long Document · the terms and the privacy policy read clause by clause; a 52px head over every numbered clause would bury the legal text under its own titles */
/* Hallmark · dismissed 77 · the legal pages are one running text, a Long Document under its banner; splitting the clauses into more sections would only add seams, and the body already spans the clause index and the 68ch column */
@import url("./tokens.css");
@import url("./base.css");
@import url("./site.css");

/* ---------- Legal: banner ---------- */
.legal-hero { padding-block: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.legal-hero .hero__grid { row-gap: var(--space-lg); }
.legal-hero h1 { grid-column: 1 / -1; font-size: var(--text-display-s); line-height: 1.04; }
.legal-hero .hero__lead { grid-column: 1 / span 8; }

/* ---------- Legal: clause index and text ---------- */
.doc { padding-block: var(--space-2xl) var(--section-gap); }
.doc__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.toc { grid-column: 1 / span 3; position: sticky; top: var(--space-xl); }
.toc ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); white-space: nowrap; color: var(--color-ink-2); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.toc a:hover { color: var(--color-ink); text-decoration: underline; }
.toc a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.doc__body { grid-column: 5 / span 8; }
.doc__body > section + section { margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.doc__body h2 { max-width: 30ch; font-size: var(--text-2xl); line-height: 1.15; }
.doc__body p, .doc__body li { max-width: 68ch; font-size: var(--text-md); line-height: 1.7; color: var(--color-ink-2); }
.doc__body h2 + p, .doc__body h2 + ul { margin-top: var(--space-lg); }
.doc__body p + p, .doc__body p + ul, .doc__body ul + p { margin-top: var(--space-md); }
.doc__body ul { display: grid; gap: var(--space-xs); margin-block: 0; padding-left: var(--space-lg); }
.doc__body li::marker { color: var(--color-muted); }
.doc__body a { color: var(--color-ink); }
.doc__body strong { font-weight: 500; color: var(--color-ink); }

/* ---------- Legal under 60rem ---------- */
@media (max-width: 60rem) {
  .legal-hero { padding-block: var(--space-xl) var(--space-2xl); }
  .legal-hero .hero__lead, .toc, .doc__body { grid-column: 1 / -1; }
  .toc { position: static; }
  .doc { padding-top: var(--space-2xl); }
}