.doc { max-width: 820px; margin: 0 auto; padding: 60px 20px 100px; line-height: 1.7; color: var(--text); }
.doc h1 { font-size: clamp(32px, 6vw, 48px); letter-spacing: -1.5px; margin: 0 0 6px; color: var(--text); animation: legal-in .6s cubic-bezier(.2, .8, .2, 1) both; }
.doc h2 { font-size: 24px; margin: 42px 0 8px; color: var(--text); letter-spacing: -.5px; scroll-margin-top: 90px; }
.doc .meta { color: var(--text-2); }
.doc .lead { font-size: 19px; color: var(--text); padding: 18px 22px; border-radius: 18px; background: linear-gradient(135deg, rgba(51, 144, 236, .16), rgba(166, 92, 240, .12)); border: 1px solid var(--line); }
.doc li { margin: 7px 0; }
.doc a { color: var(--accent); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.toc a { padding: 6px 14px; border-radius: 20px; background: var(--bg-2); color: var(--text-2); text-decoration: none; font-size: 14px; transition: background .2s, transform .2s; }
.toc a:hover { background: rgba(106, 179, 243, .2); transform: translateY(-2px); }
.rules { counter-reset: r; list-style: none; padding: 0; display: grid; gap: 10px; }
.rules li { counter-increment: r; position: relative; padding: 14px 16px 14px 56px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.rules li::before { content: counter(r); position: absolute; left: 14px; top: 13px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #3390ec; color: #fff; font-weight: 700; font-size: 14px; }
.doc h2, .doc p, .doc ul, .rules li { animation: legal-in .6s cubic-bezier(.2, .8, .2, 1) both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
@keyframes legal-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .doc * { animation: none !important; } }