/* ============================================================================
   legal.styles.css — ONE shared stylesheet for all 10 legal / policy pages.
   Namespace: .lg-*  (never touches shared .wrap/.eyebrow/nav/footer classes).
   Reuses the site design tokens from home.styles.css (--ink, --amber, --red,
   fonts). Calm, long-read typographic layout: no photo hero; readable column;
   sticky "Legal & Privacy" side nav + on-this-page TOC (accordion on mobile).
   ============================================================================ */

.lg-main{--lg-navy:var(--ink,#0A1F4D);--lg-amber:var(--amber,#ECB84C);--lg-red:var(--red,#C8102E);
  --lg-blue:#e9f0fa;--lg-line:#dbe3f1;--lg-ink:#1a2438;--lg-muted:#5a6478;
  background:#fff;color:var(--lg-ink);font-family:'Manrope',system-ui,-apple-system,sans-serif}

/* ---- typographic hero (navy, no photo) ---- */
.lg-hero{background:var(--lg-navy);color:#fff;padding:clamp(120px,17vh,180px) 0 clamp(42px,6vh,64px);position:relative;overflow:hidden}
.lg-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 88% -10%,rgba(236,184,76,.14),transparent 55%),
             linear-gradient(180deg,transparent 62%,rgba(255,255,255,.03))}
.lg-hero .wrap{position:relative;z-index:1}
.lg-crumb{margin:0 0 22px}
.lg-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5ch;margin:0;padding:0;
  font-family:'PlexMono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.04em;color:rgba(255,255,255,.6)}
.lg-crumb li{display:flex;align-items:center;gap:.5ch}
.lg-crumb li+li::before{content:"/";opacity:.4;margin-right:.4ch}
.lg-crumb a{color:rgba(255,255,255,.72);text-decoration:none}
.lg-crumb a:hover{color:#fff;text-decoration:underline}
.lg-crumb [aria-current="page"]{color:var(--lg-amber)}
.lg-eyebrow{font-family:'PlexMono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.24em;
  font-size:.8rem;color:var(--lg-amber);margin:0 0 16px}
.lg-hero h1{font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:clamp(2.2rem,5.4vw,3.7rem);
  line-height:1.04;letter-spacing:-.01em;margin:0;max-width:20ch;color:#fff}
.lg-hero .lg-sub{margin:18px 0 0;max-width:60ch;font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.55;color:rgba(255,255,255,.76)}

/* ---- body: nav | document | on-this-page  (3-column docs layout) ----
   Legal pages read best in a tighter, centred measure than the full 1440 site
   width, so hero content + body are narrowed to the same width and stay aligned.
   padding-block (not the padding shorthand) preserves .wrap's horizontal padding
   — without this the shorthand's "0" zeroed the left/right gutters. */
.lg-hero .wrap{max-width:1200px}
.lg-body{max-width:1200px;display:grid;
  grid-template-columns:minmax(196px,226px) minmax(0,1fr) minmax(178px,208px);
  gap:clamp(26px,3vw,52px);
  padding-block:clamp(40px,6vh,72px) clamp(56px,8vh,90px);align-items:start}
.lg-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:22px}
.lg-doc{max-width:74ch;min-width:0}

/* ---- Legal & Privacy side nav ---- */
.lg-nav-group+.lg-nav-group{margin-top:18px}
.lg-nav h2{font-family:'PlexMono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;color:var(--lg-muted);margin:0 0 10px;font-weight:600}
.lg-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lg-nav a{display:block;text-decoration:none;color:var(--lg-navy);font-size:.92rem;line-height:1.3;
  padding:7px 12px;border-radius:8px;border-left:2px solid transparent;transition:background .15s,color .15s}
.lg-nav a:hover{background:var(--lg-blue)}
.lg-nav a[aria-current="page"]{background:var(--lg-blue);border-left-color:var(--lg-red);color:var(--lg-navy);font-weight:700}
.lg-nav .lg-here{background:var(--lg-blue);border-left:2px solid var(--lg-red);color:var(--lg-navy);
  font-weight:700;font-size:.92rem;padding:7px 12px;border-radius:8px;display:block}

/* ---- on-this-page TOC ---- */
.lg-toc{position:sticky;top:96px}
.lg-toc h2{font-family:'PlexMono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;color:var(--lg-muted);margin:0 0 10px;font-weight:600}
.lg-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;counter-reset:toc}
.lg-toc a{display:block;text-decoration:none;color:var(--lg-muted);font-size:.86rem;line-height:1.35;
  padding:5px 10px;border-radius:6px;border-left:2px solid transparent}
.lg-toc a:hover{color:var(--lg-navy);background:var(--lg-blue)}
.lg-toc a.is-active{color:var(--lg-navy);border-left-color:var(--lg-amber);font-weight:600}

/* ---- document typography ---- */
.lg-doc h2{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:clamp(1.4rem,2.6vw,1.85rem);
  line-height:1.16;letter-spacing:-.005em;color:var(--lg-navy);margin:1.8em 0 .5em;scroll-margin-top:96px}
.lg-doc h2:first-child,.lg-doc>*:first-child{margin-top:0}
.lg-doc h3{font-family:'Manrope',sans-serif;font-weight:700;font-size:clamp(1.06rem,1.7vw,1.2rem);
  color:var(--lg-navy);margin:1.7em 0 .4em;scroll-margin-top:96px}
.lg-doc h4{font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;color:var(--lg-navy);margin:1.3em 0 .35em}
.lg-doc p{margin:0 0 1.05em;font-size:1.02rem;line-height:1.72}
.lg-doc .lg-lead{font-size:1.14rem;line-height:1.6;color:var(--lg-navy);font-weight:500}
.lg-doc ul,.lg-doc ol{margin:0 0 1.15em;padding-left:1.35em}
.lg-doc li{margin:0 0 .5em;line-height:1.65;font-size:1.02rem}
.lg-doc li::marker{color:var(--lg-red)}
.lg-doc strong{font-weight:700;color:var(--lg-navy)}
.lg-doc a{color:var(--lg-red);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.lg-doc a:hover{color:var(--lg-navy)}
.lg-doc table{width:100%;border-collapse:collapse;margin:0 0 1.3em;font-size:.94rem;display:block;overflow-x:auto}
.lg-doc th,.lg-doc td{border:1px solid var(--lg-line);padding:9px 12px;text-align:left;vertical-align:top}
.lg-doc th{background:var(--lg-blue);color:var(--lg-navy);font-weight:700}

/* ---- prev / next ---- */
.lg-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:3em 0 0;border-top:1px solid var(--lg-line);padding-top:26px}
.lg-pn{display:flex;flex-direction:column;gap:3px;text-decoration:none;padding:14px 16px;border:1px solid var(--lg-line);
  border-radius:12px;color:var(--lg-navy);transition:border-color .15s,background .15s}
.lg-pn:hover{border-color:var(--lg-red);background:var(--lg-blue)}
.lg-pn.lg-next{text-align:right;align-items:flex-end}
.lg-pn span{font-family:'PlexMono',ui-monospace,monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--lg-muted)}
.lg-pn b{font-weight:600;font-size:.98rem}
.lg-pn.lg-empty{visibility:hidden}

/* ---- accreditation strip (light-blue, above footer) — reuses .acmarq/.actrack ---- */
.lg-accred{background:var(--lg-blue);padding:30px 0;border-top:1px solid var(--lg-line)}

/* ---- reveal animation (gated by html.js; honoured only when JS present) ---- */
html.js .lg-rev{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
html.js .lg-rev.is-in{opacity:1;transform:none}
html.js .lg-stagger>*{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
html.js .lg-stagger.is-in>*{opacity:1;transform:none}
html.js .lg-stagger.is-in>*:nth-child(2){transition-delay:.06s}
html.js .lg-stagger.is-in>*:nth-child(3){transition-delay:.12s}
html.js .lg-stagger.is-in>*:nth-child(4){transition-delay:.18s}

/* ---- mobile disclosure control (hidden on desktop) ---- */
.lg-disc-btn{display:none}

@media (max-width:1080px){
  .lg-body{grid-template-columns:1fr;gap:0}
  .lg-side{position:static;top:auto;gap:0;margin:0 0 16px}
  .lg-toc{position:static;top:auto;margin:0 0 26px}
  .lg-doc{order:1;max-width:none}
  .lg-nav,.lg-toc{border:1px solid var(--lg-line);border-radius:12px;padding:0;overflow:hidden}
  .lg-disc-btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;
    background:#fff;border:0;padding:14px 16px;font:inherit;font-weight:700;color:var(--lg-navy);cursor:pointer;text-align:left}
  .lg-disc-btn .lg-chev{transition:transform .2s;color:var(--lg-muted)}
  .lg-disc[hidden]{display:none}
  .lg-disc-btn[aria-expanded="true"] .lg-chev{transform:rotate(180deg)}
  .lg-nav .lg-disc,.lg-toc .lg-disc{padding:6px 12px 14px}
  .lg-nav h2{padding:0;margin:12px 0 8px}
  .lg-prevnext{grid-template-columns:1fr}
  .lg-pn.lg-next{text-align:left;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  html.js .lg-rev,html.js .lg-stagger>*{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- print ---- */
@media print{
  .navwrap,#nav,.lg-side,.lg-crumb,.lg-prevnext,.lg-accred,.acmarq,footer,.lg-hero::after{display:none!important}
  .lg-main{background:#fff!important;color:#000!important}
  .lg-hero{background:#fff!important;color:#000!important;padding:0 0 12px}
  .lg-hero h1{color:#000!important}.lg-eyebrow{color:#000!important}
  .lg-body{display:block;padding:0}
  .lg-doc{max-width:none}
  .lg-doc h2,.lg-doc h3,.lg-doc h4,.lg-doc strong{color:#000!important}
  .lg-doc a{color:#000!important;text-decoration:underline}
  .lg-doc a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
  .lg-rev{opacity:1!important;transform:none!important}
}