.c-button {
  --c-button-width: 272px;
  --c-button-height: 62px;
  --c-button-padding-x: 38px;
  --c-button-bg: var(--muted-blue, #496f8c);
  --c-button-bg-hover: color-mix(in srgb, var(--c-button-bg) 72%, transparent);
  --c-button-color: var(--white, #fff);
  --c-button-border: 1px solid transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--c-button-width);
  min-height: var(--c-button-height);
  padding: 0 var(--c-button-padding-x);
  border: var(--c-button-border);
  border-radius: var(--primitive-radius-full, 9999px);
  background: var(--c-button-bg);
  color: var(--c-button-color);
  font-family: var(--sans, sans-serif);
  font-size: var(--primitive-font-size-sm, 14px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.c-button:visited {
  color: var(--c-button-color);
}

.c-button:hover,
.c-button:focus-visible {
  background: var(--c-button-bg-hover);
  color: var(--c-button-color);
}

.c-button--primary {
  --c-button-bg: var(--muted-blue, #496f8c);
  --c-button-bg-hover: color-mix(in srgb, var(--muted-blue, #496f8c) 72%, transparent);
  --c-button-color: var(--white, #fff);
}

.c-button--outline {
  --c-button-bg: var(--white, #fff);
  --c-button-bg-hover: var(--muted-blue, #496f8c);
  --c-button-color: var(--muted-blue, #496f8c);
  --c-button-border: 1px solid var(--muted-blue, #496f8c);
}

.c-button--outline:hover,
.c-button--outline:focus-visible {
  color: var(--white, #fff);
}

.c-button--contact {
  --c-button-bg: var(--contact-action-color, var(--muted-blue, #496f8c));
  --c-button-bg-hover: var(--contact-action-color, var(--muted-blue, #496f8c));
  --c-button-color: var(--white, #fff);
}

.c-button--contact-outline {
  --c-button-bg: var(--white, #fff);
  --c-button-bg-hover: var(--white, #fff);
  --c-button-color: var(--contact-action-color, var(--muted-blue, #496f8c));
  --c-button-border: 1px solid var(--contact-action-color, var(--muted-blue, #496f8c));
}
