/* ══ FinDarts — Global Mobile Fixes ══ Linked last in so it wins over page-level styles. Covers the 769–991px tablet gap that individual pages miss, and adds universal overflow / image guards. */ /* 1 — Universal overflow guard (prevents any element pushing page wide) */ html, body { overflow-x: hidden; max-width: 100%; } /* 2 — Images never overflow their container */ img { max-width: 100%; height: auto; } /* 3 — Tables always scroll inside their box */ table { max-width: 100%; } .table-responsive, .cmp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── Tablet (769–991px) gap fixes ── */ @media (max-width: 991px) { /* Hero headings — prevent giant text on tablet */ .pms-hero h1, .aif-hero h1, .hero-copy h1, .hero-right h1, .sip-hero-section h1, .section-title, .sec-title { font-size: clamp(24px, 4vw, 38px) !important; } /* Stat/trust bars — wrap instead of overflow */ .hero-stats, .hero-trust-bar, .stat-bar, .fd-bottom-trust-bar { flex-wrap: wrap !important; gap: 12px !important; } /* Two-column info grids collapse to single on tablet */ .info-grid { grid-template-columns: 1fr 1fr !important; } /* 3+ column grids cap at 2 columns on tablet */ .rev-row { flex-wrap: wrap !important; } .rev-item { flex: 1 1 calc(50% - 9px) !important; } /* Partner page — product grid */ .mfd-product-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Ben cards — 2 col on tablet */ .ben-grid { grid-template-columns: repeat(2, 1fr) !important; } /* AIF vs PMS strip — wrap items */ .avp-items { flex-wrap: wrap !important; } .avp-item { flex: 1 1 50% !important; border-bottom: 1px solid #e9e0ff; } /* Comparison tables — always scrollable */ .cmp-table { min-width: 560px; } .table-responsive { overflow-x: auto !important; } } /* ── Small phone (≤480px) gap fixes ── */ @media (max-width: 480px) { /* Single-column everything */ .info-grid, .stat-grid, .rev-row, .mfd-product-grid, .ben-grid, .cat-grid { grid-template-columns: 1fr !important; } .rev-item { flex: none !important; width: 100% !important; } /* Font sizes — minimum readable on 375px */ .pms-hero h1, .aif-hero h1, .hero-copy h1 { font-size: 22px !important; } .sec-title, .section-title { font-size: 20px !important; } /* Partner page stat strip — stack vertically */ .fd-bottom-trust-bar { flex-direction: column !important; align-items: stretch !important; } .fd-bottom-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.15) !important; padding: 14px 20px !important; } /* Paddings — avoid cramped content on 375px */ .aif-section, .pms-section, .aif-section-alt, .pms-section-alt { padding: 44px 0 !important; } .rev-banner, .aif-cta, .pms-cta { padding: 32px 16px !important; } /* AIF category cards — tighter padding */ .cat-card { padding: 22px 18px !important; } /* AIF vs PMS strip — stack */ .avp-inner { flex-direction: column !important; } .avp-badge { border-radius: 8px !important; width: 100% !important; justify-content: center !important; } .avp-items { border: 1px solid #e9e0ff !important; border-radius: 8px !important; width: 100% !important; } .avp-item { flex: none !important; width: 100% !important; } } /* ── Nav — never wrap on desktop, always collapse on mobile ── */ @media (min-width: 992px) { .navbar-nav { flex-wrap: nowrap !important; } /* The bootstrap.min.css currently served from web_assets is a stripped build with no .navbar-expand-lg rules, so it no longer hides the hamburger on desktop — a redundant toggler shows next to the full horizontal menu. Hide it here (desktop shows the full nav already). */ .navbar-toggler { display: none !important; } } /* Below the lg breakpoint the toggler must stay visible so the menu can be opened — re-assert it in case any stray rule hides it. */ @media (max-width: 991.98px) { .navbar-toggler { display: inline-block !important; } } @media (max-width: 991px) { .navbar-nav { flex-wrap: wrap !important; flex-direction: column !important; } /* The template's own style.css forces .navbar-collapse to display:block unconditionally, so the full menu renders open on every phone load instead of hiding behind the hamburger. Restore Bootstrap's collapse behaviour here since this file loads last. */ .navbar-collapse:not(.show):not(.collapsing) { display: none !important; } .navbar-collapse.show { display: block !important; } } /* ── Proper mobile dropdown menu ── When the hamburger opens the menu, the items are different element types (plain links, a Services

wrapper, a Login/Partner button

), each with its own margin/padding, so they render at different left offsets and look ragged. index.html also has ~20 inline