/* ============================================================
   Legal pages (legals.html, privacy.html) — loaded after
   main.css, which already gives the nav, hero, footer, cursor
   and preloader. This only adds the document itself: key facts,
   contents list, numbered sections, identity card and table.
   ============================================================ */

/* shorter hero: the text below is what people came for */
.hero--legal{min-height:auto;padding-top:clamp(130px,18vh,190px);padding-bottom:clamp(40px,6vw,70px)}
.hero--legal .hero__title{font-size:clamp(2.5rem,7.6vw,6.4rem)}
.hero--legal .hero__lead{max-width:60ch}
.legal-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding:0;list-style:none}
.legal-meta li{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r);color:var(--mute);background:rgba(12,15,21,.6)}
.legal-meta svg{width:14px;height:14px;fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.legal{padding-bottom:clamp(60px,9vw,120px)}

/* key facts */
.facts{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  margin:0 0 clamp(28px,5vw,48px);padding:0;list-style:none}
.fact{--c:var(--lime);display:grid;gap:6px;align-content:start;padding:22px 22px 24px;
  border:1px solid var(--line);border-radius:22px;background:var(--void-2);transition:border-color .4s var(--ease)}
.fact:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.fact:nth-child(2){--c:var(--cyan)} .fact:nth-child(3){--c:var(--yellow)} .fact:nth-child(4){--c:var(--green)}
.fact svg{width:40px;height:40px;padding:9px;margin-bottom:6px;border-radius:12px;
  background:color-mix(in srgb,var(--c) 14%,transparent);fill:none;stroke:var(--c);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fact strong{font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;color:var(--chalk)}
.fact span{font-size:.875rem;line-height:1.55;color:var(--mute)}

/* contents + document */
.layout{display:grid;gap:clamp(20px,3vw,36px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:960px){.layout{grid-template-columns:260px minmax(0,1fr)}}

.toc{padding:20px 14px 20px 20px;border:1px solid var(--line);border-radius:22px;background:var(--void-2)}
@media (min-width:960px){
  .toc{position:sticky;top:100px;max-height:calc(100vh - 124px);overflow-y:auto}
  .toc summary{pointer-events:none;list-style:none}
  .toc summary::-webkit-details-marker{display:none}
}
.toc h2{margin:0 0 10px;color:var(--mute-2)}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:10px;padding:7px 10px;border-radius:10px;color:var(--mute);font-size:.875rem;line-height:1.4;
  transition:background-color .25s,color .25s,padding-left .35s var(--ease)}
.toc a::before{content:counter(toc,decimal-leading-zero);flex:none;min-width:1.8em;
  font:500 .6875rem/1.95 var(--f-mono);color:var(--lime)}
.toc a:hover{background:rgba(255,255,255,.05);color:var(--chalk);padding-left:16px}
@media (max-width:959px){
  .toc details>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
  .toc details>summary::-webkit-details-marker{display:none}
  .toc details>summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--lime);transition:transform .35s var(--ease)}
  .toc details[open]>summary::after{transform:rotate(45deg)}
  .toc details[open]>summary{margin-bottom:8px}
  .toc summary h2{margin:0}
}

.doc{min-width:0;padding:clamp(22px,5vw,56px);border:1px solid var(--line);border-radius:28px;background:var(--void-2);counter-reset:sec}
.doc section{counter-increment:sec;scroll-margin-top:100px}
.doc section+section{margin-top:clamp(32px,5vw,48px);padding-top:clamp(32px,5vw,48px);border-top:1px solid var(--line)}
.doc h2{display:flex;align-items:baseline;gap:14px;margin:0 0 18px;
  font-size:clamp(1.35rem,3.2vw,1.85rem);font-weight:600;line-height:1.15;letter-spacing:-.03em}
.doc h2::before{content:counter(sec,decimal-leading-zero);flex:none;display:inline-grid;place-items:center;
  min-width:38px;height:30px;padding:0 8px;border-radius:var(--r);background:var(--lime);color:#06080B;
  font:500 .75rem/1 var(--f-mono);transform:translateY(-4px)}
.doc h3{margin:26px 0 8px;font:500 .75rem/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.doc p,.doc li,.doc dd{max-width:72ch;color:var(--mute);line-height:1.7;overflow-wrap:anywhere}
.doc p{margin:0 0 12px}
.doc ul{margin:0 0 14px;padding:0;list-style:none}
.doc ul li{position:relative;margin:0 0 8px;padding-left:24px}
.doc ul li::before{content:"";position:absolute;left:3px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--lime)}
.doc strong{color:var(--chalk);font-weight:600}
.doc a{color:var(--lime);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.doc a:hover{color:var(--chalk)}
.doc section:target h2{color:var(--lime)}

.note{margin:18px 0;padding:16px 20px;border-radius:18px 18px 18px 6px;
  background:color-mix(in srgb,var(--lime) 10%,transparent);border:1px solid color-mix(in srgb,var(--lime) 30%,transparent)}
.note p{color:var(--chalk)}
.note p:last-child{margin-bottom:0}

.id{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 20px;margin:0 0 14px;padding:18px 20px;border-radius:18px;background:var(--ink)}
.id dt{font:500 .6875rem/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}
.id dd{margin:0 0 10px;color:var(--chalk)}
@media (min-width:640px){.id{grid-template-columns:170px minmax(0,1fr)} .id dt{padding-top:.4em} .id dd{margin:0 0 8px}}

.table{margin:8px 0 16px;overflow-x:auto;border:1px solid var(--line);border-radius:18px}
.table table{width:100%;min-width:560px;border-collapse:collapse;font-size:.9rem}
.table th,.table td{padding:12px 16px;text-align:left;vertical-align:top;color:var(--mute)}
.table th{background:var(--ink);font:500 .6875rem/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--chalk)}
.table tr+tr td{border-top:1px solid var(--line)}

@media print{
  body{background:#fff;color:#000}
  .loader,.cursor,.grain,.scanline,.nav,.menu,.hero__canvas,.hero__vig,.toc,.facts,.foot,.cc{display:none!important}
  .hero--legal{padding:0 0 20px}
  .hero__title em{color:#000;background:none}
  .layout{display:block}
  .doc{border:0;padding:0;background:none}
  .doc p,.doc li,.doc dd,.doc strong,.doc h2,.doc h3,.id dd{color:#000}
}

/* third-party licence text, reproduced verbatim */
.license{max-width:72ch;margin:14px 0 0;padding:18px 20px;border:1px solid var(--line);border-radius:18px;
  background:rgba(12,15,21,.6);color:var(--mute);font:400 .8125rem/1.6 var(--f-mono);white-space:pre-wrap;overflow-wrap:anywhere}