:root{ --bg:#0e1320; --accent:#ffe74a; --pill:#fff; --border:#000; }
*{ box-sizing:border-box }
html,body{ height:100%; }
html{ scrollbar-gutter:stable both-edges; }
body{ margin:0; background:var(--bg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:#111; }
.wrapper{ min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; }
.nav{ position:fixed; top:12px; right:12px; z-index:20; display:flex; gap:12px; }
.btn{ background:var(--pill); color:#000; text-decoration:none; font-weight:800; padding:10px 18px; border:3px solid var(--border); border-radius:12px; letter-spacing:.4px; box-shadow:0 2px 0 #0005; }
.btn.active{ background:var(--accent); }
.home .hero{ position:fixed; inset:0; background:center/cover no-repeat url("assets/img/hero.png"); }
.hero{ padding:24px 12px; }
body:not(.home) .hero{ padding-top:72px; display:flex; justify-content:center; }
.card{ width:min(900px,95vw); background:#fff; color:#111; border:2px solid #000; border-radius:18px; padding:24px 28px; box-shadow:0 10px 40px #0006; }
.contact-banner{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; margin:0 0 14px 0; padding:8px 12px; border:2px solid #000; border-radius:12px; background:#fffef0; box-shadow:0 2px 0 #0003; }

/* TOC improvements */
.toc{ margin:0 0 16px 0; padding:12px; border:2px dashed #0003; border-radius:12px; background:#fafafa; }
.toc ul{ margin:8px 0 0; padding-left:20px; list-style:disc; column-count:2; column-gap:28px; }
.toc li{ break-inside:avoid; margin:6px 0; }
.toc li.lvl3{ margin-left:12px; list-style:circle; }
.toc a{ color:#111; text-decoration:none; }
.toc a:hover{ text-decoration:underline; }

.card a[href^="mailto:"]{ font-weight:700; text-decoration:underline; }
p{ margin:8px 0; line-height:1.7 }
h1{ font-size:28px; margin:6px 0 14px }
h2{ font-size:20px; margin:18px 0 8px }
h3{ font-size:18px; margin:16px 0 6px }
.support{ position:fixed; right:16px; bottom:16px; z-index:20; background:#ffffffee; border:2px solid #000; border-radius:12px; padding:10px 16px; font-weight:700; color:#000; text-decoration:none; }


/* Bottom-left legal badge */
.copyright{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 20;
  background: #ffffffee;
  border: 2px solid #000;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 700;
  color: #000;
  line-height: 1;
}