/* Button: the main button, in two versions. A 38px bar with the label on the left (CTA style: Bold 16, Title Case) and a small pixel arrow on the right.
     .button          dark (default): ink bar, white label. Used on the landing page. Goes pure black on roll-over (links / <button>).
     .button--light   light: white bar, dark label. Used as the top of every visual button (the visual nav). Goes dark when it is the current one
                      (aria-current="true", or its visual button is) and, for a link or <button>, on roll-over.
   One grey for every state: the ink (--color-action). The wipe (css/components/button-wipe.css) draws the hover / selected state; the rules here are only the fallback without the script.
   <a class="button" href="#">Case study <svg class="button__arrow" width="6" height="10" aria-hidden="true"><use href="#arrow-small"/></svg></a>
   <a class="button button--light" href="#">Wallet <svg class="button__arrow" …></svg></a> */
.button {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-width: 228px; height: 38px; padding: 0 20px;
  background: var(--color-action); color: var(--color-bg);
  text-decoration: none; border: 0; cursor: pointer;
  font: var(--weight-bold) var(--fs-cta)/var(--lh-normal) var(--font-text);   /* CTA */
  text-transform: capitalize;                                                  /* CTAs are Title Case */
  box-shadow: inset 0 0 0 1px transparent;                                      /* the 1px frame, shown on hover / selected */
  transition: background-color .2s ease-out, color .2s ease-out, box-shadow .2s ease-out;
}
.button__arrow { flex: none; fill: currentColor; }
a.button:hover, button.button:hover { background: var(--color-bg); color: var(--color-action); box-shadow: inset 0 0 0 1px var(--color-action); }   /* (without the script) the inverse: light with an ink frame, as the wipe ends */
a.button:focus-visible, button.button:focus-visible { outline: 2px solid var(--color-action); outline-offset: 3px; }

/* light version */
.button--light { background: var(--color-bg); color: var(--color-action); }
.button--light[aria-current="true"], .visual-button[aria-current="true"] .button--light, a.button--light:hover, button.button--light:hover {
  background: var(--color-action); color: var(--color-bg); box-shadow: none;
}

/* Rollover sparks (js/button-fuzz.js, opt in with data-fuzz): a canvas of faint twinkling dots around the button; the fill never changes */
.button[data-fuzz] { position: relative; isolation: isolate; }
.button__fuzz { position: absolute; pointer-events: none; z-index: -1; }