/* "OMNICHANNEL CUSTOMER ENGAGEMENT": centred eyebrow + heading + intro text, placed directly below the Workflows section.
   Same look as the "MORE THAN A VOICE AGENT" intro (see hi-hello-usecase-intro.css). */
.hh-omni-intro{text-align:center;padding:0 24px 0;margin-top:-48px;margin-bottom:-64px;background:var(--background,transparent)}
.hh-omni-eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 16px;font-family:inherit;font-size:clamp(16px,1.6vw,24px);line-height:1.2;font-weight:500;letter-spacing:0;text-transform:uppercase;color:var(--foreground,#18181b)}
.hh-omni-eyebrow-icon{display:block;flex:none;width:15px;height:15px;background:#4189f5;clip-path:polygon(8% 4%,96% 50%,8% 96%)}
.hh-omni-h{font-family:inherit;font-size:clamp(30px,3.6vw,48px);line-height:1.1;font-weight:400;letter-spacing:-.025em;color:var(--foreground,#18181b);margin:0 auto;max-width:900px;text-wrap:balance}
.hh-omni-h .hh-omni-blue{color:#4189f5}
.hh-omni-p{font-family:inherit;font-size:clamp(16px,1.4vw,20px);line-height:1.3;font-weight:400;color:var(--muted,#71717a);max-width:1040px;margin:14px auto 0;text-wrap:balance}
.hh-omni-eyebrow,.hh-omni-h,.hh-omni-p{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,.9,.3,1)}
.hh-omni-intro.hh-show .hh-omni-eyebrow,.hh-omni-intro.hh-show .hh-omni-h,.hh-omni-intro.hh-show .hh-omni-p{opacity:1;transform:none}
.hh-omni-intro.hh-show .hh-omni-h{transition-delay:.08s}
.hh-omni-intro.hh-show .hh-omni-p{transition-delay:.16s}
@media (min-width:768px){.hh-omni-intro{margin-top:-64px;margin-bottom:-112px}}
@media (max-width:600px){.hh-omni-intro{padding:0 16px 0;margin-top:-32px;margin-bottom:-56px}.hh-omni-eyebrow{margin-bottom:12px}.hh-omni-p{margin-top:12px}}
@media (prefers-reduced-motion:reduce){.hh-omni-eyebrow,.hh-omni-h,.hh-omni-p{opacity:1 !important;transform:none !important;transition:none !important}}

/* "One agent. Every channel." banner card: blue theme */
section[data-track-view="omnichannel_banner"]{--hh-b1:#4189f5;--hh-b2:#142b55;--hh-bsoft:#e6f0ff}
/* channel icon circles: black -> blue gradient */
section[data-track-view="omnichannel_banner"] span.bg-foreground{
  background:linear-gradient(135deg,#5b9bf8,#2f6fe0) !important;box-shadow:0 8px 18px -8px rgba(65,137,245,.65)}
/* card: soft blue wash, blue border + glow */
section[data-track-view="omnichannel_banner"] > div{
  border-color:#d9e5f8 !important;
  background:radial-gradient(120% 100% at 0% 0%,#eef4ff 0%,var(--background,#fafbfd) 60%) !important;
  box-shadow:0 18px 44px -18px rgba(65,137,245,.32)}
/* headline: deep navy instead of black */
section[data-track-view="omnichannel_banner"] h2{color:var(--hh-b2) !important}
/* phones: blue-tinted drop shadow */
section[data-track-view="omnichannel_banner"] img{filter:drop-shadow(0 18px 26px rgba(65,137,245,.28)) !important}

/* channel icons order: mic, WhatsApp, globe, message (message icon moved from 2nd to last) */
section[data-track-view="omnichannel_banner"] .flex.gap-3 > span:nth-child(2){order:4}

/* rotating channel text (built by hi-hello-omni-intro.js) */
section.hh-ch-on[data-track-view="omnichannel_banner"] h2:not(.hh-ch-title),
section.hh-ch-on[data-track-view="omnichannel_banner"] .relative.z-10 > p:not(.hh-ch-text):not(.hh-ch-remark){display:none !important}
.hh-ch{display:grid}
.hh-ch-pane{grid-area:1/1;opacity:0;transform:translateY(10px);visibility:hidden;transition:opacity .45s ease,transform .5s cubic-bezier(.22,.9,.3,1),visibility 0s linear .45s}
.hh-ch-pane.hh-on{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.hh-ch-title{margin:0;font-size:2.25rem;line-height:1.05;font-weight:500;letter-spacing:-.025em;color:var(--hh-b2,#142b55)}
.hh-ch-text{margin:16px 0 0;font-size:1rem;line-height:1.6;color:var(--muted,#71717a)}
@media (min-width:768px){.hh-ch-title{font-size:3rem}.hh-ch-text{font-size:1.125rem}}
.hh-ch-remark{margin:20px 0 0;font-size:.8125rem;line-height:1.4;color:var(--muted,#71717a);opacity:.85}
@media (min-width:768px){.hh-ch-remark{position:absolute;left:48px;bottom:32px;margin:0;max-width:402px}}
/* icons keep the solid blue look; the selected one just lifts slightly */
section[data-track-view="omnichannel_banner"] .hh-ch-btn{cursor:pointer;transition:background .3s ease,box-shadow .3s ease,transform .3s ease,color .3s ease;outline:none}
section[data-track-view="omnichannel_banner"] .hh-ch-btn.hh-active{transform:scale(1.06);box-shadow:0 0 0 3px rgba(65,137,245,.16),0 10px 20px -8px rgba(65,137,245,.65) !important}
section[data-track-view="omnichannel_banner"] .hh-ch-btn:not(.hh-active):hover{transform:scale(1.03)}
section[data-track-view="omnichannel_banner"] .hh-ch-btn:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 5px #4189f5 !important}
@media (prefers-reduced-motion:reduce){.hh-ch-pane,.hh-ch-btn{transition:none !important}}

/* "AI voice calls": laptop + phone image replaces the two phone mockups */
.hh-ch-hero{display:block;pointer-events:none;user-select:none;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s;
  width:calc(100% + 24px);max-width:none;height:auto;margin:20px -12px -16px;position:relative;z-index:1}
.hh-ch-hero.hh-on{opacity:1;visibility:visible;transition-delay:0s;filter:none !important}
section.hh-ch-on[data-track-view="omnichannel_banner"] img:not(.hh-ch-hero){transition:opacity .45s ease}
section.hh-has-img[data-track-view="omnichannel_banner"] img:not(.hh-ch-hero){opacity:0}
@media (max-width:767px){
  section.hh-has-img[data-track-view="omnichannel_banner"] .md\:contents{display:none}
  .hh-ch-hero{display:none}
  .hh-ch-hero.hh-on{display:block}
}
@media (min-width:768px){
  .hh-ch-hero{position:absolute;right:12px;bottom:36px;left:auto;width:min(66%,720px);margin:0;z-index:1}
}
@media (prefers-reduced-motion:reduce){.hh-ch-hero{transition:none !important}}

/* the new voice-calls image has its own light-blue backdrop: feather every edge so it melts into the card */
.hh-ch-hero{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media (min-width:768px){.hh-ch-hero{right:0;bottom:20px;width:min(66%,710px)}}

/* fill the empty top-right corner on the voice-calls tab: matching blue glow behind the image, and no feather on the edge that touches the card edge */
section[data-track-view="omnichannel_banner"] > div::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:
    radial-gradient(55% 75% at 80% 24%,rgba(150,188,255,.55) 0%,rgba(170,202,255,.30) 45%,rgba(190,214,255,0) 78%),
    radial-gradient(40% 55% at 98% 100%,rgba(165,198,255,.40) 0%,rgba(190,214,255,0) 80%)}
section[data-hh-tab="0"][data-track-view="omnichannel_banner"] > div::before{opacity:1}
@media (min-width:768px){
  .hh-ch-hero{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 88%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 88%,transparent 100%)}
}

/* WhatsApp Business image: full card height, right aligned, only the left edge feathered */
@media (min-width:768px){
  .hh-ch-hero[data-tab="1"]{top:0;bottom:0;height:100%;width:auto;max-width:none;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
}

/* Website and app image: slightly inset from the top so the browser mockup clears the text column; left + top feathered */
@media (min-width:768px){
  .hh-ch-hero[data-tab="2"]{top:auto;bottom:0;height:94%;width:auto;max-width:none;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}

/* Website and app: smaller image, inset from every card edge, all four edges feathered into the card (+ matching glow behind) */
@media (min-width:768px){
  .hh-ch-hero[data-tab="2"]{top:auto;bottom:48px;right:14px;height:80%;width:auto;max-width:none;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}
@media (max-width:767px){.hh-ch-hero[data-tab="2"]{margin-left:0;margin-right:0;width:100%}}
section[data-hh-tab="2"][data-track-view="omnichannel_banner"] > div::before{opacity:1;
  background:radial-gradient(48% 70% at 74% 50%,rgba(150,188,255,.50) 0%,rgba(170,202,255,.26) 50%,rgba(190,214,255,0) 82%)}

/* Meta & other channels: same treatment as the Website and app image (inset, all edges feathered, matching glow) */
@media (min-width:768px){
  .hh-ch-hero[data-tab="3"]{top:auto;bottom:24px;right:10px;height:90%;width:auto;max-width:none;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}
@media (max-width:767px){.hh-ch-hero[data-tab="3"]{margin-left:0;margin-right:0;width:100%}}
section[data-hh-tab="3"][data-track-view="omnichannel_banner"] > div::before{opacity:1;
  background:radial-gradient(52% 72% at 74% 52%,rgba(150,188,255,.50) 0%,rgba(170,202,255,.26) 50%,rgba(190,214,255,0) 82%)}