/* Custom brand colors and base styles for Tailwind */
        .from-booster-primary { --tw-gradient-from: #0073AA; --tw-gradient-to: rgb(0 115 170 / 0); }
        .to-booster-dark { --tw-gradient-to: #00507C; }
        .bg-booster-primary { background-color: #0073AA; }
        .bg-booster-dark { background-color: #00507C; }
        .text-booster-dark { color: #00507C; }
        .bg-booster-accent { background-color: #FF5722; }
        .text-booster-accent { color: #FF5722; }
        .outline-booster-accent:focus-visible { outline-color: #FF5722; }
        .bg-booster-accent-dark:hover { background-color: #E64A19; }
        .bg-booster-accent:focus { color: #fff; }
        .border-booster-primary { border-color: #0073AA; }
        .text-booster-primary { color: #0073AA; }
        .bg-pale-blue { background-color: #F4F9FF; }
        .text-shadow-custom { text-shadow: 1px 1px 3px rgba(0,0,0,0.1); }
        body, .inter-font-sans { font-family: 'Inter', sans-serif; }
        .accordion-arrow { transition: transform 0.3s ease; }
        details[open] .accordion-arrow { transform: rotate(180deg); }
        
        /* Modal styles */
        dialog {
            max-width: 52rem;
            border-radius: 0.75rem;
            border: none;
            padding: 0;
            box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
        }
        dialog::backdrop {
            background-color: rgba(17, 24, 39, 0.75);
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
        }

        /* Pulse animation for the timeline */
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.5);
                opacity: 0.7;
            }
        }
        .animate-pulse-node {
            animation: pulse 2.5s infinite cubic-bezier(0.4, 0, 0.6, 1);
        }
        
        /* Custom utility classes - FIXED */
        .metric-pill {
            display: inline-block;
            padding: 0.125rem 0.5rem;
            font-size: 10px;
            font-weight: 500;
            border-radius: 0.25rem;
            background-color: #ecfccb; /* Tailwind lime-100 */
            color: #3f6212; /* Tailwind lime-800 */
        }
        .pill-pending {
            display: inline-block;
            padding: 0.125rem 0.5rem;
            font-size: 10px;
            font-weight: 500;
            border-radius: 0.25rem;
            background-color: #fff7ed; /* Tailwind orange-100 */
            color: #c2410c; /* Tailwind orange-700 */
        }
        .badge-slate { @apply shrink-0 rounded-full px-2 py-0.5 text-xs bg-slate-100 text-slate-600 font-medium; }
        .badge-orange { @apply shrink-0 rounded-full px-2 py-0.5 text-xs bg-orange-100 text-orange-600 font-medium; }

        /* Focus state for cards */
        .elite-card:focus-visible { outline: 2px solid #FF5722; outline-offset: 2px; }
        .pain-gain-card:focus-visible { outline: 2px solid #FF5722; outline-offset: 2px; }

        /* Accordion animation */
        #lite-roadmap {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.5s ease-in-out;
        }
        #lite-roadmap.open {
            grid-template-rows: 1fr;
        }
        #lite-roadmap > div {
            overflow: hidden;
        }

        /* Nudge pill to self-align center on narrow widths */
        @media (max-width: 380px){
          .metric-pill, .pill-pending { margin-left: auto; margin-right: auto; }
        }

        /* Pain-gain card specific styling */
        .pain-gain-card {
            min-width: 200px;
        }
        @media (min-width: 640px){ /* md breakpoint */
            .pain-gain-card { flex:1; }
        }

        /* New styles for gain cards and row highlighting */
        .gain-card {
            background-color: #fff;
            border: 1px solid #e2e8f0;
            padding: 1.5rem;
            border-radius: 0.25rem;
            cursor: pointer;
            transition-property: box-shadow;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms;
        }
        .gain-card:hover {
            --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }
        .icon-circle {
            display: inline-flex;
            height: 1.75rem;
            width: 1.75rem;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
        }
        .gain-card.open {
            --tw-ring-color: #00A0D2;
            --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
            --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
            box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        }
        .gain-card.open .gain-extra {
            display: block;
            margin-top: 0.75rem;
        }
        .highlight-row { 
            background: rgba(0,160,210,.10); 
        }
        section[id] {
            scroll-margin-top: 80px; /* avoids header overlap */
        }

/* july 25 2025 */
.replace-dozen .container:after, .replace-dozen .container:before { display: none; }
.replace-dozen .container h1 { font-weight: 800 !important;margin-top: 0px;max-width: 705px; }
.replace-dozen a { font-weight: 400; }
.replace-dozen a:focus { color: #fff; }
.replace-dozen .container { max-width: 100% !important; }
.replace-dozen li.flex.items-center.justify-center.md\:justify-start { color: #4b5563; }

.fresh-light h2 { margin-top: 0px; }
.fresh-light .lite-card p.text-sm { margin-bottom: 0px; }
.fresh-light .lite-card h3 { color: #1f2937; }
.fresh-light { z-index: 1; position: relative; }
.fresh-light #lite-roadmap li span { color: #1f2937; line-height: 1; }
.fresh-light #lite-roadmap li h4 { margin-bottom: 0px; margin-top: 0px;font-size: 16px;color: #1f2937;font-weight: 500 !important; }
.fresh-light #lite-roadmap li .metric-pill { color: #3b6120; padding: 4px 8px; }
.fresh-light #lite-roadmap li .metric-pill { color: #3b6120; padding: 4px 8px; }
.fresh-light #lite-roadmap li .pill-pending { color: #c04106 !important; padding: 5px 8px; }

#social-proof-bar .relative.w-4.h-4 { position: relative; }
#social-proof-bar .relative.w-4.h-4 svg.absolute.top-0.left-0.w-4.h-4.text-gray-300 { position: absolute; top: 0; left: 0; color: #d1d5db; }
#social-proof-bar .relative.w-4.h-4 svg.absolute.top-0.left-0.w-4.h-4.text-booster-accent { position: absolute; left: 0; top: 0px; clip-path: inset(0 40% 0 0); }

#pain-gain #pain-gain-heading { margin-top: 0px; margin-bottom: 0px; }

#elite-gains h2 { margin-top: 0px; }
#elite-gains #elite-gains-container h3 span { font-size: 16px; }
#elite-gains #elite-gains-container h3 { margin-top: 0px; margin-bottom: 0px; }
#elite-gains #elite-gains-container .text-sm.text-slate-300.flex-grow { margin: 0px; }
#elite-gains #elite-gains-container .text-booster-accent { font-weight: 500; }
#elite-gains #elite-gains-container .text-booster-accent:hover { text-decoration: underline !important; }
#elite-gains #elite-gains-container .text-booster-accent:focus { color: #FF5722; }
#elite-gains .text-center.text-slate-300.mt-10 { margin-bottom: 0px; }
#elite-gains a[data-cta="see-plans"] { font-weight: 400; }
#elite-gains a:hover { color: #ffffff !important; }
#elite-gains a:focus { color: #fff; }

#FeatureMatrix h2 { margin-top: 0px; margin-bottom: 0px; }
#FeatureMatrix .text-center.mb-12 p { margin-bottom: 0px; }
#FeatureMatrix #feature-list summary h4 { margin-top: 0px; margin-bottom: 0px;font-weight: 500 !important; }
.page-template-free-vs-elite #FeatureMatrix .mt-4.overflow-x-auto { overflow: unset; }
#FeatureMatrix .free { color: #708090; }
#FeatureMatrix .free span { background: #e1e8ef; padding: 2px 8px; border-radius: 10px; border: unset; color: #787878; }
.page-template-free-vs-elite #FeatureMatrix .mt-4.overflow-x-auto { overflow-y: auto !important; max-height: 400px; }
#FeatureMatrix tbody tr:nth-child(even) { background-color: #f9fafb !important; }

#feature-list thead { position: sticky; top: 0;z-index: 1; }

#elite-testimonials h2 { margin-top: 0px; }
#elite-testimonials figure blockquote { padding: 0px 0px; margin: 0px 0px; border-left: 0px; }
#elite-testimonials { margin-top: 0;padding-top: 64px;padding-top: 0px; }

#faq #faq-container { margin-top: 32px; }

.page-template-free-vs-elite .text-booster-primary:hover { text-decoration: underline !important;color: #0073AA !important; }
.page-template-free-vs-elite .text-booster-primary:focus { outline: unset; box-shadow: unset; }

.page-template-free-vs-elite #pricing-section { background-color: #f8fafc; }
.page-template-free-vs-elite #pricing-section h2 { margin-top: 0px; margin-bottom: 0px; }
.page-template-free-vs-elite #pricing-section p { margin-bottom: 0px; }
.page-template-free-vs-elite #pricing-section li span { color: #475569; }
.page-template-free-vs-elite #pricing-section p.text-center.mt-8.text-sm a { font-weight: 400; }
.page-template-free-vs-elite #pricing-section p.text-center.mt-8.text-sm a:focus { font-family: inherit !important; }
.page-template-free-vs-elite #pricing-section .wrapper { position: relative; }
.page-template-free-vs-elite #pricing-section .wrapper .inner-wrapper { position: absolute; top: 0; right: 0; }
.page-template-free-vs-elite #pricing-section .wrapper .inner-wrapper .main-content { right: -48px; position: absolute; top: 28px; width: 170px; }
.page-template-free-vs-elite .elite-th .feature-matrix-star-icon { display: none; }
.page-template-free-vs-elite .tooltip-content { min-width: 245px;font-size: 12px; }

#FeatureMatrix .bottom-wrapper a:hover { color: #045089; }
#FeatureMatrix .bottom-wrapper a:focus { font-family: inherit !important; }

#FeatureMatrix .bottom-wrapper { position: relative !important; width: 100% !important; }

.page-template-free-vs-elite .get-bosster:hover { color: #0073AA !important; text-decoration: underline !important; }
.page-template-free-vs-elite .upgrad-elite { color: #FF5722; }
.page-template-free-vs-elite .upgrad-elite:hover { color: #FF5722 !important; text-decoration: underline !important; }

.page-template-free-vs-elite .orange-link:hover { color: #FF5722 !important; text-decoration: underline !important; }

@media (min-width: 640px) {
    .replace-dozen .container { max-width: 640px !important; }
}

@media (min-width: 768px) {
    .replace-dozen .container { max-width: 768px !important; }
}

@media (min-width: 1024px) {
    .replace-dozen .container { max-width: 1024px !important; }
}


@media (min-width: 1280px) {
    .replace-dozen .container { max-width: 1280px !important; }
}

@media (min-width: 1536px) {
    .replace-dozen .container { width: 100%; max-width: 1536px !important; }
}


@media (max-width:991px) {
    .replace-dozen .container h1 { font-size: 36px !important; }
    .pain-gain-card { flex: unset; width: 50%; max-width: 50%;min-width: 50%; }

    .replace-dozen .flex-1.text-left.md\:text-left { text-align: center; }
    .replace-dozen li.flex.items-center.justify-center.md\:justify-start { justify-content: center; }
    div#social-proof-bar { flex-direction: column; }

    #pain-gain .flex.md\:grid.md\:grid-cols-3.gap-4.overflow-x-auto.scroll-snap-x.pb-4 { display: flex; }

    #elite-gains .grid.md\:grid-cols-3.gap-6.text-left { grid-template-columns: 1fr; }

    .page-template-free-vs-elite #FeatureMatrix .mt-4.overflow-x-auto { overflow-x: auto; }
    #save-big-section .lg\:col-span-1.text-center svg { transform: rotate(90deg); }
}

@media (max-width:767px) {
    .pain-gain-card { width: 100%; max-width: 100%;min-width: 100%; }

    .page-template-free-vs-elite .fresh-light .max-w-7xl.mx-auto.px-4.sm\:px-6.lg\:px-8 { padding-left: 16px;padding-right: 16px; }
    .page-template-free-vs-elite #pain-gain .max-w-7xl.mx-auto.px-4.sm\:px-6.lg\:px-8 { padding-left: 16px;padding-right: 16px; }
    .page-template-free-vs-elite #elite-gains .max-w-7xl.mx-auto.px-4.sm\:px-6.lg\:px-8.text-center { padding-left: 16px;padding-right: 16px; }
    .page-template-free-vs-elite #FeatureMatrix .max-w-7xl.mx-auto.px-4.sm\:px-6.lg\:px-8 { padding-left: 16px;padding-right: 16px; }
    .page-template-free-vs-elite #elite-testimonials .max-w-7xl.mx-auto.px-4.sm\:px-6.lg\:px-8 { padding-left: 16px;padding-right: 16px; }
    .page-template-free-vs-elite #faq .max-w-4xl.mx-auto.px-4.sm\:px-6.lg\:px-8 { padding-left: 16px;padding-right: 16px; }

    #elite-testimonials .testimonial-card.bg-white.shadow-sm.border.border-slate-200.rounded-xl.p-6.flex.flex-col.gap-4.snap-start { min-width: 80% !important; }
    .page-template-free-vs-elite #FeatureMatrix .table-wrapper tr td:nth-child(1) { padding: 12px 0px 0px; }
.page-template-free-vs-elite #FeatureMatrix .table-wrapper tr td:nth-child(3)::before { content: 'Elite: '; }

}

@media (max-width: 375px) {
    .replace-dozen .container h1 { font-size: 30px !important; }
}