/* =====================================================================
   BANIXO — RESPONSIVE OVERRIDES
   Breakpoints follow Bootstrap 5: xl<1200, lg<992, md<768, sm<576
   ===================================================================== */

/* ---------- ≤1200px ---------- */
@media (max-width: 1199.98px){
  .showcase-grid{grid-template-columns:repeat(3,1fr);}
}

/* ---------- ≤991.98px (tablet) ----------
   Checkout columns stack full-width below lg, so sliding them in from
   the left/right no longer makes visual sense — fall back to the
   standard upward reveal used everywhere else. */
@media (max-width: 991.98px){
  [data-reveal-left], [data-reveal-right]{transform:translate3d(0,26px,0);}

  .hero{padding:50px 0 40px;}
  .hero h1{font-size:2.1rem;}
  .hero-visual{margin-top:36px;}
  .sec-title{font-size:1.75rem;}
  .section{padding:60px 0;}
  .showcase-grid{grid-template-columns:repeat(3,1fr); gap:12px;}
  .order-summary-card{position:static; margin-top:24px;}
  .pc-feature-grid{grid-template-columns:1fr;}
  .community-feature{padding:16px 10px;}
  .final-cta2 h2{font-size:1.7rem;}
  .footer-brand p{max-width:none;}
}

/* ---------- ≤767.98px (mobile) ----------
   Shorter travel distance + faster duration for reveal/entrance
   animations on small screens, per the "reduce distance and duration
   on mobile" requirement. */
@media (max-width: 767.98px){
  [data-reveal]{transform:translate3d(0,18px,0); transition-duration:.5s;}
  [data-reveal-group] > *{transform:translate3d(0,16px,0); transition-duration:.45s;}
  [data-reveal-left], [data-reveal-right]{transform:translate3d(0,18px,0); transition-duration:.5s;}

  .announce-bar{font-size:.72rem; padding:7px 10px;}
  .hero h1{font-size:1.7rem; line-height:1.35;}
  .hero-sub{font-size:.95rem;}
  .hero-badge{font-size:.72rem;}
  .showcase-grid{grid-template-columns:repeat(2,1fr);}
  .pkg-card{padding:24px 20px;}
  .pricing-card2 .pc-head{padding:22px 22px;}
  .pricing-card2 .pc-body{padding:24px 22px;}
  .pc-new-price{font-size:2.4rem;}
  .guarantee-box{padding:32px 22px;}
  .story-quote p{font-size:1.08rem;}
  .checkout-panel{padding:24px 20px;}
  .order-summary-card{padding:22px 22px;}
  .faq-a-inner{padding-left:22px;}
  .mobile-sticky-cta{display:flex;}
  body{padding-bottom:64px;} /* space for sticky mobile CTA */
  .back-to-top{bottom:78px;}
  .final-cta2 h2{font-size:1.5rem;}
  .final-cta2{padding:50px 0;}
  .community-highlight{padding:20px 18px;}
}

/* ---------- ≤575.98px (small mobile) ---------- */
@media (max-width: 575.98px){
  .showcase-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .stat-item .num{font-size:1.6rem;}
  .hero-points li{font-size:.86rem;}
  .brand-mark img{height:32px;}
  .brand-name{font-size:1.05rem;}
  .pc-new-price{font-size:2.1rem;}
  .recent-order-toast{left:10px; right:10px; max-width:none;}
}