.legal-reference { display: flex; gap: var(--space-3); justify-content: space-between; padding-block: var(--space-3); border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.legal-reference p { margin: 0; }
.legal-content { padding-block: var(--section-space); }
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-height) + var(--space-4)); max-height: calc(100dvh - var(--header-height) - var(--space-6)); overflow-y: auto; padding-right: var(--space-3); border-right: 1px solid var(--border); }
.legal-toc h2 { font: 650 13px var(--font); letter-spacing: 0; }
.legal-toc ol { margin: var(--space-3) 0 0; padding-left: 22px; }
.legal-toc li { font-size: 12px; padding-bottom: 10px; color: var(--muted); }
.legal-toc a { color: var(--muted); text-decoration: none; }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--secondary); text-decoration: underline; }
.legal-prose { margin: 0; font-size: 16px; }
.legal-prose > section { border-top: 1px solid var(--border); padding-top: var(--space-4); margin-top: var(--space-5); }
.legal-prose h2 { display: flex; align-items: baseline; gap: var(--space-2); font-size: 26px; line-height: 1.35; }
.clause-number { font: 12px var(--mono); color: var(--secondary); flex-shrink: 0; }
.legal-prose h3 { font-size: 20px; margin-top: var(--space-3); }
.legal-prose p, .legal-prose ul, .legal-prose ol { color: var(--muted); }
.legal-prose ul, .legal-prose ol { padding-left: 22px; }
.legal-prose li { margin-bottom: 8px; }
.legal-prose code { font-size: 13px; color: var(--text); }
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; gap: var(--space-5); } .legal-toc { position: static; max-height: none; border-right: 0; padding-right: 0; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); } .legal-toc ol { columns: 2; } .legal-toc li { break-inside: avoid; } .legal-prose { margin-inline: auto; } }
@media (max-width: 420px) { .legal-reference { flex-direction: column; gap: 8px; } .legal-toc ol { columns: 1; } .legal-prose h2 { font-size: 23px; } }