/* Keep button geometry stable; give feedback through colour and the arrow. */
.button{transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}
.button:hover,.button:active{transform:none;box-shadow:none}
.button i{position:relative;flex-shrink:0;transition:transform .25s ease}
@media(hover:hover) and (pointer:fine){
  .button:hover{box-shadow:inset 0 0 0 1px #ffffff26}
  .button:hover i{transform:translate(2px,-2px)}
  .hero-actions .button-outline:hover{border-color:var(--green);background-color:#dcebd6;box-shadow:inset 0 0 0 1px #0f84651a}
  .license-card .button-outline:hover{border-color:#cdeca5;background-color:#234c3c;box-shadow:inset 0 0 0 1px #cdeca526}
}
.button:active{box-shadow:inset 0 0 0 2px #15392e40}
.button:active i{transform:none}
@media(prefers-reduced-motion:reduce){
  .button,.button i{transition:none}
  .button:hover i{transform:none}
}