/* =====================================================================
   bnd landing page — media.css
   Responsive utilities + per-section stacking.
   Breakpoints mirror the source: 991 (tablet) / 767 (mobile) / 479 / 359
   ===================================================================== */

/* responsive show/hide utilities (used mostly on <br> + swapped blocks) */
.show-767,.show-479,.show-359{display:none}

@media (max-width:991px){
  .hide-tab{display:none}
  .hero__title{font-size:40px}
}

@media (max-width:767px){
  .hide-767{display:none}
  .show-767{display:revert}

  body{font-size:17px}
  .sec{padding:32px 0}
  .bdhding1{font-size:25px}
  .bdhding-xl{font-size:32px}
  .bdfont2{font-size:20px}
  .bdfont3{font-size:22px}

  /* hero stacks to single column */
  .hero{padding:32px 0 30px}
  .hero__title,.hero__bullets{max-width:100%}
  .hero__title{font-size:34px}

  /* floated section photos go full width */
  .float-right,.float-left{float:none;width:100%;margin:18px auto}

  /* multi-column blocks stack */
  .offer-box__feat{gap:6px}
  .securebx{flex-direction:column;text-align:center}
  .securebx .imgph{flex-basis:auto;width:160px;margin:0 auto}
  .giftbx__btm,.giftbx--flip .giftbx__btm{flex-direction:column;align-items:stretch}
  .giftbx__img{width:100%;flex-basis:auto;max-width:280px;margin:0 auto}
  .guarantee__box{flex-direction:column;text-align:center}
  .quiz__grid{grid-template-columns:repeat(2,1fr)}
  .optionhd{flex-direction:row}

  .offer-box__price{font-size:54px}

  /* new blocks: stack their columns */
  .case{flex-direction:column}
  .case__media{flex:0 0 auto;width:100%}
  .authorbio{flex-direction:column;text-align:center}
  .authorbio__media{flex-basis:auto;width:200px;margin:0 auto}
  .authorbio__creds{text-align:left}
  .herosplit{text-align:center}
  .herosplit .cta-btn{margin-left:auto}
  .herovsl__title,.heroletter__title,.herosplit__title{font-size:30px}
  .heroplain__title{font-size:36px}
  .statrow--single .stat__big{font-size:72px}
  .package--popular{transform:none}        /* don't lift when the tiers stack */
  .package{max-width:none}
  .expert{flex-direction:column;text-align:center}
  .expert__media{margin:0 auto;width:170px}
  .expert__quote::before{display:none}
  .casestudy--side .casestudy__media{float:none;width:100%;margin:0 0 14px}
  .casestudy__head{font-size:22px}
  .pullq--hand{font-size:25px}
  .pullq--mark p{font-size:21px}
}

@media (max-width:479px){
  .hide-479{display:none}
  .show-479{display:revert}

  .hero__title{font-size:29px}
  .bdhding1{font-size:22px}
  .bdhding-xl{font-size:27px}
  .quiz__opt{font-size:16px;padding:10px}
  .quiz__mark{font-size:22px;flex-basis:96px;padding-left:22px}
  .offer-box__btm{padding:18px}
  .offer-box__pricebx{padding:6px 44px}
  .offer-box__arw{font-size:30px}

  /* CTA dotted points → stack vertically on small screens */
  .cta__points{flex-direction:column;gap:9px}
  .cta__points li:not(:first-child)::before{display:none}
  .cta--bar{text-align:center}
  .cta--bar .cta__bar-main{justify-content:center}
  .cta--bar .cta-btn{width:100%}

  /* before/after pairs stack with a downward arrow */
  .ba{flex-direction:column;text-align:center;gap:8px}
  .ba__arrow{transform:rotate(90deg)}
  .ba--head{display:none}                 /* hide the Without/With header row when stacked */
  .timeline__step{grid-template-columns:84px 1fr;gap:14px}
  .timeline__step:not(:last-child)::before{left:42px}
  .heroplain__title{font-size:30px}
  .statrow--single .stat__big{font-size:58px}
}

@media (max-width:359px){
  .hide-359{display:none}
  .show-359{display:revert}
}