.HeroCardStackComponent{height:400px;perspective:800px}.HeroCardStackComponent.hasFaceplates .cardStackImage{visibility:hidden}.HeroCardStackComponent .faceplate{top:0;left:0;width:243px;border-bottom:2px solid #fff;border-radius:10px;background-color:#fff;filter:drop-shadow(0 10px 14px hsla(0,0%,0%,.28))}.HeroCardStackComponent .faceplate-1{width:255px;transform:translate(28.5%,10.8%) rotate(14.7deg) scale(1.01);z-index:3}.HeroCardStackComponent .faceplate-2{transform:translate(40.8%,79.3%) rotate(3.9deg) rotateX(56.4deg) rotateY(-12deg) scale(1.08);z-index:2;transform-origin:right center}.HeroCardStackComponent .faceplate-3{transform:translate(21.1%,136%) rotate(-5.5deg) rotateX(62.9deg) rotateY(14deg) scale(1.16);transform-origin:bottom;z-index:1}.HeroComboImageComponent{width:fit-content}.HeroComboImageComponent .HeroCardStackComponent{left:0;top:50%;transform:translate(-76%,-50%)}.HeroComboImageComponent .HeroPhoneComponent{transform:none}.HeroBannerComponent{background-color:hsla(var(--theme-color-primary-h),var(--theme-color-primary-s),var(--theme-color-primary-l),.32)}.HeroBannerComponent .heroSection{overflow:hidden}.HeroBannerComponent .heroSection .textContainer{padding:4rem 3rem}@media (max-width: 991.98px){.HeroBannerComponent .heroSection .textContainer{padding:2rem 1.5rem 200px}}.HeroBannerComponent .heroSection .textContainer h2{font-size:1.5rem!important}.HeroBannerComponent .heroSection .heroImage{position:absolute;top:50px;right:0}@media (min-width: 992px){.HeroBannerComponent .heroSection .heroImage.heroImageCardsOnly .HeroCardStackComponent{transform:scale(1.35);transform-origin:right top}}@media (max-width: 991.98px){.HeroBannerComponent .heroSection .heroImage{top:auto;right:auto;left:60%;bottom:-200px;transform:translate(-50%)}}.HeroBannerComponent .heroCtas .heroCtaLabel{font-size:.75rem}