/* ToolPaxa approved one-shot tool illustrations.
   Inline SVG retains crisp static artwork for reduced-motion users. */
.tool-icon.motion-icon{
 display:inline-flex;align-items:center;justify-content:center;
 width:62px;height:62px;padding:2px;
 background:#EFF6FF;color:#2563EB;border:1px solid #DBEAFE;
 border-radius:17px;flex-shrink:0;overflow:visible;
}
.tool-icon.motion-icon .motion-svg{
 display:block;width:100%;height:100%;
 max-width:none;max-height:none;
 overflow:visible;stroke:none;fill:none;
}
.tool-card .tool-icon.motion-icon{margin-bottom:3px}
.tool-intro .tool-icon.motion-icon{width:73px;height:73px;border-radius:19px}
.motion-svg :is(path,rect,g,circle,text){transform-box:fill-box;transform-origin:center}
.motion-svg .merge-new,.motion-svg .merge-spark,
.motion-svg .compress-pdf-check,.motion-svg .compress-image-spark,
.motion-svg .gratuity-result,.motion-svg .gratuity-spark,
.motion-svg .motion-after{opacity:0}
@keyframes tp-mergeLeft{0%{transform:translateX(0);opacity:1}45%{transform:translateX(18px);opacity:1}77%,100%{transform:translateX(21px);opacity:0}}
@keyframes tp-mergeRight{0%{transform:translateX(0);opacity:1}45%{transform:translateX(-18px);opacity:1}77%,100%{transform:translateX(-21px);opacity:0}}
@keyframes tp-mergeNew{0%,42%{opacity:0;transform:scale(.6)}74%,100%{opacity:1;transform:scale(1)}}
@keyframes tp-twinkle{0%,45%,100%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1)}}
@keyframes tp-splitLeft{0%{transform:translateX(0)}75%,100%{transform:translateX(-13px)}}
@keyframes tp-splitRight{0%{transform:translateX(0)}75%,100%{transform:translateX(13px)}}
@keyframes tp-splitLine{0%{opacity:1}50%,100%{opacity:0}}
@keyframes tp-splitArrows{0%,35%{opacity:0;transform:scale(.6)}80%,100%{opacity:1;transform:scale(1)}}
@keyframes tp-shrink{0%,15%{transform:scale(1)}72%,100%{transform:scale(.74)}}
@keyframes tp-pressLeft{0%,15%{transform:translateX(0)}72%,100%{transform:translateX(12px)}}
@keyframes tp-pressRight{0%,15%{transform:translateX(0)}72%,100%{transform:translateX(-12px)}}
@keyframes tp-checkAppear{0%,60%{opacity:0;transform:scale(.4)}85%,100%{opacity:1;transform:scale(1)}}
@keyframes tp-resizePhoto{0%,20%{transform:scale(.77) translate(-6px,5px)}78%,100%{transform:scale(1.05)}}
@keyframes tp-resizeHandle{0%,20%{transform:translate(-12px,-10px)}78%,100%{transform:translate(6px,5px)}}
@keyframes tp-resizeGuides{0%,45%{opacity:.25}85%,100%{opacity:1}}
@keyframes tp-calculate{0%,30%{opacity:.5;transform:translateY(2px)}65%,100%{opacity:1;transform:translateY(0)}}
@keyframes tp-confirm{0%,50%{opacity:0;transform:scale(.55)}85%,100%{opacity:1;transform:scale(1)}}
@keyframes tp-bob{0%,100%{transform:translateY(0)}45%{transform:translateY(-8px)}}
@keyframes tp-extract{0%,20%{opacity:0;transform:translateX(-12px)}90%,100%{opacity:1;transform:translateX(14px)}}
@keyframes tp-hide{0%,40%{opacity:1;transform:translateX(0)}90%,100%{opacity:0;transform:translateX(14px)}}
@keyframes tp-fade{0%,15%{opacity:0}85%,100%{opacity:1}}
@keyframes tp-rotate{0%,20%{transform:rotate(0deg)}90%,100%{transform:rotate(90deg)}}
@keyframes tp-stack{0%,20%{transform:translateX(0)}90%,100%{transform:translateX(7px)}}
@keyframes tp-mark{0%,25%{opacity:.22;transform:scale(.85)}90%,100%{opacity:1;transform:scale(1)}}
@media(hover:hover){
 .tool-card:hover .motion-svg .merge-left,.tool-intro:hover .motion-svg .merge-left{animation:tp-mergeLeft 1.05s ease both}
 .tool-card:hover .motion-svg .merge-right,.tool-intro:hover .motion-svg .merge-right{animation:tp-mergeRight 1.05s ease both}
 .tool-card:hover .motion-svg .merge-new,.tool-intro:hover .motion-svg .merge-new{animation:tp-mergeNew 1.05s ease both}
 .tool-card:hover .motion-svg .merge-spark,.tool-intro:hover .motion-svg .merge-spark{animation:tp-twinkle 1.05s ease both}
 .tool-card:hover .motion-svg .split-left,.tool-intro:hover .motion-svg .split-left{animation:tp-splitLeft 1.05s ease both}
 .tool-card:hover .motion-svg .split-right,.tool-intro:hover .motion-svg .split-right{animation:tp-splitRight 1.05s ease both}
 .tool-card:hover .motion-svg .split-dash,.tool-intro:hover .motion-svg .split-dash{animation:tp-splitLine 1.05s ease both}
 .tool-card:hover .motion-svg .split-arrows,.tool-intro:hover .motion-svg .split-arrows{animation:tp-splitArrows 1.05s ease both}
 .tool-card:hover .motion-svg :is(.compress-pdf-page,.compress-image-frame),.tool-intro:hover .motion-svg :is(.compress-pdf-page,.compress-image-frame){animation:tp-shrink 1.08s ease both}
 .tool-card:hover .motion-svg :is(.compress-pdf-left,.compress-image-left),.tool-intro:hover .motion-svg :is(.compress-pdf-left,.compress-image-left){animation:tp-pressLeft 1.08s ease both}
 .tool-card:hover .motion-svg :is(.compress-pdf-right,.compress-image-right),.tool-intro:hover .motion-svg :is(.compress-pdf-right,.compress-image-right){animation:tp-pressRight 1.08s ease both}
 .tool-card:hover .motion-svg :is(.compress-pdf-check,.compress-image-spark),.tool-intro:hover .motion-svg :is(.compress-pdf-check,.compress-image-spark){animation:tp-checkAppear 1.08s ease both}
 .tool-card:hover .motion-svg .resize-image-photo,.tool-intro:hover .motion-svg .resize-image-photo{animation:tp-resizePhoto 1.05s ease both}
 .tool-card:hover .motion-svg .resize-image-handle,.tool-intro:hover .motion-svg .resize-image-handle{animation:tp-resizeHandle 1.05s ease both}
 .tool-card:hover .motion-svg .resize-image-guides,.tool-intro:hover .motion-svg .resize-image-guides{animation:tp-resizeGuides 1.05s ease both}
 .tool-card:hover .motion-svg :is(.gratuity-buttons,.gratuity-amount),.tool-intro:hover .motion-svg :is(.gratuity-buttons,.gratuity-amount){animation:tp-calculate 1.07s ease both}
 .tool-card:hover .motion-svg :is(.gratuity-result,.gratuity-spark),.tool-intro:hover .motion-svg :is(.gratuity-result,.gratuity-spark){animation:tp-confirm 1.07s ease both}
 .tool-card:hover .motion-svg .motion-before,.tool-intro:hover .motion-svg .motion-before{animation:tp-hide 1.05s ease both}
 .tool-card:hover .motion-svg .motion-after,.tool-intro:hover .motion-svg .motion-after{animation:tp-fade 1.05s ease both}
 .tool-card:hover .motion-svg .motion-delete,.tool-intro:hover .motion-svg .motion-delete{animation:tp-bob 1.05s ease both}
 .tool-card:hover .motion-svg[data-motion="rotate"] .motion-action,.tool-intro:hover .motion-svg[data-motion="rotate"] .motion-action{animation:tp-rotate 1.05s ease both}
 .tool-card:hover .motion-svg[data-motion="organize"] .motion-sheet-b,.tool-intro:hover .motion-svg[data-motion="organize"] .motion-sheet-b{animation:tp-stack 1.05s ease both}
 .tool-card:hover .motion-svg :is(.motion-numbers,.motion-watermark),.tool-intro:hover .motion-svg :is(.motion-numbers,.motion-watermark){animation:tp-mark 1.05s ease both}
 .tool-card:hover .motion-svg[data-motion="loan"] .motion-action,.tool-intro:hover .motion-svg[data-motion="loan"] .motion-action{animation:tp-checkAppear 1.05s ease both}
}
.tool-card:focus-visible .motion-svg .merge-left{animation:tp-mergeLeft 1.05s ease both}
.tool-card:focus-visible .motion-svg .merge-right{animation:tp-mergeRight 1.05s ease both}
.tool-card:focus-visible .motion-svg .merge-new{animation:tp-mergeNew 1.05s ease both}
.tool-card:focus-visible .motion-svg .merge-spark{animation:tp-twinkle 1.05s ease both}
.tool-card:focus-visible .motion-svg .split-left{animation:tp-splitLeft 1.05s ease both}
.tool-card:focus-visible .motion-svg .split-right{animation:tp-splitRight 1.05s ease both}
.tool-card:focus-visible .motion-svg .split-dash{animation:tp-splitLine 1.05s ease both}
.tool-card:focus-visible .motion-svg .split-arrows{animation:tp-splitArrows 1.05s ease both}
.tool-card:focus-visible .motion-svg :is(.compress-pdf-page,.compress-image-frame){animation:tp-shrink 1.05s ease both}
.tool-card:focus-visible .motion-svg :is(.compress-pdf-left,.compress-image-left){animation:tp-pressLeft 1.05s ease both}
.tool-card:focus-visible .motion-svg :is(.compress-pdf-right,.compress-image-right){animation:tp-pressRight 1.05s ease both}
.tool-card:focus-visible .motion-svg :is(.compress-pdf-check,.compress-image-spark){animation:tp-checkAppear 1.05s ease both}
.tool-card:focus-visible .motion-svg .resize-image-photo{animation:tp-resizePhoto 1.05s ease both}
.tool-card:focus-visible .motion-svg .resize-image-handle{animation:tp-resizeHandle 1.05s ease both}
.tool-card:focus-visible .motion-svg .resize-image-guides{animation:tp-resizeGuides 1.05s ease both}
.tool-card:focus-visible .motion-svg :is(.gratuity-buttons,.gratuity-amount){animation:tp-calculate 1.05s ease both}
.tool-card:focus-visible .motion-svg :is(.gratuity-result,.gratuity-spark){animation:tp-confirm 1.05s ease both}
.tool-card:focus-visible .motion-svg .motion-before{animation:tp-hide 1.05s ease both}
.tool-card:focus-visible .motion-svg .motion-after{animation:tp-fade 1.05s ease both}
.tool-card:focus-visible .motion-svg .motion-delete{animation:tp-bob 1.05s ease both}
.tool-card:focus-visible .motion-svg[data-motion="rotate"] .motion-action{animation:tp-rotate 1.05s ease both}
.tool-card:focus-visible .motion-svg[data-motion="organize"] .motion-sheet-b{animation:tp-stack 1.05s ease both}
.tool-card:focus-visible .motion-svg :is(.motion-numbers,.motion-watermark){animation:tp-mark 1.05s ease both}
.tool-card:focus-visible .motion-svg[data-motion="loan"] .motion-action{animation:tp-checkAppear 1.05s ease both}
@media(prefers-reduced-motion:reduce){
 .motion-svg *, .tool-card .motion-svg *, .tool-intro .motion-svg *{animation:none!important;transition:none!important}
 .motion-svg .merge-new,.motion-svg .motion-after,.motion-svg .gratuity-result{opacity:0}
}
@media(max-width:600px){
 .tool-icon.motion-icon{width:55px;height:55px;border-radius:14px}
 .tool-intro .tool-icon.motion-icon{width:60px;height:60px}
}