.button {
  text-decoration: none;
}

/*CTA buttons*/
.cta {
  font-family: var(--font-sans);
  line-height: var(--leading-standard, 1.5);
  letter-spacing: var(--tracking-normal, 0);
  white-space: nowrap;
  cursor: pointer;
}

.cta-l {
  border-radius: var(--radius-sm, 4px);
  padding-left: var(--spacing-m, 16px);
  padding-right: var(--spacing-m, 16px);
  padding-top: var(--spacing-s, 16px);
  padding-bottom: var(--spacing-s, 16px);
  font-size: var(--text-step-1, 16px);
}

.cta-m {
  border-radius: var(--radius-sm, 4px);
  padding-left: var(--spacing-m, 16px);
  padding-right: var(--spacing-m, 16px);
  padding-top: var(--spacing-xs, 12px);
  padding-bottom: var(--spacing-xs, 12px);
  font-size: var(--text-step-0, 14px);
}

.cta-s {
  border-radius: var(--radius-sm, 4px);
  padding-left: var(--spacing-s, 8px);
  padding-right: var(--spacing-s, 8px);
  padding-top: var(--spacing-2xs, 4px);
  padding-bottom: var(--spacing-2xs, 4px);
  font-size: var(--text-step-00, 12px);
}

.cta-l--unstyled {
  border-radius: var(--radius-sm, 4px);
  padding-top: var(--spacing-s, 16px);
  padding-bottom: var(--spacing-s, 16px);
  font-size: var(--text-step-1, 16px);
}

.cta-m--unstyled {
  border-radius: var(--radius-sm, 4px);
  padding-top: var(--spacing-xs, 12px);
  padding-bottom: var(--spacing-xs, 12px);
  font-size: var(--text-step-0, 14px);
}

.cta-s--unstyled {
  border-radius: var(--radius-sm, 4px);
  padding-top: var(--spacing-2xs, 4px);
  padding-bottom: var(--spacing-2xs, 4px);
  font-size: var(--text-step-00, 12px);
}

.cta-brand {
  color: var(--color-white, #fff);
  background-color: var(--color-ink-brand, #05254e);
  border: 1px solid var(--color-ink-brand, #05254e);
}

.cta-brand:hover {
  color: var(--color-ink-brand, #05254e);
  background-color: var(--color-white, #fff);
  border: 1px solid var(--color-ink-brand, #05254e);
}

.cta-accent {
  color: var(--color-white, #fff);
  background-color: var(--color-accent, #ff6f61);
  border: 1px solid var(--color-accent, #ff6f61);
}

.cta-accent:hover {
  color: var(--color-accent, #ff6f61);
  background-color: var(--color-white, #fff);
  border: 1px solid var(--color-accent, #ff6f61);
}

.cta-brand-inverse {
  color: var(--color-ink-brand, #05254e);
  background-color: var(--color-white, #fff);
  border: 1px solid var(--color-ink-brand, #05254e);
}

.cta-brand-inverse:hover {
  color: var(--color-white, #fff);
  background-color: var(--color-ink-brand, #05254e);
  border: 1px solid var(--color-ink-brand, #05254e);
}

.cta-accent-inverse {
  color: var(--color-accent, #ff6f61);
  background-color: var(--color-white, #fff);
  border: 1px solid var(--color-accent, #ff6ff1);
}

.cta-accent-inverse:hover {
  color: var(--color-white, #fff);
  background-color: var(--color-accent, #ff6f61);
  border: 1px solid var(--color-accent, #ff6f61);
}