.ot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--fs-button);
  font-weight: var(--fw-button);
  line-height: var(--lh-button);
  letter-spacing: var(--ls-ui);
  padding: 17px 28px;
  border-width: 1px;

  border-style: solid;

  border-color: transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base);
}

.ot-btn--cta {
  background-color: var(--c-cta);
  color: var(--c-white);
  border-color: transparent;
}

.ot-btn--cta:hover,
.ot-btn--cta:focus-visible {
  background-color: var(--c-cta-hover);
  color: var(--c-white);
}

.ot-btn--header {
  background-color: var(--c-white);
  color: var(--c-heading);
  border-color: var(--c-heading);
  padding: 12px 20px;
}

.ot-btn--header:hover,
.ot-btn--header:focus-visible {
  background-color: var(--c-white);
  color: var(--c-hover-text);
  border-color: var(--c-hover-text);
}

.ot-btn--herodark {
  background-color: transparent;
  color: var(--c-white);
  border-color: var(--c-white);
}

.ot-btn--herodark:hover,
.ot-btn--herodark:focus-visible {
  background-color: transparent;
  color: #8FD3EC;
  border-color: #8FD3EC;
}

.ot-btn--final {
  background-color: var(--c-white);
  color: var(--c-heading);
  border-color: transparent;
}

.ot-btn--final:hover,
.ot-btn--final:focus-visible {
  background-color: var(--c-white);
  color: var(--c-hover-text);
  border-color: var(--c-final-cta-hover-border);
}