/* ==========================================================
   BIPOFY MOBILE DESIGN AUTHORITY V009
   ONLY APPLIES <= 760PX
   ========================================================== */

@media (max-width:760px) {

  /* --------------------------------------------------------
     GLOBAL MOBILE SYSTEM
     -------------------------------------------------------- */

  .bph2 {
    overflow-x:hidden !important;
    font-size:14px !important;
  }

  .bph2 *,
  .bph2 *::before,
  .bph2 *::after {
    box-sizing:border-box;
  }

  .bph2 .wrap {
    width:auto !important;
    max-width:none !important;
    margin-left:14px !important;
    margin-right:14px !important;
  }

  .bph2 section {
    margin:0 !important;
  }

  .bph2 .section,
  .bph2 .bipomart,
  .bph2 .reviews-section,
  .bph2 .guides,
  .bph2 .guides-section,
  .bph2 .faq,
  .bph2 .faq-section {
    padding-top:26px !important;
    padding-bottom:26px !important;
  }

  .bph2 h2 {
    margin:0 0 8px !important;
    font-size:23px !important;
    line-height:1.16 !important;
    letter-spacing:-.028em !important;
  }

  .bph2 h3 {
    font-size:14px !important;
    line-height:1.25 !important;
  }

  .bph2 p {
    font-size:13.5px !important;
    line-height:1.52 !important;
  }

  .bph2 .eyebrow {
    display:inline-flex !important;
    margin:0 0 7px !important;
    padding:4px 7px !important;

    font-size:9.5px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:.04em !important;

    border-radius:4px !important;
  }


  /* ========================================================
     HERO
     TITLE -> IMAGE -> SUBTITLE -> COPY -> CTAS
     ======================================================== */

  .bph2 .hero {
    padding:12px 0 18px !important;
  }

  .bph2 .hero .wrap {
    margin-left:12px !important;
    margin-right:12px !important;
  }

  .bph2 .hero-grid {
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }

  .bph2 .hero-copy {
    display:contents !important;
  }

  .bph2 .hero-copy > .eyebrow {
    display:none !important;
  }


  /* TITLE */

  .bph2 .hero-copy h1 {
    order:1 !important;

    width:100% !important;

    margin:0 0 6px !important;
    padding:0 !important;
  }

  .bph2 .hero-title-main {
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    font-size:27px !important;
    line-height:1.16 !important;
    font-weight:750 !important;
    letter-spacing:-.035em !important;

    white-space:normal !important;
  }

  .bph2 .hero-title-main br {
    display:none !important;
  }

  .bph2 .hero-title-main em {
    display:inline !important;

    font-size:inherit !important;
    line-height:inherit !important;
    font-weight:inherit !important;
    font-style:normal !important;

    white-space:normal !important;
  }


  /* IMAGE */

  .bph2 .hero-visual {
    order:2 !important;

    width:100% !important;

    margin:0 0 7px !important;
    padding:0 !important;
  }

  .bph2 .hero-asset-visual {
    width:100% !important;

    margin:0 !important;
    padding:0 !important;
  }

  .bph2 .hero-asset-frame {
    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    border:1px solid rgba(13,175,122,.12) !important;
    border-radius:6px !important;

    background:#fff !important;

    box-shadow:
      0 5px 16px rgba(7,42,32,.07) !important;

    line-height:0 !important;
  }

  .bph2 .hero-asset-frame img {
    display:block !important;

    width:100% !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

    object-fit:cover !important;
    object-position:center center !important;

    vertical-align:top !important;
  }


  /* SUBTITLE */

  .bph2 .hero-title-sub {
    order:3 !important;

    display:block !important;

    width:100% !important;

    margin:0 0 5px !important;
    padding:0 !important;

    font-size:13px !important;
    line-height:1.35 !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
  }


  /* DESCRIPTION */

  .bph2 .hero-lead {
    order:4 !important;

    width:100% !important;

    margin:0 0 11px !important;
    padding:0 !important;

    font-size:14px !important;
    line-height:1.52 !important;
  }


  /* CTA */

  .bph2 .hero-actions {
    order:5 !important;

    display:grid !important;
    grid-template-columns:1fr !important;

    width:100% !important;

    gap:7px !important;

    margin:0 !important;
    padding:0 !important;
  }

  .bph2 .hero-actions .btn {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    min-height:43px !important;

    padding:9px 12px !important;

    border-radius:5px !important;

    font-size:13.5px !important;
    line-height:1.15 !important;
    font-weight:600 !important;
  }

  .bph2 .watch-play {
    width:19px !important;
    height:19px !important;
    flex:0 0 19px !important;
  }


  /* BENEFITS */

  .bph2 .hero-benefits {
    order:6 !important;

    display:grid !important;
    grid-template-columns:1fr 1fr !important;

    width:100% !important;

    gap:6px 10px !important;

    margin:10px 0 0 !important;
    padding:0 !important;
  }

  .bph2 .hero-benefit {
    font-size:11.5px !important;
    line-height:1.3 !important;
  }


  /* ========================================================
     TRUST
     ======================================================== */

  .bph2 .hero-trust {
    padding:8px 0 18px !important;
  }

  .bph2 .trust-box {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;

    gap:8px !important;

    padding:0 !important;

    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .bph2 .trust-item {
    display:flex !important;
    align-items:flex-start !important;

    min-width:0 !important;

    padding:10px !important;

    border:1px solid #e5eeeb !important;
    border-radius:5px !important;

    background:#fff !important;

    box-shadow:none !important;
  }

  .bph2 .trust-icon {
    width:26px !important;
    height:26px !important;
    flex:0 0 26px !important;
  }

  .bph2 .trust-item strong {
    display:block !important;

    font-size:11.5px !important;
    line-height:1.25 !important;
  }

  .bph2 .trust-item span {
    display:block !important;

    margin-top:2px !important;

    font-size:10.5px !important;
    line-height:1.32 !important;
  }


  /* ========================================================
     PRICING
     MOBILE SWIPE CARDS
     ======================================================== */

  .bph2 .pricing-grid,
  .bph2 .plans-grid,
  .bph2 .price-grid {
    display:flex !important;

    width:100% !important;

    gap:10px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:2px 1px 8px !important;

    scroll-snap-type:x mandatory !important;
    scrollbar-width:none !important;

    -webkit-overflow-scrolling:touch;
  }

  .bph2 .pricing-grid::-webkit-scrollbar,
  .bph2 .plans-grid::-webkit-scrollbar,
  .bph2 .price-grid::-webkit-scrollbar {
    display:none;
  }

  .bph2 .pricing-card,
  .bph2 .plan-card,
  .bph2 .price-card {
    flex:0 0 86% !important;

    width:86% !important;
    min-width:86% !important;

    padding:15px !important;

    border:1px solid #e2ebe8 !important;
    border-radius:6px !important;

    background:#fff !important;

    box-shadow:
      0 5px 16px rgba(7,42,32,.045) !important;

    scroll-snap-align:start !important;
  }

  .bph2 .pricing-card h3,
  .bph2 .plan-card h3,
  .bph2 .price-card h3 {
    font-size:16px !important;
  }


  /* ========================================================
     FEATURES
     ======================================================== */

  .bph2 .features-grid,
  .bph2 .feature-grid {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;

    gap:8px !important;
  }

  .bph2 .feature-card {
    min-width:0 !important;

    margin:0 !important;
    padding:11px !important;

    border:1px solid #e5eeeb !important;
    border-radius:5px !important;

    background:#fff !important;

    box-shadow:none !important;
  }

  .bph2 .feature-icon {
    width:27px !important;
    height:27px !important;

    margin:0 0 7px !important;
  }

  .bph2 .feature-card h3 {
    margin:0 0 4px !important;

    font-size:12.5px !important;
    line-height:1.25 !important;
  }

  .bph2 .feature-card p {
    margin:0 !important;

    font-size:11.5px !important;
    line-height:1.38 !important;
  }


  /* ========================================================
     STORE CONSOLE
     ======================================================== */

  .bph2 .console-grid {
    display:flex !important;
    flex-direction:column !important;

    gap:12px !important;
  }

  .bph2 .console-copy {
    width:100% !important;
  }

  .bph2 .console-copy p {
    margin:0 0 9px !important;

    font-size:13px !important;
    line-height:1.48 !important;
  }

  .bph2 .console-list {
    display:grid !important;

    gap:5px !important;

    margin:8px 0 10px !important;
  }

  .bph2 .console-list span {
    font-size:11.8px !important;
    line-height:1.35 !important;
  }

  .bph2 .console.console-asset {
    width:100% !important;

    margin:0 !important;

    overflow:hidden !important;

    border:1px solid #e2ebe8 !important;
    border-radius:6px !important;

    background:#fff !important;

    box-shadow:
      0 5px 16px rgba(7,42,32,.05) !important;
  }

  .bph2 .console-asset img {
    display:block !important;

    width:100% !important;
    height:auto !important;
  }


  /* ========================================================
     PERFORMANCE
     ======================================================== */

  .bph2 .performance {
    padding:10px 0 !important;
  }

  .bph2 .performance-box {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;

    gap:6px !important;
  }

  .bph2 .performance-item {
    min-width:0 !important;

    padding:9px !important;

    border-radius:5px !important;
  }

  .bph2 .performance-item strong {
    font-size:12px !important;
  }

  .bph2 .performance-item span {
    font-size:10px !important;
  }


  /* ========================================================
     BIPOMART
     ======================================================== */

  .bph2 .bipomart {
    padding:24px 0 !important;
  }

  .bph2 .bipomart-box {
    display:flex !important;
    flex-direction:column !important;

    gap:12px !important;

    padding:0 !important;
  }

  .bph2 .bipomart-copy {
    width:100% !important;
  }

  .bph2 .bipomart-copy p {
    margin:0 0 9px !important;

    font-size:13px !important;
    line-height:1.48 !important;
  }

  .bph2 .market.market-asset {
    width:100% !important;

    margin:0 !important;

    overflow:hidden !important;

    border:1px solid #e1ebe7 !important;
    border-radius:6px !important;

    background:#fff !important;

    box-shadow:
      0 5px 16px rgba(7,42,32,.05) !important;
  }

  .bph2 .market-asset img {
    display:block !important;

    width:100% !important;
    height:auto !important;
  }


  /* ========================================================
     GUIDES
     SWIPE CARDS
     ======================================================== */

  .bph2 .guides-grid,
  .bph2 .guide-grid {
    display:flex !important;

    gap:9px !important;

    overflow-x:auto !important;

    padding:1px 1px 7px !important;

    scroll-snap-type:x mandatory !important;
    scrollbar-width:none !important;
  }

  .bph2 .guides-grid::-webkit-scrollbar,
  .bph2 .guide-grid::-webkit-scrollbar {
    display:none;
  }

  .bph2 .guide-card {
    flex:0 0 84% !important;

    min-width:84% !important;

    padding:13px !important;

    border:1px solid #e3ece9 !important;
    border-radius:5px !important;

    background:#fff !important;

    scroll-snap-align:start !important;
  }

  .bph2 .guide-card h3 {
    margin:0 0 5px !important;

    font-size:13.5px !important;
    line-height:1.28 !important;
  }

  .bph2 .guide-card p {
    font-size:11.8px !important;
  }


  /* ========================================================
     FAQ
     ======================================================== */

  .bph2 .faq-layout,
  .bph2 .faq-grid {
    display:flex !important;
    flex-direction:column !important;

    gap:11px !important;
  }

  .bph2 .faq details,
  .bph2 .faq-section details {
    margin:0 !important;

    border-bottom:1px solid #e4ece9 !important;
  }

  .bph2 .faq summary,
  .bph2 .faq-section summary {
    min-height:43px !important;

    padding:11px 2px !important;

    font-size:12px !important;
    line-height:1.35 !important;
    font-weight:600 !important;
  }

  .bph2 .faq details p,
  .bph2 .faq-section details p {
    padding:0 2px 11px !important;

    font-size:12px !important;
    line-height:1.5 !important;
  }


  /* ========================================================
     FINAL CTA
     ======================================================== */

  .bph2 .final-cta,
  .bph2 .cta-section {
    padding-top:18px !important;
    padding-bottom:18px !important;
  }

}


/* Small phones */

@media (max-width:380px) {

  .bph2 .wrap {
    margin-left:11px !important;
    margin-right:11px !important;
  }

  .bph2 .hero-title-main {
    font-size:25px !important;
  }

  .bph2 .feature-card {
    padding:10px !important;
  }

}



/* ==========================================================
   BIPOFY MOBILE V009R1
   HERO DEAD-SPACE FIX
   ========================================================== */

@media (max-width:760px) {

  /*
   * The old desktop/base hero rules can leave vertical
   * min-height inside the mobile visual wrapper.
   * Kill that inherited space completely.
   */

  .bph2 .hero-grid {
    gap: 0 !important;
    row-gap: 0 !important;
  }


  /* TITLE -> IMAGE GAP */

  .bph2 .hero-copy h1 {
    margin: 0 0 2px !important;
    padding: 0 !important;
  }


  /* HERO OUTER WRAPPER */

  .bph2 .hero-visual {
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 0 2px !important;
    padding: 0 !important;

    aspect-ratio: auto !important;
  }


  /* HERO ASSET WRAPPER */

  .bph2 .hero-asset-visual {
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    aspect-ratio: auto !important;

    align-items: initial !important;
    justify-content: initial !important;
  }


  /* IMAGE FRAME */

  .bph2 .hero-asset-frame {
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    aspect-ratio: auto !important;

    line-height: 0 !important;
  }


  /* ACTUAL IMAGE */

  .bph2 .hero-asset-frame img {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    inset: auto !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;
  }


  /* Remove any decorative wrapper spacing */

  .bph2 .hero-visual::before,
  .bph2 .hero-visual::after,
  .bph2 .hero-asset-visual::before,
  .bph2 .hero-asset-visual::after {
    display: none !important;
    content: none !important;
  }


  /* IMAGE -> SUBTITLE GAP */

  .bph2 .hero-title-sub {
    margin: 2px 0 3px !important;
    padding: 0 !important;
  }


  /* SUBTITLE -> DESCRIPTION */

  .bph2 .hero-lead {
    margin: 0 0 8px !important;
    padding: 0 !important;
  }

}


@media (max-width:430px) {

  .bph2 .hero-copy h1 {
    margin-bottom: 1px !important;
  }

  .bph2 .hero-visual {
    margin-bottom: 1px !important;
  }

  .bph2 .hero-title-sub {
    margin-top: 1px !important;
  }

}



/* ==========================================================
   BIPOFY MOBILE V009R2
   HERO GAP + RESPONSIVE PRICING
   ========================================================== */

@media (max-width:760px) {


  /* ========================================================
     HERO — SLIGHTLY MORE BREATHING ROOM
     ======================================================== */

  .bph2 .hero-copy h1 {
    margin:
      0
      0
      6px
      !important;
  }

  .bph2 .hero-visual {
    margin:
      0
      0
      6px
      !important;
  }

  .bph2 .hero-title-sub {
    margin:
      0
      0
      4px
      !important;
  }


  /* Keep "for FREE!" together with exactly one word space */

  .bph2 .hero-title-main em {
    display: inline !important;
    white-space: nowrap !important;
    word-spacing: normal !important;
  }

  .bph2 .hero-title-main em br {
    display: none !important;
  }


  /* ========================================================
     PRICING / PLAN SECTION
     MOBILE AUTHORITY
     ======================================================== */

  /*
   * Pricing section can use different historical class names.
   * Normalize all known layout wrappers.
   */

  .bph2 .pricing-layout,
  .bph2 .pricing-inner,
  .bph2 .plans-layout,
  .bph2 .plans-inner {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
  }


  /*
   * Cards container:
   * single-column mobile layout.
   */

  .bph2 .pricing-grid,
  .bph2 .pricing-cards,
  .bph2 .pricing-plans,
  .bph2 .plans-grid,
  .bph2 .plan-grid,
  .bph2 .plan-cards,
  .bph2 .price-grid,
  .bph2 .price-cards,
  .bph2 [data-pricing-grid] {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;

    width: 100% !important;
    max-width: none !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    scroll-snap-type: none !important;
  }


  /*
   * Current and historical pricing card names.
   */

  .bph2 .pricing-card,
  .bph2 .pricing-plan,
  .bph2 .plan-card,
  .bph2 .price-card,
  .bph2 .bp-pricing-card,
  .bph2 [data-plan-card] {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    flex: none !important;

    margin: 0 !important;
    padding: 15px !important;

    border-radius: 7px !important;

    scroll-snap-align: none !important;
  }


  /*
   * Also catch a pricing grid whose direct children
   * are the plan cards.
   */

  .bph2
  section:has([data-signup-plan="starter"])
  :is(.pricing-grid,.pricing-cards,.pricing-plans,.plans-grid,.plan-grid,.price-grid) {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }


  /*
   * Catch BP pricing cards regardless of their parent
   * wrapper class.
   */

  .bph2
  section:has([data-signup-plan="starter"]):has([data-signup-plan="growth"]):has([data-signup-plan="business"])
  *:has(> .bp-pricing-card) {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;

    gap: 10px !important;

    width: 100% !important;

    overflow: visible !important;
  }


  /*
   * Cards containing a plan title + signup action.
   */

  .bph2
  section:has([data-signup-plan="starter"]):has([data-signup-plan="growth"]):has([data-signup-plan="business"])
  .bp-pricing-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

    flex-basis: auto !important;
  }


  /* Pricing intro should occupy full width */

  .bph2 .pricing-copy,
  .bph2 .pricing-intro,
  .bph2 .plans-copy {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 14px !important;
  }


  /* Pricing headings */

  .bph2 .pricing-copy h2,
  .bph2 .pricing-intro h2,
  .bph2 .plans-copy h2 {
    margin-bottom: 7px !important;
  }


  /* Price */

  .bph2 .pricing-card .price,
  .bph2 .pricing-card .bp-price,
  .bph2 .plan-card .price,
  .bph2 .price-card .price,
  .bph2 .bp-pricing-card .bp-price {
    font-size: 26px !important;
    line-height: 1.05 !important;
  }


  /* Plan description */

  .bph2 .pricing-card p,
  .bph2 .plan-card p,
  .bph2 .price-card p,
  .bph2 .bp-pricing-card p {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }


  /* Feature lists */

  .bph2 .pricing-card li,
  .bph2 .plan-card li,
  .bph2 .price-card li,
  .bph2 .bp-pricing-card li {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }


  /* Plan card action buttons */

  .bph2 .pricing-card .btn,
  .bph2 .plan-card .btn,
  .bph2 .price-card .btn,
  .bph2 .bp-pricing-card .btn,
  .bph2 .bp-pricing-card [data-signup-plan] {
    width: 100% !important;

    min-height: 40px !important;

    margin-top: auto !important;

    font-size: 12.5px !important;
  }


  /*
   * If historical swipe rules are still present,
   * neutralize them.
   */

  .bph2 .pricing-card,
  .bph2 .plan-card,
  .bph2 .price-card,
  .bph2 .bp-pricing-card {
    transform: none !important;
  }

}


@media (max-width:430px) {

  .bph2 .hero-copy h1 {
    margin-bottom: 5px !important;
  }

  .bph2 .hero-visual {
    margin-bottom: 5px !important;
  }

  .bph2 .pricing-card,
  .bph2 .pricing-plan,
  .bph2 .plan-card,
  .bph2 .price-card,
  .bph2 .bp-pricing-card,
  .bph2 [data-plan-card] {
    padding: 13px !important;
  }

}



/* ==========================================================
   BIPOFY MOBILE V009R3
   BIPOMART BOTTOM GAP FIX
   ========================================================== */

@media (max-width: 760px) {

  /*
   * Section-level spacing
   */
  .bph2 .bipomart-section,
  .bph2 .marketplace-section,
  .bph2 .global-store-section,
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  /*
   * Layout gap between text/button column and image card
   */
  .bph2 .bipomart-grid,
  .bph2 .marketplace-grid,
  .bph2 .global-store-grid,
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) .section-grid,
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) .content-grid {
    gap: 10px !important;
    row-gap: 10px !important;
  }

  /*
   * Visual outer wrapper
   */
  .bph2 .bipomart-visual,
  .bph2 .marketplace-visual,
  .bph2 .global-store-visual,
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) .visual,
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) .asset-visual {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
  }

  /*
   * Card/frame where the image sits
   */
  .bph2 .bipomart-frame,
  .bph2 .marketplace-frame,
  .bph2 .global-store-frame,
  .bph2 .bipomart-asset-frame,
  .bph2 .marketplace-asset-frame,
  .bph2 .global-store-asset-frame,
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) .visual-frame,
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) .asset-frame,
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) .image-frame {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px !important;
    line-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  /*
   * Direct image wrapper
   */
  .bph2 .bipomart-asset-visual,
  .bph2 .marketplace-asset-visual,
  .bph2 .global-store-asset-visual,
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) .asset-wrap,
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) .image-wrap {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /*
   * Actual BipoMart image
   */
  .bph2 img[src*="bipofy-home-bipomart-v001.webp"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center top !important;
    vertical-align: top !important;
  }

  /*
   * Kill dead white area caused by inherited fixed heights
   */
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) *,
  .bph2 .bipomart-visual *,
  .bph2 .marketplace-visual *,
  .bph2 .global-store-visual * {
    min-height: 0;
  }

  /*
   * Reduce gap between CTA and image card
   */
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) .btn,
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) .button,
  .bph2 .bipomart-section .btn,
  .bph2 .marketplace-section .btn,
  .bph2 .global-store-section .btn {
    margin-bottom: 8px !important;
  }

}

@media (max-width: 430px) {

  .bph2 .bipomart-frame,
  .bph2 .marketplace-frame,
  .bph2 .global-store-frame,
  .bph2 .bipomart-asset-frame,
  .bph2 .marketplace-asset-frame,
  .bph2 .global-store-asset-frame,
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) .visual-frame,
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) .asset-frame,
  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) .image-frame {
    padding: 6px !important;
  }

  .bph2 section:has(img[src*="bipofy-home-bipomart-v001.webp"]) {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

}



/* ==========================================================
   BIPOFY MOBILE V009R4
   BIPOMART CTA MATCH DESKTOP
   ========================================================== */

@media (max-width:760px) {

  .bph2 .bipomart-copy .btn,
  .bph2 .bipomart-copy .btn-light {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;

    height: 46px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 20px !important;

    border: 1px solid rgba(15, 55, 47, .24) !important;
    border-radius: 4px !important;

    background: #fff !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 600 !important;

    white-space: nowrap !important;
  }

  /*
   * Existing markup has inline margin-top:16px
   * on the button wrapper. Keep desktop-like spacing.
   */
  .bph2 .bipomart-copy > div:has(.btn) {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
  }

}



/* ==========================================================
   BIPOFY MOBILE V009R5
   GUIDES SECTION — FULL MOBILE RESPONSIVE
   ========================================================== */

@media (max-width:760px) {

  /* --------------------------------------------------------
     GUIDES SECTION
     -------------------------------------------------------- */

  .bph2 .guides,
  .bph2 .guides-section,
  .bph2 section:has(.guide-card) {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
    overflow: hidden !important;
  }


  /* --------------------------------------------------------
     SECTION HEADER
     -------------------------------------------------------- */

  .bph2 .guides .section-head,
  .bph2 .guides-section .section-head,
  .bph2 section:has(.guide-card) .section-head {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 14px !important;
    padding: 0 !important;

    text-align: center !important;
  }

  .bph2 .guides .eyebrow,
  .bph2 .guides-section .eyebrow,
  .bph2 section:has(.guide-card) .eyebrow {
    margin-bottom: 8px !important;
  }

  .bph2 .guides h2,
  .bph2 .guides-section h2,
  .bph2 section:has(.guide-card) h2 {
    width: 100% !important;

    margin: 0 0 6px !important;

    font-size: 23px !important;
    line-height: 1.16 !important;
    letter-spacing: -0.028em !important;

    text-align: center !important;
  }

  .bph2 .guides .section-head p,
  .bph2 .guides-section .section-head p,
  .bph2 section:has(.guide-card) .section-head p {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    font-size: 12.5px !important;
    line-height: 1.45 !important;

    text-align: center !important;
  }


  /* --------------------------------------------------------
     REMOVE OLD HORIZONTAL SWIPE BEHAVIOUR
     -------------------------------------------------------- */

  .bph2 .guides-grid,
  .bph2 .guide-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;

    width: 100% !important;
    max-width: none !important;

    gap: 9px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    overflow-x: visible !important;

    scroll-snap-type: none !important;
  }


  /* --------------------------------------------------------
     FULL-WIDTH GUIDE CARDS
     -------------------------------------------------------- */

  .bph2 .guide-card {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 0 !important;

    flex: none !important;

    margin: 0 !important;
    padding: 14px !important;

    border: 1px solid #dfeae6 !important;
    border-radius: 7px !important;

    background: #fff !important;

    box-shadow:
      0 3px 12px rgba(7,42,32,.035) !important;

    scroll-snap-align: none !important;
  }


  /* CARD LABEL */

  .bph2 .guide-card .eyebrow,
  .bph2 .guide-card > span:first-child {
    align-self: flex-start !important;

    margin: 0 0 7px !important;
  }


  /* CARD TITLE */

  .bph2 .guide-card h3 {
    width: 100% !important;

    margin: 0 0 6px !important;

    font-size: 15px !important;
    line-height: 1.28 !important;
    letter-spacing: -0.012em !important;

    overflow-wrap: anywhere !important;
  }


  /* CARD COPY */

  .bph2 .guide-card p {
    width: 100% !important;

    margin: 0 0 10px !important;

    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }


  /* CARD LINK */

  .bph2 .guide-card a {
    display: inline-flex !important;
    align-items: center !important;

    align-self: flex-start !important;

    margin-top: auto !important;

    font-size: 12.5px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;

    white-space: normal !important;
  }

}


@media (max-width:430px) {

  .bph2 .guides,
  .bph2 .guides-section,
  .bph2 section:has(.guide-card) {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .bph2 .guides h2,
  .bph2 .guides-section h2,
  .bph2 section:has(.guide-card) h2 {
    font-size: 22px !important;
  }

  .bph2 .guide-card {
    padding: 13px !important;
  }

  .bph2 .guide-card h3 {
    font-size: 14.5px !important;
  }

}



/* ==========================================================
   BIPOFY HOMEPAGE BLOG V010
   MOBILE
   ========================================================== */

@media (max-width:760px) {

  .bph-blog-v010 {
    padding: 28px 0 30px !important;
  }

  .bph-blog-v010 .wrap {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  .bph-blog-v010-head {
    display: block !important;

    margin-bottom: 16px !important;
  }

  .bph-blog-v010-copy {
    max-width: none !important;

    text-align: left !important;
  }

  .bph-blog-v010-kicker {
    margin-bottom: 8px !important;

    padding: 5px 7px !important;

    font-size: 9px !important;
  }

  .bph-blog-v010 h2 {
    margin: 0 !important;

    font-size: 24px !important;
    line-height: 1.12 !important;
    letter-spacing: -.03em !important;
  }

  .bph-blog-v010-intro {
    margin-top: 7px !important;

    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  .bph-blog-v010-all {
    min-height: 38px !important;

    margin-top: 12px !important;
    padding: 0 13px !important;

    font-size: 12px !important;
  }

  .bph-blog-v010-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;

    gap: 9px !important;
  }

  .bph-blog-v010-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    padding: 15px !important;

    border-radius: 6px !important;

    box-shadow:
      0 4px 15px rgba(12,50,40,.04) !important;
  }

  .bph-blog-v010-meta {
    margin-bottom: 12px !important;
  }

  .bph-blog-v010-tag {
    min-height: 23px !important;

    padding: 0 7px !important;

    font-size: 8.5px !important;
  }

  .bph-blog-v010-index {
    font-size: 10px !important;
  }

  .bph-blog-v010-card h3 {
    margin-bottom: 6px !important;

    font-size: 15px !important;
    line-height: 1.27 !important;
  }

  .bph-blog-v010-card p {
    margin-bottom: 12px !important;

    font-size: 12px !important;
    line-height: 1.48 !important;
  }

  .bph-blog-v010-link {
    font-size: 12px !important;
  }

}


@media (max-width:380px) {

  .bph-blog-v010 .wrap {
    margin-left: 11px !important;
    margin-right: 11px !important;
  }

  .bph-blog-v010 h2 {
    font-size: 23px !important;
  }

}