/* Legal pages: /terms, /privacy, /delete-account (Stitch "Terms of Service - Paper2Test"): top bar, gradient header,
   sticky table of contents, numbered section cards, contact box. Light and dark (follows the site's choice). */
:root { --bg:#f6f8fc; --card:#fff; --text:#0f172a; --ink2:#334155; --muted:#64748b; --line:#e2e8f0; --brand:#2563eb; --indigo:#4f46e5; --tint:#eef2ff; --sh:0 1px 2px rgba(15,23,42,.04),0 6px 20px -8px rgba(15,23,42,.10) }
:root[data-theme="dark"] { --bg:#0b1120; --card:#111a2e; --text:#e5e9f2; --ink2:#c3cad8; --muted:#8b97ad; --line:#223049; --brand:#7aa2ff; --indigo:#a5b4fc; --tint:#1a2440; --sh:0 1px 2px rgba(0,0,0,.3) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0b1120; --card:#111a2e; --text:#e5e9f2; --ink2:#c3cad8; --muted:#8b97ad; --line:#223049; --brand:#7aa2ff; --indigo:#a5b4fc; --tint:#1a2440; --sh:0 1px 2px rgba(0,0,0,.3) } }
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:84px }
body { margin:0; background:var(--bg); color:var(--text); font:15.5px/1.7 Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif; -webkit-font-smoothing:antialiased }
a { color:var(--brand); text-underline-offset:2px }
.lg-top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:20px; padding:12px 28px; background:color-mix(in srgb,var(--card) 86%,transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line) }
.lg-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:800; font-size:19px; letter-spacing:-.02em } .lg-brand img { border-radius:9px } .lg-brand b { color:var(--brand) }
.lg-top nav { display:flex; gap:4px; margin-left:auto } .lg-top nav a { padding:6px 12px; border-radius:8px; color:var(--ink2); text-decoration:none; font-weight:600; font-size:14px } .lg-top nav a:hover { background:var(--tint); color:var(--text) }
.lg-cta { padding:8px 16px; border-radius:10px; background:linear-gradient(135deg,#2563eb,#4f46e5); color:#fff; text-decoration:none; font-weight:700; font-size:14px; box-shadow:0 8px 20px -10px rgba(37,99,235,.7) }
.lg-hero { color:#fff; background:radial-gradient(70% 140% at 100% 0%,rgba(236,72,153,.38),transparent 55%),radial-gradient(60% 120% at 0% 100%,rgba(14,165,233,.35),transparent 60%),linear-gradient(135deg,#1e3a8a,#4338ca 55%,#6d28d9) }
.lg-in { max-width:1120px; margin:0 auto; padding:40px 28px 0 }
.lg-crumb { display:flex; gap:8px; margin:0 0 10px; font-size:13px; color:rgba(255,255,255,.75) } .lg-crumb a { color:#fff; text-decoration:none; font-weight:600 }
.lg-hero h1 { margin:0; font-size:40px; line-height:1.15; letter-spacing:-.025em; font-weight:800 }
.lg-sub { max-width:640px; margin:10px 0 0; color:rgba(255,255,255,.88); font-size:16px }
.lg-meta { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0 } .lg-meta span { padding:4px 12px; border-radius:99px; background:rgba(255,255,255,.14); font-size:12.5px; font-weight:600 }
.lg-switch { display:flex; gap:4px; margin:26px 0 0 } .lg-switch a { padding:10px 18px; border-radius:12px 12px 0 0; color:rgba(255,255,255,.85); text-decoration:none; font-weight:700; font-size:14px } .lg-switch a:hover { background:rgba(255,255,255,.1) }
.lg-switch a.on { background:var(--bg); color:var(--text) }
.lg-wrap { display:grid; grid-template-columns:240px minmax(0,1fr); gap:28px; max-width:1120px; margin:0 auto; padding:28px 28px 40px; align-items:start }
.lg-toc { position:sticky; top:84px; padding:16px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh); font-size:13.5px }
.lg-toc b { display:block; margin:0 0 8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.lg-toc ol { list-style:none; margin:0; padding:0; counter-reset:t } .lg-toc li { counter-increment:t }
.lg-toc li a { display:flex; gap:8px; padding:6px 8px; border-radius:8px; color:var(--ink2); text-decoration:none; line-height:1.35 } .lg-toc li a::before { content:counter(t); min-width:18px; color:var(--muted); font-weight:700 }
.lg-toc li a:hover { background:var(--tint); color:var(--text) } .lg-toc li a.on { background:var(--tint); color:var(--brand); font-weight:700 } .lg-toc li a.on::before { color:var(--brand) }
.lg-toc-help { display:block; margin:10px 0 0; padding-top:10px; border-top:1px dashed var(--line); font-weight:700; text-decoration:none }
.lg-body { min-width:0 }
.lg-intro { padding:18px 22px; margin:0 0 14px; border-radius:16px; background:var(--tint); border:1px solid var(--line); color:var(--ink2) } .lg-intro p { margin:0 } .lg-intro p + p { margin-top:8px }
.lg-sec { padding:22px 26px; margin:0 0 14px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh) }
.lg-sec h2 { display:flex; align-items:center; gap:12px; margin:0 0 10px; font-size:19px; letter-spacing:-.01em }
.lg-sec h2 .n { flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; font-size:15px; font-weight:800 }
.lg-sec p, .lg-sec ul, .lg-sec ol { color:var(--ink2); margin:8px 0 0 } .lg-sec ul, .lg-sec ol { padding-left:22px } .lg-sec li { margin:6px 0 } .lg-sec li::marker { color:var(--indigo) } .lg-sec b { color:var(--text) }
.lg-sec p.muted, .muted { color:var(--muted); font-size:14px }
.lg-contact { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:20px 24px; border-radius:16px; color:#fff; background:linear-gradient(135deg,#1e3a8a,#4f46e5) }
.lg-contact-t { flex:1; min-width:220px } .lg-contact b { font-size:17px } .lg-contact p { margin:2px 0 0; color:rgba(255,255,255,.85); font-size:14px }
.lg-contact-a { display:flex; gap:8px; flex-wrap:wrap } .lg-btn { padding:9px 16px; border-radius:10px; background:#fff; color:#1e3a8a; text-decoration:none; font-weight:700; font-size:14px } .lg-btn.ghost { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.35) }
.lg-foot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; max-width:1120px; margin:0 auto; padding:20px 28px 34px; color:var(--muted); font-size:13px; border-top:1px solid var(--line) }
.lg-foot a { margin-left:14px; color:var(--muted); text-decoration:none } .lg-foot a:hover { color:var(--text) }
@media (max-width:860px) {
  .lg-top { padding:10px 16px; gap:10px } .lg-top nav { display:none } .lg-cta { margin-left:auto; padding:7px 12px; font-size:13px }
  .lg-in { padding:28px 16px 0 } .lg-hero h1 { font-size:30px } .lg-switch { overflow-x:auto } .lg-switch a { white-space:nowrap; padding:9px 14px }
  .lg-wrap { grid-template-columns:1fr; padding:18px 16px 30px; gap:14px } .lg-toc { position:static } .lg-sec { padding:18px } .lg-foot { padding:18px 16px 28px } .lg-foot a { margin:0 14px 0 0 }
}