/* HOW TO JOIN button hover/focus; widths from button-width-unified.css remain unchanged. */
.mrg-designed .md-how .md-steps article a.md-outline,
.mrg-designed .md-how .md-steps article a.md-line {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .mrg-designed .md-how .md-steps article a.md-outline:hover {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.95) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(255,255,255,.36), 0 0 24px rgba(255,255,255,.18), inset 0 0 12px rgba(255,255,255,.08);
  }
  .mrg-designed .md-how .md-steps article a.md-line:hover {
    background: linear-gradient(180deg,#faff94 0%,#a7ff23 48%,#00a65b 100%) !important;
    color: #091c12 !important;
    box-shadow: 0 0 20px rgba(133,255,0,.48);
    filter: brightness(1.07);
  }
}
.mrg-designed .md-how .md-steps article a.md-outline:focus-visible {
  background: rgba(255,255,255,.12) !important; border-color: #fff !important; color: #fff !important;
  box-shadow: 0 0 10px rgba(255,255,255,.36), 0 0 24px rgba(255,255,255,.18);
  outline: 3px solid #fff; outline-offset: 3px;
}
.mrg-designed .md-how .md-steps article a.md-line:focus-visible {
  background: linear-gradient(180deg,#faff94,#a7ff23,#00a65b) !important;
  outline: 3px solid #fff; outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .mrg-designed .md-how .md-steps article a.md-outline,
  .mrg-designed .md-how .md-steps article a.md-line { transition: none !important; }
}