#app.legal { min-height: 100vh; background: radial-gradient(60% 40% at 80% 10%, rgba(47,91,255,.38), transparent 70%), radial-gradient(40% 30% at 8% 60%, rgba(255,106,26,.16), transparent 70%), var(--ink); color: var(--bone); padding-bottom: 60px; }
.legal .top { margin-bottom: 8px; }
.doc { max-width: 900px; margin: 44px auto 0; padding: clamp(24px, 5vw, 56px); border-radius: 32px; background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.16); box-shadow: var(--gk-edge), 0 40px 80px -40px rgba(0,0,0,.7); -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); }
.doc h1 { font-size: clamp(32px, 5.2vw, 58px); margin: 0 0 10px; }
.doc .updated { color: var(--mute-k); font-size: 15px; margin-bottom: 28px; }
.doc h2 { font-size: clamp(20px, 2.4vw, 25px); margin: 38px 0 10px; line-height: 1.25; }
.doc p, .doc li { font-size: 17px; line-height: 1.8; color: #cdd5f0; margin: 0 0 12px; }
.doc ul { margin: 0 0 12px; padding-inline-start: 24px; }
.doc li::marker { color: var(--elec-k); }
.doc a { color: var(--bone); }
.doc mark.ph { background: #ffe066; color: #1a1a1a; padding: 0 5px; border-radius: 5px; }
.legal footer { margin-top: 56px; }
.legal .docnav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.legal .docnav a { padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); text-decoration: none; font-size: 15px; font-weight: 500; }
.legal .docnav a[aria-current] { background: linear-gradient(180deg, rgba(255,150,80,.96), rgba(255,98,18,.9)); border-color: rgba(255,255,255,.5); color: #fff; }
@media (max-width: 820px) { .legal .nav a.cta { display: inline; } }