.product-intro{position:relative;isolation:isolate;overflow:clip;background:#f1faf7}
.product-intro::before,.product-intro::after{content:"";position:absolute;top:0;bottom:0;z-index:-1;transform:skewX(-9deg);transform-origin:top left;pointer-events:none}
.product-intro::before{left:-6%;width:54%;background:#3eceb6}
.product-intro::after{left:48%;width:3%;background:#3eceb633}
.product-showcases{overflow:clip}
.product-section-nav a{position:relative}
.product-section-nav a::after{content:"";position:absolute;bottom:0;left:10px;right:10px;height:2px;background:#087d6b;transform:scaleX(0);transform-origin:center}
.product-section-nav a:hover::after,.product-section-nav a:focus-visible::after{transform:scaleX(1)}
@media(prefers-reduced-motion:no-preference){
  .product-intro::before{animation:product-panel-enter .8s cubic-bezier(.2,.7,.2,1) both}
  .product-intro::after{animation:product-panel-enter .9s .08s cubic-bezier(.2,.7,.2,1) both}
  .product-section-nav a::after{transition:transform .22s ease}
  .product-intro .button .inline-arrow{transition:transform .2s ease}
  .product-intro .button:hover .inline-arrow,.product-intro .button:focus-visible .inline-arrow{transform:translateX(4px)}
  @media(hover:hover) and (pointer:fine){
    .product-module{transition:border-color .25s ease,background-color .25s ease}
    .product-module:hover{border-color:#087d6b;background-color:#e6f7f1}
    .showcase-images img{transition:transform .25s ease}
    .showcase-images a:hover img{transform:translateY(-4px)}
  }
}
@keyframes product-panel-enter{
  from{opacity:0;transform:translateX(-10%) skewX(-9deg) scaleX(.85)}
  to{opacity:1;transform:translateX(0) skewX(-9deg) scaleX(1)}
}
@media(max-width:700px){
  .product-intro{background:#3eceb6}
  .product-intro::before,.product-intro::after{display:none}
}