/* Figma 528:969 — left-aligned Voice Agent hero with original background. */
html body #voiceHero{box-sizing:border-box;min-height:658px;margin-top:-80px;padding:178px 0 120px;background:#f5f5f8 url('../img/voice-hero-528.png') center top/cover no-repeat;text-align:left;overflow:hidden;}
#voiceHero>.container{width:calc(100% - 64px);max-width:1300px;margin-inline:auto;padding-inline:0;display:block;}
#voiceHero .hero-copy{width:100%;max-width:none;margin:0;text-align:left;}
#voiceHero .hero-ambient,#voiceHero .product-illustration{display:none;}
html body #voiceHero .eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;padding:2px 10px;border:4px solid #f9fafc;box-shadow:0 0 0 1px #e6e7e9;border-radius:33px;background:#fff;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;text-transform:none;color:#495057;}
#voiceHero .eyebrow::before{content:"";width:18px;height:18px;flex:none;background:url('../../img/global-presence/badge.svg') center/18px 18px no-repeat;}
html body #voiceHero h1{max-width:1040px;margin:22px 0 0;color:rgb(0 0 0 / 85%);font-size:48px;line-height:57.6px;letter-spacing:-2.4px;font-weight:400;white-space:pre-line;text-wrap:initial;}
html body #voiceHero .hero-sub{max-width:740px;margin:17px 0 0;color:rgb(0 0 0 / 65%);font-size:14px;line-height:25.202px;}
html body #voiceHero .voice-hero-actions{justify-content:flex-start;gap:24px;margin:48px 0 0;}
:is(#voiceHero,.voice-final-actions) .hero-connect{padding:10px 12px 10px 26px;min-height:52px;}
:is(#voiceHero,.voice-final-actions) .hero-arrow{display:flex;align-items:center;justify-content:center;flex:none;width:52px;height:32px;border-radius:99px;background:#f6f7f8;box-shadow:0 9px 20px rgb(1 3 9 / 10%);}
:is(#voiceHero,.voice-final-actions) .hero-arrow img{display:block;width:18px;height:18px;}
#voiceHero .hero-contact{min-height:52px;padding:12px 24px;}

#voiceHero .hero-contact:is(:hover,:focus-visible)::before{clip-path:circle(150% at 16px 50%);}
@media(max-width:1100px){html body #voiceHero{padding-top:150px;padding-bottom:110px}html body #voiceHero h1{font-size:42px;line-height:1.2;letter-spacing:-1.8px;max-width:960px}html body #voiceHero .hero-sub{max-width:680px}}
@media(max-width:760px){html body #voiceHero{padding-top:140px;padding-bottom:100px;min-height:620px;background-position:60% bottom}#voiceHero>.container{width:calc(100% - 40px)}html body #voiceHero h1{font-size:36px;line-height:1.2;letter-spacing:-1.3px}html body #voiceHero .voice-hero-actions{margin-top:32px;gap:14px;flex-wrap:wrap}}
@media(max-width:560px){html body #voiceHero{margin-top:-68px;padding-top:120px}html body #voiceHero h1{font-size:32px;line-height:1.25;letter-spacing:-1px}html body #voiceHero .hero-sub{line-height:1.8}#voiceHero .hero-connect{padding-left:20px}}

/* Voice-calling scene, using the homepage illustration style. */
html body #voiceHero{position:relative;}
#voiceHero .voice-hero-scene{position:absolute;right:max(24px,calc((100% - 1420px)/2));top:148px;width:clamp(320px,26vw,500px);pointer-events:none;}
#voiceHero .voice-hero-scene img{display:block;width:100%;height:auto;}
@media(max-width:1100px){#voiceHero .voice-hero-scene{position:relative;right:auto;top:auto;width:360px;max-width:80%;margin:28px auto -65px;}html body #voiceHero{padding-bottom:90px;}}
@media(max-width:600px){#voiceHero .voice-hero-scene{width:300px;margin-top:20px;margin-bottom:-55px;}}

/* Voice Agent FAQ heading uses the same typography as its hero heading. */
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"],[data-page="botlab"]) #contactFaq h2{font-family:var(--font);font-size:48px;line-height:57.6px;letter-spacing:-2.4px;font-weight:400;}
@media(max-width:1100px){html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"],[data-page="botlab"]) #contactFaq h2{font-size:42px;line-height:1.2;letter-spacing:-1.8px;}}
@media(max-width:760px){html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"],[data-page="botlab"]) #contactFaq h2{font-size:36px;line-height:1.2;letter-spacing:-1.3px;}}
@media(max-width:560px){html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"],[data-page="botlab"]) #contactFaq h2{font-size:32px;line-height:1.25;letter-spacing:-1px;}}

/* Keep the requested volume icon in both states of the shared home motion. */
html body #voiceHero .hero-arrow::after,html body .voice-final-actions .hero-arrow::after{width:18px;height:18px;background-image:url('../img/voice-button-wave.svg');background-size:18px 18px}

/* Latest Figma 528:970 export includes the exact background and scene composition. */
@media(min-width:1101px){
 html body #voiceHero{background-image:url('../img/voice-hero-figma-current.png');background-size:1920px 658px;background-position:center top;}
 #voiceHero .voice-hero-scene{display:none;}
}
@media(max-width:1100px){html body #voiceHero{background-image:linear-gradient(120deg,#f0eaf7,#f5f6f7 55%,#eaedf6);}#voiceHero .voice-hero-scene img{aspect-ratio:502/404;object-fit:contain;}}

/* Match the navigation Book a Demo waveform exactly, including its animation. */
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"],[data-page="botlab"]) :is(#voiceHero,.voice-final-actions,#evidence) .hero-arrow{width:18px;height:18px;flex:0 0 18px;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;}
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"],[data-page="botlab"]) :is(#voiceHero,.voice-final-actions,#evidence) .hero-arrow img{display:block;width:18px;height:18px;transform:rotate(-90deg);opacity:1;transition:none;filter:none;}
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"],[data-page="botlab"]) :is(#voiceHero,.voice-final-actions,#evidence) .hero-arrow::after{display:none;}
html body:is([data-page="ai-voice-agent"],[data-page="ai-chat-agent"],[data-page="aicc"],[data-page="botlab"]) :is(#voiceHero,.voice-final-actions,#evidence) .hero-connect{padding-right:24px;}

/* The center waveform is an independent animation over the original tile. */
#voiceHero .voice-hero-wave-desktop{position:absolute;left:calc(50% + 376px);top:377px;pointer-events:none;}
#voiceHero .voice-scene-wave{display:flex;align-items:center;justify-content:center;gap:2px;width:43px;height:40px;transform:translate(-50%,-50%) rotate(18deg) skewX(-12deg);}
#voiceHero .voice-scene-wave i{display:block;flex:0 0 2.5px;border-radius:3px;background:#292a2c;height:12px;animation:voice-scene-level 1s ease-in-out infinite alternate;transform-origin:center;}
#voiceHero .voice-scene-wave i:nth-child(2),#voiceHero .voice-scene-wave i:nth-child(8){height:19px;animation-delay:-.3s}
#voiceHero .voice-scene-wave i:nth-child(3),#voiceHero .voice-scene-wave i:nth-child(7){height:26px;animation-delay:-.7s}
#voiceHero .voice-scene-wave i:nth-child(4),#voiceHero .voice-scene-wave i:nth-child(6){height:32px;animation-delay:-.45s}
#voiceHero .voice-scene-wave i:nth-child(5){height:38px;animation-delay:-.15s}
@keyframes voice-scene-level{0%{scale:1 .35}100%{scale:1 1}}
@media(max-width:1100px){
 #voiceHero .voice-hero-wave-desktop{display:none}
 #voiceHero .voice-hero-scene{aspect-ratio:502/404;overflow:hidden;}
 #voiceHero .voice-hero-scene img{position:absolute;width:382.47%;max-width:none;height:auto;left:-218.13%;top:-45.05%;aspect-ratio:1920/658;}
 #voiceHero .voice-hero-scene .voice-scene-wave{position:absolute;left:48%;top:48.27%;scale:.717;}
}
@media(max-width:600px){#voiceHero .voice-hero-scene .voice-scene-wave{scale:.598;}}
@media(prefers-reduced-motion:reduce){#voiceHero .voice-scene-wave i{animation:none}}
/* The desktop composition is already in the hero background. Do not place
   an opaque rectangular copy over the text; only the waveform sits above it. */
html body #voiceHero{isolation:isolate;}
#voiceHero>.container{position:relative;z-index:1;}
#voiceHero .voice-hero-wave-desktop{z-index:4;pointer-events:none;}
@media(min-width:1101px){#voiceHero .voice-hero-scene{display:none;}}

/* Refreshed natural voice conversation scene. */
html body[data-page="ai-voice-agent"] #voiceHero{background-image:url('../img/voice-hero-conversation.png');background-size:1920px auto;background-position:center top}
html body[data-page="ai-voice-agent"] #voiceHero :is(.voice-hero-scene,.voice-hero-wave-desktop,.product-illustration){display:none}
@media(max-width:1100px){
html body[data-page="ai-voice-agent"] #voiceHero{background-image:linear-gradient(120deg,#f0eaf7,#f5f6f7 55%,#eaedf6);padding-bottom:32px}
html body[data-page="ai-voice-agent"] #voiceHero:after{content:"";display:block;width:min(100%,560px);height:340px;margin:20px auto 0;background:url('../img/voice-hero-conversation.png') 85% bottom/auto 440px no-repeat}
}

/* Live volume bars on the illustrated card, with no baked-in waveform beneath. */
html body[data-page="ai-voice-agent"] #voiceHero{background-image:url('../img/voice-hero-animated-base-vector-base.png')}
html body[data-page="ai-voice-agent"] #voiceHero .voice-hero-wave-desktop{display:block;left:calc(50% + 296px);top:390px}
html body[data-page="ai-voice-agent"] #voiceHero .voice-hero-wave-desktop .voice-scene-wave{width:88px;height:58px;gap:5px;transform:translate(-50%,-50%) skewY(23deg)}
html body[data-page="ai-voice-agent"] #voiceHero .voice-scene-wave i{background:#797b80;flex-basis:3px;animation-duration:.85s}
@media(max-width:1100px){
html body[data-page="ai-voice-agent"] #voiceHero{background-image:linear-gradient(120deg,#f0eaf7,#f5f6f7 55%,#eaedf6)}
html body[data-page="ai-voice-agent"] #voiceHero:after{display:none}
html body[data-page="ai-voice-agent"] #voiceHero .voice-hero-wave-desktop{position:relative;left:auto;top:auto;width:min(100%,560px);height:340px;margin:20px auto 0;background:url('../img/voice-hero-animated-base-vector-base.png') 85% bottom/auto 440px no-repeat}
html body[data-page="ai-voice-agent"] #voiceHero .voice-hero-wave-desktop .voice-scene-wave{position:absolute;left:calc(85% - 250px);top:160px;scale:.67;transform-origin:0 0}
}

/* Compact the Voice Agent desktop hero by 40px without scaling its artwork. */
@media(min-width:1101px){html body[data-page="ai-voice-agent"] #voiceHero{min-height:618px;padding-bottom:80px}}