/* ══════════════════════════════════════════════════════════════════
   LEGAL PAGES, v2
   Privacy policy and terms. Loaded after home-v2.css.

   The old legal.css put the body in a 740px column inside the 1200px
   site container, so the text sat narrower than the header and indented
   a further 32px. Everything here sits in .wrap, the same container the
   header and every other redesigned page uses, and the reading column is
   constrained by max-width on the prose itself rather than by shrinking
   the layout.

   Overrides section{padding:140px 0} from home-v2.css, same as the
   contact page does, so section height follows content.
   ══════════════════════════════════════════════════════════════════ */

section{padding:88px 0}
@media(max-width:1023px){section{padding:68px 0}}
@media(max-width:640px){section{padding:52px 0}.wrap{padding:0 22px}}
.ghost{display:none}

/* ── Hero ────────────────────────────────────────────────────────── */

.lhero{padding:104px 0 76px}
@media(max-width:1023px){.lhero{padding:88px 0 60px}}
@media(max-width:640px){.lhero{padding:78px 0 48px}}
.lhero .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acid,#E9FF5C);display:flex;align-items:center;gap:11px;margin:0 0 18px}
.lhero .lbl::before{content:"";width:22px;height:1px;background:currentColor}
.lhero h1{font-size:clamp(32px,4.2vw,52px);line-height:1.07;letter-spacing:-.03em;font-weight:600;
  color:var(--paper,#FAF9F5);margin:0;max-width:18ch}
.lhero p{font-size:clamp(15px,1.35vw,17px);line-height:1.7;color:var(--gray-s,#A8A8A8);margin:20px 0 0;max-width:62ch}
.lmeta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(250,249,245,.16)}
.lmeta span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,249,245,.5)}
.lmeta b{color:var(--paper,#FAF9F5);font-weight:500}

/* ── Body layout, sticky contents beside the prose ───────────────── */

.lgrid{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
@media(min-width:1024px){.lgrid{grid-template-columns:250px minmax(0,1fr);gap:64px}}
@media(min-width:1280px){.lgrid{grid-template-columns:264px minmax(0,1fr);gap:80px}}

.ltoc{border-top:1px solid var(--ll,rgba(10,10,10,.18));padding-top:18px}
@media(min-width:1024px){.ltoc{position:sticky;top:104px;max-height:calc(100vh - 140px);overflow-y:auto}}
.ltoc p{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray,#6B6B6B);margin:0 0 14px}
.ltoc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.ltoc li{counter-increment:toc;margin:0}
.ltoc a{display:flex;gap:10px;padding:7px 0;font-size:13.5px;line-height:1.45;color:var(--gray,#6B6B6B);
  text-decoration:none;border-bottom:0;transition:color var(--t-fast,150ms)}
.ltoc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:10px;color:var(--gray,#6B6B6B);opacity:.6;flex-shrink:0;padding-top:2px}
.ltoc a:hover{color:var(--black,#0A0A0A)}
.ltoc a:focus-visible{outline:2px solid var(--black,#0A0A0A);outline-offset:2px}

/* ── Prose ───────────────────────────────────────────────────────── */

.lbody{min-width:0}
.lbody > section{padding:0;margin-top:52px;scroll-margin-top:100px}
.lbody > section:first-child{margin-top:0}
.lbody h2{font-size:clamp(21px,2.1vw,27px);line-height:1.25;letter-spacing:-.02em;font-weight:600;
  color:var(--black,#0A0A0A);margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--ll,rgba(10,10,10,.18));
  display:flex;align-items:baseline;gap:14px}
.lbody h2 em{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.1em;color:var(--gray,#6B6B6B);flex-shrink:0}
.lbody h3{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--black,#0A0A0A);margin:26px 0 8px}
.lbody p{font-size:15.5px;line-height:1.8;color:#3A3A3A;margin:0;max-width:72ch}
.lbody p + p{margin-top:14px}
.lbody ul,.lbody ol{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.lbody li{font-size:15.5px;line-height:1.72;color:#3A3A3A;padding-left:22px;position:relative;max-width:70ch}
.lbody ul li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1px;background:var(--gray,#6B6B6B)}
.lbody ol{counter-reset:lol}
.lbody ol li{counter-increment:lol}
.lbody ol li::before{content:counter(lol) ".";position:absolute;left:0;font-family:var(--mono);font-size:12px;color:var(--gray,#6B6B6B)}
.lbody a{color:var(--black,#0A0A0A);text-decoration:underline;text-decoration-color:rgba(10,10,10,.32);
  text-underline-offset:3px;font-weight:500;transition:text-decoration-color var(--t-fast,150ms)}
.lbody a:hover{text-decoration-color:var(--black,#0A0A0A)}
.lbody strong{font-weight:600;color:var(--black,#0A0A0A)}

/* a definition style table for "what is collected" style content */
.ldl{margin:16px 0 0;border-top:1px solid var(--ll,rgba(10,10,10,.14))}
.ldl div{display:grid;grid-template-columns:1fr;gap:2px;padding:13px 0;border-bottom:1px solid var(--ll,rgba(10,10,10,.1))}
@media(min-width:640px){.ldl div{grid-template-columns:210px minmax(0,1fr);gap:24px;align-items:baseline}}
.ldl dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--black,#0A0A0A);font-weight:500}
.ldl dd{margin:0;font-size:14.5px;line-height:1.65;color:#3A3A3A}

/* a callout for the things a reader most needs to notice */
.lnote{border-left:2px solid var(--acid,#E9FF5C);background:rgba(233,255,92,.09);
  padding:18px 22px;margin:20px 0 0;border-radius:0 3px 3px 0}
.lnote p{font-size:14.5px;line-height:1.7;color:var(--black,#0A0A0A);max-width:66ch}
.lnote p + p{margin-top:10px}

/* contact block that closes each document */
.lend{margin-top:52px;padding:26px 28px;border:1px solid var(--ll,rgba(10,10,10,.16));background:rgba(10,10,10,.02)}
.lend p{font-size:14.5px;line-height:1.7;color:var(--gray,#6B6B6B);margin:0;max-width:64ch}
.lend p + p{margin-top:8px}
.lend a{color:var(--black,#0A0A0A);font-weight:600}

/* ── Closing CTA strip ───────────────────────────────────────────── */

.lcta{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
@media(min-width:860px){.lcta{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}}
.lcta h2{font-size:clamp(22px,2.4vw,30px);line-height:1.16;letter-spacing:-.025em;font-weight:600;margin:0;max-width:20ch}
.lcta p{font-size:15px;line-height:1.7;color:var(--gray,#6B6B6B);margin:12px 0 0;max-width:48ch}
.lcta-a{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
@media(min-width:860px){.lcta-a{justify-content:flex-end}}

@media(prefers-reduced-motion:reduce){
  .ltoc a,.lbody a{transition:none}
}