/* ==========================================================================
   Secondary CTA — “12. MINIMAL PLUS” (text + plus, no chrome; black → teal)
   ========================================================================== */

:root {
  --cta-minimal-fg: #000000;
  --cta-minimal-hover: var(--cta-solid-hover, #1d1d1d);
}

.cta-minimal-plus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cta-minimal-fg);
  transition: color 0.2s ease;
}

button.cta-minimal-plus {
  font-family: inherit;
}

a.cta-minimal-plus,
button.cta-minimal-plus {
  -webkit-appearance: none;
  appearance: none;
}

.cta-minimal-plus:hover {
  color: var(--cta-minimal-hover);
}

.cta-minimal-plus__icon {
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.28s var(--ease-swift, cubic-bezier(0.6, 0.05, 0.2, 1));
}

.cta-minimal-plus:hover .cta-minimal-plus__icon {
  transform: translate(3px, -2px) rotate(45deg);
}

.cta-minimal-plus:focus-visible {
  outline: 2px solid var(--cta-minimal-hover);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .cta-minimal-plus:hover .cta-minimal-plus__icon {
    transform: none;
  }
}