.btn {
  min-height: 44px;
  font-family: var(--mc-font-sans);
}

.btn-primary {
  --bs-btn-bg: var(--mc-navy);
  --bs-btn-border-color: var(--mc-navy);
  --bs-btn-hover-bg: var(--mc-navy-700);
  --bs-btn-font-weight: 600;
  border-radius: var(--mc-radius-pill);
  padding: 0.75rem 1.5rem;
}

.btn-outline-primary {
  --bs-btn-color: var(--mc-navy);
  --bs-btn-border-color: var(--mc-navy);
  --bs-btn-hover-bg: var(--mc-navy);
  --bs-btn-hover-color: var(--mc-sand);
  border-radius: var(--mc-radius-pill);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}

.btn-teal {
  background: var(--mc-teal);
  color: #fff;
  border: 0;
  border-radius: var(--mc-radius-pill);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--mc-teal) 28%, transparent);
}

.btn-teal:hover,
.btn-teal:focus {
  background: var(--mc-teal-600);
  color: #fff;
}

.btn-outline-sand {
  color: var(--mc-sand);
  border: 2px solid var(--mc-sand);
  border-radius: var(--mc-radius-pill);
  background: transparent;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

.btn-outline-ink {
  color: var(--mc-navy);
  border: 1.5px solid color-mix(in srgb, var(--mc-navy) 28%, transparent);
  border-radius: var(--mc-radius-pill);
  background: transparent;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

.btn-outline-ink:hover,
.btn-outline-ink:focus {
  background: var(--mc-navy);
  border-color: var(--mc-navy);
  color: #fff;
}

.mc-btn-primary {
  background: var(--mc-teal);
  color: #fff;
  border: 0;
  border-radius: var(--mc-radius-pill);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

.mc-btn-primary:hover,
.mc-btn-primary:focus {
  background: var(--mc-teal-600);
  color: #fff;
}

.mc-btn-outline {
  color: var(--mc-navy);
  border: 2px solid var(--mc-navy);
  border-radius: var(--mc-radius-pill);
  background: transparent;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

.mc-form-narrow {
  max-width: 40rem;
}