/* Keep the hero story secondary to its two-line headline. */
.hero{padding-top:105px;padding-bottom:48px;min-height:0}
.hero-container{width:min(calc(100% - 64px),1260px);grid-template-columns:minmax(0,1fr) minmax(0,.96fr);gap:32px;align-items:center;isolation:isolate}
.hero-copy{position:relative;z-index:2;padding:0}
.hero-copy h1{max-width:640px;font-size:clamp(1.8rem,3.15vw,2.85rem);line-height:1.08;white-space:normal;overflow-wrap:anywhere;margin-bottom:18px}
.hero-copy .eyebrow{margin-bottom:15px}
.hero-copy .hero-lede{max-width:540px;font-size:clamp(.89rem,1.15vw,1.03rem);line-height:1.5}
.hero-copy .hero-actions{margin:22px 0 10px;gap:10px}
.hero-copy .button{min-height:46px;padding:0 18px;font-size:.88rem}
.hero-copy .button-ghost{min-width:0}
.hero-outcomes{margin-top:18px}
#live-demo.story-mode{position:relative;z-index:1;width:100%;max-width:630px;min-height:0;justify-self:end;padding:8px;border-radius:18px}
#live-demo.story-mode>.browser-bar{height:29px}
#live-demo .hs-nav{min-height:43px;padding:10px 14px;font-size:12px}
#live-demo .hs-nav>span{font-size:11px}
#live-demo .hs-page{height:235px}
#live-demo .hs-copy{padding:21px 19px;max-width:77%}
#live-demo .hs-tag{font-size:10px}
#live-demo .hs-copy h2{font-size:clamp(1.3rem,1.95vw,1.8rem);margin:9px 0 7px}
#live-demo .hs-copy p{font-size:12px;line-height:1.35;margin-bottom:10px}
#live-demo .hs-cta{font-size:11px;padding:8px 11px}
#live-demo .hs-conversation{min-height:136px;padding:11px 15px}
#live-demo .hs-conversation-head{font-size:12px;margin-bottom:7px}
#live-demo .hs-conversation-head>span{font-size:10px}
#live-demo .hs-question{min-height:36px;padding:7px 10px;font-size:13px}
#live-demo .hs-answer{min-height:20px;margin:7px 0 0;font-size:12px;line-height:1.35}
#live-demo .hs-slots span{padding:5px 8px;font-size:10px}
@media(min-width:761px) and (max-width:1100px){
  .hero{padding-top:103px;padding-bottom:38px}
  .hero-container{width:min(calc(100% - 40px),980px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
  .hero-copy h1{font-size:clamp(1.75rem,3.45vw,2.35rem);margin-bottom:13px}
  .hero-copy .eyebrow{font-size:.62rem;letter-spacing:.16em;margin-bottom:11px}
  .hero-copy .hero-lede{font-size:.8rem;line-height:1.43}
  .hero-copy .hero-actions{margin:16px 0 7px;gap:7px}
  .hero-copy .button{min-height:38px;padding:0 10px;font-size:.7rem;white-space:nowrap}
  .hero-copy .play-icon{width:20px;height:20px}
  .hero-outcomes{gap:7px 11px;margin-top:12px;font-size:.66rem}
  .hero-outcomes>span{gap:5px}
  .hero-outcomes .business-outcome-icon{width:25px;height:25px}
  #live-demo .hs-nav{min-height:34px;padding:7px 9px}
  #live-demo .hs-nav>span{display:none}
  #live-demo .hs-page{height:185px}
  #live-demo .hs-copy{padding:15px 12px;max-width:82%}
  #live-demo .hs-copy h2{font-size:1.3rem;margin:6px 0 5px}
  #live-demo .hs-copy p{font-size:10px;margin-bottom:7px}
  #live-demo .hs-cta{font-size:10px;padding:6px 8px}
  #live-demo .hs-conversation{min-height:110px;padding:8px 10px}
  #live-demo .hs-conversation-head{margin-bottom:5px}
  #live-demo .hs-question{min-height:30px;padding:5px 8px;font-size:11px}
  #live-demo .hs-answer{font-size:10px;margin-top:5px}
  #live-demo .hs-booking{inset:18px 12%;gap:4px}
  #live-demo .hs-booking strong{font-size:19px}
}
@media(max-width:760px){
  .hero{padding:98px 0 50px}
  .hero-container{width:min(calc(100% - 28px),650px);grid-template-columns:1fr;gap:23px}
  .hero-copy h1{font-size:clamp(2.15rem,8vw,3rem);white-space:normal}
  .hero-copy h1 br{display:block}
  #live-demo.story-mode{justify-self:center;max-width:600px}
  #live-demo .hs-page{height:220px}
  #live-demo .hs-copy{max-width:86%}
  #live-demo .hs-copy h2{font-size:1.55rem}
  #live-demo .hs-conversation{min-height:130px}
}
@media(max-width:430px){
  .hero-copy h1 br{display:none}
  .hero-copy h1{font-size:2.25rem}
  .hero-copy .hero-actions{gap:8px}
  .hero-copy .button{padding-inline:12px;font-size:.78rem}
  #live-demo .hs-page{height:205px}
  #live-demo .hs-copy h2{font-size:1.35rem}
}