/* MyFutbol — mobile polish layer.
   Everything here is scoped to <=767px. Desktop rendering is untouched. */

@media (max-width: 767px) {

    html, body { overflow-x: hidden; }

    /* ---- Density -------------------------------------------------------
       The page is ~12k px tall on a phone. Section and card padding tuned
       for a 1400px viewport reads as dead space on a 390px one. */
    section, .py-16, .py-12 { padding-top: 44px; padding-bottom: 44px; }
    /* The hero section wraps the carousel - its own padding would show as a
       dead strip between the slide and the stats bar. */
    section.pt-20 { padding-top: 0; padding-bottom: 0; }

    /* Equal-width stacked hero CTAs instead of two different pill widths */
    .hero-content .btn-modern-primary,
    .hero-content .btn-modern-secondary {
        display: flex; align-items: center; justify-content: center;
        width: 100%; max-width: 280px; min-height: 48px;
    }
    .hero-content .flex-col { width: 100%; }
    .p-8, .p-7, .p-6 { padding: 1.25rem; }
    .mb-14, .mb-12, .mb-10 { margin-bottom: 2rem; }
    .mt-10 { margin-top: 1.5rem; }
    .gap-12, .gap-8 { gap: 1rem; }
    .space-y-5 > * + * { margin-top: .875rem; }

    /* ---- Type ----------------------------------------------------------
       Big display sizes wrap into 3-4 line headings on a phone. */
    h1 { font-size: 1.875rem; line-height: 1.2; letter-spacing: -.02em; }
    h2, .text-4xl, .text-3xl { font-size: 1.5rem !important; line-height: 1.25; letter-spacing: -.015em; }
    .text-xl, .text-lg { font-size: 1rem !important; line-height: 1.6; }
    p { text-wrap: pretty; }

    /* ---- Product screenshots ------------------------------------------
       A 1400px-wide dashboard scaled to 340px is unreadable. Show it at a
       legible scale in a horizontal scroller, and let a tap open it full
       screen. */
    .shot-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
    .shot-scroll > img { width: auto !important; max-width: none !important; height: 210px; }
    .shot-zoom { cursor: zoom-in; }
    .shot-hint {
        display: flex; align-items: center; gap: 6px;
        font-size: 11px; color: #64748b; padding: 6px 12px 0;
        letter-spacing: .04em; text-transform: uppercase;
    }

    /* ---- Sticky demo bar ----------------------------------------------
       12k px of scroll with the only CTA at the very top and very bottom. */
    #mf-cta-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        display: flex; gap: 10px; align-items: center;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(10, 20, 36, .94);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
        border-top: 1px solid rgba(59, 130, 246, .28);
        transform: translateY(120%); transition: transform .28s ease;
    }
    #mf-cta-bar.visible { transform: translateY(0); }
    #mf-cta-bar .mf-cta-label { flex: 1; min-width: 0; }
    #mf-cta-bar .mf-cta-label strong { display: block; color: #fff; font-size: 13px; font-weight: 700; }
    #mf-cta-bar .mf-cta-label span { display: block; color: #94a3b8; font-size: 11px; }
    #mf-cta-bar a {
        flex-shrink: 0; background: #3b82f6; color: #fff;
        font-size: 14px; font-weight: 700; text-decoration: none;
        padding: 12px 18px; border-radius: 10px; min-height: 44px;
        display: flex; align-items: center;
    }
    #mf-cta-bar a:active { background: #2563eb; }
    body.mf-cta-on { padding-bottom: 72px; }

    /* ---- Forms ---------------------------------------------------------
       iOS zooms the whole page in when a focused field is under 16px. */
    input, select, textarea { font-size: 16px !important; }
    input, select { min-height: 46px; }

    /* ---- Menu ----------------------------------------------------------
       44px touch targets, and headroom for the demo CTA the menu now carries
       (the base stylesheet caps the open menu at 600px). */
    .mobile-link, .mobile-button, .mobile-link-danger, .mobile-demo {
        min-height: 44px; display: flex; align-items: center;
    }
    .mobile-menu.active { max-height: 760px; }
    .mobile-demo {
        justify-content: center; gap: 8px;
        background: #3b82f6; color: #fff; font-weight: 700;
        border-radius: .5rem; text-decoration: none; margin-bottom: .5rem;
    }
    .mobile-demo:hover, .mobile-demo:active { background: #2563eb; color: #fff; }
}

/* ---- Screenshot lightbox (all widths) ---------------------------------- */
#mf-lightbox {
    position: fixed; inset: 0; z-index: 100; display: none;
    background: #020814;
    overflow: auto; -webkit-overflow-scrolling: touch;
    padding: 56px 0 24px;
}
#mf-lightbox.open { display: block; }
/* Fit to width first so the layout is legible as a whole, then tap to zoom
   to native pixels and pan. */
#mf-lightbox img { display: block; width: 100%; height: auto; cursor: zoom-in; }
#mf-lightbox.zoomed img { width: auto; max-width: none; cursor: zoom-out; }
#mf-lightbox .mf-lb-close {
    position: fixed; top: 10px; right: 12px; z-index: 101;
    width: 44px; height: 44px; border-radius: 22px; border: 0;
    background: rgba(255, 255, 255, .14); color: #fff; font-size: 22px; line-height: 1;
}
#mf-lightbox .mf-lb-caption {
    position: fixed; top: 18px; left: 16px; right: 66px;
    color: #cbd5e1; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#mf-lightbox .mf-lb-hint {
    position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .1); color: #cbd5e1;
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    padding: 7px 14px; border-radius: 999px; white-space: nowrap;
    transition: opacity .3s ease;
}
#mf-lightbox.zoomed .mf-lb-hint { opacity: 0; }