/* cta.css: component-owned rules. Shared priority order is declared in tokens.css. */
@layer presentation {
/* cta */
#top .hero-copy > a.outline {
  width: 210px;
  min-width: 210px;
  border-color: var(--color-ink);
  border-radius: 0;
  background: var(--color-ink);
  color: var(--color-fff);
  transition: background-color .2s,border-color .2s;
}

#top .hero-copy > a.outline:hover {
  background: var(--color-405965);
  border-color: var(--color-405965);
}

#top .hero-copy > a.outline span {
  color: inherit;
}

.header #navigation > a.pill {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-fff);
  transition: background-color .2s,border-color .2s;
}

.header #navigation > a.pill:hover {
  background: var(--color-405965);
  border-color: var(--color-405965);
}

#top .hero-copy > a.outline:focus-visible,
.header #navigation > a.pill:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: var(--space-4);
  box-shadow: 0 0 0 3px var(--color-fff);
}
}