/* Compact first screen of WEBSAN, remove excess empty transition spaces */
@media (min-width:801px){
  .hero-layout{
    min-height:0;
    padding:20px 0 13px;
    align-items:start;
    gap:30px;
  }
  .hero-copy{padding:16px 0 0}
  .hero .eyebrow{margin-bottom:18px}
  .hero .lead{margin-top:19px;margin-bottom:22px}
  .hero-benefits{margin-top:23px}
  .hero-visual{padding:12px 0 5px;align-self:start}
  .hero-switcher{margin-top:17px}
  #products{padding-top:54px}
}
@media (max-width:800px){
  .hero-layout{padding-top:26px;padding-bottom:15px}
  #products{padding-top:55px}
}
@media (max-width:540px){
  .hero-layout{padding-top:22px;padding-bottom:12px}
  #products{padding-top:44px}
}

/* Hero preview navigation: the full preview stays visible; arrows move to sides. */
.hero-carousel{position:relative;z-index:2;width:100%;min-width:0}
.hero-carousel>.mockup-frame{width:100%}
.hero-side-arrow{
  position:absolute;
  z-index:10;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid #d2dff0;
  background:rgba(255,255,255,.96);
  color:#203c63;
  box-shadow:0 8px 22px #193d7240;
  font-size:22px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  transition:background-color .2s,color .2s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.hero-side-arrow--prev{left:-23px}
.hero-side-arrow--next{right:-23px}
.hero-side-arrow:hover{background:#eaf3ff;color:#2868e5;box-shadow:0 11px 25px #193d7250}
.hero-side-arrow:focus-visible{outline:3px solid #1fc1cf;outline-offset:3px}
.hero-switcher{display:none!important}
@media(max-width:800px){
 .hero-side-arrow{width:42px;height:42px;font-size:20px}
 .hero-side-arrow--prev{left:5px}
 .hero-side-arrow--next{right:5px}
}
@media(max-width:540px){
 .hero-side-arrow{width:38px;height:38px;font-size:18px;background:rgba(255,255,255,.93);box-shadow:0 5px 17px #193d723d}
 .hero-side-arrow--prev{left:3px}
 .hero-side-arrow--next{right:3px}
}