/* "Invoice & payment follow-up" workflow (replaces the first tab's canvas) */
section[data-track-view="workflows"].hh-inv-on .hh-invcol > *:not(.hh-inv){display:none !important}
.hh-inv{display:none;width:100%;max-width:500px;margin:0 auto;font-size:12.5px;line-height:1.35;color:#17315e;--hh-bl:#3f86f2;--hh-bd:#2c68d8}
section[data-track-view="workflows"].hh-inv-on .hh-inv.hh-act{display:flex;flex-direction:column;align-items:center}
.hh-inv *{box-sizing:border-box}
.hh-inv b{font-weight:600;color:#14233f}
.hh-inv small{display:block;font-size:11px;color:#6a7b99}
.hh-inv label{display:block;margin:8px 0 4px;font-size:10px;font-weight:600;letter-spacing:.06em;color:#6a7b99;text-transform:uppercase}
.hh-n{width:100%;background:#fff;border:1px solid #d6e3f8;border-radius:14px;box-shadow:0 10px 26px -12px rgba(63,134,242,.4),0 2px 6px rgba(63,134,242,.08);overflow:hidden}
.hh-n1{width:66%}.hh-n2{width:78%}.hh-n3{width:94%}
.hh-hd{background:linear-gradient(180deg,#4a90f5,#2f6fe0);color:#fff;font-weight:600;font-size:12.5px;text-align:center;padding:7px 10px}
.hh-bd{padding:11px 13px 13px}
.hh-row{display:flex;align-items:center;gap:10px}
.hh-ico{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;color:#2f6fe0}
.hh-sel{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1px solid #e3ebf8;border-radius:10px;padding:7px 10px;box-shadow:0 2px 8px -3px rgba(63,134,242,.25);font-size:12px;color:#14233f}
.hh-sel svg{flex:0 0 auto;color:#5d6f90}
.hh-tabs{display:flex;gap:6px}
.hh-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;padding:6px 4px;background:#f3f6fb;color:#33415c;font-weight:500;font-size:12px;border:1px solid #e8eef9}
.hh-msg{margin-top:9px;display:flex;gap:9px;background:#eef3fb;border-radius:10px;padding:9px 10px;font-size:11.5px;color:#14233f}
.hh-spark{flex:0 0 auto;color:#2f6fe0;margin-top:2px}
.hh-cond{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.hh-cond:last-child{margin-bottom:0}
.hh-cond .lbl{flex:0 0 34px;text-align:right;font-size:10px;font-weight:600;letter-spacing:.05em;color:#6a7b99;text-transform:uppercase}
.hh-cond .hh-sel{flex:1;padding:6px 9px;font-size:11.5px}
.hh-cond .hh-sel:nth-child(3){flex:.85}
.hh-chip{flex:0 0 auto;border-radius:8px;padding:5px 11px;font-size:11.5px;font-weight:600}
.hh-chip.paid{background:#fde6e8;color:#b3262d}.hh-chip.unpaid,.hh-chip.warn{background:#fdf0da;color:#a8610b}.hh-chip.good{background:#e3f5e8;color:#1f7a3a}
.hh-ln{width:2px;height:26px;background:#bccae0;transform-origin:top;flex:0 0 auto}
.hh-fork{position:relative;width:94%;height:64px;flex:0 0 auto}
.hh-fork i{position:absolute;background:#bccae0;display:block}
.hh-fork .stem{left:50%;top:0;width:2px;height:28px;margin-left:-1px;transform-origin:top}
.hh-fork .bar{left:25%;right:25%;top:27px;height:2px;transform-origin:center}
.hh-fork .dl,.hh-fork .dr{top:28px;width:2px;height:36px;margin-left:-1px;transform-origin:top}
.hh-fork .dl{left:25%}.hh-fork .dr{left:75%}
.hh-tag{position:absolute;top:30px;transform:translateX(-50%);font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:7px;border:1px solid}
.hh-tag.ok{left:25%;background:#e8f6ec;color:#277a3d;border-color:#bfe3c9}
.hh-tag.no{left:75%;background:#fdf3df;color:#9a6208;border-color:#f1d9a8}
.hh-brs{display:flex;gap:4%;width:100%;align-items:stretch}
.hh-br{flex:1;min-width:0}
.hh-big{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.hh-big .circ{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#2f9e4f}
.hh-big .bell{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;color:#f0a21a}
.hh-li{display:flex;align-items:flex-start;gap:8px;margin:7px 0;font-size:11.5px;color:#14233f}
.hh-li svg{flex:0 0 auto;margin-top:1px}
.hh-li.g svg{color:#2f9e4f}.hh-li.m svg{color:#5d6f90}
/* ---------- entrance ---------- */
.hh-inv .hh-n,.hh-inv .hh-tag{opacity:0;transform:translateY(16px) scale(.97);transition:opacity .3s ease,transform .3s ease}
.hh-inv .hh-ln,.hh-inv .hh-fork i{transform:scaleY(0)}
.hh-inv .hh-fork .bar{transform:scaleX(0)}
.hh-inv.hh-in .hh-n,.hh-inv.hh-in .hh-tag{opacity:1;transform:none;transition:opacity .6s ease var(--d,0s),transform .7s cubic-bezier(.2,.9,.3,1.05) var(--d,0s)}
.hh-inv.hh-in .hh-ln,.hh-inv.hh-in .hh-fork i{transform:none;transition:transform .5s ease var(--d,0s)}
.hh-inv.hh-in .hh-fork .bar{transform:none}
/* ---------- loops ---------- */
.hh-inv.hh-in .hh-tab{animation:hhTabOn 6s ease-in-out infinite}
.hh-inv.hh-in .hh-tab:nth-child(2){animation-delay:2s}.hh-inv.hh-in .hh-tab:nth-child(3){animation-delay:4s}
.hh-inv.hh-in .hh-chip.paid,.hh-inv.hh-in .hh-chip.good{animation:hhChipA 5s ease-in-out 3s infinite}
.hh-inv.hh-in .hh-chip.unpaid,.hh-inv.hh-in .hh-chip.warn{animation:hhChipB 5s ease-in-out 3s infinite}
.hh-inv.hh-in .hh-spark{animation:hhSpark 2.4s ease-in-out infinite}
.hh-inv.hh-in .hh-li.g svg{animation:hhTickPop 4.5s ease-in-out infinite}
.hh-inv.hh-in .hh-li.g:nth-of-type(2) svg{animation-delay:.4s}.hh-inv.hh-in .hh-li.g:nth-of-type(3) svg{animation-delay:.8s}
.hh-inv.hh-in .bell svg{transform-origin:50% 10%;animation:hhBell 3s ease-in-out infinite}
.hh-inv.hh-in .hh-big .circ{animation:hhTickPop 4.5s ease-in-out infinite}
@keyframes hhTabOn{0%,28%{background:#dbe9ff;color:#2459c4;border-color:#bcd6fb;box-shadow:0 4px 12px -4px rgba(63,134,242,.5)}34%,100%{background:#f3f6fb;color:#33415c;border-color:#e8eef9;box-shadow:none}}
@keyframes hhChipA{0%,40%{transform:scale(1.08);box-shadow:0 0 0 3px rgba(179,38,45,.12)}55%,100%{transform:scale(1);box-shadow:none}}
@keyframes hhChipB{0%,40%{transform:scale(1);box-shadow:none}55%,95%{transform:scale(1.08);box-shadow:0 0 0 3px rgba(168,97,11,.14)}100%{transform:scale(1)}}
@keyframes hhSpark{0%,100%{transform:scale(1) rotate(0);opacity:.85}50%{transform:scale(1.25) rotate(20deg);opacity:1}}
@keyframes hhTickPop{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.25)}}
@keyframes hhBell{0%,60%,100%{transform:rotate(0)}68%{transform:rotate(14deg)}76%{transform:rotate(-12deg)}84%{transform:rotate(8deg)}92%{transform:rotate(-4deg)}}
@media (max-width:480px){.hh-inv{font-size:12px}.hh-n1{width:80%}.hh-n2{width:92%}.hh-n3{width:100%}.hh-fork{width:100%}.hh-li{font-size:11px}}
@media (prefers-reduced-motion:reduce){.hh-inv .hh-n,.hh-inv .hh-tag{opacity:1;transform:none;transition:none}.hh-inv .hh-ln,.hh-inv .hh-fork i{transform:none;transition:none}.hh-inv *{animation:none !important}}


.hh-inv .hh-big .hh-ico{width:34px;height:34px}

/* ---------- Admissions illustration (left column, under the options) ---------- */
.hh-art{display:none;position:relative;width:min(100%,360px);aspect-ratio:534/516;margin-top:6px;opacity:0;transition:opacity .6s ease}
.hh-art.hh-art-show{display:block}
.hh-art.hh-art-in{opacity:1}
.hh-art *{box-sizing:border-box;pointer-events:none;user-select:none}
.hh-art-scene{position:absolute;inset:0}
.hh-art img{position:absolute;display:block;max-width:none}
.hh-art .hh-base{inset:0;width:100%;height:100%}
.hh-art .hh-rob img{inset:0;width:100%;height:100%}
.hh-art .hh-e{opacity:0;translate:0 16px;scale:.86;transition:opacity .7s ease var(--ed,0s),translate .9s cubic-bezier(.2,.9,.3,1.1) var(--ed,0s),scale .9s cubic-bezier(.2,.9,.3,1.3) var(--ed,0s)}
.hh-art.hh-art-in .hh-e{opacity:1;translate:none;scale:1}
.hh-art .hh-ring{position:absolute;left:49.6%;top:71.7%;width:34%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(63,134,242,.4);transform:translate(-50%,-50%) scale(.6);opacity:0}
.hh-art .hh-eye{position:absolute;border-radius:50%;background:radial-gradient(closest-side,#2e5696 70%,rgba(46,86,150,0));opacity:0}
.hh-art .hh-eye::after{content:"";position:absolute;left:18%;right:18%;top:56%;height:2px;border-radius:2px;background:#64cef4}
.hh-art .hh-sp{position:absolute;color:#3f86f2;transform:translate(-50%,-50%) scale(0);opacity:0}
.hh-art .hh-sp svg{display:block;width:100%;height:100%}
/* loops (only while visible) */
.hh-art.hh-art-in .hh-art-scene{animation:hhFloat 7s ease-in-out infinite}
.hh-art.hh-art-in .hh-cloud{animation:hhDrift 9s ease-in-out infinite alternate}
.hh-art.hh-art-in .hh-flag{transform-origin:0 50%;animation:hhWave 1.7s ease-in-out infinite alternate}
.hh-art.hh-art-in .hh-plant{transform-origin:50% 96%;animation:hhSway 4.2s ease-in-out infinite alternate}
.hh-art.hh-art-in .hh-win{animation:hhWin 4.4s ease-in-out infinite}
.hh-art.hh-art-in .hh-card{transform-origin:50% 60%;animation:hhBobC 4.6s ease-in-out .8s infinite}
.hh-art.hh-art-in .hh-rob{transform-origin:50% 92%;animation:hhBobR 4s ease-in-out infinite}
.hh-art.hh-art-in .hh-bub{transform-origin:20% 95%;animation:hhBobB 4.8s ease-in-out .3s infinite}
.hh-art.hh-art-in .hh-eye{animation:hhBlink 5s ease-in-out 1.6s infinite}
.hh-art.hh-art-in .hh-ring{animation:hhRing 3.6s ease-out infinite}
.hh-art.hh-art-in .hh-ring.r2{animation-delay:1.8s}
.hh-art.hh-art-in .hh-sp{animation:hhTw 3.2s ease-in-out infinite}
@keyframes hhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes hhDrift{from{transform:translateX(-12%)}to{transform:translateX(30%)}}
@keyframes hhWave{from{transform:skewY(-6deg) scaleX(1)}to{transform:skewY(6deg) scaleX(.86)}}
@keyframes hhSway{from{transform:rotate(-3deg)}to{transform:rotate(3.2deg)}}
@keyframes hhWin{0%,55%,100%{filter:none}70%,85%{filter:brightness(1.5) saturate(.55)}}
@keyframes hhBobC{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-3px) scale(1.03)}70%{transform:translateY(-1px) scale(1)}}
@keyframes hhBobR{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-3px) rotate(-0.8deg)}65%{transform:translateY(-1px) rotate(0.7deg)}}
@keyframes hhBobB{0%,100%{transform:translateY(0) rotate(0) scale(1)}25%{transform:translateY(-7px) rotate(-3deg) scale(1.07)}50%{transform:translateY(-2px) rotate(1.5deg) scale(1.02)}75%{transform:translateY(-4px) rotate(-1deg) scale(1.04)}}
@keyframes hhBlink{0%,90%,100%{opacity:0}92%,96%{opacity:1}}
@keyframes hhRing{0%{transform:translate(-50%,-50%) scale(.6);opacity:.55}100%{transform:translate(-50%,-50%) scale(1.45);opacity:0}}
@keyframes hhTw{0%,100%{transform:translate(-50%,-50%) scale(0) rotate(0);opacity:0}45%{transform:translate(-50%,-50%) scale(1) rotate(45deg);opacity:1}70%{transform:translate(-50%,-50%) scale(.3) rotate(80deg);opacity:.3}}
@media (max-width:480px){.hh-art{width:min(100%,300px)}}
@media (prefers-reduced-motion:reduce){.hh-art,.hh-art *{animation:none !important;transition:none !important}.hh-art .hh-e{opacity:1;translate:none;scale:1}.hh-art .hh-sp,.hh-art .hh-ring,.hh-art .hh-eye,.hh-art .hh-ripple,.hh-art .hh-cring,.hh-art .hh-pring{display:none}}
.hh-art .hh-win.hh-e{translate:none;scale:1}
.hh-art .hh-rob{position:absolute}
.hh-art .hh-card.hh-e,.hh-art .hh-rob.hh-e{translate:none;scale:1;opacity:1;transition:none}

/* ---------- Real estate illustration ---------- */
.hh-art .hh-ripple{position:absolute;left:76.6%;top:28.7%;width:20%;aspect-ratio:3.2;border-radius:50%;border:2px solid rgba(63,134,242,.45);transform:translate(-50%,-50%) scale(.3);opacity:0}
.hh-art .hh-recard{position:absolute}
.hh-art .hh-recard img{inset:0;width:100%;height:100%}
.hh-art .hh-shine::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%);background-size:300% 100%;background-position:150% 0;-webkit-mask-image:var(--m);mask-image:var(--m);-webkit-mask-size:100% 100%;mask-size:100% 100%;opacity:0}
.hh-art .hh-pin.hh-e{translate:0 -34px;scale:1}
.hh-art.hh-art-in .hh-pin.hh-e{translate:none}
.hh-art .hh-lights.hh-e{translate:none;scale:1}
.hh-art.hh-art-in .hh-treeL{transform-origin:52% 100%;animation:hhTree 5s ease-in-out infinite alternate}
.hh-art.hh-art-in .hh-treeR{transform-origin:57% 100%;animation:hhTree 4.2s ease-in-out .6s infinite alternate-reverse}
.hh-art.hh-art-in .hh-lights{animation:hhGlow 3.6s ease-in-out infinite}
.hh-art.hh-art-in .hh-recard{transform-origin:50% 60%;animation:hhBobC 4.6s ease-in-out .8s infinite}
.hh-art.hh-art-in .hh-shine::after{animation:hhShine 4.6s ease-in-out 1.5s infinite}
.hh-art.hh-art-in .hh-pin{transform-origin:50% 100%;animation:hhPinBob 3.2s ease-in-out infinite}
.hh-art.hh-art-in .hh-ripple{animation:hhRip 3.2s ease-out infinite}
.hh-art.hh-art-in .hh-ripple.r2{animation-delay:1.6s}
@keyframes hhTree{from{transform:rotate(-1.4deg) skewX(.6deg)}to{transform:rotate(1.6deg) skewX(-.6deg)}}
@keyframes hhGlow{0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.12) saturate(1.3)}}
@keyframes hhShine{0%,45%{background-position:150% 0;opacity:0}50%{opacity:1}100%{background-position:-50% 0;opacity:1}}
@keyframes hhPinBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.03)}}
@keyframes hhRip{0%{transform:translate(-50%,-50%) scale(.3);opacity:.6}100%{transform:translate(-50%,-50%) scale(1.3);opacity:0}}

/* ---------- Customer support illustration ---------- */
.hh-art .hh-cring{position:absolute;left:47.6%;top:45.4%;width:46%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(63,134,242,.4);transform:translate(-50%,-50%) scale(.6);opacity:0}
.hh-art .hh-csrob,.hh-art .hh-csb1,.hh-art .hh-csb2,.hh-art .hh-screen{position:absolute}
.hh-art .hh-csrob img,.hh-art .hh-csb1 img,.hh-art .hh-csb2 img{inset:0;width:100%;height:100%}
.hh-art .hh-dot{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#e6f0ff);box-shadow:0 0 4px rgba(255,255,255,.7)}
.hh-art .hh-chk{position:absolute;overflow:visible}
.hh-art .hh-chk path{stroke-dasharray:100;stroke-dashoffset:0}
.hh-art .hh-keys.hh-e,.hh-art .hh-screen.hh-e{translate:none;scale:1}
.hh-art.hh-art-in .hh-cring{animation:hhRing 3.6s ease-out infinite}
.hh-art.hh-art-in .hh-cring.r2{animation-delay:1.8s}
.hh-art.hh-art-in .hh-csrob{transform-origin:50% 90%;animation:hhBobR 4s ease-in-out infinite}
.hh-art.hh-art-in .hh-cscard{transform-origin:50% 60%;animation:hhBobC 4.6s ease-in-out .8s infinite}
.hh-art.hh-art-in .hh-csb1{transform-origin:20% 95%;animation:hhBobB 4.8s ease-in-out .3s infinite}
.hh-art.hh-art-in .hh-csb2{transform-origin:20% 95%;animation:hhBobB 5.2s ease-in-out 1.4s infinite}
.hh-art.hh-art-in .hh-dot{animation:hhDot 1.5s ease-in-out infinite}
.hh-art.hh-art-in .hh-chk path{animation:hhChk 3.8s ease-in-out infinite}
.hh-art.hh-art-in .hh-keys{animation:hhKeys 2.4s steps(1,end) infinite}
@keyframes hhDot{0%,60%,100%{transform:translateY(0);opacity:.6}30%{transform:translateY(-5px);opacity:1}}
@keyframes hhChk{0%{stroke-dashoffset:100}22%,80%{stroke-dashoffset:0}95%,100%{stroke-dashoffset:-100}}
@keyframes hhKeys{0%{filter:brightness(1)}8%{filter:brightness(1.4)}16%{filter:brightness(1)}30%{filter:brightness(1.3)}38%{filter:brightness(1)}52%{filter:brightness(1.45)}60%{filter:brightness(1)}74%{filter:brightness(1.3)}82%{filter:brightness(1)}}

/* ---------- Invoice & payment follow-up illustration ---------- */
.hh-art .hh-pring{position:absolute;left:71.5%;top:22.4%;width:15%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(63,134,242,.45);transform:translate(-50%,-50%) scale(.5);opacity:0}
.hh-art .hh-calw,.hh-art .hh-cardw,.hh-art .hh-sheetw,.hh-art .hh-vrob{position:absolute}
.hh-art .hh-calw img,.hh-art .hh-cardw img,.hh-art .hh-sheetw img,.hh-art .hh-vrob img{inset:0;width:100%;height:100%}
.hh-art .hh-calw img.hh-bell,.hh-art .hh-sheetw img.hh-paid{inset:auto}
.hh-art .hh-ieye{position:absolute;border-radius:50%;background:radial-gradient(closest-side,#162f68 72%,rgba(22,47,104,0));opacity:0}
.hh-art .hh-ieye::after{content:"";position:absolute;left:16%;right:16%;top:58%;height:2px;border-radius:2px;background:#5fd8ff}
.hh-art .hh-eq{position:absolute;border-radius:3px;background:linear-gradient(#7ae6ff,#2db4f0);box-shadow:0 0 6px rgba(80,220,255,.75);transform-origin:50% 50%;transform:scaleY(.4)}
.hh-art .hh-vplant.hh-e{transform-origin:20% 90%}
.hh-art.hh-art-in .hh-tile{animation:hhTile var(--bd,5s) ease-in-out var(--bdl,0s) infinite}
.hh-art.hh-art-in .hh-bell{transform-origin:50% 8%;animation:hhBell 3s ease-in-out infinite}
.hh-art.hh-art-in .hh-sheetw{transform-origin:50% 100%;animation:hhSheet 5.2s ease-in-out infinite}
.hh-art.hh-art-in .hh-paid{transform-origin:50% 50%;animation:hhPaid 3.4s ease-in-out 1.2s infinite}
.hh-art.hh-art-in .hh-vplant{animation:hhSway 4.4s ease-in-out infinite alternate}
.hh-art.hh-art-in .hh-vrob{transform-origin:50% 92%;animation:hhBobR 4s ease-in-out infinite}
.hh-art.hh-art-in .hh-ieye{animation:hhBlink 5s ease-in-out 1.8s infinite}
.hh-art.hh-art-in .hh-eq{animation-name:hhEq;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
.hh-art.hh-art-in .hh-pring{animation:hhRing 3.4s ease-out .5s infinite}
.hh-art.hh-art-in .hh-pring.r2{animation-delay:2.2s}
@keyframes hhTile{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(.8deg)}}
@keyframes hhSheet{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-.7deg)}}
@keyframes hhPaid{0%,55%,100%{transform:scale(1);filter:none}68%{transform:scale(1.14);filter:drop-shadow(0 0 7px rgba(34,197,94,.75))}82%{transform:scale(1.02);filter:none}}
@keyframes hhEq{from{transform:scaleY(.3)}to{transform:scaleY(1.15)}}

/* removed sections: analytics demo, "Industry leading tech" cards, integrations */
section[data-track-view="analytics_demo"],section[data-track-view="tech_features"],section[data-track-view="integrations"]{display:none !important}

/* footer: all content removed */
footer[data-track-section="footer"]{display:none !important}

/* removed section: "Private when you need it" (compliance badges + Trust Center) */
section[data-track-view="privacy_banner"]{display:none !important}

/* "Invoice & payment follow-up" artwork: as wide as the option pills above it. Layers are cut from the supplied picture
   (see hi-hello-invoice-flow.js); each one is positioned in % of the picture and animated on its own. */
.hh-art.hh-art-inv{width:min(100%,410px);margin-top:0}
.hh-art .hh-rw{position:absolute}
.hh-art .hh-rw>img{inset:0;width:100%;height:100%}
.hh-art .hh-rw>img.hh-rpaid{inset:auto}
/* "Paid" badge: pulses with a soft warm glow */
.hh-art.hh-art-in .hh-rpaid{transform-origin:50% 50%;animation:hhPaidB 3.4s ease-in-out 1.2s infinite}
@keyframes hhPaidB{0%,55%,100%{transform:scale(1);filter:none}68%{transform:scale(1.13);filter:drop-shadow(0 0 7px rgba(65,137,245,.85))}82%{transform:scale(1.02);filter:none}}
/* voice tile: live equaliser instead of the flat waveform icon */
.hh-art .hh-vb{position:absolute;border-radius:3px;background:#3f74dc;transform-origin:50% 50%;transform:scaleY(.45)}
.hh-art.hh-art-in .hh-vb{animation:hhEq .85s ease-in-out infinite alternate}
/* rings radiating from the invoice */
.hh-art .hh-rring{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(65,137,245,.55);transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none}
.hh-art.hh-art-in .hh-rring{animation:hhRingR 4.2s ease-out .6s infinite}
.hh-art.hh-art-in .hh-rring.r2{animation-delay:2.7s}
@keyframes hhRingR{0%{transform:translate(-50%,-50%) scale(.5);opacity:.5}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
/* nodes on the orbit: pulse in place */
.hh-art .hh-rdot{position:absolute;border-radius:50%;background:#143480;transform:translate(-50%,-50%);pointer-events:none}
.hh-art.hh-art-in .hh-rdot{animation:hhDotP 3.2s ease-out infinite}
@keyframes hhDotP{0%{box-shadow:0 0 0 0 rgba(65,137,245,.55)}65%,100%{box-shadow:0 0 0 9px rgba(65,137,245,0)}}
@media (prefers-reduced-motion:reduce){.hh-art .hh-vb{transform:none}}

/* selected option pill: deep navy (was black) */
section[data-track-view="workflows"] button.button--primary.rounded-full{background:#061432 !important;color:#fff !important}
section[data-track-view="workflows"] button.button--primary.rounded-full:hover{background:#0c1f4a !important}

/* ---------- Customer support: artwork (layers cut from the supplied picture, see hi-hello-invoice-flow.js) ---------- */
.hh-art.hh-art-cs{width:min(100%,420px);margin-top:0}
.hh-art.hh-art-cs.hh-art-in .hh-csbase{transform-origin:50% 50%;animation:hhBreathe 9s ease-in-out infinite}
@keyframes hhBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
/* signal running along the waves, towards the laptop from both sides */
.hh-art .hh-wshine::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(24,64,170,.95) 50%,transparent 60%);background-size:300% 100%;-webkit-mask-image:var(--m);mask-image:var(--m);-webkit-mask-size:100% 100%;mask-size:100% 100%;opacity:0}
.hh-art.hh-art-in .hh-wr::after{background-position:150% 0;animation:hhShine 3.8s ease-in-out .8s infinite}
.hh-art.hh-art-in .hh-wl::after{background-position:-50% 0;animation:hhShineRev 3.8s ease-in-out 1.6s infinite}
@keyframes hhShineRev{0%,45%{background-position:-50% 0;opacity:0}50%{opacity:1}100%{background-position:150% 0;opacity:1}}
/* chat bubbles type live */
.hh-art .hh-tdot{position:absolute;border-radius:50%;background:#143480;opacity:.55}
.hh-art.hh-art-in .hh-tdot{animation:hhDotBounce 1.3s ease-in-out infinite}
@keyframes hhDotBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-34%);opacity:1}}
.hh-art .hh-tline{position:absolute;border-radius:4px;background:#86a9ee;transform-origin:0 50%;transform:scaleX(.2)}
.hh-art.hh-art-in .hh-tline{animation:hhLineGrow 3.8s ease-in-out infinite}
@keyframes hhLineGrow{0%,10%{transform:scaleX(.18)}42%,82%{transform:scaleX(1)}100%{transform:scaleX(.18)}}
@media (prefers-reduced-motion:reduce){.hh-art .hh-tline{transform:none}}

/* ---------- Admissions: artwork (layers cut from the supplied picture, see hi-hello-invoice-flow.js) ---------- */
.hh-art.hh-art-adm{width:min(100%,420px);margin-top:0}
.hh-art.hh-art-adm.hh-art-in .hh-csbase{transform-origin:50% 50%;animation:hhBreathe 9s ease-in-out infinite}
.hh-art .hh-rdot.hh-hollow{background:transparent;border:2px solid #1d3f9c;box-sizing:border-box}
/* the flag waves from its pole */
.hh-art.hh-art-in .hh-flagw{transform-origin:var(--fo,11%) 55%;animation:hhFlagW 2.4s ease-in-out infinite alternate}
@keyframes hhFlagW{from{transform:skewY(-8deg) scaleX(1)}to{transform:skewY(8deg) scaleX(.9)}}

/* ---------- Real estate: artwork (layers cut from the supplied picture, see hi-hello-invoice-flow.js) ---------- */
.hh-art.hh-art-re{width:min(100%,420px);margin-top:0}
.hh-art.hh-art-re.hh-art-in .hh-csbase{transform-origin:50% 50%;animation:hhBreathe 9s ease-in-out infinite}
/* chart bars grow and settle, the pin bobs, the tree sways from its trunk */
.hh-art .hh-cb{position:absolute;border-radius:3px;background:#5b8be6;transform-origin:50% 100%;transform:scaleY(.4)}
.hh-art.hh-art-in .hh-cb{animation:hhBarGrow 2.8s ease-in-out infinite alternate}
@keyframes hhBarGrow{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.hh-art.hh-art-in .hh-rpin{transform-origin:50% 100%;animation:hhPinBobS 2.6s ease-in-out infinite}
@keyframes hhPinBobS{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.07)}}
.hh-art .hh-tsway{transform-origin:var(--to,50%) 100%}
.hh-art.hh-art-in .hh-tsway{animation:hhTree 4.4s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.hh-art .hh-cb{transform:none}}

/* "Customer support" is the first option: shown first in the row. Visual order only - the buttons keep their order in the page,
   which the script and the tab component rely on. */
section[data-track-view="workflows"] div.flex-wrap.pt-2 > button.button:nth-child(3){order:-1}