/* A bounded composition on wide screens; a complete scene below copy on mobile. */
html body[data-page] #voiceHero,
html body[data-page] section.hero.inner-hero:has(.collection-hero-scene){
 display:block;position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;
 background:linear-gradient(120deg,#f0eaf7,#f5f6f7 55%,#eaedf6);
 min-height:650px;padding:178px 0 90px;
}
html body[data-page] #voiceHero>.container,
html body[data-page] section.hero.inner-hero:has(.collection-hero-scene)>.container{
 position:relative;z-index:2;width:calc(100% - 64px);max-width:1300px;margin-inline:auto;padding-inline:0;
}
html body[data-page] #voiceHero .hero-copy,
html body[data-page] section.hero.inner-hero:has(.collection-hero-scene) .hero-copy{
 width:56%;max-width:none;text-align:left;
}
html body[data-page] #voiceHero h1,
html body[data-page] section.hero.inner-hero:has(.collection-hero-scene) h1{
 max-width:100%;font-size:clamp(32px,3vw,48px);line-height:1.2;white-space:normal;overflow-wrap:break-word;
}
html body[data-page] #voiceHero:after,
html body[data-page] #voiceHero :is(.voice-hero-scene,.voice-hero-wave-desktop,.product-illustration,.product-scene-hover),
html body[data-page] .collection-hero-background{display:none}
html body[data-page] #voiceHero .voice-responsive-art,
html body[data-page] section.hero.inner-hero .collection-hero-scene{
 position:absolute;z-index:1;left:auto;right:max(0px,calc((100% - 1500px)/2));top:auto;bottom:0;
 width:min(46%,700px);height:auto;max-width:none;margin:0;pointer-events:none;mix-blend-mode:normal;
 mask-image:linear-gradient(to right,transparent,#000 8%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 10%);mask-composite:intersect;
}
html body[data-page] .collection-hero-scene svg,
html body[data-page] .voice-responsive-art svg{display:block;position:static;width:100%;height:auto;max-width:100%;transform:none}
@media(max-width:1100px){
 html body[data-page] #voiceHero,
 html body[data-page] section.hero.inner-hero:has(.collection-hero-scene){min-height:0;padding:150px 0 0}
 html body[data-page] #voiceHero .hero-copy,
 html body[data-page] section.hero.inner-hero:has(.collection-hero-scene) .hero-copy{width:100%;max-width:760px}
 html body[data-page] #voiceHero .voice-responsive-art,
 html body[data-page] section.hero.inner-hero .collection-hero-scene{position:relative;inset:auto;width:min(100%,640px);height:auto;margin:32px auto 0}
}
@media(max-width:560px){
 html body[data-page] #voiceHero,
 html body[data-page] section.hero.inner-hero:has(.collection-hero-scene){padding-top:120px}
 html body[data-page] #voiceHero>.container,
 html body[data-page] section.hero.inner-hero:has(.collection-hero-scene)>.container{width:calc(100% - 40px)}
 html body[data-page] #voiceHero .voice-hero-actions,
 html body[data-page] section.hero.inner-hero:has(.collection-hero-scene) .cta-row{flex-wrap:wrap;gap:12px}
 html body[data-page] #voiceHero .voice-responsive-art,
 html body[data-page] section.hero.inner-hero .collection-hero-scene{margin-top:24px}
}

/* Figma 906:13417 (left) and 906:13416 (right), across a 2142px composition. */
html body[data-page] #voiceHero .product-hero-edge-gradients,
html body[data-page] section.hero.inner-hero .solution-hero-edge-gradients{
 position:absolute;inset:0;z-index:1;pointer-events:none;
 background-image:linear-gradient(91.93196962757433deg,rgb(237,224,247) 5.982%,rgba(237,224,247,0) 98.498%),linear-gradient(93.00904850854128deg,rgba(245,245,247,0) 5.982%,rgb(245,245,247) 98.498%);
 background-position:left top,right top;
 background-size:31.605976% 100%,49.253035% 100%;
 background-repeat:no-repeat;
}