/* The site's two kinds of action, one system on every page.

   The main action is a solid blue button with a chevron; the quieter one beside
   it, or under a section's words, is a text link with a chevron, in the accent,
   with no box. A link that leaves the site carries the external-link mark in
   place of the chevron. One size of button everywhere, the OPTIZMO page's; no
   arrows. The homepage and the tour link this sheet; the OPTIZMO and pricing
   pages take it through optizmo.css. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  line-height: 1.2;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.btn-primary { background: var(--brand-fill); color: var(--color-on-accent); box-shadow: none; }
.btn-primary:hover { background: var(--brand-fill-hover); color: var(--color-on-accent); box-shadow: none; transform: none; }

/* A quieter ask than a button, a link with a chevron, as Stripe sets one beside a
   filled ask and under a section's words. */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  line-height: 1.2;
  color: var(--color-accent);
  text-decoration: none;
  border-radius: var(--radius-md);
}
.link-more:hover { color: var(--color-accent-strong); }
.link-more:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.chevron {
  width: 0.75em;
  height: 0.75em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}
/* Beside a button, the link takes the button's height, so the two sit level and
   the link is as easy to hit. */
.btn + .link-more { padding-block: 0.75rem; }
a:hover > .chevron { transform: translateX(2px); }
a:hover > .chevron--out { transform: translate(1.5px, -1.5px); }