:root {
    --fs-p__sec-top-cta: clamp(19px, 1.75vw, 22px);
    --width-dots_line__sec-top-cta: 75px;
}
@media screen and (max-width: 1399px) {
    :root {
        --width-dots_line__sec-top-cta: 70px;
    }
}
@media screen and (max-width: 1199px) {
    :root {
        --width-dots_line__sec-top-cta: 65px;
    }
}
@media screen and (max-width: 959px) {
    :root {
        --fs-p__sec-top-cta: clamp(16px, 2.75vw, 18px);
        --width-dots_line__sec-top-cta: 60px;
    }
}
@media screen and (max-width: 767px) {
    :root {
        --width-dots_line__sec-top-cta: 55px;
    }
}
section.sec-top-cta {
    padding: 24px 20px;
    background: #2a3037;
    p.p__sec-top-cta {
        color: #fff;
        text-align: center;
        font-size: var(--fs-p__sec-top-cta);
    }
    .dots_line {
        display: flex;
        justify-content: center;
        padding: 30px 0;
        img {
            width: var(--width-dots_line__sec-top-cta);
        }
    }
    .wrap__btn_top-cta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-content: center;
        justify-items: center;
        max-width: 800px;
        margin: 0 auto;
        column-gap: 30px;
        a.btn-common {
            margin: 0;
            width: 100%;
            max-width: 400px;
        }
    }
}
@media screen and (max-width: 767px) {
    section.sec-top-cta {
        .wrap__btn_top-cta {
            column-gap: 20px;
        }
    }
}
@media screen and (max-width: 480px) {
    section.sec-top-cta {
        padding: 24px 10px;
        .wrap__btn_top-cta {
            column-gap: 0;
            grid-template-columns: 1fr;
            row-gap: 25px;
            a.btn-common.btn-common202512,
            a.btn-common.btn-common-white.btn-common-white202512 {
                width: clamp(285px, 72.5vw, 350px);
            }
        }
    }
}

/* Enterprise restyle, top page only. .sec-top-cta is shared with features/ and
   pricing/, so this must stay scoped. The band is near-black, the same colour as
   the primary button, so the palette is inverted inside it. */
.page-home.body-renewal2025 section.sec-top-cta {
    padding-block: 36px;

    .dots_line {
        padding: 16px 0;

        img {
            width: clamp(33px, 2.9vw, 45px);
        }
    }

    /* Green is reserved for primary actions only (header, hero, this band), so that
       a green button always means "act". Flat fill rather than the old gradient. */
    a.btn-common.btn-common202512 {
        background: var(--main-color-1);
        color: #fff;
        box-shadow: none;

        .allow-box {
            background: #fff;

            &::after {
                color: var(--main-color-d1);
            }
        }

        &:hover {
            background: var(--main-color-d1);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(11, 163, 96, 0.45);

            .allow-box::after {
                transform: translateX(6px);
            }
        }
    }

    a.btn-common.btn-common-white.btn-common-white202512 {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.7);
        color: #fff;
        box-shadow: none;

        .allow-box {
            background: rgba(255, 255, 255, 0.15);

            &::after {
                color: #fff;
            }
        }

        /* Secondary hover fills black elsewhere; on this dark band it inverts to white.
           The arrow circle goes light grey so it stays visible on white. */
        &:hover {
            background: #fff;
            border-color: #fff;
            color: #2a3037;
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);

            .allow-box {
                background: #f3f3f7;

                &::after {
                    color: #2a3037;
                    transform: translateX(6px);
                }
            }
        }
    }
}