/* Pit bot mascot (shared by every page that shows an SVG mascot). Matches the homepage original: no arms or legs;
   emotion through the face plus whole-body motion. Transform/opacity only, so it stays at 60fps. Static when reduced motion is on. */
.pt{overflow:visible;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
:root[data-theme=light] .pt{filter:drop-shadow(0 12px 14px rgba(110,48,0,.2))}
@media (prefers-color-scheme:light){:root:not([data-theme]) .pt{filter:drop-shadow(0 12px 14px rgba(110,48,0,.2))}}
.pt g,.pt path,.pt ellipse,.pt circle{transform-box:fill-box}
.pt .pt-bob,.pt .pt-hop,.pt .pt-head{transform-origin:50% 100%}
.pt .pt-eye,.pt .pt-eyes,.pt .pt-wink,.pt .pt-badge,.pt .pt-icw,.pt .pt-sparkeye,.pt .pt-sparks path,.pt .pt-mouth,.pt .pt-brows,.pt .pt-brow-r{transform-origin:50% 50%}
.pt .pt-flame{transform-origin:50% 0}
.pt .pt-b-tag .pt-icw{transform-origin:22% 22%}
/* multi-face mascot (error checker): data-state picks the face, crossfaded */
.pt .pt-face{transition:opacity .28s ease}
.pt[data-state] .pt-face,.pt[data-state] .pt-sweat,.pt[data-state] .pt-sparks{opacity:0}
.pt[data-state=idle] .pf-worried,.pt[data-state=concerned] .pf-worried,.pt[data-state=analyzing] .pf-analyzing,.pt[data-state=relieved] .pf-relieved{opacity:1}
.pt[data-state=concerned] .pt-sweat,.pt[data-state=relieved] .pt-sparks{opacity:1}
.pt .pt-sweat,.pt .pt-sparks{transition:opacity .25s ease}
@media (prefers-reduced-motion:no-preference){
.pt .pt-bob{animation:ptBob 3.4s cubic-bezier(.45,0,.55,1) infinite}
.pt .pt-head{animation:ptTilt 6.8s ease-in-out infinite}
.pt .pt-flame{animation:ptFlame .16s ease-in-out infinite alternate}
.pt .pt-lip{animation:ptLip 1.7s ease-in-out infinite}
.pt .pt-eye{animation:ptBlink 5.2s infinite}
.pt .pt-badge{animation:ptBadge 3.2s ease-in-out infinite}
.pt .pt-bt{animation-delay:-1.4s}
.pt .pt-halo{animation:ptHalo 2.6s ease-in-out infinite}
/* fixes: confident, happy hop with squash & stretch, wrench badge turning */
.pt--happy .pt-hop{animation:ptHop 3.6s cubic-bezier(.33,0,.3,1) infinite}
.pt--happy .pf-happy .pt-eyes{animation:ptSquint 3.6s ease-in-out infinite}
.pt .pt-b-wrench .pt-icw{animation:ptTurn 3.6s cubic-bezier(.4,0,.2,1) infinite}
/* pricing: friendly wink, head tips into the wink, tag swings */
.pt--wink .pt-head{animation:ptWinkTilt 4.2s cubic-bezier(.4,0,.2,1) infinite}
.pt--wink .pt-wink{animation:ptWink 4.2s cubic-bezier(.4,0,.2,1) infinite}
.pt--wink .pt-hop{animation:ptNudge 4.2s cubic-bezier(.33,0,.3,1) infinite}
.pt .pt-b-tag .pt-icw{animation:ptSwing 2.4s ease-in-out infinite}
/* faq: thinking, eyes drift up, brow lifts, the lightbulb switches on */
.pt--think .pt-head{animation:ptPonder 5.6s ease-in-out infinite}
.pt--think .pt-look{animation:ptLook 5.6s cubic-bezier(.45,0,.55,1) infinite}
.pt--think .pt-brow-r{animation:ptBrow 5.6s cubic-bezier(.45,0,.55,1) infinite}
.pt .pt-b-bulb .pt-icw{animation:ptBulb 5.6s ease-in-out infinite}
.pt .pt-b-bulb .pt-halo{animation:ptBulbHalo 5.6s ease-in-out infinite}
.pt .pt-b-q .pt-icw{animation:ptQ 2.8s ease-in-out infinite}
/* free tools: curious, head cocks, monocle eye widens, glint */
.pt--curious .pt-head{animation:ptCock 6s cubic-bezier(.45,0,.55,1) infinite}
.pt--curious .pt-big{animation:ptBig 6s cubic-bezier(.45,0,.55,1) infinite}
.pt--curious .pt-brow-r{animation:ptBrowC 6s cubic-bezier(.45,0,.55,1) infinite}
.pt .pt-glint{animation:ptGlint 3s ease-in-out infinite}
/* error checker states */
.pt .pf-worried .pt-brows{animation:ptWorry 1.6s ease-in-out infinite}
.pt .pf-worried .pt-mouth{animation:ptWobble .55s ease-in-out infinite alternate}
.pt[data-state=concerned] .pt-head{animation:ptShiver 2.4s ease-in-out infinite}
.pt[data-state=concerned] .pt-sweat{animation:ptSweat 1.9s ease-in infinite}
.pt .pt-scan{animation:ptScan .9s cubic-bezier(.45,0,.55,1) infinite alternate}
.pt[data-state=analyzing] .pt-head{animation:ptNod .9s ease-in-out infinite alternate}
.pt[data-state=relieved] .pt-hop{animation:ptHop1 .85s cubic-bezier(.33,0,.3,1) 1 both}
.pt[data-state=relieved] .pt-eyes{animation:ptSquint1 .85s ease-in-out 1}
.pt .pt-sparks path{animation:ptTwinkle 1.4s ease-in-out infinite}
.pt .pt-sparks path:nth-child(2){animation-delay:.35s}.pt .pt-sparks path:nth-child(3){animation-delay:.7s}
.pt.pt-pop .pt-hop{animation:ptPop .42s cubic-bezier(.3,1.5,.5,1) 1}
/* conversion pop-up: excited, sparkle eyes */
.pt--excited .pt-hop{animation:ptHop 3.2s cubic-bezier(.33,0,.3,1) infinite}
.pt .pt-sparkeye{animation:ptSparkEye 1.6s ease-in-out infinite}
.pt .pt-sparkeye.pt-d{animation-delay:.25s}
}
@media (prefers-reduced-motion:reduce){.pt *{animation:none!important;transition:none!important}}
@keyframes ptBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ptTilt{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes ptFlame{from{transform:scale(.94,.88);opacity:.82}to{transform:scale(1.04,1.08);opacity:1}}
@keyframes ptLip{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes ptBlink{0%,90%,100%{transform:scaleY(1)}92%{transform:scaleY(.08)}94%{transform:scaleY(1)}}
@keyframes ptBadge{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-6px) rotate(5deg)}}
@keyframes ptHalo{0%,100%{opacity:.16}50%{opacity:.34}}
@keyframes ptHop{0%,58%,100%{transform:none}64%{transform:translateY(1.5px) scale(1.06,.93)}73%{transform:translateY(-13px) scale(.95,1.06)}82%{transform:translateY(0) scale(1.07,.92)}88%{transform:scale(.98,1.02)}94%{transform:none}}
@keyframes ptHop1{0%{transform:none}14%{transform:translateY(1.5px) scale(1.07,.92)}40%{transform:translateY(-15px) scale(.95,1.06)}66%{transform:translateY(0) scale(1.08,.91)}82%{transform:scale(.98,1.02)}100%{transform:none}}
@keyframes ptPop{0%{transform:none}35%{transform:scale(1.05,.94)}70%{transform:scale(.97,1.04)}100%{transform:none}}
@keyframes ptSquint{0%,60%,100%{transform:none}66%,84%{transform:scaleY(.8)}}
@keyframes ptSquint1{0%,100%{transform:none}20%,70%{transform:scaleY(.78)}}
@keyframes ptTurn{0%,55%,100%{transform:rotate(0)}66%{transform:rotate(-28deg)}76%{transform:rotate(14deg)}86%{transform:rotate(0)}}
@keyframes ptWinkTilt{0%,40%,100%{transform:rotate(0)}52%,78%{transform:rotate(5deg)}}
@keyframes ptWink{0%,40%,100%{transform:none}50%{transform:scale(1.15,.55)}58%,78%{transform:scale(1.06,.85)}}
@keyframes ptNudge{0%,40%,100%{transform:none}48%{transform:scale(1.04,.95)}56%{transform:translateY(-4px) scale(.98,1.03)}64%{transform:none}}
@keyframes ptSwing{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes ptPonder{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3.5deg)}}
@keyframes ptLook{0%,18%,92%,100%{transform:translate(0,0)}30%,58%{transform:translate(3px,-3px)}68%,80%{transform:translate(-3px,-1px)}}
@keyframes ptBrow{0%,18%,92%,100%{transform:translateY(0)}30%,58%{transform:translateY(-3px)}}
@keyframes ptBulb{0%,52%{transform:scale(1);opacity:.45}58%{transform:scale(1.25);opacity:1}64%,90%{transform:scale(1);opacity:1}100%{opacity:.45}}
@keyframes ptBulbHalo{0%,52%,100%{opacity:.1}58%{opacity:.7}66%,88%{opacity:.4}}
@keyframes ptQ{0%,100%{transform:rotate(-10deg) scale(1)}50%{transform:rotate(10deg) scale(1.08)}}
@keyframes ptCock{0%,15%,100%{transform:rotate(0)}30%,65%{transform:rotate(-7deg)}78%{transform:rotate(2deg)}88%{transform:rotate(0)}}
@keyframes ptBig{0%,15%,88%,100%{transform:scale(1)}30%,65%{transform:scale(1.14)}91%{transform:scale(1.1,.1)}94%{transform:scale(1)}}
@keyframes ptBrowC{0%,15%,100%{transform:translateY(0)}30%,65%{transform:translateY(-3.5px)}}
@keyframes ptGlint{0%,55%,100%{opacity:0;transform:translate(-3px,3px)}70%{opacity:.95}85%{opacity:0;transform:translate(4px,-3px)}}
@keyframes ptWorry{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.8px)}}
@keyframes ptWobble{from{transform:scaleX(.93)}to{transform:scaleX(1.05)}}
@keyframes ptShiver{0%,100%{transform:rotate(-2deg)}25%{transform:rotate(1.5deg)}50%{transform:rotate(-1.5deg)}75%{transform:rotate(2deg)}}
@keyframes ptSweat{0%{opacity:0;transform:translateY(-4px) scale(.6)}20%{opacity:1;transform:translateY(0) scale(1)}80%{opacity:1;transform:translateY(9px)}100%{opacity:0;transform:translateY(13px)}}
@keyframes ptScan{from{transform:translateX(-6px)}to{transform:translateX(6px)}}
@keyframes ptNod{from{transform:rotate(-1.5deg) translateY(0)}to{transform:rotate(1.5deg) translateY(1px)}}
@keyframes ptTwinkle{0%,100%{transform:scale(.3) rotate(0);opacity:.2}50%{transform:scale(1.1) rotate(45deg);opacity:1}}
@keyframes ptSparkEye{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(18deg)}}
/* ---- Page-unique faces and props (pagestyle.py, Oct 18, 2026). Same body; only the face, props and motion change. ---- */
.pt .pt-read,.pt .pt-side,.pt .pt-heart,.pt .pt-spiral,.pt .pt-fl,.pt .pt-vscan,.pt .pt-look,.pt .pt-chip,.pt .pt-chipdot,.pt .pt-glasses,.pt .pt-shades,.pt .pt-brow-l{transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){
.pt.pt-v1 .pt-bob{animation-duration:3.9s}.pt.pt-v2 .pt-bob{animation-duration:3s}.pt.pt-v3 .pt-bob{animation-duration:4.5s}
.pt.pt-v1 .pt-head{animation-duration:7.6s}.pt.pt-v3 .pt-head{animation-duration:5.8s}
.pt--concerned .pt-head{animation:ptShake 5.2s cubic-bezier(.45,0,.55,1) infinite}
.pt--concerned .pt-brow-r{animation:ptBrow 5.2s cubic-bezier(.45,0,.55,1) infinite}
.pt--determined .pt-head{animation:ptLean 3.8s cubic-bezier(.45,0,.55,1) infinite}
.pt--determined .pt-brows{animation:ptPress 3.8s cubic-bezier(.45,0,.55,1) infinite}
.pt--studious .pt-read{animation:ptRead 4.4s cubic-bezier(.45,0,.55,1) infinite}
.pt--studious .pt-head{animation:ptNodRead 4.4s ease-in-out infinite}
.pt--confused .pt-head{animation:ptCock 4.6s cubic-bezier(.45,0,.55,1) infinite}
.pt--confused .pt-big{animation:ptBig 4.6s cubic-bezier(.45,0,.55,1) infinite}
.pt--confused .pt-brow-r{animation:ptBrowC 4.6s cubic-bezier(.45,0,.55,1) infinite}
.pt--calm .pt-bob{animation:ptBreathe 5.6s ease-in-out infinite}
.pt--calm .pt-eye{animation:ptBlinkSlow 6.4s infinite}
.pt--surprised .pt-hop{animation:ptStartle 4.2s cubic-bezier(.3,1.4,.5,1) infinite}
.pt--surprised .pt-brows{animation:ptBrowUp 4.2s cubic-bezier(.3,1.4,.5,1) infinite}
.pt--surprised .pt-mouth{animation:ptO 4.2s ease-in-out infinite}
.pt--alarmed .pt-head{animation:ptShiver 1.1s ease-in-out infinite}
.pt--alarmed .pt-mouth{animation:ptGasp 1.1s ease-in-out infinite}
.pt--grimace .pt-head{animation:ptShiver 1.6s ease-in-out infinite}
.pt--grimace .pt-mouth{animation:ptClench 1.6s ease-in-out infinite}
.pt--skeptical .pt-head{animation:ptSkep 5s cubic-bezier(.45,0,.55,1) infinite}
.pt--skeptical .pt-brow-l{animation:ptBrow 5s cubic-bezier(.45,0,.55,1) infinite}
.pt--hopeful .pt-look{animation:ptHope 4.8s cubic-bezier(.45,0,.55,1) infinite}
.pt--hopeful .pt-hop{animation:ptNudge 4.8s cubic-bezier(.33,0,.3,1) infinite}
.pt--sheepish .pt-side{animation:ptSide 4.6s cubic-bezier(.45,0,.55,1) infinite}
.pt--sheepish .pt-head{animation:ptShy 4.6s cubic-bezier(.45,0,.55,1) infinite}
.pt--love .pt-heart{animation:ptBeat 1.3s ease-in-out infinite}
.pt--love .pt-hop{animation:ptHop 3.8s cubic-bezier(.33,0,.3,1) infinite}
.pt--proud .pt-head{animation:ptChin 5s cubic-bezier(.45,0,.55,1) infinite}
.pt--dizzy .pt-spiral{animation:ptSpin 1.8s linear infinite}
.pt--dizzy .pt-head{animation:ptWobbleHead 2.4s ease-in-out infinite}
.pt--worried .pt-head{animation:ptShiver 3.2s ease-in-out infinite}
.pt--analyzing .pt-head{animation:ptNod 1.4s ease-in-out infinite alternate}
.pt--relieved .pt-hop{animation:ptHop 4.2s cubic-bezier(.33,0,.3,1) infinite}
.pt--neutral .pt-head{animation:ptTilt 8s ease-in-out infinite}
.pt .pt-vscan{animation:ptVisor 2.2s cubic-bezier(.45,0,.55,1) infinite alternate}
.pt .pt-fl{animation:ptFloat 3.4s ease-in-out infinite}
.pt .pt-fl-x{animation:ptPulseX 1.2s ease-in-out infinite}
.pt .pt-fl-d circle{animation:ptDot 1.4s ease-in-out infinite}
.pt .pt-fl-d circle:nth-child(2){animation-delay:.2s}.pt .pt-fl-d circle:nth-child(3){animation-delay:.4s}
.pt .pt-chip{animation:ptChip 4s ease-in-out infinite}
.pt .pt-chipdot{animation:ptHalo 1.6s ease-in-out infinite}
.pt .pt-mini{animation-delay:-1.1s;animation-duration:2.6s}
}
@keyframes ptShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-3deg)}40%{transform:rotate(2.5deg)}60%{transform:rotate(-1.5deg)}80%{transform:rotate(0)}}
@keyframes ptLean{0%,100%{transform:rotate(0) translateY(0)}45%,60%{transform:rotate(-2.5deg) translateY(2px) scale(1.02)}}
@keyframes ptPress{0%,100%{transform:translateY(0)}45%,60%{transform:translateY(1.6px)}}
@keyframes ptRead{0%,100%{transform:translateX(-3.5px)}40%{transform:translateX(3.5px)}45%{transform:translate(-3.5px,2px)}85%{transform:translate(3.5px,2px)}}
@keyframes ptNodRead{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.4deg) translateY(1px)}}
@keyframes ptBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.012)}}
@keyframes ptBlinkSlow{0%,86%,100%{transform:scaleY(1)}90%{transform:scaleY(.15)}94%{transform:scaleY(1)}}
@keyframes ptStartle{0%,55%,100%{transform:none}60%{transform:translateY(-10px) scale(.97,1.05)}68%{transform:translateY(0) scale(1.04,.96)}74%{transform:none}}
@keyframes ptBrowUp{0%,55%,85%,100%{transform:translateY(0)}60%,78%{transform:translateY(-3px)}}
@keyframes ptO{0%,55%,100%{transform:scale(1)}62%,80%{transform:scale(1.25)}}
@keyframes ptGasp{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.3)}}
@keyframes ptClench{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.08) scaleY(.9)}}
@keyframes ptSkep{0%,20%,100%{transform:rotate(0)}35%,70%{transform:rotate(4deg)}}
@keyframes ptHope{0%,15%,90%,100%{transform:translate(0,0)}30%,70%{transform:translate(1px,-3px)}}
@keyframes ptSide{0%,15%,85%,100%{transform:translateX(0)}30%,65%{transform:translateX(-7px)}}
@keyframes ptShy{0%,15%,85%,100%{transform:rotate(0)}30%,65%{transform:rotate(-4deg) translateY(1px)}}
@keyframes ptBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.22)}30%{transform:scale(1)}45%{transform:scale(1.14)}}
@keyframes ptChin{0%,20%,100%{transform:rotate(0)}35%,70%{transform:rotate(3deg) translateY(-2px)}}
@keyframes ptSpin{to{transform:rotate(360deg)}}
@keyframes ptWobbleHead{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes ptVisor{from{transform:translateX(0)}to{transform:translateX(64px)}}
@keyframes ptFloat{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(-6px);opacity:1}}
@keyframes ptPulseX{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.2);opacity:1}}
@keyframes ptDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes ptChip{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}