/* legal.css — the Read surface: privacy.html and terms.html.
Loaded AFTER styles.css. Every rule is scoped to .legal-page and cannot reach
index, start, apply or thank-you. Tokens are V2's; no new palette. */
/* ---------- header ----------
Own rules, not application.css's. QA caught the original mistake: privacy.html and terms.html
reused `.application-header` markup without loading the stylesheet that styles it, so the brand
and the back link stacked flush against the left edge. A Read surface should not pull in the
questionnaire's stylesheet for one bar. */
.legal-header{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--white);border-bottom:1px solid var(--line);padding-inline:max(24px,calc((100% - var(--max))/2))}
.legal-header .brand{display:inline-flex;align-items:center;gap:12px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--navy)}
.legal-header .brand-mark{--mark:26px}
.legal-header .legal-back{display:inline-flex;align-items:center;gap:7px;font-size:15px;color:var(--muted);white-space:nowrap;transition:color .18s var(--ease)}
.legal-header .legal-back:hover{color:var(--navy)}
@media (prefers-reduced-motion:reduce){.legal-header .legal-back{transition:none}}
@media (max-width:700px){
.legal-header{height:62px;padding-inline:20px;gap:12px}
.legal-header .brand{font-size:15px}
.legal-header .brand-mark{--mark:22px}
.legal-header .legal-back span{display:none}
}
/* ---------- shell ---------- */
.legal-page{background:var(--white)}
.legal-page .legal-main{padding-inline:max(24px,calc((100% - var(--max))/2))}
/* Masthead: the navy band the rest of the site opens on, at document scale. */
.legal-masthead{background:linear-gradient(160deg,var(--navy-top),var(--navy));color:var(--white);padding:72px max(24px,calc((100% - var(--max))/2)) 64px}
.legal-masthead .legal-eyebrow{display:block;font-size:15px;color:#a8bdf0;margin-bottom:18px}
.legal-masthead h1{font-size:46px;line-height:1.22;letter-spacing:-.022em;max-width:16ch;margin-bottom:22px}
.legal-masthead p{color:#c3d0ea;max-width:600px;font-size:17px}
.legal-page .legal-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:32px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.legal-page .legal-meta div{min-width:0}
.legal-page .legal-meta dt{font-size:13px;color:#8fa6dd;margin-bottom:4px}
.legal-page .legal-meta dd{margin:0;font-size:15px;color:var(--white)}
/* ---------- two-column document ---------- */
.legal-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:64px;align-items:start;padding-block:56px 96px}
.legal-toc{position:sticky;top:32px;font-size:15px}
.legal-toc h2{font-size:13px;color:var(--muted);letter-spacing:.02em;margin-bottom:14px}
.legal-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.legal-toc li{margin:0}
.legal-toc a{display:block;overflow-wrap:break-word;padding:7px 0 7px 16px;margin-left:-1px;border-left:1px solid transparent;color:var(--muted);line-height:1.35;transition:color .18s var(--ease),border-color .18s var(--ease)}
.legal-toc a:hover{color:var(--navy)}
.legal-toc a[aria-current="true"]{color:var(--navy);border-left-color:var(--button-blue)}
@media (prefers-reduced-motion:reduce){.legal-toc a{transition:none}}
/* Two-tier measure. `ch` lies here: Inter Tight's average prose advance is 7.45px at 17px,
not the 10.9px the `0` glyph implies, so max-width:70ch rendered a 102-character line.
Measured, then set in px: 560px = ~75 characters. Tables and the layout column stay wider,
because a four-column table squeezed to the prose measure is worse than a wider table. */
.legal-doc{max-width:820px;min-width:0}
.legal-doc p,.legal-doc ul,.legal-doc ol,.legal-doc h2,.legal-doc h3{max-width:560px}
.legal-page .legal-note{max-width:610px}
.legal-doc>section{scroll-margin-top:32px}
.legal-doc>section+section{margin-top:56px;padding-top:52px;border-top:1px solid var(--line)}
.legal-doc h2{font-size:27px;line-height:1.32;letter-spacing:-.016em;margin-bottom:20px}
.legal-doc h3{font-size:19px;line-height:1.4;letter-spacing:-.008em;margin:36px 0 12px}
.legal-doc p{font-size:17px;line-height:1.62;margin-bottom:16px}
.legal-doc p:last-child,.legal-doc ul:last-child,.legal-doc ol:last-child{margin-bottom:0}
.legal-doc strong{font-weight:600;color:var(--navy)}
.legal-doc a:not(.button){color:var(--blue-dark);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(33,100,208,.4)}
.legal-doc a:not(.button):hover{text-decoration-color:currentColor}
.legal-doc ul,.legal-doc ol{margin:0 0 16px;padding-left:22px;color:var(--muted);font-size:17px;line-height:1.62}
.legal-doc li{margin-bottom:9px}
.legal-doc li::marker{color:var(--edge)}
.legal-doc li>strong{color:var(--navy)}
/* Numbered clauses in the terms: the number is the citation, so it is content. */
.legal-doc ol.clauses{list-style:none;padding-left:0;counter-reset:clause}
.legal-doc ol.clauses>li{counter-increment:clause;position:relative;padding-left:46px;margin-bottom:18px}
.legal-doc ol.clauses>li::before{content:counter(clause,decimal);position:absolute;left:0;top:1px;width:34px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--edge)}
/* ---------- tables ---------- */
.legal-table-wrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:var(--radius)}
.legal-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.5}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid var(--line)}
.legal-table thead th{background:var(--warm);font-weight:600;color:var(--navy);font-size:13.5px;white-space:nowrap}
.legal-table tbody th{font-weight:600;color:var(--navy);width:1%;white-space:nowrap}
.legal-table td{color:var(--muted)}
.legal-table tbody tr:last-child th,.legal-table tbody tr:last-child td{border-bottom:0}
/* ---------- callout: one shape, used for the two things a reader must not miss ---------- */
.legal-page .legal-note{background:var(--warm);border-radius:var(--radius);padding:22px 24px;margin:0 0 20px}
.legal-page .legal-note p{font-size:16px;margin-bottom:10px}
.legal-page .legal-note p:last-child{margin-bottom:0}
.legal-page .legal-note h3{margin-top:0}
/* ---------- controls inside the document ---------- */
.legal-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.legal-ghost{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--line);border-radius:var(--radius);font-size:15px;font-weight:500;background:var(--white);color:var(--navy);transition:border-color .18s var(--ease),background .18s var(--ease)}
.legal-ghost:hover{border-color:var(--edge);background:var(--warm)}
@media (prefers-reduced-motion:reduce){.legal-ghost{transition:none}}
.legal-status{font-size:15px;color:var(--muted);margin-top:12px}
.legal-status[data-state="on"]{color:#1f7a4d}
.legal-status[data-state="off"]{color:var(--navy)}
/* ---------- responsive ---------- */
@media (max-width:1000px){
.legal-layout{grid-template-columns:minmax(0,1fr);gap:0;padding-block:40px 72px}
.legal-toc{position:static;margin-bottom:44px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.legal-toc ol{border-left:0;columns:2;column-gap:28px}
.legal-toc a{padding-left:0;border-left:0}
.legal-toc a[aria-current="true"]{border-left:0;font-weight:600}
}
@media (max-width:700px){
.legal-masthead{padding-top:52px;padding-bottom:46px}
.legal-masthead h1{font-size:34px;max-width:none}
.legal-masthead p{font-size:16px}
.legal-page .legal-meta{gap:16px;flex-direction:column}
.legal-doc h2{font-size:23px}
.legal-doc p,.legal-doc ul,.legal-doc ol{font-size:16px}
.legal-toc ol{columns:1}
.legal-doc>section+section{margin-top:44px;padding-top:40px}
}