/**
 * AICT Commercial Pages v2 — Visual Harmony with B66.1 Homepage Design
 *
 * Cascades the dark-first Command Center design (aict-homepage-v2.css)
 * to all commercial / decision-making surfaces:
 *   - /pricing/      (6 tier cards, "Recommended" Pro badge, separator bar)
 *   - /agents/       (10 flagship cards, outcome packs, role cards)
 *   - /workflows/    (workflow cards, persona bundles)
 *   - /api/docs/     (hero gradient consistent with homepage)
 *
 * Tokens are aliased to the B66.1 (Q3-batch-65) homepage system:
 *   - Bg base:        #0a0a18 (deepest indigo)
 *   - Hero gradient:  #1e1b4b → #312e81 → #4c1d95
 *   - H1 gradient:    #a78bfa → #ec4899 → #f59e0b (violet → pink → amber)
 *   - Card frosting:  rgba(255,255,255,0.04) + backdrop-filter:blur(10px)
 *   - Border:         rgba(255,255,255,0.10) → 0.45 violet on hover
 *   - Font:           Inter w/ -apple-system fallback (already global)
 *
 * Light theme respected via html[data-theme="light"] .aict-theme-light.
 *
 * Mobile-first responsive: 480px / 768px / 1024px breakpoints
 * Reversible via aict_commercial_pages_v2_enabled option (default 1).
 *
 * @package AICT_Core
 * @since   4.16.80hq
 * @ref     Q3-batch-66.3 (2026-05-10)
 */

/* ═══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — aliased to B66.1 homepage v2
   ═══════════════════════════════════════════════════════════════════ */
:root {
    /* Aliased to B66.1 tokens (graceful fallback if not present) */
    --aict-cv2-bg: #0a0a18;
    --aict-cv2-bg-grad-1: #1e1b4b;
    --aict-cv2-bg-grad-2: #312e81;
    --aict-cv2-bg-grad-3: #4c1d95;
    --aict-cv2-bg-elevated: #131a2e;
    --aict-cv2-bg-card: rgba(255, 255, 255, 0.04);
    --aict-cv2-bg-card-hover: rgba(255, 255, 255, 0.07);

    /* Hero gradient (matches homepage hero) */
    --aict-cv2-hero-grad: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);

    /* H1 gradient — violet → pink → amber (B66.1 signature) */
    --aict-cv2-grad-h1: linear-gradient(135deg, #a78bfa 0%, #ec4899 50%, #f59e0b 100%);
    --aict-cv2-grad-h1-light: linear-gradient(135deg, #5c5fe6 0%, #ec4899 50%, #f59e0b 100%);

    /* CTA / button gradient — indigo → violet → fuchsia (action color) */
    --aict-cv2-grad-cta: linear-gradient(135deg, #5c5fe6 0%, #8b5cf6 50%, #d946ef 100%);
    --aict-cv2-grad-soft: linear-gradient(135deg, rgba(167,139,250,0.18) 0%, rgba(236,72,153,0.14) 50%, rgba(245,158,11,0.10) 100%);

    /* Borders + dividers */
    --aict-cv2-border: rgba(255, 255, 255, 0.10);
    --aict-cv2-border-strong: rgba(167, 139, 250, 0.45);
    --aict-cv2-border-grad: linear-gradient(135deg, #a78bfa, #ec4899, #f59e0b);

    /* Text */
    --aict-cv2-text: #f8fafc;
    --aict-cv2-text-muted: #cbd5e1;
    --aict-cv2-text-dim: #94a3b8;
    --aict-cv2-text-faint: #64748b;

    /* Accents (matches B66.1 homepage) */
    --aict-cv2-accent: #a78bfa;
    --aict-cv2-accent-hover: #c4b5fd;
    --aict-cv2-accent-2: #ec4899;
    --aict-cv2-accent-3: #06b6d4;
    --aict-cv2-success: #10b981;
    --aict-cv2-warning: #f59e0b;
    --aict-cv2-error: #ef4444;

    /* Type */
    --aict-cv2-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Shadows + glows */
    --aict-cv2-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
    --aict-cv2-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.35);
    --aict-cv2-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    --aict-cv2-glow-pro: 0 10px 25px -10px rgba(167, 139, 250, 0.45);

    /* Radii */
    --aict-cv2-radius-sm: 12px;
    --aict-cv2-radius: 16px;
    --aict-cv2-radius-lg: 24px;

    /* Motion */
    --aict-cv2-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --aict-cv2-dur: 250ms;
}

/* Light-theme overrides — match B66.1 system */
html[data-theme="light"], html.aict-theme-light, .aict-theme-light {
    --aict-cv2-bg: #fafaff;
    --aict-cv2-bg-grad-1: #faf5ff;
    --aict-cv2-bg-grad-2: #f5f3ff;
    --aict-cv2-bg-grad-3: #fdf4ff;
    --aict-cv2-bg-elevated: #ffffff;
    --aict-cv2-bg-card: #ffffff;
    --aict-cv2-bg-card-hover: #ffffff;
    --aict-cv2-hero-grad: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 50%, #fdf4ff 100%);
    --aict-cv2-grad-h1: var(--aict-cv2-grad-h1-light);
    --aict-cv2-text: #0f172a;
    --aict-cv2-text-muted: #475569;
    --aict-cv2-text-dim: #64748b;
    --aict-cv2-text-faint: #94a3b8;
    --aict-cv2-border: #e2e8f0;
    --aict-cv2-border-strong: #a78bfa;
    --aict-cv2-accent: #7c3aed;
    --aict-cv2-accent-hover: #6d28d9;
    --aict-cv2-shadow-sm: 0 1px 3px rgba(15,23,42,0.06);
    --aict-cv2-shadow-md: 0 8px 20px -8px rgba(15,23,42,0.12);
    --aict-cv2-shadow-lg: 0 10px 30px -10px rgba(15,23,42,0.15);
    --aict-cv2-glow-pro: 0 12px 30px -12px rgba(167, 139, 250, 0.40);
}

/* [ultra-audit UX 2026-06-10] Brand webfonts (Bricolage Grotesque + Hanken Grotesk).
   [2026-06-15 perf] Removed the render-blocking @import: AICT_Asset_Optimizer::
   emit_preconnect_hints() (wp_head priority 1, global) already loads the IDENTICAL
   css2 URL via preload + async (media=print onload) on every page, so this @import
   was a redundant render-blocker (CSS @import serializes after the file downloads).
   Fonts still load — just non-blocking now. */

/* ═══════════════════════════════════════════════════════════════════
   2. BODY HARMONIZATION — when commercial v2 active
   ═══════════════════════════════════════════════════════════════════ */
body.aict-cv2 {
    background: var(--aict-cv2-bg);
    color: var(--aict-cv2-text);
    font-family: var(--aict-cv2-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.aict-cv2 a {
    color: var(--aict-cv2-accent);
}

body.aict-cv2 a:hover {
    color: var(--aict-cv2-accent-hover);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    body.aict-cv2 *, body.aict-cv2 *::before, body.aict-cv2 *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   3. SHARED HERO — used on agents/workflows/api docs
   ═══════════════════════════════════════════════════════════════════ */
.aict-cv2-hero {
    position: relative;
    padding: clamp(56px, 9vw, 96px) 24px clamp(48px, 8vw, 80px);
    text-align: center;
    overflow: hidden;
    background: radial-gradient(ellipse at top, rgba(99,102,241,0.25) 0%, transparent 60%),
                radial-gradient(ellipse at bottom right, rgba(217,70,239,0.18) 0%, transparent 55%),
                var(--aict-cv2-bg);
    border-bottom: 1px solid var(--aict-cv2-border);
}

.aict-cv2-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 1px at 20% 30%, rgba(255,255,255,0.06) 1px, transparent 1px),
        radial-gradient(circle 1px at 80% 70%, rgba(255,255,255,0.04) 1px, transparent 1px),
        radial-gradient(circle 1px at 50% 50%, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 60px 60px, 80px 80px, 100px 100px;
    pointer-events: none;
    opacity: 0.7;
}

.aict-cv2-hero > * {
    position: relative;
    z-index: 1;
}

.aict-cv2-hero h1,
.aict-cv2-hero .aict-cv2-h1 {
    font-family: var(--aict-cv2-font);
    font-size: clamp(2.25rem, 5vw + 0.5rem, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 20px;
    background: var(--aict-cv2-grad-h1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.aict-cv2-hero .aict-cv2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: var(--aict-cv2-accent-hover);
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0 0 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.aict-cv2-hero p,
.aict-cv2-hero .aict-cv2-sub {
    color: var(--aict-cv2-text-muted);
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto 28px;
}

/* ═══════════════════════════════════════════════════════════════════
   4. FROSTED-GLASS CARD — base component
   ═══════════════════════════════════════════════════════════════════ */
.aict-cv2-card {
    position: relative;
    background: var(--aict-cv2-bg-card);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--aict-cv2-border);
    border-radius: var(--aict-cv2-radius);
    padding: 28px;
    color: var(--aict-cv2-text);
    transition: transform var(--aict-cv2-dur) var(--aict-cv2-ease),
                background var(--aict-cv2-dur) var(--aict-cv2-ease),
                border-color var(--aict-cv2-dur) var(--aict-cv2-ease),
                box-shadow var(--aict-cv2-dur) var(--aict-cv2-ease);
}

.aict-cv2-card:hover {
    background: var(--aict-cv2-bg-card-hover);
    border-color: var(--aict-cv2-border-strong);
    transform: translateY(-3px);
    box-shadow: var(--aict-cv2-shadow-md);
}

.aict-cv2-card.is-featured {
    background: linear-gradient(135deg, rgba(99,102,241,0.10) 0%, rgba(139,92,246,0.08) 100%);
    border: 1px solid transparent;
    background-clip: padding-box;
    box-shadow: var(--aict-cv2-glow-pro);
}

.aict-cv2-card.is-featured::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--aict-cv2-border-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.aict-cv2-card > * {
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   5. PRICING — 6 tier cards (Free, Starter, Pro, Business, Agency, Enterprise)
   ═══════════════════════════════════════════════════════════════════ */
body.aict-cv2.page-pricing .pricing-header,
body.aict-cv2.aict-pricing-page .pricing-header {
    background: radial-gradient(ellipse at top, rgba(99,102,241,0.20) 0%, transparent 55%),
                var(--aict-cv2-bg) !important;
    color: var(--aict-cv2-text) !important;
    padding: 80px 24px 48px !important;
    border-bottom: 1px solid var(--aict-cv2-border);
}

body.aict-cv2 .pricing-header h1 {
    font-family: var(--aict-cv2-font) !important;
    font-size: clamp(2.25rem, 5vw + 0.5rem, 3.75rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 16px !important;
    background: var(--aict-cv2-grad-h1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

body.aict-cv2 .pricing-header p {
    color: var(--aict-cv2-text-muted) !important;
    font-size: 1.125rem !important;
    max-width: 680px;
    margin: 0 auto 24px !important;
}

body.aict-cv2 .pricing-section,
body.aict-cv2 .enterprise-section,
body.aict-cv2 .comparison-section,
body.aict-cv2 .guarantee-section,
body.aict-cv2 .pro-unlocks-section,
body.aict-cv2 .faq-section,
body.aict-cv2 .final-cta-section {
    background: var(--aict-cv2-bg) !important;
    color: var(--aict-cv2-text) !important;
}

body.aict-cv2 .pricing-grid {
    gap: 24px !important;
    align-items: stretch !important;
}

body.aict-cv2 .pricing-card {
    background: var(--aict-cv2-bg-card) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--aict-cv2-border) !important;
    border-radius: var(--aict-cv2-radius) !important;
    color: var(--aict-cv2-text) !important;
    box-shadow: var(--aict-cv2-shadow-sm) !important;
    transition: transform var(--aict-cv2-dur) var(--aict-cv2-ease),
                border-color var(--aict-cv2-dur) var(--aict-cv2-ease),
                box-shadow var(--aict-cv2-dur) var(--aict-cv2-ease) !important;
    position: relative;
    overflow: visible !important;
}

body.aict-cv2 .pricing-card:hover {
    transform: translateY(-4px);
    border-color: var(--aict-cv2-border-strong) !important;
    box-shadow: var(--aict-cv2-shadow-md) !important;
}

body.aict-cv2 .pricing-card .plan-name {
    color: var(--aict-cv2-text) !important;
    font-weight: 700 !important;
    font-size: 1.375rem !important;
}

body.aict-cv2 .pricing-card .plan-price {
    color: var(--aict-cv2-text) !important;
    margin: 12px 0 16px !important;
}

body.aict-cv2 .pricing-card .price-amount {
    color: var(--aict-cv2-text) !important;
    font-weight: 800 !important;
    font-size: 2.75rem !important;
    background: var(--aict-cv2-grad-h1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

body.aict-cv2 .pricing-card .price-period,
body.aict-cv2 .pricing-card .plan-features li,
body.aict-cv2 .pricing-card .plan-description {
    color: var(--aict-cv2-text-muted) !important;
}

body.aict-cv2 .pricing-card .plan-features li::before,
body.aict-cv2 .pricing-card .plan-features li svg {
    color: var(--aict-cv2-success) !important;
}

body.aict-cv2 .pricing-card .plan-highlight {
    background: var(--aict-cv2-grad-soft) !important;
    color: var(--aict-cv2-accent-hover) !important;
    border: 1px solid rgba(139,92,246,0.35) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-weight: 600 !important;
}

body.aict-cv2 .pricing-card .plan-cta,
body.aict-cv2 .pricing-card a.plan-cta,
body.aict-cv2 .pricing-card button.plan-cta {
    background: var(--aict-cv2-grad-cta) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 22px !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    cursor: pointer;
    transition: opacity var(--aict-transition-fast), transform var(--aict-transition-fast) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none !important;
}

body.aict-cv2 .pricing-card .plan-cta:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

/* "Recommended" Pro badge with gradient border */
body.aict-cv2 .pricing-card.is-featured,
body.aict-cv2 .pricing-card.featured,
body.aict-cv2 .pricing-card.recommended,
body.aict-cv2 .pricing-card[data-featured="1"] {
    background: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.10) 100%) !important;
    border: 1px solid transparent !important;
    box-shadow: var(--aict-cv2-glow-pro), var(--aict-cv2-shadow-md) !important;
    transform: scale(1.02);
}

body.aict-cv2 .pricing-card.is-featured::before,
body.aict-cv2 .pricing-card.featured::before,
body.aict-cv2 .pricing-card.recommended::before,
body.aict-cv2 .pricing-card[data-featured="1"]::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: calc(var(--aict-cv2-radius) + 1px);
    padding: 1.5px;
    background: var(--aict-cv2-border-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

body.aict-cv2 .pricing-card .featured-badge,
body.aict-cv2 .pricing-card .recommended-badge,
body.aict-cv2 .pricing-card .badge-recommended {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--aict-cv2-grad-cta);
    color: #fff;
    padding: 6px 18px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 8px 22px rgba(139,92,246,0.45);
    white-space: nowrap;
    z-index: 2;
}

/* "For teams & automation" separator gradient bar */
body.aict-cv2 .pricing-section + .pricing-section,
body.aict-cv2 .pricing-tier-separator,
body.aict-cv2 .pricing-team-separator {
    position: relative;
    padding-top: 48px;
}

body.aict-cv2 .pricing-tier-separator::before,
body.aict-cv2 .pricing-team-separator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(180px, 28vw, 320px);
    height: 4px;
    border-radius: 999px;
    background: var(--aict-cv2-grad-cta);
    box-shadow: 0 0 24px rgba(139,92,246,0.45);
}

body.aict-cv2 .pricing-tier-separator h2,
body.aict-cv2 .pricing-team-separator h2 {
    color: var(--aict-cv2-text) !important;
    font-weight: 800 !important;
    text-align: center;
    margin: 32px 0 8px !important;
}

body.aict-cv2 .pricing-tier-separator p,
body.aict-cv2 .pricing-team-separator p {
    color: var(--aict-cv2-text-muted) !important;
    text-align: center;
    margin: 0 auto 32px !important;
    max-width: 620px;
}

body.aict-cv2 .pricing-toggle {
    color: var(--aict-cv2-text-muted) !important;
}

body.aict-cv2 .pricing-toggle .save-badge {
    background: rgba(16,185,129,0.18) !important;
    color: var(--aict-cv2-success) !important;
    border: 1px solid rgba(16,185,129,0.35) !important;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

body.aict-cv2 .toggle-switch {
    background: var(--aict-cv2-bg-card) !important;
    border: 1px solid var(--aict-cv2-border-strong) !important;
}

body.aict-cv2 .toggle-switch.active,
body.aict-cv2 .toggle-switch[data-active="1"] {
    background: var(--aict-cv2-grad-cta) !important;
    border-color: transparent !important;
}

/* FAQ items + comparison tables on pricing */
body.aict-cv2 .faq-item,
body.aict-cv2 .comparison-table {
    background: var(--aict-cv2-bg-card) !important;
    border: 1px solid var(--aict-cv2-border) !important;
    border-radius: var(--aict-cv2-radius) !important;
    color: var(--aict-cv2-text) !important;
}

body.aict-cv2 .faq-item h3,
body.aict-cv2 .faq-item summary {
    color: var(--aict-cv2-text) !important;
}

body.aict-cv2 .faq-item p,
body.aict-cv2 .faq-item li {
    color: var(--aict-cv2-text-muted) !important;
}

body.aict-cv2 .comparison-table th {
    background: rgba(99,102,241,0.10) !important;
    color: var(--aict-cv2-text) !important;
    border-bottom: 1px solid var(--aict-cv2-border-strong) !important;
}

body.aict-cv2 .comparison-table td {
    color: var(--aict-cv2-text-muted) !important;
    border-bottom: 1px solid var(--aict-cv2-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   6. AGENTS — flagship cards (10), outcome packs, role grid
   ═══════════════════════════════════════════════════════════════════ */
body.aict-cv2 .aict-agents-wrap {
    background: var(--aict-cv2-bg);
    color: var(--aict-cv2-text);
    max-width: 1200px;
    padding: 64px 24px 96px;
}

body.aict-cv2 .aict-agents-header {
    margin-bottom: 56px;
}

body.aict-cv2 .aict-agents-title {
    font-family: var(--aict-cv2-font) !important;
    font-size: clamp(2rem, 4.5vw + 0.5rem, 3.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 16px !important;
    background: var(--aict-cv2-grad-h1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

body.aict-cv2 .aict-agents-subtitle {
    color: var(--aict-cv2-text-muted) !important;
    font-size: 1.125rem !important;
    max-width: 700px;
}

/* Agent grid + cards */
body.aict-cv2 .aict-agents-grid,
body.aict-cv2 .aict-agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

body.aict-cv2 .aict-agent-card {
    background: var(--aict-cv2-bg-card) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--aict-cv2-border) !important;
    border-radius: var(--aict-cv2-radius) !important;
    color: var(--aict-cv2-text) !important;
    padding: 28px 24px !important;
    transition: transform var(--aict-cv2-dur) var(--aict-cv2-ease),
                background var(--aict-cv2-dur) var(--aict-cv2-ease),
                border-color var(--aict-cv2-dur) var(--aict-cv2-ease),
                box-shadow var(--aict-cv2-dur) var(--aict-cv2-ease) !important;
    box-shadow: none !important;
}

body.aict-cv2 .aict-agent-card:hover {
    background: var(--aict-cv2-bg-card-hover) !important;
    border-color: var(--aict-cv2-border-strong) !important;
    transform: translateY(-3px);
    box-shadow: var(--aict-cv2-shadow-md) !important;
}

body.aict-cv2 .aict-agent-card .aict-agent-icon,
body.aict-cv2 .aict-agent-icon {
    background: var(--aict-cv2-grad-soft) !important;
    border: 1px solid rgba(139,92,246,0.30);
    border-radius: 14px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 0 16px !important;
}

body.aict-cv2 .aict-agent-card h3,
body.aict-cv2 .aict-agent-name {
    color: var(--aict-cv2-text) !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    margin: 0 0 8px !important;
}

body.aict-cv2 .aict-agent-card p,
body.aict-cv2 .aict-agent-desc {
    color: var(--aict-cv2-text-muted) !important;
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
}

body.aict-cv2 .aict-agent-card .aict-agent-cta,
body.aict-cv2 .aict-agent-card a.aict-agent-cta,
body.aict-cv2 .aict-agent-card .agent-cta {
    background: var(--aict-cv2-grad-cta) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity var(--aict-transition-fast), transform var(--aict-transition-fast);
}

body.aict-cv2 .aict-agent-card .aict-agent-cta:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

/* Outcome packs (Publish Faster / Win More Clients / Launch Products / etc) */
body.aict-cv2 .aict-outcome-grid,
body.aict-cv2 .aict-outcomes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 48px 0;
}

body.aict-cv2 .aict-outcome-card {
    background: var(--aict-cv2-bg-card) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--aict-cv2-border) !important;
    border-radius: var(--aict-cv2-radius) !important;
    padding: 28px 24px !important;
    color: var(--aict-cv2-text) !important;
    transition: transform var(--aict-cv2-dur) var(--aict-cv2-ease),
                border-color var(--aict-cv2-dur) var(--aict-cv2-ease) !important;
    position: relative;
    overflow: hidden;
}

body.aict-cv2 .aict-outcome-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--aict-cv2-grad-cta);
    opacity: 0.7;
}

body.aict-cv2 .aict-outcome-card:hover {
    transform: translateY(-3px);
    border-color: var(--aict-cv2-border-strong) !important;
}

body.aict-cv2 .aict-outcome-card .icon,
body.aict-cv2 .aict-outcome-icon {
    font-size: 2rem !important;
    margin: 0 0 12px !important;
    display: block;
}

body.aict-cv2 .aict-outcome-card h3,
body.aict-cv2 .aict-outcome-title {
    color: var(--aict-cv2-text) !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    margin: 0 0 8px !important;
}

body.aict-cv2 .aict-outcome-card p,
body.aict-cv2 .aict-outcome-desc {
    color: var(--aict-cv2-text-muted) !important;
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
}

/* Role grid: Bloggers / Freelancers / Authors / Developers / Small Business / Students */
body.aict-cv2 .aict-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 48px 0;
}

body.aict-cv2 .aict-role-card,
body.aict-cv2 .aict-role-tile {
    background: var(--aict-cv2-bg-card) !important;
    border: 1px solid var(--aict-cv2-border) !important;
    border-radius: var(--aict-cv2-radius-sm) !important;
    padding: 22px 18px !important;
    text-align: center;
    color: var(--aict-cv2-text) !important;
    text-decoration: none !important;
    transition: transform var(--aict-cv2-dur) var(--aict-cv2-ease),
                background var(--aict-cv2-dur) var(--aict-cv2-ease) !important;
}

body.aict-cv2 .aict-role-card:hover,
body.aict-cv2 .aict-role-tile:hover {
    background: var(--aict-cv2-bg-card-hover) !important;
    transform: translateY(-2px);
}

body.aict-cv2 .aict-role-icon {
    font-size: 2rem;
    display: block;
    margin: 0 0 8px;
}

/* Step progress dots, FAQ on agents page */
body.aict-cv2 .aict-step-progress .step,
body.aict-cv2 .aict-progress-dots .dot {
    background: var(--aict-cv2-bg-card-hover) !important;
    border: 1px solid var(--aict-cv2-border-strong) !important;
    color: var(--aict-cv2-text-muted) !important;
}

body.aict-cv2 .aict-step-progress .step.active,
body.aict-cv2 .aict-progress-dots .dot.active {
    background: var(--aict-cv2-grad-cta) !important;
    border-color: transparent !important;
    color: #fff !important;
}

body.aict-cv2 .aict-faq-item {
    background: var(--aict-cv2-bg-card) !important;
    border: 1px solid var(--aict-cv2-border) !important;
    border-radius: var(--aict-cv2-radius-sm) !important;
    color: var(--aict-cv2-text) !important;
    margin-bottom: 12px;
}

body.aict-cv2 .aict-faq-item summary,
body.aict-cv2 .aict-faq-q {
    color: var(--aict-cv2-text) !important;
    padding: 16px 20px;
    font-weight: 600;
    cursor: pointer;
}

body.aict-cv2 .aict-faq-item .aict-faq-a,
body.aict-cv2 .aict-faq-item p {
    color: var(--aict-cv2-text-muted) !important;
    padding: 0 20px 16px;
}

/* Pro CTA banner */
body.aict-cv2 .aict-pro-cta-banner,
body.aict-cv2 .aict-pro-gate {
    background: linear-gradient(135deg, rgba(99,102,241,0.18) 0%, rgba(217,70,239,0.14) 100%) !important;
    border: 1px solid rgba(139,92,246,0.40) !important;
    border-radius: var(--aict-cv2-radius) !important;
    color: var(--aict-cv2-text) !important;
    padding: 32px 28px !important;
    box-shadow: var(--aict-cv2-glow-pro);
}

/* ─── Real agent-page class names (aict-ap-*) ─── */
body.aict-cv2.aict-agents-page,
body.aict-cv2 body.aict-agents-page,
body.aict-agents-page.aict-cv2 {
    background: var(--aict-cv2-bg) !important;
    color: var(--aict-cv2-text) !important;
}

/* Override the legacy white-background overrides on aict-agents-page when v2 active */
body.aict-cv2.aict-agents-page .aict-ap-section-title,
body.aict-cv2.aict-agents-page .aict-ap-hero-title,
body.aict-cv2.aict-agents-page .aict-ap-compare-title,
body.aict-cv2.aict-agents-page .aict-ap-faq-title,
body.aict-cv2.aict-agents-page .aict-ap-outcome-title,
body.aict-cv2.aict-agents-page .aict-ap-final-cta-h,
body.aict-cv2.aict-agents-page .aict-agent-card-name,
body.aict-cv2.aict-agents-page .aict-ap-role-agent-name,
body.aict-cv2.aict-agents-page .aict-ap-how-step-body h3 {
    color: var(--aict-cv2-text) !important;
    -webkit-text-fill-color: var(--aict-cv2-text) !important;
    opacity: 1 !important;
}

body.aict-cv2.aict-agents-page .aict-ap-section-sub,
body.aict-cv2.aict-agents-page .aict-ap-hero-sub,
body.aict-cv2.aict-agents-page .aict-ap-outcome-desc,
body.aict-cv2.aict-agents-page .aict-ap-final-cta-sub,
body.aict-cv2.aict-agents-page .aict-agent-card-desc,
body.aict-cv2.aict-agents-page .aict-ap-role-agent-desc,
body.aict-cv2.aict-agents-page .aict-ap-how-step-body p,
body.aict-cv2.aict-agents-page .aict-ap-faq-item p,
body.aict-cv2.aict-agents-page .aict-agent-card-usecases li {
    color: var(--aict-cv2-text-muted) !important;
    -webkit-text-fill-color: var(--aict-cv2-text-muted) !important;
    opacity: 1 !important;
}

/* Hero of the agents page — gradient-clipped title */
body.aict-cv2.aict-agents-page .aict-ap-hero,
body.aict-cv2.aict-agents-page .aict-ap-hero-section {
    background: var(--aict-cv2-hero-grad) !important;
    color: var(--aict-cv2-text) !important;
    position: relative;
    overflow: hidden;
}

body.aict-cv2.aict-agents-page .aict-ap-hero-title {
    background: var(--aict-cv2-grad-h1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

/* Outcome cards on agents page */
body.aict-cv2.aict-agents-page .aict-ap-outcomes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

body.aict-cv2.aict-agents-page .aict-ap-outcome,
body.aict-cv2.aict-agents-page .aict-ap-outcome-card {
    background: var(--aict-cv2-bg-card) !important;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid var(--aict-cv2-border) !important;
    border-radius: var(--aict-cv2-radius) !important;
    color: var(--aict-cv2-text) !important;
    transition: transform var(--aict-cv2-dur) var(--aict-cv2-ease),
                border-color var(--aict-cv2-dur) var(--aict-cv2-ease) !important;
}

body.aict-cv2.aict-agents-page .aict-ap-outcome:hover,
body.aict-cv2.aict-agents-page .aict-ap-outcome-card:hover {
    border-color: var(--aict-cv2-border-strong) !important;
    transform: translateY(-3px);
    box-shadow: var(--aict-cv2-glow-pro) !important;
}

/* Role cards on agents page */
body.aict-cv2.aict-agents-page .aict-ap-role-agent-card,
body.aict-cv2.aict-agents-page .aict-ap-grid-section .aict-ap-role-agent-card {
    background: var(--aict-cv2-bg-card) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--aict-cv2-border) !important;
    border-radius: var(--aict-cv2-radius) !important;
    color: var(--aict-cv2-text) !important;
    transition: transform var(--aict-cv2-dur) var(--aict-cv2-ease),
                border-color var(--aict-cv2-dur) var(--aict-cv2-ease) !important;
}

body.aict-cv2.aict-agents-page .aict-ap-role-agent-card:hover {
    border-color: var(--aict-cv2-border-strong) !important;
    transform: translateY(-2px);
}

/* Agent cards (flagship grid) */
body.aict-cv2.aict-agents-page .aict-agent-card {
    background: var(--aict-cv2-bg-card) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--aict-cv2-border) !important;
    border-radius: var(--aict-cv2-radius) !important;
    color: var(--aict-cv2-text) !important;
    transition: transform var(--aict-cv2-dur) var(--aict-cv2-ease),
                border-color var(--aict-cv2-dur) var(--aict-cv2-ease) !important;
}

body.aict-cv2.aict-agents-page .aict-agent-card:hover {
    border-color: var(--aict-cv2-border-strong) !important;
    transform: translateY(-3px);
    box-shadow: var(--aict-cv2-glow-pro) !important;
}

body.aict-cv2.aict-agents-page .aict-agent-card-name {
    color: var(--aict-cv2-text) !important;
}

/* Role tabs */
body.aict-cv2.aict-agents-page .aict-ap-role-tab {
    color: var(--aict-cv2-text-muted) !important;
    -webkit-text-fill-color: var(--aict-cv2-text-muted) !important;
    background: var(--aict-cv2-bg-card) !important;
    border: 1px solid var(--aict-cv2-border) !important;
}

body.aict-cv2.aict-agents-page .aict-ap-role-tab--active,
body.aict-cv2.aict-agents-page .aict-ap-role-tab.is-active {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: var(--aict-cv2-grad-cta) !important;
    border-color: transparent !important;
}

/* Buttons on agents page */
body.aict-cv2.aict-agents-page .aict-ap-btn-primary,
body.aict-cv2.aict-agents-page .aict-ap-btn-primary--lg,
body.aict-cv2.aict-agents-page .aict-ap-pro-cta-btn {
    background: var(--aict-cv2-grad-cta) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 22px rgba(167,139,250,0.32) !important;
}

body.aict-cv2.aict-agents-page .aict-ap-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(167,139,250,0.45) !important;
}

body.aict-cv2.aict-agents-page .aict-ap-btn-secondary {
    background: var(--aict-cv2-bg-card) !important;
    color: var(--aict-cv2-text) !important;
    border: 1px solid var(--aict-cv2-border-strong) !important;
}

body.aict-cv2.aict-agents-page .aict-ap-btn-ghost {
    background: transparent !important;
    color: var(--aict-cv2-accent) !important;
    border: 1px solid rgba(167,139,250,0.45) !important;
}

/* Pro CTA on agents page */
body.aict-cv2.aict-agents-page .aict-ap-pro-cta {
    background: linear-gradient(135deg, rgba(99,102,241,0.18) 0%, rgba(236,72,153,0.14) 100%) !important;
    border: 1px solid rgba(167,139,250,0.40) !important;
    border-radius: var(--aict-cv2-radius-lg) !important;
    color: var(--aict-cv2-text) !important;
    box-shadow: var(--aict-cv2-glow-pro) !important;
}

body.aict-cv2.aict-agents-page .aict-ap-pro-cta-h,
body.aict-cv2.aict-agents-page .aict-ap-pro-cta-sub {
    color: var(--aict-cv2-text) !important;
    -webkit-text-fill-color: var(--aict-cv2-text) !important;
}

/* Comparison table */
body.aict-cv2.aict-agents-page .aict-ap-compare-table,
body.aict-cv2.aict-agents-page .aict-ap-compare-wrap {
    background: var(--aict-cv2-bg-card) !important;
    border: 1px solid var(--aict-cv2-border) !important;
    border-radius: var(--aict-cv2-radius) !important;
    color: var(--aict-cv2-text) !important;
    box-shadow: none !important;
}

body.aict-cv2.aict-agents-page .aict-ap-compare-th-agent,
body.aict-cv2.aict-agents-page .aict-ap-compare-row-label {
    background: rgba(167,139,250,0.10) !important;
    color: var(--aict-cv2-text) !important;
}

body.aict-cv2.aict-agents-page .aict-ap-compare-td-agent {
    color: var(--aict-cv2-text-muted) !important;
}

/* FAQ */
body.aict-cv2.aict-agents-page .aict-ap-faq-item {
    background: var(--aict-cv2-bg-card) !important;
    border: 1px solid var(--aict-cv2-border) !important;
    border-radius: var(--aict-cv2-radius-sm) !important;
    color: var(--aict-cv2-text) !important;
}

body.aict-cv2.aict-agents-page .aict-ap-faq-item summary {
    color: var(--aict-cv2-text) !important;
}

body.aict-cv2.aict-agents-page .aict-ap-faq-item p {
    color: var(--aict-cv2-text-muted) !important;
}

/* Final CTA banner on agents page */
body.aict-cv2.aict-agents-page .aict-ap-final-cta {
    background: linear-gradient(135deg, rgba(167,139,250,0.18) 0%, rgba(236,72,153,0.14) 50%, rgba(245,158,11,0.10) 100%) !important;
    border: 1px solid rgba(167,139,250,0.40) !important;
    border-radius: var(--aict-cv2-radius-lg) !important;
    color: var(--aict-cv2-text) !important;
    box-shadow: var(--aict-cv2-glow-pro) !important;
}

/* Teaser bar */
body.aict-cv2.aict-agents-page .aict-ap-teaser-bar {
    background: rgba(167,139,250,0.10) !important;
    border-top: 1px solid var(--aict-cv2-border);
    border-bottom: 1px solid var(--aict-cv2-border);
    color: var(--aict-cv2-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   7. WORKFLOWS — persona bundles + workflow cards
   ═══════════════════════════════════════════════════════════════════ */
body.aict-cv2 .aict-workflows-page,
body.aict-cv2 .aict-workflow-card {
    color: var(--aict-cv2-text);
}

/* Wrap dynamically-generated workflow page elements */
body.aict-cv2 [data-wf-persona] {
    color: var(--aict-cv2-text);
    margin-bottom: 56px;
}

body.aict-cv2 [data-wf-persona] h2,
body.aict-cv2 .aict-wf-persona-title {
    color: var(--aict-cv2-text) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    margin: 0 0 18px !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

body.aict-cv2 [data-wf-card] {
    background: var(--aict-cv2-bg-card) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--aict-cv2-border) !important;
    border-radius: var(--aict-cv2-radius) !important;
    color: var(--aict-cv2-text) !important;
    padding: 24px !important;
    transition: transform var(--aict-cv2-dur) var(--aict-cv2-ease),
                background var(--aict-cv2-dur) var(--aict-cv2-ease),
                border-color var(--aict-cv2-dur) var(--aict-cv2-ease),
                box-shadow var(--aict-cv2-dur) var(--aict-cv2-ease) !important;
}

body.aict-cv2 [data-wf-card]:hover {
    background: var(--aict-cv2-bg-card-hover) !important;
    border-color: var(--aict-cv2-border-strong) !important;
    transform: translateY(-3px);
    box-shadow: var(--aict-cv2-shadow-md) !important;
}

body.aict-cv2 [data-wf-card] h3,
body.aict-cv2 [data-wf-card] .wf-title {
    color: var(--aict-cv2-text) !important;
    font-weight: 700 !important;
    font-size: 1.0625rem !important;
}

body.aict-cv2 [data-wf-card] p,
body.aict-cv2 [data-wf-card] .wf-desc {
    color: var(--aict-cv2-text-muted) !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
}

body.aict-cv2 [data-wf-card] a,
body.aict-cv2 [data-wf-card] .wf-cta {
    color: var(--aict-cv2-accent) !important;
}

body.aict-cv2 [data-wf-card] a:hover,
body.aict-cv2 [data-wf-card] .wf-cta:hover {
    color: var(--aict-cv2-accent-hover) !important;
}

/* Workflows search input */
body.aict-cv2 #aict-wf-search,
body.aict-cv2 .aict-wf-search input {
    background: var(--aict-cv2-bg-card) !important;
    border: 1px solid var(--aict-cv2-border-strong) !important;
    color: var(--aict-cv2-text) !important;
    border-radius: 12px !important;
}

body.aict-cv2 #aict-wf-search::placeholder {
    color: var(--aict-cv2-text-faint) !important;
}

body.aict-cv2 #aict-wf-search:focus {
    border-color: var(--aict-cv2-accent) !important;
    background: var(--aict-cv2-bg-card-hover) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.20);
}

body.aict-cv2 #aict-wf-no-results {
    color: var(--aict-cv2-text-faint) !important;
}

/* Persona bundle pills */
body.aict-cv2 .aict-bundle-card,
body.aict-cv2 .aict-persona-bundle {
    background: var(--aict-cv2-bg-card) !important;
    border: 1px solid var(--aict-cv2-border) !important;
    border-radius: var(--aict-cv2-radius) !important;
    padding: 24px !important;
    color: var(--aict-cv2-text) !important;
    transition: transform var(--aict-cv2-dur) var(--aict-cv2-ease),
                border-color var(--aict-cv2-dur) var(--aict-cv2-ease) !important;
}

body.aict-cv2 .aict-bundle-card:hover {
    border-color: var(--aict-cv2-border-strong) !important;
    transform: translateY(-2px);
}

body.aict-cv2 .aict-bundle-card .bundle-cta,
body.aict-cv2 .aict-bundle-cta {
    background: var(--aict-cv2-grad-cta) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity var(--aict-transition-fast), transform var(--aict-transition-fast);
}

body.aict-cv2 .aict-bundle-card .bundle-cta:hover,
body.aict-cv2 .aict-bundle-cta:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════
   8. API DOCS — hero + funnel grid harmonization
   ═══════════════════════════════════════════════════════════════════ */
body.aict-cv2 .aict-funnel-hero {
    background: radial-gradient(ellipse at top, rgba(99,102,241,0.30) 0%, transparent 60%),
                radial-gradient(ellipse at bottom right, rgba(217,70,239,0.18) 0%, transparent 55%),
                var(--aict-cv2-bg) !important;
    color: var(--aict-cv2-text) !important;
    padding: clamp(56px, 9vw, 96px) 24px clamp(48px, 7vw, 72px) !important;
    border-radius: 0 0 var(--aict-cv2-radius-lg) var(--aict-cv2-radius-lg) !important;
    border-bottom: 1px solid var(--aict-cv2-border);
    position: relative;
    overflow: hidden;
}

body.aict-cv2 .aict-funnel-hero h2 {
    font-family: var(--aict-cv2-font) !important;
    font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem) !important;
    font-weight: 800 !important;
    margin: 0 0 14px !important;
    line-height: 1.15 !important;
    background: var(--aict-cv2-grad-h1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

body.aict-cv2 .aict-funnel-hero p {
    color: var(--aict-cv2-text-muted) !important;
    font-size: 1.0625rem !important;
    margin: 0 0 22px !important;
}

body.aict-cv2 .aict-funnel-hero .aict-funnel-stats {
    color: var(--aict-cv2-accent-hover) !important;
}

body.aict-cv2 .aict-funnel-wrap {
    background: var(--aict-cv2-bg) !important;
    color: var(--aict-cv2-text) !important;
    max-width: 1180px;
    padding: 32px 24px 64px;
}

body.aict-cv2 .aict-funnel-wrap h2,
body.aict-cv2 .aict-funnel-wrap h3 {
    color: var(--aict-cv2-text) !important;
}

body.aict-cv2 .aict-cta {
    background: var(--aict-cv2-grad-cta) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(99,102,241,0.32);
    transition: opacity var(--aict-transition-fast), transform var(--aict-transition-fast), box-shadow var(--aict-transition-fast) !important;
}

body.aict-cv2 .aict-cta:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(139,92,246,0.40);
}

body.aict-cv2 .aict-cta--secondary {
    background: var(--aict-cv2-bg-card) !important;
    color: var(--aict-cv2-accent-hover) !important;
    border: 1px solid var(--aict-cv2-border-strong);
    box-shadow: none;
}

body.aict-cv2 .aict-cta--secondary:hover {
    background: var(--aict-cv2-bg-card-hover) !important;
    color: var(--aict-cv2-text) !important;
    border-color: rgba(139,92,246,0.50);
}

body.aict-cv2 .aict-cta--ghost {
    background: transparent !important;
    color: var(--aict-cv2-accent) !important;
    border: 1px solid rgba(139,92,246,0.45) !important;
}

body.aict-cv2 .aict-cta--ghost:hover {
    background: rgba(139,92,246,0.12) !important;
    color: var(--aict-cv2-text) !important;
}

body.aict-cv2 .aict-cta-band {
    background: var(--aict-cv2-bg-card) !important;
    border: 1px solid var(--aict-cv2-border-strong) !important;
    border-radius: var(--aict-cv2-radius-sm) !important;
    color: var(--aict-cv2-text) !important;
}

body.aict-cv2 .aict-cta-band p {
    color: var(--aict-cv2-text-muted) !important;
}

body.aict-cv2 .aict-cta-band--blue {
    background: rgba(99,102,241,0.12) !important;
    border-color: rgba(99,102,241,0.40) !important;
}

body.aict-cv2 .aict-cta-band--purple {
    background: rgba(139,92,246,0.12) !important;
    border-color: rgba(139,92,246,0.40) !important;
}

body.aict-cv2 .aict-plan-table {
    background: var(--aict-cv2-bg-card) !important;
    color: var(--aict-cv2-text) !important;
    border: 1px solid var(--aict-cv2-border);
    box-shadow: none !important;
}

body.aict-cv2 .aict-plan-table th {
    background: rgba(99,102,241,0.12) !important;
    color: var(--aict-cv2-text) !important;
    border-bottom-color: var(--aict-cv2-border-strong) !important;
}

body.aict-cv2 .aict-plan-table td {
    color: var(--aict-cv2-text-muted) !important;
    border-bottom-color: var(--aict-cv2-border) !important;
}

body.aict-cv2 .aict-plan-table tr.is-business {
    background: rgba(99,102,241,0.10) !important;
}

body.aict-cv2 .aict-plan-table tr.is-agency {
    background: rgba(139,92,246,0.10) !important;
}

body.aict-cv2 .aict-plan-table .px {
    color: var(--aict-cv2-text) !important;
}

body.aict-cv2 .aict-plan-table .yes {
    color: var(--aict-cv2-success) !important;
}

body.aict-cv2 .aict-plan-table .no {
    color: var(--aict-cv2-text-faint) !important;
}

body.aict-cv2 .aict-aside .card {
    background: var(--aict-cv2-bg-card) !important;
    border: 1px solid var(--aict-cv2-border) !important;
    color: var(--aict-cv2-text) !important;
}

body.aict-cv2 .aict-aside .card h4 {
    color: var(--aict-cv2-text) !important;
}

body.aict-cv2 .aict-aside .card p {
    color: var(--aict-cv2-text-muted) !important;
}

body.aict-cv2 .aict-aside .card code {
    background: var(--aict-cv2-bg-elevated) !important;
    color: var(--aict-cv2-accent-hover) !important;
}

body.aict-cv2 .aict-vs-card {
    background: var(--aict-cv2-bg-card) !important;
    border: 2px solid var(--aict-cv2-border) !important;
    color: var(--aict-cv2-text) !important;
}

body.aict-cv2 .aict-vs-card.is-business {
    border-color: rgba(99,102,241,0.50) !important;
}

body.aict-cv2 .aict-vs-card.is-agency {
    border-color: rgba(139,92,246,0.50) !important;
}

body.aict-cv2 .aict-vs-card h3 {
    color: var(--aict-cv2-text) !important;
}

body.aict-cv2 .aict-vs-card .vs-px {
    color: var(--aict-cv2-accent-hover) !important;
}

body.aict-cv2 .aict-vs-card li {
    color: var(--aict-cv2-text-muted) !important;
}

body.aict-cv2 .aict-vs-card .footer-note {
    color: var(--aict-cv2-text-faint) !important;
}

body.aict-cv2 .aict-code-block {
    background: var(--aict-cv2-bg-elevated) !important;
    border: 1px solid var(--aict-cv2-border) !important;
    color: var(--aict-cv2-text-muted) !important;
}

body.aict-cv2 .aict-code-block .head {
    background: var(--aict-cv2-bg-card) !important;
    color: var(--aict-cv2-accent-hover) !important;
    border-bottom: 1px solid var(--aict-cv2-border);
}

body.aict-cv2 .aict-anchor-jump {
    color: var(--aict-cv2-accent) !important;
}

body.aict-cv2 .aict-anchor-jump:hover {
    color: var(--aict-cv2-accent-hover) !important;
}

/* Swagger UI panel — surround with v2 frame on /api/docs/ */
body.aict-cv2 #swagger-ui {
    background: #fff;
    border-radius: var(--aict-cv2-radius) !important;
    margin: 24px;
    box-shadow: var(--aict-cv2-shadow-lg);
    overflow: hidden;
}

body.aict-cv2 .aict-hdr {
    background: var(--aict-cv2-bg) !important;
    border-bottom: 1px solid var(--aict-cv2-border) !important;
}

body.aict-cv2 .aict-hdr h1 {
    color: var(--aict-cv2-text) !important;
}

body.aict-cv2 .aict-hdr a {
    color: var(--aict-cv2-accent-hover) !important;
}

body.aict-cv2 .aict-hdr a:hover {
    color: var(--aict-cv2-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   9. RESPONSIVE — mobile-first refinement
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    body.aict-cv2 .pricing-card.is-featured,
    body.aict-cv2 .pricing-card.featured,
    body.aict-cv2 .pricing-card.recommended {
        transform: none;
    }
}

@media (max-width: 768px) {
    body.aict-cv2 .aict-cv2-hero {
        padding: 56px 20px 40px;
    }

    body.aict-cv2 .aict-funnel-hero {
        border-radius: 0 0 var(--aict-cv2-radius) var(--aict-cv2-radius) !important;
    }

    body.aict-cv2 .aict-agents-grid,
    body.aict-cv2 .aict-outcome-grid,
    body.aict-cv2 .aict-role-grid {
        grid-template-columns: 1fr;
    }

    body.aict-cv2 .pricing-card {
        padding: 24px 20px !important;
    }

    body.aict-cv2 .aict-funnel-wrap {
        padding: 24px 16px 48px;
    }
}

@media (max-width: 480px) {
    body.aict-cv2 .aict-agents-wrap {
        padding: 40px 16px 64px;
    }

    body.aict-cv2 .pricing-card .price-amount {
        font-size: 2.25rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   10. PRINT — hide gradient effects in print mode
   ═══════════════════════════════════════════════════════════════════ */
@media print {
    body.aict-cv2 {
        background: #fff !important;
        color: #000 !important;
    }

    body.aict-cv2 .aict-cv2-hero,
    body.aict-cv2 .aict-funnel-hero,
    body.aict-cv2 .pricing-header {
        background: #fff !important;
        color: #000 !important;
    }

    body.aict-cv2 .aict-cv2-hero h1,
    body.aict-cv2 .aict-funnel-hero h2,
    body.aict-cv2 .pricing-header h1,
    body.aict-cv2 .aict-agents-title,
    body.aict-cv2 .pricing-card .price-amount {
        background: none !important;
        -webkit-text-fill-color: #000 !important;
        color: #000 !important;
    }

    body.aict-cv2 .pricing-card,
    body.aict-cv2 .aict-agent-card,
    body.aict-cv2 [data-wf-card],
    body.aict-cv2 .aict-outcome-card {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   END — Q3-batch-66.3 v4.16.80hq Commercial Pages v2
   ═══════════════════════════════════════════════════════════════════ */