.legal-document {
    padding: 64px 0 88px;
}

.legal-document__draft {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: 14px;
    margin: 0 0 36px;
    padding: 14px 18px;
    border-left: 3px solid var(--danger);
    background: var(--danger-tint);
}

.legal-document__draft-label {
    margin: 0;
    color: var(--danger);
    font: 600 .8125rem/1.45 var(--font-mono);
    text-transform: uppercase;
}

.legal-document__draft-copy {
    margin: 0;
    color: var(--ink-soft);
    font: 400 .9375rem/1.55 var(--font-sans);
}

.legal-document__header {
    max-width: 760px;
    margin: 0 0 44px;
}

.legal-document__title {
    margin: 0 0 16px;
    font: 400 3.25rem/1.08 var(--font-display);
    color: var(--ink);
}

.legal-document__meta {
    color: var(--subtle);
    font: 400 .875rem/1.6 var(--font-mono);
}

.legal-document__meta span {
    display: block;
}

.legal-document__layout {
    display: grid;
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
    align-items: start;
    gap: 56px;
}

.legal-document__toc {
    position: sticky;
    top: calc(var(--topbar-height) + 24px);
    max-height: calc(100vh - var(--topbar-height) - 40px);
    overflow-y: auto;
    padding-top: 14px;
    border-top: 2px solid var(--accent);
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.legal-document__toc:hover,
.legal-document__toc:focus-within {
    scrollbar-color: var(--line-strong) transparent;
}

.legal-document__toc::-webkit-scrollbar {
    width: 8px;
}

.legal-document__toc::-webkit-scrollbar-track,
.legal-document__toc::-webkit-scrollbar-thumb {
    background: transparent;
}

.legal-document__toc:hover::-webkit-scrollbar-thumb,
.legal-document__toc:focus-within::-webkit-scrollbar-thumb {
    background: var(--line-strong);
}

.legal-document__toc-title {
    margin: 0 0 10px;
    color: var(--accent-strong);
    font: 500 .75rem/1.4 var(--font-mono);
    text-transform: uppercase;
}

.legal-document__toc a {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-soft);
    font: 400 .875rem/1.4 var(--font-sans);
}

.legal-document__toc a:hover {
    color: var(--accent-strong);
}

.legal-document__toc--numbered {
    counter-reset: legal-document-index;
}

.legal-document__toc--numbered a {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    counter-increment: legal-document-index;
}

.legal-document__toc--numbered a::before {
    content: counter(legal-document-index, decimal-leading-zero);
    font: 400 .6875rem/1.4 var(--font-mono);
    color: var(--subtle);
}

.legal-document__sections {
    min-width: 0;
    border-top: 2px solid var(--ink);
}

.legal-document__section {
    scroll-margin-top: calc(var(--topbar-height) + 24px);
    padding: 22px 0 24px;
    border-bottom: 1px solid var(--line-soft);
}

.legal-document__section-title {
    margin: 0 0 10px;
    color: var(--ink);
    font: 500 1.25rem/1.35 var(--font-sans);
}

.legal-document__section p,
.legal-document__section li {
    color: var(--muted);
    font: 400 1rem/1.7 var(--font-sans);
}

.legal-document__section p+p {
    margin-top: 12px;
}

.legal-document__section ul,
.legal-document__section ol {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
    padding-left: 22px;
}

.legal-document__section strong {
    color: var(--ink-soft);
}

.legal-document__section a {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-document__table-wrap {
    overflow-x: auto;
    margin-top: 12px;
}

.legal-document__section table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
}

.legal-document__section th,
.legal-document__section td {
    padding: 10px 12px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    font: 400 .9375rem/1.55 var(--font-sans);
}

.legal-document__section th {
    background: var(--paper-deep);
    color: var(--ink-soft);
    font-weight: 500;
}

.legal-document__section td {
    background: var(--surface);
}

.legal-document__contact {
    margin: 36px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font: 400 1rem/1.6 var(--font-sans);
    color: var(--muted);
}

.legal-document__contact a {
    font-weight: 500;
    color: var(--accent-strong);
}

@media (max-width: 899px) {
    .legal-document__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .legal-document__toc {
        position: static;
        max-height: none;
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 24px;
    }

    .legal-document__toc-title {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .legal-document {
        padding: 48px 0 56px;
    }

    .legal-document__draft {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        margin-bottom: 28px;
        padding: 12px 14px;
    }

    .legal-document__header {
        margin-bottom: 32px;
    }

    .legal-document__title {
        font-size: 2.5rem;
        line-height: 1.08;
    }

    .legal-document__layout {
        gap: 28px;
    }

    .legal-document__toc {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
    }

    .legal-document__section {
        padding: 18px 0 20px;
    }
}