/* The one button on a page that you actually want pressed.
 *
 * Used on the concluding signup steps: everything before it is form
 * filling, this is the moment the organization comes into existence. The
 * default .btn-primary is correct for the hundred buttons inside the app
 * — calm, uniform, unobtrusive — and exactly wrong here, where the button
 * should look inviting rather than merely available.
 *
 * Layered on top of .btn-primary (which supplies the colour variables),
 * so this block only adds size and depth.
 *
 * The button deliberately does NOT move. An earlier version lifted on
 * hover; the halo alone carries the invitation, and a button that jumps
 * under the cursor is a button you can miss. Depth changes, position
 * does not — which is also why there is no prefers-reduced-motion branch
 * here: a glow brightening is not motion.
 */
.btn-cta {
  --btn-cta-face: linear-gradient(180deg, var(--traqx-blue-500) 0%, var(--traqx-blue-600) 100%);
  --btn-cta-face-hover: linear-gradient(180deg, var(--traqx-blue-600) 0%, var(--traqx-blue-700) 100%);

  padding-block: 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  /* background-image sits on top of Tabler's background-color, so the
     gradient degrades to the flat brand blue wherever it is unsupported. */
  background-image: var(--btn-cta-face);
  border-color: var(--traqx-blue-600);
  box-shadow: var(--shadow-cta);
  transition:
    box-shadow 0.15s ease,
    background-image 0.15s ease;
}

.btn-cta:hover,
.btn-cta:focus-visible {
  background-image: var(--btn-cta-face-hover);
  box-shadow: var(--shadow-cta-hover);
}

/* Pressing it pulls the halo back in — the click should still read as a
   click, without anything shifting position. */
.btn-cta:active {
  box-shadow: var(--shadow-cta);
}