.button {
  position: relative;
  border: 1px solid rgba(154, 18, 15, .3);
  background: linear-gradient(180deg, #ef3732 0%, #e52420 58%, #d91d19 100%);
  box-shadow: 0 8px 18px rgba(174, 24, 20, .25), 0 2px 5px rgba(16, 27, 46, .16), inset 0 1px 0 rgba(255, 255, 255, .3);
  transform: translateY(0);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.button:hover {
  background: linear-gradient(180deg, #ea2d29 0%, #d91d19 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(174, 24, 20, .3), 0 3px 7px rgba(16, 27, 46, .17), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.button:active {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(174, 24, 20, .22), 0 1px 3px rgba(16, 27, 46, .14), inset 0 1px 3px rgba(93, 8, 6, .15);
}

.button.secondary {
  border: 1px solid #d2d9e2;
  background: linear-gradient(180deg, #fff 0%, #f7f9fb 100%);
  box-shadow: 0 7px 16px rgba(16, 27, 46, .11), 0 2px 4px rgba(16, 27, 46, .08), inset 0 1px 0 #fff;
}

.button.secondary:hover {
  background: #fff;
  border-color: #c3ccd7;
  box-shadow: 0 11px 22px rgba(16, 27, 46, .14), 0 2px 5px rgba(16, 27, 46, .09), inset 0 1px 0 #fff;
}

.button.dark {
  border-color: rgba(4, 10, 18, .5);
  background: linear-gradient(180deg, #22334d 0%, #101b2e 100%);
  box-shadow: 0 8px 18px rgba(16, 27, 46, .24), 0 2px 5px rgba(5, 11, 20, .18), inset 0 1px 0 rgba(255, 255, 255, .13);
}

.button.dark:hover {
  background: linear-gradient(180deg, #293b58 0%, #142239 100%);
  box-shadow: 0 12px 25px rgba(16, 27, 46, .3), 0 3px 6px rgba(5, 11, 20, .18), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.cta-card .button,
.plans-bottom .button {
  border-color: rgba(16, 27, 46, .1);
  background: linear-gradient(180deg, #fff 0%, #f4f6f9 100%);
  box-shadow: 0 8px 18px rgba(16, 27, 46, .17), 0 2px 4px rgba(16, 27, 46, .1), inset 0 1px 0 #fff;
}

.cta-card .button:hover,
.plans-bottom .button:hover {
  background: #fff;
  box-shadow: 0 12px 25px rgba(16, 27, 46, .21), 0 3px 6px rgba(16, 27, 46, .11), inset 0 1px 0 #fff;
}

.button:focus-visible {
  outline: 3px solid rgba(229, 36, 32, .28);
  outline-offset: 4px;
}
