/* MUTTI LAB v9.5.227 — Stage284 Cashback Media Composite
   PURPOSE: replace failed browser-side person/arm composition with a controlled
   media composite made from approved assets. Stage279 remains the sole curtain owner.
   Desktop geometry remains exactly 236px high.

   Layer order:
   1) precomposed lifestyle raster: approved gradient/city background + person/arm scene;
   2) approved clean PNG MUTTI BONUS card as a separate crisp overlay;
   3) live HTML copy/CTA above the artwork.
*/

@media (min-width:1025px){
  html body.home.mutti-stage284-cashback-media-composite .mutti-bonus-card-v275{
    min-height:236px!important;
    height:236px!important;
    overflow:hidden!important;
    border-radius:30px 30px 0 0!important;
    background:#07091f!important;
  }

  html body.home.mutti-stage284-cashback-media-composite .mutti-bonus-card-v275__inner{
    min-height:236px!important;
    height:236px!important;
    position:relative!important;
  }

  /* One deterministic 1280×236 lifestyle scene. No browser-side body/arm scaling. */
  html body.home.mutti-stage284-cashback-media-composite .mutti-bonus-card-v280__art{
    position:absolute!important;
    z-index:5!important;
    inset:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
    display:block!important;
    background-image:url('cashback-v284/master-lifestyle-v284.png')!important;
    background-repeat:no-repeat!important;
    background-size:1280px 236px!important;
    background-position:center center!important;
  }

  /* Retire every Stage280–283 child art layer. */
  html body.home.mutti-stage284-cashback-media-composite .mutti-bonus-card-v280__art > img{
    display:none!important;
  }

  /* Approved clean PNG card remains a separate razor-sharp overlay. */
  html body.home.mutti-stage284-cashback-media-composite .mutti-bonus-card-v280__art::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:8!important;
    width:380px!important;
    height:232px!important;
    left:calc(50% - 220px)!important;
    top:2px!important;
    background:url('cashback-v284/card-clean-v284.png') center center/contain no-repeat!important;
    filter:drop-shadow(0 13px 18px rgba(0,0,0,.22))!important;
    pointer-events:none!important;
  }

  /* Live copy stays exactly as HTML and always wins the stacking context. */
  html body.home.mutti-stage284-cashback-media-composite .mutti-bonus-card-v275__copy{
    position:relative!important;
    z-index:20!important;
  }
}

/* On narrower desktop preserve aspect and crop only the copy-safe dark edges rather than
   squashing the person/card. The scene remains centered at its canonical 1280×236 size. */
@media (min-width:1025px) and (max-width:1199px){
  html body.home.mutti-stage284-cashback-media-composite .mutti-bonus-card-v280__art{
    background-size:1280px 236px!important;
    background-position:center center!important;
  }
  html body.home.mutti-stage284-cashback-media-composite .mutti-bonus-card-v280__art::after{
    left:calc(50% - 220px)!important;
  }
}

/* Tablet/mobile keep the established safe fallback. */
@media (max-width:1024px){
  html body.home.mutti-stage284-cashback-media-composite .mutti-bonus-card-v280__art{
    background-image:none!important;
  }
  html body.home.mutti-stage284-cashback-media-composite .mutti-bonus-card-v280__art::after{
    display:none!important;
    content:none!important;
  }
}