/* Theme Name: BrandMeNow Theme URI: https://brandmenow.ai/ Author: BrandMeNow Author URI: https://brandmenow.ai/ Description: Custom WordPress theme for BrandMeNow — landing, product, and blog pages. Built on a 1920px design grid scaled responsively, with brand-consistent header, hero, calculator, product catalog, and blog templates. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: brandmenow */ @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Geist:wght@400;500;600;700&family=Raleway:wght@900&display=swap'); *{box-sizing:border-box} /* margin/padding reset for the theme's own markup — but NOT inside the desktop Vite artboard: it's Tailwind, whose margin/padding UTILITIES live in @layer and are (per the cascade) beaten by an un-layered `*{margin:0}`, which collapsed all the grid-positioned cards. Excluding .dcanvas descendants lets Tailwind position them. */ *:not(.dcanvas *){margin:0;padding:0} /* overflow-x:hidden only on — putting it on both html AND body forces overflow-y:auto on each, producing TWO vertical scrollbars. */ html{background:#ffffff;overflow-x:hidden} body{display:block;background:#ffffff;font-family:'Figtree',sans-serif;-webkit-font-smoothing:antialiased} img{display:block;max-width:none} a{text-decoration:none;color:inherit} /* The content lives on a 1920px design grid. JS caps the zoom so it never gets oversized on wide monitors; on narrower screens it shrinks to fit. Section background bands are made over-wide so they still fill the viewport edges. */ .stage{display:contents} .canvas{position:relative;width:1920px;margin:0 auto;font-family:'Figtree',sans-serif;zoom:.68} .sec{position:absolute;left:0;width:1920px} /* flow mode: sections stack in normal document order (blog, posts, generic pages) */ .sec.flow{position:relative;left:auto;top:auto !important} .flowsec{position:relative;width:1920px} .flow-in{padding:0 256px} /* 256px margins = home's 1408 content column */ .a{position:absolute} .col{display:flex;flex-direction:column;justify-content:center} .cx{transform:translateX(-50%)} .cy{transform:translateY(-50%)} .cxy{transform:translate(-50%,-50%)} .center{text-align:center} .geb{font-family:'Geist',sans-serif;font-weight:700} .ges{font-family:'Geist',sans-serif;font-weight:600} .gem{font-family:'Geist',sans-serif;font-weight:500} .fr{font-family:'Figtree',sans-serif;font-weight:400} .fm{font-family:'Figtree',sans-serif;font-weight:500} .fs{font-family:'Figtree',sans-serif;font-weight:600} .fb{font-family:'Figtree',sans-serif;font-weight:700} .ral{font-family:'Raleway',sans-serif;font-weight:900;line-height:65.03%} .btn-flex{display:flex;align-items:center;justify-content:center} .cap{text-transform:capitalize} .clk{cursor:pointer} .clk:hover{opacity:.85;transition:opacity .2s ease} /* header */ .site-header{transition:transform .4s cubic-bezier(.4,0,.2,1)} .site-header.hdr-hidden{transform:translateY(-180%)} /* FAQ accordion */ .faq-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;cursor:pointer;padding:26px 0} .faq-qt{flex:1;font-family:'Geist',sans-serif;font-weight:500;font-size:30px;line-height:40px;color:#023347;transition:color .2s} .faq-row:hover .faq-qt{color:#016f74} .faq-pic{width:26px;height:26px;flex:none;margin-top:7px;transition:transform .35s ease} .faq-item.open .faq-pic{transform:rotate(45deg)} .faq-ans{max-height:0;overflow:hidden;transition:max-height .4s ease} .faq-item.open .faq-ans{max-height:360px} .faq-ans-in{padding-bottom:28px;font-family:'Figtree',sans-serif;font-weight:400;font-size:21px;line-height:31px;color:#023347;opacity:.8} .faq-div{height:1px;background:#e2e8f0} /* testimonial carousel */ .rev-dot{width:10px;height:10px;border-radius:50%;background:rgba(233,242,244,.4);cursor:pointer;transition:all .25s} .rev-dot.on{width:30px;border-radius:5px;background:#e9f2f4} #rev-quote,#rev-name,#rev-company,#rev-avatar,#rev-lav,#rev-rav{transition:opacity .35s ease, transform .35s ease} /* hero entrance pre-hide */ .ganim #hero-headline,.ganim #hero-sub,.ganim #hero-apply,.ganim #hero-seehow,.ganim #hero-seehow-arrow,.ganim #hero-phone,.ganim #hero-laptop,.ganim #hero-products,.ganim #hero-video,.ganim #hero-badge{opacity:0} /* products radial wheel */ @keyframes orbitSpin{to{transform:rotate(360deg)}} .porbit{position:absolute;left:0;top:0;width:1920px;height:1446px;transform-origin:959.57px 711.07px;animation:orbitSpin 70s linear infinite} .porbit .pitem{position:absolute;display:flex;align-items:center;justify-content:center} @media (prefers-reduced-motion:reduce){.porbit{animation:none}} /* ===== Product Catalog (product page) ===== */ /* Two-column layout: sticky-feeling left filter rail + right product grid. */ .cat-wrap{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start} /* --- left filter rail --- */ .cat-side{display:flex;flex-direction:column;gap:22px} .cat-search{display:flex;align-items:center;gap:11px;background:#fff;border:1.5px solid #d3ecef; border-radius:15px;padding:13px 16px;transition:border-color .2s,box-shadow .2s} .cat-search:focus-within{border-color:#016f74;box-shadow:0 0 0 4px rgba(1,111,116,.10)} .cat-search svg{flex:none} .cat-search input{flex:1;min-width:0;border:0;outline:0;background:transparent; font-family:'Figtree',sans-serif;font-size:16px;color:#023347} .cat-search input::placeholder{color:#9aa6ad} .cat-cats{display:flex;flex-direction:column;gap:3px} .cat-cat{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%; font-family:'Figtree',sans-serif;font-weight:600;font-size:16px;color:#4b5563; background:transparent;border:0;border-radius:12px;padding:12px 16px;cursor:pointer; text-align:left;transition:background .15s,color .15s} .cat-cat .cn{font-size:13px;font-weight:600;color:#9aa6ad;background:#eef4f5; border-radius:20px;padding:2px 10px;transition:background .15s,color .15s} .cat-cat:hover{background:#f1f9fa;color:#023347} .cat-cat.on{background:#016f74;color:#fff} .cat-cat.on .cn{background:rgba(255,255,255,.22);color:#fff} /* --- right product grid --- */ .cat-main{min-width:0} .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;grid-auto-rows:600px} .pcard.is-hidden{display:none} .cat-empty{font-family:'Figtree',sans-serif;font-size:18px;color:#69727d;text-align:center;padding:80px 0} .cat-more-wrap{display:flex;justify-content:center;margin-top:44px} .cat-more{font-family:'Figtree',sans-serif;font-weight:600;font-size:16px;color:#016f74; background:#fff;border:1.5px solid #016f74;border-radius:32px;padding:15px 38px;cursor:pointer; transition:background .2s,color .2s,box-shadow .2s} .cat-more:hover{background:#016f74;color:#fff;box-shadow:0 14px 30px -14px rgba(1,111,116,.5)} .cat-more[hidden]{display:none} .pcard{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 8px 30px -16px rgba(2,51,71,.18); display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s} .pcard:hover{transform:translateY(-8px);box-shadow:0 36px 60px -26px rgba(2,51,71,.32)} .pcard .pic{aspect-ratio:1/1;overflow:hidden;background:#eef4f5} .pcard .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .pcard:hover .pic img{transform:scale(1.05)} .pcard .info{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1} .pcard .ptag{align-self:flex-start;font-family:'Figtree',sans-serif;font-weight:700;font-size:13px;letter-spacing:.6px; text-transform:uppercase;color:#016f74;background:rgba(1,111,116,.10);padding:7px 14px;border-radius:22px;margin-bottom:16px} .pcard h3{font-family:'Figtree',sans-serif;font-weight:600;font-size:24px;line-height:1.28;color:#023347;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pcard .pdesc{font-family:'Figtree',sans-serif;font-size:19px;line-height:1.5;color:#67768e;margin-top:12px;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pcard .pmore{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:18px} .pcard .pmore span{font-family:'Figtree',sans-serif;font-weight:600;font-size:16px;color:#016f74} .pcard .pmore .ab{width:48px;height:48px;border-radius:50%;background:#016f74;display:flex;align-items:center;justify-content:center;transition:transform .2s;flex:none} .pcard:hover .pmore .ab{transform:translateX(5px)} .pcard{cursor:pointer} /* ===== Product modal (PDP) ===== */ .bmn-pm{position:fixed;inset:0;z-index:9999;display:none;font-family:'Figtree',sans-serif} .bmn-pm.open{display:block} .bmn-pm-bg{position:absolute;inset:0;background:rgba(2,30,38,.55);backdrop-filter:blur(3px)} .bmn-pm-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1080px,94vw); max-height:92vh;overflow:auto;background:#fff;border-radius:24px;box-shadow:0 40px 100px -30px rgba(2,51,71,.6);animation:bmnpm .25s ease} @keyframes bmnpm{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}} .bmn-pm-x{position:absolute;top:16px;right:18px;z-index:3;width:42px;height:42px;border:none;border-radius:50%; background:#f1f5f6;color:#023347;font-size:24px;line-height:1;cursor:pointer;transition:background .15s} .bmn-pm-x:hover{background:#e2ebec} .bmn-pm-grid{display:grid;grid-template-columns:1fr 1.05fr} .bmn-pm-info{padding:50px 44px 42px;position:relative} .bmn-pm-cert{position:absolute;top:44px;right:38px;font-size:9.5px;font-weight:700;letter-spacing:.4px;color:#67768e; text-align:center;line-height:1.2;border:1.5px solid #d3dde0;border-radius:50%;width:62px;height:62px; display:flex;align-items:center;justify-content:center;padding:6px} .bmn-pm-crumb{font-size:13px;color:#69727d;font-weight:600;margin-bottom:22px} .bmn-pm-crumb span{margin:0 7px;opacity:.55} .bmn-pm-info h2{font-family:'Geist',sans-serif;font-weight:700;color:#023347;font-size:clamp(26px,2.6vw,40px); line-height:1.08;letter-spacing:-.01em;max-width:15ch;margin:0} .bmn-pm-sub{margin-top:14px;color:#67768e;font-size:15px;padding-bottom:22px;border-bottom:1px solid #e7eef0} .bmn-pm-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0} .bmn-pm-tags span{background:#023347;color:#fff;font-size:11px;font-weight:700;letter-spacing:.6px; text-transform:uppercase;padding:7px 13px;border-radius:20px} .bmn-pm-intro{font-size:16px;line-height:1.65;color:#4b5563;margin:0} .bmn-pm-dh{font-family:'Figtree',sans-serif;font-weight:700;color:#023347;font-size:15px;margin:24px 0 8px} .bmn-pm-desc{font-size:15px;line-height:1.7;color:#67768e;margin:0} .bmn-pm-cta{display:inline-flex;align-items:center;gap:10px;margin-top:32px;background:#016f74;color:#fff; font-weight:700;font-size:17px;padding:16px 30px;border-radius:34px;text-decoration:none; box-shadow:0 14px 30px -10px rgba(1,111,116,.55);transition:transform .2s,box-shadow .2s} .bmn-pm-cta:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(1,111,116,.6)} .bmn-pm-media{background:linear-gradient(160deg,#f3f7f8,#e6f0f2);display:flex;align-items:center; justify-content:center;padding:36px;border-radius:0 24px 24px 0} .bmn-pm-hero{width:100%;aspect-ratio:1/1;background:#fff;border-radius:18px;overflow:hidden; box-shadow:0 20px 50px -24px rgba(2,51,71,.3);display:flex;align-items:center;justify-content:center} .bmn-pm-hero img{width:100%;height:100%;object-fit:cover} body.bmn-pm-lock{overflow:hidden} @media(max-width:820px){ .bmn-pm-grid{grid-template-columns:1fr} .bmn-pm-media{order:-1;border-radius:24px 24px 0 0;padding:26px} .bmn-pm-info{padding:34px 24px 30px} .bmn-pm-cert{top:30px;right:20px;width:52px;height:52px} } /* Hero video: click-to-expand layer + lightbox */ .hero-video-cover{position:absolute;inset:0;cursor:pointer;z-index:2;transition:background .25s;background:linear-gradient(180deg,rgba(2,24,38,0) 55%,rgba(2,24,38,.2))} .hero-video-cover:hover{background:linear-gradient(180deg,rgba(2,24,38,.05) 40%,rgba(2,24,38,.4))} .hero-video-cover .snd{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;background:rgba(2,24,38,.62);color:#fff;font-family:'Figtree',sans-serif;font-weight:600;font-size:15px;padding:9px 16px;border-radius:30px;white-space:nowrap;transition:opacity .2s} .hero-video-cover.has-sound .snd{opacity:0;pointer-events:none} .hero-video-cover .pp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.96);padding-left:4px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;transition:opacity .2s;pointer-events:none} .hero-video-cover.paused .pp{opacity:1} .hero-expand{position:absolute;top:16px;right:16px;z-index:4;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:rgba(2,24,38,.55);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .2s} .hero-expand:hover{background:rgba(2,24,38,.85);transform:scale(1.06)} .bmn-lightbox{position:fixed;inset:0;z-index:99999;background:rgba(2,18,24,.88);display:flex;align-items:center;justify-content:center;padding:30px} .bmn-lb-inner{position:relative;width:min(1120px,92vw)} .bmn-lb-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.55)} .bmn-lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .bmn-lb-close{position:absolute;top:-50px;right:0;width:44px;height:44px;border:0;background:transparent;color:#fff;font-size:38px;line-height:1;cursor:pointer} /* ===== Blog ===== */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px} .bcard{display:flex;flex-direction:column;cursor:pointer} .bcard .bpic{border-radius:22px;overflow:hidden;aspect-ratio:16/11;background:#dfeaec} .bcard .bpic img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .bcard:hover .bpic img{transform:scale(1.05)} .bcard .bcat{font-family:'Figtree',sans-serif;font-weight:700;font-size:14px;letter-spacing:.6px;text-transform:uppercase;color:#016f74;margin:22px 0 10px} .bcard h3{font-family:'Geist',sans-serif;font-weight:600;font-size:25px;line-height:1.3;color:#023347;transition:color .2s} .bcard:hover h3{color:#016f74} .bcard .bexc{font-family:'Figtree',sans-serif;font-size:18px;line-height:1.55;color:#67768e;margin-top:12px} .bcard .bmeta{font-family:'Figtree',sans-serif;font-size:15px;color:#9aa6ad;margin-top:16px} /* blog single (flows in normal width, scaled by canvas) */ .post-body{font-family:'Figtree',sans-serif;font-size:21px;line-height:1.75;color:#1f2937} .post-body h2{font-family:'Geist',sans-serif;font-weight:700;font-size:38px;color:#023347;margin:42px 0 18px} .post-body h3{font-family:'Geist',sans-serif;font-weight:600;font-size:28px;color:#023347;margin:32px 0 14px} .post-body p{margin:0 0 22px} .post-body a{color:#016f74;text-decoration:underline} .post-body img{max-width:100%;height:auto;border-radius:18px;margin:24px 0} .post-body ul,.post-body ol{margin:0 0 22px 26px} .post-body li{margin-bottom:10px} /* ============================================================================ MOBILE CANVAS (front page, <=768px) — ported from the Vite build's mobile artboard: a fixed 490px absolute canvas scaled by CSS zoom to the viewport (theme.js sets .mcanvas zoom = innerWidth/490), exactly like the React app. Sections are stacked relative blocks (.msec) with absolutely-positioned children (.ma), so dropping a section leaves no gap. Desktop is untouched; on the front page <=768 the desktop .canvas sections hide and .mcanvas shows. ============================================================================ */ /* ============================================================================ FRONT-PAGE DESKTOP ARTBOARD — the exact Vite "LandingPageFinal" render, extracted to parts/desktop-home.html. 1920px absolute canvas scaled by zoom = viewportWidth/1920 (theme.js dfit). Hidden <=820 (mobile uses .mcanvas). ============================================================================ */ .dstage{overflow-x:hidden} .dcanvas{position:relative;width:1920px;height:8486px;margin:0 auto;overflow:hidden;background:#e9f2f4;font-family:'Figtree',sans-serif} .dcanvas img{max-width:none} /* nav pill: the 80px-radius rounded ends need more inset than the design's 30/16px so the logo (left) and Apply button (right) don't crowd/touch the curved edges */ .dcanvas [data-name="01 Header (floating)"] nav{padding-left:34px;padding-right:30px} /* nudge just the logo a touch further left within the pill */ .dcanvas .bmn-nav-logo{margin-left:-4px} /* calc slider: the native range input was rendering ON TOP of the custom track/thumb design — make it an invisible interaction overlay so calc-fill + calc-thumb show */ .dcanvas #calc-slider{-webkit-appearance:none;appearance:none;opacity:0;background:transparent;cursor:pointer} .dcanvas #calc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px} @media (max-width:820px){ .dstage{display:none !important} } .mcanvas{display:none;position:relative;width:490px;margin:0 auto;font-family:'Figtree',sans-serif;background:#e9f2f4} .msec{position:relative;width:490px} .ma{position:absolute} .mcanvas img{max-width:none} /* the extracted markup carries leftover Tailwind opacity-0/hidden state from the React app's scroll-reveal (no reveal runs here) — force it all visible */ .mcanvas .opacity-0,.mcanvas [style*="opacity: 0"],.mcanvas [style*="opacity:0"]{opacity:1 !important} .mcanvas [style*="visibility: hidden"],.mcanvas [style*="visibility:hidden"]{visibility:visible !important} /* mobile scroll reveals (theme.js): class-based because GSAP's inline opacity is beaten by the force-visible !important rules above — .m-anim.m-pre (0,3,0 specificity) outranks them; removing .m-pre transitions the section in. */ .mcanvas .m-anim{transition:opacity .65s ease,transform .65s ease} .mcanvas .m-anim.m-pre{opacity:0 !important;transform:translateY(26px)} /* spin the products orbit around the true centre of the product cluster */ /* products carousel: full-width white band so the orbiting products aren't sliced by the narrow 389px box. The orbit itself stays 389px (centred) so every product — including the right-anchored bentonite sachet — keeps its designed ring position; only the white band + clip boundary go edge-to-edge (products bleed to screen edges). */ .mcanvas [data-name="07 Products"]{width:490px !important;margin-left:auto !important;margin-right:auto !important} .mcanvas .bmn-orbit-mobile{left:50.5px !important;right:50.5px !important;transform-origin:195px 274px !important;will-change:transform} /* perf: backdrop-blur is a scroll-jank killer on mobile — the tinted cards keep their background colour without it, so drop the blur to stop the lag */ .mcanvas *{backdrop-filter:none !important;-webkit-backdrop-filter:none !important} /* mobile nav slide-over menu (opened by the header hamburger; lives on so it renders at real scale outside the zoomed canvas) */ /* visibility/opacity (not display) so the panel is always laid out off-screen and can actually animate in; backdrop fades, panel slides */ #m-menu{position:fixed;inset:0;z-index:99999;overflow:hidden;background:rgba(2,30,38,.55); opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s} #m-menu.open{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s} #m-menu .m-menu-panel{position:absolute;top:0;right:0;height:100%;width:min(80vw,320px); background:#016f74;box-shadow:-8px 0 40px rgba(0,0,0,.35);display:flex;flex-direction:column; padding:74px 26px 28px;transform:translateX(100%); transition:transform .34s cubic-bezier(.32,.72,0,1);will-change:transform} #m-menu.open .m-menu-panel{transform:translateX(0)} #m-menu .m-menu-x{position:absolute;top:20px;right:22px;width:40px;height:40px;background:none;border:0; color:#fff;font-size:34px;line-height:1;cursor:pointer} #m-menu a{color:#fff;font-family:'Figtree',sans-serif;font-weight:600;font-size:19px;padding:15px 2px; text-decoration:none;border-bottom:1px solid rgba(255,255,255,.14);cursor:pointer} #m-menu .m-menu-apply{margin-top:20px;background:#fff;color:#016f74;text-align:center;border-radius:40px; border:0;padding:15px;font-size:17px} @media (max-width:820px){ body.home .stage{overflow:hidden} body.home .canvas{zoom:1 !important;width:100% !important;height:auto !important;padding:0 !important} body.home .canvas > section.sec{display:none !important} /* hide desktop sections */ body.home .canvas > div.a{display:none !important} /* hide desktop bleed bands */ body.home .canvas > div[style*="height:120px"]{display:none !important} body.home .mcanvas{display:block} } /* ---- PRODUCT PAGE mobile (<=820px) --------------------------------------- Hero + catalog stay in the generic flow (they reflow fine); the revenue calculator, products carousel and comparison table are dropped; and the nav, FAQ, Final CTA and footer are swapped for the home mobile versions (known-good canvas components) so they match the home page exactly. The reused sections are self-contained, so flattening each direct .pcanvas child to normal flow stacks them with no gaps. */ @media (max-width:820px){ body.bmn-mcanvas .stage{overflow:hidden} body.bmn-mcanvas .canvas{zoom:1 !important;width:100% !important;height:auto !important;padding:0 !important} /* keep only the hero + catalog; hide the desktop nav, calc, products, compare, FAQ, CTA, footer */ body.bmn-mcanvas .canvas > section.sec:not(#prod-hero):not(#catalog){display:none !important} body.bmn-mcanvas .canvas > div.a{display:none !important} body.bmn-mcanvas .canvas > div[style*="height:120px"]{display:none !important} body.bmn-mcanvas .mcanvas{display:block} /* flatten each canvas child into normal flow */ .pcanvas > *{position:relative !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;transform:none !important;margin-left:auto !important;margin-right:auto !important;float:none !important} .pcanvas > .pm-navwrap{position:relative;width:490px;height:82px} .pcanvas .btn-flex{padding:0 !important} /* "Browse the catalog" is teal text — the generic .sec a.a.col button rule gives it a teal background too, making it an invisible pill. Keep it a plain text link. */ body.bmn-mcanvas #hero-seehow{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;color:#016f74 !important;text-decoration:underline;text-underline-offset:3px} /* breathing room above the FAQ heading (it's the first thing in the bottom canvas, otherwise it butts right up against the end of the catalog) */ body.bmn-mcanvas #m-faq{padding-top:76px !important} } /* ============================================================================ MOBILE FLOW MODE (<=820px) — product/blog pages keep this relayout The desktop layout is a fixed 1920px absolute canvas scaled by zoom. On phones that meant the whole design squeezed to ~20% (body text ~3.5 physical px). Below 820px we abandon the zoom entirely: sections become normal-flow blocks, absolutely-positioned children (.a) flatten into a stacked column, the over-wide background bands become section backgrounds, and type is re-set with clamp(). theme.js skips zoom-fit / sticky-header / fb-round / catalog-reflow at this breakpoint. Desktop is untouched. ========================================================================== */ @media (max-width:820px){ /* --- core flow transform --- */ .canvas{zoom:1 !important;width:100% !important;height:auto !important;padding-top:64px} .sec{position:relative !important;top:auto !important;left:auto !important;width:100% !important;height:auto !important;padding:48px 18px;overflow:hidden} .vc{position:static !important;width:auto !important;top:auto !important;left:auto !important} .sec .a{position:relative !important;left:auto !important;top:auto !important;right:auto !important;bottom:auto !important;width:auto !important;height:auto !important;margin:0 0 16px;white-space:normal !important;transform:none !important;z-index:1} /* full-bleed bands inside sections -> section backgrounds */ .sec .a[style*="-2000px"],.sec .a[style*="width:1921px"]{position:absolute !important;left:0 !important;top:0 !important;width:100% !important;height:100% !important;margin:0;z-index:0;border-radius:0 !important;box-shadow:none !important} /* canvas-level bleed bands (products/partners backdrops) are redundant on mobile */ .canvas>div.a{display:none !important} .sec img{max-width:100%;height:auto} /* type scale */ .sec .geb,.sec .ges{font-size:clamp(30px,8.6vw,40px) !important;line-height:1.16 !important;letter-spacing:-1px !important} .sec .fb{font-size:clamp(17px,4.8vw,20px) !important;line-height:1.35 !important} .sec .fs{font-size:clamp(14px,4vw,16px) !important;line-height:1.5 !important} .sec .fr{font-size:clamp(15px,4.2vw,17px) !important;line-height:1.55 !important} .btn-flex{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:40px} .btn-flex span{font-size:16px !important;line-height:1 !important} .btn-flex img{width:14px;height:14px} /* --- header: fixed slim bar, logo + Apply only --- */ #site-header{position:fixed !important;top:0 !important;left:0 !important;z-index:50;height:64px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;overflow:visible} #site-header>div.a{position:absolute !important;left:8px !important;top:6px !important;right:8px;width:auto !important;height:52px !important;margin:0;border-radius:28px} #site-header>a{position:relative;z-index:2;margin:0} #site-header>a.fs{display:none !important} #site-header img.a{position:static !important;width:104px !important;height:38px !important;margin:0} #site-header .btn-flex{padding:10px 18px;height:auto !important;width:auto !important} .canvas>div[style*="height:120px"]{height:76px !important} /* --- home hero --- */ #hero-vector,#hero-phone,#hero-products,#hero-seehow-arrow{display:none !important} #hero-laptop{margin-top:6px} #hero-seehow{color:#016f74} /* --- build in 4 steps --- */ #how-it-works .a[style*="display:flex"]{display:block !important} #how-it-works .a[style*="display:flex"]>div{position:relative;width:100% !important;height:auto !important;margin:0 0 18px;border-radius:18px;overflow:hidden;padding-bottom:20px} #how-it-works .a[style*="display:flex"]>div>*{position:relative !important;left:0 !important;top:0 !important;right:auto !important;width:auto !important;height:auto !important} #how-it-works .a[style*="display:flex"]>div>div:first-child{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;border-radius:0} #how-it-works .a[style*="display:flex"]>div>img{width:100% !important;display:block} #how-it-works .a[style*="display:flex"]>div>div{margin:12px 20px 0} /* --- what you get (#services): heading first, cards as clean list --- */ #services .vc{display:flex;flex-direction:column} #services .vc>:nth-child(18){order:-3} #services .vc>:nth-child(19){order:-2} #services .vc>:nth-child(20){order:-1} #services .vc>:nth-child(4n+1):nth-child(-n+16){display:none !important} /* color blocks */ #services .vc>:nth-child(4n+2):nth-child(-n+16){display:none !important} /* icons */ #services .vc>:nth-child(4n+3):nth-child(-n+16){color:#023347 !important;margin-bottom:6px} #services .vc>:nth-child(4n):nth-child(-n+16){color:#4b5563 !important;padding-bottom:16px;border-bottom:1px solid rgba(2,51,71,.12);margin-bottom:18px} /* --- partners / testimonial carousel --- */ .sec .a[style*="blur(4px)"]{display:none !important} .sec .a[style*="width:960px"]{width:100% !important;height:auto !important;padding:22px 18px 26px;border-radius:24px} .sec .a[style*="width:960px"]>*{position:relative !important;left:0 !important;top:0 !important;width:auto !important;height:auto !important} .sec .a[style*="width:960px"]>div:first-child{display:none} /* giant quote glyph */ #rev-quote{font-size:clamp(17px,4.6vw,20px) !important;line-height:1.5 !important;height:auto !important;margin-bottom:16px} #rev-prev{position:absolute !important;left:2px !important;top:45% !important;margin:0;transform:scale(.8) !important;z-index:2} #rev-next{position:absolute !important;right:2px !important;top:45% !important;left:auto !important;margin:0;transform:scale(.8) !important;z-index:2} #rev-dots{display:flex;justify-content:center} /* --- revenue calculator --- */ .sec .a[style*="width:795px"]{width:100% !important;height:auto !important;padding:20px 16px;border-radius:18px} .sec .a[style*="width:795px"] *{position:static !important;left:auto !important;top:auto !important;right:auto !important;width:auto !important;height:auto !important;white-space:normal !important} .sec .a[style*="width:795px"] .geb{font-size:clamp(22px,6vw,28px) !important} #followerSlider{opacity:1 !important;width:100% !important;height:32px !important;margin:10px 0 !important;accent-color:#016f74;cursor:pointer} #sliderFill,#sliderThumb{display:none !important} .sec .a[style*="width:795px"] div[style*="height:81px"] .fr{display:none !important} .sec .a[style*="width:795px"] div[style*="height:180px"]{padding:16px;margin:14px 0;display:block} .sec .a[style*="width:795px"] .btn-flex{width:100% !important;padding:16px;margin-top:6px} #totalRoyalties{font-size:clamp(34px,10vw,44px) !important} .sec .vc>div[style*="916px"]{position:relative !important;left:auto !important;top:auto !important;width:100% !important;height:auto !important;display:block !important;margin-top:16px} .sec .vc>div[style*="916px"]>div{width:100%} .sec .vc>div[style*="916px"]>div>div{padding:18px;margin-bottom:14px} .sec .vc>div[style*="916px"] [style]{position:static !important;left:auto !important;top:auto !important;right:auto !important;width:auto !important;height:auto !important;white-space:normal !important} .sec .vc>div[style*="916px"] div[style*="border-radius:50%"]{display:none !important} /* --- products orbit: hide the ring, keep the message --- */ .porbit{display:none !important} /* --- compare: JS builds a stacked mobile table; hide the desktop art board --- */ .sec .a.cmp-board{transform:none !important;width:100% !important;height:auto !important;padding:0;border:0 !important;filter:none !important} .sec .a.cmp-board>*{display:none !important} .sec .a.cmp-board>div[style*="490px"]{display:block !important;position:relative !important;left:auto !important;top:auto !important;width:100% !important;height:auto !important;padding:22px 18px;margin-bottom:16px} .sec .a.cmp-board>div[style*="490px"]>*{position:static !important;left:auto !important;top:auto !important;width:auto !important;height:auto !important} .sec .a.cmp-board>div[style*="490px"]>div[style*="height:1px"]{display:none !important} .sec .a.cmp-board>div[style*="490px"]>div{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px} .sec .a.cmp-board>div[style*="490px"] img[src*="check"]{position:static !important;width:20px !important;height:20px !important;flex:none} .sec .a.cmp-board>div[style*="490px"] img[src*="Logo"]{position:static !important;width:130px !important;height:auto !important;margin:0 auto 14px} .sec .a.cmp-board>div[style*="490px"] .fs{font-size:16px !important;white-space:normal !important} .sec .a.cmp-board>div[style*="490px"] .btn-flex{margin:8px auto 0;box-shadow:none} .sec .a.cmp-board>.bmn-cmp-m,.bmn-cmp-m{display:block !important;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:6px 16px;margin-bottom:16px} .bmn-cmp-m .r{padding:12px 0;border-bottom:1px solid #e9eef0} .bmn-cmp-m .r:last-child{border-bottom:0} .bmn-cmp-m .l{font-family:'Figtree',sans-serif;font-weight:700;font-size:15px;color:#016f74;margin-bottom:3px} .bmn-cmp-m .v{font-family:'Figtree',sans-serif;font-size:15px;color:#4b5563} /* --- FAQ --- */ #faq{width:auto !important} .faq-qt{font-size:17px !important} .faq-ans-in{font-size:15px !important} /* --- final CTA --- */ .sec .a[style*="1661px"]{width:100% !important;height:auto !important;padding:26px 20px;border-radius:24px} .sec a.a:empty{display:none !important} .sec a.a.col{display:inline-block;width:auto !important;padding:14px 22px;border-radius:40px;margin:6px 10px 6px 0;font-size:16px !important} .sec a.a.col[href*="apply"]{background:#e9f2f4} .sec a.a.col:not([href*="apply"]){background:#016f74;border:1px solid #e9f2f4} .sec img[src*="cta-arrow"]{display:none !important} .sec img[src*="cta-phone"]{width:70% !important;margin:0 auto 4px} /* --- footer --- */ /* the dark band is width:1920px (not the -2000px/1921px bleed bands handled above) AND theme.js re-serialises its style attr (#021e26 -> rgb()), so a [style*] match fails — pin it by class as the footer's section background, else the light footer text lands on white and is unreadable on mobile. */ .sec .bmn-foot-bg{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;margin:0 !important;z-index:0 !important;border-radius:0 !important} .sec div.a[style*="border-radius:20px"][style*="width:40px"]{display:none !important} .sec .a[style*="flex-direction:column"]{margin-bottom:22px} /* --- product page: hero video + catalog --- */ #hero-video{position:relative !important;width:100% !important;height:auto !important;aspect-ratio:16/9;border-radius:16px;overflow:hidden} #hero-badge{display:inline-flex !important;width:auto !important} .cat-wrap{display:block} .cat-side{margin-bottom:18px} .cat-cats{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:2px;-webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity} .cat-cats::-webkit-scrollbar{display:none} .cat-cat{scroll-snap-align:start} .cat-cat{flex:none;width:auto;padding:9px 13px;border:1px solid #d3ecef;background:#fff} .cat-cat .cn{padding:1px 8px} .cat-grid{grid-template-columns:1fr 1fr;gap:12px;grid-auto-rows:auto} .pcard .info{padding:12px 12px 14px} .pcard h3{font-size:15px} .pcard .ptag{font-size:10px;padding:4px 9px;margin-bottom:8px} .pcard .pmore span{font-size:12px} .pcard .pmore .ab{width:32px;height:32px} .pcard .pmore .ab svg{width:13px;height:13px} .cat-more-wrap{margin-top:24px} /* --- product detail modal --- */ .bmn-pm-card{width:94vw;max-height:88vh} .bmn-pm-grid{grid-template-columns:1fr;gap:18px;padding:20px} .bmn-pm-cert{display:none} /* --- blog --- */ .blog-grid{grid-template-columns:1fr !important;gap:22px} .flow-in{padding:0 18px} .flowsec{width:100% !important} /* blog hero: the desktop 64px H1 is literal at mobile zoom:1 (one word/line) — size it down so the title, eyebrow and intro read uniformly on phones. */ .flow-in h1{font-size:32px !important;line-height:1.15 !important;letter-spacing:-.5px !important;margin-top:12px !important} .flow-in > .fs{font-size:13px !important;letter-spacing:1.4px !important} .flow-in > .fr{font-size:16px !important;line-height:1.5 !important;margin-top:14px !important} } /* ============================================================================ SHARED SITE HEADER (parts/site-nav.php) — one real-pixel fixed nav on every page (home / product / blog). Lives OUTSIDE any zoomed canvas so it renders pixel-identical regardless of the page's zoom. Brand language matches home: teal #016f74 pill, cyan #0ff hover underline, white outline Apply pill. ============================================================================ */ .bmn-hdr{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;justify-content:center;padding:16px 20px;pointer-events:none;transition:transform .3s ease} .bmn-hdr.hdr-hidden{transform:translateY(-160%)} .bmn-hdr-pill{pointer-events:auto;display:flex;align-items:center;gap:40px;width:auto;max-width:calc(100vw - 40px);height:60px;padding:0 10px 0 26px;background:#016f74;border-radius:999px;box-shadow:0 12px 34px rgba(1,111,116,.30)} .bmn-hdr-logo{display:flex;align-items:center;flex-shrink:0;transition:transform .2s ease} .bmn-hdr-logo img{height:32px;width:auto;object-fit:contain;display:block} .bmn-hdr-logo:hover{transform:scale(1.04)} .bmn-hdr-links{display:flex;align-items:center;gap:26px} .bmn-hdr-links a,.bmn-hdr-contact{position:relative;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;padding:6px 2px;transition:color .18s ease} .bmn-hdr-links a::after{content:"";position:absolute;left:50%;bottom:-1px;width:0;height:2px;background:#0ff;border-radius:2px;transform:translateX(-50%);transition:width .2s ease} .bmn-hdr-links a:hover{color:#0ff} .bmn-hdr-links a:hover::after{width:100%} .bmn-hdr-right{display:flex;align-items:center;gap:18px;flex-shrink:0} .bmn-hdr-contact:hover{color:#0ff} .bmn-hdr-apply{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 20px;border:1px solid #fff;border-radius:999px;color:#fff;font-family:'Figtree',sans-serif;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .2s ease,color .2s ease,transform .2s ease} .bmn-hdr-apply:hover{background:#fff;color:#016f74;transform:translateY(-1px)} .bmn-hdr-arrow{transition:transform .2s ease} .bmn-hdr-apply:hover .bmn-hdr-arrow{transform:translateX(3px)} .bmn-hdr-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;background:none;border:0;cursor:pointer;flex-shrink:0} .bmn-hdr-burger span{display:block;height:2.5px;width:100%;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease} /* mobile drawer */ .bmn-drawer{position:fixed;inset:0;z-index:1100;background:rgba(2,30,38,.55);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease} .bmn-drawer.open{opacity:1;visibility:visible} .bmn-drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(82vw,340px);background:#016f74;display:flex;flex-direction:column;gap:2px;padding:76px 30px 34px;transform:translateX(100%);transition:transform .28s ease;box-shadow:-20px 0 60px rgba(0,0,0,.3)} .bmn-drawer.open .bmn-drawer-panel{transform:none} .bmn-drawer-panel a{color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:19px;font-weight:600;text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.13)} .bmn-drawer-panel a:active{color:#0ff} .bmn-drawer-apply{margin-top:22px;background:#fff;color:#016f74 !important;text-align:center;border-radius:999px;padding:15px 0 !important;border-bottom:0 !important} .bmn-drawer-x{position:absolute;top:20px;right:22px;width:40px;height:40px;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer} /* Switch to the hamburger below 960px — the full pill needs ~900px, so this avoids the links overflowing on narrow-desktop / tablet widths (the page's own mobile artboard still switches at 820px; a hamburger over desktop content in the 821–960 band is fine). */ @media (max-width:960px){ .bmn-hdr{padding:12px 14px} .bmn-hdr-pill{width:100%;max-width:none;height:54px;gap:0;justify-content:space-between;padding:0 6px 0 18px} .bmn-hdr-links,.bmn-hdr-right{display:none} .bmn-hdr-logo img{height:27px} .bmn-hdr-burger{display:flex} } /* ============================================================================ SHARED FOOTER (parts/site-footer.php) — one real-pixel, responsive Final CTA + footer on every page (home / product / blog). Lives OUTSIDE any zoomed canvas so it is pixel-identical everywhere. ============================================================================ */ /* Sizes are viewport-scaled (design px / 1920 * 100vw, min/max-clamped) so the CTA renders the SAME as the original footer.php CTA did at every width (it scaled by viewport/1920). Original values: card 1661x485 r50 gradient180, heading 56.887, subtext 23.271, buttons h63 r58, Apply text 25.257, Earn text 24.231, phone 429. */ .bmn-cta{background:#e9f2f4;padding:clamp(40px,4vw,76px) clamp(18px,7.4vw,142px)} .bmn-cta-card{position:relative;max-width:1408px;margin:0 auto;min-height:clamp(240px,20.63vw,396px);display:flex;align-items:center;padding:clamp(26px,3.4vw,64px) clamp(26px,4.2vw,80px);border-radius:clamp(20px,1.56vw,30px);background:#012a2e url(assets/cta-bg.webp) center/cover no-repeat} .bmn-cta-copy{position:relative;z-index:1;flex:1 1 auto;min-width:0;max-width:58%} .bmn-cta-copy h2{font-family:'Geist',sans-serif;font-weight:600;font-size:clamp(28px,2.963vw,57px);line-height:1.04;letter-spacing:-.6px;color:#e9f2f4} .bmn-cta-copy p{font-family:'Figtree',sans-serif;font-size:clamp(15px,1.212vw,23px);line-height:1.32;color:#e9f2f4;opacity:.8;margin-top:clamp(14px,1.1vw,21px);max-width:640px} .bmn-cta-btns{display:flex;flex-wrap:wrap;gap:clamp(12px,1vw,18px);margin-top:clamp(20px,1.9vw,36px)} .bmn-cta-apply,.bmn-cta-earn{display:inline-flex;align-items:center;gap:8px;height:clamp(46px,3.3vw,63px);padding:0 clamp(20px,1.7vw,32px);border-radius:999px;font-family:'Figtree',sans-serif;font-weight:600;font-size:clamp(16px,1.31vw,25px);text-decoration:none;white-space:nowrap;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease} .bmn-cta-apply{background:#fff;color:#016f74} .bmn-cta-apply:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.22)} .bmn-cta-earn{background:#016f74;color:#e9f2f4;border:1px solid #e9f2f4} .bmn-cta-earn:hover{transform:translateY(-2px);background:#017a80} .bmn-cta-apply svg,.bmn-cta-earn svg{width:clamp(15px,.9vw,17px);height:clamp(15px,.9vw,17px);transition:transform .2s ease} .bmn-cta-apply:hover svg,.bmn-cta-earn:hover svg{transform:translateX(3px)} .bmn-cta-media{position:absolute;right:clamp(8px,4vw,80px);bottom:0;top:auto} .bmn-cta-media img{display:block;width:clamp(200px,22.34vw,429px);height:auto;object-fit:contain} .bmn-ftr{background:#021e26;border-top-left-radius:clamp(28px,2.5vw,48px);border-top-right-radius:clamp(28px,2.5vw,48px);padding:clamp(48px,4.27vw,82px) clamp(20px,7.81vw,150px) 40px;color:#cfdfe2} .bmn-ftr-in{max-width:1620px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1.1fr;gap:clamp(28px,2.6vw,50px)} .bmn-ftr-logo{height:clamp(42px,2.92vw,56px);width:auto;object-fit:contain;display:block} .bmn-ftr-tag{font-family:'Figtree',sans-serif;font-size:clamp(14px,.833vw,16px);line-height:1.55;color:#b8cdd1;margin-top:clamp(16px,1.4vw,26px);max-width:390px} .bmn-ftr-apply{display:inline-flex;align-items:center;justify-content:center;height:clamp(42px,2.5vw,48px);padding:0 clamp(20px,1.35vw,26px);margin-top:clamp(18px,1.6vw,30px);border-radius:24px;background:#fff;color:#021e26;font-family:'Figtree',sans-serif;font-weight:700;font-size:clamp(14px,.833vw,16px);text-decoration:none;transition:transform .2s ease} .bmn-ftr-apply:hover{transform:translateY(-2px)} .bmn-ftr-col{display:flex;flex-direction:column;gap:clamp(12px,.94vw,18px)} .bmn-ftr-h{font-family:'Figtree',sans-serif;font-weight:700;font-size:clamp(15px,.885vw,17px);letter-spacing:.6px;color:#4fd1c5;margin-bottom:2px} .bmn-ftr-col a{font-family:'Figtree',sans-serif;font-size:clamp(14px,.833vw,16px);color:#cfdfe2;text-decoration:none;transition:color .18s ease} .bmn-ftr-col a:hover{color:#4fd1c5} .bmn-ftr-rule{max-width:1620px;margin:clamp(34px,2.7vw,52px) auto 0;height:1px;background:rgba(255,255,255,.12)} .bmn-ftr-bottom{max-width:1620px;margin:22px auto 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 26px} .bmn-ftr-copy{font-family:'Figtree',sans-serif;font-size:14px;color:#93acb2} .bmn-ftr-legal{display:flex;flex-wrap:wrap;gap:8px 22px} .bmn-ftr-legal a{font-family:'Figtree',sans-serif;font-size:14px;color:#cfdfe2;text-decoration:none;transition:color .18s ease} .bmn-ftr-legal a:hover{color:#4fd1c5} .bmn-ftr-social{display:flex;gap:12px} .bmn-ftr-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#cfdfe2;transition:transform .2s ease,color .2s ease,background .2s ease} .bmn-ftr-social a:hover{transform:translateY(-2px);color:#021e26;background:#4fd1c5} .bmn-ftr-social svg{width:18px;height:18px} .bmn-ftr-disc{max-width:1620px;margin:26px auto 0;font-family:'Figtree',sans-serif;font-size:12px;line-height:1.6;color:#6c828a} @media (max-width:900px){ .bmn-cta{padding:44px 16px} .bmn-cta-card{min-height:0;flex-direction:column;align-items:flex-start;text-align:left;padding:32px 24px;border-radius:28px;gap:24px} .bmn-cta-copy{max-width:100%} .bmn-cta-copy h2{font-size:clamp(28px,7vw,40px)} .bmn-cta-copy p{font-size:16px} .bmn-cta-btns{width:100%} .bmn-cta-apply,.bmn-cta-earn{height:52px;font-size:16px;flex:1 1 auto;justify-content:center} .bmn-cta-media{display:none} /* the protruding phone can't sit cleanly in the stacked card — hide on mobile */ .bmn-ftr{padding:52px 20px 34px;border-top-left-radius:32px;border-top-right-radius:32px} .bmn-ftr-in{grid-template-columns:1fr 1fr;gap:34px 24px} .bmn-ftr-brand{grid-column:1 / -1} .bmn-ftr-tag{font-size:15px} .bmn-ftr-h{font-size:16px} .bmn-ftr-col a{font-size:15px} .bmn-ftr-bottom{flex-direction:column;align-items:flex-start;gap:18px} } @media (max-width:560px){ .bmn-ftr-in{grid-template-columns:1fr} .bmn-cta-btns{flex-direction:column} .bmn-cta-apply,.bmn-cta-earn{width:100%} } /* Home: retire the old in-canvas navs — the shared fixed header replaces both. Desktop = the floating pill baked into the dcanvas artboard. Mobile = the teal bar baked into the mobile artboard (unique: left-[57.88px]). */ .dcanvas [data-name="01 Header (floating)"]{display:none !important} #mcanvas [data-name="Header"][class*="left-[57.88px]"]{display:none !important} /* Product page: retire its old mobile nav strip (shared header covers mobile too). */ .pm-navwrap{display:none !important} /* Product calc was authored ~1.284x larger than the home calculator (card 795 vs home 619, heading 60 vs 48). Zoom the whole block to home scale; left offset re-centres the zoomed 1920 coordinate space (271*.779 = 211 = (1920-1496)/2). */ @media (min-width:821px){ #prod-calc .vc{zoom:.779;left:283px !important} } /* Retire every old Final-CTA + footer (home desktop artboard, home mobile artboard, product mobile bottom) — the shared footer (parts/site-footer.php) replaces them all. The mobile FAQ (#m-faq) above them is kept. */ [data-name="10 Final CTA"],[data-name="11 Footer"]{display:none !important} /* Product hero starts at the very top; on mobile clear the fixed shared header so the eyebrow isn't tucked behind the pill. */ @media (max-width:820px){ body.bmn-mcanvas #prod-hero{padding-top:96px !important} }