document.addEventListener('DOMContentLoaded', () => {
    const benefitsCards = document.querySelectorAll('.benefits-card');

    benefitsCards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            const ulElement = card.querySelector('ul');
            card.style.setProperty('--ul-height', `${ulElement.scrollHeight}px`);
            card.classList.add('is-expanded');
        });

        card.addEventListener('mouseleave', () => {
            card.classList.remove('is-expanded');
            card.style.removeProperty('--ul-height');
        });
    });
});