.demo-cta {
    box-sizing: border-box;
    width: 100%;
    max-width: 1240px;
    margin: 24px auto 0;
    padding: 0 20px;
}

/* Глобальные .page section и .layout h2 перебивают блок, в том числе через !important. */
.page section.demo-cta {
    max-width: 1240px;
    margin: 24px auto 0 !important;
    padding: 0 20px !important;
}

.demo-cta--inset,
.page section.demo-cta.demo-cta--inset {
    max-width: none;
    margin: 24px 0 0 !important;
    padding: 0 !important;
}

.demo-cta--embedded,
.page section.demo-cta.demo-cta--embedded {
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
}

.demo-cta__card {
    display: flex;
    align-items: stretch;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.demo-cta__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 32px;
    background: linear-gradient(135deg, #d0a9dd 0%, #3e78e4 100%);
    color: #fff;
}

.demo-cta__title,
.layout .demo-cta .demo-cta__title {
    margin: 0;
    max-width: 580px;
    color: #fff;
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 35px;
    line-height: 45.5px;
    text-align: left;
}

.demo-cta__lead,
.layout .demo-cta .demo-cta__lead {
    margin: 0;
    color: #fff;
    font-family: Manrope, sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 35.86px;
    text-align: left;
}

.demo-cta__action {
    flex: 0 0 415px;
    width: 415px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 19px;
    padding: 20px;
    background: #fff;
}

.demo-cta__btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 291px;
    height: 60px;
    margin: 0;
    padding: 18px 32px;
    border: 0;
    border-radius: 10px;
    background: #0081e6;
    color: #fff;
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
}

.demo-cta__btn:hover,
.demo-cta__btn:focus-visible {
    background: #0076d1;
}

.demo-cta__note,
.layout .demo-cta .demo-cta__note {
    margin: 0;
    color: #2e3a59;
    font-family: Manrope, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
}

.demo-cta__phone,
.layout .demo-cta a.demo-cta__phone {
    color: #0081e6;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.demo-cta__phone:hover,
.demo-cta__phone:focus-visible {
    color: #0076d1;
}

@media (max-width: 1399px) {
    .demo-cta:not(.demo-cta--embedded),
    .page section.demo-cta:not(.demo-cta--embedded) {
        margin-top: 20px !important;
    }

    .demo-cta__card {
        flex-direction: column;
    }

    .demo-cta__copy {
        align-items: center;
    }

    .demo-cta__title,
    .layout .demo-cta .demo-cta__title {
        max-width: none;
        font-size: 32px;
        line-height: 1.3;
        text-align: center;
    }

    .demo-cta__lead,
    .layout .demo-cta .demo-cta__lead {
        font-size: 22px;
        line-height: 35.86px;
        text-align: center;
    }

    .demo-cta__action {
        flex: 1 1 auto;
        width: 100%;
        gap: 20px;
    }

    .demo-cta__note,
    .layout .demo-cta .demo-cta__note {
        font-size: 16px;
        line-height: 22px;
    }
}

/* Совпадает с брейкпоинтом template_styles.css, где обёртка видео инструментов выходит за контейнер на 94vw. */
@media (max-width: 768px) {
    .page .constructorWorks-wrapper + section.demo-cta.demo-cta--inset {
        width: auto;
        margin-right: calc(50% - 47vw) !important;
        margin-left: calc(50% - 47vw) !important;
    }
}

@media (max-width: 767px) {
    .demo-cta__copy {
        padding: 32px 24px;
    }

    .demo-cta__title,
    .layout .demo-cta .demo-cta__title {
        font-size: 24px;
        line-height: 1.3;
    }

    .demo-cta__title br {
        display: none;
    }

    .demo-cta__note,
    .layout .demo-cta .demo-cta__note {
        font-size: 15px;
        line-height: 21px;
    }

    .demo-cta__lead,
    .layout .demo-cta .demo-cta__lead {
        font-size: 18px;
        line-height: 1.45;
        text-align: center;
    }
}