/* Kivoo mascot artwork v7: use original transparent PNGs, no canvas clipping. */
.hero-mascot img,
.feature-promo img,
.last-inner > img {
  object-fit:contain;
  mix-blend-mode:normal;
  image-rendering:auto;
}
@media (max-width:650px) {
  .hero-copy { min-height:605px; }
  .mascot-space {
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:291px!important;
    width:min(430px,100vw)!important;
    height:302px!important;
    margin:0!important;
    transform:translateX(-50%)!important;
    transform-origin:center top!important;
    scale:1!important;
  }
  .hero-mascot {
    left:50%!important;
    top:-8px!important;
    width:min(240px,60vw)!important;
    translate:-50% 0!important;
    transform-origin:center center!important;
  }
  .mascot-space .halo {
    left:50%!important;
    top:5%!important;
    width:min(315px,83vw)!important;
    translate:-50% 0!important;
  }
  .mascot-space .halo2 {
    left:50%!important;
    top:12%!important;
    width:min(267px,73vw)!important;
    translate:-50% 0!important;
  }
  .mascot-space .c1 { left:2%!important;top:69px!important; }
  .mascot-space .c2 { right:2%!important;top:222px!important; }
}
@media (max-width:365px) {
  .hero-copy {min-height:575px;}
  .mascot-space {top:283px!important;height:292px!important;}
  .hero-mascot {width:min(215px,60vw)!important;}
  .mascot-space .c1,.mascot-space .c2 {font-size:9px;padding:9px;}
}

/* Mobile v8: mascot is centered in normal document flow and starts below copy. */
@media (max-width:650px) {
  .hero-copy {min-height:0!important;}
  .mascot-space {position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;scale:1!important;margin:clamp(25px,5vw,37px) auto 0!important;width:min(100%,430px)!important;height:346px!important;transform-origin:center top!important;}
  .hero-mascot {left:50%!important;top:15px!important;width:min(235px,61vw)!important;translate:-50% 0!important;transform-origin:center center!important;}
  .mascot-space .halo {left:50%!important;top:4%!important;translate:-50% 0!important;width:min(315px,83vw)!important;}
  .mascot-space .halo2 {left:50%!important;top:10%!important;translate:-50% 0!important;width:min(267px,73vw)!important;}
  .mascot-space .c1 {left:0!important;top:71px!important;}
  .mascot-space .c2 {right:0!important;top:218px!important;}
  .wizard-outer {position:relative;z-index:6;}
}
@media (max-width:365px) {
  .hero-copy {min-height:0!important;}
  .mascot-space {top:auto!important;height:325px!important;}
  .hero-mascot {width:min(215px,62vw)!important;top:13px!important;}
  .mascot-space .c1,.mascot-space .c2 {font-size:9px!important;padding:9px!important;}
}


/* Mobile v14: final hero composition — centered below copy, with breathing room. */
@media (max-width:650px) {
  .hero-copy { min-height:0!important; }

  .mascot-space {
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    scale:1!important;
    margin:clamp(34px,8vw,46px) auto 0!important;
    width:min(100%,430px)!important;
    height:390px!important;
    overflow:visible!important;
    transform-origin:center top!important;
  }

  .hero-mascot {
    left:50%!important;
    top:14px!important;
    width:min(255px,68vw)!important;
    translate:-50% 0!important;
    transform-origin:center center!important;
  }

  .mascot-space .halo {
    left:50%!important;
    top:6%!important;
    translate:-50% 0!important;
    width:min(335px,86vw)!important;
  }

  .mascot-space .halo2 {
    left:50%!important;
    top:12%!important;
    translate:-50% 0!important;
    width:min(285px,76vw)!important;
  }

  .mascot-space .c1 { left:1%!important; top:76px!important; }
  .mascot-space .c2 { right:1%!important; top:240px!important; }

  .wizard-outer { position:relative; z-index:6; }
}

@media (max-width:365px) {
  .mascot-space {
    margin-top:32px!important;
    height:360px!important;
  }

  .hero-mascot {
    width:min(228px,66vw)!important;
    top:16px!important;
  }

  .mascot-space .c1 { top:72px!important; }
  .mascot-space .c2 { top:225px!important; }
}


/* Desktop v19: mascot fills the left hero area without overlapping the step labels. */
@media (min-width:901px) {
  .mascot-space {
    margin-top:15px!important;
    height:710px!important;
    overflow:visible!important;
  }

  .hero-mascot {
    left:50%!important;
    top:0!important;
    width:min(560px,47vw)!important;
    translate:-50% 0!important;
  }

  .mascot-space .halo {
    left:50%!important;
    top:4%!important;
    width:min(690px,57vw)!important;
    translate:-50% 0!important;
  }

  .mascot-space .halo2 {
    left:50%!important;
    top:11%!important;
    width:min(580px,48vw)!important;
    translate:-50% 0!important;
  }

  .mascot-space .c1 {
    left:2%!important;
    top:145px!important;
  }

  .mascot-space .c2 {
    right:1%!important;
    top:330px!important;
  }
}

@media (min-width:651px) and (max-width:900px) {
  .mascot-space {
    margin-top:120px!important;
    height:420px!important;
  }

  .hero-mascot {
    left:50%!important;
    top:0!important;
    width:min(350px,42vw)!important;
    translate:-50% 0!important;
  }
}


/* Mobile v23: hard viewport-safe inset for What's Next mascot.
   The bulb remains attached to the original mascot artwork and follows it. */
@media (max-width:650px) {
  .last-inner {
    overflow:hidden!important;
  }

  .last-inner > img {
    left:auto!important;
    right:2vw!important;
    width:min(292px,43vw)!important;
    max-width:none!important;
    transform:translateY(22%) scale(1)!important;
    transform-origin:center bottom!important;
  }
}

@media (max-width:365px) {
  .last-inner > img {
    right:2vw!important;
    width:min(258px,45vw)!important;
    transform:translateY(20%) scale(1)!important;
  }
}