/* Shared button component. Page styles may change layout, not action colors.
   Keep palette, size, focus and interactive states together here. */
.btn.btn {
  --action-bg: #4558a1;
  --action-hover: #5267b5;
  --action-pressed: #4558a1;
  --action-text: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 60px;
  max-width: 100%;
  padding: 17px 32px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--action-bg);
  background-image: linear-gradient(180deg, #ffffff18, #ffffff00);
  color: var(--action-text);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
  white-space: normal;
  text-shadow: none;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 #ffffff40,
    0 3px 8px #4558a124;
  cursor: pointer;
  user-select: none;
  transition: none;
}
.btn.btn:where(.bg-green-base, .btn--with-arrow),
.ctaBlock--light .btn.btn--secondary {
  --action-bg: #5cb798;
  --action-hover: #80cbb0;
  --action-pressed: #5cb798;
  --action-text: #30343b;
}
.btn.btn--secondary,
.ctaBlock--dark .btn.btn--secondary {
  --action-bg: #dbdff0;
  --action-hover: #fff;
  --action-pressed: #dbdff0;
  --action-text: #30343b;
  border-color: #4558a1;
}
.ctaBlock--light .btn.btn--primary {
  --action-bg: #4558a1;
  --action-hover: #5267b5;
  --action-pressed: #4558a1;
  --action-text: #fff;
}
.btn.btn:is(:hover, :focus-visible) {
  background: var(--action-hover);
  color: var(--action-text);
}
.btn.btn:active {
  background: var(--action-pressed);
  color: var(--action-text);
  box-shadow: inset 0 1px 3px #4558a130;
}
.btn.btn .btn-w-arrow,
.btn.btn .btn-w-arrow svg,
.btn.btn-w-arrow svg {
  color: currentColor;
}
.btn.btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 7px #4558a1;
}
@media (max-width: 599px) {
  .btn.btn {
    padding-inline: 24px;
  }
}