@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(15px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes scaleInOut {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

:root {
    /* Light mode colors */
    --pricing-blue: #1073E6;
    --pricing-green: #156B54;
    --pricing-yellow: #FFBE3D;
    --pricing-purple: #4F378A;

    /* On primary colors (text on top of primary colors) */
    --on-pricing-blue: #FFFFFF;
    --on-pricing-green: #FFFFFF;
    --on-pricing-yellow: #221B00;
    --on-pricing-purple: #FFFFFF;

    /* Dark mode colors */
    --pricing-blue-dark: #A9D5FF;
    --pricing-green-dark: #82D7A2;
    --pricing-yellow-dark: #FFB945;
    --pricing-purple-dark: #CFBCFF;

    /* On primary colors for dark mode */
    --on-pricing-blue-dark: #002E6A;
    --on-pricing-green-dark: #00391D;
    --on-pricing-yellow-dark: #402D00;
    --on-pricing-purple-dark: #2B1152;

    /* Animation variables */
    --tab-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --content-transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Blue theme */
    --pricing-blue-primary: var(--pricing-blue);
    --pricing-blue-on-primary: var(--on-pricing-blue);
    --pricing-blue-primary-container: color-mix(in srgb, var(--pricing-blue) 15%, var(--background));
    --pricing-blue-on-primary-container: #062D5F;
    --pricing-blue-surface: color-mix(in srgb, var(--pricing-blue) 2%, var(--background));
    --pricing-blue-surface-variant: color-mix(in srgb, var(--pricing-blue) 5%, var(--background));
    
    /* Blue theme - Dark mode */
    --pricing-blue-primary-dark: var(--pricing-blue-dark);
    --pricing-blue-on-primary-dark: var(--on-pricing-blue-dark);
    --pricing-blue-primary-container-dark: color-mix(in srgb, var(--pricing-blue-dark) 15%, var(--background));
    --pricing-blue-on-primary-container-dark: #D6E9FF;
    --pricing-blue-surface-dark: color-mix(in srgb, var(--pricing-blue-dark) 2%, var(--background));
    --pricing-blue-surface-variant-dark: color-mix(in srgb, var(--pricing-blue-dark) 5%, var(--background));
    
    /* Green theme */
    --pricing-green-primary: var(--pricing-green);
    --pricing-green-on-primary: var(--on-pricing-green);
    --pricing-green-primary-container: color-mix(in srgb, var(--pricing-green) 15%, var(--background));
    --pricing-green-on-primary-container: #052F1A;
    --pricing-green-surface: color-mix(in srgb, var(--pricing-green) 2%, var(--background));
    --pricing-green-surface-variant: color-mix(in srgb, var(--pricing-green) 5%, var(--background));
    
    /* Green theme - Dark mode */
    --pricing-green-primary-dark: var(--pricing-green-dark);
    --pricing-green-on-primary-dark: var(--on-pricing-green-dark);
    --pricing-green-primary-container-dark: color-mix(in srgb, var(--pricing-green-dark) 15%, var(--background));
    --pricing-green-on-primary-container-dark: #D4F4DF;
    --pricing-green-surface-dark: color-mix(in srgb, var(--pricing-green-dark) 2%, var(--background));
    --pricing-green-surface-variant-dark: color-mix(in srgb, var(--pricing-green-dark) 5%, var(--background));
    
    /* Yellow theme */
    --pricing-yellow-primary: var(--pricing-yellow);
    --pricing-yellow-on-primary: var(--on-pricing-yellow);
    --pricing-yellow-primary-container: color-mix(in srgb, var(--pricing-yellow) 15%, var(--background));
    --pricing-yellow-on-primary-container: #382D00;
    --pricing-yellow-surface: color-mix(in srgb, var(--pricing-yellow) 2%, var(--background));
    --pricing-yellow-surface-variant: color-mix(in srgb, var(--pricing-yellow) 5%, var(--background));
    
    /* Yellow theme - Dark mode */
    --pricing-yellow-primary-dark: var(--pricing-yellow-dark);
    --pricing-yellow-on-primary-dark: var(--on-pricing-yellow-dark);
    --pricing-yellow-primary-container-dark: color-mix(in srgb, var(--pricing-yellow-dark) 15%, var(--background));
    --pricing-yellow-on-primary-container-dark: #FFECC7;
    --pricing-yellow-surface-dark: color-mix(in srgb, var(--pricing-yellow-dark) 2%, var(--background));
    --pricing-yellow-surface-variant-dark: color-mix(in srgb, var(--pricing-yellow-dark) 5%, var(--background));
    
    /* Purple theme */
    --pricing-purple-primary: var(--pricing-purple);
    --pricing-purple-on-primary: var(--on-pricing-purple);
    --pricing-purple-primary-container: color-mix(in srgb, var(--pricing-purple) 15%, var(--background));
    --pricing-purple-on-primary-container: #2E1252;
    --pricing-purple-surface: color-mix(in srgb, var(--pricing-purple) 2%, var(--background));
    --pricing-purple-surface-variant: color-mix(in srgb, var(--pricing-purple) 5%, var(--background));
    
    /* Purple theme - Dark mode */
    --pricing-purple-primary-dark: var(--pricing-purple-dark);
    --pricing-purple-on-primary-dark: var(--on-pricing-purple-dark);
    --pricing-purple-primary-container-dark: color-mix(in srgb, var(--pricing-purple-dark) 15%, var(--background));
    --pricing-purple-on-primary-container-dark: #E9DDFF;
    --pricing-purple-surface-dark: color-mix(in srgb, var(--pricing-purple-dark) 2%, var(--background));
    --pricing-purple-surface-variant-dark: color-mix(in srgb, var(--pricing-purple-dark) 5%, var(--background));
    
    /* Rounded corners */
    --pricing-radius-small: 8px;
    --pricing-radius-medium: 16px;
    --pricing-radius-large: 24px;
    --pricing-radius-extra-large: 28px;
    
    /* Transitions */
    --pricing-transition-standard: 0.2s cubic-bezier(0.2, 0, 0, 1);
    --pricing-transition-emphasized: 0.5s cubic-bezier(0.2, 0, 0, 1);
}

.pricing-tabs-container {
    margin: 3rem auto;
    max-width: 1360px;
    padding: 0;
    color: var(--text);
    position: relative;

    .cursor-glow {
        position: fixed;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        background: radial-gradient(circle, var(--theme-primary) 0%, rgba(255,255,255,0) 70%);
        pointer-events: none;
        transform: translate(-50%, -50%);
        z-index: 10000;
        filter: blur(25px);
        will-change: left, top;
        mix-blend-mode: normal;
        display: none;
    }

    .cursor-glow.active {
        display: block;
    }

    .pricing-tabs {
        margin-bottom: 2.5rem;
    }

    .pricing-tabs .pill-tab {
        flex: 1;
        padding: 0.8rem 1.2rem;
    }

    .pricing-content {
        position: relative;
        min-height: 200px;
    }

    .pricing-plans {
        display: none;
        opacity: 0;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        transform: translateY(10px);
        transition: opacity var(--content-transition), transform var(--content-transition);
    }

    .pricing-plans[data-active] {
        display: block;
        opacity: 1;
        position: relative;
        transform: translateY(0);
        animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .pricing-title {
        text-align: center;
        margin-bottom: 2.5rem;
        font-size: var(--font-xl);
        font-weight: var(--font-weight-bold);
        color: var(--text);
        opacity: 0;
        animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
    }

    .highlight-transcription {
        color: var(--pricing-blue);
    }

    .highlight-subtitle {
        color: var(--pricing-green);
    }

    .highlight-voiceover {
        color: var(--pricing-yellow);
    }

    .highlight-real-time {
        color: var(--pricing-purple);
    }

    .pricing-plans-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.5rem;
        opacity: 0;
        animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
    }

    .pricing-plan-wrapper {
        position: relative;
        height: 100%;
        opacity: 0;
        animation: fadeIn 0.5s ease forwards;
        padding: 1px;
        display: flex;
        overflow: hidden;
    }

    .pricing-plan-border {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--theme-primary-container);
        border-radius: calc(var(--pricing-radius-medium) + 1px);
        z-index: -1;
        overflow: hidden;
    }
    
    .pricing-plan {
        background-color: var(--theme-surface);
        border-radius: var(--pricing-radius-medium);
        overflow: hidden;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        border: none;
        margin: 0;
        position: relative;
        z-index: 1;
        transition: all var(--pricing-transition-standard);
    }

    .hover-glow {
        position: absolute;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--theme-primary) 8%, transparent), rgba(255, 255, 255, 0) 70%);
        pointer-events: none;
        transform: translate(-50%, -50%);
        z-index: 2;
        filter: blur(15px);
        will-change: left, top;
        opacity: 0;
        transition: opacity 0.2s ease-out;
    }
    
    .pricing-plan-wrapper:hover .hover-glow {
        opacity: 1;
    }

    .pricing-plan-wrapper:nth-child(1) { animation-delay: 0.2s; }
    .pricing-plan-wrapper:nth-child(2) { animation-delay: 0.3s; }
    .pricing-plan-wrapper:nth-child(3) { animation-delay: 0.4s; }
    .pricing-plan-wrapper:nth-child(4) { animation-delay: 0.5s; }
    .pricing-plan-wrapper:nth-child(5) { animation-delay: 0.6s; }

    .pricing-plan-wrapper:hover {
        transform: translateY(-4px);
    }

    .pricing-plan-border {
        transition: background-color var(--pricing-transition-standard);
    }
    
    .pricing-plan-wrapper:hover .pricing-plan-border {
        background-color: var(--theme-hover-border-color);
    }

    /* Remove these animation delays from pricing-plan since they're now on the wrapper */
    .pricing-plan:nth-child(1), 
    .pricing-plan:nth-child(2), 
    .pricing-plan:nth-child(3), 
    .pricing-plan:nth-child(4), 
    .pricing-plan:nth-child(5) {
        animation-delay: 0s;
    }

    .pricing-plan:hover {
        transform: none;
        border-color: transparent;
    }

    /* Blue theme plan */
    .plan-color-blue {
        --theme-primary: var(--pricing-blue-primary);
        --theme-on-primary: var(--pricing-blue-on-primary);
        --theme-primary-container: color-mix(in srgb, var(--theme-primary) 15%, var(--theme-background));
        --theme-on-primary-container: var(--pricing-blue-on-primary-container);
        --theme-surface: color-mix(in srgb, var(--theme-primary) 2%, var(--theme-background));
        --theme-surface-variant: color-mix(in srgb, var(--theme-primary) 5%, var(--theme-background));
        --theme-border-color: var(--theme-primary-container);
        --theme-hover-border-color: color-mix(in srgb, var(--pricing-blue-primary) 45%, var(--theme-background));
        --theme-button-hover-shadow: color-mix(in srgb, var(--theme-primary) 20%, var(--theme-background));
        --theme-background: var(--background);
    }

    .plan-color-blue .pricing-plan {
        background-color: var(--theme-surface);
        color: var(--theme-on-primary-container); /* Default text color for the card */
    }

    /* Green theme plan */
    .plan-color-green {
        --theme-primary: var(--pricing-green-primary);
        --theme-on-primary: var(--pricing-green-on-primary);
        --theme-primary-container: color-mix(in srgb, var(--theme-primary) 15%, var(--theme-background));
        --theme-on-primary-container: var(--pricing-green-on-primary-container);
        --theme-surface: color-mix(in srgb, var(--theme-primary) 2%, var(--theme-background));
        --theme-surface-variant: color-mix(in srgb, var(--theme-primary) 5%, var(--theme-background));
        --theme-border-color: var(--theme-primary-container);
        --theme-hover-border-color: color-mix(in srgb, var(--pricing-green-primary) 45%, var(--theme-background));
        --theme-button-hover-shadow: color-mix(in srgb, var(--theme-primary) 20%, var(--theme-background));
        --theme-background: var(--background);
    }

    .plan-color-green .pricing-plan {
        background-color: var(--theme-surface);
        color: var(--theme-on-primary-container);
    }

    /* Yellow theme plan */
    .plan-color-yellow {
        --theme-primary: var(--pricing-yellow-primary);
        --theme-on-primary: var(--pricing-yellow-on-primary);
        --theme-primary-container: color-mix(in srgb, var(--theme-primary) 15%, var(--theme-background));
        --theme-on-primary-container: var(--pricing-yellow-on-primary-container);
        --theme-surface: color-mix(in srgb, var(--theme-primary) 2%, var(--theme-background));
        --theme-surface-variant: color-mix(in srgb, var(--theme-primary) 5%, var(--theme-background));
        --theme-border-color: var(--theme-primary-container);
        --theme-hover-border-color: color-mix(in srgb, var(--pricing-yellow-primary) 45%, var(--theme-background));
        --theme-button-hover-shadow: color-mix(in srgb, var(--theme-primary) 20%, var(--theme-background));
        --theme-background: var(--background);
    }

    .plan-color-yellow .pricing-plan {
        background-color: var(--theme-surface);
        color: var(--theme-on-primary-container);
    }

    /* Purple theme plan */
    .plan-color-purple {
        --theme-primary: var(--pricing-purple-primary);
        --theme-on-primary: var(--pricing-purple-on-primary);
        --theme-primary-container: color-mix(in srgb, var(--theme-primary) 15%, var(--theme-background));
        --theme-on-primary-container: var(--pricing-purple-on-primary-container);
        --theme-surface: color-mix(in srgb, var(--theme-primary) 2%, var(--theme-background));
        --theme-surface-variant: color-mix(in srgb, var(--theme-primary) 5%, var(--theme-background));
        --theme-border-color: var(--theme-primary-container);
        --theme-hover-border-color: color-mix(in srgb, var(--pricing-purple-primary) 45%, var(--theme-background));
        --theme-button-hover-shadow: color-mix(in srgb, var(--theme-primary) 20%, var(--theme-background));
        --theme-background: var(--background);
    }

    .plan-color-purple .pricing-plan {
        background-color: var(--theme-surface);
        color: var(--theme-on-primary-container);
    }

    .plan-header {
        padding: 1.25rem;
        text-align: left;
        border-bottom: none;
        position: relative;
        min-height: 118px;
        background-color: var(--theme-primary-container);
        color: var(--theme-on-primary-container);
    }

    .plan-name {
        font-size: var(--font-md);
        font-weight: var(--font-weight-bold);
        margin-bottom: 0.25rem;
        color: var(--theme-primary); /* Use theme primary color */
    }

    .plan-price {
        font-size: var(--font-lg);
        font-weight: var(--font-weight-bold);
        color: var(--theme-on-primary-container); /* Use text color from header */
        margin-top: 0.25rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        position: relative;
    }

    .price-amount-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .price-detail {
        font-size: var(--font-xs);
        font-weight: normal;
        opacity: 0.7;
    }

    .annual-savings {
        display: inline-flex;
        background-color: var(--theme-primary);
        color: var(--theme-on-primary);
        font-size: var(--font-xs);
        font-weight: var(--font-weight-bold);
        padding: 0.2rem 0.5rem;
        border-radius: 50px;
        margin-left: 0.5rem;
        white-space: nowrap;
        align-items: center;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .annual-savings.hidden {
        opacity: 0;
        visibility: hidden;
    }

    .plan-features {
        padding: 1.25rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        background-color: var(--theme-surface-variant);
    }

    .plan-features p {
        font-weight: var(--font-weight-regular);
        font-size: var(--font-xs);
        margin-bottom: 0.75rem;
        color: var(--theme-on-primary-container); /* Use text color from card */
        opacity: 0.7;
        text-align: left;
        padding-bottom: 0.5rem;
    }

    .plan-features ul {
        list-style: none;
        padding: 0;
        margin: 0;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .plan-features li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 0;
        color: var(--text);
        position: relative;
    }

    .feature-dot {
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        margin-right: 0.5rem;
        margin-top: 0.45rem;
        flex-shrink: 0;
        background-color: var(--theme-primary);
    }

    .feature-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-grow: 1;
        width: 100%;
    }

    .feature-value+.feature-text {
        padding-top: 0.5rem;
    }

    .feature-text {
        line-height: 1.25;
        font-size: var(--font-xs);
        flex-grow: 1;
        text-align: left;
    }

    li.highlight .feature-text {
        font-weight: var(--font-weight-bold);
        color: var(--theme-primary);
        list-style-type: none;
    }

    li.highlight .feature-dot {
        display: none;
    }

    .feature-value {
        padding: 0.12rem 0.35rem;
        border-radius: 2rem;
        font-size: var(--font-xs);
        font-weight: var(--font-weight-bold);
        background-color: var(--theme-primary);
        color: var(--theme-on-primary);
        margin-left: 0.5rem;
        flex-shrink: 0;
        white-space: nowrap;
        letter-spacing: 0.01rem;
    }

    .plan-action {
        padding: 1.25rem;
        text-align: center;
        margin-top: auto;
        background-color: var(--theme-surface);
    }

    .plan-button {
        display: block;
        width: 100%;
        padding: 0.75rem 1rem;
        border: none;
        border-radius: 100px;
        font-weight: var(--font-weight-bold);
        font-size: var(--font-sm);
        cursor: pointer;
        text-decoration: none;
        transition: all 0.25s ease;
        background-color: var(--theme-primary);
        color: var(--theme-on-primary);
        position: relative;
    }

    .plan-button:hover {
        opacity: 0.9;
        box-shadow: 0 0 0 6px var(--theme-button-hover-shadow);
    }

    .plan-button:active {
        opacity: 1;
        box-shadow: 0 0 0 4px var(--theme-button-hover-shadow);
    }

    .plan-enterprise .plan-features ul {
        margin-top: 1rem;
    }

    .plan-pay-as-you-go .plan-features,
    .plan-lite .plan-features {
        padding-bottom: 4rem;
    }

    .pricing-toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 2rem;
        background-color: var(--ncs-container-weak);
        padding: 4px;
        border-radius: 100px;
        width: fit-content;
        position: relative;
    }

    .pricing-toggle.pill-tabs {
        border: none;
    }

    .pricing-toggle.pill-tabs .pill-tab::after {
        display: none;
    }

    .pricing-toggle.pill-tabs .pill-tab {
        padding: 0.6rem 1.5rem;
        font-size: var(--font-sm);
        font-weight: var(--font-weight-regular);
        border: none;
        background: transparent;
        cursor: pointer;
        color: var(--text);
        opacity: 0.7;
        transition: all var(--tab-transition);
        border-radius: 100px;
        min-width: unset;
    }

    .pricing-toggle.pill-tabs .pill-tab[data-active] {
        background-color: var(--background);
        color: var(--text);
        opacity: 1;
        font-weight: var(--font-weight-bold);
    }

    .pricing-toggle .savings-highlight {
        color: var(--theme-primary);
        font-weight: var(--font-weight-bold);
    }

    .pricing-toggle.pill-tabs .pill-tab:hover:not([data-active]) {
        opacity: 0.9;
        background-color: color-mix(in srgb, var(--text) 3%, transparent);
    }

    .feature-divider {
        position: relative;
        padding: 0.6rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .feature-divider::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 1px;
        background-color: color-mix(in srgb, var(--text) 15%, transparent);
    }

    .divider-text {
        position: relative;
        padding: 0 0.5rem;
        font-size: var(--font-xs);
        color: var(--text);
        background-color: var(--theme-surface-variant);
    }

    .feature-include-plan {
        margin-top: 0.5rem !important;
    }

    .theme-quaternary {
        background-color: var(--pricing-purple-primary) !important;
        color: var(--on-pricing-purple) !important;
    }

    @media (max-width: 991px) {
        padding: 0 1rem;

        .pricing-tabs {
            margin: 20px auto;
        }

        .pricing-title {
            margin-bottom: 1.5rem;
        }

        .pricing-plans-grid {
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1rem;
        }

        .pricing-plan:nth-child(1) { animation-delay: 0.15s; }
        .pricing-plan:nth-child(2) { animation-delay: 0.25s; }
        .pricing-plan:nth-child(3) { animation-delay: 0.35s; }
        .pricing-plan:nth-child(4) { animation-delay: 0.45s; }
        .pricing-plan:nth-child(5) { animation-delay: 0.55s; }
    }

    @media (max-width: 768px) {

        .pricing-toggle {
            width: 100%;
            max-width: 300px;
        }

        .pricing-toggle.pill-tabs .pill-tab {
            flex: 1;
            text-align: center;
            padding: 0.6rem 0.75rem;
        }

        .annual-savings {
            top: 0.5rem;
            right: 0.5rem;
            padding: 0.15rem 0.4rem;
        }

        .price-amount-row {
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .price-amount-row .annual-savings {
            margin-left: 0;
        }
    }

    @media (max-width: 480px) {
        .pricing-plans-grid {
            grid-template-columns: 1fr;
        }
        .plan-name {
            font-size: 1rem;
        }

        .plan-price {
            font-size: 1.35rem;
        }
    }

    @media (min-width: 992px) {
        .pricing-plans-grid {
            grid-template-columns: repeat(5, 1fr);
            gap: 0.75rem;
        }
    }
}

.dark-mode {
    .pricing-tabs-container {
        /* Define dark theme variables */
        .plan-color-blue {
            --theme-primary: var(--pricing-blue-primary-dark);
            --theme-on-primary: var(--on-pricing-blue-dark);
            --theme-primary-container: color-mix(in srgb, var(--theme-primary) 15%, var(--theme-background));
            --theme-on-primary-container: var(--pricing-blue-on-primary-container-dark);
            --theme-surface: color-mix(in srgb, var(--theme-primary) 5%, var(--theme-background));
            --theme-surface-variant: color-mix(in srgb, var(--theme-primary) 8%, var(--theme-background));
            --theme-border-color: var(--theme-primary-container);
            --theme-hover-border-color: color-mix(in srgb, var(--pricing-blue-primary-dark) 45%, var(--theme-background));
            --theme-button-hover-shadow: color-mix(in srgb, var(--theme-primary) 20%, var(--theme-background));
            --theme-background: var(--maestra-black, #071a20);
        }
        
        .plan-color-blue .pricing-plan {
            color: var(--theme-on-primary-container);
        }
        
        .plan-color-green {
            --theme-primary: var(--pricing-green-primary-dark);
            --theme-on-primary: var(--on-pricing-green-dark);
            --theme-primary-container: color-mix(in srgb, var(--theme-primary) 15%, var(--theme-background));
            --theme-on-primary-container: var(--pricing-green-on-primary-container-dark);
            --theme-surface: color-mix(in srgb, var(--theme-primary) 5%, var(--theme-background));
            --theme-surface-variant: color-mix(in srgb, var(--theme-primary) 8%, var(--theme-background));
            --theme-border-color: var(--theme-primary-container);
            --theme-hover-border-color: color-mix(in srgb, var(--pricing-green-primary-dark) 45%, var(--theme-background));
            --theme-button-hover-shadow: color-mix(in srgb, var(--theme-primary) 20%, var(--theme-background));
            --theme-background: var(--maestra-black, #071a20);
        }

        .plan-color-green .pricing-plan {
            color: var(--theme-on-primary-container);
        }
        
        .plan-color-yellow {
            --theme-primary: var(--pricing-yellow-primary-dark);
            --theme-on-primary: var(--on-pricing-yellow-dark);
            --theme-primary-container: color-mix(in srgb, var(--theme-primary) 15%, var(--theme-background));
            --theme-on-primary-container: var(--pricing-yellow-on-primary-container-dark);
            --theme-surface: color-mix(in srgb, var(--theme-primary) 5%, var(--theme-background));
            --theme-surface-variant: color-mix(in srgb, var(--theme-primary) 8%, var(--theme-background));
            --theme-border-color: var(--theme-primary-container);
            --theme-hover-border-color: color-mix(in srgb, var(--pricing-yellow-primary-dark) 45%, var(--theme-background));
            --theme-button-hover-shadow: color-mix(in srgb, var(--theme-primary) 20%, var(--theme-background));
            --theme-background: var(--maestra-black, #071a20);
        }

        .plan-color-yellow .pricing-plan {
            color: var(--theme-on-primary-container);
        }
        
        .plan-color-purple {
            --theme-primary: var(--pricing-purple-primary-dark);
            --theme-on-primary: var(--on-pricing-purple-dark);
            --theme-primary-container: color-mix(in srgb, var(--theme-primary) 15%, var(--theme-background));
            --theme-on-primary-container: var(--pricing-purple-on-primary-container-dark);
            --theme-surface: color-mix(in srgb, var(--theme-primary) 5%, var(--theme-background));
            --theme-surface-variant: color-mix(in srgb, var(--theme-primary) 8%, var(--theme-background));
            --theme-border-color: var(--theme-primary-container);
            --theme-hover-border-color: color-mix(in srgb, var(--pricing-purple-primary-dark) 45%, var(--theme-background));
            --theme-button-hover-shadow: color-mix(in srgb, var(--theme-primary) 20%, var(--theme-background));
            --theme-background: var(--maestra-black, #071a20);
        }

        .plan-color-purple .pricing-plan {
            color: var(--theme-on-primary-container);
        }
        
        .plan-color-blue .plan-header {
            background-color: color-mix(in srgb, var(--pricing-blue-dark) 15%, var(--maestra-black, #071a20));
        }
        
        .plan-color-green .plan-header {
            background-color: color-mix(in srgb, var(--pricing-green-dark) 15%, var(--maestra-black, #071a20));
        }
        
        .plan-color-yellow .plan-header {
            background-color: color-mix(in srgb, var(--pricing-yellow-dark) 15%, var(--maestra-black, #071a20));
        }
        
        .plan-color-purple .plan-header {
            background-color: color-mix(in srgb, var(--pricing-purple-dark) 15%, var(--maestra-black, #071a20));
        }
        
        .plan-color-blue .plan-features {
            background-color: color-mix(in srgb, var(--pricing-blue-dark) 8%, var(--maestra-black, #071a20));
        }
        
        .plan-color-green .plan-features {
            background-color: color-mix(in srgb, var(--pricing-green-dark) 8%, var(--maestra-black, #071a20));
        }
        
        .plan-color-yellow .plan-features {
            background-color: color-mix(in srgb, var(--pricing-yellow-dark) 8%, var(--maestra-black, #071a20));
        }
        
        .plan-color-purple .plan-features {
            background-color: color-mix(in srgb, var(--pricing-purple-dark) 8%, var(--maestra-black, #071a20));
        }
        
        .plan-color-blue .plan-action {
            background-color: color-mix(in srgb, var(--pricing-blue-dark) 5%, var(--maestra-black, #071a20));
        }
        
        .plan-color-green .plan-action {
            background-color: color-mix(in srgb, var(--pricing-green-dark) 5%, var(--maestra-black, #071a20));
        }
        
        .plan-color-yellow .plan-action {
            background-color: color-mix(in srgb, var(--pricing-yellow-dark) 5%, var(--maestra-black, #071a20));
        }
        
        .plan-color-purple .plan-action {
            background-color: color-mix(in srgb, var(--pricing-purple-dark) 5%, var(--maestra-black, #071a20));
        }

        .plan-header::after {
            background-color: var(--ncs-container-strong);
        }

        li.last-with-value::after {
            background: color-mix(in srgb, var(--text) 15%, transparent);
        }

        .highlight-transcription {
            color: var(--pricing-blue-dark);
        }

        .highlight-subtitle {
            color: var(--pricing-green-dark);
        }

        .highlight-voiceover {
            color: var(--pricing-yellow-dark);
        }

        .highlight-real-time {
            color: var(--pricing-purple-dark);
        }

        .plan-color-blue .plan-name {
            --plan-title-color: var(--pricing-blue-dark);
        }

        .plan-color-green .plan-name {
            --plan-title-color: var(--pricing-green-dark);
        }

        .plan-color-yellow .plan-name {
            --plan-title-color: var(--pricing-yellow-dark);
        }

        .plan-color-purple .plan-name {
            --plan-title-color: var(--pricing-purple-dark);
        }

        .plan-color-blue .feature-dot {
            --feature-color: var(--pricing-blue-dark);
        }

        .plan-color-green .feature-dot {
            --feature-color: var(--pricing-green-dark);
        }

        .plan-color-yellow .feature-dot {
            --feature-color: var(--pricing-yellow-dark);
        }

        .plan-color-purple .feature-dot {
            --feature-color: var(--pricing-purple-dark);
        }

        .plan-color-blue li.highlight {
            --highlight-color: var(--pricing-blue-dark);
        }

        .plan-color-green li.highlight {
            --highlight-color: var(--pricing-green-dark);
        }

        .plan-color-yellow li.highlight {
            --highlight-color: var(--pricing-yellow-dark);
        }

        .plan-color-purple li.highlight {
            --highlight-color: var(--pricing-purple-dark);
        }

        .pricing-toggle.pill-tabs .pill-tab[data-active] {
            background-color: var(--background);
            color: var(--text);
        }

        .plan-button:hover {
            opacity: 0.9;
            box-shadow: 0 0 0 6px var(--theme-button-hover-shadow);
        }
        
        .plan-button:active {
            opacity: 1;
            box-shadow: 0 0 0 4px var(--theme-button-hover-shadow);
        }
        
        .value-color-blue {
            --value-bg: var(--pricing-blue-dark);
            color: var(--on-pricing-blue-dark);
        }

        .value-color-green {
            --value-bg: var(--pricing-green-dark);
            color: var(--on-pricing-green-dark);
        }
        
        .value-color-yellow {
            --value-bg: var(--pricing-yellow-dark);
            color: var(--on-pricing-yellow-dark);
        }
        
        .value-color-purple {
            --value-bg: var(--pricing-purple-dark);
            color: var(--on-pricing-purple-dark);
        }

        .theme-quaternary {
            background-color: var(--pricing-purple-dark) !important;
            color: var(--on-pricing-purple-dark) !important;
        }
        
        @media (max-width: 991px) {
            .pricing-tab {
                background-color: transparent !important;
                border-color: transparent !important;
                box-shadow: none !important;
            }

            .pricing-tab[data-active] {
                color: var(--theme-primary);
            }
        }

        .pricing-plan-border {
            background-color: var(--theme-border-color);
        }
        
        .pricing-plan-wrapper:hover .pricing-plan-border {
            background-color: var(--theme-hover-border-color);
        }

        .cursor-glow {
            background: radial-gradient(circle, var(--pricing-blue-dark) 0%, rgba(0,0,0,0) 70%);
            mix-blend-mode: lighten;
            filter: blur(30px);
        }

        .hover-glow {
            background: radial-gradient(circle, rgba(255, 255, 255, 30) 0%, rgba(255, 255, 255, 0) 70%);
            mix-blend-mode: overlay;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .pricing-plans,
    .pricing-plans[data-active],
    .pricing-title,
    .pricing-plans-grid,
    .pricing-plan,
    .pricing-tab,
    .pricing-tab:hover,
    .pricing-tab[data-active],
    .pricing-tab::after,
    .pricing-tab:hover::after,
    .pricing-tab[data-active]::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .cursor-glow {
        display: none !important;
    }

    .hover-glow {
        display: none !important;
    }
}