/* === Global overflow safety net (must come first) === */
html,body{overflow-x:hidden!important;max-width:100%;width:100%}
*,*::before,*::after{min-width:0}
.bu-container,.bu-section,header,footer,main,section{max-width:100%}
/* Media scaling — SVG is intentionally excluded here: inline icons keep the
   size their own CSS/attributes set. Forcing height:auto on <svg> makes any
   width-only icon rule blow up to full width. */
img,video,iframe,table{max-width:100%;height:auto}
/* absolutely-positioned hero decorations must never widen the page */
.bu-hero{overflow:hidden}
.bu-hero__visual{position:relative;max-width:100%}

/* ============================================================
   BrandUp — responsive.css
   Desktop-leaning base is tightened down the stack here.
   Breakpoints: 1200 / 1024 / 900 / 768 / 600 / 480 / 380 / 340
   Goal: zero horizontal overflow, comfortable tap targets,
   readable type, and no decorative element escaping the viewport.
   ============================================================ */

/* Global safety: nothing may cause sideways scroll */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%}
/* Absolute safety net: an inline icon SVG with no explicit size must never
   grow past a normal icon box. Real icon rules (higher specificity) still win. */
svg:not([width]){width:1.25rem;height:1.25rem}
.bu-container{width:min(92%,var(--bu-maxw))}

/* ---------- ≤1200 ---------- */
@media (max-width:1200px){
  .bu-flow{grid-template-columns:repeat(4,1fr)}
}

/* ---------- ≤1024 : tablet ---------- */
@media (max-width:1024px){
  .bu-hero__grid{grid-template-columns:1fr;gap:44px}
  .bu-hero__visual{max-width:520px;margin-inline:auto;width:100%}
  .bu-steps-row{grid-template-columns:repeat(4,1fr)}
  .bu-steps--4{grid-template-columns:repeat(2,1fr)}
  .bu-ugc__grid{grid-template-columns:1fr;gap:36px}
  .bu-ugc__copy .bu-h2{text-align:center}
  .bu-ugc__points{max-width:460px;margin-inline:auto}
  .bu-footer__grid{grid-template-columns:1fr 1fr}
  .bu-payment__grid{grid-template-columns:minmax(200px,280px) 1fr;gap:36px}
}

/* ---------- ≤900 : collapse 3-col cards to 2 ---------- */
@media (max-width:900px){
  .bu-grid--3{grid-template-columns:repeat(2,1fr)}
  .bu-flow{grid-template-columns:repeat(3,1fr)}
}

/* ---------- ≤768 : phones (primary mobile layout) ---------- */
@media (max-width:768px){
  /* Header → burger */
  .bu-nav{display:none}
  .bu-burger{display:inline-flex}
  .bu-header__inner{padding:12px 0}
  .bu-header .bu-btn--gold{--pad-y:11px;--pad-x:18px;font-size:.9rem}
  .bu-logo{font-size:1.2rem}
  .bu-logo img{max-height:38px}
  .bu-topbar{font-size:.78rem}
  .bu-topbar__inner{min-height:36px;padding:5px 10px}

  /* Stacks */
  .bu-grid--3,.bu-grid--2,.bu-pkgs,.bu-compare,.bu-steps3,.bu-steps{grid-template-columns:1fr}
  .bu-steps--4{grid-template-columns:1fr 1fr}
  .bu-flow,.bu-steps-row{grid-template-columns:repeat(2,1fr)}
  .bu-form-grid,.bu-form__row{grid-template-columns:1fr}
  .bu-payment__grid{grid-template-columns:1fr;gap:28px}
  .bu-footer__grid{grid-template-columns:1fr;gap:26px}
  .bu-footer a{padding:8px 0;display:inline-block}

  /* Hero order on mobile: title → text → buttons → visual (DOM already does this) */
  .bu-hero{padding-block:28px var(--bu-sect-y)}
  .bu-hero__pill{margin-bottom:14px}

  /* Section rhythm a touch tighter */
  :root{--bu-sect-y:clamp(52px,11vw,80px)}

  /* Hero: keep the mockup, tame the floating decorations so they
     never push past the screen edge (was the main "broken" cause) */
  .bu-hero{padding-block:40px var(--bu-sect-y)}
  .bu-hero__visual{max-width:460px;padding-bottom:34px} /* room for the order card */
  .bu-order-card{inset-inline-end:6px;bottom:-10px;width:min(72%,240px);padding:12px 14px}
  .bu-badge-20{inset-inline-start:6px;top:12px;padding:8px 12px}
  .bu-badge-20 b{font-size:1.25rem}
  .bu-mock__body{padding:16px;gap:10px}

  /* Buttons go full-ish width and wrap cleanly */
  .bu-hero__cta{gap:12px}
  .bu-hero__cta .bu-btn{flex:1 1 100%;min-width:0}
  .bu-form__actions{flex-direction:column}
  .bu-form__actions .bu-btn{width:100%;min-width:0}

  /* Show the sticky mobile CTA, lift the floating WhatsApp above it */
  .bu-mobile-cta{display:flex}
  .bu-wa-float{inset-block-end:82px}
  body{padding-block-end:0}

  /* Payment big number: center the block, don't let it overflow */
  .bu-payment__num{padding:30px 20px}

  /* Comparison + cards breathing room */
  .bu-compare__col{padding:22px}
  .bu-card{padding:22px}
  .bu-pkg{padding:26px}
}

/* ---------- ≤600 : small phones ---------- */
@media (max-width:600px){
  .bu-flow,.bu-steps-row{grid-template-columns:1fr 1fr}
  .bu-trustbar__grid{gap:12px 22px;padding-block:20px}
  .bu-trustbar__item{font-size:.88rem}
  .bu-h2{font-size:clamp(1.5rem,6.5vw,2rem)}
  .bu-hero h1,.bu-h1{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  .bu-hero__sub{font-size:1.05rem}
}

/* ---------- ≤480 : narrow ---------- */
@media (max-width:480px){
  .bu-steps--4{grid-template-columns:1fr}
  .bu-pf-card__actions .bu-btn{min-width:100%}
  .bu-order-card{inset-inline-end:0;width:min(80%,220px)}
  .bu-badge-20{inset-inline-start:0}
  .bu-hero__cta .bu-btn{min-width:100%}
  .bu-pf-filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .bu-pf-filter{white-space:nowrap}
  .bu-mock__body{grid-template-columns:repeat(3,1fr)}
  .bu-payment__big{font-size:clamp(3.6rem,20vw,5rem)}
  .bu-mobile-cta .bu-btn{--pad-y:12px;font-size:.9rem}
  .bu-container{width:92%}
}

/* ---------- ≤380 : very small ---------- */
@media (max-width:380px){
  :root{--bu-sect-y:48px}
  .bu-pkg,.bu-form,.bu-form-wrap{padding:20px}
  .bu-flow,.bu-steps-row{grid-template-columns:1fr}
  .bu-logo{font-size:1.08rem}
  .bu-order-card{width:78%}
  .bu-hero h1,.bu-h1{font-size:clamp(1.75rem,9vw,2.2rem)}
}

/* ---------- ≤340 : tiny (keep mockup from cramping) ---------- */
@media (max-width:340px){
  .bu-mock__body{grid-template-columns:repeat(2,1fr)}
  .bu-hero__cta{gap:10px}
}