/* =====================================================================================================
   Slate, the pixel astronaut: ALL of his styling lives in this one file (moved out of site.css and
   hero-m.css on 25 Oct 2026 so changes stop overriding each other). Loaded after site.css / hero-m.css.
   Behaviour lives in astro.js. Agreed rules are in STYLE-NOTES.md at the project root: read it first.
   Sections below keep their original order; later rules intentionally refine earlier ones.
   ===================================================================================================== */
/* ================= the pixel astronaut (assets/astro.js) ================= */
a.has-astro { overflow:visible !important; }
.astro { position:absolute; left:14px; bottom:100%; width:34px; height:41px; pointer-events:none; z-index:2; }
.astro svg { display:block; width:100%; height:100%; overflow:visible; image-rendering:pixelated; shape-rendering:crispEdges; }
.astro svg * { transform-box:view-box; }
/* joints (grid units) */
.ax-head { transform-origin:11px 11px; }
 .ax-armL { transform-origin:4.5px 14px; }
 .ax-armR { transform-origin:17px 14px; }
.ax-fig, .ax-all { transform-origin:11px 34px; }
.ax-z { opacity:0; }
/* idle: the upper body breathes while the feet stay planted; the visor glints */
.astro .ax-glint { animation:axGlint 3.4s steps(1) infinite; }
@keyframes axBreathe { 0%,49% { translate:0 0; } 50%,100% { translate:0 -1px; } }
@keyframes axGlint { 0%,72% { opacity:0; } 74%,88% { opacity:1; } 90%,100% { opacity:0; } }
/* hover or tap: a jump with tucked legs */
.astro.do-jump .ax-all { animation:axJump .65s cubic-bezier(.3,.7,.4,1); }
.astro.do-jump .ax-legL { animation:axTuckL .65s steps(3); }
 .astro.do-jump .ax-legR { animation:axTuckR .65s steps(3); }
.astro.do-jump .ax-armL { animation:axArmUp .65s steps(3); }
@keyframes axJump { 0%,100% { transform:translateY(0); } 15% { transform:translateY(1px); } 50% { transform:translateY(-11px); } 85% { transform:translateY(0); } }
@keyframes axTuckL { 0%,100% { transform:rotate(0); } 50% { transform:rotate(24deg); } }
@keyframes axTuckR { 0%,100% { transform:rotate(0); } 50% { transform:rotate(-18deg); } }
@keyframes axArmUp { 0%,100% { transform:rotate(0); } 50% { transform:rotate(70deg); } }
/* looks down at the button */
.astro.do-look .ax-head { animation:axLook 1.9s steps(4); }
@keyframes axLook { 0%,100% { transform:rotate(0); } 20%,80% { transform:rotate(-16deg) translateY(1px); } }
/* runs along the button and back */
.astro.do-run .ax-fig { animation:axRun 2.6s steps(26) both; }
.astro.do-run .ax-legL { animation:axStride .26s steps(2) infinite; }
 .astro.do-run .ax-legR { animation:axStride .26s steps(2) -.13s infinite; }
.astro.do-run .ax-armL { animation:axPump .26s steps(2) infinite; }
@keyframes axRun { 0% { transform:translateX(0); } 45% { transform:translateX(30px); } 55% { transform:translateX(30px) scaleX(-1); } 100% { transform:translateX(0) scaleX(-1); } }
@keyframes axStride { 0%,100% { transform:rotate(22deg); } 50% { transform:rotate(-22deg); } }
@keyframes axPump { 0%,100% { transform:rotate(-30deg); } 50% { transform:rotate(30deg); } }
/* waves the flag */
@keyframes axWave { from { transform:rotate(0); } to { transform:rotate(-20deg); } }
/* dozes off: head nods, little Zs float up */
.astro.do-sleep .ax-head { animation:axNod 2.6s steps(6) both; }
.astro.do-sleep .ax-z { animation:axZ 2.6s steps(8) both; }
.astro.do-sleep .ax-armL { animation:axDroop 2.6s steps(3) both; }
@keyframes axNod { 0% { transform:rotate(0); } 30%,100% { transform:rotate(-12deg) translateY(1px); } 45% { transform:rotate(-6deg); } 60% { transform:rotate(-14deg) translateY(2px); } }
@keyframes axZ { 0%,15% { opacity:0; transform:translateY(2px); } 30%,85% { opacity:1; } 100% { opacity:0; transform:translateY(-6px); } }
@keyframes axDroop { to { transform:rotate(12deg); } }
@media(prefers-reduced-motion:reduce){ .astro *, .astro.do-jump .ax-all { animation:none !important; }
}
/* laptops: a small floating 1-Minute Plan button bottom-left, so the astronaut has something to stand on */
@media(min-width:1024px){
  .cta-float.has-astro { display:inline-flex !important; left:28px !important; right:auto; transform:none !important; bottom:26px; }
  .cta-float.has-astro:hover { transform:translateY(-1px) !important; }
}
/* the old Slatey mascot is retired */
.slatey { display:none !important; }
/* ===== pixel astronaut v2: boots on the box, reacts to the mouse, no flag, funnier moves ===== */
.astro { height:39px !important; pointer-events:auto !important; cursor:pointer; }
.ax-fig, .ax-all { transform-origin:11px 32px !important; }
.ax-armR { transform-origin:17.5px 14px !important; }
/* hover: a little speech bubble in pixel style */
.astro-bubble { position:absolute; pointer-events:none;   /* placement: see the speech bubble block at the end */
  font:700 11.5px/1 'Inter',sans-serif; color:#11131F; background:#fff; padding:7px 10px; border:2px solid #11131F; border-radius:2px;
  box-shadow:3px 3px 0 var(--astro-shadow, #2F4BE0); opacity:0;   /* --astro-shadow: set per theme (Sunlight: mist-extra.css) */ transform:translateY(4px); transition:opacity .15s steps(2), transform .15s steps(2); }
.astro-bubble::after { content:''; position:absolute; width:6px; height:6px; background:#fff; border-right:2px solid #11131F; border-bottom:2px solid #11131F; }
.astro-bubble.on { opacity:1; transform:none; }
/* tickled: giggles, flails and jumps */
.astro.do-tickle .ax-all { animation:axJump .65s cubic-bezier(.3,.7,.4,1) .2s; }
.astro.do-tickle .ax-fig { animation:axGiggle .2s steps(2) 4; }
.astro.do-tickle .ax-armL { animation:axFlailL .2s steps(2) 4; }
 .astro.do-tickle .ax-armR { animation:axFlailR .2s steps(2) 4; }
@keyframes axGiggle { 0%,100% { transform:rotate(-5deg); } 50% { transform:rotate(5deg); } }
@keyframes axFlailL { 0%,100% { transform:rotate(40deg); } 50% { transform:rotate(90deg); } }
@keyframes axFlailR { 0%,100% { transform:rotate(-40deg); } 50% { transform:rotate(-90deg); } }
/* waves hello with his hand (the flag is gone) */
.astro.do-wave .ax-armR { animation:axHandWave 1.8s steps(1) both; }
@keyframes axHandWave { 0% { transform:rotate(0); } 12%,36%,60% { transform:rotate(-150deg); } 24%,48%,72% { transform:rotate(-125deg); } 86%,100% { transform:rotate(0); } }
/* a slow moonwalk along the box, then strolls back */
.astro.do-moon .ax-fig { animation:axMoon 4.2s linear both; }
.astro.do-moon .ax-legL { animation:axMoonL .7s steps(2) infinite; }
 .astro.do-moon .ax-legR { animation:axMoonR .7s steps(2) infinite; }
.astro.do-moon .ax-armL { animation:axSwing 1.4s steps(2) infinite; }
.astro.do-moon .ax-head { animation:axCool 1.4s steps(2) infinite; }
@keyframes axMoon { 0% { transform:translateX(0); } 62% { transform:translateX(26px); } 66% { transform:translateX(26px) translateY(-1px); } 100% { transform:translateX(0); } }
@keyframes axMoonL { 0%,49% { transform:translateX(0) rotate(0); } 50%,100% { transform:translateX(1px) translateY(-1px) rotate(10deg); } }
@keyframes axMoonR { 0%,49% { transform:translateX(1px) translateY(-1px) rotate(10deg); } 50%,100% { transform:translateX(0) rotate(0); } }
@keyframes axSwing { 0%,100% { transform:rotate(8deg); } 50% { transform:rotate(-8deg); } }
@keyframes axCool { 0%,100% { transform:rotate(0); } 50% { transform:rotate(-5deg); } }
@media(prefers-reduced-motion:reduce){ .astro-bubble { transition:none; }
}
/* astronaut: looks around, and a happy double hop */
.astro.do-around .ax-head { animation:axAround 2s steps(1) both; }
@keyframes axAround { 0%,100% { transform:rotate(0); } 15%,40% { transform:rotate(-10deg); } 45%,75% { transform:rotate(9deg); } 80% { transform:rotate(-4deg); } }
.astro.do-around .ax-armL { animation:axSwing 2s steps(2) both; }
.astro.do-hop .ax-all { animation:axHop2 1.3s cubic-bezier(.3,.7,.4,1) both; }
@keyframes axHop2 { 0%,100% { transform:translateY(0); } 12% { transform:translateY(1px); } 28% { transform:translateY(-7px); } 44% { transform:translateY(0); } 60% { transform:translateY(-9px); } 78% { transform:translateY(0); } 88% { transform:translateY(0); } }
.astro.do-hop .ax-armL { animation:axFlailL .33s steps(2) 4; }
 .astro.do-hop .ax-armR { animation:axFlailR .33s steps(2) 4; }
/* ===== pixel astronaut v3: sits on the button and swings his legs; hip and knee joints ===== */
.ax-legL { transform-origin:8.5px 22px; }
 .ax-legR { transform-origin:12.5px 22px; }
.ax-thL { transform-origin:8.5px 22px; }
 .ax-thR { transform-origin:12.5px 22px; }
.ax-kL { transform-origin:8.5px 27px; }
 .ax-kR { transform-origin:12.5px 27px; }
.astro .ax-head, .astro .ax-body, .astro .ax-pack, .astro .ax-armL, .astro .ax-armR { animation:axBreathe 1.6s steps(1) infinite; }
/* sitting (the resting pose): body down onto the edge, thighs toward you, shins hanging over the front */
.ax-up, .ax-hip, .ax-th, .ax-sh { transition:transform .4s steps(4); }
.astro .ax-up, .astro .ax-hip { transform:translateY(10px); }
.astro .ax-th { transform:scaleY(.4); }
.astro .ax-sh { transform:translateY(-3px); }
.astro .ax-kL { animation:axKickL 1.3s steps(6) infinite; }
.astro .ax-kR { animation:axKickR 1.3s steps(6) -.65s infinite; }
@keyframes axKickL { 0%,100% { transform:rotate(16deg) scaleY(1); } 50% { transform:rotate(4deg) scaleY(.7); } }
@keyframes axKickR { 0%,100% { transform:rotate(-16deg) scaleY(1); } 50% { transform:rotate(-4deg) scaleY(.7); } }
.astro .ax-armL { rotate:10deg; }
 .astro .ax-armR { rotate:-10deg; }
/* excited: kicks faster for a moment */
.astro.do-kick .ax-kL, .astro.do-kick .ax-kR { animation-duration:.42s; }
/* standing up for a move */
.astro.up .ax-up, .astro.up .ax-hip, .astro.up .ax-th, .astro.up .ax-sh { transform:none; }
.astro.up .ax-k { animation:none; }
.astro.up .ax-armL, .astro.up .ax-armR { rotate:0deg; }
/* walks to the edge, leans over and windmills his arms, then jumps back to his spot */
.astro.do-edge .ax-fig { animation:axEdge 4.6s linear both; }
.astro.do-edge .ax-legL { animation:axEdgeL 4.6s steps(46) both; }
 .astro.do-edge .ax-legR { animation:axEdgeR 4.6s steps(46) both; }
.astro.do-edge .ax-armL { animation:axEdgeArmL 4.6s steps(1) both; }
 .astro.do-edge .ax-armR { animation:axEdgeArmR 4.6s steps(1) both; }
.astro.do-edge .ax-head { animation:axEdgeHead 4.6s steps(1) both; }
@keyframes axEdge { 0% { transform:translateX(0); } 26% { transform:translateX(-12px); } 32% { transform:translateX(-12px) rotate(-10deg); }
  42% { transform:translateX(-12px) rotate(-17deg); } 50% { transform:translateX(-12px) rotate(-9deg); } 58% { transform:translateX(-12px) rotate(-15deg); }
  66% { transform:translateX(-12px) rotate(0); } 72% { transform:translateX(-12px) translateY(1px); }
  82% { transform:translateX(-6px) translateY(-11px); } 92% { transform:translateX(0) translateY(0); } 100% { transform:translateX(0); } }
@keyframes axEdgeL { 0%,6%,12%,18%,24% { transform:rotate(16deg); } 3%,9%,15%,21% { transform:rotate(-16deg); } 26%,72% { transform:rotate(0); }
  82% { transform:rotate(26deg); } 92%,100% { transform:rotate(0); } }
@keyframes axEdgeR { 0%,6%,12%,18%,24% { transform:rotate(-16deg); } 3%,9%,15%,21% { transform:rotate(16deg); } 26%,32% { transform:rotate(0); }
  36%,62% { transform:rotate(-28deg); } 66%,72% { transform:rotate(0); } 82% { transform:rotate(-20deg); } 92%,100% { transform:rotate(0); } }
@keyframes axEdgeArmL { 0%,32% { transform:rotate(0); } 34%,42%,50%,58% { transform:rotate(130deg); } 38%,46%,54%,62% { transform:rotate(60deg); } 66%,72% { transform:rotate(0); } 78%,86% { transform:rotate(150deg); } 92%,100% { transform:rotate(0); } }
@keyframes axEdgeArmR { 0%,32% { transform:rotate(0); } 34%,42%,50%,58% { transform:rotate(-60deg); } 38%,46%,54%,62% { transform:rotate(-130deg); } 66%,72% { transform:rotate(0); } 78%,86% { transform:rotate(-150deg); } 92%,100% { transform:rotate(0); } }
@keyframes axEdgeHead { 0%,26% { transform:rotate(0); } 28%,64% { transform:rotate(-14deg) translateY(1px); } 66%,100% { transform:rotate(0); } }
@media(prefers-reduced-motion:reduce){ .ax-up, .ax-hip, .ax-th, .ax-sh { transition:none; }
}
/* astronaut: no tap flash, long-press menu or selection box on phones */
.astro, .astro * { -webkit-tap-highlight-color:rgba(0,0,0,0) !important; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; outline:none !important; }
.astro svg { pointer-events:none; }
/* astronaut: the skydive. Walks to the edge, tips off, falls spread out like a skydiver, lands flat on the
   ground (--f grid units below the button, set by astro.js), gets up slowly, crouches, then one huge jump
   lands him back on exactly his spot, where he sits again. */
.astro.do-fall .ax-fig { animation:axFall 6.2s linear both; }
.astro.do-fall .ax-legL { animation:axFallLegL 6.2s linear both; }
 .astro.do-fall .ax-legR { animation:axFallLegR 6.2s linear both; }
.astro.do-fall .ax-armL { animation:axFallArmL 6.2s linear both; }
 .astro.do-fall .ax-armR { animation:axFallArmR 6.2s linear both; }
.astro.do-fall .ax-head { animation:axFallHead 6.2s linear both; }
@keyframes axFall {
  0% { transform:translate(0,0); }
  12% { transform:translate(-12px,0); }
  17% { transform:translate(-15px,0) rotate(-28deg); animation-timing-function:ease-in; }
  22% { transform:translate(-19px, calc(var(--f,60) * .06px)) rotate(-78deg); animation-timing-function:cubic-bezier(.4,0,.9,.55); }
  30% { transform:translate(-21px, calc(var(--f,60) * .24px)) rotate(-92deg); }
  38% { transform:translate(-18px, calc(var(--f,60) * .55px)) rotate(-80deg); }
  46% { transform:translate(-20px, calc(var(--f,60) * 1px - 7px)) rotate(-90deg); animation-timing-function:ease-out; }
  49% { transform:translate(-20px, calc(var(--f,60) * 1px - 10px)) rotate(-88deg); animation-timing-function:ease-in; }
  52%, 60% { transform:translate(-20px, calc(var(--f,60) * 1px - 7px)) rotate(-90deg); animation-timing-function:ease-in-out; }
  67% { transform:translate(-20px, calc(var(--f,60) * 1px - 3px)) rotate(-50deg); animation-timing-function:ease-in-out; }
  74% { transform:translate(-20px, calc(var(--f,60) * 1px)) rotate(0); }
  78% { transform:translate(-20px, calc(var(--f,60) * 1px + 2px)); animation-timing-function:cubic-bezier(.2,.8,.4,1); }
  84% { transform:translate(-9px, -24px); animation-timing-function:cubic-bezier(.6,0,.9,.5); }
  90% { transform:translate(0,1px); animation-timing-function:ease-out; }
  95%, 100% { transform:translate(0,0); }
}
@keyframes axFallLegL { 0%,6%,12% { transform:rotate(16deg); } 3%,9% { transform:rotate(-16deg); } 17% { transform:rotate(0); }
  24%,44% { transform:rotate(34deg); } 34% { transform:rotate(26deg); } 52%,62% { transform:rotate(6deg); } 74% { transform:rotate(0); }
  78% { transform:rotate(14deg); } 84% { transform:rotate(30deg); } 90%,100% { transform:rotate(0); } }
@keyframes axFallLegR { 0%,6%,12% { transform:rotate(-16deg); } 3%,9% { transform:rotate(16deg); } 17% { transform:rotate(0); }
  24%,44% { transform:rotate(-34deg); } 34% { transform:rotate(-26deg); } 52%,62% { transform:rotate(-6deg); } 74% { transform:rotate(0); }
  78% { transform:rotate(-14deg); } 84% { transform:rotate(-30deg); } 90%,100% { transform:rotate(0); } }
@keyframes axFallArmL { 0%,15% { transform:rotate(0); } 22% { transform:rotate(130deg); } 30% { transform:rotate(112deg); } 38% { transform:rotate(132deg); } 44% { transform:rotate(116deg); }
  50%,62% { transform:rotate(10deg); } 70% { transform:rotate(40deg); } 76% { transform:rotate(-20deg); } 84% { transform:rotate(155deg); } 92%,100% { transform:rotate(0); } }
@keyframes axFallArmR { 0%,15% { transform:rotate(0); } 22% { transform:rotate(-130deg); } 30% { transform:rotate(-112deg); } 38% { transform:rotate(-132deg); } 44% { transform:rotate(-116deg); }
  50%,62% { transform:rotate(-10deg); } 70% { transform:rotate(-40deg); } 76% { transform:rotate(20deg); } 84% { transform:rotate(-155deg); } 92%,100% { transform:rotate(0); } }
@keyframes axFallHead { 0%,14% { transform:rotate(0); } 18%,44% { transform:rotate(8deg); } 52%,60% { transform:rotate(0); } 64% { transform:rotate(-10deg); } 70% { transform:rotate(8deg); } 76%,100% { transform:rotate(0); } }
/* never draggable: no lifted, shrunken preview of him */
.astro, .astro svg, a.has-astro { -webkit-user-drag:none; user-drag:none; }
/* ===== astronaut v4: every move that travels moves his whole box, so he never leaves his own drawing area
   (some phone browsers draw an empty box and a shrunken copy when he does). --dir is the way to the near edge
   (1 = right, on the home hero's button; -1 = left, on the floating button), --fp is how far down the ground is. ===== */
.astro { transform-origin:50% 100%; }
/* run: the box runs along the button and back; the figure turns round */
.astro.do-run { animation:axRunBox 2.6s steps(26) both; }
.astro.do-run .ax-fig { animation:axRunFlip 2.6s steps(26) both; }
@keyframes axRunBox { 0% { transform:translateX(0); } 45%,55% { transform:translateX(calc(var(--dir,-1) * -36px)); } 100% { transform:translateX(0); } }
@keyframes axRunFlip { 0%,49% { transform:scaleX(1); } 50%,100% { transform:scaleX(-1); } }
/* moonwalk */
.astro.do-moon { animation:axMoonBox 4.2s linear both; }
.astro.do-moon .ax-fig { animation:none; }
@keyframes axMoonBox { 0% { transform:translateX(0); } 62% { transform:translateX(calc(var(--dir,-1) * -31px)); } 66% { transform:translate(calc(var(--dir,-1) * -31px), -1px); } 100% { transform:translateX(0); } }
/* tickle and hop: the jump moves the box */
.astro.do-tickle .ax-all, .astro.do-hop .ax-all { animation:none !important; }
.astro.do-tickle { animation:axJumpBox .65s cubic-bezier(.3,.7,.4,1) .2s; }
@keyframes axJumpBox { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-13px); } }
.astro.do-hop { animation:axHopBox 1.3s cubic-bezier(.3,.7,.4,1) both; }
@keyframes axHopBox { 0%,44%,78%,100% { transform:translateY(0); } 28% { transform:translateY(-9px); } 60% { transform:translateY(-12px); } }
/* lean over the edge, then jump back */
.astro.do-edge { animation:axEdgeBox 4.6s linear both; }
.astro.do-edge .ax-fig { animation:none; }
@keyframes axEdgeBox { 0% { transform:translate(0,0); } 26% { transform:translate(calc(var(--dir,-1) * 14.5px),0); }
  32% { transform:translate(calc(var(--dir,-1) * 14.5px),0) rotate(calc(var(--dir,-1) * 10deg)); } 42% { transform:translate(calc(var(--dir,-1) * 14.5px),0) rotate(calc(var(--dir,-1) * 17deg)); }
  50% { transform:translate(calc(var(--dir,-1) * 14.5px),0) rotate(calc(var(--dir,-1) * 9deg)); } 58% { transform:translate(calc(var(--dir,-1) * 14.5px),0) rotate(calc(var(--dir,-1) * 15deg)); }
  66% { transform:translate(calc(var(--dir,-1) * 14.5px),0); } 72% { transform:translate(calc(var(--dir,-1) * 14.5px),1px); }
  82% { transform:translate(calc(var(--dir,-1) * 7px),-13px); } 92%,100% { transform:translate(0,0); } }
/* the skydive: walk to the edge, tip off, fall spread out, land flat, get up slowly, one huge jump back to his seat */
.astro.do-fall { animation:axFallBox 6.2s linear both; }
.astro.do-fall .ax-fig { animation:none; }
@keyframes axFallBox {
  0% { transform:translate(0,0); }
  12% { transform:translate(calc(var(--dir,-1) * 14.5px),0); }
  17% { transform:translate(calc(var(--dir,-1) * 18px),0) rotate(calc(var(--dir,-1) * 28deg)); animation-timing-function:ease-in; }
  22% { transform:translate(calc(var(--dir,-1) * 23px), calc(var(--fp,70px) * .06)) rotate(calc(var(--dir,-1) * 78deg)); animation-timing-function:cubic-bezier(.4,0,.9,.55); }
  30% { transform:translate(calc(var(--dir,-1) * 25px), calc(var(--fp,70px) * .24)) rotate(calc(var(--dir,-1) * 92deg)); }
  38% { transform:translate(calc(var(--dir,-1) * 22px), calc(var(--fp,70px) * .55)) rotate(calc(var(--dir,-1) * 80deg)); }
  46% { transform:translate(calc(var(--dir,-1) * 24px), calc(var(--fp,70px) - 17px)) rotate(calc(var(--dir,-1) * 90deg)); animation-timing-function:ease-out; }
  49% { transform:translate(calc(var(--dir,-1) * 24px), calc(var(--fp,70px) - 21px)) rotate(calc(var(--dir,-1) * 88deg)); animation-timing-function:ease-in; }
  52%, 60% { transform:translate(calc(var(--dir,-1) * 24px), calc(var(--fp,70px) - 17px)) rotate(calc(var(--dir,-1) * 90deg)); animation-timing-function:ease-in-out; }
  67% { transform:translate(calc(var(--dir,-1) * 24px), calc(var(--fp,70px) - 12px)) rotate(calc(var(--dir,-1) * 50deg)); animation-timing-function:ease-in-out; }
  74% { transform:translate(calc(var(--dir,-1) * 24px), var(--fp,70px)); }
  78% { transform:translate(calc(var(--dir,-1) * 24px), calc(var(--fp,70px) + 2px)); animation-timing-function:cubic-bezier(.2,.8,.4,1); }
  84% { transform:translate(calc(var(--dir,-1) * 11px), -29px); animation-timing-function:cubic-bezier(.6,0,.9,.5); }
  90% { transform:translate(0,1px); animation-timing-function:ease-out; }
  95%, 100% { transform:translate(0,0); }
}
/* astronaut spots on the 1-Minute Plan: the Let's start button, each question, and the strategy-call button at the end */
[data-astro] { position:relative; }
[data-astro].has-astro { overflow:visible !important; }
.mc-qwrap .astro { left:0; }
.mc-qwrap.has-astro { margin-top:44px; }
.mc-start.has-astro { margin-top:26px; }
/* ===== astronaut v5: drawn as pixel images (astro.js) instead of vector squares.
   .ax-svg is the 28 x 32 grid, scaled up to the 34 x 39 box; every part is a full-grid layer, so the
   transform origins above (in grid units) still line up. ===== */
.ax-svg { position:absolute; left:0; top:0; width:28px; height:32px; transform-origin:0 0; transform:scale(1.2143); pointer-events:none; }
.ax-svg i { position:absolute; left:0; top:0; width:28px; height:32px; display:block; font-style:normal; }
.ax-svg i.ax-px { background-repeat:no-repeat; background-size:100% 100%; image-rendering:pixelated; image-rendering:crisp-edges; }
.ax-svg i.ax-z { top:-8px; height:8px; }
.ax-svg i.ax-z i.ax-px { height:8px; }
/* ===== astronaut v6: activities on the spot (no moves that carry him away; the travelling moves made some
   phone browsers draw a box). Props are drawn by astro.js and only show during their activity. ===== */
.astro.do-tickle { animation:none !important; }
.ax-svg i.ax-prop { opacity:0; transition:opacity .3s steps(3); }
.ax-svg i.ax-prop > i.ax-px { width:100%; height:100%; }
/* beach: chair behind him, umbrella beside him, hands behind his head, lazy leg swings */
.astro.do-beach .ax-umb, .astro.do-beach .ax-chair { opacity:1; }
.astro.do-beach .ax-umb { transform-origin:50% 100%; animation:axPop .5s steps(4) both; }
.astro.do-beach .ax-armL { rotate:155deg; }
 .astro.do-beach .ax-armR { rotate:-155deg; }
.astro.do-beach .ax-kL, .astro.do-beach .ax-kR { animation-duration:2.6s; }
.astro.do-beach .ax-head { transform:rotate(4deg); }
@keyframes axPop { 0% { transform:scale(.4); opacity:0; } 60% { transform:scale(1.08); opacity:1; } 100% { transform:scale(1); opacity:1; } }
/* reading: an open book on his lap, head down, a page turning now and then */
.astro.do-read .ax-book { opacity:1; }
.astro.do-read .ax-armL { rotate:-32deg; }
 .astro.do-read .ax-armR { rotate:32deg; }
.astro.do-read .ax-head { transform:rotate(-9deg) translateY(1px); }
.astro.do-read .ax-kL, .astro.do-read .ax-kR { animation-duration:3s; }
.ax-svg i.ax-page { opacity:1; transform-origin:0 50%; }
.astro.do-read .ax-page { animation:axPage 2.4s steps(6) infinite; }
@keyframes axPage { 0%,55% { transform:scaleX(1); } 72% { transform:scaleX(.15); } 88%,100% { transform:scaleX(-1); } }
/* bike: up on the saddle, pedalling, wheels spinning, a little bob */
.astro.do-bike .ax-bike, .astro.do-bike .ax-wheel { opacity:1; }
.astro.do-bike .ax-hip { transform:translateY(-1px); }
.astro.do-bike .ax-up { animation:axBob .5s steps(2) infinite; }
.astro.do-bike .ax-th, .astro.do-bike .ax-sh { transform:none; }
.astro.do-bike .ax-k { animation:none; }
.astro.do-bike .ax-legL { animation:axPedal .5s steps(4) infinite; }
 .astro.do-bike .ax-legR { animation:axPedal .5s steps(4) -.25s infinite; }
.astro.do-bike .ax-armL { rotate:-26deg; }
 .astro.do-bike .ax-armR { rotate:-56deg; }
.ax-svg i.ax-wheel { transform-origin:50% 50%; }
.astro.do-bike .ax-wheel { animation:axSpin .45s linear infinite; }
@keyframes axPedal { 0%,100% { transform:scaleY(.7); } 50% { transform:scaleY(.94); } }
@keyframes axBob { 0%,100% { transform:translateY(-1px); } 50% { transform:translateY(-2px); } }
@keyframes axSpin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){ .astro .ax-wheel, .astro .ax-page { animation:none !important; }
}
/* bike: he rides along the button towards its middle, turns round and rides back to his spot */
.astro.do-bike .ax-fig { animation:axRide 7s linear both; }
@keyframes axRide { 0%,8% { transform:translateX(0) scaleX(var(--rd,1)); } 44% { transform:translateX(calc(var(--rd,1) * var(--rl,60px))) scaleX(var(--rd,1)); }
  47%,50% { transform:translateX(calc(var(--rd,1) * var(--rl,60px))) scaleX(calc(var(--rd,1) * -1)); }
  88% { transform:translateX(0) scaleX(calc(var(--rd,1) * -1)); } 92%,100% { transform:translateX(0); } }
/* the button is his home: .ax-pos carries him to his current spot (astro.js sets --x and how long the stroll takes);
   his speech bubble and the spot you can tap or hover follow him */
.ax-svg i.ax-pos { transform:translateX(var(--x,0px)); transition:transform var(--walk,0ms) linear; }
.astro { pointer-events:none !important; }
.ax-svg i.ax-up { pointer-events:auto; cursor:pointer; }
.astro.do-walk .ax-legL { animation:axStride .3s steps(2) infinite; }
 .astro.do-walk .ax-legR { animation:axStride .3s steps(2) -.15s infinite; }
.astro.do-walk .ax-armL { animation:axPump .3s steps(2) infinite; }
 .astro.do-walk .ax-armR { animation:axPump .3s steps(2) -.15s infinite; }
/* the beach umbrella leans over him */
.astro.do-beach .ax-umb { rotate:16deg; }
/* bike: he turns sideways (a side-view drawing, legs pedalling round the crank); the front-facing figure steps aside */
.ax-svg i.ax-rlegs { background-repeat:no-repeat; background-size:400% 100%; image-rendering:pixelated; image-rendering:crisp-edges; }
.astro.do-bike .ax-rider { opacity:1; }
.astro.do-bike .ax-up, .astro.do-bike .ax-hip { opacity:0; }
.astro.do-bike .ax-rlegs { animation:axPedalF .45s steps(4) infinite; }
@keyframes axPedalF { from { background-position:0 0; } to { background-position:-112px 0; } }
/* beach, side-on: the deck chair with him lying back in it; the front-facing figure steps aside.
   The umbrella stands past the head of the chair and leans back over him. */
.astro.do-beach .ax-lounge { opacity:1; }
.astro.do-beach .ax-up, .astro.do-beach .ax-hip { opacity:0; }
.astro.do-beach .ax-umb { rotate:-12deg; }
@media(max-width:767px){
  .hxm-cta.has-astro { overflow:visible !important; }
  .hxm-cta .astro { left:18px; }
}
/* v2: everything fits one screen, fewer things on it, and the astronaut has his own space */
@media(max-width:767px){
  .hxm-cta .astro { left:auto !important; right:22px; }
}
@media(max-width:767px){
  /* mirrored at the right end: runs and moonwalks head left along the button, and the edge peek goes to the near (right) edge */
  .hxm-cta .astro .ax-svg { transform:translateX(34px) scale(-1.2143, 1.2143); }
}
/* no tap flash or focus box around the astronaut on phones */
.astro, .astro * { -webkit-tap-highlight-color:transparent; outline:none; }
/* phones, floating plan button: he sits at the right end */
@media(max-width:767px){
  a.cta-float .astro { left:auto !important; right:12px; }
}

/* ===== speech bubble (25 Oct 2026): ONE layout everywhere =====
   astro.js (place()) sets left/top so the bubble sits just above him, fully on screen, and --tail so the arrow
   points down at the middle of his figure. It re-measures every frame while the bubble shows, so it follows him.
   Do not add per-button or per-side bubble variants again: that is what made the arrow point at empty space. */
.astro-bubble { left:0; top:0; right:auto; bottom:auto; translate:none; white-space:normal; width:max-content;
  max-width:min(210px, calc(100vw - 40px)); line-height:1.25; transition:opacity .15s steps(2), transform .15s steps(2); }
.astro-bubble::after { left:var(--tail, 50%); right:auto; top:100%; transform:translate(-50%, -4px) rotate(45deg); }