/* BIPOFY_HOME_HERO_TITLE_LIGHT_V011B Typography-only override. */ .hero .hero-copy h1, .hero .hero-copy h1 .hero-title-main, .hero .hero-copy h1 .hero-title-main *, .hero .hero-copy .hero-title-main, .hero .hero-copy .hero-title-main *{ font-weight:400 !important; font-synthesis:none !important; } /* FREE remains green, but not bold */ .hero .hero-title-main em{ font-weight:400 !important; } /* Supporting title stays visibly lighter than H1 */ .hero .hero-title-sub{ font-weight:400 !important; } /* Keep clean rendering */ .hero .hero-copy h1{ -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale !important; text-rendering:optimizeLegibility !important; } /* BIPOFY_HOME_HERO_TITLE_BALANCE_V011C Scope: - remove hero eyebrow - balance hero H1 weight - NO nav/header/footer changes */ /* Remove: "ECOMMERCE WITHOUT THE TECHNICAL BURDEN" */ body .hero .hero-copy > .eyebrow{ display:none !important; } /* Main hero title: not bold, not overly thin */ body .hero .hero-copy h1, body .hero .hero-copy h1 .hero-title-main, body .hero .hero-copy h1 .hero-title-main span, body .hero .hero-copy h1 .hero-title-main em, body .hero .hero-copy .hero-title-main, body .hero .hero-copy .hero-title-main span, body .hero .hero-copy .hero-title-main em{ font-weight:500 !important; font-synthesis:none !important; } /* Maintain the clean/tight title geometry */ body .hero .hero-copy h1{ line-height:1.015 !important; letter-spacing:-0.042em !important; -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale !important; text-rendering:optimizeLegibility !important; } /* FREE remains green, but same clean weight */ body .hero .hero-copy .hero-title-main em{ color:#078a58 !important; font-style:normal !important; font-weight:500 !important; } /* Supporting line should remain lighter */ body .hero .hero-title-sub{ font-weight:400 !important; } /* No blank space left by removed eyebrow */ body .hero .hero-copy h1{ margin-top:0 !important; } /* Mobile keeps same balanced title weight */ @media(max-width:760px){ body .hero .hero-copy h1, body .hero .hero-copy .hero-title-main, body .hero .hero-copy .hero-title-main *, body .hero .hero-copy .hero-title-main em{ font-weight:500 !important; } } /* BIPOFY_HOME_HERO_CLEAN_LABELS_V011D Remove only the two decorative hero floating text labels. */ .hero .hero-asset-frame::before, .hero .hero-asset-frame::after{ content:none !important; display:none !important; visibility:hidden !important; opacity:0 !important; animation:none !important; } /* BIPOFY_HOME_HERO_GUIDE_SPACING_V011E Visual spacing only: hero benefits ↓ small business guide ↓ country guide ↓ next section */ /* Both SEO guide lines inside the hero */ .hero .bog-footer{ padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; font-size:14px !important; line-height:1.55 !important; } /* First line: Running a smaller operation? */ .hero .bog-footer:has( a[href="/ecommerce-platform-for-small-business"] ){ margin-top:30px !important; margin-bottom:0 !important; } /* Second country-aware line */ .hero .bog-footer:has( a[href="/ecommerce-platform-bangladesh"] ){ margin-top:8px !important; margin-bottom:28px !important; } /* Keep links editorial, not badge/button style */ .hero .bog-footer a{ display:inline !important; padding:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } /* Mobile: slightly tighter but still clearly separated */ @media(max-width:760px){ .hero .bog-footer:has( a[href="/ecommerce-platform-for-small-business"] ){ margin-top:24px !important; } .hero .bog-footer:has( a[href="/ecommerce-platform-bangladesh"] ){ margin-top:7px !important; margin-bottom:24px !important; } } :root{ --bp13-green:#07966b; --bp13-green-dark:#047857; --bp13-mint:#f3fbf8; --bp13-mint-2:#eef9f5; --bp13-ink:#0d1f2d; --bp13-muted:#5c6874; --bp13-line:#dfe8e4; --bp13-soft:#f8fbfa; } main.bp13-source-hidden, .bp13-runtime-hidden{ display:none!important; } #bp13ReferenceMain{ background:#fff; color:var(--bp13-ink); overflow:hidden; font-family:inherit; } #bp13ReferenceMain *, #bp13ReferenceMain *::before, #bp13ReferenceMain *::after{ box-sizing:border-box; } #bp13ReferenceMain .wrap, #bp13ReferenceMain .bp13-wrap, #bp13ReferenceMain .bipofy-section-head-v123, #bp13ReferenceMain .bipofy-blog-grid-v123{ width:min(1180px,calc(100% - 48px)); margin-left:auto; margin-right:auto; } #bp13ReferenceMain h1, #bp13ReferenceMain h2, #bp13ReferenceMain h3, #bp13ReferenceMain strong{ color:var(--bp13-ink); } #bp13ReferenceMain h1, #bp13ReferenceMain h2, #bp13ReferenceMain h3{ font-weight:600!important; letter-spacing:-.035em; } #bp13ReferenceMain p, #bp13ReferenceMain li, #bp13ReferenceMain span, #bp13ReferenceMain summary, #bp13ReferenceMain a{ text-rendering:optimizeLegibility; } #bp13ReferenceMain p{ font-size:15px; line-height:1.72; color:var(--bp13-muted); } #bp13ReferenceMain .eyebrow, #bp13ReferenceMain .bp13-kicker, #bp13ReferenceMain .bipofy-kicker-v123{ display:block; padding:0!important; border:0!important; background:none!important; box-shadow:none!important; border-radius:0!important; color:var(--bp13-green)!important; font-size:13px!important; line-height:1.3!important; font-weight:600!important; letter-spacing:0!important; text-transform:none!important; } #bp13ReferenceMain .btn, #bp13ReferenceMain a[class*="btn"], #bp13ReferenceMain a[data-open-signup-modal]{ border-radius:6px!important; min-height:44px; padding:0 20px!important; display:inline-flex!important; align-items:center; justify-content:center; font-size:14px!important; font-weight:600!important; line-height:1!important; text-decoration:none!important; box-shadow:none!important; } #bp13ReferenceMain .btn-primary, #bp13ReferenceMain .gradient-btn, #bp13ReferenceMain a[data-open-signup-modal].btn-primary{ color:#fff!important; border:1px solid var(--bp13-green)!important; background:var(--bp13-green)!important; } #bp13ReferenceMain .bp13-hero{ padding:64px 0 30px!important; background:#fff!important; } #bp13ReferenceMain .bp13-hero .hero-grid{ display:grid!important; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)!important; align-items:center!important; gap:58px!important; } #bp13ReferenceMain .bp13-hero .hero-copy{ max-width:480px!important; padding:0!important; } #bp13ReferenceMain .bp13-hero .eyebrow{ margin:0 0 15px!important; } #bp13ReferenceMain .bp13-hero h1{ margin:0!important; font-size:clamp(43px,4.1vw,60px)!important; line-height:1.04!important; font-weight:600!important; letter-spacing:-.045em!important; color:var(--bp13-ink)!important; } #bp13ReferenceMain .bp13-hero .hero-title-main{ display:block!important; font:inherit!important; line-height:inherit!important; letter-spacing:inherit!important; color:inherit!important; } #bp13ReferenceMain .bp13-hero h1 em, #bp13ReferenceMain .bp13-hero .hero-title-main em{ color:var(--bp13-green)!important; font-style:normal!important; font-weight:600!important; } #bp13ReferenceMain .bp13-hero .hero-lead{ margin:18px 0 0!important; max-width:455px!important; font-size:15.5px!important; line-height:1.67!important; color:#52606d!important; } #bp13ReferenceMain .bp13-hero .hero-actions{ margin-top:24px!important; display:flex!important; align-items:center!important; gap:12px!important; flex-wrap:wrap!important; } #bp13ReferenceMain .bp13-hero .btn-watch, #bp13ReferenceMain .bp13-hero .btn-light{ background:#fff!important; border:1px solid #cfdad5!important; color:var(--bp13-ink)!important; } #bp13ReferenceMain .bp13-hero .watch-play{ width:24px!important; height:24px!important; margin-right:8px!important; border-radius:50%!important; background:#e7f7f1!important; color:var(--bp13-green)!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; } #bp13ReferenceMain .bp13-hero-visual{ position:relative!important; min-height:455px!important; display:flex!important; align-items:flex-end!important; justify-content:center!important; isolation:isolate; } #bp13ReferenceMain .bp13-hero-visual::before{ content:""; position:absolute; inset:20px 10px 0 44px; z-index:-2; border-radius:28px 28px 0 0; background: radial-gradient(circle at 58% 20%,rgba(7,150,107,.06),transparent 32%), linear-gradient(180deg,#fbfdfc 0%,#f6faf8 100%); } #bp13ReferenceMain .bp13-hero-visual .hero-asset-frame, #bp13ReferenceMain .bp13-hero-visual .merchant-photo{ position:relative!important; width:100%!important; height:455px!important; margin:0!important; overflow:hidden!important; border:0!important; border-radius:24px 24px 0 0!important; background:#f7faf8!important; box-shadow:none!important; } #bp13ReferenceMain .bp13-hero-image, #bp13ReferenceMain .bp13-hero-visual .hero-asset-frame img, #bp13ReferenceMain .bp13-hero-visual .merchant-photo img{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center 22%!important; border-radius:24px 24px 0 0!important; filter:saturate(.95) contrast(.99); } #bp13ReferenceMain .bp13-old-float{ display:none!important; } #bp13ReferenceMain .bp13-float{ position:absolute; z-index:4; width:132px; padding:13px 14px; border:1px solid rgba(15,23,42,.08); border-radius:10px; background:rgba(255,255,255,.96); box-shadow:0 12px 34px rgba(15,23,42,.10); backdrop-filter:blur(8px); } #bp13ReferenceMain .bp13-float small{ display:block; color:#6b7280; font-size:10px; line-height:1.3; } #bp13ReferenceMain .bp13-float strong{ display:block; margin-top:4px; font-size:18px; line-height:1.1; letter-spacing:-.03em; } #bp13ReferenceMain .bp13-float > span{ display:block; margin-top:5px; color:var(--bp13-green); font-size:9px; line-height:1.3; } #bp13ReferenceMain .bp13-sales-card{right:1%;top:48px;} #bp13ReferenceMain .bp13-orders-card{right:-1%;top:188px;} #bp13ReferenceMain .bp13-product-card{ left:6%; bottom:14px; width:168px; display:flex; align-items:center; gap:10px; } #bp13ReferenceMain .bp13-product-card strong{font-size:12px;margin-top:2px;} #bp13ReferenceMain .bp13-product-card > div:last-child > span{font-size:9px;color:#f59e0b;margin-top:4px;} #bp13ReferenceMain .bp13-product-thumb{ flex:0 0 42px; width:42px; height:42px; border-radius:8px; background: radial-gradient(circle at 50% 35%,#ded7c5 0 22%,transparent 23%), linear-gradient(160deg,#efe9dc 0 48%,#c8bba2 49% 100%); } #bp13ReferenceMain .bp13-spark, #bp13ReferenceMain .bp13-bars{ height:28px; margin-top:9px; display:flex; align-items:flex-end; gap:5px; } #bp13ReferenceMain .bp13-spark i, #bp13ReferenceMain .bp13-bars i{ display:block; width:11px; border-radius:3px 3px 0 0; background:#13a674; } #bp13ReferenceMain .bp13-spark i:nth-child(1){height:8px} #bp13ReferenceMain .bp13-spark i:nth-child(2){height:14px} #bp13ReferenceMain .bp13-spark i:nth-child(3){height:10px} #bp13ReferenceMain .bp13-spark i:nth-child(4){height:20px} #bp13ReferenceMain .bp13-spark i:nth-child(5){height:15px} #bp13ReferenceMain .bp13-bars i:nth-child(1){height:10px} #bp13ReferenceMain .bp13-bars i:nth-child(2){height:18px} #bp13ReferenceMain .bp13-bars i:nth-child(3){height:13px} #bp13ReferenceMain .bp13-bars i:nth-child(4){height:24px} #bp13ReferenceMain .bp13-bars i:nth-child(5){height:19px} #bp13ReferenceMain .bp13-benefit-strip{ padding:0!important; background:#fff!important; } #bp13ReferenceMain .bp13-benefit-strip .trust-box{ width:100%!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:0!important; margin:0!important; padding:22px 0!important; border-top:1px solid var(--bp13-line)!important; border-bottom:1px solid var(--bp13-line)!important; border-left:0!important; border-right:0!important; border-radius:0!important; background:#fff!important; box-shadow:none!important; } #bp13ReferenceMain .bp13-benefit-strip .trust-item{ min-height:54px!important; padding:0 24px!important; display:flex!important; align-items:center!important; gap:12px!important; border:0!important; border-right:1px solid var(--bp13-line)!important; background:none!important; box-shadow:none!important; } #bp13ReferenceMain .bp13-benefit-strip .trust-item:last-child{border-right:0!important;} #bp13ReferenceMain .bp13-benefit-strip .trust-icon{ width:28px!important; height:28px!important; flex:0 0 28px!important; color:var(--bp13-green)!important; border:0!important; background:none!important; } #bp13ReferenceMain .bp13-benefit-strip .trust-item strong{ display:block; font-size:12px!important; line-height:1.35!important; font-weight:600!important; } #bp13ReferenceMain .bp13-benefit-strip .trust-item span{ display:block; margin-top:2px!important; color:#77818b!important; font-size:10px!important; line-height:1.4!important; } #bp13ReferenceMain .bp13-journey{ padding:66px 0 60px; background:#fff; } #bp13ReferenceMain .bp13-section-head{margin-bottom:34px;} #bp13ReferenceMain .bp13-center{text-align:center;} #bp13ReferenceMain .bp13-section-head h2{ margin:7px 0 0; font-size:28px; line-height:1.18; } #bp13ReferenceMain .bp13-steps{ position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:16px; } #bp13ReferenceMain .bp13-steps::before{ content:""; position:absolute; left:7%; right:7%; top:23px; height:1px; background:linear-gradient(90deg,transparent,#9cdec6 7%,#9cdec6 93%,transparent); } #bp13ReferenceMain .bp13-steps article{ position:relative; z-index:1; text-align:center; } #bp13ReferenceMain .bp13-step-icon{ width:46px; height:46px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; border:1px solid #bce7d7; border-radius:10px; background:#fff; color:var(--bp13-green); font-size:21px; font-weight:500; } #bp13ReferenceMain .bp13-steps strong{ display:block; font-size:12px; line-height:1.35; font-weight:600; } #bp13ReferenceMain .bp13-steps span{ display:block; margin-top:5px; color:#75808a; font-size:10px; line-height:1.42; } #bp13ReferenceMain .bp13-pricing{ padding:58px 0 72px!important; background:#fff!important; } #bp13ReferenceMain .bp13-pricing .pricing-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:26px!important; align-items:stretch!important; } #bp13ReferenceMain .bp13-pricing .pricing-intro{ grid-column:1/-1!important; display:grid!important; grid-template-columns:1fr auto!important; align-items:end!important; gap:20px!important; margin:0 0 3px!important; padding:0!important; border:0!important; background:none!important; box-shadow:none!important; } #bp13ReferenceMain .bp13-pricing .pricing-intro .eyebrow{grid-column:1/-1;margin-bottom:-10px!important;} #bp13ReferenceMain .bp13-pricing .pricing-intro h2{ margin:0!important; font-size:28px!important; line-height:1.2!important; letter-spacing:-.035em!important; } #bp13ReferenceMain .bp13-pricing .pricing-intro p{ margin:8px 0 0!important; max-width:520px!important; font-size:13px!important; } #bp13ReferenceMain .bp13-pricing .pricing-tools{ grid-column:2!important; grid-row:2 / span 2!important; align-self:center!important; margin:0!important; } #bp13ReferenceMain .bp13-pricing .pricing-card, #bp13ReferenceMain .bp13-pricing .plan-card, #bp13ReferenceMain .bp13-pricing .bp-pricing-card, #bp13ReferenceMain .bp13-plan-card{ position:relative!important; display:flex!important; flex-direction:column!important; min-height:390px!important; padding:26px 26px 22px!important; border:1px solid #d9e4df!important; border-radius:9px!important; background:#fff!important; box-shadow:none!important; transform:none!important; } #bp13ReferenceMain .bp13-pricing .pricing-card:hover, #bp13ReferenceMain .bp13-pricing .plan-card:hover, #bp13ReferenceMain .bp13-pricing .bp-pricing-card:hover{ border-color:#9ddbc4!important; box-shadow:0 12px 26px rgba(15,23,42,.05)!important; transform:translateY(-2px)!important; } #bp13ReferenceMain .bp13-pricing .pricing-card h3, #bp13ReferenceMain .bp13-pricing .plan-card h3, #bp13ReferenceMain .bp13-pricing .bp-pricing-card h3{ margin:0!important; font-size:20px!important; line-height:1.25!important; } #bp13ReferenceMain .bp13-pricing [id$="Price"], #bp13ReferenceMain .bp13-pricing .plan-price, #bp13ReferenceMain .bp13-pricing .price{ margin-top:20px!important; color:var(--bp13-ink)!important; font-size:31px!important; line-height:1!important; font-weight:600!important; letter-spacing:-.04em!important; } #bp13ReferenceMain .bp13-pricing ul{ margin-top:18px!important; padding:0!important; list-style:none!important; } #bp13ReferenceMain .bp13-pricing li{ margin:8px 0!important; color:#53616d!important; font-size:12px!important; line-height:1.45!important; } #bp13ReferenceMain .bp13-pricing .feature-details, #bp13ReferenceMain .bp13-pricing .bp-detail-list{ display:none!important; } #bp13ReferenceMain .bp13-pricing .expand-btn, #bp13ReferenceMain .bp13-pricing button[onclick*="toggleDetails"]{ display:none!important; } #bp13ReferenceMain .bp13-pricing .pricing-actions, #bp13ReferenceMain .bp13-pricing .bp-actions-row{ margin-top:auto!important; padding-top:20px!important; } #bp13ReferenceMain .bp13-pricing .pricing-actions a, #bp13ReferenceMain .bp13-pricing .bp-actions-row a, #bp13ReferenceMain .bp13-pricing a[data-open-signup-modal]{ width:100%!important; min-height:40px!important; border-radius:5px!important; } #bp13ReferenceMain .bp13-pricing .popular-badge, #bp13ReferenceMain .bp13-pricing .bp-badge{ top:14px!important; right:14px!important; left:auto!important; transform:none!important; padding:4px 8px!important; border-radius:4px!important; background:var(--bp13-green)!important; color:#fff!important; font-size:9px!important; font-weight:600!important; } #bp13ReferenceMain .bp13-tools{ padding:78px 0 76px!important; background:#fff!important; } #bp13ReferenceMain .bp13-tools .console-grid{ display:grid!important; grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr)!important; align-items:center!important; gap:48px!important; } #bp13ReferenceMain .bp13-tools .console-copy{ max-width:none!important; } #bp13ReferenceMain .bp13-tools .console-copy h2{ margin:8px 0 13px!important; font-size:31px!important; line-height:1.08!important; } #bp13ReferenceMain .bp13-tools .console-copy > p{ margin:0 0 22px!important; font-size:13px!important; line-height:1.65!important; } #bp13ReferenceMain .bp13-tools-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; margin:0!important; } #bp13ReferenceMain .bp13-tools-grid .feature-card{ min-height:106px!important; padding:15px!important; border:1px solid #e1e9e5!important; border-radius:8px!important; background:#fff!important; box-shadow:none!important; } #bp13ReferenceMain .bp13-tools-grid .feature-icon{ width:30px!important; height:30px!important; margin-bottom:9px!important; border:0!important; border-radius:6px!important; background:#edf9f4!important; color:var(--bp13-green)!important; } #bp13ReferenceMain .bp13-tools-grid h3{ margin:0!important; font-size:12px!important; line-height:1.35!important; font-weight:600!important; } #bp13ReferenceMain .bp13-tools-grid p{ margin:4px 0 0!important; font-size:10px!important; line-height:1.45!important; } #bp13ReferenceMain .bp13-console{ overflow:hidden!important; min-height:430px!important; border:1px solid #dbe5e0!important; border-radius:10px!important; background:#fff!important; box-shadow:0 18px 40px rgba(15,23,42,.09)!important; } #bp13ReferenceMain .bp13-console .console-top{ min-height:44px!important; padding:0 16px!important; border-bottom:1px solid #edf1ef!important; background:#fff!important; } #bp13ReferenceMain .bp13-console .console-body{ min-height:385px!important; display:grid!important; grid-template-columns:126px minmax(0,1fr)!important; } #bp13ReferenceMain .bp13-console .console-side{ padding:15px 10px!important; background:#072c28!important; } #bp13ReferenceMain .bp13-console .console-nav, #bp13ReferenceMain .bp13-console .console-logo{ font-size:9px!important; } #bp13ReferenceMain .bp13-console .console-main{ padding:15px!important; background:#fbfcfc!important; } #bp13ReferenceMain .bp13-console .kpis{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:8px!important; } #bp13ReferenceMain .bp13-console .kpi{ padding:10px!important; border:1px solid #e6ece9!important; border-radius:6px!important; background:#fff!important; } #bp13ReferenceMain .bp13-console .kpi small{font-size:8px!important;} #bp13ReferenceMain .bp13-console .kpi strong{font-size:13px!important;} #bp13ReferenceMain .bp13-console .kpi em{font-size:8px!important;color:var(--bp13-green)!important;} #bp13ReferenceMain .bp13-console .dashboard-lower{gap:10px!important;} #bp13ReferenceMain .bp13-console .chart, #bp13ReferenceMain .bp13-console .recent-orders{ border-radius:7px!important; border:1px solid #e6ece9!important; background:#fff!important; } #bp13ReferenceMain .bp13-global{ padding:76px 0!important; background:linear-gradient(90deg,#f3fbf8 0%,#f8fcfa 100%)!important; } #bp13ReferenceMain .bp13-global .bipomart-box{ display:grid!important; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important; align-items:center!important; gap:72px!important; padding:0!important; border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important; } #bp13ReferenceMain .bp13-global .market{ grid-column:1!important; grid-row:1!important; min-height:340px!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } #bp13ReferenceMain .bp13-global .bipomart-copy{ grid-column:2!important; grid-row:1!important; max-width:430px!important; } #bp13ReferenceMain .bp13-global .bipomart-copy h2{ margin:8px 0 14px!important; font-size:32px!important; line-height:1.1!important; } #bp13ReferenceMain .bp13-global .bipomart-copy > p{ margin:0!important; font-size:14px!important; line-height:1.68!important; } #bp13ReferenceMain .bp13-global-benefits{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:14px!important; margin-top:30px!important; padding:0!important; border:0!important; background:none!important; box-shadow:none!important; } #bp13ReferenceMain .bp13-global-benefits .performance-item{ display:block!important; min-width:0!important; padding:0!important; border:0!important; background:none!important; } #bp13ReferenceMain .bp13-global-benefits .performance-icon{ width:28px!important; height:28px!important; margin-bottom:8px!important; border:0!important; background:#e5f7ef!important; color:var(--bp13-green)!important; border-radius:7px!important; display:flex!important; align-items:center!important; justify-content:center!important; } #bp13ReferenceMain .bp13-global-benefits strong{ display:block!important; font-size:10px!important; line-height:1.35!important; } #bp13ReferenceMain .bp13-global-benefits span{ display:block!important; margin-top:3px!important; color:#728079!important; font-size:9px!important; line-height:1.35!important; } #bp13ReferenceMain .bp13-guides{ padding:66px 0 68px!important; background:#fff!important; } #bp13ReferenceMain .bp13-guides .bipofy-section-head-v123{ margin-bottom:26px!important; } #bp13ReferenceMain .bp13-guides .bipofy-section-head-v123 > div{ max-width:720px!important; } #bp13ReferenceMain .bp13-guides .bipofy-section-head-v123 h2{ margin:7px 0 7px!important; font-size:27px!important; line-height:1.18!important; } #bp13ReferenceMain .bp13-guides .bipofy-section-head-v123 p{ margin:0!important; font-size:13px!important; } #bp13ReferenceMain .bp13-guides .bipofy-blog-grid-v123{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:24px!important; } #bp13ReferenceMain .bp13-guides .bp13-guide-card{ overflow:hidden!important; padding:0!important; border:1px solid #dfe7e3!important; border-radius:9px!important; background:#fff!important; box-shadow:none!important; } #bp13ReferenceMain .bp13-guides .bp13-guide-card article{ padding:16px 17px 18px!important; } #bp13ReferenceMain .bp13-guide-media{ height:145px; border-bottom:1px solid #e4ebe7; background:#eef6f2; } #bp13ReferenceMain .bp13-guide-media-1{ background: linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.15)), radial-gradient(circle at 16% 18%,#9cc6a9 0 9%,transparent 10%), radial-gradient(circle at 35% 26%,#5e986d 0 12%,transparent 13%), radial-gradient(circle at 63% 24%,#c8d7b9 0 13%,transparent 14%), linear-gradient(160deg,#e8dcc4 0 48%,#f5f0e6 49% 100%); } #bp13ReferenceMain .bp13-guide-media-2{ background: linear-gradient(90deg,transparent 0 56%,rgba(59,96,76,.16) 57% 59%,transparent 60%), radial-gradient(circle at 78% 22%,#7fa78b 0 13%,transparent 14%), linear-gradient(155deg,#e8ece9 0 52%,#d9c9b5 53% 100%); } #bp13ReferenceMain .bp13-guide-media-3{ background: linear-gradient(165deg,transparent 0 55%,rgba(7,150,107,.14) 56% 58%,transparent 59%), linear-gradient(35deg,#e8ddd1 0 35%,#f7f5f1 36% 68%,#d9e5de 69% 100%); } #bp13ReferenceMain .bp13-guides .bipofy-blog-tag-v123{ color:var(--bp13-green)!important; font-size:10px!important; font-weight:600!important; } #bp13ReferenceMain .bp13-guides h3{ margin:7px 0 7px!important; font-size:15px!important; line-height:1.35!important; letter-spacing:-.02em!important; } #bp13ReferenceMain .bp13-guides p{ margin:0!important; font-size:11px!important; line-height:1.55!important; } #bp13ReferenceMain .bp13-guides a{ display:inline-block!important; margin-top:11px!important; color:var(--bp13-green)!important; font-size:10px!important; font-weight:600!important; text-decoration:none!important; } #bp13ReferenceMain .bp13-seo{ padding:66px 0 70px!important; background:#fff!important; } #bp13ReferenceMain .bp13-seo .bog-shell{ width:min(1180px,calc(100% - 48px))!important; margin:0 auto!important; padding:0!important; display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:64px!important; align-items:center!important; border:0!important; border-radius:0!important; background:#fff!important; box-shadow:none!important; } #bp13ReferenceMain .bp13-seo .bp13-seo-visual{ grid-column:1!important; grid-row:1 / span 3!important; } #bp13ReferenceMain .bp13-seo .bog-copy, #bp13ReferenceMain .bp13-seo .bog-grid, #bp13ReferenceMain .bp13-seo .bog-footer{ grid-column:2!important; max-width:none!important; } #bp13ReferenceMain .bp13-seo .bog-copy h2{ margin:8px 0 14px!important; font-size:33px!important; line-height:1.08!important; } #bp13ReferenceMain .bp13-seo .bog-copy p{ margin:0!important; font-size:14px!important; line-height:1.68!important; } #bp13ReferenceMain .bp13-seo .bog-copy p + p{display:none!important;} #bp13ReferenceMain .bp13-seo .bog-grid{ margin-top:2px!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:7px 18px!important; } #bp13ReferenceMain .bp13-seo .bog-card{ position:relative!important; min-height:0!important; padding:3px 0 3px 20px!important; border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important; } #bp13ReferenceMain .bp13-seo .bog-card::before{ content:"✓"; position:absolute; left:0; top:4px; color:var(--bp13-green); font-size:12px; font-weight:700; } #bp13ReferenceMain .bp13-seo .bog-card strong{ font-size:11px!important; line-height:1.4!important; } #bp13ReferenceMain .bp13-seo .bog-card span{display:none!important;} #bp13ReferenceMain .bp13-seo .bog-footer{ margin-top:7px!important; font-size:11px!important; color:var(--bp13-green)!important; } #bp13ReferenceMain .bp13-browser{ position:relative; min-height:320px; overflow:hidden; border:1px solid #dce6e1; border-radius:11px; background:#fff; box-shadow:0 18px 42px rgba(15,23,42,.08); } #bp13ReferenceMain .bp13-browser-top{ height:38px; display:flex; align-items:center; gap:6px; padding:0 13px; border-bottom:1px solid #edf1ef; background:#fbfcfb; } #bp13ReferenceMain .bp13-browser-top i{ width:7px;height:7px;border-radius:50%;background:#d9dfdc; } #bp13ReferenceMain .bp13-browser-body{padding:24px;} #bp13ReferenceMain .bp13-products-mini{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } #bp13ReferenceMain .bp13-products-mini span{ height:108px; border:1px solid #e6ece9; border-radius:7px; background: linear-gradient(180deg,#edf5f1 0 58%,#fff 59% 100%); } #bp13ReferenceMain .bp13-products-mini span:nth-child(2){background:linear-gradient(180deg,#f4eee7 0 58%,#fff 59% 100%);} #bp13ReferenceMain .bp13-products-mini span:nth-child(3){background:linear-gradient(180deg,#eef2f5 0 58%,#fff 59% 100%);} #bp13ReferenceMain .bp13-products-mini span:nth-child(4){background:linear-gradient(180deg,#f2edf4 0 58%,#fff 59% 100%);} #bp13ReferenceMain .bp13-seo-lines{margin-top:24px;display:grid;gap:10px;} #bp13ReferenceMain .bp13-seo-lines i{height:8px;border-radius:4px;background:#e9efec;} #bp13ReferenceMain .bp13-seo-lines i:nth-child(1){width:74%} #bp13ReferenceMain .bp13-seo-lines i:nth-child(2){width:92%} #bp13ReferenceMain .bp13-seo-lines i:nth-child(3){width:61%} #bp13ReferenceMain .bp13-seo-lines i:nth-child(4){width:84%} #bp13ReferenceMain .bp13-score{ position:relative; width:118px; height:100px; margin:-62px 0 0 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #dce6e1; border-radius:10px; background:#fff; box-shadow:0 12px 28px rgba(15,23,42,.08); } #bp13ReferenceMain .bp13-score::before{ content:""; position:absolute; width:66px;height:66px;border-radius:50%; border:8px solid #d9eee6; border-top-color:var(--bp13-green); transform:rotate(-20deg); } #bp13ReferenceMain .bp13-score strong, #bp13ReferenceMain .bp13-score span{position:relative;z-index:1;} #bp13ReferenceMain .bp13-score strong{font-size:19px;line-height:1;} #bp13ReferenceMain .bp13-score span{margin-top:4px;font-size:8px;color:#68766f;} #bp13ReferenceMain .bp13-faq{ padding:58px 0 24px!important; background:#fff!important; } #bp13ReferenceMain .bp13-faq .faq-layout{ display:block!important; } #bp13ReferenceMain .bp13-faq .faq-intro{ margin-bottom:22px!important; max-width:none!important; } #bp13ReferenceMain .bp13-faq .faq-intro h2{ margin:6px 0 0!important; font-size:27px!important; line-height:1.2!important; } #bp13ReferenceMain .bp13-faq .faq-intro p{ margin:5px 0 0!important; font-size:12px!important; } #bp13ReferenceMain .bp13-faq .faq-panel{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:9px 26px!important; } #bp13ReferenceMain .bp13-faq details{ margin:0!important; border:1px solid #e0e7e4!important; border-radius:6px!important; background:#fff!important; box-shadow:none!important; } #bp13ReferenceMain .bp13-faq summary{ min-height:42px!important; padding:0 14px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; color:var(--bp13-ink)!important; font-size:11px!important; line-height:1.35!important; font-weight:600!important; cursor:pointer!important; } #bp13ReferenceMain .bp13-faq details p{ margin:0!important; padding:0 14px 14px!important; font-size:11px!important; line-height:1.55!important; } #bp13ReferenceMain .bp13-final{ padding:28px 0 62px!important; background:#fff!important; } #bp13ReferenceMain .bp13-final .final-grid{ display:grid!important; grid-template-columns:1fr auto!important; align-items:center!important; gap:26px!important; padding:25px 30px!important; border:1px solid #d6e8e1!important; border-radius:8px!important; background:linear-gradient(90deg,#f1faf7 0%,#f8fcfb 100%)!important; box-shadow:none!important; } #bp13ReferenceMain .bp13-final h2{ margin:0!important; font-size:25px!important; line-height:1.08!important; } #bp13ReferenceMain .bp13-final p{ margin:7px 0 0!important; font-size:11px!important; line-height:1.55!important; } #bp13ReferenceMain .bp13-final .final-actions{ display:flex!important; gap:11px!important; align-items:center!important; } #bp13ReferenceMain .bp13-final .final-actions a{ min-width:132px!important; min-height:42px!important; } #bp13ReferenceMain .bp13-final .btn-light{ background:#fff!important; border:1px solid #cbdcd5!important; color:var(--bp13-ink)!important; } @media(max-width:1040px){ #bp13ReferenceMain .bp13-hero .hero-grid, #bp13ReferenceMain .bp13-tools .console-grid, #bp13ReferenceMain .bp13-global .bipomart-box, #bp13ReferenceMain .bp13-seo .bog-shell{ gap:34px!important; } #bp13ReferenceMain .bp13-steps{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:30px;} #bp13ReferenceMain .bp13-steps::before{display:none;} } @media(max-width:860px){ #bp13ReferenceMain .wrap, #bp13ReferenceMain .bp13-wrap, #bp13ReferenceMain .bipofy-section-head-v123, #bp13ReferenceMain .bipofy-blog-grid-v123, #bp13ReferenceMain .bp13-seo .bog-shell{ width:min(100% - 32px,720px)!important; } #bp13ReferenceMain .bp13-hero .hero-grid, #bp13ReferenceMain .bp13-tools .console-grid, #bp13ReferenceMain .bp13-global .bipomart-box, #bp13ReferenceMain .bp13-seo .bog-shell{ grid-template-columns:1fr!important; } #bp13ReferenceMain .bp13-hero .hero-copy{max-width:620px!important;} #bp13ReferenceMain .bp13-hero-visual{min-height:420px!important;} #bp13ReferenceMain .bp13-benefit-strip .trust-box{grid-template-columns:repeat(2,minmax(0,1fr))!important;} #bp13ReferenceMain .bp13-benefit-strip .trust-item:nth-child(2){border-right:0!important;} #bp13ReferenceMain .bp13-benefit-strip .trust-item:nth-child(-n+2){padding-bottom:16px!important;margin-bottom:16px!important;border-bottom:1px solid var(--bp13-line)!important;} #bp13ReferenceMain .bp13-pricing .pricing-grid{grid-template-columns:1fr!important;} #bp13ReferenceMain .bp13-pricing .pricing-intro{grid-template-columns:1fr!important;} #bp13ReferenceMain .bp13-pricing .pricing-tools{grid-column:1!important;grid-row:auto!important;justify-self:start!important;} #bp13ReferenceMain .bp13-global .market{grid-column:1!important;grid-row:1!important;} #bp13ReferenceMain .bp13-global .bipomart-copy{grid-column:1!important;grid-row:2!important;max-width:none!important;} #bp13ReferenceMain .bp13-seo .bp13-seo-visual, #bp13ReferenceMain .bp13-seo .bog-copy, #bp13ReferenceMain .bp13-seo .bog-grid, #bp13ReferenceMain .bp13-seo .bog-footer{grid-column:1!important;grid-row:auto!important;} #bp13ReferenceMain .bp13-guides .bipofy-blog-grid-v123{grid-template-columns:1fr!important;} #bp13ReferenceMain .bp13-final .final-grid{grid-template-columns:1fr!important;} } @media(max-width:620px){ #bp13ReferenceMain p{font-size:14px;} #bp13ReferenceMain .bp13-hero{padding-top:42px!important;} #bp13ReferenceMain .bp13-hero h1{font-size:40px!important;} #bp13ReferenceMain .bp13-hero .hero-actions{align-items:stretch!important;} #bp13ReferenceMain .bp13-hero .hero-actions a{width:100%!important;} #bp13ReferenceMain .bp13-hero-visual{min-height:350px!important;} #bp13ReferenceMain .bp13-hero-visual .hero-asset-frame, #bp13ReferenceMain .bp13-hero-visual .merchant-photo{height:350px!important;} #bp13ReferenceMain .bp13-float{transform:scale(.84);transform-origin:center;} #bp13ReferenceMain .bp13-sales-card{right:-13px;top:34px;} #bp13ReferenceMain .bp13-orders-card{right:-13px;top:147px;} #bp13ReferenceMain .bp13-product-card{left:-8px;bottom:3px;} #bp13ReferenceMain .bp13-benefit-strip .trust-box{grid-template-columns:1fr!important;} #bp13ReferenceMain .bp13-benefit-strip .trust-item{border-right:0!important;border-bottom:1px solid var(--bp13-line)!important;padding:14px 0!important;margin:0!important;} #bp13ReferenceMain .bp13-benefit-strip .trust-item:last-child{border-bottom:0!important;} #bp13ReferenceMain .bp13-steps{grid-template-columns:repeat(2,minmax(0,1fr));} #bp13ReferenceMain .bp13-tools-grid{grid-template-columns:1fr!important;} #bp13ReferenceMain .bp13-console{min-height:340px!important;overflow:auto!important;} #bp13ReferenceMain .bp13-console .console-body{min-width:620px!important;} #bp13ReferenceMain .bp13-global-benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important;} #bp13ReferenceMain .bp13-seo .bog-grid{grid-template-columns:1fr!important;} #bp13ReferenceMain .bp13-faq .faq-panel{grid-template-columns:1fr!important;} #bp13ReferenceMain .bp13-final .final-actions{flex-direction:column!important;align-items:stretch!important;} #bp13ReferenceMain .bp13-final .final-actions a{width:100%!important;} } /* ============================================================ BIPOFY_HOME_POLISH_V013B_R1 Authority: #bp13ReferenceMain ============================================================ */ #bp13ReferenceMain{ --bp13-green:#07966b; --bp13-ink:#0d1f2d; --bp13-copy:#52616b; --bp13-muted:#718079; --bp13-line:#dfe8e4; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* ======================================================== BODY TYPOGRAPHY ======================================================== */ #bp13ReferenceMain p{ font-size:15px !important; line-height:1.78 !important; color:var(--bp13-copy) !important; } #bp13ReferenceMain h1, #bp13ReferenceMain h2, #bp13ReferenceMain h3{ font-weight:600 !important; } /* ======================================================== HERO ======================================================== */ #bp13ReferenceMain .bp13-hero h1{ font-size:clamp(48px,4.65vw,66px) !important; line-height:1.025 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-hero h1 em{ font-weight:600 !important; } #bp13ReferenceMain .bp13-hero .eyebrow{ font-size:13px !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-hero .hero-lead{ max-width:530px !important; margin-top:20px !important; font-size:16px !important; line-height:1.78 !important; color:#4e5d67 !important; } #bp13ReferenceMain .bp13-hero .hero-actions{ margin-top:27px !important; } #bp13ReferenceMain .bp13-hero .hero-actions a{ min-height:46px !important; font-size:14px !important; font-weight:600 !important; } /* ======================================================== BENEFIT / TRUST STRIP ======================================================== */ #bp13ReferenceMain .bp13-benefit-strip .trust-box{ padding:27px 0 !important; } #bp13ReferenceMain .bp13-benefit-strip .trust-item{ min-height:66px !important; gap:15px !important; padding-left:27px !important; padding-right:27px !important; } #bp13ReferenceMain .bp13-benefit-strip .trust-icon{ width:38px !important; height:38px !important; flex:0 0 38px !important; color:var(--bp13-green) !important; } #bp13ReferenceMain .bp13-benefit-strip .trust-icon svg{ width:30px !important; height:30px !important; } #bp13ReferenceMain .bp13-benefit-strip .trust-item strong{ font-size:14px !important; line-height:1.38 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-benefit-strip .trust-item span{ margin-top:4px !important; font-size:12px !important; line-height:1.48 !important; } /* ======================================================== WHY BIPOFY / FLOW ======================================================== */ #bp13ReferenceMain .bp13-journey{ padding:78px 0 72px !important; } #bp13ReferenceMain .bp13-journey .bp13-section-head{ margin-bottom:44px !important; } #bp13ReferenceMain .bp13-journey .bp13-kicker{ font-size:13px !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-journey .bp13-section-head h2{ margin-top:9px !important; font-size:34px !important; line-height:1.14 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-steps{ gap:20px !important; } #bp13ReferenceMain .bp13-steps::before{ top:31px !important; } #bp13ReferenceMain .bp13-step-icon{ width:62px !important; height:62px !important; margin-bottom:17px !important; border-radius:13px !important; background:#f6fcf9 !important; border: 1px solid #aee0cd !important; color:var(--bp13-green) !important; } #bp13ReferenceMain .bp13-step-icon svg{ width:30px !important; height:30px !important; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } #bp13ReferenceMain .bp13-steps strong{ font-size:14px !important; line-height:1.4 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-steps span{ max-width:145px; margin: 7px auto 0 !important; color:var(--bp13-muted) !important; font-size:12px !important; line-height:1.55 !important; } /* ======================================================== PRICING ======================================================== */ #bp13ReferenceMain .bp13-pricing{ padding:82px 0 94px !important; background:#fbfcfb !important; } /* Critical V013A layout repair: Actual three cards live inside the original nested .grid. */ #bp13ReferenceMain .bp13-pricing .pricing-grid{ display:grid !important; grid-template-columns:1fr !important; gap:28px !important; } #bp13ReferenceMain .bp13-pricing .pricing-intro{ grid-column:auto !important; display:grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap:18px 30px !important; align-items:end !important; margin-bottom:5px !important; } #bp13ReferenceMain .bp13-pricing .pricing-grid > .grid{ grid-column:1 / -1 !important; width:100% !important; display:grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap:24px !important; } #bp13ReferenceMain .bp13-pricing .pricing-intro .eyebrow{ grid-column:1 / -1 !important; margin-bottom:-5px !important; font-size:13px !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-pricing .pricing-intro h2{ margin:0 !important; font-size:36px !important; line-height:1.13 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-pricing .pricing-intro p{ max-width:620px !important; margin: 9px 0 0 !important; font-size:15px !important; line-height:1.7 !important; } #bp13ReferenceMain .bp13-pricing .pricing-tools{ grid-column:2 !important; grid-row:2 / span 2 !important; margin:0 !important; align-self:center !important; } #bp13ReferenceMain .bp13-pricing .pricing-card, #bp13ReferenceMain .bp13-pricing .bp-pricing-card, #bp13ReferenceMain .bp13-pricing .plan-card, #bp13ReferenceMain .bp13-pricing .bp13-plan-card{ display:flex !important; flex-direction:column !important; width:100% !important; min-height:455px !important; padding: 31px 27px 25px !important; overflow:visible !important; border: 1px solid #d8e3dd !important; border-radius:14px !important; background:#fff !important; box-shadow:none !important; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important; } #bp13ReferenceMain .bp13-pricing .pricing-card:hover, #bp13ReferenceMain .bp13-pricing .bp-pricing-card:hover{ transform:translateY(-3px) !important; border-color:#9ed7c0 !important; box-shadow: 0 18px 42px rgba(20,48,34,.065) !important; } /* Growth card */ #bp13ReferenceMain .bp13-pricing .pricing-card:nth-child(2), #bp13ReferenceMain .bp13-pricing .bp-pricing-card:nth-child(2){ border-color:#8ed2b4 !important; box-shadow: inset 0 3px 0 var(--bp13-green) !important; } #bp13ReferenceMain .bp13-pricing h3{ margin:0 !important; font-size:22px !important; line-height:1.28 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-pricing .pricing-card > p, #bp13ReferenceMain .bp13-pricing .bp-pricing-card > p{ font-size:13px !important; line-height:1.62 !important; } #bp13ReferenceMain .bp13-pricing .bp-badge, #bp13ReferenceMain .bp13-pricing .popular-badge{ padding: 6px 9px !important; border-radius:5px !important; font-size:11px !important; line-height:1 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-pricing .bp-price, #bp13ReferenceMain .bp13-pricing .plan-price, #bp13ReferenceMain .bp13-pricing [id$="Price"], #bp13ReferenceMain .bp13-pricing [data-price]{ margin-top:22px !important; color:var(--bp13-ink) !important; font-size:38px !important; line-height:1.05 !important; font-weight:600 !important; letter-spacing:-.04em !important; } /* graceful visual state when pricing API is waiting/unavailable */ #bp13ReferenceMain .bp13-pricing .loading{ font-size:20px !important; line-height:1.25 !important; letter-spacing:-.02em !important; } #bp13ReferenceMain .bp13-pricing .bp-price-note{ margin-top:5px !important; color:#76827c !important; font-size:12px !important; line-height:1.5 !important; } #bp13ReferenceMain .bp13-pricing .bp-commission{ margin-top:11px !important; color:#33443d !important; font-size:13px !important; line-height:1.5 !important; font-weight:500 !important; } #bp13ReferenceMain .bp13-pricing .bp-feature-list{ margin-top:22px !important; padding:0 !important; } #bp13ReferenceMain .bp13-pricing .bp-feature-list li{ margin:9px 0 !important; padding-left:20px !important; color:#52615a !important; font-size:13px !important; line-height:1.55 !important; } #bp13ReferenceMain .bp13-pricing .bp-feature-list li::before{ color:var(--bp13-green) !important; font-size:13px !important; } #bp13ReferenceMain .bp13-pricing .pricing-actions, #bp13ReferenceMain .bp13-pricing .bp-actions-row{ margin-top:auto !important; padding-top:23px !important; } #bp13ReferenceMain .bp13-pricing .pricing-actions a[data-open-signup-modal], #bp13ReferenceMain .bp13-pricing .bp-actions-row a[data-open-signup-modal], #bp13ReferenceMain .bp13-pricing .bp-anchor-btn{ width:100% !important; min-height:46px !important; border-radius:7px !important; font-size:13px !important; font-weight:600 !important; } /* ======================================================== ALL TOOLS ======================================================== */ #bp13ReferenceMain .bp13-tools{ padding:90px 0 !important; } #bp13ReferenceMain .bp13-tools .console-copy h2{ font-size:36px !important; line-height:1.08 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-tools .console-copy > p{ font-size:15px !important; line-height:1.72 !important; } #bp13ReferenceMain .bp13-tools-grid{ gap:14px !important; } #bp13ReferenceMain .bp13-tools-grid .feature-card{ min-height:126px !important; padding:18px !important; border-radius:10px !important; } #bp13ReferenceMain .bp13-tools-grid .feature-icon{ width:38px !important; height:38px !important; margin-bottom:11px !important; border-radius:8px !important; } #bp13ReferenceMain .bp13-tools-grid .feature-icon svg{ width:21px !important; height:21px !important; } #bp13ReferenceMain .bp13-tools-grid h3{ font-size:14px !important; line-height:1.4 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-tools-grid p{ margin-top:6px !important; font-size:12px !important; line-height:1.58 !important; } /* ======================================================== GLOBAL DELIVERY ======================================================== */ #bp13ReferenceMain .bp13-global{ padding:88px 0 !important; } #bp13ReferenceMain .bp13-global .bipomart-copy h2{ font-size:37px !important; line-height:1.09 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-global .bipomart-copy > p{ font-size:15px !important; line-height:1.75 !important; } #bp13ReferenceMain .bp13-global-benefits .performance-icon{ width:38px !important; height:38px !important; margin-bottom:10px !important; border-radius:9px !important; } #bp13ReferenceMain .bp13-global-benefits .performance-icon svg{ width:22px !important; height:22px !important; } #bp13ReferenceMain .bp13-global-benefits strong{ font-size:12px !important; line-height:1.4 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-global-benefits span{ margin-top:5px !important; font-size:10.5px !important; line-height:1.45 !important; } /* ======================================================== BLOG / GUIDES ======================================================== */ #bp13ReferenceMain .bp13-guides{ padding:84px 0 88px !important; } #bp13ReferenceMain .bp13-guides .bipofy-section-head-v123{ margin-bottom:32px !important; } #bp13ReferenceMain .bp13-guides .bipofy-section-head-v123 h2{ margin: 8px 0 9px !important; font-size:36px !important; line-height:1.12 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-guides .bipofy-section-head-v123 p{ font-size:15px !important; line-height:1.7 !important; } #bp13ReferenceMain .bp13-guides .bipofy-blog-grid-v123{ gap:25px !important; } #bp13ReferenceMain .bp13-guides .bp13-guide-card{ border-radius:12px !important; } #bp13ReferenceMain .bp13-guide-media{ height:178px !important; } #bp13ReferenceMain .bp13-guides .bp13-guide-card article{ padding: 19px 20px 21px !important; } #bp13ReferenceMain .bp13-guides .bipofy-blog-tag-v123{ font-size:11px !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-guides h3{ margin: 9px 0 8px !important; font-size:18px !important; line-height:1.4 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-guides p{ font-size:13px !important; line-height:1.68 !important; } #bp13ReferenceMain .bp13-guides a{ margin-top:13px !important; font-size:12px !important; font-weight:600 !important; } /* ======================================================== SEO CONTENT ======================================================== */ #bp13ReferenceMain .bp13-seo{ padding:84px 0 88px !important; } #bp13ReferenceMain .bp13-seo .bog-copy h2{ font-size:38px !important; line-height:1.08 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-seo .bog-copy p{ font-size:15px !important; line-height:1.74 !important; } #bp13ReferenceMain .bp13-seo .bog-card{ padding-left:23px !important; } #bp13ReferenceMain .bp13-seo .bog-card::before{ font-size:14px !important; } #bp13ReferenceMain .bp13-seo .bog-card strong{ font-size:13px !important; line-height:1.5 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-seo .bog-footer{ margin-top:12px !important; font-size:13px !important; } /* ======================================================== FAQ ======================================================== */ #bp13ReferenceMain .bp13-faq{ padding:78px 0 38px !important; } #bp13ReferenceMain .bp13-faq .faq-intro{ margin-bottom:28px !important; } #bp13ReferenceMain .bp13-faq .faq-intro h2{ margin-top:8px !important; font-size:34px !important; line-height:1.13 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-faq .faq-intro p{ margin-top:8px !important; font-size:14px !important; line-height:1.65 !important; } #bp13ReferenceMain .bp13-faq .faq-panel{ gap: 11px 28px !important; } #bp13ReferenceMain .bp13-faq details{ border-radius:8px !important; } #bp13ReferenceMain .bp13-faq summary{ min-height:52px !important; padding: 0 16px !important; font-size:14px !important; line-height:1.45 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-faq details p{ padding: 0 16px 16px !important; font-size:13px !important; line-height:1.65 !important; } /* ======================================================== FINAL CTA ======================================================== */ #bp13ReferenceMain .bp13-final{ padding: 30px 0 66px !important; } #bp13ReferenceMain .bp13-final .final-grid{ padding: 29px 32px !important; border-radius:10px !important; } #bp13ReferenceMain .bp13-final h2{ font-size:29px !important; line-height:1.08 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-final p{ font-size:13px !important; line-height:1.6 !important; } /* ======================================================== TABLET ======================================================== */ @media(max-width:860px){ #bp13ReferenceMain .bp13-pricing .pricing-grid > .grid{ grid-template-columns:1fr !important; } #bp13ReferenceMain .bp13-pricing .pricing-intro{ grid-template-columns:1fr !important; } #bp13ReferenceMain .bp13-pricing .pricing-tools{ grid-column:1 !important; grid-row:auto !important; } } /* ======================================================== MOBILE ======================================================== */ @media(max-width:620px){ #bp13ReferenceMain p{ font-size:14px !important; } #bp13ReferenceMain .bp13-hero h1{ font-size:42px !important; } #bp13ReferenceMain .bp13-hero .hero-lead{ font-size:15px !important; } #bp13ReferenceMain .bp13-step-icon{ width:58px !important; height:58px !important; } #bp13ReferenceMain .bp13-steps strong{ font-size:13px !important; } #bp13ReferenceMain .bp13-steps span{ font-size:11px !important; } #bp13ReferenceMain .bp13-pricing .pricing-card, #bp13ReferenceMain .bp13-pricing .bp-pricing-card{ min-height:0 !important; padding: 27px 22px !important; } #bp13ReferenceMain .bp13-guides .bipofy-section-head-v123 h2, #bp13ReferenceMain .bp13-faq .faq-intro h2, #bp13ReferenceMain .bp13-seo .bog-copy h2{ font-size:31px !important; } } /* ============================================================ BIPOFY HOME PRICING V013C-R2 Pricing-page visual language. No subscription amount exists in this file. Existing homepage pricing runtime remains authoritative. ============================================================ */ /* ======================================================== SECTION ======================================================== */ #bp13ReferenceMain .bp13-pricing{ padding: 82px 0 94px !important; background:#ffffff !important; border-top: 1px solid #e3eae6 !important; border-bottom: 1px solid #e3eae6 !important; } #bp13ReferenceMain .bp13-pricing .wrap{ width: min( 1180px, calc(100% - 56px) ) !important; max-width: 1180px !important; margin: 0 auto !important; } /* ======================================================== OUTER LAYOUT ======================================================== */ #bp13ReferenceMain .bp13-pricing .pricing-grid{ display:block !important; width:100% !important; } /* ======================================================== INTRO — PRICING PAGE STYLE ======================================================== */ #bp13ReferenceMain .bp13-pricing .pricing-intro{ display:flex !important; flex-direction: column !important; align-items: center !important; width:100% !important; margin: 0 auto 34px !important; padding:0 !important; text-align:center !important; } #bp13ReferenceMain .bp13-pricing .pricing-intro .eyebrow{ display:block !important; margin: 0 0 11px !important; padding:0 !important; background:transparent !important; border:0 !important; color:#07966b !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 600 !important; letter-spacing: .09em !important; text-transform: uppercase !important; } #bp13ReferenceMain .bp13-pricing .pricing-intro h2{ max-width: 720px !important; margin: 0 !important; color:#0c2031 !important; font-size: 34px !important; line-height: 1.12 !important; font-weight: 600 !important; letter-spacing: -.035em !important; } #bp13ReferenceMain .bp13-pricing .pricing-intro > p{ max-width: 650px !important; margin: 10px auto 0 !important; color:#68756f !important; font-size: 13px !important; line-height: 1.65 !important; font-weight: 400 !important; } /* ======================================================== PRICING TOOLS ======================================================== */ #bp13ReferenceMain .bp13-pricing .pricing-tools{ display:flex !important; flex-direction: column !important; align-items: center !important; gap: 11px !important; margin-top: 21px !important; } /* market remains runtime driven */ #bp13ReferenceMain .bp13-pricing .market-badge{ display:block !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; color:#728079 !important; font-size: 11px !important; line-height: 1.4 !important; font-weight: 500 !important; } /* ======================================================== MONTHLY / YEARLY ======================================================== */ #bp13ReferenceMain .bp13-pricing .billing-toggle{ display:inline-grid !important; grid-template-columns: repeat(2,92px) !important; gap: 3px !important; margin:0 !important; padding: 3px !important; background: #f0f5f2 !important; border: 1px solid #dbe5df !important; border-radius: 7px !important; box-shadow:none !important; } #bp13ReferenceMain .bp13-pricing .billing-toggle button{ min-height: 36px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding: 0 14px !important; border:0 !important; border-radius: 5px !important; background: transparent !important; color: #53615b !important; box-shadow:none !important; font-size: 12px !important; line-height: 1 !important; font-weight: 600 !important; cursor: pointer !important; } #bp13ReferenceMain .bp13-pricing .billing-toggle button.active{ background: #07966b !important; color: #ffffff !important; } /* ======================================================== THREE-COLUMN PLAN GRID ======================================================== */ #bp13ReferenceMain .bp13-pricing .plans{ display:grid !important; grid-template-columns: repeat( 3, minmax(0,1fr) ) !important; gap: 22px !important; width: 100% !important; margin:0 !important; padding:0 !important; align-items: stretch !important; } /* ======================================================== PLAN CARD ======================================================== */ #bp13ReferenceMain .bp13-pricing .plan{ position: relative !important; display:flex !important; flex-direction: column !important; width: 100% !important; min-width: 0 !important; min-height: 425px !important; margin:0 !important; padding: 27px 25px 24px !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid #d9e3de !important; border-radius: 10px !important; box-shadow: none !important; transform: none !important; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important; } #bp13ReferenceMain .bp13-pricing .plan:hover{ transform: translateY(-3px) !important; border-color: #9fd7bf !important; box-shadow: 0 18px 42px rgba(23,51,37,.065) !important; } /* Growth / highlighted plan */ #bp13ReferenceMain .bp13-pricing .plan.featured{ border-color: #57c696 !important; box-shadow: inset 0 3px 0 #07966b !important; } /* ======================================================== TAGS ======================================================== */ #bp13ReferenceMain .bp13-pricing .plan-tag{ display:inline-flex !important; align-items:center !important; width: max-content !important; min-height: 22px !important; margin: 0 0 10px !important; padding: 0 8px !important; background: #e8f8f0 !important; border:0 !important; border-radius: 4px !important; color: #087b50 !important; font-size: 10px !important; line-height: 1 !important; font-weight: 600 !important; } #bp13ReferenceMain .bp13-pricing .plan[data-plan-family="business"] .plan-tag{ background: #edf4ff !important; color: #315d99 !important; } #bp13ReferenceMain .bp13-pricing .plan-popular{ position:absolute !important; top: 20px !important; right: 20px !important; display:inline-flex !important; align-items:center !important; min-height: 23px !important; padding: 0 8px !important; border-radius: 4px !important; background: #07966b !important; color: #ffffff !important; font-size: 9px !important; line-height: 1 !important; font-weight: 600 !important; } /* ======================================================== PLAN NAME ======================================================== */ #bp13ReferenceMain .bp13-pricing .plan h3{ margin: 0 !important; color: #0c2031 !important; font-size: 21px !important; line-height: 1.25 !important; font-weight: 600 !important; letter-spacing: -.025em !important; } /* ======================================================== COMMISSION — DIRECTLY UNDER PLAN NAME ======================================================== */ #bp13ReferenceMain .bp13-pricing .plan-commission{ margin: 6px 0 0 !important; color: #172a35 !important; font-size: 13px !important; line-height: 1.45 !important; font-weight: 500 !important; } #bp13ReferenceMain .bp13-pricing .plan[data-plan-family="business"] .plan-commission{ color: #078556 !important; } /* ======================================================== DESCRIPTION ======================================================== */ #bp13ReferenceMain .bp13-pricing .plan-desc{ min-height: 39px !important; margin: 8px 0 0 !important; color: #69766f !important; font-size: 12px !important; line-height: 1.55 !important; font-weight: 400 !important; } /* ======================================================== BACKEND-RENDERED PRICE ======================================================== */ #bp13ReferenceMain .bp13-pricing .plan .price{ margin: 18px 0 0 !important; color: #07966b !important; font-size: 24px !important; line-height: 1.12 !important; font-weight: 400 !important; letter-spacing: -.025em !important; font-variant-numeric: tabular-nums !important; } /* loading/error text only */ #bp13ReferenceMain .bp13-pricing .plan .price.loading{ color: #65736c !important; font-size: 15px !important; font-weight: 400 !important; letter-spacing: 0 !important; } #bp13ReferenceMain .bp13-pricing .price-note{ margin: 5px 0 0 !important; color: #7a857f !important; font-size: 11px !important; line-height: 1.4 !important; font-weight: 400 !important; } /* source stays available to runtime but unnecessary visually */ #bp13ReferenceMain .bp13-pricing .plan-source{ min-height: 0 !important; margin:0 !important; font-size: 0 !important; } /* ======================================================== PLAN FEATURES ======================================================== */ #bp13ReferenceMain .bp13-pricing .plan-list{ display:flex !important; flex-direction: column !important; gap: 8px !important; margin: 19px 0 0 !important; padding: 18px 0 0 !important; border-top: 1px solid #e3ebe7 !important; } #bp13ReferenceMain .bp13-pricing .plan-list span{ position: relative !important; display:block !important; margin:0 !important; padding: 0 0 0 19px !important; color: #52615a !important; font-size: 12px !important; line-height: 1.5 !important; font-weight: 400 !important; } #bp13ReferenceMain .bp13-pricing .plan-list span::before{ content: "✓" !important; position: absolute !important; left:0 !important; color: #07966b !important; font-weight: 600 !important; } /* ======================================================== CTA ======================================================== */ #bp13ReferenceMain .bp13-pricing .plan-actions{ margin-top: auto !important; padding-top: 23px !important; } #bp13ReferenceMain .bp13-pricing .plan-actions .btn{ width: 100% !important; min-height: 44px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding: 0 15px !important; background: #07966b !important; border: 1px solid #07966b !important; border-radius: 6px !important; color: #ffffff !important; box-shadow: none !important; font-size: 12px !important; line-height: 1 !important; font-weight: 600 !important; text-decoration: none !important; } /* ======================================================== MOBILE — ONE COLUMN ======================================================== */ @media(max-width:760px){ #bp13ReferenceMain .bp13-pricing{ padding: 66px 0 72px !important; } #bp13ReferenceMain .bp13-pricing .wrap{ width: min( 100% - 34px, 1180px ) !important; } #bp13ReferenceMain .bp13-pricing .pricing-intro{ margin-bottom: 27px !important; } #bp13ReferenceMain .bp13-pricing .pricing-intro h2{ font-size: 28px !important; } #bp13ReferenceMain .bp13-pricing .billing-toggle{ grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; width: 100% !important; } #bp13ReferenceMain .bp13-pricing .plans{ grid-template-columns: 1fr !important; gap: 16px !important; } #bp13ReferenceMain .bp13-pricing .plan{ min-height: 0 !important; padding: 25px 21px 21px !important; } #bp13ReferenceMain .bp13-pricing .plan .price{ font-size: 24px !important; font-weight: 400 !important; } } /* ============================================================ BIPOFY_HOME_FONT_SCALE_V013D Readability / typography polish only. ============================================================ */ /* ======================================================== HERO LOWER GUIDE TEXT ======================================================== */ #bp13ReferenceMain .bp13-hero .bog-footer{ margin-top:24px !important; font-size:14px !important; line-height:1.72 !important; color:#56645d !important; } #bp13ReferenceMain .bp13-hero .bog-footer p{ font-size:14px !important; line-height:1.72 !important; } #bp13ReferenceMain .bp13-hero .bog-footer a{ font-size:14px !important; line-height:1.72 !important; font-weight:600 !important; } /* ======================================================== NO STARTUP COST / ALL-IN-ONE / LIGHTNING / SECURE ======================================================== */ #bp13ReferenceMain .bp13-benefit-strip .trust-box{ padding: 30px 0 !important; } #bp13ReferenceMain .bp13-benefit-strip .trust-item{ gap:16px !important; } #bp13ReferenceMain .bp13-benefit-strip .trust-icon{ width:42px !important; height:42px !important; flex: 0 0 42px !important; } #bp13ReferenceMain .bp13-benefit-strip .trust-icon svg{ width:31px !important; height:31px !important; } #bp13ReferenceMain .bp13-benefit-strip .trust-item strong{ font-size:15px !important; line-height:1.4 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-benefit-strip .trust-item span{ margin-top:5px !important; font-size:12.5px !important; line-height:1.55 !important; } /* ======================================================== WHY BIPOFY ======================================================== */ #bp13ReferenceMain .bp13-journey{ padding: 84px 0 82px !important; } #bp13ReferenceMain .bp13-journey .bp13-kicker{ font-size:13px !important; line-height:1.3 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-journey .bp13-section-head h2{ margin-top:10px !important; font-size:36px !important; line-height:1.13 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-journey .bp13-section-head{ margin-bottom:48px !important; } /* FLOW ICON */ #bp13ReferenceMain .bp13-step-icon{ width:66px !important; height:66px !important; margin-bottom:18px !important; border-radius:14px !important; } #bp13ReferenceMain .bp13-step-icon svg{ width:32px !important; height:32px !important; stroke-width:1.75 !important; } /* FLOW TITLE */ #bp13ReferenceMain .bp13-steps strong{ font-size:14.5px !important; line-height:1.42 !important; font-weight:600 !important; } /* FLOW SUBTITLE */ #bp13ReferenceMain .bp13-steps span{ max-width:155px !important; margin: 8px auto 0 !important; font-size:12.5px !important; line-height:1.58 !important; color:#6d7a74 !important; } /* ======================================================== PRICING INTRO ======================================================== */ #bp13ReferenceMain .bp13-pricing .pricing-intro .eyebrow{ font-size:12.5px !important; line-height:1.3 !important; } #bp13ReferenceMain .bp13-pricing .pricing-intro h2{ font-size:36px !important; line-height:1.12 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-pricing .pricing-intro > p{ margin-top:12px !important; font-size:14.5px !important; line-height:1.7 !important; } #bp13ReferenceMain .bp13-pricing .market-badge{ font-size:12px !important; line-height:1.5 !important; } /* MONTHLY / YEARLY */ #bp13ReferenceMain .bp13-pricing .billing-toggle button{ font-size:12.5px !important; } /* ======================================================== PRICING CARDS ======================================================== */ #bp13ReferenceMain .bp13-pricing .plan{ padding: 30px 27px 26px !important; } #bp13ReferenceMain .bp13-pricing .plan-tag{ min-height:24px !important; font-size:10.5px !important; } #bp13ReferenceMain .bp13-pricing .plan-popular{ min-height:24px !important; font-size:10px !important; } #bp13ReferenceMain .bp13-pricing .plan h3{ font-size:22px !important; line-height:1.25 !important; font-weight:600 !important; } /* COMMISSION SUBTITLE */ #bp13ReferenceMain .bp13-pricing .plan-commission{ margin-top:7px !important; font-size:13.5px !important; line-height:1.5 !important; font-weight:500 !important; } /* PLAN DESCRIPTION */ #bp13ReferenceMain .bp13-pricing .plan-desc{ margin-top:10px !important; font-size:12.5px !important; line-height:1.62 !important; } /* PRICE — LOCKED TO USER REQUEST */ #bp13ReferenceMain .bp13-pricing .plan .price{ margin-top:20px !important; font-size:24px !important; line-height:1.12 !important; font-weight:400 !important; } /* PER MONTH / NO MONTHLY FEE */ #bp13ReferenceMain .bp13-pricing .price-note{ margin-top:6px !important; font-size:11.5px !important; line-height:1.45 !important; } /* PLAN FEATURES */ #bp13ReferenceMain .bp13-pricing .plan-list{ gap:9px !important; margin-top:21px !important; padding-top:19px !important; } #bp13ReferenceMain .bp13-pricing .plan-list span{ padding-left:20px !important; font-size:12.5px !important; line-height:1.55 !important; } #bp13ReferenceMain .bp13-pricing .plan-actions .btn{ min-height:46px !important; font-size:12.5px !important; font-weight:600 !important; } /* ======================================================== ALL THE TOOLS TO... ======================================================== */ #bp13ReferenceMain .bp13-tools{ padding: 96px 0 !important; } #bp13ReferenceMain .bp13-tools .console-copy .eyebrow{ font-size:13px !important; } #bp13ReferenceMain .bp13-tools .console-copy h2{ font-size:38px !important; line-height:1.08 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-tools .console-copy > p{ margin-top:15px !important; font-size:15.5px !important; line-height:1.75 !important; } /* TOOL CARDS */ #bp13ReferenceMain .bp13-tools-grid .feature-card{ padding:20px !important; } #bp13ReferenceMain .bp13-tools-grid .feature-icon{ width:42px !important; height:42px !important; } #bp13ReferenceMain .bp13-tools-grid .feature-icon svg{ width:23px !important; height:23px !important; } #bp13ReferenceMain .bp13-tools-grid h3{ font-size:15px !important; line-height:1.42 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-tools-grid p{ margin-top:7px !important; font-size:12.5px !important; line-height:1.64 !important; } /* ======================================================== GLOBAL DELIVERY ======================================================== */ #bp13ReferenceMain .bp13-global{ padding: 96px 0 !important; } #bp13ReferenceMain .bp13-global .bipomart-copy .eyebrow{ font-size:13px !important; } #bp13ReferenceMain .bp13-global .bipomart-copy h2{ font-size:39px !important; line-height:1.08 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-global .bipomart-copy > p{ margin-top:15px !important; font-size:15px !important; line-height:1.76 !important; } /* GLOBAL ICONS */ #bp13ReferenceMain .bp13-global-benefits .performance-icon{ width:42px !important; height:42px !important; margin-bottom:11px !important; } #bp13ReferenceMain .bp13-global-benefits .performance-icon svg{ width:23px !important; height:23px !important; } #bp13ReferenceMain .bp13-global-benefits strong{ font-size:12.5px !important; line-height:1.45 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-global-benefits span{ margin-top:5px !important; font-size:11.5px !important; line-height:1.52 !important; } /* ======================================================== BLOG / GUIDES ======================================================== */ #bp13ReferenceMain .bp13-guides{ padding: 94px 0 100px !important; } /* kicker */ #bp13ReferenceMain .bp13-guides .bipofy-kicker-v123{ font-size:12.5px !important; line-height:1.3 !important; font-weight:600 !important; } /* Requested: more vertical distance between title and subtitle. */ #bp13ReferenceMain .bp13-guides .bipofy-section-head-v123 h2{ margin: 10px 0 18px !important; font-size:38px !important; line-height:1.1 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-guides .bipofy-section-head-v123 p{ margin-top:0 !important; max-width:760px !important; font-size:15px !important; line-height:1.72 !important; } /* More breathing room before blog cards */ #bp13ReferenceMain .bp13-guides .bipofy-section-head-v123{ margin-bottom:38px !important; } /* BLOG CARDS */ #bp13ReferenceMain .bp13-guides .bipofy-blog-tag-v123{ font-size:11px !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-guides h3{ font-size:18px !important; line-height:1.45 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-guides .bp13-guide-card p{ font-size:13px !important; line-height:1.7 !important; } #bp13ReferenceMain .bp13-guides .bp13-guide-card a{ font-size:12.5px !important; font-weight:600 !important; } /* ======================================================== SEO & CONTENT ======================================================== */ #bp13ReferenceMain .bp13-seo .bp13-kicker{ font-size:12.5px !important; } #bp13ReferenceMain .bp13-seo .bog-copy h2{ font-size:39px !important; line-height:1.08 !important; } #bp13ReferenceMain .bp13-seo .bog-copy p{ font-size:15px !important; line-height:1.75 !important; } #bp13ReferenceMain .bp13-seo .bog-card strong{ font-size:13.5px !important; } #bp13ReferenceMain .bp13-seo .bog-card span{ font-size:12.5px !important; line-height:1.62 !important; } #bp13ReferenceMain .bp13-seo .bog-footer{ font-size:13.5px !important; } /* ======================================================== FAQ ======================================================== */ #bp13ReferenceMain .bp13-faq{ padding: 84px 0 46px !important; } #bp13ReferenceMain .bp13-faq .faq-intro .eyebrow{ font-size:12.5px !important; } #bp13ReferenceMain .bp13-faq .faq-intro h2{ font-size:36px !important; line-height:1.12 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-faq .faq-intro p{ margin-top:10px !important; font-size:14px !important; line-height:1.65 !important; } #bp13ReferenceMain .bp13-faq summary{ min-height:56px !important; font-size:14px !important; line-height:1.5 !important; font-weight:600 !important; } #bp13ReferenceMain .bp13-faq details p{ font-size:13px !important; line-height:1.7 !important; } /* ======================================================== MOBILE ======================================================== */ @media(max-width:760px){ #bp13ReferenceMain .bp13-hero .bog-footer, #bp13ReferenceMain .bp13-hero .bog-footer p, #bp13ReferenceMain .bp13-hero .bog-footer a{ font-size:13px !important; } #bp13ReferenceMain .bp13-benefit-strip .trust-item strong{ font-size:14px !important; } #bp13ReferenceMain .bp13-benefit-strip .trust-item span{ font-size:12px !important; } #bp13ReferenceMain .bp13-journey .bp13-section-head h2{ font-size:31px !important; } #bp13ReferenceMain .bp13-step-icon{ width:60px !important; height:60px !important; } #bp13ReferenceMain .bp13-step-icon svg{ width:29px !important; height:29px !important; } #bp13ReferenceMain .bp13-steps strong{ font-size:13.5px !important; } #bp13ReferenceMain .bp13-steps span{ font-size:12px !important; } #bp13ReferenceMain .bp13-pricing .pricing-intro h2{ font-size:30px !important; } #bp13ReferenceMain .bp13-pricing .pricing-intro > p{ font-size:14px !important; } #bp13ReferenceMain .bp13-pricing .plan h3{ font-size:21px !important; } #bp13ReferenceMain .bp13-pricing .plan-commission{ font-size:13px !important; } #bp13ReferenceMain .bp13-tools .console-copy h2, #bp13ReferenceMain .bp13-global .bipomart-copy h2, #bp13ReferenceMain .bp13-guides .bipofy-section-head-v123 h2, #bp13ReferenceMain .bp13-seo .bog-copy h2, #bp13ReferenceMain .bp13-faq .faq-intro h2{ font-size:31px !important; } #bp13ReferenceMain .bp13-tools .console-copy > p, #bp13ReferenceMain .bp13-global .bipomart-copy > p, #bp13ReferenceMain .bp13-guides .bipofy-section-head-v123 p, #bp13ReferenceMain .bp13-seo .bog-copy p{ font-size:14px !important; } /* Still retain noticeable title/subtitle gap */ #bp13ReferenceMain .bp13-guides .bipofy-section-head-v123 h2{ margin-bottom:15px !important; } } /* ============================================================ BIPOFY_HOME_TOOL_ICONS_V013E All Tools section icon visibility + alignment ============================================================ */ /* --------------------------------------------------------- ICON BACKGROUND CARD --------------------------------------------------------- */ #bp13ReferenceMain .bp13-tools-grid .feature-icon{ width:46px !important; height:46px !important; min-width:46px !important; min-height:46px !important; display:grid !important; place-items:center !important; align-items:center !important; justify-content:center !important; padding:0 !important; margin: 0 0 15px !important; overflow:hidden !important; background:#eaf8f2 !important; border: 1px solid #d9eee4 !important; border-radius:10px !important; color:#0b6f52 !important; line-height:1 !important; } /* --------------------------------------------------------- SVG --------------------------------------------------------- */ #bp13ReferenceMain .bp13-tools-grid .feature-icon svg{ width:24px !important; height:24px !important; min-width:24px !important; min-height:24px !important; display:block !important; position:static !important; margin:0 !important; padding:0 !important; transform:none !important; opacity:1 !important; visibility:visible !important; color:#0b6f52 !important; stroke:#0b6f52 !important; fill:none !important; stroke-width:1.8 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } /* Ensure Lucide-style SVG children are visible */ #bp13ReferenceMain .bp13-tools-grid .feature-icon svg path, #bp13ReferenceMain .bp13-tools-grid .feature-icon svg line, #bp13ReferenceMain .bp13-tools-grid .feature-icon svg polyline, #bp13ReferenceMain .bp13-tools-grid .feature-icon svg polygon, #bp13ReferenceMain .bp13-tools-grid .feature-icon svg circle, #bp13ReferenceMain .bp13-tools-grid .feature-icon svg ellipse, #bp13ReferenceMain .bp13-tools-grid .feature-icon svg rect{ stroke:currentColor !important; stroke-width:1.8 !important; stroke-linecap:round !important; stroke-linejoin:round !important; fill:none !important; opacity:1 !important; visibility:visible !important; } /* --------------------------------------------------------- FALLBACK ICON TYPES --------------------------------------------------------- */ #bp13ReferenceMain .bp13-tools-grid .feature-icon img{ width:24px !important; height:24px !important; display:block !important; margin:auto !important; object-fit:contain !important; opacity:1 !important; visibility:visible !important; } #bp13ReferenceMain .bp13-tools-grid .feature-icon i, #bp13ReferenceMain .bp13-tools-grid .feature-icon span{ display:flex !important; align-items:center !important; justify-content:center !important; width:24px !important; height:24px !important; margin:auto !important; color:#0b6f52 !important; font-size:20px !important; line-height:1 !important; opacity:1 !important; visibility:visible !important; } /* --------------------------------------------------------- CARD CONSISTENCY --------------------------------------------------------- */ #bp13ReferenceMain .bp13-tools-grid .feature-card{ position:relative !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; min-height:154px !important; padding: 20px 19px 21px !important; } /* icon itself centered inside mint square, card content remains left aligned */ #bp13ReferenceMain .bp13-tools-grid .feature-card h3{ margin: 0 0 7px !important; } #bp13ReferenceMain .bp13-tools-grid .feature-card p{ margin:0 !important; } /* --------------------------------------------------------- HOVER — restrained --------------------------------------------------------- */ #bp13ReferenceMain .bp13-tools-grid .feature-card:hover .feature-icon{ background:#e1f6ec !important; border-color:#c9e8da !important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media(max-width:760px){ #bp13ReferenceMain .bp13-tools-grid .feature-icon{ width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; margin-bottom:14px !important; } #bp13ReferenceMain .bp13-tools-grid .feature-icon svg, #bp13ReferenceMain .bp13-tools-grid .feature-icon img{ width:23px !important; height:23px !important; min-width:23px !important; min-height:23px !important; } } /* ============================================================ BIPOFY_HOME_HERO_CLEAN_V013F Remove DOM floating cards from hero visual. Keep original merchant image untouched. ============================================================ */ #bp13ReferenceMain .bp13-hero-visual .bp13-float, #bp13ReferenceMain .bp13-hero-visual .bp13-sales-card, #bp13ReferenceMain .bp13-hero-visual .bp13-orders-card, #bp13ReferenceMain .bp13-hero-visual .bp13-product-card, #bp13ReferenceMain .bp13-hero-visual .bp13-old-float, #bp13ReferenceMain .bp13-hero-visual .store-float, #bp13ReferenceMain .bp13-hero-visual .overview-float, #bp13ReferenceMain .bp13-hero-visual .order-toast{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } /* keep hero image clean and fully visible */ #bp13ReferenceMain .bp13-hero-visual .bp13-hero-image{ display:block !important; width:100% !important; height:auto !important; position:relative !important; z-index:1 !important; } /* remove unnecessary overlay stacking */ #bp13ReferenceMain .bp13-hero-visual{ overflow:hidden !important; } /* ============================================================ BIPOFY_HOME_GLOBAL_CARDS_V013G Global delivery benefit cards + icons polish only ============================================================ */ /* container breathing */ #bp13ReferenceMain .bp13-global-benefits{ display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:16px !important; align-items:stretch !important; margin-top:26px !important; } /* each mini card */ #bp13ReferenceMain .bp13-global-benefits > *{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; min-height:146px !important; padding:18px 16px 17px !important; background:#ffffff !important; border:1px solid #dbe7e1 !important; border-radius:14px !important; box-shadow:0 8px 24px rgba(12, 32, 24, 0.04) !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important; } #bp13ReferenceMain .bp13-global-benefits > *:hover{ transform:translateY(-2px) !important; border-color:#c4e6d7 !important; box-shadow:0 14px 30px rgba(12, 32, 24, 0.07) !important; } /* icon bg */ #bp13ReferenceMain .bp13-global-benefits .performance-icon{ width:48px !important; height:48px !important; min-width:48px !important; min-height:48px !important; display:grid !important; place-items:center !important; margin:0 0 14px !important; padding:0 !important; background:#eaf8f2 !important; border:1px solid #d7eee4 !important; border-radius:12px !important; color:#0a9a70 !important; line-height:1 !important; } /* svg/icon visibility */ #bp13ReferenceMain .bp13-global-benefits .performance-icon svg{ width:22px !important; height:22px !important; display:block !important; stroke:currentColor !important; fill:none !important; stroke-width:1.85 !important; stroke-linecap:round !important; stroke-linejoin:round !important; opacity:1 !important; visibility:visible !important; } #bp13ReferenceMain .bp13-global-benefits .performance-icon svg path, #bp13ReferenceMain .bp13-global-benefits .performance-icon svg line, #bp13ReferenceMain .bp13-global-benefits .performance-icon svg polyline, #bp13ReferenceMain .bp13-global-benefits .performance-icon svg polygon, #bp13ReferenceMain .bp13-global-benefits .performance-icon svg circle, #bp13ReferenceMain .bp13-global-benefits .performance-icon svg rect{ stroke:currentColor !important; fill:none !important; stroke-width:1.85 !important; opacity:1 !important; visibility:visible !important; } /* title */ #bp13ReferenceMain .bp13-global-benefits strong{ display:block !important; margin:0 0 7px !important; color:#12232f !important; font-size:15px !important; line-height:1.42 !important; font-weight:600 !important; letter-spacing:-0.01em !important; } /* subtitle */ #bp13ReferenceMain .bp13-global-benefits span{ display:block !important; margin:0 !important; color:#66746d !important; font-size:13px !important; line-height:1.6 !important; font-weight:400 !important; } /* mobile */ @media(max-width:760px){ #bp13ReferenceMain .bp13-global-benefits{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:12px !important; margin-top:22px !important; } #bp13ReferenceMain .bp13-global-benefits > *{ min-height:136px !important; padding:16px 14px !important; border-radius:12px !important; } #bp13ReferenceMain .bp13-global-benefits .performance-icon{ width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; margin-bottom:12px !important; } #bp13ReferenceMain .bp13-global-benefits .performance-icon svg{ width:20px !important; height:20px !important; } #bp13ReferenceMain .bp13-global-benefits strong{ font-size:14px !important; } #bp13ReferenceMain .bp13-global-benefits span{ font-size:12.5px !important; line-height:1.55 !important; } } /* ============================================================ BIPOFY_HOME_GLOBAL_CARDS_V013G_R1 Corrects narrow V013G 4-across cards. ============================================================ */ /* ======================================================== GRID — 2 x 2 ======================================================== */ #bp13ReferenceMain .bp13-global-benefits{ display:grid !important; grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; gap: 14px !important; width: 100% !important; max-width: 540px !important; margin: 28px 0 0 !important; padding: 0 !important; align-items: stretch !important; } /* ======================================================== CARD ======================================================== */ #bp13ReferenceMain .bp13-global-benefits .performance-item{ display:grid !important; grid-template-columns: 48px minmax(0,1fr) !important; grid-template-rows: auto auto !important; column-gap: 14px !important; row-gap: 5px !important; align-items: center !important; min-width: 0 !important; min-height: 104px !important; margin: 0 !important; padding: 16px 17px !important; background: #ffffff !important; border: 1px solid #dce9e3 !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(15,45,31,.035) !important; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important; } #bp13ReferenceMain .bp13-global-benefits .performance-item:hover{ transform: translateY(-2px) !important; border-color: #b8dfcf !important; box-shadow: 0 13px 30px rgba(15,45,31,.06) !important; } /* ======================================================== ICON BOX ======================================================== */ #bp13ReferenceMain .bp13-global-benefits .performance-icon{ grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: center !important; justify-self: center !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; display:grid !important; place-items: center !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; background: #eaf8f2 !important; border: 1px solid #d3ede1 !important; border-radius: 12px !important; color: #07966b !important; line-height: 1 !important; } /* ======================================================== SVG — PERFECTLY CENTERED ======================================================== */ #bp13ReferenceMain .bp13-global-benefits .performance-icon svg{ width: 23px !important; height: 23px !important; display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; transform: none !important; color: #07966b !important; stroke: currentColor !important; fill: none !important; stroke-width: 1.75 !important; stroke-linecap: round !important; stroke-linejoin: round !important; opacity: 1 !important; visibility: visible !important; } #bp13ReferenceMain .bp13-global-benefits .performance-icon svg *{ stroke: currentColor !important; fill: none !important; opacity: 1 !important; visibility: visible !important; } /* ======================================================== TITLE ======================================================== */ #bp13ReferenceMain .bp13-global-benefits .performance-item strong{ grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; display:block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #10232f !important; font-size: 14.5px !important; line-height: 1.35 !important; font-weight: 600 !important; letter-spacing: -.015em !important; } /* ======================================================== SUBTITLE ======================================================== */ #bp13ReferenceMain .bp13-global-benefits .performance-item > span:not(.performance-icon){ grid-column: 2 !important; grid-row: 2 !important; align-self: start !important; display:block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #66756e !important; font-size: 12.5px !important; line-height: 1.52 !important; font-weight: 400 !important; } /* ======================================================== TABLET / MOBILE ======================================================== */ @media(max-width:760px){ #bp13ReferenceMain .bp13-global-benefits{ grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; max-width: none !important; gap: 12px !important; } #bp13ReferenceMain .bp13-global-benefits .performance-item{ grid-template-columns: 44px minmax(0,1fr) !important; column-gap: 12px !important; min-height: 100px !important; padding: 14px !important; } #bp13ReferenceMain .bp13-global-benefits .performance-icon{ width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } #bp13ReferenceMain .bp13-global-benefits .performance-icon svg{ width: 21px !important; height: 21px !important; } } @media(max-width:460px){ #bp13ReferenceMain .bp13-global-benefits{ grid-template-columns: 1fr !important; } #bp13ReferenceMain .bp13-global-benefits .performance-item{ min-height: 92px !important; } } /* ============================================================ BIPOFY_HOME_COUNTRY_GUIDE_V013H Bangladesh-specific guide hidden until BD is confirmed. ============================================================ */ /* default = hidden, including unknown / failed geo */ .bog-footer:has( a[href="/ecommerce-platform-bangladesh"] ){ display:none !important; } /* show only after runtime confirms Bangladesh */ html .bog-footer[data-bipofy-bd-guide-visible="1"]{ display:block !important; } /* ============================================================ BIPOFY_HOME_SEO_IMAGE_V013I_R1 SEO visual replacement only. ============================================================ */ .bp13i-seo-image-host{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; } .bp13i-seo-image-host > *:not(.bp13i-seo-image-wrap){ display:none !important; } .bp13i-seo-image-wrap{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; margin:0 !important; padding:0 !important; } .bp13i-seo-image{ display:block !important; width:100% !important; height:auto !important; max-width:640px !important; margin:0 auto !important; object-fit:contain !important; border: 1px solid #e2e9e5 !important; border-radius: 16px !important; box-shadow: 0 22px 54px rgba(21,47,35,.08) !important; } @media(max-width:760px){ .bp13i-seo-image{ max-width:100% !important; border-radius: 12px !important; } } /* ============================================================ BIPOFY_HOME_BLOG_CLEAN_V013J_R3 CSS-only authority. ============================================================ */ /* ======================================================== SECTION ======================================================== */ #blog.bipofy-blog-v123.bp13-guides{ padding: 94px 0 102px !important; background: #ffffff !important; } #blog.bipofy-blog-v123 > .wrap{ width: min( 1180px, calc(100% - 56px) ) !important; max-width: 1180px !important; margin: 0 auto !important; } /* ======================================================== HEADER ======================================================== */ #blog .bipofy-section-head-v123{ display:flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 48px !important; margin: 0 0 38px !important; padding: 0 !important; } #blog .bipofy-section-head-v123 > div{ width: min( 100%, 760px ) !important; max-width: 760px !important; } /* kicker */ #blog .bipofy-kicker-v123{ display:inline-flex !important; align-items:center !important; width:max-content !important; min-height: 25px !important; margin: 0 0 15px !important; padding: 0 9px !important; background: #eff9f4 !important; border: 1px solid #d6ece1 !important; border-radius: 5px !important; color: #07875f !important; font-size: 10.5px !important; line-height: 1 !important; font-weight: 600 !important; letter-spacing: .075em !important; text-transform: uppercase !important; } /* title */ #blog #bipofyBlogTitleV123{ max-width: 730px !important; margin: 0 !important; color: #0c2030 !important; font-size: clamp( 38px, 3.4vw, 48px ) !important; line-height: 1.06 !important; font-weight: 600 !important; letter-spacing: -.043em !important; } /* subtitle */ #blog .bipofy-section-head-v123 p{ max-width: 710px !important; margin: 17px 0 0 !important; color: #617068 !important; font-size: 15px !important; line-height: 1.7 !important; font-weight: 400 !important; } /* Existing View all guides link, when present */ #blog .bipofy-section-head-v123 a[href="/blog"]{ flex: 0 0 auto !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height: 42px !important; padding: 0 17px !important; margin: 0 0 2px !important; background: #ffffff !important; border: 1px solid #d3ddd8 !important; border-radius: 7px !important; color: #087d59 !important; font-size: 12px !important; line-height: 1 !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; } /* ======================================================== GRID ======================================================== */ #blog .bipofy-blog-grid-v123{ display:grid !important; grid-template-columns: repeat( 3, minmax(0,1fr) ) !important; gap: 22px !important; width: 100% !important; align-items: stretch !important; margin: 0 !important; } /* ======================================================== CARD ======================================================== */ #blog .bipofy-blog-card-v123{ position: relative !important; display:flex !important; flex-direction: column !important; min-width: 0 !important; min-height: 328px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid #dce5e0 !important; border-radius: 13px !important; box-shadow: 0 7px 24px rgba(20,44,32,.035) !important; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important; } #blog .bipofy-blog-card-v123:hover{ transform: translateY(-3px) !important; border-color: #acd9c5 !important; box-shadow: 0 16px 36px rgba(20,44,32,.065) !important; } /* Remove older decorative blob authority */ #blog .bp13-guide-card::after{ content: none !important; display: none !important; } /* ======================================================== V013A MEDIA BECOMES A THIN ACCENT BAR ======================================================== */ #blog .bp13-guide-media{ display:block !important; width: 100% !important; height: 6px !important; min-height: 6px !important; max-height: 6px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } #blog .bp13-guide-media-1{ background: #dff5ea !important; } #blog .bp13-guide-media-2{ background: #e8f3ee !important; } #blog .bp13-guide-media-3{ background: #e8f2f7 !important; } /* ======================================================== NUMBER — PURE CSS ======================================================== */ #blog .bipofy-blog-card-v123::before{ position: absolute !important; z-index: 4 !important; top: 29px !important; right: 27px !important; color: #9aa9a2 !important; font-size: 11px !important; line-height: 1 !important; font-weight: 600 !important; letter-spacing: .03em !important; } #blog .bipofy-blog-card-v123:nth-child(1)::before{ content: "01" !important; } #blog .bipofy-blog-card-v123:nth-child(2)::before{ content: "02" !important; } #blog .bipofy-blog-card-v123:nth-child(3)::before{ content: "03" !important; } /* ======================================================== ARTICLE ======================================================== */ #blog .bipofy-blog-card-v123 article{ position: relative !important; display:flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: 100% !important; min-height: 100% !important; padding: 27px 27px 25px !important; } /* ======================================================== TAG ======================================================== */ #blog .bipofy-blog-tag-v123{ display:inline-flex !important; align-items:center !important; width: max-content !important; min-height: 25px !important; margin: 0 0 27px !important; padding: 0 9px !important; background: #ebf8f2 !important; border: 0 !important; border-radius: 5px !important; color: #087b57 !important; font-size: 10px !important; line-height: 1 !important; font-weight: 600 !important; letter-spacing: .065em !important; text-transform: uppercase !important; } /* ======================================================== CARD TITLE ======================================================== */ #blog .bipofy-blog-card-v123 h3{ min-height: 57px !important; margin: 0 0 14px !important; padding-right: 4px !important; color: #102332 !important; font-size: 18px !important; line-height: 1.42 !important; font-weight: 600 !important; letter-spacing: -.022em !important; } /* ======================================================== COPY ======================================================== */ #blog .bipofy-blog-card-v123 article > p{ margin: 0 0 22px !important; color: #627169 !important; font-size: 13.5px !important; line-height: 1.68 !important; font-weight: 400 !important; } /* ======================================================== LINK — ALWAYS SAME BASELINE ======================================================== */ #blog .bipofy-blog-card-v123 article > a{ display:inline-flex !important; align-items:center !important; width: max-content !important; max-width: 100% !important; margin-top: auto !important; padding: 0 !important; color: #078d64 !important; font-size: 12.5px !important; line-height: 1.45 !important; font-weight: 600 !important; text-decoration: none !important; } #blog .bipofy-blog-card-v123 article > a:hover{ text-decoration: underline !important; text-underline-offset: 4px !important; } /* ======================================================== TABLET ======================================================== */ @media(max-width:900px){ #blog .bipofy-blog-grid-v123{ grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; } } /* ======================================================== MOBILE ======================================================== */ @media(max-width:650px){ #blog.bipofy-blog-v123.bp13-guides{ padding: 72px 0 80px !important; } #blog.bipofy-blog-v123 > .wrap{ width: min( calc(100% - 34px), 1180px ) !important; } #blog .bipofy-section-head-v123{ display:block !important; margin-bottom: 29px !important; } #blog #bipofyBlogTitleV123{ font-size: 31px !important; line-height: 1.08 !important; } #blog .bipofy-section-head-v123 p{ margin-top: 14px !important; font-size: 14px !important; } #blog .bipofy-section-head-v123 a[href="/blog"]{ margin-top: 19px !important; } #blog .bipofy-blog-grid-v123{ grid-template-columns: 1fr !important; gap: 15px !important; } #blog .bipofy-blog-card-v123{ min-height: 0 !important; } #blog .bipofy-blog-card-v123 article{ padding: 24px 21px 22px !important; } #blog .bipofy-blog-card-v123 h3{ min-height: 0 !important; font-size: 17px !important; } #blog .bipofy-blog-card-v123::before{ top: 26px !important; right: 21px !important; } } /* ============================================================ BIPOFY_HOME_BLOG_HEADER_V013J_R6 Exact rendered DOM selectors. ============================================================ */ /* ========================= HEADER GRID ========================= */ #blog.bph-blog-v010.bp13-guides .bph-blog-v010-head{ display:grid !important; grid-template-columns: minmax(0,760px) auto !important; column-gap:52px !important; align-items:center !important; width:100% !important; margin-bottom:36px !important; } /* ========================= LEFT COPY BLOCK ========================= */ #blog .bph-blog-v010-copy{ min-width:0 !important; } /* ========================= TITLE ========================= */ #blog #bipofyBlogTitleV010{ max-width:720px !important; margin:0 !important; font-size: clamp(40px,3.45vw,48px) !important; line-height:1.08 !important; font-weight:600 !important; letter-spacing:-.042em !important; } /* ========================= SUBTITLE ========================= */ #blog .bph-blog-v010-intro{ display:block !important; max-width:660px !important; margin: 14px 0 0 !important; padding:0 !important; line-height:1.68 !important; } /* ========================= VIEW ALL GUIDES ========================= */ #blog .bph-blog-v010-all{ justify-self:end !important; align-self:center !important; display:flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; width:132px !important; min-width:132px !important; height:44px !important; min-height:44px !important; max-height:44px !important; margin:0 !important; padding: 0 15px !important; border: 1px solid #d3ddd8 !important; border-radius:7px !important; background:#fff !important; color:#087d59 !important; font-size:12px !important; line-height:1 !important; font-weight:600 !important; text-align:center !important; text-decoration:none !important; white-space:nowrap !important; transform:none !important; top:auto !important; } /* ========================= MOBILE ========================= */ @media(max-width:700px){ #blog .bph-blog-v010-head{ grid-template-columns: 1fr !important; row-gap:20px !important; align-items:start !important; } #blog #bipofyBlogTitleV010{ font-size:31px !important; line-height:1.08 !important; } #blog .bph-blog-v010-intro{ margin-top:12px !important; } #blog .bph-blog-v010-all{ justify-self:start !important; } }