/* ==========================================================================
   Primary CTA — “01. SOLID” (black → chartreuse hover, monospace uppercase)
   Used on homepage hero, nav, approach strip, and closing band (inverted variant).
   ========================================================================== */

:root {
  --cta-solid-bg: #000000;
  --cta-solid-hover-bg: #F2FF93;
  --cta-solid-hover-fg: #0E0E0C;
  --cta-solid-fg: #ffffff;
  --cta-solid-on-blue-bg: #ffffff;
  --cta-solid-on-blue-fg: #0E0E0C;
}

.cta-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  background: var(--cta-solid-bg);
  color: var(--cta-solid-fg);
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.2s ease, color 0.2s ease;
}

a.cta-solid {
  text-decoration: none;
}

.chrome-site-header a.cta-solid {
  vertical-align: middle;
}

.cta-solid:hover {
  background: var(--cta-solid-hover-bg);
  color: var(--cta-solid-hover-fg);
}

.cta-solid__arrow {
  transition: transform 0.25s var(--ease-swift, cubic-bezier(0.6, 0.05, 0.2, 1));
  flex-shrink: 0;
}

.cta-solid:hover .cta-solid__arrow {
  transform: translateX(4px);
}

.cta-solid--on-blue {
  background: var(--cta-solid-on-blue-bg);
  color: var(--cta-solid-on-blue-fg);
}

.cta-solid--on-blue:hover {
  background: var(--cta-solid-hover-bg);
  color: var(--cta-solid-hover-fg);
}

@media (prefers-reduced-motion: reduce) {
  .cta-solid:hover .cta-solid__arrow {
    transform: none;
  }
}