/* =====================================================================
   Legal page. Builds on style.css. Mobile first.
   A short intro, then a document index (chips on phones, a sticky
   list on desktop) beside readable document cards.
   ===================================================================== */
.page-legal{--bgc:#f3f2ed;--lg-r:22px;--lg-ink:#26254a}
@media (min-width:760px){.page-legal{--lg-r:28px}}
.page-legal main{background:var(--paper);color:var(--blue);--g:var(--paper);--i:var(--blue);--mute:#4744c8;--faint:#cdccec;--line:#d2d1e6;--raise:#fbfaf7;padding-bottom:clamp(72px,10vw,128px)}
.page-legal .nav-in{animation:fade 1.2s .2s var(--ease) both}

/* intro */
.lg-hero{padding-top:clamp(120px,18vw,200px);padding-bottom:clamp(40px,6vw,72px);max-width:1180px;animation:fade 1.2s .1s var(--ease) both}
.lg-hero h1{font-size:clamp(2.3rem,9vw,5.6rem);line-height:.95;margin:14px 0 22px;max-width:12ch}
.lg-lead{font-size:clamp(1rem,3.9vw,1.2rem);line-height:1.55;color:var(--lg-ink);max-width:56ch}
.lg-date{margin-top:22px;color:var(--mute)}

/* layout */
.lg-body{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
@media (min-width:980px){.lg-body{grid-template-columns:250px minmax(0,1fr);gap:48px}}

/* index */
.lg-toc{display:flex;flex-direction:column;gap:14px;min-width:0}
.lg-toc>.k{color:var(--mute)}
.lg-toc ol{list-style:none;margin:0;padding:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-snap-type:x proximity}
.lg-toc ol::-webkit-scrollbar{display:none}
.lg-toc li{flex:none;scroll-snap-align:start}
.lg-toc li>a{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;background:rgba(255,255,255,.55);color:var(--blue);font-size:.95rem;white-space:nowrap;transition:background .5s var(--ease),color .5s var(--ease)}
.lg-toc li>a .k{font-size:.66rem;opacity:.6;transition:opacity .4s}
.lg-toc li>a:hover{background:rgba(255,255,255,.95)}
.lg-toc li>a.on{background:var(--blue);color:var(--paper)}
.lg-toc li>a.on .k{opacity:.8}
.lg-ask{display:none}
@media (min-width:980px){
  .lg-toc{position:sticky;top:110px}
  .lg-toc ol{flex-direction:column;overflow:visible;margin:0;padding:0;gap:4px}
  .lg-toc li>a{border-radius:14px;padding:12px 14px;background:none}
  .lg-toc li>a:hover{background:rgba(255,255,255,.6)}
  .lg-toc li>a.on{background:var(--blue)}
  .lg-ask{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:4px;margin-top:18px;padding:16px;border-radius:16px;background:rgba(255,255,255,.55);font-size:.85rem;color:var(--mute);transition:background .5s var(--ease)}
  .lg-ask b{font-weight:500;color:var(--blue)}
  .lg-ask:hover{background:rgba(255,255,255,.95)}
}

/* documents */
.lg-docs{display:flex;flex-direction:column;gap:16px;min-width:0}
.lg-doc{scroll-margin-top:100px;padding:28px 22px 32px;border-radius:var(--lg-r);background:rgba(255,255,255,.55);color:var(--lg-ink);font-size:1rem;line-height:1.7}
@media (min-width:760px){.lg-docs{gap:20px}.lg-doc{padding:44px 48px 48px}}
.lg-doc header{margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.lg-doc header .k{color:var(--mute)}
.lg-doc h2{font-size:clamp(1.7rem,6vw,2.6rem);line-height:1;margin-top:12px;color:var(--blue)}
.lg-doc h3{font-family:var(--sans);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;color:var(--blue);margin:26px 0 8px}
.lg-doc p,.lg-doc ul{max-width:66ch}
.lg-doc p+p{margin-top:12px}
.lg-doc ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px}
.lg-doc li{position:relative;padding-left:20px}
.lg-doc li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:2px;background:var(--blue);opacity:.55}
.lg-doc b{font-weight:600;color:#14132e}
.lg-doc a{color:var(--blue);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .6s var(--ease)}
.lg-doc a:hover{background-size:0 1px}

/* documents ease in as they arrive */
@media (prefers-reduced-motion:no-preference){
  .lg-doc{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
  .lg-doc.in{opacity:1;transform:none}
}
.lg-doc ul+p{margin-top:14px}