/* Curiosul (Dot), Optimistul (Spark) and Timidul (Drop), owner archive 2026-10-02. */
.product-mascot{--mascot-size:58px;--pm-shade:#2341a7;display:inline-block;position:relative;flex:none;width:var(--mascot-size);height:var(--mascot-size);vertical-align:middle;isolation:isolate}
.product-mascot.mascot-spark{--pm-shade:#df6219}
.product-mascot.mascot-drop{--pm-shade:#6331b1}
.product-mascot>.pm-svg{position:absolute;inset:-32%;width:164%;height:164%;display:block;overflow:visible;pointer-events:none}
.product-mascot>.wa-agent-avatar{display:block;width:100%;height:100%;object-fit:contain}
.product-mascot .pm-coat{filter:none}
.product-mascot .pm-shadow{display:none}
.product-mascot :is(.pm-tilt,.pm-float,.pm-reaction,.pm-eyes,.pm-work-dot,.pm-wait-bubble,.pm-focus){transform-box:fill-box;transform-origin:center}
.product-mascot .pm-tilt{transition:transform 220ms var(--ease-out)}
.product-mascot .pm-float{animation:pm-breathe 4.8s var(--ease-in-out) infinite}
.mascot-spark .pm-float{animation:pm-twinkle 5.4s var(--ease-in-out) infinite}
.mascot-drop .pm-float{animation:pm-sway 5s var(--ease-in-out) infinite;transform-origin:50% 90%}
.product-mascot .pm-eyes{animation:pm-blink 5.7s linear infinite}
.mascot-spark .pm-eyes{animation-delay:-3.1s}
.mascot-drop .pm-eyes{animation-delay:-2.2s}
.product-mascot .pm-gaze{transition:transform 180ms var(--ease-out)}
.product-mascot .pm-reaction{transition:transform 220ms var(--ease-out)}
.product-mascot.mascot-happy .pm-reaction{transform:translateY(-15px) rotate(-9deg) scale(1.07,.93)}
.product-mascot .pm-mouth{opacity:0;transition:opacity 160ms var(--ease-out)}
.product-mascot.mascot-happy .pm-mouth{opacity:1}
.product-mascot .pm-smile{opacity:1;transition:opacity 160ms var(--ease-out)}
.product-mascot.mascot-happy .pm-smile{opacity:0}
.product-mascot .pm-cheek{opacity:.5}
.product-mascot.mascot-happy .pm-cheek{opacity:.8}
.product-mascot :is(.pm-work-indicator,.pm-wait-indicator,.pm-work-glasses,.pm-concentrated-mouth){opacity:0;transition:opacity 180ms var(--ease-out)}
.product-mascot .pm-focus{transition:transform 220ms var(--ease-out)}
.product-mascot[data-mascot-state=working] .pm-float{animation:pm-working 7.2s var(--ease-in-out) infinite}
.product-mascot[data-mascot-state=working] .pm-gaze{animation:none;transform:translate(0,0)}
.product-mascot[data-mascot-state=working] .pm-focus{animation:pm-read-think 7.2s var(--ease-out) infinite}
.product-mascot[data-mascot-state=working] .pm-eyes{animation:pm-work-blink 7.2s linear infinite;animation-delay:0s}
.product-mascot[data-mascot-state=working] :is(.pm-work-glasses,.pm-concentrated-mouth,.pm-work-indicator){opacity:1}
.product-mascot[data-mascot-state=working] .pm-smile{opacity:0}
.product-mascot[data-mascot-state=working].mascot-happy .pm-concentrated-mouth{opacity:0}
.product-mascot[data-mascot-state=working] .pm-work-dot{animation:pm-typing 1.2s var(--ease-in-out) infinite}
.product-mascot[data-mascot-state=working] .pm-work-dot:nth-child(2){animation-delay:160ms}
.product-mascot[data-mascot-state=working] .pm-work-dot:nth-child(3){animation-delay:320ms}
.product-mascot[data-mascot-state=waiting] .pm-float{animation:pm-waiting 6s var(--ease-in-out) infinite}
.product-mascot[data-mascot-state=waiting] .pm-gaze{animation:pm-looking 6s var(--ease-in-out) infinite}
.product-mascot[data-mascot-state=waiting] .pm-wait-indicator{opacity:1}
.product-mascot[data-mascot-state=waiting] .pm-wait-bubble{animation:pm-asking 6s var(--ease-in-out) infinite}
.product-mascot.mascot-paused *,html[data-scrolling=true] .product-mascot *{animation-play-state:paused!important}
.product-mascot.mascot-paused :is(.pm-gaze,.pm-tilt,.pm-reaction){transform:none!important}
html[data-optical-input=keyboard] .product-mascot :is(.pm-gaze,.pm-tilt,.pm-reaction){transition:none!important;transform:none!important}
@keyframes pm-breathe{0%,100%{transform:translateY(0) rotate(-2deg) scale(1.02,.98)}50%{transform:translateY(-10px) rotate(2deg) scale(.98,1.02)}}
@keyframes pm-twinkle{0%,100%{transform:rotate(-9deg) translateY(0) scale(.98)}50%{transform:rotate(9deg) translateY(-8px) scale(1.03)}}
@keyframes pm-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-3px)}}
@keyframes pm-blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.08)}}
@keyframes pm-working{0%,100%{transform:translateY(0) rotate(0)}20%,45%{transform:translateY(2px) rotate(-1.5deg)}60%,78%{transform:translateY(-5px) rotate(5deg)}88%{transform:translateY(1px) rotate(0)}}
@keyframes pm-read-think{0%,5%,100%{transform:translate(-4px,2px) scale(.9,.8)}12%,17%{transform:translate(0,2px) scale(.9,.8)}24%,28%{transform:translate(4px,2px) scale(.9,.8)}31%,35%{transform:translate(-4px,3px) scale(.9,.8)}42%,46%{transform:translate(1px,3px) scale(.9,.8)}51%,54%{transform:translate(4px,3px) scale(.9,.8)}61%,77%{transform:translate(3px,-4px) scale(.9,.94)}84%,91%{transform:translate(0,0) scale(.9,.86)}97%{transform:translate(-4px,2px) scale(.9,.8)}}
@keyframes pm-work-blink{0%,28%,32%,55%,59%,89%,93%,100%{transform:scaleY(1)}30%,57%,91%{transform:scaleY(.08)}}
@keyframes pm-typing{0%,65%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:1}}
@keyframes pm-waiting{0%,30%,100%{transform:translateY(0) rotate(0)}50%,70%{transform:translateY(-4px) rotate(6deg)}}
@keyframes pm-looking{0%,30%,100%{transform:translate(0,0)}50%,70%{transform:translate(5px,-4px)}}
@keyframes pm-asking{0%,30%,100%{transform:translateY(0)}50%,70%{transform:translateY(-5px)}}
/* Keep product icon dimensions; the AI mascots have no enclosing tile. */
.mini-icon:has(.product-mascot),
.product-icon:has(.product-mascot){
  display:grid;
  place-items:center;
  isolation:isolate;
  overflow:visible;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.products-menu a>.mini-icon:has(.product-mascot){
  width:54px;
  height:58px;
  flex:0 0 54px;
  overflow:visible;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.products-menu .product-mascot{--mascot-size:58px}
.products-menu a:has(.product-mascot){overflow:visible;background:transparent;border-color:transparent;box-shadow:none}
@media(hover:hover) and (pointer:fine){.products-menu a:has(.product-mascot):hover{background:transparent;border-color:transparent}}
.product-card .product-icon:has(.product-mascot),
.product-card:not(:first-child) .product-icon:has(.product-mascot),
.product-grid.filtered .product-card .product-icon:has(.product-mascot){
  width:76px;
  height:76px;
  margin:0 0 23px;
  display:grid;
}
.product-card .product-mascot{--mascot-size:76px}
.story-feature .mini-icon:has(.product-mascot){width:64px;height:64px}
.story-feature .product-mascot{--mascot-size:64px}
.niche-preview .mini-icon:has(.product-mascot){width:54px;height:54px}
.niche-preview .product-mascot{--mascot-size:56px}
.story-identity .mini-icon:has(.product-mascot){width:42px;height:42px}
.story-identity .product-mascot{--mascot-size:48px}
.story-closing>.mini-icon:has(.product-mascot){width:75px;height:75px}
.story-closing .product-mascot{--mascot-size:75px}
.related-products .mini-icon:has(.product-mascot){width:50px;height:50px}
.related-products .product-mascot{--mascot-size:55px}
@media(max-width:700px){
  .product-card .product-icon:has(.product-mascot),
  .product-card:not(:first-child) .product-icon:has(.product-mascot){
    width:66px;
    height:66px;
    margin-bottom:20px;
  }
  .product-card .product-mascot{--mascot-size:66px}
  .story-identity .mini-icon:has(.product-mascot){width:35px;height:35px}
  .story-identity .product-mascot{--mascot-size:42px}
}
@media(prefers-reduced-motion:reduce){.product-mascot *{animation:none!important;transition:none!important}.product-mascot :is(.pm-reaction,.pm-gaze,.pm-tilt){transform:none!important}}
@media(forced-colors:active){.product-mascot .pm-body{fill:Canvas;stroke:CanvasText;stroke-width:3}.product-mascot .pm-coat{filter:none}.product-mascot .pm-cheek{display:none}}
.mascot-pause-control{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;border-radius:8px;padding:4px 8px;min-height:44px;font:inherit;color:inherit;cursor:pointer}
.mascot-pause-control:focus-visible{outline:2px solid #67518c;outline-offset:3px}
/* Interactive agent scenes: one mascot per product, no photographic hero media. */
.mascot-scene{--scene-halo:#cadff2;position:relative;isolation:isolate;width:100%;min-width:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.mascot-scene[data-mascot-personality=spark]{--scene-halo:#f5e2b6}
.mascot-scene[data-mascot-personality=drop]{--scene-halo:#e8d5f3}
.mascot-scene-core{position:relative;overflow:visible;display:flex;flex-direction:column;min-height:540px;border:0;border-radius:0;background:transparent}
.mascot-scene-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 19px 0;font-size:12px;line-height:1.6;color:#635876}
.mascot-scene-pause{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffffa8;background:#ffffff54;color:#5f4f78;cursor:pointer}
.mascot-scene-pause svg{width:17px;height:17px}.mascot-scene [hidden]{display:none!important}
.mascot-scene-stage{position:relative;display:grid;place-items:center;flex:1;min-height:377px;width:100%;padding:20px 0;border:0;border-radius:24px;background:none;cursor:pointer;touch-action:manipulation;color:inherit;isolation:isolate}
.mascot-scene-stage>.product-mascot{--mascot-size:294px;position:relative;z-index:1;flex:none}
.mascot-scene-halo{position:absolute;left:50%;top:50%;width:86%;aspect-ratio:1;border:1px solid #ffffffcc;border-radius:50%;background:radial-gradient(ellipse,#ffffff54,transparent 68%);box-shadow:inset 0 1px 1px #ffffffd9,0 18px 50px #ffffff47;transform:translate(-50%,-50%);pointer-events:none}
.mascot-scene[data-mascot-personality=drop] .mascot-scene-halo{border-radius:48% 52% 54% 46%;transform:translate(-50%,-50%) rotate(-12deg)}
.mascot-scene[data-mascot-personality=spark] .mascot-scene-halo{border-radius:45% 55% 48% 52%;transform:translate(-50%,-50%) rotate(14deg)}
.mascot-scene-caption{display:grid;gap:8px;justify-items:center;text-align:center;padding:20px 15px 24px;color:#635876}
.mascot-scene-caption strong{font-weight:500;font-size:19px;letter-spacing:-.025em;line-height:1.5}
.mascot-scene-caption span{font-size:12px;line-height:1.6;color:#6e617b}
.mascot-scene-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;margin:-1px;padding:0;border:0}
.mascot-scene :is(.mascot-scene-stage,.mascot-scene-pause):focus-visible{outline:2px solid #71558e;outline-offset:-5px}
.mascot-scene .product-mascot[data-greet-instant] :is(.pm-reaction,.pm-smile,.pm-mouth,.pm-cheek){transition:none!important}
.mascot-scene .mascot-drop.mascot-happy .pm-reaction{transform:translateY(-5px) rotate(-4deg) scale(1.01,.99)}
.mascot-scene .mascot-drop.mascot-happy .pm-cheek{opacity:1}
.mascot-scene .mascot-spark.mascot-happy .pm-reaction{transform:translateY(-13px) rotate(7deg) scale(1.04,.96)}
.mascot-scene .mascot-dot.mascot-happy .pm-reaction{transform:translateY(-10px) rotate(-5deg) scale(1.03,.97)}
@media(hover:hover) and (pointer:fine){.mascot-scene-pause:hover{background:#ffffffad}}
@media(max-width:1100px){.mascot-scene-core{min-height:515px}.mascot-scene-stage>.product-mascot{--mascot-size:240px}}
@media(max-width:760px){.mascot-scene{padding:0;border-radius:0}.mascot-scene-core{min-height:465px;border-radius:0}.mascot-scene-stage{min-height:320px;padding:14px 0}.mascot-scene-stage>.product-mascot{--mascot-size:230px}.mascot-scene-top{padding:12px 14px 0;font-size:11px}.mascot-scene-caption{padding:16px 15px 23px}.mascot-scene-caption strong{font-size:18px}.mascot-scene-caption span{font-size:11px}.mascot-scene-halo{width:85%}}
@media(max-width:360px){.mascot-scene-core{min-height:400px}.mascot-scene-stage{min-height:270px}.mascot-scene-stage>.product-mascot{--mascot-size:185px}}
@media(prefers-reduced-motion:reduce){.mascot-scene .product-mascot.mascot-happy .pm-reaction{transform:none!important}}
@media(prefers-contrast:more){.mascot-scene-core{background:transparent;border:0}.mascot-scene-top,.mascot-scene-caption span{color:#45374f}}

/* The two additional hero mascots retain their original archive palettes and idle motion. */
.product-mascot.mascot-cloud{--pm-shade:#087aab}
.product-mascot.mascot-orbit{--pm-shade:#b82969}
.mascot-cloud .pm-float{animation:pm-cloud-drift 6s var(--ease-in-out) infinite}
.mascot-orbit .pm-float{animation-duration:5.5s}
.mascot-cloud .pm-eyes{animation-delay:-1.4s}
.mascot-orbit .pm-eyes{animation-delay:-4.2s}
@keyframes pm-cloud-drift{0%,100%{transform:translate(-4px,0) rotate(-4deg)}50%{transform:translate(4px,-14px) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.mascot-cloud .pm-float,.mascot-orbit .pm-float{animation:none!important}}