/* Liquid Metal Button by Joly UI (MIT), adapted to the two Mutuals links. */
.button.metal-button{position:relative;display:inline-block;width:198px;max-width:100%;height:46px;padding:0;border:0;border-radius:100px;background:transparent;box-shadow:none;transform:none;transition:none;perspective:1000px;perspective-origin:50% 50%;color:#666;font-size:14px;font-weight:400;vertical-align:middle}
.button.metal-button:hover{background:transparent;box-shadow:none;transform:none;color:#666}
.button.metal-button.full{width:100%}
.metal-button-stack{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:all .8s cubic-bezier(.34,1.56,.64,1),width .4s ease,height .4s ease}
.metal-button-label,.metal-button-face,.metal-button-base,.metal-button-ripples{position:absolute;inset:0;width:100%;height:100%;transform-style:preserve-3d;transition:all .8s cubic-bezier(.34,1.56,.64,1),width .4s ease,height .4s ease;pointer-events:none}
.metal-button-label{display:flex;align-items:center;justify-content:center;gap:6px;z-index:30;transform:translateZ(20px);font-size:14px;font-weight:400;white-space:nowrap;color:#666;text-shadow:0 1px 2px #0008}
.metal-button-face{z-index:20;transform:translateZ(10px)}
.metal-button-inner{width:calc(100% - 4px);height:calc(100% - 4px);margin:2px;border-radius:100px;background:linear-gradient(180deg,#202020 0%,#000 100%);box-shadow:none;transition:all .8s cubic-bezier(.34,1.56,.64,1),width .4s ease,height .4s ease,box-shadow .15s cubic-bezier(.4,0,.2,1)}
.metal-button-base{z-index:10;transform:translateZ(0)}
.metal-button-shadow{width:100%;height:100%;border-radius:100px;background:transparent;box-shadow:0 0 0 1px #0000004d,0 36px 14px #00000005,0 20px 12px #00000014,0 9px 9px #0000001f,0 2px 5px #00000026;transition:all .8s cubic-bezier(.34,1.56,.64,1),width .4s ease,height .4s ease,box-shadow .15s cubic-bezier(.4,0,.2,1)}
.metal-button-shader{position:relative;width:100%;height:100%;overflow:hidden;border-radius:100px;background:linear-gradient(125deg,#202023 4%,#d9d9dd 18%,#434347 24%,#08080a 46%,#99999e 68%,#29292e 82%,#c0c0c5);transition:width .4s ease,height .4s ease}
.metal-button-shader canvas{display:block!important;position:absolute!important;inset:0;width:100%!important;height:100%!important;border-radius:100px!important}
.button.metal-button:is(:hover,:focus-visible) .metal-button-shadow{box-shadow:0 0 0 1px #0006,0 12px 6px #0000000d,0 8px 5px #0000001a,0 4px 4px #00000026,0 1px 2px #0003}
.button.metal-button:active .metal-button-face{transform:translateZ(10px) translateY(1px) scale(.98)}
.button.metal-button:active .metal-button-base{transform:translateZ(0) translateY(1px) scale(.98)}
.button.metal-button:active .metal-button-inner{box-shadow:inset 0 2px 4px #0006,inset 0 1px 2px #0000004d}
.button.metal-button:active .metal-button-shadow{box-shadow:0 0 0 1px #0008,0 1px 2px #0000004d}
.metal-button-ripples{z-index:40;transform:translateZ(25px);overflow:hidden;border-radius:100px}
.metal-button-ripple{position:absolute;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#ffffff66 0%,#fff0 70%);animation:metal-button-ripple .6s ease-out forwards;pointer-events:none}
@keyframes metal-button-ripple{from{transform:translate(-50%,-50%) scale(0);opacity:.6}to{transform:translate(-50%,-50%) scale(4);opacity:0}}
@media(max-width:700px){.button.metal-button.small{width:164px;height:46px}.button.metal-button.small .metal-button-label{font-size:12px}}
@media(prefers-reduced-motion:reduce){.metal-button-stack,.metal-button-label,.metal-button-face,.metal-button-base,.metal-button-inner,.metal-button-shadow,.metal-button-shader,.metal-button-ripples{transition:none}.metal-button-ripple{display:none}}
