/* @group Highlights */

.highlights {
    --_lg-x: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(226, 230, 235) 10%, rgb(226, 230, 235) 90%, rgb(255, 255, 255) 100%);
    --_lg-y: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(226, 230, 235) 10%, rgb(226, 230, 235) 90%, rgb(255, 255, 255) 100%);
    position: relative;
}

/* 2026-08-28 — net-new toggle-background wiring (module: components/flexible/_modules/toggle-background/). */
.highlights .toggle-background {
    inset: 0;
    position: absolute;
    z-index: -1;
}

.highlights .toggle-background img {
    object-fit: contain;
    object-position: center right;
}

.highlights .section-title {
    margin-bottom: 4rem;
}

.highlights .cards-row .card {
    padding: 5rem 3rem 3rem;
}

.highlights .cards-row .card-header {
    margin: 0 0 2.5rem;
}

.highlights .cards-row .card-title {
    margin: 0;
    color: var(--header-2);
    font-weight: 600;
}

.highlights .cards-row .see-more {
    flex: 0 0 auto;
}

.highlights .cards-row .card-description {
    margin: 0;
    color: var(--paragraph);
}

@media only screen and (min-width: 768px) {

    .highlights {
        --_p-t: 20rem;
        padding-top: var(--_p-t);
        margin-top: calc( var(--_p-t) * -1);
    }

}

@media only screen and (max-width: 767px) {
    .highlights :is(.text-col, .cards-col) {
        padding-inline: 5.7rem;
    }
    .highlights .cards-row .card:first-child {
        border-radius: 2rem 2rem 0 0;
    }
    .highlights .cards-row .card {
        padding: 3rem 4rem 6rem;
        position: relative;
    }
    .highlights .bttn-textlink {
        position: absolute;
        bottom: 3rem;
        left: 4rem;
    }
}

/* @end */