/*
 * One button for every call to action on the landing page: a flat, solid Crux blue with a white glow that
 * sits inside the edge. No gradient and no outer shadow. Variants: --quiet (secondary), --sm (nav),
 * --lg (beside a 44px email field).
 */
.crux-btn {
  --btn-bg: #0a58ff;
  --btn-edge: #ffffff3d;
  --btn-glow: #ffffff4d;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  height: 40px; padding: 0 16px 0 14px; border: 0; border-radius: 10px;
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 1px var(--btn-edge), inset 0 0 14px 0 var(--btn-glow);
  color: #fff; font: 500 15px/1 Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 160ms ease, background-color 160ms ease, transform 90ms ease;
}
.crux-btn:hover { --btn-edge: #ffffff5c; --btn-glow: #ffffff73; }
.crux-btn:active { --btn-bg: #0848d9; --btn-glow: #ffffff33; transform: translateY(.5px); }
.crux-btn:focus-visible { outline: 2px solid #a5d8ff; outline-offset: 2px; }
.crux-btn:disabled, .crux-btn[aria-disabled="true"] { opacity: .5; --btn-glow: #ffffff1f; cursor: default; transform: none; }

.crux-btn-glyph { display: block; flex: none; width: 13px; height: 18px; object-fit: contain; }

.crux-btn--quiet {
  --btn-bg: #ffffff0d; --btn-edge: #ffffff29; --btn-glow: #ffffff12;
  color: #f6f8ff;
}
.crux-btn--quiet:hover { --btn-edge: #ffffff3d; --btn-glow: #ffffff24; }
.crux-btn--quiet:active { --btn-bg: #ffffff08; --btn-glow: #ffffff0d; }

.crux-btn--sm { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; gap: 6px; }
.crux-btn--lg { height: 44px; padding: 0 18px 0 16px; font-size: 15px; }

/* The nav's link rules would otherwise recolour and resize the button. */
.crux-nav-links a.crux-btn { margin-left: auto; color: #fff; font-size: 13px; }
.crux-nav-links a.crux-btn:hover { color: #fff; }
.crux-nav-links a.crux-btn:focus-visible { outline-offset: 2px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) { .crux-btn { transition: none; } .crux-btn:active { transform: none; } }

/* Blog index link under the article cards. */
.crux-blog-all { display: flex; justify-content: center; width: 100%; }