.legal {
    padding: 40px 0 120px;
}

.legal__layout {
    display:               grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap:                   32px;
    align-items:           start;
}

/* Зміст */
.legal-toc {
    position:       sticky;
    top:            120px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    max-height:     calc(100vh - 140px);
    padding:        24px;
    border-radius:  28px;
    overflow-y:     auto;
    background:     var(--bg-subtle);
}

.legal-toc__title {
    font-size:   20px;
    line-height: 28px;
    font-weight: 600;
    color:       var(--text-primary);
}

.legal-toc__list {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.legal-toc__link {
    display:         flex;
    gap:             10px;
    padding:         8px 12px;
    border-radius:   12px;
    font-size:       15px;
    line-height:     22px;
    color:           var(--text-primary);
    text-decoration: none;
    transition:      background var(--transition);
}

.legal-toc__link:hover,
.legal-toc__link.is-active { background: var(--neutral-0); }

.legal-toc__number {
    flex:        0 0 auto;
    font-weight: 600;
    color:       var(--blue-500);
}

.legal-toc__text { font-weight: 500; }

.legal-toc__link:focus-visible {
    outline:        2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Документ */
.legal-doc {
    padding: 57px 65px 0;
    min-width: 0;
}

.legal-doc__head {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-bottom:  40px;
}

.legal-doc__title {
    font-size:   36px;
    line-height: 44px;
    font-weight: 700;
    color:       var(--text-primary);
}

.legal-doc__subtitle {
    font-size:   20px;
    line-height: 28px;
    font-weight: 500;
    color:       var(--text-secondary);
}

.legal-doc__body {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    counter-reset:  legal;
    font-size:      16px;
    line-height:    26px;
    color:          var(--text-secondary);
    overflow-wrap:  anywhere;
}

.legal-doc__body > * { margin: 0; }

.legal-doc__body h2 {
    display:      flex;
    align-items:  center;
    gap:          14px;
    margin-top:   26px;
    padding-top:  40px;
    border-top:   1px solid var(--blue-100);
    font-size:    24px;
    line-height:  32px;
    font-weight:  600;
    color:        var(--text-primary);
    counter-increment: legal;
    scroll-margin-top: 120px;
}

.legal-doc__body h2:first-child {
    margin-top:  0;
    padding-top: 0;
    border-top:  0;
}

.legal-doc__body h2::before {
    display:         inline-flex;
    flex:            0 0 auto;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border-radius:   var(--radius-pill);
    font-size:       15px;
    line-height:     1;
    font-weight:     700;
    color:           var(--blue-500);
    background:      #ecf3fb;
    content:         counter(legal);
}

.legal-doc__body h3 {
    font-size:   16px;
    line-height: 26px;
    font-weight: 600;
    color:       var(--text-primary);
}

.legal-doc__body a {
    color:           var(--blue-500);
    text-decoration: underline;
}

.legal-doc__body ul {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    padding:        0 0 0 24px;
    list-style:     none;
}

.legal-doc__body li {
    position:     relative;
    padding-left: 18px;
}

.legal-doc__body li::before {
    position:      absolute;
    top:           10px;
    left:          0;
    width:         6px;
    height:        6px;
    border-radius: var(--radius-pill);
    background:    var(--orange-500);
    content:       '';
}

.legal-doc__requisites {
    margin-top:    40px;
    padding:       28px;
    border-radius: 24px;
    font-size:     16px;
    line-height:   24px;
    color:         var(--text-secondary);
    background:    var(--bg-subtle);
}

.legal-doc__requisites p { margin: 0 0 6px; }

.legal-doc__requisites p:last-child { margin-bottom: 0; }

.legal-doc__requisites p:first-child,
.legal-doc__requisites strong {
    font-weight: 600;
    color:       var(--text-primary);
}

@media (max-width: 1279px) {
    .legal__layout { grid-template-columns: 300px minmax(0, 1fr); }

    .legal-doc { padding: 40px 32px 0; }
}

@media (max-width: 1023px) {
    .legal { padding: 32px 0 80px; }

    .legal__layout { grid-template-columns: 1fr; }

    .legal-toc {
        position:   static;
        max-height: none;
    }

    .legal-doc { padding: 32px 0 0; }
}

@media (max-width: 767px) {
    .legal-toc {
        padding:       20px 16px;
        border-radius: 24px;
    }

    .legal-doc__title {
        font-size:   28px;
        line-height: 34px;
    }

    .legal-doc__subtitle {
        font-size:   17px;
        line-height: 24px;
    }

    .legal-doc__body h2 {
        gap:         12px;
        font-size:   20px;
        line-height: 28px;
    }

    .legal-doc__body ul { padding-left: 8px; }

    .legal-doc__requisites {
        padding:       20px;
        border-radius: 20px;
    }
}