/* =================================================================== ENGAGEMENT section css =================================================================== */
.engagement {
    & .engagement__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
        gap: var(--g30);
    }

    & .engagement__card {
        display: flex; flex-direction: column;
        padding: var(--sp40);
        background: var(--white);
        border-radius: var(--r-xl);
        transition: var(--transition);

        &:hover { transform: translateY(-6px); }

        &.engagement__card--featured {
            background: var(--primary);
            color: var(--white-muted);

            & .engagement__name,
            & .engagement__suited { color: var(--white); }
            & .engagement__icon { background: var(--white); }
            & .engagement__check { background: var(--white); color: var(--primary); }
            & .engagement__features { border-color: var(--line-dark); }
            & .engagement__feature { color: var(--white); }
        }
    }

    & .engagement__head {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--sp10);
        margin-bottom: var(--sp15);
    }

    & .engagement__name { font-size: var(--f25); }

    & .engagement__icon {
        display: flex; align-items: center; justify-content: center;
        width: 70px; height: 70px;
        margin-bottom: var(--sp25);
        background: var(--surface-light);
        border-radius: var(--r-lg);
        color: var(--primary);
    }

    & .engagement__suited {
        margin-bottom: var(--sp10);
        font-family: var(--font-mona);
        font-size: var(--f18);
        font-weight: 500;
        color: var(--ink);
    }

    & .engagement__features {
        flex: 1;
        display: grid;
        align-content: start;
        gap: var(--sp15);
        padding-block: var(--sp25);
        margin-block: var(--sp25);
        border-block: 1px solid var(--line);
    }

    & .engagement__feature {
        display: flex; align-items: center;
        gap: var(--sp10);
        color: var(--ink);
    }

    & .engagement__check {
        display: flex; flex: 0 0 auto; align-items: center; justify-content: center;
        width: 22px; height: 22px;
        background: var(--primary);
        border-radius: var(--r-full);
        color: var(--white);
    }
}

/* =================================================================== ENGAGEMENT responsive =================================================================== */
@media (max-width: 991.98px) {
    .engagement {
        & .engagement__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
    }
}

@media (max-width: 575.98px) {
    .engagement {
        & .engagement__card { padding: var(--sp25); }
    }
}