/* Five characters, one conversation. The cast has no enclosing card or background. */
.hero-mascot-ensemble{min-height:850px;isolation:isolate;background:radial-gradient(ellipse at 67% 30%,#c5b6e4a6,transparent 50%),radial-gradient(ellipse at 85% 90%,#eccfbaa6,transparent 45%),radial-gradient(ellipse at 35% 100%,#bcdae380,transparent 50%),#ecedf6}
.hero-mascot-ensemble .hero-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.96fr);gap:38px;align-items:center;position:relative;z-index:2;padding-top:150px;padding-bottom:100px}
.hero-mascot-ensemble .hero-copy{width:100%;max-width:none;padding:35px;background:linear-gradient(135deg,#ffffff69,#edf1fa45 60%,#ffffff59);backdrop-filter:none;-webkit-backdrop-filter:none}
.hero-mascot-ensemble .hero-content h1{font-size:clamp(44px,4.25vw,65px);line-height:1.08;letter-spacing:-.06em;max-width:100%;text-wrap:balance}
.hero-mascot-ensemble .hero-content .hero-description{font-size:15px;max-width:420px;line-height:1.85}
.hero-mascot-ensemble .hero-content .button-row{gap:13px 20px;flex-wrap:wrap}
.hero-mascot-ensemble .hero-content .text-link{font-size:12px;min-height:44px}
.hero-mascot-ensemble .hero-copy-note{font-size:11px}
.hero-mascot-ensemble .hero-foot{z-index:1;bottom:26px}
.home-cast{position:relative;width:100%;height:570px;background:none;border:0;box-shadow:none;isolation:isolate;min-width:0}
.home-cast-actor{position:absolute;left:var(--actor-x);top:var(--actor-y);width:var(--actor-size);height:var(--actor-size);transform:translate(-50%,-50%);isolation:isolate;z-index:1}
.home-cast-actor[data-active=true]{z-index:2}
.cast-motion{position:relative;width:100%;height:100%;transform:translateY(0) scale(1);transition:transform 700ms var(--ease-out)}
.home-cast-actor[data-active=true] .cast-motion{transform:translateY(-10px) scale(1.05)}
.cast-character{display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cast-companion{cursor:default}
.cast-character>.product-mascot{--mascot-size:var(--actor-size)}
.cast-character:focus-visible{outline:2px solid #6f57a1;outline-offset:8px}
.cast-bubble{position:absolute;bottom:calc(100% + 8px);left:50%;width:max-content;max-width:270px;min-width:180px;padding:16px 18px;border:1px solid #ffffffc7;border-radius:20px 20px 20px 7px;background:linear-gradient(135deg,#fffffff0,#f4f2fbbf);box-shadow:inset 0 1px 1px white,0 10px 30px #71617f10;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,8px) scale(.97);transform-origin:50% bottom;transition:opacity 180ms var(--ease-out),transform 220ms var(--ease-out),visibility 0s 180ms;color:#3e364b}
.home-cast-actor[data-active=true] .cast-bubble{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1);transition-delay:0s}
.cast-bubble::after{content:'';position:absolute;left:50%;top:100%;width:9px;height:9px;border-right:1px solid #ffffffb3;border-bottom:1px solid #ffffffb3;background:#f4f2fbe6;transform:translate(-50%,-5px) rotate(45deg);pointer-events:none}
.cast-bubble p{font-size:14px;line-height:1.6;letter-spacing:-.01em;color:#3e364b;max-width:234px;margin:0}
.cast-bubble a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;font-size:11px;color:#65577e;margin-top:6px;line-height:1.5}
.cast-bubble a svg{width:16px;height:16px;flex:none}
.cast-mobile-dialogue{display:none}
.home-cast-actor[data-home-actor=supplements] .cast-bubble{left:0;transform:translate(0,8px) scale(.97);transform-origin:20% bottom}
.home-cast-actor[data-home-actor=supplements][data-active=true] .cast-bubble{transform:translate(0,0) scale(1)}
.home-cast-actor[data-home-actor=cosmetics] .cast-bubble{left:auto;right:0;transform:translate(0,8px) scale(.97);transform-origin:80% bottom}
.home-cast-actor[data-home-actor=cosmetics][data-active=true] .cast-bubble{transform:translate(0,0) scale(1)}
.home-cast-actor[data-home-actor=supplements] .cast-bubble::after{left:26%}
.home-cast-actor[data-home-actor=cosmetics] .cast-bubble::after{left:auto;right:24%}
.home-cast .product-mascot.cast-talking .pm-mouth{opacity:1;transform-box:fill-box;transform-origin:center;animation:cast-mouth 680ms var(--ease-in-out) infinite}
.home-cast .product-mascot.cast-talking .pm-smile{opacity:0}
@keyframes cast-mouth{0%,100%{transform:scaleY(.55)}45%{transform:scaleY(1)}}
.home-cast[data-cast-paused] .cast-motion,.home-cast[data-cast-paused] .product-mascot *{animation-play-state:paused!important}
.home-cast[data-cast-instant] .cast-motion,.home-cast[data-cast-instant] .cast-bubble{transition:none!important}
.home-cast[data-cast-manual] .cast-motion{transition-duration:220ms}
.home-cast[data-cast-instant] .cast-motion{transform:none!important}
.home-cast[data-cast-instant] .cast-talking .pm-mouth{animation:none!important}
@media(hover:hover) and (pointer:fine){.cast-character:hover .product-mascot:not(.cast-talking) .pm-cheek{opacity:.8}}
@media(max-width:1100px){.hero-mascot-ensemble .hero-content{gap:25px;padding-top:140px}.hero-mascot-ensemble .hero-copy{padding:30px 27px}.hero-mascot-ensemble .hero-content h1{font-size:clamp(40px,4.6vw,54px)}.home-cast{height:540px}.home-cast-actor{--actor-size:116px!important}.home-cast-actor[data-home-actor=commerce]{--actor-size:148px!important}.cast-bubble{max-width:225px;padding:13px 15px;min-width:165px}.cast-bubble p{font-size:13px}.cast-bubble a{font-size:10px}}
@media(max-width:900px){.hero-mascot-ensemble .hero-content{grid-template-columns:1fr;gap:24px;padding-top:138px;padding-bottom:95px}.hero-mascot-ensemble .hero-copy{max-width:680px;width:100%;margin-inline:auto}.hero-mascot-ensemble .hero-content h1{font-size:clamp(42px,6.4vw,58px)}.hero-mascot-ensemble .hero-content .hero-description{max-width:550px}.home-cast{max-width:620px;justify-self:center;height:535px}.home-cast-actor{--actor-size:138px!important}.home-cast-actor[data-home-actor=commerce]{--actor-size:162px!important}.cast-bubble{max-width:260px;padding:15px 17px}.cast-bubble p{font-size:14px}.cast-bubble a{font-size:11px}}
@media(max-width:700px){.hero-mascot-ensemble{min-height:0}.hero-mascot-ensemble .hero-content{width:calc(100% - 32px);padding-top:114px;padding-bottom:92px;gap:40px}.hero-mascot-ensemble .hero-copy{padding:29px 23px;max-width:none}.hero-mascot-ensemble .hero-content h1{font-size:clamp(32px,8.1vw,47px);line-height:1.09;letter-spacing:-.058em}.hero-mascot-ensemble .hero-content .hero-description{font-size:14px;line-height:1.85;max-width:440px}.hero-mascot-ensemble .hero-content .button-row{gap:7px 12px}.hero-mascot-ensemble .hero-content .button{font-size:11px;min-height:49px}.hero-mascot-ensemble .hero-content .text-link{font-size:11px}.hero-mascot-ensemble .hero-copy-note{font-size:10px}.home-cast{height:500px;max-width:400px}.home-cast-actor{--actor-size:90px!important}.home-cast-actor[data-home-actor=commerce]{--actor-size:126px!important}.cast-bubble{min-width:150px;max-width:210px;padding:12px 14px;bottom:calc(100% + 9px);border-radius:17px 17px 17px 6px}.cast-bubble p{font-size:12px;max-width:170px}.cast-bubble a{font-size:10px;min-height:44px;margin-top:3px}.home-cast-actor[data-home-actor=orbit],.home-cast-actor[data-home-actor=supplements]{left:17%}.home-cast-actor[data-home-actor=cloud],.home-cast-actor[data-home-actor=cosmetics]{left:83%}.hero-mascot-ensemble .hero-foot-right{display:none}.hero-mascot-ensemble .hero-foot{font-size:9px;bottom:22px;gap:15px}.hero-mascot-ensemble .hero-foot-left{max-width:210px}}
@media(max-width:360px){.hero-mascot-ensemble .hero-copy{padding:27px 18px}.hero-mascot-ensemble .hero-content h1{font-size:28px}.home-cast{height:455px}.home-cast-actor{--actor-size:80px!important}.home-cast-actor[data-home-actor=commerce]{--actor-size:111px!important}.cast-bubble{max-width:185px;min-width:140px;padding:11px 12px}.cast-bubble p{font-size:11px}.cast-bubble a{font-size:9px}.hero-mascot-ensemble .hero-content .button-row{flex-direction:column;align-items:flex-start}}
/* On phones, keep one hero action and the dialogue above the ensemble. */
@media(max-width:700px){
 .home-cast{height:535px}
 .home-cast-actor>.cast-bubble{display:none}
 .cast-mobile-dialogue{display:block;left:50%;right:auto;top:0;bottom:auto;width:225px;max-width:calc(100% - 16px);opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%);border-radius:17px;transition:none}
 .cast-mobile-dialogue p{max-width:none}
 .cast-mobile-dialogue::after{display:none}
 .home-cast-actor[data-home-actor=orbit],.home-cast-actor[data-home-actor=cloud]{top:32%}
 .home-cast-actor[data-home-actor=commerce]{top:58%}
 .home-cast-actor[data-home-actor=supplements],.home-cast-actor[data-home-actor=cosmetics]{top:88%}
}
@media(max-width:360px){.home-cast{height:500px}}
/* Keep the single phone action after rotation as well. */
@media(max-width:700px),(max-width:1050px) and (max-height:500px){.hero-mascot-ensemble .hero-copy>.button-row>.text-link{display:none}}
@media(prefers-reduced-motion:reduce){.home-cast .cast-motion{transition:none!important;transform:none!important}.home-cast .cast-bubble{transition:none!important}.home-cast .product-mascot *{animation:none!important;transition:none!important}}
@media(prefers-contrast:more){.cast-bubble{background:#faf8fe;border-color:#786491}.cast-bubble p,.cast-bubble a{color:#40314f}}

.hero-mascot-ensemble .shopify-merchant-mark{min-height:44px;max-width:none;gap:10px;width:fit-content}
.shopify-merchant-mark img{display:block;width:24px;height:28px;object-fit:contain;flex:none}
.shopify-merchant-mark:focus-visible{outline:2px solid #756583;outline-offset:4px;border-radius:4px}
@media(hover:hover) and (pointer:fine){.shopify-merchant-mark:hover>span:not(.sr-only){text-decoration:underline;text-underline-offset:3px}}