/* GuildCore Legal Pages — premium glass design + sticky ToC */

/* Hero */
.legal-hero { position: relative; padding: 36px 0 18px; }
.legal-hero .title { font-size: clamp(28px, 4.6vw, 56px); margin: 0 0 6px; letter-spacing: -0.3px; }
.legal-hero .accent { background: linear-gradient(90deg, #06b6d4, #22d3ee, #9b8cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.legal-hero .sublead { color: var(--muted); margin: 0; }
.legal-badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px }
.legal-badge { display:inline-flex; align-items:center; gap:8px; color:var(--text); padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.04); border:var(--border) }
.legal-badge .dot { width:10px; height:10px; border-radius:50%; background:#22c55e }

/* Layout */
.legal-wrap { display:grid; grid-template-columns: minmax(0,1fr) 300px; gap:20px; align-items:start; }
.legal-main { min-width: 0; }
.legal-aside { position: sticky; top: 90px; align-self: start; }

/* Article/Sections */
.legal-article { counter-reset: section; display:grid; gap:16px }
.legal-section { padding:18px; border-radius:16px; border:var(--border); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); box-shadow: var(--shadow); }
.legal-section h2 { display:flex; align-items:baseline; gap:10px; margin:0 0 8px; font-size:22px }
.legal-section h2 .num { font-weight:800; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#001450,#00143c); }
.legal-section p { margin: 8px 0; color: var(--text); }
.legal-section ul { margin: 8px 0 4px 18px; }
.legal-section li { margin: 4px 0; color: var(--muted) }

/* Callouts */
.callout { padding:14px 14px; border-radius:12px; border:var(--border); background: rgba(255,255,255,.05); display:flex; gap:10px; align-items:flex-start }
.callout .i { font-size:18px; margin-top:2px }
.callout.info { background: rgba(34,211,238,.10); border-color: rgba(34,211,238,.25) }
.callout.ok { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.22) }
.callout.warn { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.25) }

/* ToC */
.toc { border-radius:16px; border:var(--border); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); box-shadow: var(--shadow); padding:14px }
.toc h3 { margin:0 0 8px; font-size:16px }
.toc-list { list-style:none; margin:0; padding:0; display:grid; gap:6px }
.toc-list a { color:var(--text); text-decoration:none; display:block; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); font-size:14px }
.toc-list a:hover { transform: translateX(2px) }
.toc-list a.active { border-color: rgba(110,168,254,.4); box-shadow: 0 0 0 2px rgba(110,168,254,.15) inset }

@media (max-width: 1020px){
  .legal-wrap { grid-template-columns: 1fr; }
  .legal-aside { position: static }
}