/* ═══════════════════════════════════════════════════════════
   BizzNeo — legal & status pages (privacy, terms, 404)
   Depends on styles.css for tokens, nav, footer, buttons.
   ═══════════════════════════════════════════════════════════ */

/* ── legal header ──────────────────────────────────────────── */
.legal-head{padding-block:clamp(64px,8vw,110px) clamp(32px,4vw,52px);text-align:center}
.legal-eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;
  padding:7px 15px;border:1px solid var(--line-2);border-radius:999px;
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-2);
  background:rgba(255,255,255,.03);
}
.legal-head h1{font-size:clamp(34px,5.4vw,62px);margin-bottom:18px}
.legal-head h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)}
.legal-lede{color:var(--txt-2);font-size:clamp(15px,1.3vw,18px);max-width:620px;margin-inline:auto}
.legal-meta{
  margin-top:26px;font-family:var(--mono);font-size:12.4px;color:var(--muted);
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
}
.legal-meta span{padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--ink-1)}

/* ── layout: sticky contents + body ────────────────────────── */
.legal-body{
  display:grid;grid-template-columns:238px minmax(0,1fr);
  gap:clamp(32px,5vw,72px);padding-bottom:clamp(72px,9vw,128px);align-items:start;
}
.legal-toc{position:sticky;top:98px;font-size:13.4px}
.legal-toc b{
  display:block;color:#fff;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:14px;
}
.legal-toc ol{display:flex;flex-direction:column;gap:2px;counter-reset:toc}
.legal-toc a{
  display:block;padding:7px 12px;border-radius:9px;color:var(--muted);
  border-left:2px solid transparent;transition:color .25s,background .25s,border-color .25s;
}
.legal-toc a::before{counter-increment:toc;content:counter(toc) ". ";color:var(--line-2)}
.legal-toc a:hover{color:var(--txt);background:rgba(255,255,255,.035)}
.legal-toc a.on{color:var(--accent);border-left-color:var(--accent);background:rgba(53,224,161,.06)}

.legal-sec{
  padding:clamp(24px,3vw,34px);margin-bottom:18px;scroll-margin-top:96px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008));
}
.legal-sec > h2{
  font-size:clamp(20px,2.2vw,27px);margin-bottom:22px;
  display:flex;align-items:center;gap:13px;
}
.legal-sec > h2 .n{
  flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--accent);
  background:rgba(53,224,161,.1);border:1px solid rgba(53,224,161,.24);
}
.legal-block{padding-block:15px;border-top:1px solid var(--line)}
.legal-block:first-of-type{border-top:0;padding-top:0}
.legal-block h3{font-size:14.6px;font-weight:600;color:#fff;margin-bottom:6px}
.legal-block p{color:var(--txt-2);font-size:14.8px;line-height:1.72}
.legal-block a{color:var(--accent);border-bottom:1px solid rgba(53,224,161,.3)}

.legal-note{
  margin-top:26px;padding:20px 24px;border-radius:var(--radius-sm);
  border:1px solid var(--line);border-left:2px solid var(--accent);
  background:rgba(53,224,161,.045);color:var(--txt-2);font-size:14px;
}
.legal-note b{color:#fff}

/* ── 404 ───────────────────────────────────────────────────── */
.nf{min-height:66vh;display:grid;place-items:center;text-align:center;padding-block:clamp(60px,9vw,120px)}
.nf-code{
  font-family:var(--mono);font-size:clamp(62px,13vw,142px);line-height:1;font-weight:500;
  letter-spacing:-.04em;color:transparent;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.18));-webkit-background-clip:text;background-clip:text;
}
.nf h1{font-size:clamp(26px,3.6vw,42px);margin:20px 0 14px}
.nf h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)}
.nf p{color:var(--txt-2);max-width:460px;margin-inline:auto;font-size:15.6px}
.nf-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width:900px){
  .legal-body{grid-template-columns:1fr}
  .legal-toc{position:static;padding-bottom:8px;border-bottom:1px solid var(--line)}
  .legal-toc ol{flex-direction:row;flex-wrap:wrap;gap:6px}
  .legal-toc a{border-left:0;border:1px solid var(--line);padding:6px 11px;font-size:12.6px}
  .legal-toc a.on{border-color:rgba(53,224,161,.4)}
}