.cbk_hbspt__close-btn-wrapper {
    max-width: 800px;
}
.cbk_hbspt__close-img {
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
}

.landing-pages__rental-service {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
    width: 100%;
    background: var(--rs-white);
    color: var(--rs-text);
    font-size: 16px;

    * {
        box-sizing: border-box;
    }

    :root & {
        --rs-white: #ffffff;
        --rs-black: #000000;
        --rs-text: #1f1f1f;
        --rs-purple: #8077ff;
        --rs-dark: #2a2650;
        --rs-icon: #8b83ff;
        --rs-card-border: rgba(255, 255, 255, 0.5);
        --rs-card-gradient-end: #37377d;
        --rs-other-border: #7d7d7d;
    }
    /* shared, reusable empty image rule (per spec) */
    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    & > .revive {
        width: calc(100% - 20px);
        max-width: 1920px;
        margin: 0 auto;

        ins {
            display: block;
            width: 100%;
            height: 100%;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
    }
    /* full-bleed band that keeps FEATURES and HOW-IT-WORKS flush (no gap) */
    & > .rental-service__band {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    /* divider line before the contact block */
    & .rental-service__divider {
        width: 100%;
        height: 0;
        margin: 0;
        border: 0;
        border-top: 1px solid #d9d9d9;
    }

    @media (max-width: 768px) {
        font-size: 12px;
        gap: 15px;
    }
    /* hero banner */
    .hero {
        position: relative;
        width: 100%;
        overflow: hidden;

        & > .mobile {
            display: none;
        }

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @media (max-width: 768px) {
            & {
                width: calc(100% - 20px);
                margin: 15px auto 0;
                border-radius: 10px;

                & > .mobile {
                    display: block
                }

                & > .desktop {
                    display: none;
                }
            }
        }
    }
    /* intro */
    & > .intro {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        width: 100%;
        max-width: 1508px;
        padding: 0 20px;
        box-sizing: border-box;
        text-align: center;
        color: var(--rs-text);

        & > .title {
            position: relative;
            margin: 0;
            padding-bottom: 14px;
            font-size: 2em;
            font-weight: 700;
            color: var(--rs-black);

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 55%;
                height: 4px;
                background-color: var(--cpro_jaune);
            }
        }

        & > .subtitle--small {
            margin: 0;
            font-size: 1em;
            font-weight: 500;
            line-height: 30px;
        }

        & > .subtitle {
            margin: 0;
            font-size: 1.5em;
            font-weight: 500;
            line-height: 30px;
        }

        & > .text {
            margin: 0;
            font-size: 1em;
            font-weight: 300;
            line-height: 1.875;
        }

        & > .btn {
            margin-top: 10px;
        }
    }

    .btn,
    .contact__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .5em 1em;
        font-size: 1em;
        font-weight: 500;
        line-height: 1em;
        text-align: center;
        text-decoration: none;
        color: var(--rs-black);
        background-color: var(--cpro_jaune);
        cursor: pointer;

        &:hover {
            background-color: var(--cpro_p100)
        }
    }
    /* Features */
    & .features {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 20px 10px;
        box-sizing: border-box;
        background: var(--rs-purple);

        & > .title {
            margin: 0;
            width: 100%;
            max-width: 1280px;
            font-size: 2em;
            font-weight: 500;
            line-height: 30px;
            text-align: center;
            color: var(--rs-white);
        }

        & > .grid {
            display: grid;
            width: 100%;
            max-width: 1280px;
            gap: 10px;
            /* left tall card + 6 fluid columns for the 2- and 3-card rows */
            grid-template-columns: 284px repeat(6, 1fr);
            grid-template-rows: 278px 278px 200px;
            grid-template-areas:
                "c1 c2 c2 c2 c3 c3 c3"
                "c1 c4 c4 c5 c5 c6 c6"
                "c7 c7 c7 c7 c7 c7 c7";

            & .card:nth-child(1) {
                grid-area: c1;
            }

            & .card:nth-child(2) {
                grid-area: c2;
            }

            & .card:nth-child(3) {
                grid-area: c3;
            }

            & .card:nth-child(4) {
                grid-area: c4;
            }

            & .card:nth-child(5) {
                grid-area: c5;
            }

            & .card:nth-child(6) {
                grid-area: c6;
            }

            & .card:nth-child(7) {
                grid-area: c7;
            }
        }

        & .card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            padding: 25px 10px;
            border: 1px solid var(--rs-card-border);
            border-radius: 10px;
            overflow: hidden;
            /* background image (empty src per spec) */
            & .image {
                position: absolute;
                inset: 0;
                border-radius: 10px;
            }
            /* legibility gradient toward the bottom of every card */
            &::after {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 10px;
                background: linear-gradient(to bottom, rgba(55, 55, 125, 0) 45%, var(--rs-card-gradient-end) 90%);
            }

            & > .title {
                position: relative;
                z-index: 1;
                margin: 0;
                font-size: 1.75em;
                font-weight: 600;
                line-height: 35px;
                text-align: center;
                color: var(--rs-white);
                transition: opacity .2s;
            }

            & .overview {
                z-index: 1;
                position: absolute;
                inset: 0;
                display: flex;
                flex-direction: column;
                row-gap: 5px;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                padding: 10px;
                background-color: #fffffff2;
                transform: translateY(101%);
                overflow-y: auto;
                transition: transform .2s ease-in;

                & > .title {
                    text-align: center;
                    color: #000;
                    font-size: 1.25em;
                }

                & > .text {
                    line-height: 1.15;
                    text-align: center;
                }
            }

            &:hover .overview {
                transform: translateY(0);
            }

            &:hover > .title {
                opacity: 0;
            }
        }
        /* 
           RESPONSIVE
           The layout reflows mostly via auto layout (flex-wrap). The single grid
           re-template below is the only structural breakpoint the FEATURES grid needs.
        */
        @media (max-width: 900px) {
            & > .grid {
                /* 2 columns; the last (wide) card spans the full row */
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "c1 c2"
                    "c3 c4"
                    "c5 c6"
                    "c7 c7";

                & .card {
                    min-height: 250px;
                }

                & .card--wide {
                    min-height: 200px;
                }

                & .card::after {
                    background: linear-gradient(180deg, rgba(130, 139, 255, 0.00) 37.5%, #828BFF 87.31%);
                }
            }
        }
    }
}

/* --------------------------------------------------------------------------
   HOW IT WORKS  (Frame 1618874564)  -> FLEXBOX
   -------------------------------------------------------------------------- */
.how-it-works {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 25px;
    width: 100%;
    padding: 20px 10px;
    background-color: var(--rs-dark);
    color: var(--rs-white);

    .how-it-works__image {
        flex: 1 1 400px;
        align-self: stretch;
        min-width: min(400px, 100%);
        max-width: 740px;

        .image {
            object-fit: cover; /* photo fills its rounded frame */
            border-radius: 22px 22px 22px 0;
        }
    }

    & .how-it-works__content {
        flex: 1 1 560px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        max-width: 1280px;
    }

    & .how-it-works__title {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: flex-start;
        margin: 0;
        max-width: 677px;
        min-height: 68px;
        padding: 5px;
        box-sizing: border-box;
        font-size: 1.5em; /* 24px */
        font-weight: 600;
        text-transform: uppercase;
        color: var(--rs-white);
        background: #57518c;
        border-radius: 0 10px 0 0;
    }
    /* segments share the bullet-title / underline treatment */

    & .how-it-works__segment {
        display: flex;
        flex-direction: column;
        gap: 13px;

        &.--upper {
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(85, 81, 115, 1);
        }

        & .title {
            position: relative;
            display: flex;
            align-items: center;
            gap: 11px;
            margin: 0;
            padding-bottom: 17px;
            font-size: 1.5em;
            color: #fff;
            font-weight: 600;
            line-height: normal;
            text-transform: uppercase;
            /* round bullet before the title */
            &::before {
                content: "";
                flex: 0 0 auto;
                width: 17px;
                height: 17px;
                border-radius: 50%;
                background-color: var(--rs-dark);
                border: 3px solid var(--cpro_jaune);
            }
            /* accent line after the title */
            &::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 112px;
                height: 5px;
                background: var(--cpro_jaune);
            }
        }

        & > .text {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0;
            font-size: 1em; /* 16px */
            font-weight: 400;
            line-height: normal;
            /* small round bullet before each condition */
            &::before {
                content: "";
                flex: 0 0 auto;
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--rs-white);
            }
        }

        & .subtitle {
            margin: 0;
            font-size: 1.25em; /* 20px */
            font-weight: 600;
            line-height: normal;
        }
    }
    /* the 3 step cards + closing notes */
    & .how-it-works__steps {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;

        & .card {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-content: baseline;
            justify-content: center;
            row-gap: 30px;
            column-gap: 10px;
            width: 100%;
            max-width: 365px;
            height: 230px;
            padding: 10px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='368' height='230' viewBox='0 0 368 230' fill='none'%3E%3Cpath d='M0 214.5V15C0 6.71573 6.71572 0 15 0H329.318C333.848 0 337.812 3.0453 338.98 7.42231L367.336 113.708C367.561 114.555 367.561 115.445 367.334 116.291L338.986 222.088C337.815 226.46 333.853 229.5 329.327 229.5H15C6.71573 229.5 0 222.784 0 214.5Z' fill='%23453F7E'/%3E%3C/svg%3E");
            background-repeat: no-repeat;

            &:nth-child(2) {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='365' height='230' viewBox='0 0 365 230' fill='none'%3E%3Cpath d='M325.949 229.5H15.0053C5.5114 229.5 -1.59447 220.791 0.310277 211.491L19.9166 115.753C20.0522 115.091 20.0522 114.409 19.9166 113.747L0.310277 18.0094C-1.59447 8.70858 5.51139 0 15.0053 0H325.94C330.47 0 334.435 3.0453 335.602 7.42231L363.958 113.708C364.183 114.555 364.183 115.445 363.956 116.291L335.608 222.088C334.437 226.46 330.475 229.5 325.949 229.5Z' fill='%235952A2'/%3E%3C/svg%3E");
            }

            &:nth-child(3) {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='365' height='230' viewBox='0 0 365 230' fill='none'%3E%3Cpath d='M325.949 229.5H15.0053C5.5114 229.5 -1.59447 220.791 0.310277 211.491L19.9166 115.753C20.0522 115.091 20.0522 114.409 19.9166 113.747L0.310277 18.0094C-1.59447 8.70858 5.51139 0 15.0053 0H325.94C330.47 0 334.435 3.0453 335.602 7.42231L363.958 113.708C364.183 114.555 364.183 115.445 363.956 116.291L335.608 222.088C334.437 226.46 330.475 229.5 325.949 229.5Z' fill='%236F66C9'/%3E%3C/svg%3E");
            }

            & .step {
                width: 100%;
                height: fit-content;
                text-align: center;
            }

            & .icon {
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 0 0 auto;
                width: 60px;
                height: 60px;
                padding: 0 12px 0 13px;
                box-sizing: border-box;
                border-radius: 10px;
                background: var(--rs-icon);
            }

            & .text {
                font-size: 0.9375em;
                font-weight: 400;
                line-height: 20px;
                width: 100%;
                max-width: 232px;
            }

            @media (max-width: 768px) {
                & {
                    align-items: center;
                    align-content: center;
                    background: #453F7E;
                    border-radius: 10px;
                    max-width: 100%;
                    height: fit-content;
                    min-height: 90px;
                    row-gap: 10px;
                }

                &:nth-child(2) {
                    background: rgba(89, 82, 162, 1);
                }

                &:nth-child(3) {
                    background: rgba(111, 102, 201, 1);
                }

                & .step {
                    width: initial;

                    svg {
                        width: 30px;
                        height: 25px;
                    }
                }

                & .icon {
                    width: 50px;
                    height: 50px;
                }

                & .text {
                    line-height: 1.25;
                    width: calc(100% - 160px);
                }
            }
        }

        & > .text {
            flex: 1 1 100%;
            margin: 0;
            font-size: 1em; /* 16px */
            font-weight: 600;
            line-height: normal;
        }
    }
}

/* --------------------------------------------------------------------------
   CONTACT  (Frame 1618874473)  -> FLEXBOX
   -------------------------------------------------------------------------- */
.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 1260px;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
    color: var(--rs-black);

    & .contact__title {
        margin: 0;
        font-size: 1.5em;        /* 24px */
        font-weight: 500;
        line-height: 30px;
        color: var(--rs-text);
    }

    & .contact__text {
        margin: 0;
        font-size: 1em;          /* 16px */
        font-weight: 300;
        line-height: 20px;
        color: var(--rs-text);
    }
}

/* --------------------------------------------------------------------------
   OTHER SERVICES  (Frame 1618874475)  -> FLEXBOX
   -------------------------------------------------------------------------- */
.other-service {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    width: 100%;
    padding: 48px 20px;
    box-sizing: border-box;
    background: var(--rs-dark);

    & .other-service__title {
        margin: 0;
        font-size: 1.5em;        /* 24px */
        font-weight: 400;
        line-height: 28px;
        text-align: center;
        color: var(--rs-white);
    }

    & .other-service__cards {
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
        width: 100%;
        max-width: 1280px;
    }

    & .other-service__card {
        position: relative;
        flex: 1 1 280px;
        min-height: 214px;
        border: 1px solid var(--rs-other-border);
        border-radius: 10px;
        overflow: hidden;
        text-decoration: none;
        
        &:hover .image {
            transform: scale(1.05);
        }

        /* background image (empty src per spec) */
        & .image {
            position: absolute;
            inset: 0;
            border-radius: 10px;
            transition: transform .2s;
        }


        /* bottom label bar */
        & .title {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 14px;
            box-sizing: border-box;
            font-size: 1em;      /* 16px */
            font-weight: 500;
            line-height: normal;
            text-align: center;
            text-transform: uppercase;
            text-decoration: underline;
            color: var(--rs-white);
            background: var(--rs-black);
            border-radius: 0 0 10px 10px;
        }
    }
}