/* "01 / INTERACT" illustration (replaces the phone chat while that row is open) */
.hh-it{position:absolute;inset:0;z-index:30;border-radius:inherit;overflow:hidden;opacity:0;pointer-events:none;visibility:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,#f1f7ff 0,rgba(241,247,255,0) 70%),linear-gradient(160deg,#e9f2fd 0,#d8e7fa 100%);
  transition:opacity .5s ease,visibility 0s linear .5s}
.hh-it.hh-on{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
.hh-it svg{width:100%;height:100%;display:block;overflow:visible}
.hh-it .e{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px)) scale(var(--s0,.3));transform-box:fill-box;transform-origin:center;
  transition:opacity .35s ease,transform .45s cubic-bezier(.5,0,.8,.4)}
.hh-it.hh-in .e{opacity:1;transform:none;
  transition:opacity .5s ease var(--d,0s),transform .85s cubic-bezier(.2,1.15,.3,1) var(--d,0s)}
.hh-it .ring{stroke-dasharray:2170;stroke-dashoffset:2170;transition:stroke-dashoffset .6s ease}
.hh-it.hh-in .ring{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.3,.7,.2,1) .1s}
.hh-it .spin{transform-origin:500px 430px;transform-box:view-box}
.hh-it .fl{transform-box:fill-box;transform-origin:center}
.hh-it .dot{transform-box:fill-box;transform-origin:center}
.hh-it .wave,.hh-it .mer{transform-box:fill-box;transform-origin:center}
.hh-it.hh-in .spin{animation:hhSpin 16s linear infinite}
.hh-it.hh-in .f1{animation:hhFloat 6.2s ease-in-out 1.1s infinite}
.hh-it.hh-in .f2{animation:hhFloat 7.1s ease-in-out .6s infinite reverse}
.hh-it.hh-in .f3{animation:hhFloat 6.7s ease-in-out 1.4s infinite}
.hh-it.hh-in .f4{animation:hhFloat 7.6s ease-in-out .9s infinite reverse}
.hh-it.hh-in .pulse{animation:hhPulse 4.2s ease-in-out 1.2s infinite}
.hh-it.hh-in .dot{animation:hhDot 1.5s ease-in-out infinite}
.hh-it.hh-in .dot:nth-of-type(2){animation-delay:.18s}.hh-it.hh-in .dot:nth-of-type(3){animation-delay:.36s}
.hh-it.hh-in .wave{animation:hhWave 1.8s ease-in-out infinite}
.hh-it.hh-in .wave.w2{animation-delay:.3s}
.hh-it.hh-in .mer{animation:hhMer 5s ease-in-out infinite}
@keyframes hhSpin{to{transform:rotate(360deg)}}
@keyframes hhFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(1.6deg)}}
@keyframes hhPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes hhDot{0%,60%,100%{transform:translateY(0);opacity:.9}30%{transform:translateY(-16px);opacity:1}}
@keyframes hhWave{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes hhMer{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.28)}}
/* illustration 2 (02 / UNDERSTAND) */
.hh-it .scan,.hh-it .tick,.hh-it .hand,.hh-it .lay,.hh-it .nd,.hh-it .shield{transform-box:fill-box;transform-origin:center}
.hh-it .tick{stroke-dasharray:44;stroke-dashoffset:44}
.hh-it.hh-in .f5{animation:hhFloat 6.9s ease-in-out 1s infinite}
.hh-it.hh-in .scan{animation:hhScan 5.6s ease-in-out 1.4s infinite alternate}
.hh-it.hh-in .tick{animation:hhTick 4.2s ease-in-out 1.2s infinite}
.hh-it.hh-in .tick.t2{animation-delay:1.6s}.hh-it.hh-in .tick.t3{animation-delay:2s}.hh-it.hh-in .tick.t4{animation-delay:1.2s}
.hh-it.hh-in .hand{animation:hhSpin 7s linear infinite}
.hh-it.hh-in .lay{animation:hhLay 3.2s ease-in-out infinite}.hh-it.hh-in .lay.l2{animation-delay:.25s}.hh-it.hh-in .lay.l3{animation-delay:.5s}
.hh-it.hh-in .nd{animation:hhNode 3s ease-in-out infinite}.hh-it.hh-in .nd.n2{animation-delay:.4s}.hh-it.hh-in .nd.n3{animation-delay:.8s}
.hh-it.hh-in .shield{animation:hhPulse 3.6s ease-in-out infinite}
@keyframes hhScan{0%{transform:translate(20px,30px)}50%{transform:translate(-70px,-40px) rotate(-4deg)}100%{transform:translate(-20px,70px) rotate(3deg)}}
@keyframes hhTick{0%,8%{stroke-dashoffset:44}28%,78%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:44}}
@keyframes hhLay{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hhNode{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
/* illustration 3 (03 / EXECUTE) */
.hh-it text{font-family:inherit}
.hh-it .eq,.hh-it .orb,.hh-it .mic,.hh-it .ripple,.hh-it .rot,.hh-it .chk,.hh-it .gb,.hh-it .mag,.hh-it .pen{transform-box:fill-box;transform-origin:center}
.hh-it .gb{transform-origin:50% 100%}
.hh-it .spin3{transform-origin:500px 263px;transform-box:view-box}
.hh-it.hh-in .spin3{animation:hhSpin 14s linear infinite}
.hh-it.hh-in .eq{animation:hhEq 1.1s ease-in-out infinite alternate}
.hh-it.hh-in .orb{animation:hhOrb 3.8s ease-in-out 1s infinite}
.hh-it.hh-in .mic{animation:hhMic 3.2s ease-in-out infinite}
.hh-it.hh-in .ripple{animation:hhRipple 3s ease-out 1s infinite}
.hh-it.hh-in .rot{animation:hhSpin 6s linear infinite}
.hh-it.hh-in .chk{animation:hhChk 2.6s ease-in-out infinite}
.hh-it.hh-in .gb{animation:hhGrow 2.8s ease-in-out infinite}.hh-it.hh-in .gb.g2{animation-delay:.25s}.hh-it.hh-in .gb.g3{animation-delay:.5s}
.hh-it.hh-in .mag{animation:hhMag 3.4s ease-in-out infinite}
.hh-it.hh-in .pen{animation:hhPen 1.8s ease-in-out infinite}
.hh-it.hh-in .drift{animation:hhDrift 9s ease-in-out infinite alternate}
@keyframes hhEq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
@keyframes hhOrb{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes hhMic{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes hhRipple{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.22);opacity:0}}
@keyframes hhChk{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes hhGrow{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@keyframes hhMag{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,-6px)}}
@keyframes hhPen{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-4px,5px) rotate(-8deg)}}
@keyframes hhDrift{from{transform:translateY(0)}to{transform:translateY(-14px)}}
/* illustration 4 (04 / IMPROVE) */
.hh-it .lap,.hh-it .ty,.hh-it .ly,.hh-it .usr,.hh-it .star,.hh-it .pr,.hh-it .flow{transform-box:fill-box;transform-origin:center}
.hh-it .ty{transform-origin:0 50%}
.hh-it .spin4{transform-origin:500px 257px;transform-box:view-box}
.hh-it .ldraw{stroke-dasharray:140;stroke-dashoffset:140}
.hh-it.hh-in .spin4{animation:hhSpin 14s linear infinite}
.hh-it.hh-in .ldraw{animation:hhLine 4.4s ease-in-out 1.2s infinite}
.hh-it.hh-in .ty{animation:hhTy 2.6s ease-in-out infinite}.hh-it.hh-in .ty.t2{animation-delay:.4s}
.hh-it.hh-in .ly.l1{animation:hhLy1 3s ease-in-out infinite}.hh-it.hh-in .ly.l3{animation:hhLy3 3s ease-in-out infinite}
.hh-it.hh-in .usr{animation:hhSway 2.4s ease-in-out infinite}.hh-it.hh-in .usr.u2{animation-delay:.6s}
.hh-it.hh-in .flow{animation:hhFlow 1.2s linear infinite}
.hh-it.hh-in .star{animation:hhStar 2.4s ease-in-out infinite}
.hh-it.hh-in .pr{animation:hhRing 2.4s ease-out infinite}
@keyframes hhLine{0%,8%{stroke-dashoffset:140}42%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:140}}
@keyframes hhTy{0%,10%{transform:scaleX(.2)}45%,85%{transform:scaleX(1)}100%{transform:scaleX(.2)}}
@keyframes hhLy1{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hhLy3{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes hhSway{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes hhFlow{to{stroke-dashoffset:-24}}
@keyframes hhStar{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.35) rotate(18deg)}}
@keyframes hhRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.hh-it .ldraw{stroke-dashoffset:0}.hh-it .tick{stroke-dashoffset:0}.hh-it .e,.hh-it .ring{transition:none !important}.hh-it *{animation:none !important}.hh-it.hh-on .e{opacity:1;transform:none}.hh-it.hh-on .ring{stroke-dashoffset:0}}

/* remove the pause / 1x / mute playback buttons from the use-case card */
section[data-track-view="use_cases"] button[data-track-item="playback"]{display:none !important}

/* ---- phones / tablets: match the desktop layout ---- */
@media (max-width:1023.98px){
  /* original hh phone-chat mockups inside each step ("Hi & Hello Recovery", "Hospital support" ...) are not part of the desktop design */
  section[data-track-view="use_cases"] .accordion__body-inner > :not(p){display:none !important}
  /* show the same step illustration that desktop shows beside the steps, below them */
  section[data-track-view="use_cases"] [class*="min-h-[670px]"]{display:block !important;position:relative;width:100%;min-height:0 !important;height:auto !important;aspect-ratio:1000/900;margin-top:28px;border-radius:24px;overflow:hidden}
}