/* ============================================================
   Responsive — Mobile & Tablet
   ============================================================ */

@media (max-width: 1024px) {
    .pain-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .value-grid { grid-template-columns: repeat(2, 1fr); }
    .rankings-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .price-card.is-featured { transform: none; }
    .price-card.is-featured:hover { transform: translateY(-4px); }
    .feature-panel { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
    .feature-panel .feature-image { aspect-ratio: 16 / 9; }
    .trial-cta-grid { grid-template-columns: 1fr; gap: 32px; }
    /* .site-footer-grid responsive overrides moved to footer.css */
}

@media (max-width: 720px) {
    :root {
        --gutter: 16px;
    }
    .section { padding: 48px 0; }
    .section-head { margin-bottom: 32px; }

    .hero { padding: 64px var(--gutter) 48px; }
    .hero h1 { font-size: 1.75rem; }
    .hero-subtitle { font-size: 0.9375rem; }
    .hero-search { flex-direction: column; padding: 12px; gap: 12px; }
    .hero-search-input { padding: 12px 14px; }
    .hero-search-btn { width: 100%; }
    .hero-search-note { font-size: 0.75rem; }

    .pain-grid,
    .why-grid,
    .steps-grid,
    .value-grid,
    .rankings-grid { grid-template-columns: 1fr; gap: 16px; }

    .step-card { padding: 24px 20px; }
    .step-card .icon-chip { width: 48px; height: 48px; }
    .step-card .icon-chip svg { width: 24px; height: 24px; }

    .tabs-bar { flex-wrap: wrap; max-width: 100%; }
    .tabs-bar button { font-size: 0.8125rem; padding: 8px 14px; }

    .price-card { padding: 24px 20px; }

    .trial-cta { padding: 56px var(--gutter); }
    .trial-cta-grid { gap: 24px; }
    .trial-cta-features { padding: 20px; }

    /* .site-footer responsive overrides moved to footer.css */

    .report-header { padding: 32px 24px; }
    .report-header h1 { font-size: 1.5rem; }
    .score-card, .report-section { padding: 20px; }
    .score-grid { grid-template-columns: repeat(2, 1fr); }
    .score-item { padding: 16px 14px; }
    .score-item .score-num { font-size: 1.625rem; }

    .modal-body { padding: 20px 20px 24px; }
    .modal-header { padding: 18px 20px 14px; }

    .fixed-bar .btn { display: block; margin: 4px auto; max-width: 320px; }
}

@media (max-width: 420px) {
    .score-grid { grid-template-columns: 1fr; }
}