/* ==========================================================================
   CTA Component
   ========================================================================== */

.cta {
  --brand-primary: var(--color-primary);
  --cta-bg: var(--color-surface-800);
  --cta-border: var(--color-surface-700);
  --cta-text: var(--color-surface-50);
  --cta-text-muted: var(--color-surface-300);
  --cta-accent: var(--color-primary);
  --cta-button-bg: var(--color-primary);
  --cta-button-text: var(--color-primary-content);
  --cta-input-bg: var(--color-surface-900);
  --cta-input-border: var(--color-surface-600);

  background: var(--cta-bg);
  border: 1px solid var(--cta-border);
  border-left: 3px solid var(--cta-accent);
  padding: 1.25rem;
  margin: 2rem auto;
  width: min(100%, 42rem);
  border-radius: var(--radius-md);
}

.cta__headline {
  margin: 0 0 0.5rem 0;
  padding: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cta-text);
}

.cta__subhead {
  margin: 0 0 0.9rem 0;
  padding: 0;
  font-size: 0.95rem;
  color: var(--cta-text-muted);
  line-height: 1.45;
}

.cta__form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  width: 100%;
}

.cta__input {
  flex: 1;
  min-width: 220px;
  margin: 0;
  padding: 0.625rem 0.75rem;
  background: var(--cta-input-bg);
  border: 1px solid var(--cta-input-border);
  color: var(--cta-text);
  font-size: 0.95rem;
}

.cta__input::placeholder {
  color: var(--cta-text-muted);
}

.cta__input:focus {
  outline: none;
  border-color: var(--cta-accent);
}

.cta__button {
  margin: 0;
  padding: 0.625rem 1.1rem;
  background: var(--cta-button-bg);
  color: var(--cta-button-text);
  border: none;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}

.cta__button:hover {
  background-color: var(--color-primary-soft);
}

.cta__button--secondary {
  display: inline-block;
  color: var(--cta-button-text);
}

.cta__button--secondary:visited {
  color: var(--cta-button-text);
}

.cta__fine-print {
  margin: 0.75rem 0 0 0;
  padding: 0;
  font-size: 0.8rem;
  color: var(--cta-text-muted);
}