/* ===== BayarFlow global styles (ported from the original design) ===== */

@font-face {
    font-family: 'American Grotesk';
    src: url('/fonts/american-grotesk-heavy.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'American Grotesk';
    src: url('/fonts/american-grotesk-heavy-italic.woff2') format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', 'Open Sans', sans-serif; color: #0B1A38; background: #fff; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

.scrollrow::-webkit-scrollbar { display: none; }
.scrollrow { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Mobile navigation toggle */
.nav-mobile-btn { display: none; }
.mobile-menu { display: none; }

@media (max-width: 860px) {
    .card2col, .faq-grid, .foot-grid { grid-template-columns: 1fr !important; }
    .card2col-rev .rev-img { order: 2; }
    .card2col-rev .rev-text { order: 1; }
    .testi-cols { columns: 1 !important; }
    .nav-desktop, .nav-cta-desktop { display: none !important; }
    .nav-mobile-btn { display: inline-flex !important; }
    .mobile-menu.open { display: flex !important; }
}
@media (max-width: 600px) {
    /* Pricing comparison table: compress so all 3 columns stay readable on phones */
    .pricing-table > div { grid-template-columns: 1.4fr 0.8fr 0.95fr !important; }
    .pricing-table > div > div { padding: 14px 8px !important; font-size: 12.5px !important; }
    .pricing-table .price-amt { font-size: 21px !important; }
    /* tighten the "From RMxx /mo" inline-flex so it never overflows its cell */
    .pricing-table .price-cell-inner { gap: 3px !important; flex-wrap: wrap; }
    .pricing-table .price-cell-inner span { font-size: 11px !important; }
    .pricing-table .price-cell-inner .price-amt { font-size: 21px !important; }
}
@media (max-width: 560px) {
    .foot-grid { grid-template-columns: 1fr 1fr !important; }
}