/*!
 * 4six Redesign v3 — Mobile Fixes (rewrite)
 * Loaded AFTER fx-core.css and fx-home.css.
 * Selectors verified against template-parts/home/*.php.
 * Mandate: 100% of traffic is mobile — every section must be clean
 * on 320–640px viewports.
 */

/* ═══════════════════════════════════════════════════════════════
   0. GLOBAL — horizontal overflow guard
   ═══════════════════════════════════════════════════════════════ */
html,
body,
.fx-redesign,
.fx-main {
    max-width: 100%;
    overflow-x: clip;
}

/* Sections can host orbs/glows bleeding outside — clip them at the section. */
.fx-redesign .fx-section,
.fx-redesign section[class*="fx-section"] {
    overflow-x: clip;
}

/* Prevent any media child from ever punching outside its parent. */
.fx-redesign img,
.fx-redesign video,
.fx-redesign iframe,
.fx-redesign svg {
    max-width: 100%;
    height: auto;
}

/* ═══════════════════════════════════════════════════════════════
   1. CONTAINER — tighter side padding on phones
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .fx-container {
        width: min(100% - 28px, var(--fx-container));
        padding-inline: 0;
    }
}
@media (max-width: 640px) {
    .fx-container {
        width: min(100% - 20px, var(--fx-container));
    }
}
@media (max-width: 400px) {
    .fx-container {
        width: min(100% - 14px, var(--fx-container));
    }
}

/* ═══════════════════════════════════════════════════════════════
   2. SECTION PADDING + TYPOGRAPHY — tighten on phones
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .fx-section        { padding-block: var(--fx-sp-10); }
    .fx-section--lg    { padding-block: var(--fx-sp-12); }
    .fx-section--sm    { padding-block: var(--fx-sp-8); }

    .fx-section__head  { margin-block-end: var(--fx-sp-5); max-width: 100%; }
    .fx-section__title { font-size: clamp(1.4rem, 6.6vw, 1.9rem); line-height: 1.18; letter-spacing: -0.015em; }
    .fx-section__desc  { font-size: 0.95rem; line-height: 1.55; }
}

@media (max-width: 560px) {
    .fx-section        { padding-block: var(--fx-sp-8); }
    .fx-section--lg    { padding-block: var(--fx-sp-10); }
    .fx-section--sm    { padding-block: var(--fx-sp-7); }
    .fx-section__head  { margin-block-end: var(--fx-sp-4); gap: 6px; }
}

/* Flex section header rows — stack for narrow widths */
@media (max-width: 640px) {
    .fx-section__head--row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--fx-sp-3);
    }
    .fx-section__head--row > a,
    .fx-section__head--row .fx-btn {
        align-self: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════════
   3. BUTTONS — full-width in action rows on narrow phones
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
    .fx-btn { min-height: 46px; font-size: 0.9rem; padding: 0 18px; }
    .fx-btn--sm { min-height: 36px; padding: 0 14px; font-size: 0.78rem; }

    .fx-hero__ctas,
    .fx-cricket__actions,
    .fx-seo-leader__actions,
    .fx-live__actions,
    .fx-cta-band__actions,
    .fx-app__stores,
    .fx-women__foot,
    .fx-responsible__actions {
        flex-wrap: wrap;
        gap: var(--fx-sp-3);
    }
    .fx-hero__ctas .fx-btn,
    .fx-cricket__actions .fx-btn,
    .fx-seo-leader__actions .fx-btn,
    .fx-live__actions .fx-btn,
    .fx-cta-band__actions .fx-btn,
    .fx-women__foot .fx-btn {
        flex: 1 1 100%;
        width: 100%;
        text-align: center;
    }
}

/* Grid utilities — already responsive in fx-core, but nudge at small phones */
@media (max-width: 420px) {
    .fx-grid--2,
    .fx-grid--3,
    .fx-grid--4 { gap: var(--fx-sp-3); }
}

/* ═══════════════════════════════════════════════════════════════
   4. HERO (fx-hero--v3)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
    .fx-hero--v3 { padding-block: clamp(1.75rem, 6vh, 2.75rem); }
    .fx-hero__inner {
        grid-template-columns: 1fr !important;
        gap: var(--fx-sp-8) !important;
    }
    .fx-hero__title { font-size: clamp(1.9rem, 8vw, 2.8rem) !important; }
    .fx-hero__mock  { min-height: 440px; padding: 16px 8px 8px; }
}

@media (max-width: 640px) {
    .fx-hero--v3 { padding-block: clamp(1.5rem, 5vh, 2rem); }
    .fx-hero__pill       { font-size: 0.75rem; padding: 5px 11px; gap: 6px; }
    .fx-hero__title      { font-size: clamp(1.7rem, 8.6vw, 2.3rem) !important; line-height: 1.1; }
    .fx-hero__lede       { font-size: 0.92rem; line-height: 1.55; }
    .fx-hero__pulse      { font-size: 0.8rem; padding: 8px 12px; }
    .fx-hero__trust      { gap: 6px 10px; }
    .fx-hero__trust-item { font-size: 0.68rem; padding: 3px 8px; }

    .fx-hero__mock { min-height: 360px; padding: 10px 4px 6px; }
    .fx-hero__mock-card--match,
    .fx-hero__mock-card--slip {
        position: absolute;
        width: min(280px, 88%) !important;
        padding: 12px 14px !important;
        transform: rotate(0) !important;
    }
    .fx-hero__mock-card--match { top: 4%; right: 2%; left: auto; }
    .fx-hero__mock-card--slip  { bottom: 6%; left: 2%; right: auto; }
    .fx-hero__mock-toast {
        top: auto !important;
        bottom: -8px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        max-width: 240px;
        font-size: 0.72rem;
        padding: 6px 10px;
    }
    .fx-hero__mock-head        { font-size: 0.68rem; }
    .fx-hero__mock-teams       { gap: 6px; }
    .fx-hero__mock-name        { font-size: 0.8rem; }
    .fx-hero__mock-score       { font-size: 0.85rem; }
    .fx-hero__mock-odd span    { font-size: 0.65rem; }
    .fx-hero__mock-odd strong  { font-size: 0.85rem; }
    .fx-hero__mock-slip-list li        { font-size: 0.76rem; }
    .fx-hero__mock-slip-return         { font-size: 1rem; }
    .fx-hero__mock-slip-title,
    .fx-hero__mock-slip-count          { font-size: 0.72rem; }
}

@media (max-width: 400px) {
    .fx-hero__mock { min-height: 320px; }
    .fx-hero__mock-card--match,
    .fx-hero__mock-card--slip { width: 94% !important; }
    .fx-hero__mock-toast { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   5. SEO LEADER — "Bangladesh's #1" panel
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
    .fx-seo-leader__panel {
        grid-template-columns: 1fr !important;
        padding: var(--fx-sp-5) !important;
        gap: var(--fx-sp-5) !important;
    }
    .fx-seo-leader__visual {
        order: -1;
        min-height: 360px !important;
    }
    .fx-seo-leader__title { font-size: clamp(1.6rem, 6.5vw, 2rem) !important; }
}

@media (max-width: 640px) {
    .fx-seo-leader__panel {
        padding: var(--fx-sp-4) !important;
        border-radius: var(--fx-radius-xl);
    }
    .fx-seo-leader__visual { min-height: 320px !important; }
    .fx-seo-leader__photo  { width: min(62%, 200px) !important; }
    .fx-seo-leader__search {
        width: 170px !important;
        left: -2% !important;
        top: 2% !important;
        padding: 8px 10px 6px !important;
        transform: rotate(-2deg) !important;
    }
    .fx-seo-leader__search-query { max-width: 110px; font-size: 0.62rem; }
    .fx-seo-leader__search-item  { font-size: 0.62rem; padding: 3px 4px; }
    .fx-seo-leader__search-rank  { font-size: 0.62rem; }
    .fx-seo-leader__rank {
        padding: 8px 12px 6px !important;
        border-radius: 14px;
        bottom: 2%;
        right: 2%;
        transform: rotate(4deg) !important;
    }
    .fx-seo-leader__rank strong { font-size: 1.4rem !important; }
    .fx-seo-leader__rank span   { font-size: 0.5rem; }
    .fx-seo-leader__rank em     { font-size: 0.52rem; }
    .fx-seo-leader__trophy {
        width: 38px !important; height: 38px !important;
        font-size: 1.05rem !important;
        top: 3%; right: 3%;
    }
    .fx-seo-leader__pill {
        font-size: 0.62rem !important;
        padding: 5px 9px !important;
    }
    .fx-seo-leader__pill--bkash  { bottom: 26%; left: 0; }
    .fx-seo-leader__pill--secure { top: 34%; right: 1%; }
    .fx-seo-leader__chips { gap: 5px; }
    .fx-seo-leader__chip  { font-size: 0.68rem; padding: 4px 9px; }
    .fx-seo-leader__stats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--fx-sp-2) !important;
        padding: var(--fx-sp-3) !important;
    }
    .fx-seo-leader__stat dd { font-size: 1.05rem !important; }
    .fx-seo-leader__stat dt { font-size: 0.58rem; letter-spacing: 0.04em; }
    .fx-seo-leader__actions .fx-btn { flex: 1 1 100%; }
    .fx-seo-leader__orb--g { width: 240px; height: 240px; }
    .fx-seo-leader__orb--y { width: 220px; height: 220px; }
    .fx-seo-leader__ring   { display: none; }
}

@media (max-width: 380px) {
    .fx-seo-leader__visual { min-height: 280px !important; }
    .fx-seo-leader__photo  { width: 58% !important; }
    .fx-seo-leader__search { width: 150px !important; }
    .fx-seo-leader__pill--bkash,
    .fx-seo-leader__pill--secure { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   6. TICKER — marquee
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .fx-ticker        { padding-block: 8px; }
    .fx-ticker__item  { gap: 8px; padding: 5px 10px; font-size: 0.78rem; }
    .fx-ticker__sport { font-size: 0.95rem; }
    .fx-ticker__odd   { font-size: 0.78rem; }
}

/* ═══════════════════════════════════════════════════════════════
   7. WOMEN'S SPORTS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
    .fx-women__hero {
        grid-template-columns: 1fr !important;
        gap: var(--fx-sp-4) !important;
    }
    .fx-women__hero-media { min-height: 260px !important; }
    .fx-women__grid       { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 560px) {
    .fx-women__hero-media   { min-height: 220px !important; }
    .fx-women__hero-caption { left: var(--fx-sp-4); right: var(--fx-sp-4); bottom: var(--fx-sp-4); }
    .fx-women__hero-title   { font-size: 1.2rem !important; }
    .fx-women__hero-meta    { font-size: 0.78rem; }
    .fx-women__hero-eyebrow { font-size: 0.62rem; }
    .fx-women__hero-badge   { font-size: 0.62rem; padding: 4px 10px; top: 10px; left: 10px; }
    .fx-women__stats        { grid-template-columns: repeat(2, 1fr) !important; padding: var(--fx-sp-4) !important; gap: var(--fx-sp-2) !important; }
    .fx-women__stats > div  { padding: var(--fx-sp-2) !important; }
    .fx-women__stats dd     { font-size: 1.1rem !important; }
    .fx-women__stats dt     { font-size: 0.6rem; }
    .fx-women__grid         { grid-template-columns: 1fr !important; gap: var(--fx-sp-3) !important; }
    .fx-women__foot         { text-align: center; }
    .fx-women__foot-note    { font-size: 0.8rem; display: block; }
}

/* ═══════════════════════════════════════════════════════════════
   8. CRICKET SPOTLIGHT
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
    .fx-cricket__panel        { padding: var(--fx-sp-4) !important; gap: var(--fx-sp-4) !important; }
    .fx-cricket__title-row    { grid-template-columns: 1fr !important; gap: var(--fx-sp-2) !important; }
    .fx-cricket__grid         { grid-template-columns: 1fr !important; }
    .fx-cricket__copy         { grid-template-columns: 1fr !important; gap: var(--fx-sp-3) !important; }
}

@media (max-width: 560px) {
    .fx-cricket__head         { flex-wrap: wrap; gap: var(--fx-sp-2) !important; }
    .fx-cricket__badge        { font-size: 0.62rem; padding: 4px 10px; }
    .fx-cricket__head-live    { font-size: 0.62rem; padding: 4px 10px; }
    .fx-cricket__eyebrow      { font-size: 0.66rem; }
    .fx-cricket__title        { font-size: clamp(1.25rem, 6vw, 1.6rem) !important; }
    .fx-cricket__desc         { font-size: 0.88rem; }

    .fx-cricket__ticker       { padding: var(--fx-sp-3) !important; }
    .fx-cricket__ticker-head  { flex-wrap: wrap; font-size: 0.6rem; gap: 6px; }
    .fx-cricket__ticker-ball  { margin-left: 0; width: 100%; text-align: right; }
    .fx-cricket__ticker-team  { grid-template-columns: 32px 1fr auto; gap: 8px; padding: 6px 8px; }
    .fx-cricket__ticker-name  { font-size: 0.76rem; }
    .fx-cricket__ticker-score { font-size: 0.92rem; }
    .fx-cricket__ticker-odds  { grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .fx-cricket__ticker-boost { grid-column: 1 / -1; justify-content: center; padding: 6px; font-size: 0.64rem; }
    .fx-cricket__ticker-odd   { padding: 7px 4px 6px; }
    .fx-cricket__ticker-odd strong { font-size: 0.88rem; }
    .fx-cricket__ticker-odd span   { font-size: 0.54rem; }

    .fx-cricket__metrics      { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
    .fx-cricket__metric       { padding: var(--fx-sp-3) !important; }
    .fx-cricket__metric dd    { font-size: 1.18rem !important; }
    .fx-cricket__metric dt    { font-size: 0.6rem; }

    .fx-cricket__tours        { padding: 8px !important; gap: 6px !important; flex-wrap: wrap; justify-content: center !important; align-items: center; }
    .fx-cricket__tour         { margin-inline: auto; }
    .fx-cricket__tour         { padding: 5px 9px 5px 8px; }
    .fx-cricket__tour-name    { font-size: 0.74rem; }
    .fx-cricket__tour-meta    { font-size: 0.56rem; padding-left: 5px; }
    .fx-cricket__tour-icon    { font-size: 0.85rem; }

    .fx-cricket__copy-p       { font-size: 0.82rem; padding-left: 10px; border-left-width: 2px; }
}

/* ═══════════════════════════════════════════════════════════════
   9. SPORTS / FEATURES / WHY (PILLARS) / HOW-IT-WORKS
      — card components inside responsive .fx-grid utilities
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .fx-feat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-how__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .fx-feat__grid,
    .fx-how__grid { grid-template-columns: 1fr !important; gap: var(--fx-sp-3); }

    .fx-feat__card  { padding: var(--fx-sp-4) !important; }
    .fx-how__card   { padding: 0; }
    .fx-how__body   { padding: var(--fx-sp-4) !important; }
    .fx-how__media  { aspect-ratio: 16 / 9; }
    .fx-how__title  { font-size: 1.05rem !important; }
    .fx-how__desc   { font-size: 0.85rem; }

    .fx-sport__body   { padding: var(--fx-sp-4) !important; }
    .fx-sport__title  { font-size: 1.05rem !important; }
    .fx-sport__tag    { font-size: 0.82rem; }
    .fx-pillar        { padding: var(--fx-sp-4) !important; }
    .fx-pillar__title { font-size: 1.05rem !important; }
    .fx-pillar__desc  { font-size: 0.88rem; }
}

/* ═══════════════════════════════════════════════════════════════
   10. LIVE & TODAY — feature + tabs + tables
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .fx-live__feature       { grid-template-columns: 1fr !important; }
    .fx-live__feature-media { min-height: 220px !important; }
    .fx-live__stats         { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 560px) {
    .fx-lt__tabs            { flex-wrap: wrap; gap: 6px; }
    .fx-lt__tab             { padding: 7px 12px; }
    .fx-lt__tab-label       { font-size: 0.85rem; }
    .fx-lt__tab-count       { font-size: 0.62rem; }
    .fx-live__feature-body  { padding: var(--fx-sp-4) !important; }
    .fx-live__stats         { grid-template-columns: 1fr 1fr !important; gap: var(--fx-sp-2) !important; }
    .fx-live__card-body     { padding: var(--fx-sp-3) !important; }
    .fx-live__card-name     { font-size: 0.88rem; }
    .fx-live__tables        { grid-template-columns: 1fr !important; }
}

/* Fixture rows inside live tables */
@media (max-width: 560px) {
    .fx-fixture              { padding: var(--fx-sp-3) !important; }
    .fx-fixture__top         { flex-wrap: wrap; gap: 4px; font-size: 0.7rem; }
    .fx-fixture__teams       { gap: var(--fx-sp-2); }
    .fx-fixture__team        { font-size: 0.82rem; }
    .fx-fixture__score       { font-size: 0.9rem; }
    .fx-fixture__odds        { flex-wrap: wrap; gap: 4px; }
    .fx-fixture__odds .fx-odd-btn { flex: 1 1 calc(33% - 4px); min-width: 0; }
    .fx-odd-btn__l           { font-size: 0.62rem; }
    .fx-odd-btn__v           { font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════════════════════════
   11. CRASH / SLOTS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .fx-slots__grid   { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
}
@media (max-width: 1024px) {
    .fx-slots__grid   { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
    .fx-crash__grid   { grid-template-columns: repeat(2, 1fr) !important; }
    .fx-slots__jack   { grid-template-columns: 1fr !important; }
    .fx-slots__grid   { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
    .fx-crash__grid   { grid-template-columns: 1fr !important; }
    .fx-slots__grid   { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 360px) {
    .fx-slots__grid   { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
    .fx-crash__body   { padding: var(--fx-sp-4) !important; }
    .fx-crash__name   { font-size: 1rem; }
    .fx-crash__foot   { flex-wrap: wrap; gap: 6px; font-size: 0.74rem; }
    .fx-crash__multiplier-x { font-size: 0.85rem; }
    .fx-slots__jack-amount  { font-size: 1.3rem !important; }
    .fx-slots__jack-card    { padding: var(--fx-sp-4) !important; }
    .fx-slot__body          { padding: var(--fx-sp-3) !important; }
    .fx-slot__name          { font-size: 0.92rem; }
}

/* ═══════════════════════════════════════════════════════════════
   12. PROMOTIONS — Swiper carousel (don't grid this, tune cards)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .fx-promos__slider .swiper-slide { height: auto; }
    .fx-promo {
        padding: var(--fx-sp-5) !important;
        min-height: 240px;
    }
    .fx-promo__title { font-size: 1.15rem; }
    .fx-promo__desc  { font-size: 0.85rem; }
    .fx-promo__badge { font-size: 0.62rem; padding: 4px 9px; }
    .fx-promo__cta   { font-size: 0.85rem; }

    .fx-promos__nav  { width: 40px; height: 40px; }
    .fx-promos__nav svg { width: 18px; height: 18px; }
    .fx-promos__prev { left: 4px; }
    .fx-promos__next { right: 4px; }
    .fx-promos__slider {
        mask-image: none;
        -webkit-mask-image: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   13. VIP TIERS (uses .fx-vip__rail, not __grid)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .fx-vip__rail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
    .fx-vip__rail    { grid-template-columns: 1fr !important; gap: var(--fx-sp-3) !important; }
    .fx-tier         { padding: var(--fx-sp-4) !important; }
    .fx-tier__name   { font-size: 1.05rem; }
    .fx-tier__threshold { font-size: 0.78rem; }
    .fx-tier__perks li  { font-size: 0.84rem; }
}

/* ═══════════════════════════════════════════════════════════════
   14. WINNERS — stats + grid + cards
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .fx-winners__stats { grid-template-columns: repeat(2, 1fr) !important; gap: var(--fx-sp-3) !important; }
    .fx-winners__grid  { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
    .fx-winners__num   { font-size: 1.6rem !important; }
    .fx-winners__label { font-size: 0.66rem; }
    .fx-winner         { padding: var(--fx-sp-4) !important; }
    .fx-winner__head   { flex-wrap: wrap; gap: 6px; }
    .fx-winner__amount { font-size: 1.1rem !important; }
    .fx-winner__quote  { font-size: 0.85rem; }
}

/* ═══════════════════════════════════════════════════════════════
   15. TIPSTERS — featured + tipster cards
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
    .fx-tip__featured { grid-template-columns: 1fr !important; }
    .fx-tip__grid     { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
    .fx-tip__featured           { padding: var(--fx-sp-4) !important; }
    .fx-tip__featured-analysis  { font-size: 0.88rem; }
    .fx-tip__featured-odds      { flex-wrap: wrap; gap: 6px; }
    .fx-tip__featured-price     { font-size: 1.05rem !important; }
    .fx-tip__grid               { grid-template-columns: 1fr !important; }
    .fx-tipster                 { padding: var(--fx-sp-4) !important; }
    .fx-tipster__head           { flex-wrap: wrap; gap: var(--fx-sp-2); }
    .fx-tipster__name           { font-size: 0.92rem; }
    .fx-tipster__record         { font-size: 0.78rem; }
    .fx-tipster__match          { font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════════════════════════
   16. APP DOWNLOAD — phone mockup
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .fx-app__inner { grid-template-columns: 1fr !important; padding: var(--fx-sp-6) !important; gap: var(--fx-sp-5) !important; }
    .fx-app__perks { grid-template-columns: repeat(2, 1fr) !important; }
    .fx-app__phone { justify-self: center; }
    .fx-phone      { width: 220px !important; margin-inline: auto; }
    .fx-app__row   { flex-wrap: wrap; gap: var(--fx-sp-3); }
    .fx-app__stores {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100%;
    }
    .fx-app__stores .fx-store {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        padding: 8px 10px !important;
        column-gap: 8px !important;
    }
    .fx-app__stores .fx-store__ico   { font-size: 1.3rem !important; }
    .fx-app__stores .fx-store__line1 { font-size: 0.55rem !important; }
    .fx-app__stores .fx-store__line2 { font-size: 0.85rem !important; white-space: nowrap; }
}
@media (max-width: 480px) {
    .fx-app__perks {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--fx-sp-2) !important;
    }
    .fx-app__perk {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 8px !important;
        min-width: 0;
    }
    .fx-app__perk > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        min-width: 0;
        flex: 1 1 auto;
    }
    .fx-app__perk strong,
    .fx-app__perk span:not(.fx-app__perk-icon) {
        text-align: left !important;
        display: block !important;
        width: 100%;
    }
    .fx-app__perk strong { font-size: 0.78rem !important; line-height: 1.2 !important; }
    .fx-app__perk > div > span { font-size: 0.66rem !important; line-height: 1.3 !important; }
    .fx-app__perk-icon {
        width: 32px !important; height: 32px !important;
        font-size: 0.95rem !important;
        flex-shrink: 0;
    }
    .fx-phone      { width: 200px !important; }
    .fx-app__qr    { margin-inline: auto; }
}

/* Late override — beats the global centering rule for perks:
   render all 4 on a single row, each perk icon + text left-aligned inline */
@media (max-width: 900px) {
    .fx-main ul.fx-app__perks {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: 8px !important;
        margin-inline: 0 !important;
    }
    .fx-main ul.fx-app__perks .fx-app__perk {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 6px !important;
        min-width: 0 !important;
        padding: 8px !important;
        background: rgba(255,255,255,0.03);
        border: 1px solid var(--fx-border);
        border-radius: 10px;
    }
    .fx-main ul.fx-app__perks .fx-app__perk > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        min-width: 0 !important;
        flex: 1 1 auto;
    }
    .fx-main ul.fx-app__perks .fx-app__perk strong {
        text-align: left !important;
        font-size: 0.64rem !important;
        line-height: 1.15 !important;
        display: block !important;
        width: 100% !important;
    }
    .fx-main ul.fx-app__perks .fx-app__perk > div > span {
        text-align: left !important;
        font-size: 0.52rem !important;
        line-height: 1.25 !important;
        display: block !important;
        width: 100% !important;
        color: var(--fx-text-dim);
    }
    .fx-main ul.fx-app__perks .fx-app__perk-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.8rem !important;
        flex-shrink: 0 !important;
        border-radius: 6px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   17. PAYMENTS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .fx-payments__grid { grid-template-columns: repeat(3, 1fr) !important; gap: var(--fx-sp-3) !important; }
}
@media (max-width: 560px) {
    .fx-payments__grid { grid-template-columns: repeat(2, 1fr) !important; }
    .fx-pay            { padding: var(--fx-sp-4) var(--fx-sp-3) !important; }
    .fx-pay__name      { font-size: 0.9rem; }
    .fx-pay__fast      { font-size: 0.65rem; }
}
@media (max-width: 360px) {
    .fx-payments__grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   18. BLOG TEASER — uses .fx-grid--3 wrapping .fx-post
      (grid collapses via fx-core, just tune the card on phone)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
    .fx-post__body    { padding: var(--fx-sp-4) !important; gap: var(--fx-sp-2) !important; }
    .fx-post__title   { font-size: 1rem; }
    .fx-post__excerpt { font-size: 0.85rem; }
    .fx-post__meta    { font-size: 0.68rem; }
}

/* ═══════════════════════════════════════════════════════════════
   19. CTA BAND
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
    .fx-cta-band__inner   { grid-template-columns: 1fr !important; padding: var(--fx-sp-6) !important; text-align: left; }
    .fx-cta-band__title   { font-size: clamp(1.4rem, 6vw, 1.8rem) !important; }
    .fx-cta-band__actions { justify-content: flex-start !important; }
}
@media (max-width: 480px) {
    .fx-cta-band__inner   { padding: var(--fx-sp-5) !important; }
    .fx-cta-band__actions { flex-direction: column; align-items: stretch; }
    .fx-cta-band__actions .fx-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   20. RESPONSIBLE GAMING
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    .fx-responsible__inner { grid-template-columns: 1fr !important; text-align: center; gap: var(--fx-sp-3); }
    .fx-responsible__icon  { margin-inline: auto; }
    .fx-responsible__logos,
    .fx-responsible__actions { justify-content: center; }
}
@media (max-width: 480px) {
    .fx-responsible__body p { font-size: 0.85rem; }
}

/* ═══════════════════════════════════════════════════════════════
   21. MOTION — calm animations on phones (perf + readability)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
    .fx-hero__mock-bg img            { animation: none !important; }
    .fx-hero__orb                    { animation-duration: 30s !important; opacity: 0.5; }
    .fx-seo-leader__orb,
    .fx-seo-leader__grid,
    .fx-seo-leader__ring             { animation-duration: 40s !important; }
    .fx-seo-leader__search,
    .fx-seo-leader__rank,
    .fx-seo-leader__trophy,
    .fx-seo-leader__pill,
    .fx-seo-leader__photo,
    .fx-cricket__ticker-odd          { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   22. CARD MEDIA HEIGHT CAPS — prevent giant hero images on phones
   (Every card-image in redesign gets capped so nothing eats a full
    viewport on a 390px phone. Images stay flex via object-fit: cover.)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Women's cards: 4/3 → 16/9, trimmed further on small phones */
    .fx-women__card-media       { aspect-ratio: 16 / 9; }

    /* Sports cards: compact thumbnails */
    .fx-sport__media            { aspect-ratio: 4 / 3; }

    /* Live casino featured card: 4/3 → 16/9 */
    .fx-live__card-media        { aspect-ratio: 16 / 9; }

    /* "How it works" walkthrough: 16/10 → 21/9 */
    .fx-how__media              { aspect-ratio: 21 / 9; }

    /* Features strip cards: 16/9 → 21/9 */
    .fx-feat__media             { aspect-ratio: 21 / 9; }

    /* Crash game cards: 16/10 → 21/9 */
    .fx-crash__media            { aspect-ratio: 21 / 9; }

    /* Blog teaser posts: 16/9 → 21/9 */
    .fx-post__media             { aspect-ratio: 21 / 9; }
}

/* ═══════════════════════════════════════════════════════════════
   23. SLOTS — 2-col tile grid + smaller tiles on phones
   (Current: 1 col of 376×376 tiles = ~800px each. Fix: 2-col of
    half-width tiles at 3/4 aspect → ~180×240px each. Usable.)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .fx-slots__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px;
    }
    .fx-slot__media {
        aspect-ratio: 3 / 4;
    }
    .fx-slot__body {
        padding: 6px 4px !important;
    }
    .fx-slot__title,
    .fx-slot__name { font-size: 0.68rem; line-height: 1.15; }
    .fx-slot__meta { font-size: 0.55rem; }
    .fx-slot__rtp  { font-size: 0.55rem; padding: 2px 5px; }
}
@media (max-width: 400px) {
    .fx-slots__grid { gap: 6px; }
    .fx-slot__title,
    .fx-slot__name { font-size: 0.62rem; }
}
@media (max-width: 360px) {
    .fx-slots__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Jackpot rail — stack on mobile, compact padding */
@media (max-width: 640px) {
    .fx-slots__jack {
        grid-template-columns: 1fr !important;
        gap: var(--fx-sp-3);
        margin-block-end: var(--fx-sp-5);
    }
    .fx-slots__jack-card {
        padding: var(--fx-sp-4) var(--fx-sp-5);
        gap: 4px;
    }
    .fx-slots__jack-amount { font-size: clamp(1.35rem, 6.2vw, 1.7rem); }
    .fx-slots__jack-label  { font-size: 0.72rem; }
    .fx-slots__jack-link   { font-size: 0.85rem; margin-top: 4px; }
}

/* ═══════════════════════════════════════════════════════════════
   24. CRASH GAMES — tighten card padding; 2-col at wider phones
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .fx-crash__card { padding: 0; }
    .fx-crash__body { padding: var(--fx-sp-4); gap: var(--fx-sp-2); }
    .fx-crash__title { font-size: 1.05rem; }
    .fx-crash__desc  { font-size: 0.85rem; line-height: 1.45; }
    .fx-crash__multi { font-size: 0.8rem; padding: 4px 10px; }
    .fx-crash__btn   { font-size: 0.88rem; min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════
   25. VIP TIERS — reduce vertical bloat (titles, padding, gaps)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .fx-tier           { padding: var(--fx-sp-5) var(--fx-sp-4); }
    .fx-tier__name     { font-size: 1.4rem; }
    .fx-tier__req      { font-size: 0.95rem; margin-block-start: 8px; }
    .fx-tier__note     { font-size: 0.8rem; }
    .fx-tier__perks    { gap: 6px; margin-block-start: 10px; }
    .fx-tier__perks li { font-size: 0.88rem; line-height: 1.4; }
}

/* ═══════════════════════════════════════════════════════════════
   26. APP DOWNLOAD — shrink phone mockup on small phones
   (Current: 280px wide phone at 9/19 = 591px tall. Too dominant.)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .fx-phone {
        width: 220px;
    }
}
@media (max-width: 400px) {
    .fx-phone {
        width: 190px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   27. FEATURES / HOW / LIVE / SPORT / WOMEN — body padding trim
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .fx-feat__body,
    .fx-how__body,
    .fx-live__card-body,
    .fx-sport__body,
    .fx-women__card-body {
        padding: var(--fx-sp-4);
        gap: var(--fx-sp-2);
    }
    .fx-feat__title,
    .fx-how__title,
    .fx-live__card-title,
    .fx-sport__name,
    .fx-women__card-title {
        font-size: 1.1rem;
        line-height: 1.25;
    }
    .fx-feat__desc,
    .fx-how__desc,
    .fx-live__card-desc,
    .fx-women__card-desc {
        font-size: 0.88rem;
        line-height: 1.5;
    }
}

/* ═══════════════════════════════════════════════════════════════
   28. WINNERS / TIPSTERS — trim oversized headings
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .fx-tipster__name       { font-size: 1.05rem; }
    .fx-tipster__role       { font-size: 0.82rem; }
    .fx-tipster__hit-value  { font-size: 1.3rem; }
    .fx-tipster__tip-odds,
    .fx-tipster__odds       { font-size: 1.05rem; }

    .fx-winner__name        { font-size: 0.95rem; }
    .fx-winner__amount      { font-size: 1.3rem; }
    .fx-winner__game        { font-size: 0.8rem; }
}

/* ═══════════════════════════════════════════════════════════════
   29. FLOATING OVERLAY SAFETY — plugin FABs (WhatsApp, OFFER)
   Reserve right-bottom corner so site CTAs stay clickable.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Add breathing room at very bottom so sticky FABs don't cover
       the last CTA in the responsible section. */
    .fx-main { padding-bottom: 80px; }
}

/* ═══════════════════════════════════════════════════════════════
   30. CENTER ALL BUTTONS ON MOBILE
   Every CTA/action wrapper is horizontally centered on phones.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .fx-hero__ctas,
    .fx-cricket__actions,
    .fx-seo-leader__actions,
    .fx-live__actions,
    .fx-cta-band__actions,
    .fx-women__foot,
    .fx-responsible__actions,
    .fx-vip__cta,
    .fx-app__stores,
    .fx-blog__foot,
    .fx-promo__actions,
    .fx-section__head--row {
        justify-content: center !important;
        text-align: center;
    }

    /* Single-CTA wrappers — center the lone button. */
    .fx-vip__cta,
    .fx-women__foot,
    .fx-responsible__actions,
    .fx-blog__foot {
        display: flex;
        flex-wrap: wrap;
    }

    /* Button-only cards / sections with a trailing CTA link. */
    .fx-crash__card .fx-crash__play,
    .fx-tipster__featured .fx-btn,
    .fx-promo__cta,
    .fx-phone__cta {
        align-self: center;
        margin-inline: auto;
    }

    /* Section head rows — stack heading and CTA, center the button. */
    .fx-section__head--row {
        flex-direction: column;
        align-items: center !important;
    }
    .fx-section__head--row > a,
    .fx-section__head--row .fx-btn {
        align-self: center !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   31. GLOBAL CENTERING — center ALL content on mobile
   Uses BEM attribute selectors to catch every __title, __desc,
   __lede, __copy, __head, __body across all fx-* components.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── Nuclear: every descendant of .fx-main centers its inline text */
    .fx-main,
    .fx-main *:not(li):not(input):not(textarea):not(select):not(button):not(pre):not(code) {
        text-align: center;
    }
    /* Preserve icon→text alignment in benefit/point lists */
    .fx-main ul[class*="__benefits"] li,
    .fx-main ul[class*="__points"] li,
    .fx-main ul[class*="__perks"] li,
    .fx-main ul[class*="__features"] li,
    .fx-main ul[class*="__list"] li:not([class*="search-item"]) {
        text-align: left;
    }

    /* ── Universal text centering for every BEM title/desc/body element */
    .fx-main [class*="__title"],
    .fx-main [class*="__subtitle"],
    .fx-main [class*="__heading"],
    .fx-main [class*="__eyebrow"],
    .fx-main [class*="__desc"],
    .fx-main [class*="__lede"],
    .fx-main [class*="__copy"],
    .fx-main [class*="__body"],
    .fx-main [class*="__intro"],
    .fx-main [class*="__label"],
    .fx-main [class*="__name"],
    .fx-main [class*="__meta"],
    .fx-main [class*="__caption"],
    .fx-main [class*="__lead"],
    .fx-main [class*="__tagline"],
    .fx-main [class*="__head"]:not([class*="head--row"]),
    .fx-main [class*="__foot"] {
        text-align: center !important;
    }

    /* ── Flex wrappers: center items horizontally */
    .fx-main [class*="__head"],
    .fx-main [class*="__foot"],
    .fx-main [class*="__inner"],
    .fx-main [class*="__body"],
    .fx-main [class*="__copy"],
    .fx-main [class*="__actions"],
    .fx-main [class*="__ctas"],
    .fx-main [class*="__tags"],
    .fx-main [class*="__chips"],
    .fx-main [class*="__stats"],
    .fx-main [class*="__markets"],
    .fx-main [class*="__meta"],
    .fx-main [class*="__trust"],
    .fx-main [class*="__stores"],
    .fx-main [class*="__logos"],
    .fx-main [class*="__all"],
    .fx-main [class*="__link"],
    .fx-main [class*="__more"] {
        justify-content: center !important;
        align-items: center;
        flex-wrap: wrap;
    }

    /* ── Auto-center block elements that have max-width */
    .fx-main [class*="__head"],
    .fx-main [class*="__copy"],
    .fx-main [class*="__body"],
    .fx-main [class*="__desc"],
    .fx-main [class*="__lede"] {
        margin-inline: auto !important;
    }

    /* ── Badge/pill elements: center within parent */
    .fx-main [class*="__badge"],
    .fx-main [class*="__pill"],
    .fx-main [class*="__pulse"],
    .fx-main [class*="__chip"]:not(li),
    .fx-main [class*="__tag"]:not(li) {
        margin-inline: auto !important;
        align-self: center;
        width: fit-content;
        max-width: 100%;
    }

    /* ── CTA band: override earlier left-align rule at this breakpoint */
    .fx-cta-band__inner,
    .fx-cta-band__copy { text-align: center !important; }
    .fx-cta-band__actions { justify-content: center !important; }

    /* ── Section head rows: stack heading + trailing CTA, center both */
    .fx-section__head--row {
        text-align: center;
        align-items: center !important;
        flex-direction: column;
    }

    /* ── Benefit lists (checkmarks): center the UL block,
           keep LI icon→text flow readable as a left-aligned row. */
    .fx-main ul[class*="__benefits"],
    .fx-main ul[class*="__points"],
    .fx-main ul[class*="__perks"],
    .fx-main ul[class*="__features"],
    .fx-main ul[class*="__list"]:not([class*="search-list"]):not([class*="winners__list"]) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin-inline: auto;
    }
    .fx-main ul[class*="__benefits"] li,
    .fx-main ul[class*="__points"] li,
    .fx-main ul[class*="__perks"] li,
    .fx-main ul[class*="__features"] li {
        text-align: left;
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    /* Override the earlier flex:1 rule so buttons are centered, not stretched,
       unless the container explicitly stacks them (cta-band already does). */
    .fx-hero__ctas,
    .fx-cricket__actions,
    .fx-seo-leader__actions,
    .fx-live__actions,
    .fx-women__foot {
        flex-direction: column;
        align-items: center;
        padding-inline-start: 0 !important;
    }
    .fx-hero__ctas .fx-btn,
    .fx-cricket__actions .fx-btn,
    .fx-seo-leader__actions .fx-btn,
    .fx-live__actions .fx-btn,
    .fx-women__foot .fx-btn {
        width: min(100%, 320px);
        flex: 0 0 auto;
        margin-inline: auto;
    }
}