/* White cloud divider with a transparent upper area over the blue grid. */
.home-header-overlay>.ys-header{position:absolute;top:0;left:0;width:100%}
.home-header-overlay .hero{padding-top:var(--home-header-height,82px)}
.hero{
  background-color:#e5f2f9;
  background-image:linear-gradient(rgba(44,112,153,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(44,112,153,.065) 1px,transparent 1px),radial-gradient(ellipse at 76% 37%,#d1e8f5 0,transparent 63%),linear-gradient(135deg,#f4f9fc,#dfedf6);
  background-size:2mm 2mm,2mm 2mm,100% 100%,100% 100%;
  background-position:center top;
}
.hero:before{display:none}
.hero-grid{padding-bottom:150px}
.section-waterline{
  height:clamp(170px,22vw,310px);
  margin-top:clamp(-310px,-22vw,-170px);
  position:relative;
  z-index:3;
  background: url('hero-clouds-user.png') center bottom / 100% 100% no-repeat;
  clip-path:none;
  pointer-events:none;
}
.section-waterline:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:28px;background:linear-gradient(transparent,var(--paper));pointer-events:none}
@media(max-width:700px){
  .hero{background-size:2mm 2mm,2mm 2mm,100% 100%,100% 100%}
  .hero-grid{padding-bottom:105px}
  .section-waterline{height:150px;margin-top:-150px;background-size:180% 100%}
}