{% comment %}
  Shared CSS for Intelligence CTAs. Included from each page's
  ``extra_head`` block. Replaces the inline ``onmouseover`` /
  ``onmouseout`` handlers that previously toggled hover styles, those
  violate strict CSP (``script-src 'self'`` blocks inline event
  attributes) and also made cursor / a11y states inconsistent.

  Hover/focus state lives in CSS pseudo-classes; ``cursor: pointer`` is
  applied to both classes so every interactive element shows the right
  affordance.
{% endcomment %}
<style>
    /* Filled primary CTA pill: Activate, Complete activation,
       Continue to Stripe, Manage billing, etc. */
    .intel-cta-primary {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: white;
        background: var(--primary);
        border: none;
        border-radius: 9999px;
        box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
        cursor: pointer;
        text-decoration: none;
        transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    }
    .intel-cta-primary:hover,
    .intel-cta-primary:focus-visible {
        background: var(--primary-hover);
        transform: translateY(-1px);
    }
    .intel-cta-primary:active {
        transform: translateY(0);
    }
    .intel-cta-primary:disabled,
    .intel-cta-primary[aria-disabled="true"] {
        background: var(--primary-muted, #fed7aa);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
    /* Smaller variant for in-result-panel use (e.g. paywall fragment). */
    .intel-cta-primary--sm {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        gap: 0.375rem;
        box-shadow: none;
    }

    /* Subdued text link with color-swap hover. Used for "Back to ..."
       and "Cancel" links above page bodies. */
    .intel-cta-text-link {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.875rem;
        color: var(--text-secondary);
        text-decoration: none;
        cursor: pointer;
        transition: color 150ms ease;
    }
    .intel-cta-text-link:hover,
    .intel-cta-text-link:focus-visible {
        color: var(--text-primary);
    }
</style>