/* One lightweight device shell for every website phone. App pixels and timing stay intact. */
.phone,.hero-phone-showcase .phone,.demo-tour-shell{
  position:relative;
  padding:4px;
  border:1px solid #a5aaa6;
  border-radius:32px;
  background:linear-gradient(110deg,#e9ebe8 0%,#a5aaa7 18%,#f4f5f2 48%,#a0a6a2 84%,#dfe2de 100%);
  box-shadow:0 2px 4px rgba(18,32,25,.12),0 12px 28px rgba(18,32,25,.13),inset 0 0 0 1px rgba(255,255,255,.8);
  margin-left:auto;margin-right:auto;
}
.phone::after,.demo-tour-shell::after{
  content:"";position:absolute;z-index:6;top:11px;left:50%;transform:translateX(-50%);
  width:22%;max-width:68px;height:8px;border-radius:999px;background:#101411;
  box-shadow:inset 0 1px 2px #000;pointer-events:none;
}
.phone .screen,.phone .screen.shot img,
.hero-phone-showcase .phone .screen.shot img,
.hero-phone-showcase .phone .screen.shot.hero-phone-slideshow>[data-hero-frame],
.hero-phone-showcase .hero-live-frame img,.hero-light-screen img,
.demo-tour-screen,.demo-tour-screen>[data-demo-frame],
.demo-monitoring-frame>img,.demo-monitoring-off-layer>img{border-radius:27px}
.hero-phone-showcase .hero-status-bar,.demo-tour-screen .hero-status-bar{border-radius:27px 27px 0 0}
.hero-phone-showcase{gap:24px}
.demo-tour-shell{width:min(100%,300px)}
@media(max-width:700px){
  .phone,.hero-phone-showcase .phone,.demo-tour-shell{border-radius:28px}
  .phone .screen,.phone .screen.shot img,
  .hero-phone-showcase .phone .screen.shot img,
  .hero-phone-showcase .phone .screen.shot.hero-phone-slideshow>[data-hero-frame],
  .hero-phone-showcase .hero-live-frame img,.hero-light-screen img,
  .demo-tour-screen,.demo-tour-screen>[data-demo-frame],
  .demo-monitoring-frame>img,.demo-monitoring-off-layer>img{border-radius:23px}
  .hero-phone-showcase .hero-status-bar,.demo-tour-screen .hero-status-bar{border-radius:23px 23px 0 0}
  .demo-tour-shell{width:min(72vw,280px)}
}