/* RESPONSIVE STYLES */

@media screen and (max-width: 1200px) {
    .hero-title {
        font-size: 40px;
    }

    .table-header-col-val,
    .table-feat-val {
        width: 170px;
    }
}

@media screen and (max-width: 992px) {
    :root {
        --sezione: 80px;
        --interno: 25px;
    }

    .steps-nav-btn {
        display: none;
    }

    .hero-card {
        min-height: 500px;
        border-radius: 16px;
        background-position: 60%;
    }

    .hero-content {
        padding: 40px 24px;
        max-width: 100%;
    }

    .hero-title {
        font-size: 32px;
        line-height: 1.25;
    }

    .section-title {
        font-size: 28px;
    }

    .section-subtitle {
        font-size: 16px;
    }

    .pricing-card {
        padding: 30px 24px;
    }

    .pricing-card-title {
        font-size: 26px;
    }

    /* .mockup-video-frame video {
        height: 240px;
    } */

    .comparison-table-wrapper {
        overflow: hidden;
    }

    .comparison-table-inner {
        width: 100%;
        max-height: 450px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #CBD5E1 transparent;
    }

    .table-row-header {
        position: sticky;
        top: 0;
        z-index: 10;
        min-width: 680px;
        padding: 16px 20px;
    }

    .comparison-table-body {
        max-height: none;
        overflow: visible;
        min-width: 680px;
    }

    .table-row-item {
        min-width: 680px;
        padding: 16px 20px;
    }

    .bottom-cta-card {
        padding: 60px 24px;
        border-radius: 18px;
        background-image: url('../Banner-mob.jpg');
    }

    .bottom-cta-title {
        font-size: 32px;
    }

    .bottom-cta-subtitle {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .feature-card {
        padding: 24px 20px;
    }

    .feature-stat {
        font-size: 40px;
    }

    .feature-title {
        font-size: 18px;
    }

    .pricing-price-tag.base {
        font-size: 22px;
    }

    .pricing-price-tag.pro {
        font-size: 24px;
    }

    .bottom-cta-title {
        font-size: 28px;
    }
}

@media screen and (max-width: 576px) {
    .hero-title {
        font-size: 26px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .section-title {
        font-size: 24px;
    }

    .section-subtitle {
        font-size: 15px;
    }

    .btn-miapp-primary {
        width: 100%;
        padding: 12px 20px;
        font-size: 15px;
    }

    .btn-miapp-outline {
        width: 100%;
        padding: 10px 18px;
        font-size: 14px;
    }

    .bottom-cta-title {
        font-size: 24px;
    }

    .bottom-cta-subtitle {
        font-size: 14px;
    }

    .mockup-video-screen {
        border-radius: 0 8px 8px 8px;
    }

    .plan-badge.pro {
        font-size: 11px;
    }

    .steps-swiper .swiper-pagination {
        margin-top: 24px;
    }
}