/* ============================================================================
   Northwest Auto Broker — legal pages (privacy, terms)
   Shared by privacy.html and terms.html so the two can never drift apart.
   Long-form prose layout: sticky contents rail on desktop, single column on
   phones. Deliberately quieter than the sales pages — no cards, no hover lift.
   ========================================================================== */

.legal{padding:clamp(38px,5vw,64px) 0 clamp(56px,7vw,90px)}
.legal .wrap{display:grid;grid-template-columns:222px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;max-width:1120px}

/* contents rail */
.toc{position:sticky;top:96px;font-size:13px}
.toc h2{font-size:10.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:1px}
.toc a{display:block;padding:6px 10px;border-radius:8px;color:var(--mut);line-height:1.4;text-decoration:none;counter-increment:toc;transition:.18s var(--ease)}
.toc a::before{content:counter(toc) ". ";color:var(--faint)}
.toc a:hover{background:var(--bg2);color:var(--ink)}
.toc a.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:inset 2px 0 0 var(--gold)}

/* the summary box at the top */
.tldr{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:16px;padding:24px 28px;margin-bottom:clamp(30px,4vw,44px)}
.tldr h2{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.3vw,24px)}
.tldr ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.tldr li{font-size:14px;color:var(--mut);line-height:1.65;display:flex;gap:10px}
.tldr li::before{content:"—";color:var(--gold);flex:none}
.tldr .caveat{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint);line-height:1.65}

/* prose */
.doc{counter-reset:sec}
.doc section{padding-top:clamp(26px,3.4vw,40px);scroll-margin-top:92px}
.doc section+section{border-top:1px solid var(--line);margin-top:clamp(26px,3.4vw,40px)}
.doc section h2{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.7vw,28px);line-height:1.3;counter-increment:sec}
.doc section h2::before{content:counter(sec);display:inline-block;min-width:34px;font-family:var(--sans);font-size:12px;font-weight:900;color:var(--gold);vertical-align:middle}
.doc section h3{font-size:15px;font-weight:800;margin-top:24px}
.doc section p{color:var(--mut);font-size:14.5px;line-height:1.8;margin-top:12px;max-width:70ch}
.doc section p b,.doc section li b{color:var(--ink)}
.doc section ul,.doc section ol{margin-top:12px;padding-left:0;list-style:none;max-width:70ch;display:flex;flex-direction:column;gap:9px}
.doc section li{color:var(--mut);font-size:14.5px;line-height:1.7;display:flex;gap:11px}
.doc section ul>li::before{content:"·";color:var(--gold);font-weight:900;flex:none;width:8px}
.doc section ol{counter-reset:li}
.doc section ol>li{counter-increment:li}
.doc section ol>li::before{content:counter(li) ".";color:var(--gold);font-weight:800;flex:none;width:18px;font-size:13px}
.doc a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold2);text-underline-offset:3px}
.doc a:hover{color:var(--gold)}

/* call-out inside prose, for the bits people actually need to act on */
.note{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-top:18px;max-width:70ch}
/* Scoped to .doc so it outranks `.doc section p` — same specificity, later in
   the file. Bare `.note p` loses to it and the call-out reads as body copy. */
.doc .note p{margin-top:0;font-size:13.5px;line-height:1.75}
.doc .note p+p{margin-top:10px}

/* definition-style rows for "what we collect" */
.rows{margin-top:16px;max-width:70ch;display:flex;flex-direction:column;gap:0}
.rows div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;padding:13px 0;border-top:1px solid var(--line)}
.rows div:last-child{border-bottom:1px solid var(--line)}
.rows dt,.rows b{font-size:13px;font-weight:800;color:var(--ink);line-height:1.5}
.rows span{font-size:13.5px;color:var(--mut);line-height:1.65}

.updated{font-size:12.5px;color:var(--faint);letter-spacing:.02em}
.legal-foot{margin-top:clamp(34px,4vw,48px);padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint);line-height:1.75;max-width:70ch}

@media(max-width:900px){
  .legal .wrap{grid-template-columns:minmax(0,1fr);gap:26px}
  .toc{position:static;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
  .toc ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px}
  .toc a{padding:7px 8px}
  .rows div{grid-template-columns:minmax(0,1fr);gap:4px}
}