/* Landing spaces are part of the page, separate from the floating character. */
[data-companion-stop]{position:relative}
[data-stop-kind=section]{padding-top:max(150px,8vw)}
.companion-perch{position:absolute;top:6px;right:8.3vw;width:150px;height:130px;pointer-events:none;z-index:3}
[data-stop-side=left]>.companion-perch{right:auto;left:8.3vw}
.companion-perch:after{content:'';position:absolute;bottom:0;left:30%;width:40%;height:2px;border-radius:50%;background:#c99ea633;transform:scaleX(.6);opacity:0;transition:opacity .3s,transform .3s}
[data-companion-active]>.companion-perch:after{opacity:1;transform:scaleX(1)}
[data-stop-kind=hero]>.companion-perch{top:auto;bottom:26px;left:auto;right:calc(50% - 120px)}
[data-stop-kind=intro]>.companion-perch{top:87px;right:8.3vw;left:auto}
.inner [data-stop-kind=intro]{padding-top:225px}
[data-stop-kind=picture]>.companion-perch{top:12px;right:2%;left:auto}
.method-step[data-companion-stop]{padding-top:140px}
.offer-detail[data-companion-stop]{padding-top:140px}
.companion{--pet-size:150px;position:fixed;inset:0 auto auto 0;width:var(--pet-size);height:var(--pet-size);z-index:70;pointer-events:none;will-change:transform}
#companion-button{position:relative;width:100%;height:100%;border-radius:45%;background:none;touch-action:manipulation}
.companion-art,.mini-companion{background-image:url('/assets/companion-cute.png');background-size:300% 200%;background-position:0 0}
.companion-art{width:100%;height:100%;transform-origin:50% 84%;transition:none;filter:drop-shadow(0 5px 4px #70424b12)}
#companion-button:hover .companion-art,.companion[data-state=wave] .companion-art{background-position:50% 0}
.companion[data-state=crouch] .companion-art{background-position:100% 0}
.companion[data-state=air] .companion-art{background-position:0 100%}
.companion[data-state=happy] .companion-art{background-position:50% 100%}
.companion[data-state=attentive] .companion-art{background-position:100% 100%}
.companion-shadow{position:absolute;left:30%;bottom:13%;width:40%;height:7%;border-radius:50%;background:#724f5020;filter:blur(4px);transform:scaleX(var(--shadow-scale,1));transition:transform .2s;pointer-events:none}
.companion-note{box-sizing:border-box;width:260px;padding:13px 7px 13px 17px;min-height:85px;box-shadow:0 5px 25px #4826370b;border-radius:20px 20px 20px 5px}
.companion[data-bubble-side=left] .companion-note{border-radius:20px 20px 5px 20px}
#companion-invite{font-size:14px;line-height:1.6}
.companion-note #hint-dismiss{min-width:32px;min-height:40px;line-height:1}
#companion-rest{right:5px;bottom:0;width:32px;height:32px;opacity:1;font-size:20px;line-height:1;background:#fffc;border-color:#e9dce0}
.companion[data-travel=jumping] .companion-note{visibility:hidden}
.companion[data-travel=jumping] #companion-rest{visibility:hidden}
.companion[data-state=idle] .companion-art{animation:companion-breathe 5s ease-in-out infinite}
@keyframes companion-breathe{0%,100%{scale:1}50%{scale:1.015 .99}}
.mini-companion{width:64px;height:64px}
#companion-button:focus-visible{outline:2px solid #a84251;outline-offset:-12px}
#companion-rest:focus-visible,#companion-invite:focus-visible,#hint-dismiss:focus-visible{outline:2px solid #a84251;outline-offset:3px}
@media(max-width:999px){.companion{--pet-size:126px}.companion-perch{width:126px;height:110px}.companion-note{padding:12px 5px 12px 13px}#companion-invite{font-size:13px}[data-stop-kind=section]{padding-top:135px}[data-stop-kind=intro]>.companion-perch{top:90px}.inner [data-stop-kind=intro]{padding-top:220px}}
@media(max-width:700px){.companion{--pet-size:120px}.companion-perch{width:120px;height:103px;right:7vw;top:7px}[data-stop-side=left]>.companion-perch{left:7vw}[data-stop-kind=hero]>.companion-perch{right:14px;left:auto;bottom:auto;top:calc(100% - 245px)}[data-stop-kind=intro]>.companion-perch{left:auto;right:7vw;top:86px}.inner [data-stop-kind=intro]{padding-top:212px}[data-stop-kind=picture]>.companion-perch{left:auto;right:3px;top:3px}.offer-detail[data-companion-stop],.method-step[data-companion-stop]{padding-top:128px}#companion-rest{right:5px;bottom:-1px;min-width:32px;min-height:32px}.companion-note{min-height:80px}#companion-invite{font-size:13px}.guide-disclosure{font-size:12px}.guide-context{font-size:13px}.guide-context button{font-size:12px}}
@media(prefers-reduced-motion:reduce){.companion-art{animation:none!important}.companion-perch:after{transition:none}.companion-shadow{transition:none}}

/* Transparent sprite margins do not intercept clicks on the page. */
#companion-button{pointer-events:none}
#companion-button:after{content:"";position:absolute;inset:15% 15% 10%;border-radius:40%;pointer-events:auto}
.companion-art,.companion-shadow{pointer-events:none}

/* When a mobile section is long, a distinct bottom shelf keeps the reading area
   separate from the companion. Scroll clearance lets every final control pass it. */
.companion-shelf{display:none}
@media(max-width:700px){
 html{scroll-padding-bottom:150px}
 body{padding-bottom:0}
 .site-footer{padding-bottom:145px}
 .companion-shelf{position:fixed;inset:auto 0 0;height:104px;z-index:69;background:#fff;border-top:1px solid #f0e4e7;pointer-events:none}
 body:has(.companion[data-docked=true]:not([hidden])) .companion-shelf{display:block}
 body.guide-open .companion-shelf,body:has(dialog[open]) .companion-shelf{display:none}
 .companion[data-docked=true] .companion-shadow{opacity:.5}
}

@media(max-width:700px){
 .companion-shelf{align-items:center;justify-content:flex-end;padding:10px 12px 10px 126px}
 body:has(.companion[data-docked=true]:not([hidden])) .companion-shelf{display:flex}
 body:has(.companion[data-bubble-side=left]) .companion-shelf{padding-left:18px;padding-right:126px;justify-content:flex-start}
 .companion-shelf button{font:400 13px/1.6 Jakarta;color:#60515a;text-align:left;border:0;background:transparent;padding:8px;pointer-events:auto;width:100%;cursor:pointer}
 .companion-shelf strong{display:block;color:#a84251;font-weight:600}
 .companion[data-docked=true] .companion-note{display:none}
 body.guide-open .companion-shelf,body:has(dialog[open]) .companion-shelf{display:none}
}

body.guide-open .companion-shelf,body:has(dialog[open]) .companion-shelf{display:none!important}
.inner .menu-toggle{border-radius:50%}