:root {
  --button-radius: 6px;
  --button-height-sm: 40px;
  --button-height: 48px;
  --button-height-lg: 56px;
  --button-pad-sm: 14px;
  --button-pad: 20px;
  --button-pad-lg: 26px;
}

.btn,
.action-primary,
.mini-cta,
.callback-form-grid > button[type="submit"],
.mobile-dock a {
  min-height: var(--button-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 var(--button-pad);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  font-family: var(--font-ui);
  font-size: .84rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s var(--ease);
}

.btn-sm,
.action-primary-sm,
.mini-cta {
  min-height: var(--button-height-sm);
  padding-right: var(--button-pad-sm);
  padding-left: var(--button-pad-sm);
  font-size: .76rem;
}

.btn-lg,
.action-primary-lg {
  min-height: var(--button-height-lg);
  padding-right: var(--button-pad-lg);
  padding-left: var(--button-pad-lg);
  font-size: .9rem;
}

.btn-brand,
.action-primary,
.callback-form-grid > button[type="submit"],
.mobile-dock a:last-child {
  color: #fff;
  border-color: var(--action);
  background: var(--action);
  box-shadow: 0 9px 20px rgba(var(--action-rgb), .18);
}

.btn-brand::after,
.action-primary::after {
  content: "→";
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  font-size: 1rem;
  line-height: 1;
  opacity: 1;
  transform: none;
  transition: transform .18s var(--ease);
}

.btn-brand:is(:hover, :focus-visible),
.action-primary:is(:hover, :focus-visible),
.callback-form-grid > button[type="submit"]:is(:hover, :focus-visible),
.mobile-dock a:last-child:is(:hover, :focus-visible) {
  color: #fff;
  border-color: var(--action-dark);
  background: var(--action-dark);
  box-shadow: 0 13px 26px rgba(var(--action-rgb), .24);
  transform: translateY(-1px);
}

.btn-brand:is(:hover, :focus-visible)::after,
.action-primary:is(:hover, :focus-visible)::after {
  transform: translateX(3px);
}

.btn-brand:active,
.action-primary:active,
.callback-form-grid > button[type="submit"]:active,
.mobile-dock a:last-child:active {
  color: #fff;
  border-color: var(--action-deep);
  background: var(--action-deep);
  box-shadow: 0 4px 10px rgba(var(--action-rgb), .16);
  transform: none;
}

.btn-outline-ink {
  color: var(--primary-dark);
  border-color: rgba(var(--primary-rgb), .34);
  background: #fff;
  box-shadow: none;
}

.btn-outline-ink:is(:hover, :focus-visible) {
  color: #fff;
  border-color: var(--primary-dark);
  background: var(--primary-dark);
}

.btn-glass,
.btn-outline-light,
.mini-cta {
  color: #fff;
  border-color: rgba(255, 255, 255, .48);
  background: rgba(0, 18, 51, .2);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.btn-glass:is(:hover, :focus-visible),
.btn-outline-light:is(:hover, :focus-visible),
.mini-cta:is(:hover, :focus-visible) {
  color: var(--primary-dark);
  border-color: #fff;
  background: #fff;
}

.btn:disabled,
.action-primary[aria-disabled="true"],
button:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.mobile-dock a:first-child {
  color: #fff;
  border-color: var(--primary-dark);
  background: var(--primary-dark);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .action-primary,
  .mini-cta,
  .callback-form-grid > button[type="submit"] {
    transition: none;
  }
}