/* Original OLi companions: white sculpted forms, blue faces, soft jointed motion. */
.home-hero>.hero-choices{margin-top:100px}
.oli-mascot{position:absolute;display:block;width:112px;height:136px;pointer-events:none;z-index:4;transform-origin:60% 90%;filter:drop-shadow(0 9px 5px #17304f1a)}
.oli-mascot svg{width:100%;height:100%;overflow:visible}
.mascot-calculator{left:calc(50% - 170px);top:62px;transform:rotate(12deg)}
.mascot-lens{left:calc(50% + 30px);top:-102px;transform:rotate(-8deg)}
.mascot-body,.arm,.leg{transform-box:fill-box;transform-origin:center}
.arm-left{transform-origin:90% 15%}.arm-right{transform-origin:10% 85%}.leg{transform-origin:50% 0%}
.mascots-play .mascot-calculator{animation:calculator-arrival 4.4s both cubic-bezier(.35,.05,.25,1)}
.mascots-play .mascot-calculator .mascot-body{animation:calculator-dance 4.4s both}
.mascots-play .mascot-calculator .arm-right{animation:happy-wave .35s 9 alternate}
.mascots-play .mascot-calculator .leg-left{animation:happy-step .3s 10 alternate}
.mascots-play .mascot-calculator .leg-right{animation:happy-step .3s .15s 10 alternate}
.mascots-play .mascot-lens{animation:lens-arrival 4.4s both}
.mascots-play .mascot-lens .arm{animation:happy-wave .28s .8s 10 alternate}
.mascots-play .mascot-lens .leg-left{animation:happy-step .3s 1s 9 alternate}
.mascots-play .mascot-lens .leg-right{animation:happy-step .3s 1.15s 9 alternate}
.mascot-replay{display:block;margin:22px auto 0;padding:5px 12px;border:0;background:transparent;color:#59708b;font:inherit;font-size:.75rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@keyframes calculator-arrival{0%{transform:translate(-40vw,0) rotate(-22deg);opacity:0}5%{opacity:1}18%{transform:translate(-160px,-85px) rotate(12deg)}30%{transform:translate(-110px,0) rotate(-12deg)}43%{transform:translate(-65px,-58px) rotate(14deg)}55%{transform:translate(-25px,0) rotate(-12deg)}66%{transform:translate(-12px,-28px) rotate(14deg)}76%{transform:translate(0,0) rotate(-10deg)}88%{transform:translate(0,-12px) rotate(16deg)}100%{transform:translate(0,0) rotate(12deg)}}
@keyframes calculator-dance{0%,25%,45%,70%,100%{transform:scale(1)}30%,55%,76%{transform:scale(1.08,.91)}36%,60%,85%{transform:scale(.96,1.04)}}
@keyframes lens-arrival{0%,10%{transform:translateY(-100vh) rotate(-100deg);opacity:0}13%{opacity:1}37%{transform:translateY(0) rotate(16deg) scale(1.12,.84)}49%{transform:translateY(-75px) rotate(-24deg)}60%{transform:translateY(0) rotate(12deg) scale(1.06,.93)}70%{transform:translateY(-30px) rotate(-16deg)}79%{transform:translateY(0) rotate(10deg)}87%{transform:translateY(-12px) rotate(-13deg)}94%{transform:translateY(0) rotate(2deg)}100%{transform:translateY(0) rotate(-8deg)}}
@keyframes happy-wave{to{transform:rotate(35deg)}}
@keyframes happy-step{to{transform:rotate(-25deg)}}
@media(max-width:600px){.home-hero>.hero-choices{margin-top:88px}.oli-mascot{width:76px;height:92px}.mascot-calculator{left:calc(50% - 78px);top:-56px}.mascot-lens{left:calc(50% + 8px);top:-72px}.mascot-replay{margin-top:16px}}
@media(prefers-reduced-motion:reduce){.oli-mascot,.oli-mascot *{animation:none!important}.mascot-replay{display:none}}

/* A little celebration alongside the client journey heading. */
.journey-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.journey-heading h2{flex:1}
.journey-friends{position:relative;flex:0 0 240px;width:240px;height:158px;pointer-events:none}
.journey-friends .oli-mascot{width:100px;height:121px;top:28px;transform:none}
.journey-friends .mascot-calculator{left:20px}
.journey-friends .mascot-lens{left:120px}
.journey-friends .mascot-lens svg{transform:scaleX(-1)}
.friends-ready .oli-mascot{opacity:0}
.friends-active .mascot-calculator{animation:friend-magic 2.2s both,friend-hop 1.25s 2.2s infinite ease-in-out}
.friends-active .mascot-lens{animation:friend-magic-right 2.2s both,friend-hop 1.25s 2.38s infinite ease-in-out}
.friends-active .arm-right{animation:friend-five 2.2s both,friend-wave 1.25s 2.2s infinite ease-in-out}
.magic-spark,.high-five-spark{position:absolute;color:#36baf4;font-size:24px;opacity:0}
.spark-one{left:15px;top:12px}.spark-two{right:10px;top:40px}.spark-three{left:100px;top:2px}
.high-five-spark{left:111px;top:56px;color:#efb942;font-size:28px}
.friends-active .magic-spark{animation:magic-twinkle 1.1s both}
.friends-active .spark-two{animation-delay:.12s}.friends-active .spark-three{animation-delay:.22s}
.friends-active .high-five-spark{animation:five-flash .4s 1.2s both}
@keyframes friend-magic{0%{opacity:0;transform:translateY(25px) scale(.05)}22%{opacity:1;transform:translateY(-18px) scale(1.12)}36%{transform:translateY(0) scale(1)}55%,65%{transform:translate(8px,-18px) rotate(4deg)}82%,100%{opacity:1;transform:translate(0,0)}}
@keyframes friend-magic-right{0%{opacity:0;transform:translateY(25px) scale(.05)}22%{opacity:1;transform:translateY(-18px) scale(1.12)}36%{transform:translateY(0) scale(1)}55%,65%{transform:translate(-8px,-18px) rotate(-4deg)}82%,100%{opacity:1;transform:translate(0,0)}}
@keyframes friend-five{0%,30%{transform:rotate(25deg)}52%,66%{transform:rotate(-4deg)}85%,100%{transform:rotate(15deg)}}
@keyframes friend-hop{0%,100%{opacity:1;transform:translateY(0) scale(1.03,.97)}45%{opacity:1;transform:translateY(-19px) scale(.98,1.02)}75%{opacity:1;transform:translateY(0) scale(1.05,.95)}}
@keyframes friend-wave{0%,100%{transform:rotate(15deg)}50%{transform:rotate(-8deg)}}
@keyframes magic-twinkle{0%{opacity:0;transform:scale(0) rotate(-45deg)}40%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:translateY(-30px) scale(.2) rotate(45deg)}}
@keyframes five-flash{0%,100%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.3)}}
@media(max-width:700px){.journey-heading{flex-direction:column;align-items:flex-start;gap:0}.journey-friends{align-self:center;flex-basis:158px;margin-top:-10px}}
@media(prefers-reduced-motion:reduce){.journey-friends .oli-mascot{opacity:1!important;animation:none!important}.journey-friends *{animation:none!important}.magic-spark,.high-five-spark{display:none}}

/* The HR friend rappels down and rests on the demo button. */
.actions:has(.hr-demo-perch){margin-top:112px}
.hr-demo-perch{position:relative;display:inline-flex}
.hr-rope-friend{position:absolute;width:90px;height:110px;right:8px;top:-89px;z-index:4;pointer-events:none;transform-origin:80% 35%}
.hr-rope-friend .oli-mascot{left:0;top:0;width:90px;height:110px;transform:none}
.friend-rope{position:absolute;bottom:69px;right:8px;width:3px;height:120vh;background:repeating-linear-gradient(25deg,#8cabc0 0 3px,#d2e3ed 3px 6px);transform-origin:top;opacity:0}
.rope-ready .hr-rope-friend{opacity:0}
.rope-playing .hr-rope-friend{animation:rope-descent 3s both cubic-bezier(.25,.5,.35,1)}
.rope-playing .friend-rope{animation:rope-release 3.2s both}
.rope-seated .hr-rope-friend{opacity:1}
.rope-seated .leg-left{animation:seated-feet 1.8s infinite ease-in-out}
.rope-seated .leg-right{animation:seated-feet 1.8s -.9s infinite ease-in-out}
.rope-paused .leg{animation-play-state:paused}
@keyframes rope-descent{0%{opacity:0;transform:translateY(-85vh) rotate(-6deg)}8%{opacity:1}42%{transform:translateY(-90px) rotate(6deg)}65%{transform:translateY(-35px) rotate(-4deg)}84%{transform:translateY(3px) rotate(2deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes rope-release{0%,78%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-120vh)}}
@keyframes seated-feet{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(18deg)}}
@media(prefers-reduced-motion:reduce){.hr-rope-friend{opacity:1!important;animation:none!important}.hr-rope-friend *{animation:none!important}.friend-rope{display:none}}

/* Audit's friend climbs down alternating rungs before taking a seat. */
.friend-ladder{position:absolute;right:27px;bottom:58px;width:48px;height:110vh;border-left:5px solid #9cb5ca;border-right:5px solid #9cb5ca;border-radius:4px;background:repeating-linear-gradient(to top,transparent 0 27px,#b8ccdc 27px 32px);box-shadow:2px 0 3px #17304f18;pointer-events:none;opacity:0;z-index:3}
.audit-demo-perch.rope-playing .friend-ladder{animation:ladder-withdraw 3.2s both}
.audit-demo-perch.rope-playing .audit-ladder-friend{animation:ladder-descent 3.2s both linear}
.audit-demo-perch.rope-playing .leg-left,.audit-demo-perch.rope-playing .arm-right{animation:climb-rung .4s 7 alternate}
.audit-demo-perch.rope-playing .leg-right,.audit-demo-perch.rope-playing .arm-left{animation:climb-rung .4s -.4s 7 alternate-reverse}
@keyframes ladder-descent{0%{opacity:0;transform:translateY(-85vh)}5%{opacity:1}20%{transform:translate(-4px,-60vh)}38%{transform:translate(4px,-38vh)}56%{transform:translate(-4px,-20vh)}74%{transform:translate(4px,-65px)}86%{transform:translate(-3px,-25px)}94%{transform:translate(0,3px)}100%{opacity:1;transform:translate(0,0)}}
@keyframes ladder-withdraw{0%,85%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-110vh)}}
@keyframes climb-rung{from{transform:rotate(-18deg)}to{transform:rotate(22deg)}}
@media(prefers-reduced-motion:reduce){.friend-ladder{display:none}}

.mascots-dancing .mascot-body{animation:home-friend-dance 1.8s infinite ease-in-out}
.mascots-dancing .mascot-lens .mascot-body{animation-delay:-.9s}
.mascots-dancing .arm-right{animation:happy-wave .65s infinite alternate ease-in-out}
.mascots-dancing .leg-left{animation:happy-step .65s infinite alternate ease-in-out}
.mascots-dancing .leg-right{animation:happy-step .65s -.65s infinite alternate-reverse ease-in-out}
@keyframes home-friend-dance{0%,100%{transform:translateY(0) rotate(-4deg)}25%{transform:translateY(-9px) rotate(0)}50%{transform:translateY(0) rotate(4deg)}75%{transform:translateY(-9px) rotate(0)}}
.story-screen{position:relative;min-width:0;margin-top:100px}
.story-friends{position:absolute;top:-103px;left:0;width:100%;height:100px;pointer-events:none;overflow:visible;z-index:2}
.story-friends .oli-mascot{width:78px;height:94px;top:0;opacity:0;transform:none}
.story-friends .mascot-calculator{left:calc(50% - 82px)}
.story-friends .mascot-lens{left:calc(50% + 4px)}
.story-star{position:absolute;left:50%;top:50px;font-size:20px;font-style:normal;color:#ffc443;text-shadow:0 1px 4px #ffffff;opacity:0}
.story-star:nth-child(3n){color:#30b7ed}.story-star:nth-child(4n){font-size:14px;color:#8791eb}
.story-celebrating .oli-mascot{animation:story-dash 6.4s both}
.story-celebrating .mascot-lens{animation-name:story-dash-right}
.story-celebrating .leg{animation:happy-step .12s 7 alternate}
.story-celebrating .arm-right{animation:story-blow-wave 6.4s both}
.story-celebrating .story-star{animation:story-stars 1.1s var(--delay) both ease-out}
@keyframes story-dash{0%{opacity:0;transform:translateX(-180px) rotate(-15deg)}4%{opacity:1}13%,76%{opacity:1;transform:translateX(0)}82%{transform:rotate(-8deg)}87%{transform:rotate(8deg)}92%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-180px) scale(.7)}}
@keyframes story-dash-right{0%{opacity:0;transform:translateX(180px) rotate(15deg)}4%{opacity:1}13%,76%{opacity:1;transform:translateX(0)}82%{transform:rotate(8deg)}87%{transform:rotate(-8deg)}92%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(180px) scale(.7)}}
@keyframes story-blow-wave{0%,12%{transform:rotate(20deg)}16%,72%{transform:rotate(-40deg)}78%,88%{transform:rotate(30deg)}83%,93%{transform:rotate(-20deg)}100%{transform:rotate(0)}}
@keyframes story-stars{0%{opacity:0;transform:translate(0,0) scale(.1)}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.3) rotate(120deg)}}
@media(max-width:600px){.story-screen{grid-row:1}.story-friends{overflow:hidden;top:-100px}.story-star{--x:0px}}
@media(prefers-reduced-motion:reduce){.story-friends{display:none}.story-screen{margin-top:0}.mascots-dancing *{animation:none!important}}
@media(max-width:600px){
 .product-hero .actions:has(.hr-demo-perch){display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:8px;align-items:stretch}
 .product-hero .hr-demo-perch{min-width:0;display:flex}
 .product-hero .actions:has(.hr-demo-perch) .button{width:100%;min-width:0;min-height:48px;padding:11px 6px;font-size:clamp(10px,3vw,13px);white-space:nowrap;display:flex;align-items:center;justify-content:center}
 .product-hero .hr-rope-friend{right:4px}
}

@media(min-width:1000px){.home-hero .lead{max-width:1120px;width:100%;font-size:clamp(16px,1.45vw,20px);margin-left:auto;margin-right:auto}.home-hero .intro-line{display:block;white-space:nowrap}}

/* Four small comic performances, one for each client testimonial. */
[data-greeting="marlyn"].story-celebrating .mascot-calculator{animation-name:story-stumble}
[data-greeting="marlyn"].story-celebrating .mascot-lens{animation-name:story-catch}
[data-greeting="dante"].story-celebrating .mascot-calculator{animation-name:story-peek}
[data-greeting="dante"].story-celebrating .mascot-lens{animation-name:story-detective}
[data-greeting="marco"].story-celebrating .mascot-calculator{animation-name:story-five-left}
[data-greeting="marco"].story-celebrating .mascot-lens{animation-name:story-five-right}
[data-greeting="marco"] .mascot-lens svg{transform:scaleX(-1)}
[data-greeting="adrian"].story-celebrating .mascot-calculator{animation-name:story-bow-left}
[data-greeting="adrian"].story-celebrating .mascot-lens{animation-name:story-bow-right}
[data-greeting="dante"] .story-star{color:#44bbed;font-size:14px}
[data-greeting="adrian"] .story-star:nth-child(2n){color:#ac89ec}
@keyframes story-stumble{0%{opacity:0;transform:translateX(-180px) rotate(-15deg)}5%{opacity:1}16%{transform:translateX(0)}23%{transform:translate(24px,5px) rotate(38deg)}30%{transform:translate(15px,-6px) rotate(-12deg)}38%,72%{opacity:1;transform:translate(0,0)}80%{transform:rotate(-8deg)}88%{transform:rotate(8deg)}92%{opacity:1}100%{opacity:0;transform:translateX(-180px)}}
@keyframes story-catch{0%{opacity:0;transform:translateX(180px)}5%{opacity:1}16%{transform:translateX(0)}23%,28%{transform:translateX(-15px) rotate(-18deg)}38%,72%{opacity:1;transform:translateX(0)}80%{transform:rotate(8deg)}88%{transform:rotate(-8deg)}92%{opacity:1}100%{opacity:0;transform:translateX(180px)}}
@keyframes story-peek{0%{opacity:0;transform:translate(-70px,90px) scale(.7)}12%{opacity:1;transform:translate(-20px,35px) rotate(-12deg)}23%{transform:translate(15px,35px) rotate(12deg)}34%{transform:translate(-8px,-15px)}43%,72%{opacity:1;transform:translate(0,0)}82%{transform:rotate(-12deg)}92%{opacity:1}100%{opacity:0;transform:translateY(90px) scale(.6)}}
@keyframes story-detective{0%{opacity:0;transform:translateX(180px)}8%{opacity:1}20%{transform:translate(-20px,0) rotate(-22deg)}30%{transform:translate(-8px,-12px) rotate(18deg)}40%{transform:translate(8px,0) rotate(-12deg)}50%,74%{opacity:1;transform:translate(0,0)}84%{transform:rotate(12deg)}92%{opacity:1}100%{opacity:0;transform:translateX(180px)}}
@keyframes story-five-left{0%{opacity:0;transform:translateX(-180px)}6%{opacity:1}16%{transform:translateX(0)}23%,28%{transform:translate(4px,-24px) rotate(8deg)}36%{transform:translateY(0) scale(1.08,.92)}46%,72%{opacity:1;transform:translateY(0)}80%{transform:translateY(-12px) rotate(-8deg)}90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateX(-180px)}}
@keyframes story-five-right{0%{opacity:0;transform:translateX(180px)}6%{opacity:1}16%{transform:translateX(0)}23%,28%{transform:translate(-4px,-24px) rotate(-8deg)}36%{transform:translateY(0) scale(1.08,.92)}46%,72%{opacity:1;transform:translateY(0)}80%{transform:translateY(-12px) rotate(8deg)}90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateX(180px)}}
@keyframes story-bow-left{0%{opacity:0;transform:translateX(-180px) rotate(-25deg)}6%{opacity:1}18%{transform:translateX(0) rotate(12deg)}28%{transform:rotate(-15deg)}40%,65%{opacity:1;transform:rotate(0)}75%,82%{transform:rotate(22deg) scaleY(.85)}90%{opacity:1;transform:rotate(0)}100%{opacity:0;transform:translate(-150px,20px)}}
@keyframes story-bow-right{0%{opacity:0;transform:translateX(180px) rotate(25deg)}6%{opacity:1}18%{transform:translateX(0) rotate(-12deg)}28%{transform:rotate(15deg)}40%,65%{opacity:1;transform:rotate(0)}75%,82%{transform:rotate(-22deg) scaleY(.85)}90%{opacity:1;transform:rotate(0)}100%{opacity:0;transform:translate(150px,20px)}}

/* A curious hello for Insights; the reading surface stays still. */
.insights-intro{position:relative;padding-right:180px}
.insights-friend{position:absolute;right:35px;top:120px;width:100px;height:125px;pointer-events:none}
.insights-friend .oli-mascot{left:0;top:0;width:100px;height:121px;transform:rotate(-6deg)}
.insights-greeting .oli-mascot{animation:insights-curious 2.6s both ease-in-out}
.insights-greeting .arm-right{animation:happy-wave .5s .8s 3 alternate ease-in-out}
.insights-intro + .blog-list .post-card{transition:transform .22s ease,box-shadow .22s ease}
@media(hover:hover){.insights-intro + .blog-list .post-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px #183b7115}}
.insights-intro + .blog-list .post-card:focus-within{transform:translateY(-3px)}
@keyframes insights-curious{0%{opacity:0;transform:translateY(12px) rotate(-12deg)}30%{opacity:1;transform:translateY(0) rotate(8deg)}60%{transform:rotate(-10deg)}100%{opacity:1;transform:rotate(-6deg)}}
@media(max-width:800px){.insights-intro{padding-right:0}.insights-friend{position:relative;top:auto;right:auto;width:65px;height:79px;margin-top:10px}.insights-friend .oli-mascot{width:65px;height:79px}}
@media(prefers-reduced-motion:reduce){.insights-friend *{animation:none!important}.insights-intro + .blog-list .post-card{transition:none!important;transform:none!important}}