/* ============================================================
   Sublime LMS — Legal pages (Terms & Privacy)
   Sidebar TOC + readable long-form. Uses global tokens.
   ============================================================ */
.lg-hero { position:relative; padding:64px 0 40px; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--border); }
.lg-hero-field { position:absolute; inset:0; z-index:-1; background:var(--gradient-pulsefield); opacity:.7; }
.lg-hero .wrap { width:100%; max-width:var(--container-max); margin:0 auto; padding:0 28px; }
.lg-kick { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--color-violet-700); margin-bottom:14px; }
.lg-kick i { width:14px; height:14px; }
.lg-hero h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(34px,5vw,52px); line-height:1.04; letter-spacing:-0.03em; color:var(--fg); margin:0 0 14px; }
.lg-hero p { font-size:16px; line-height:1.6; color:var(--fg-body); max-width:600px; margin:0; }
.lg-updated { display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-size:13px; color:var(--fg-muted); background:#fff; border:1px solid var(--border); border-radius:999px; padding:7px 14px; }
.lg-updated i { width:14px; height:14px; color:var(--color-violet-600); }

.lg-body { width:100%; max-width:var(--container-max); margin:0 auto; padding:48px 28px 16px; display:grid; grid-template-columns:248px 1fr; gap:56px; align-items:start; }
/* sticky TOC */
.lg-toc { position:sticky; top:96px; }
.lg-toc-h { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-muted); margin-bottom:14px; }
.lg-toc ol { list-style:none; padding:0; margin:0; counter-reset:toc; display:flex; flex-direction:column; gap:2px; }
.lg-toc a { display:flex; gap:10px; align-items:baseline; padding:8px 12px; border-radius:9px; font-size:13.5px; line-height:1.4; color:var(--fg-body); text-decoration:none; transition:background .2s, color .2s; }
.lg-toc a::before { counter-increment:toc; content:counter(toc,decimal-leading-zero); font-family:var(--font-mono); font-size:11px; color:var(--fg-faint); }
.lg-toc a:hover { background:var(--color-mist); color:var(--fg); }
.lg-toc a.active { background:var(--color-violet-50); color:var(--color-violet-700); font-weight:600; }
.lg-toc a.active::before { color:var(--color-violet-500); }

/* article */
.lg-article { max-width:760px; }
.lg-sec { scroll-margin-top:96px; padding-bottom:38px; margin-bottom:38px; border-bottom:1px solid var(--border-soft); }
.lg-sec:last-child { border-bottom:none; }
.lg-sec h2 { font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-0.02em; color:var(--fg); margin:0 0 16px; display:flex; align-items:baseline; gap:12px; }
.lg-sec h2 .n { font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--color-violet-600); }
.lg-sec h3 { font-family:var(--font-display); font-weight:650; font-size:17px; letter-spacing:-0.01em; color:var(--fg); margin:24px 0 10px; }
.lg-sec p { font-size:15px; line-height:1.7; color:var(--fg-body); margin:0 0 14px; }
.lg-sec ul { margin:0 0 14px; padding-left:4px; list-style:none; display:flex; flex-direction:column; gap:10px; }
.lg-sec ul li { position:relative; padding-left:24px; font-size:15px; line-height:1.65; color:var(--fg-body); }
.lg-sec ul li::before { content:''; position:absolute; left:4px; top:10px; width:6px; height:6px; border-radius:999px; background:var(--color-violet-400); }
.lg-sec a { color:var(--color-violet-700); text-decoration:none; border-bottom:1px solid var(--color-violet-200); }
.lg-sec strong { font-weight:650; color:var(--fg); }
.lg-callout { background:#fff; border:1px solid var(--border); border-left:3px solid var(--color-violet-500); border-radius:0 var(--radius-lg) var(--radius-lg) 0; padding:16px 20px; margin:0 0 16px; }
.lg-callout p { margin:0; font-size:14px; color:var(--fg-body); }

/* contact card at end */
.lg-contact { background:#fff; border:1px solid var(--border); border-radius:var(--radius-xl); padding:24px; display:flex; gap:16px; align-items:center; }
.lg-contact .ic { width:46px; height:46px; border-radius:13px; background:var(--color-violet-100); color:var(--color-violet-700); display:grid; place-items:center; flex-shrink:0; }
.lg-contact .ic i { width:23px; height:23px; }
.lg-contact b { font-family:var(--font-display); font-weight:650; font-size:16px; color:var(--fg); }
.lg-contact p { margin:2px 0 0; font-size:14px; color:var(--fg-muted); }
.lg-contact a { color:var(--color-violet-700); font-weight:600; text-decoration:none; }

@media (max-width:920px){
  .lg-body { grid-template-columns:1fr; gap:8px; }
  .lg-toc { position:static; margin-bottom:24px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-xl); padding:18px 20px; }
  .lg-toc ol { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
}
@media (max-width:600px){ .lg-toc ol { grid-template-columns:1fr; } }
