/* ==========================================================================
   seo-mobile.css — Global mobile enhancements for all SEO / landing pages.
   Fills gaps NOT covered by each page's inline <style> 767px block.
   Uses "body .seo-*" for specificity 0,0,1,1 (beats inline 0,0,1,0).
   ========================================================================== */

/* ---------- 767px: phone / small-tablet ---------- */
@media (max-width: 767px) {

    /* ── Stats ── */
    body .seo-stat-number {
        font-size: 2rem;
    }
    body .seo-stat-item {
        padding: 1.5rem 1rem;
    }
    body .seo-stat-label {
        font-size: 0.9rem;
    }

    /* ── Feature cards ── */
    body .seo-feature-icon {
        width: 48px;
        height: 48px;
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
    body .seo-feature-card-inner {
        padding: 1.5rem;
    }

    /* ── Comparison table ── */
    body .seo-comparison-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body .seo-comparison-table td,
    body .seo-comparison-table th {
        word-break: break-word;
        min-width: 90px;
    }

    /* ── Steps ── */
    body .seo-step-num {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    body .seo-step {
        padding: 1.5rem 0.75rem;
    }

    /* ── FAQ ── */
    body .seo-faq-item {
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }
    body .seo-faq-q {
        font-size: 1rem;
    }

    /* ── Internal links ── */
    body .seo-links {
        gap: 0.5rem;
        padding: 1.5rem 0.75rem;
    }
    body .seo-link {
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
    }

    /* ── CTA body text ── */
    body .seo-cta p {
        font-size: 1rem;
    }

    /* ── Resource grid (Products pages) ── */
    body .seo-resource-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    body .seo-resource-card:hover {
        transform: none;
        box-shadow: none;
    }

    /* ── Use-cases grid ── */
    body .seo-use-cases {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* ── Tips list ── */
    body .seo-tips {
        padding: 1.25rem;
    }
}

/* ---------- 480px: small phones ---------- */
@media (max-width: 480px) {

    /* ── Hero ── */
    body .seo-hero {
        padding: 3rem 0.75rem 1.5rem;
    }
    body .seo-hero-title {
        font-size: 1.75rem;
    }
    body .seo-hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1.75rem;
    }

    /* ── Sections ── */
    body .seo-section {
        padding: 2.5rem 0.75rem;
    }
    body .seo-section-title {
        font-size: 1.5rem;
    }
    body .seo-section-subtitle {
        font-size: 0.9rem;
        margin-bottom: 2rem;
    }

    /* ── Stats ── */
    body .seo-stat-number {
        font-size: 1.75rem;
    }
    body .seo-stat-item {
        padding: 1.25rem 0.75rem;
    }
    body .seo-stat-label {
        font-size: 0.85rem;
    }

    /* ── Feature cards ── */
    body .seo-feature-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }
    body .seo-feature-card-inner {
        padding: 1.25rem;
    }
    body .seo-feature-title {
        font-size: 1.1rem;
    }
    body .seo-feature-desc {
        font-size: 0.85rem;
    }

    /* ── Comparison table ── */
    body .seo-comparison-table th,
    body .seo-comparison-table td {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    /* ── Steps ── */
    body .seo-step {
        padding: 1rem 0.5rem;
    }
    body .seo-step-num {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }
    body .seo-step-title {
        font-size: 1rem;
    }
    body .seo-step-desc {
        font-size: 0.8rem;
    }

    /* ── FAQ ── */
    body .seo-faq-item {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    body .seo-faq-q {
        font-size: 0.95rem;
    }
    body .seo-faq-a {
        font-size: 0.85rem;
    }

    /* ── CTA ── */
    body .seo-cta {
        padding: 3rem 0.75rem;
    }
    body .seo-cta-inner {
        padding: 1.75rem 1.25rem;
    }
    body .seo-cta h2 {
        font-size: 1.5rem;
    }
    body .seo-cta p {
        font-size: 0.9rem;
    }

    /* ── Internal links ── */
    body .seo-link {
        font-size: 0.75rem;
        padding: 0.35rem 0.6rem;
    }

    /* ── Resource cards ── */
    body .seo-resource-card {
        padding: 1.25rem;
    }
}

/* ---------- Touch devices: disable hover transforms ---------- */
@media (pointer: coarse) {
    body .seo-feature-card:hover,
    body .seo-stat-item:hover,
    body .seo-resource-card:hover,
    body .seo-step:hover {
        transform: none;
        box-shadow: none;
    }
    body .seo-comparison-table tr:hover td {
        background: transparent;
    }
    body .seo-link:hover {
        background: transparent;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body .seo-feature-card,
    body .seo-stat-item,
    body .seo-resource-card,
    body .seo-step,
    body .seo-link {
        transition: none;
    }
}