#w-support{width:440px;max-width:calc(100% - 16px)}
#w-support .support-body{padding:24px;box-sizing:border-box;overflow:auto}
.support-hero{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px}
.support-hero>svg{width:54px;height:54px;flex:none;fill:#f2f2f2;stroke:#2a2a2a;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.support-hero h2{font-size:22px;line-height:1.15;margin:0 0 9px;color:#222}
.support-hero p{font-size:14px;line-height:1.5;margin:0;color:#555}
.support-cadence{font-size:12px;color:#555;margin:0 0 18px}
.support-presets{border:0;padding:0;margin:0 0 20px;min-width:0}
.support-presets legend,.support-label{font-size:13px;font-weight:bold;margin-bottom:9px;display:block;color:#222}
#support-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#support-presets button{min-height:44px;padding:9px 6px;white-space:nowrap}
#support-presets button[aria-pressed=true]{background:linear-gradient(#67a6da,#2b609a);color:#fff;border-color:#234969;text-shadow:0 1px #214667}
.support-amount{display:flex;align-items:center;border:1px solid #aaa;background:white;box-shadow:inset 0 1px 3px #0002;border-radius:5px;overflow:hidden}
.support-amount>span{padding-left:13px;color:#555;font-size:14px}
.support-amount input{min-width:0!important;box-sizing:border-box!important;width:100%!important;min-height:46px;border:0!important;background:transparent!important;box-shadow:none!important;padding:10px 13px!important;font-size:18px!important;color:#222!important}
.support-amount:focus-within{outline:2px solid #3675a5;outline-offset:2px}
.support-submit{width:100%;margin-top:20px;min-height:44px;box-sizing:border-box;font-weight:bold}
.support-submit:disabled{opacity:.55;cursor:default}
.support-status{text-align:center;font-size:12px;line-height:1.5;color:#666;margin:10px 0 0}
#support-error{font-size:13px;color:#9b1c1c;margin:8px 0 0}
@media(max-width:700px){#w-support .support-body{padding:20px}.support-hero{gap:12px}.support-hero h2{font-size:20px}}

/* Donation piggy bank: internal motion, aligned with the desktop icons. */
svg[data-cx-icon="support"] .cx-pig-body{transform-origin:24px 39px;transform-box:view-box}
svg[data-cx-icon="support"] .cx-pig-coin{transform-origin:24px 7px;transform-box:view-box}
@media(prefers-reduced-motion:no-preference){
 .ico[data-open="w-support"]:is(:hover,:focus-visible) svg[data-cx-icon="support"] .cx-pig-coin,
 #w-support.open svg[data-cx-icon="support"] .cx-pig-coin{animation:cxPigCoinDrop 2.2s ease-in-out infinite!important}
 .ico[data-open="w-support"]:is(:hover,:focus-visible) svg[data-cx-icon="support"] .cx-pig-body,
 #w-support.open svg[data-cx-icon="support"] .cx-pig-body{animation:cxPigHappyWiggle 2.2s ease-in-out infinite!important}
 .ico[data-open="w-support"]:is(:hover,:focus-visible) svg[data-cx-icon="support"] .cx-pig-eye,
 #w-support.open svg[data-cx-icon="support"] .cx-pig-eye{animation:cxPigBlink 2.2s linear infinite!important;transform-origin:34px 25px;transform-box:view-box}
}
@keyframes cxPigCoinDrop{
 0%,12%{transform:translateY(-2px) rotateY(0deg);opacity:1}
 36%{transform:translateY(8px) rotateY(180deg);opacity:1}
 43%,75%{transform:translateY(11px) rotateY(240deg);opacity:0}
 76%{transform:translateY(-7px) rotateY(0deg);opacity:0}
 92%,100%{transform:translateY(-2px) rotateY(0deg);opacity:1}
}
@keyframes cxPigHappyWiggle{
 0%,36%,72%,100%{transform:rotate(0deg) translateY(0)}
 44%{transform:rotate(-5deg) translateY(1px)}
 52%{transform:rotate(5deg) translateY(-1px)}
 60%{transform:rotate(-3deg)}
}
@keyframes cxPigBlink{0%,55%,63%,100%{transform:scaleY(1)}59%{transform:scaleY(.1)}}