.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border: 0; border-radius: 2px; cursor: pointer;
  background: var(--carbon); color: var(--bond);
  font: 600 14px/1 var(--font-printed); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: center;
  box-shadow: 0 2px 0 var(--carbon-deep);
  transition: transform var(--dur-press) ease, box-shadow var(--dur-press) ease, background-color var(--dur-ui) ease, color var(--dur-ui) ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--carbon-deep); background: #1A2A63; }
.btn--ghost { background: transparent; color: var(--carbon); box-shadow: inset 0 0 0 2px var(--carbon), 0 2px 0 var(--carbon); }
.btn--ghost:active { background: rgb(36 56 122 / .12); box-shadow: inset 0 0 0 2px var(--carbon), 0 0 0 var(--carbon); }
.btn--primary { width: 100%; min-height: 52px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(1px); box-shadow: 0 1px 0 var(--carbon-deep); }
  .btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--carbon), 0 1px 0 var(--carbon); background: rgb(36 56 122 / .06); }
  .btn:active { transform: translateY(2px); }
}
.btn[disabled] { opacity: .5; cursor: default; }
@media (min-width: 760px) { .btn--primary { width: auto; min-width: 260px; font-size: 15px; } }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:active, .btn:hover { transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease; transform: none; }
}