/* ==========================================
   RESPONSIVE — MOBILE APP PAGE
========================================== */

@media (max-width: 640px) {

    .app-hero-shell {
        padding: 16px 16px 60px;
    }

    .app-hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .app-hero-right {
        order: 2;
        padding: 0 24px 40px;
    }

    .app-hero-left {
        order: 1;
    }

    .app-hero-left {
        padding: 32px 24px 40px;
        gap: 20px;
    }

    .app-screens {
        width: 280px;
        height: 340px;
    }

    .screen-center {
        width: 160px;
    }

    .screen {
        width: 140px;
    }

    .app-store-badges {
        gap: 10px;
    }


    /* Sections */

    .ma-testimonial-section {
        padding: 0 16px 56px;
    }

    .ma-testimonial-card {
        padding: 40px 24px;
    }

    .ma-quote-mark {
        font-size: 5rem;
    }

    .ma-quote-text {
        font-size: 1rem;
    }


    

    /* Journey */

    .ma-journey-section {
        padding: 0 16px 56px;
    }

    .ma-journey-card {
        padding: 40px 24px;
    }

    .ma-journey-tabs {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 100%;
    }

    .ma-tab {
        padding: 12px 14px;
        gap: 8px;
    }

    .ma-tab-label {
        font-size: 0.8rem;
    }

    .ma-step-panel.active {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ma-step-screens {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .ma-step-screen {
        height: 200px;
        width: auto;
        flex-shrink: 0;
    }

    .ma-step-screen-raised {
        transform: translateY(-12px);
    }

    /* Languages & Levels */

    .ma-langs-section {
        padding: 0 16px 56px;
    }

    .ma-langs-card {
        padding: 40px 24px;
    }

    .ma-langs-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ma-langs-right {
        order: -1;
        margin-bottom: 36px;
    }

    .ma-balloons-stage {
        height: 260px;
    }

    .ma-balloon {
        width: 56px;
    }

    .ma-langs-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }


    /* Comparison table */

    .ma-compare-section {
        padding: 0 16px 56px;
    }

    .ma-compare-row {
        grid-template-columns: 1fr 80px 80px;
    }

    .ma-compare-feature {
        padding: 14px 0;
        font-size: 0.8rem;
        gap: 0;
    }

    .ma-compare-feature svg {
        display: none;
    }

    .ma-compare-col {
        padding: 14px 8px;
    }

    .ma-check,
    .ma-check-other {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }

    .ma-price-low,
    .ma-price-high {
        font-size: 0.9rem;
    }

    .ma-compare-header-row .ma-compare-col {
        min-height: 72px;
        padding: 16px 8px;
    }

    .ma-compare-logo {
        height: 22px;
    }

    .ma-compare-card {
        padding: 28px 20px;
    }

    /* Learner reviews */

    .ma-reviews-section {
        padding: 0 16px 56px;
    }

    .ma-reviews-card {
        padding: 40px 24px;
    }

    .ma-reviews-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ma-review {
        padding: 20px 0;
        border-left: none;
        border-top: 1px solid rgba(107, 57, 189, 0.15);
    }

    .ma-review:first-child {
        padding-top: 0;
        border-top: none;
    }

    .ma-review-footer {
        border-top: none;
        padding-top: 0;
    }

    /* FAQ */

    .ma-faq-section {
        padding: 0 16px 56px;
    }

    .ma-faq-card {
        padding: 40px 24px;
    }

    .ma-faq-question {
        font-size: 0.92rem;
    }

}