/* Nano, the NanoFlow mascot (2026-10-10). Brand rule: Nano belongs in hooks and calls to action, not in the middle of
   the content, so he appears a few times per page, at the edges of things, never over text, faces or buttons.
   Poses come from the brand kit (assets/brand/nanoflow, transparent webp): assets/nano/<pose>.webp. */
.nano{position:absolute;z-index:3;pointer-events:none;user-select:none;height:auto;
  filter:drop-shadow(0 14px 18px rgba(33,29,43,.22))}
.nano--bob{animation:nanoBob 5.5s ease-in-out infinite}
@keyframes nanoBob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-8px) rotate(var(--r,0deg))}}
.nano--r{transform:rotate(var(--r,0deg))}

/* hero: waving at the left edge of the circle (full-body pose; the brand "peek" pose hides a leg by design) */
.hero-stage .nano--peek{width:176px;left:-86px;bottom:6%;--r:-3deg}

/* section headings: Nano sits beside the heading block */
.sec-head{position:relative}
.sec-head .nano--side{width:118px;right:-150px;top:-6px}
.sec-head .nano--side-l{width:118px;left:-150px;top:-6px}

/* the wide "you stay in control" card: thumbs up at its right end */
.cap--wide{position:relative}
.cap--wide .nano--card{width:96px;right:18px;bottom:-6px}
.cap--wide>div:has(+.nano--card){padding-right:110px}

/* closing call to action: Nano points at the button */
.close .wrap{position:relative}
.close .nano--cta{width:150px;left:-150px;bottom:18px;--r:4deg}

/* small screens: keep only the hero and closing Nano, smaller; the side ones would cover content */
@media (max-width:1100px){.sec-head .nano--side,.sec-head .nano--side-l{display:none}}
@media (max-width:900px){
  .hero-stage .nano--peek{width:92px;left:-10px;top:4%;bottom:auto}
  .close .nano--cta{position:static;display:block;width:110px;margin:0 auto 10px}
  .cap--wide .nano--card{display:none}
  .cap--wide>div:has(+.nano--card){padding-right:0}
}
@media (prefers-reduced-motion:reduce){.nano--bob{animation:none;transform:rotate(var(--r,0deg))}}