/* A welcoming front page, led by Pip. Keep product controls calm and legible. */
.hero{padding-top:46px;overflow:hidden}
.hero>.eyebrow{background:#fcf6d9;color:#5e5637;border:1px solid #f0e7bd}
.brand-motion{display:flex;flex-direction:column;gap:10px;width:480px;max-width:100%;min-height:254px;text-align:center;margin-top:20px}
.brand-motion:before{content:'';position:absolute;width:198px;height:198px;top:1px;left:50%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#fff1be 0,#fcf7e7 60%,#ffffff00 72%);z-index:-1}
.brand-trail{display:none}
.mascot-hello{border:0;background:transparent;display:grid;place-items:center;width:194px;height:180px;padding:8px;position:relative;z-index:1;cursor:pointer;border-radius:50%}
.brand-motion .mascot-hello>.link-mascot{width:165px;height:165px}
.mascot-hello:focus-visible{outline:3px solid #847500;outline-offset:3px;border-radius:50%}
.mascot-hello:hover .mascot-image{filter:brightness(1.035)}
.mascot-hello:disabled{opacity:1;cursor:default}
.brand-motion strong{font-size:28px;letter-spacing:-1px}
.brand-motion>div>span{font-size:12px;margin-top:4px}
.pip-greeting{min-height:20px;margin:4px 0 0;color:#74662f;font-size:11px;line-height:1.8;max-width:340px}
.has-javascript .mascot-hello.is-waving .link-mascot{animation:pip-hello .75s var(--ease) both}
.pip-orbit{position:absolute;display:flex;align-items:center;gap:8px;border:1px solid #e9e8df;background:white;padding:9px 13px;border-radius:24px;font-size:11px;box-shadow:0 5px 18px #35371b06;z-index:0}
.pip-orbit .icon{height:14px;width:14px;color:#77775d}
.pip-orbit.links{top:49px;left:10px;transform:rotate(-9deg);background:#f4f7ec}
.pip-orbit.qr{top:89px;right:0;transform:rotate(8deg);background:#f9f3fd}
.pip-orbit.pages{top:139px;left:6px;transform:rotate(5deg);background:#fff3ed}
.pip-star{position:absolute;width:10px;height:10px;background:#e6cc52;clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%);top:30px;right:75px}
.pip-star.second{top:151px;left:137px;width:7px;height:7px;background:#c3cfa8}
.has-javascript .pip-star{animation:happy-sparkle 3.2s ease-in-out infinite}
.hero h1{margin-top:18px}
.hero .button.primary{background:#f1db64;color:#302c1d;box-shadow:0 4px 0 #d6c25b40;border:1px solid #e7ce53}
.hero .button.primary:hover{background:#f6e57e}
.hero .hero-copy{max-width:700px}
.motion-section{background:#f8f8f1;border:1px solid #ededdf}
.case-stage{border:1px solid #eeeee5}
.business-stage{background:#f4f7ee}.agency-stage{background:#f6f3fa;border-color:#ece7f0}.affiliate-stage{background:#fff5ee;border-color:#f0e7de}
.case-kicker{display:inline-block;padding:7px 12px;border-radius:20px;background:#f8f7ef;letter-spacing:1.2px;color:#66664e}
.case-guide{position:absolute;top:14px;left:18px;display:flex;gap:8px;align-items:center;max-width:calc(100% - 113px);z-index:2;pointer-events:none}
.case-guide>.link-mascot{width:35px;height:35px;flex-shrink:0}
.case-guide .smile{border-width:1px}.case-guide .mascot-spark{width:3px;height:3px;right:-2px;top:5px}
.case-guide>span:last-child{font-size:10px;line-height:1.55;color:#6b6c5c;padding:7px 10px;border:1px solid #e5e7db;background:#ffffffc9;border-radius:15px 15px 15px 3px}
.has-javascript .is-running .case-guide{animation:happy-guide .8s var(--ease) .3s both}
.case-guide .link-mascot{animation:none!important}
.case-guide .eye{animation:none!important}
.case-copy>.text-link{border-bottom:1px solid #dedfce;padding-bottom:2px}
@keyframes pip-hello{0%,100%{transform:translateY(0) rotate(-8deg)}25%{transform:translateY(-13px) rotate(9deg)}55%{transform:translateY(-2px) rotate(-15deg)}75%{transform:translateY(-7px) rotate(3deg)}}
@keyframes happy-sparkle{0%,100%{transform:scale(.75) rotate(0);opacity:.6}50%{transform:scale(1.1) rotate(25deg);opacity:1}}
@keyframes happy-guide{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
@media(max-width:720px){.hero{padding-top:32px}.brand-motion{width:340px;min-height:232px;margin-top:17px;gap:7px}.mascot-hello{width:160px;height:154px}.brand-motion .mascot-hello>.link-mascot{width:140px;height:140px}.brand-motion:before{width:174px;height:174px}.brand-motion strong{font-size:25px}.brand-motion>div>span{font-size:10px}.pip-orbit{font-size:9px;gap:6px;padding:8px 10px}.pip-orbit.links{left:0;top:45px}.pip-orbit.qr{right:0;top:85px}.pip-orbit.pages{left:0;top:125px}.pip-orbit .icon{width:12px;height:12px}.pip-star{top:20px;right:50px}.pip-star.second{left:96px;top:158px}.pip-greeting{font-size:10px}.hero h1{margin-top:17px}.case-guide{top:12px;left:13px;gap:6px;max-width:calc(100% - 96px)}.case-guide>span:last-child{font-size:9px;padding:6px 8px}.case-guide>.link-mascot{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){.intro{animation:none!important;opacity:1;transform:none}.mascot-hello *,.pip-star,.case-guide{animation:none!important;transition:none!important}}