/* The conversation-to-execution demo: scoped styles, without changing the hero or employee section. */
.hhe{--hhe-blue:#006bff;--hhe-ink:#080d2d;position:relative;isolation:isolate;box-sizing:border-box;width:100%;padding:42px 0 76px;overflow:clip;color:var(--hhe-ink);font-family:"HH Inter",Inter,Arial,sans-serif;background:radial-gradient(ellipse 40% 30% at 98% 1%,#d9ffe4b3,transparent),radial-gradient(ellipse 50% 35% at 8% 40%,#eaf4ff80,transparent),linear-gradient(120deg,#f7faff,#fcfeff 50%,#f3fbff)}
main.gap-24>.hha+.hhe{margin-block-start:calc(-24 * var(--spacing,.25rem))}
@media(min-width:768px){main.md\:gap-40>.hha+.hhe{margin-block-start:calc(-40 * var(--spacing,.25rem))}}
.hhe *{box-sizing:border-box}
.hhe-wrap{position:relative;z-index:1;width:calc(82% - 40px);max-width:1280px;margin:auto}
.hhe svg{display:block;flex:none;width:24px;height:24px}
.hhe button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hhe button:focus-visible,.hhe [tabindex="0"]:focus-visible{outline:2px solid #0074ff;outline-offset:4px}
.hhe-heading{text-align:center}
.hhe-badge{display:inline-flex;align-items:center;gap:12px;margin:0 0 14px;padding:9px 21px;border-radius:999px;background:linear-gradient(100deg,#e2fbf4,#ccffd4);font-size:16px;line-height:1.4;font-weight:650;letter-spacing:-.035em}
.hhe-badge svg{width:23px;height:23px;color:#00c75b;fill:#00d577;stroke-width:1}
.hhe-heading h2{margin:0 0 10px;font-family:inherit;font-size:clamp(30px,3.4vw,54px);line-height:1.15;font-weight:700;letter-spacing:-.035em;color:var(--hhe-ink)}
.hhe-heading h2 span{background:linear-gradient(100deg,#0067ff 10%,#00a7d3 50%,#00df00);color:#007fff;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hhe-heading>p:last-child{margin:0;color:#435b8c;font-size:clamp(16px,1.3vw,20px);line-height:1.45;font-weight:450;letter-spacing:-.025em}
.hhe-stack{position:relative;margin-top:48px;isolation:isolate}
/* Five real workflow cards. Scroll progress lifts the front card to expose the next. */
.hhe-pin{position:relative;padding-bottom:40px}
.hhe-deck{position:relative;display:grid;isolation:isolate}
.hhe-deck>.hhe-console{grid-area:1/1;min-width:0;transform-origin:center top;background:linear-gradient(120deg,#fafdff,#f3f9ff)}
.hhe-scroll-stack{height:var(--hhe-scroll-height)}
.hhe-scroll-stack .hhe-pin{position:sticky;top:var(--hhe-pin-top,104px)}
.hhe-scroll-stack .hhe-console{will-change:transform,opacity}
.hhe-single-stack .hhe-console:not(.is-current){display:none}
/* Tall cards remain readable on small screens, stacking as each next card scrolls up. */
.hhe-flow-stack .hhe-deck{display:block}
.hhe-flow-stack .hhe-console{position:sticky;top:var(--hhe-flow-top);margin-bottom:32px}
.hhe-flow-stack .hhe-console:last-child{margin-bottom:0}
.hhe-console{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;padding:30px 18px 20px 32px;border:1px solid #dcecff;border-radius:48px;background:linear-gradient(120deg,#ffffffb3,#f3f9ffd9);box-shadow:inset 0 1px 0 #fff,0 15px 30px #4e9bea14}
.hhe-workflows{display:flex;flex-direction:column;gap:16px;padding:5px 20px 16px 0;border-right:1px solid #dceaff}
.hhe-workflows button{display:flex;align-items:center;gap:20px;min-height:70px;padding:14px 22px;border:1px solid #e0edff;border-radius:21px;background:linear-gradient(135deg,#fff,#f3f8ff);box-shadow:0 5px 9px #006bff13;color:var(--hhe-ink);text-align:left;font-size:16px;font-weight:650;line-height:1.2;letter-spacing:-.04em;transition:background .2s,color .2s,box-shadow .2s}
.hhe-workflows button svg{width:34px;height:34px;color:#0673ff;stroke-width:1.6}
.hhe-workflows button[aria-selected="true"]{border-color:#009cff;background:linear-gradient(180deg,#00b5ed,#007bff 70%,#0055ff);color:#fff;box-shadow:0 5px 10px #006aff26}
.hhe-workflows button[aria-selected="true"] svg{color:#fff}
.hhe-demo{min-width:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);align-items:center;gap:24px;padding:18px 0 16px 32px;border:1px solid #e9f2ff;border-radius:38px;background:linear-gradient(130deg,#ffffffbf,#f5fbffc9);box-shadow:0 5px 8px #2984e90d}
.hhe-conversation{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);align-self:stretch;align-items:start;gap:0 32px;min-width:0}
.hhe-orb{position:relative;display:grid;place-items:center;overflow:hidden;width:92px;height:92px;margin-top:17px;border-radius:50%;background:radial-gradient(circle at 28% 20%,#c8efff 0%,transparent 20%),radial-gradient(circle at 75% 66%,#7eff61 0%,#00d09c 25%,transparent 58%),linear-gradient(120deg,#4a79ff,#00b5ff 50%,#11e948);box-shadow:inset 0 0 12px #ffffff70,0 7px 12px #00bcaa20}
.hhe-orb svg{width:65%;height:65%;filter:drop-shadow(0 1px 1px #ffffff50)}
.hhe-orb-small{flex:none;width:33px;height:33px;margin:7px 0 0;box-shadow:0 3px 7px #007cff20}
.hhe-transcript{min-width:0}
.hhe-channel-label{display:inline-flex;align-items:center;gap:9px;margin:0 0 10px;padding:5px 12px;border-radius:999px;background:#eaf3ff;color:#080d2d;white-space:nowrap;font-size:13px;line-height:1.3;letter-spacing:-.03em}
.hhe-channel-label svg{width:18px;height:18px;color:#006bff}
.hhe-channel-label strong{font-weight:650}
.hhe-playback{display:flex;align-items:center;gap:12px;margin:0 0 12px;min-height:44px}
.hhe-wave{display:flex;align-items:center;justify-content:space-between;gap:3px;flex:1;min-width:0;height:44px}
.hhe-wave i{display:block;flex:1;max-width:3px;min-width:1px;height:calc(var(--h) * .7);border-radius:3px;background:var(--c);animation:hhe-voice-wave .95s ease-in-out var(--delay) infinite alternate;animation-play-state:paused;transform-origin:center}
.hhe.is-playing.is-inview .hhe-wave i{animation-play-state:running}
.hhe-time{flex:none;font-size:14px;color:#496699;font-variant-numeric:tabular-nums}
.hhe-pause{display:grid;place-items:center;flex:none;width:42px;height:42px;padding:0;border:0;border-radius:50%;color:#0062ff;background:linear-gradient(#e5ddff,#fff);box-shadow:0 4px 7px #5798e924}
.hhe-pause svg{width:17px;height:17px}
.hhe-messages{margin-left:0;min-height:238px}
.hhe-message{display:flex;align-items:flex-start;gap:9px;margin-bottom:7px}
.hhe-message:last-child{margin-bottom:0}
.hhe-message p{margin:0;min-width:0;padding:7px 11px;border-radius:16px;background:#ffffffdb;color:#080d2d;font-size:13px;line-height:1.25;letter-spacing:-.028em;box-shadow:0 2px 4px #4485cc05}
.hhe-message strong{font-weight:700}
.hhe-customer-mark{display:grid;place-items:center;flex:none;width:28px;height:28px;margin-top:1px;border-radius:50%;color:#0081ff;background:white;box-shadow:0 3px 6px #087aff1a}
.hhe-customer-mark svg{width:15px;height:15px}
.hhe-agent-message{margin-left:-8px}
.hhe-agent-message p{background:linear-gradient(110deg,#eef8ff,#e6fcf0)}
.hhe-agent-message:last-child p{background:linear-gradient(120deg,#edf2ff,#eefaff)}
.hhe-channels{grid-column:1/-1;display:flex;align-self:end;gap:14px;margin-top:16px}
.hhe-channels button{display:flex;flex:1;align-items:center;justify-content:center;gap:9px;min-width:0;min-height:40px;padding:8px 12px;border:1px solid #e4efff;border-radius:999px;background:linear-gradient(#fff,#f5f9ff);box-shadow:0 4px 6px #0073ed10;color:#080d2d;font-size:13px;font-weight:650;letter-spacing:-.03em;white-space:nowrap}
.hhe-channels button svg{width:22px;height:22px;color:#006dff}
.hhe-channels button:nth-child(2) svg{color:#00dc25}
.hhe-channels button[aria-selected="true"]{border-color:#b5d7ff;border-bottom-color:#4c9eff;background:linear-gradient(120deg,#e6f4ff,#cfe7ff)}
.hhe-results{position:relative;align-self:center;min-width:0;margin:0 0 20px;padding:18px 13px 14px 21px;border:1px solid #d7f6e7;border-radius:29px;background:linear-gradient(135deg,#fff,#f3fff8b3);box-shadow:0 8px 15px #20d85d14}
.hhe-result-heading{display:flex;align-items:center;gap:12px;margin:0 0 17px}
.hhe-complete{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:linear-gradient(125deg,#adff00,#00d800);color:#fff;box-shadow:0 7px 14px #4ce91823}
.hhe-complete svg{width:28px;height:28px;stroke-width:3}
.hhe-result-heading h3{margin:0 0 4px;font-size:20px;line-height:1.2;font-weight:700;letter-spacing:-.04em;color:#080d2d}
.hhe-result-summary{margin:0;color:#253c72;font-size:12px;line-height:1.4;letter-spacing:-.02em}
.hhe-result-list{list-style:none;margin:0;padding:3px 8px 0 0;border-radius:18px;background:#ffffffc9}
.hhe-result-list li{display:flex;align-items:center;gap:10px;min-height:56px;padding:7px 0;border-bottom:1px solid #eff7ff}
.hhe-result-list li:last-child{border:0}
.hhe-step-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;color:#0072ff;background:#fff;box-shadow:0 3px 6px #006bff13}
.hhe-step-icon svg{width:23px;height:23px}
.hhe-green{color:#00db11}
.hhe-result-list strong{display:block;margin-bottom:3px;font-size:12px;line-height:1.3;font-weight:700;letter-spacing:-.035em}
.hhe-result-list small{display:block;font-size:11px;line-height:1.3;letter-spacing:-.025em;color:#263c71}
.hhe-check{display:grid;place-items:center;flex:none;width:21px;height:21px;margin-left:auto;border-radius:50%;background:linear-gradient(135deg,#9dff00,#00d800);color:#fff}
.hhe-check svg{width:14px;height:14px;stroke-width:2.5}
.hhe-principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:118px -5% 0}
.hhe-principle{display:flex;align-items:center;gap:20px;min-width:0;padding-right:24px;border-right:1px solid #c7dcff}
.hhe-principle:last-child{padding-right:0;border:0}
.hhe-principle-icon{display:grid;place-items:center;flex:none;width:62px;height:62px;border-radius:50%;color:#0074ff;background:linear-gradient(130deg,#f1f6ff,#e1f0ff);box-shadow:0 5px 8px #006bff10}
.hhe-principle-icon svg{width:31px;height:31px}
.hhe-principle:nth-child(2) .hhe-principle-icon{color:#a04aff;background:linear-gradient(130deg,#f9f1ff,#f1eaff)}
.hhe-principle:nth-child(4) .hhe-principle-icon{color:#00d812;background:linear-gradient(130deg,#ebffe0,#eafff6)}
.hhe-principle:nth-child(4) svg{padding:5px;border:1px solid currentColor;border-radius:50%}
.hhe-principle h3{margin:0 0 5px;font-size:19px;font-weight:700;line-height:1.2;letter-spacing:-.04em;color:#080d2d}
.hhe-principle p{margin:0;font-size:13px;line-height:1.45;letter-spacing:-.025em;color:#080d2d}
.hhe-bottom-waves{position:absolute;z-index:-1;left:0;bottom:0;width:100%!important;height:300px!important;pointer-events:none}
@keyframes hhe-voice-wave{from{transform:scaleY(.35)}to{transform:scaleY(1.18)}}
@media(min-width:1600px){.hhe-console{grid-template-columns:240px minmax(0,1fr)}.hhe-demo{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr)}.hhe-message p{font-size:14px}.hhe-result-list strong{font-size:13px}.hhe-result-list small{font-size:12px}}
@media(max-width:1400px) and (min-width:901px){.hhe-wrap{width:calc(94% - 40px)}.hhe-console{grid-template-columns:180px minmax(0,1fr);padding:22px 14px 18px 22px;gap:12px}.hhe-workflows{gap:13px;padding-right:14px}.hhe-workflows button{padding:12px;gap:10px;font-size:14px;min-height:68px}.hhe-workflows button svg{width:28px;height:28px}.hhe-demo{padding-left:18px;gap:14px;grid-template-columns:minmax(0,1.5fr) minmax(245px,1fr)}.hhe-conversation{grid-template-columns:58px minmax(0,1fr);column-gap:14px}.hhe-orb:not(.hhe-orb-small){width:58px;height:58px}.hhe-message p{font-size:12px}.hhe-results{padding-left:12px}.hhe-result-heading h3{font-size:16px}.hhe-channels{gap:6px}.hhe-channels button{padding:8px;font-size:12px;gap:5px}.hhe-principles{margin-inline:0;gap:18px}.hhe-principle{gap:12px;padding-right:14px}.hhe-principle-icon{width:48px;height:48px}.hhe-principle h3{font-size:17px}.hhe-principle p{font-size:12px}}
@media(max-width:900px){.hhe{padding:40px 0 56px}.hhe-wrap{width:calc(100% - 40px);max-width:680px}.hhe-desktop-break{display:none}.hhe-badge{font-size:13px;padding:8px 15px}.hhe-heading h2{font-size:clamp(30px,5vw,42px);line-height:1.15}.hhe-heading>p:last-child{font-size:16px}.hhe-stack{margin-top:30px}.hhe-console{display:block;border-radius:28px;padding:18px}.hhe-workflows{display:flex;flex-direction:row;gap:9px;overflow-x:auto;padding:0 0 16px;border:0;scrollbar-width:thin;scrollbar-color:#bad7ff transparent}.hhe-workflows button{flex:none;min-height:54px;max-width:185px;padding:11px 14px;gap:10px;border-radius:15px;font-size:13px}.hhe-workflows button svg{width:24px;height:24px}.hhe-demo{grid-template-columns:minmax(0,1fr);gap:24px;padding:20px 18px 18px;border-radius:22px}.hhe-conversation{grid-template-columns:64px minmax(0,1fr);column-gap:14px}.hhe-orb:not(.hhe-orb-small){width:64px;height:64px}.hhe-channel-label{font-size:12px;padding-inline:9px}.hhe-messages{min-height:250px;margin-left:-22px}.hhe-message p{font-size:13px;line-height:1.35}.hhe-results{margin:0;padding:18px;border-radius:22px}.hhe-result-heading h3{font-size:20px}.hhe-result-summary{font-size:13px}.hhe-result-list strong{font-size:14px}.hhe-result-list small{font-size:12px}.hhe-result-list li{min-height:61px}.hhe-channels{margin-top:20px;gap:8px}.hhe-channels button{font-size:12px;gap:6px;padding:8px}.hhe-channels button svg{width:20px;height:20px}.hhe-principles{grid-template-columns:1fr 1fr;margin:86px 0 0;gap:28px 18px}.hhe-principle{gap:12px;padding-right:0;border:0}.hhe-principle h3{font-size:17px}.hhe-principle p{font-size:12px}.hhe-principle-icon{width:48px;height:48px}.hhe-principle-icon svg{width:26px;height:26px}}
@media(max-width:480px){.hhe-console{padding:13px}.hhe-demo{padding:17px 12px 13px}.hhe-conversation{grid-template-columns:40px minmax(0,1fr);gap:10px}.hhe-orb:not(.hhe-orb-small){width:40px;height:40px}.hhe-playback{gap:7px}.hhe-pause{width:32px;height:32px}.hhe-time{font-size:12px}.hhe-wave{gap:2px}.hhe-messages{margin-left:-42px;min-height:300px}.hhe-agent-message{margin-left:0}.hhe-orb-small{width:26px;height:26px}.hhe-message{gap:6px}.hhe-message p{padding:7px 9px;font-size:12px}.hhe-customer-mark{width:24px;height:24px}.hhe-channels{gap:5px}.hhe-channels button{padding:8px 4px;font-size:11px;gap:4px}.hhe-channels button svg{width:16px;height:16px}.hhe-principles{gap:24px 14px}.hhe-principle{align-items:flex-start;gap:8px}.hhe-principle-icon{width:35px;height:35px}.hhe-principle-icon svg{width:22px;height:22px}.hhe-principle h3{font-size:15px}.hhe-principle p{font-size:11px}.hhe-principle br{display:none}}
@media(prefers-reduced-motion:reduce){.hhe-wave i{animation:none;transform:none}.hhe-workflows button{transition:none}}

@media(min-width:1251px){.hhe-message p{font-size:14px}.hhe-result-list strong{font-size:13px}.hhe-result-list small{font-size:12px}}
.hhe{scroll-margin-top:104px}
