/* Homepage hero device treatment.
   Keeps the existing homepage screenshots and only changes their presentation. */

.hp-hero-product{
  position:relative!important;
  min-width:0!important;
  padding:14px 44px 26px 0!important;
  overflow:visible!important;
}

/* Desktop screenshot presented as a laptop, matching the product UX used elsewhere.
   Keep the bezel deliberately tight so the real product screenshot fills the screen. */
.hp-hero-desktop{
  position:relative!important;
  overflow:visible!important;
  aspect-ratio:auto!important;
  padding:8px 5px 0!important;
  line-height:0!important;
  border:1px solid rgba(218,228,237,.42)!important;
  border-radius:22px 22px 13px 13px!important;
  background:linear-gradient(145deg,#192b39,#08131d 72%)!important;
  box-shadow:0 42px 95px -38px rgba(0,0,0,.9),0 0 70px -48px rgba(125,211,255,.8),inset 0 0 0 1px rgba(255,255,255,.025)!important;
}

.hp-hero-desktop:before{
  content:""!important;
  position:absolute!important;
  top:2px!important;
  left:50%!important;
  width:5px!important;
  height:5px!important;
  transform:translateX(-50%)!important;
  border-radius:50%!important;
  background:#24455a!important;
  box-shadow:0 0 0 1px rgba(125,211,255,.16)!important;
  inset:auto!important;
  z-index:5!important;
}

.hp-hero-desktop:after{
  content:"";
  position:absolute;
  left:-4.6%;
  right:-4.6%;
  bottom:-19px;
  height:19px;
  border-top:1px solid rgba(255,255,255,.16);
  border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,#2b3f4d,#0a151e 64%);
  box-shadow:0 8px 13px rgba(0,0,0,.4);
  z-index:0;
}

/* Use the screenshot's natural ratio and let it run directly to the lower bezel.
   This removes the unused dark strip that previously sat below the desktop UI. */
.hp-hero-desktop .hp-shot{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:auto!important;
  display:block!important;
  object-fit:initial!important;
  object-position:initial!important;
  border-radius:13px 13px 10px 10px!important;
  background:#06131e!important;
  margin:0!important;
}

/* Small centre notch on the laptop base. */
.hp-hero-product:after{
  content:"";
  position:absolute;
  left:calc(50% - 43px);
  bottom:7px;
  width:86px;
  height:5px;
  border-radius:0 0 7px 7px;
  background:rgba(210,220,230,.24);
  z-index:3;
  pointer-events:none;
}

/* Mobile screenshot presented as a slim phone rather than a floating rectangle. */
.hp-hero-mobile{
  position:absolute!important;
  width:24%!important;
  right:0!important;
  bottom:0!important;
  z-index:6!important;
  overflow:visible!important;
  padding:18px 5px 17px!important;
  border:2px solid rgba(218,228,237,.52)!important;
  border-radius:34px!important;
  background:linear-gradient(145deg,#111b23,#03080c 74%)!important;
  box-shadow:0 34px 62px -24px rgba(0,0,0,.94),0 0 36px -20px rgba(92,200,255,.5),inset 0 0 0 1px rgba(255,255,255,.04)!important;
}

.hp-hero-mobile:before{
  content:"";
  position:absolute;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  width:44px;
  height:4px;
  border-radius:999px;
  background:#1d2a34;
  z-index:8;
}

.hp-hero-mobile:after{
  content:"";
  position:absolute;
  bottom:7px;
  left:50%;
  transform:translateX(-50%);
  width:48px;
  height:4px;
  border-radius:999px;
  background:rgba(220,230,238,.28);
  z-index:8;
}

.hp-hero-mobile img{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  display:block!important;
  border-radius:25px!important;
  background:#06131e!important;
}

@media(max-width:1080px){
  .hp-hero-product{
    max-width:820px!important;
    width:100%!important;
    padding-right:42px!important;
  }
  .hp-hero-mobile{width:23%!important}
}

@media(max-width:680px){
  .hp-hero-product{
    padding:10px 26px 22px 0!important;
  }
  .hp-hero-desktop{
    padding:6px 3px 0!important;
    border-radius:16px 16px 10px 10px!important;
  }
  .hp-hero-desktop:before{
    top:1px!important;
    width:4px!important;
    height:4px!important;
  }
  .hp-hero-desktop .hp-shot{border-radius:10px 10px 7px 7px!important}
  .hp-hero-desktop:after{
    bottom:-13px;
    height:13px;
  }
  .hp-hero-product:after{
    width:58px;
    left:calc(50% - 29px);
    bottom:5px;
    height:4px;
  }
  .hp-hero-mobile{
    width:29%!important;
    padding:12px 3px 11px!important;
    border-radius:22px!important;
  }
  .hp-hero-mobile:before{
    top:4px;
    width:28px;
    height:3px;
  }
  .hp-hero-mobile:after{
    bottom:4px;
    width:30px;
    height:3px;
  }
  .hp-hero-mobile img{border-radius:17px!important}
}