html {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #1e3a8a 0%, #3032a3 50%, #251c87 100%);
            overflow-x: hidden;
            color: #333;
            max-height: 100vh;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            overflow-y: hidden;
        }

        :root {
            --team-color: #dc2626; 
            --validation-color: #059669; 
            --product-color: #7c3aed; 
            --marketing-color: #ea580c; 
            --business-color: #0369a1;
            --revenue-color: #7b6211;
            --rev-illus-color: #A6810B;
            --partnership-illus: #DFEAFF;
            --light-yellow: #FFFADF;
            --challenge-color: #1f2937;
            --text-color: #333; 
            --background-color: #f0f0f0;
        }

        a {
            text-decoration: none;
            color: #fff;
        }

        a:hover {
            color: #dcefff;
        }

        .storyset-link {
            color: #1d4ed8;
            font-size: 9px;
            margin-bottom: 4px;
            position: absolute;
            right: 28px;
            top: 104px;
            text-decoration: underline;
        }

        .storyset-link:hover {
            color: #1d59fd;
        }

        .simulator-container {
            max-width: 460px;
            margin: 6px auto;
            height: 100vh;
            overflow-y: auto;
            scroll-behavior: smooth;
            padding: 60px 0;
            position: relative;
            scrollbar-width: none; 
            -ms-overflow-style: none; 
        }

        .simulator-container::-webkit-scrollbar {
            display: none; 
        }

        .header {
            position: fixed;
            top: 6px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            width: calc(100% - 24px);
            max-width: 460px;
            padding: 8px 10px 8px 6px;
            z-index: 100;
            border-bottom: 1px solid rgba(0,0,0,0.1);
            border-radius: 16px 16px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }

        .header h1 {
            text-align: center;
            font-size: 22px;
            color: #1e3a8a;
            font-weight: 700;
            margin: 4px 0 12px 0;
        }

        .business-stats {
            display: grid;
            grid-template-columns: .4fr 1fr 1fr 1fr 1fr;
            gap: 6px;
            font-size: 11px;
            text-align: center;
            align-items: center;
        }

        .stat-item {
            background: rgba(30, 58, 138, 0.1);
            padding: 4px 4px 6px 4px;
            border-radius: 8px;
            border: 1px solid rgba(30, 58, 138, 0.1);
        }

        .stat-label {
            display: block;
            color: #64748b;
            font-weight: 500;
        }

        .stat-value {
            display: block;
            color: #1e3a8a;
            font-weight: 600;
            font-size: 16px;
            margin-top: 2px;
        }

        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            max-width: 460px;
            width: calc(100% - 24px);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2px 12px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 16px 16px 0 0;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
            border-top: 1px solid rgba(0,0,0,0.1);
        }

        .selections-container {
            position: absolute;
            bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        #selectionsBtn {
            max-width: 138px;
            height: 38px;
            text-align: center;
            background-color: #e2e8f0;
            border: 1px solid #d5dee9;
            display: flex;
            justify-content: center;
            align-items: center;
        }

         #selectionsBtn:hover {
            background-color: #d5dee9;
            border: 1px solid #d5dee9;
        }

        /* instruction card ////////////////// */
        .card-header.instructions {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        }

        .instructions .card-content {
            border-color: #3b82f6;
        }

        .selection-item.instructions {
            border-color: #3b82f6;
        }

        /* CARDS  */
        .business-card {
            background: white;
            margin: 22px 18px;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            overflow: hidden;
            transform: translateY(20px);
            opacity: 0;
            animation: slideIn 0.4s ease-out forwards;
            position: relative;
            transition: all 0.2s ease;
        }

        @media (max-width: 767px) {
            .business-card {
                margin: 22px 12px;
            }
            
        }

        @keyframes slideIn {
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .card-header {
            color: white;
            padding: 16px;
            position: relative;
        }

        .card-header.validation {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
        }

        .card-header.team {
            background: linear-gradient(135deg, var(--team-color) 0%, #b91c1c 100%);
        }

        .card-header.product {
            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
        }

        .card-header.marketing {
            background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
        }

        .card-header.business {
            background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
        }

        .card-type-wrapper {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-type {
            background: rgba(255,255,255,0.2);
            padding: 5px 8px 5px 10px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .card-type:hover {
            background: rgba(255,255,255,0.3);
            cursor: pointer;
        }

        .card-header h1 {
            font-size: 26px;
            letter-spacing: .02em;
            margin: 6px 0 0 0;
            line-height: 1.3;
        }

        .card-header h2 {
            font-size: 21px;
            letter-spacing: .02em;
            margin: 6px 0 0 0;
            line-height: 1.3;
        }

        .card-header p {
            font-size: 13px;
            opacity: 0.9;
            margin: 0;
        }

        .card-body {
            padding: 0 20px 16px 20px;
        }

        .card-img {
            max-height: 286px;
        }

        .card-content {
            background: #f8fafc;
            border-left: 4px solid;
            padding: 12px 12px 16px 12px;
            margin-bottom: 14px;
            border-radius: 0 8px 8px 0;
        }

        .validation .card-content {
            border-color: #059669;
        }

        .team .card-content {
            border-color: var(--team-color);
        }

        .product .card-content {
            border-color: #7c3aed;
        }

        .marketing .card-content {
            border-color: #ea580c;
        }

        .business .card-content {
            border-color: #0369a1;
        }

        .content-desc {
            font-size: 14px;
            color: #445267;
            line-height: 1.4;
        }

        .impact-metrics {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 8px;
            margin: 0 0 10px 0;
            font-size: 12px;
        }

        .metric {
            text-align: center;
            padding: 6px 4px 8px 4px;
            background: #f7fafc;
            border-radius: 8px;
            border: 1px solid #d5dee9;
        }

        .metric-value {
            display: block;
            font-weight: 700;
            color: #1e3a8a;
            font-size: 1.06rem;
        }

        .metric-label {
            display: block;
            color: #2f3d50;
            margin-top: 0px;
            margin-bottom: 4px !important;
            font-size: 12px;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: 4px;
        }

        .btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            margin: 6px 0;
        }

        .btn-select {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
            color: white;
        }

        .btn-select:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
        }

        .btn-skip {
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #d5dee9;
        }

        .btn-skip:hover {
            background: #e2e8f0;
        }

        .btn-learn {
            background: #ddd6fe;
            color: #5b21b6;
            font-size: 12px;
            padding: 8px 12px;
            margin-top: 10px;
            width: auto;
            display: inline-block;
        }

        .progress-indicator {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(10px);
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 13px;
            color: #1e3a8a;
            font-weight: 600;
            z-index: 100;
        }

        .simulator-container::-webkit-scrollbar {
            display: none;
        }

        .loading-more {
            text-align: center;
            padding: 20px;
            color: white;
            font-weight: 600;
            background-color: var(--challenge-color);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }

        .selected-card {
                        transform: translateX(100%);
            transition: transform 0.4s ease;
        }

        @keyframes cardSelect {
            0% { 
                transform: scale(1);
                background: white;
            }
            30% { 
                transform: scale(1.05);
                background: #f0f9ff;
                box-shadow: 0 12px 40px rgba(59, 130, 246, 0.3);
            }
            100% { 
                transform: scale(0.95);
                background: #dbeafe;
                opacity: 0.8;
            }
        }

        .skipped-card {
                        transform: translateX(100%);
            transition: transform 0.4s ease;
        }

        @keyframes cardSkip {
            0% { 
                transform: scale(1) rotate(0deg);
                opacity: 1;
            }
            50% { 
                transform: scale(0.9) rotate(-2deg);
                opacity: 0.6;
            }
            100% { 
                transform: scale(0.8) rotate(-5deg);
                opacity: 0.3;
            }
        }

        .slide-out-right {
            transform: translateX(100%);
            transition: transform 0.4s ease;
        }

        .slide-out-left {
            transform: translateX(-100%);
            transition: transform 0.4s ease;
        }

        .company-name {
            background: rgba(30, 58, 138, 0.9);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            z-index: 99;
            width: auto;
            /* margin: 0 0 12px 0; */
        }

/* SVG IMAGES  */
    /* Storyset SVG Integration Styles */
        /* SVG IMAGES  */
        /* New SVG section in the white card body */
        .card-svg-section {
            padding: 0 26px 0 26px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .svg-container {
            width: 100%;
            /* max-height: 190px; */
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            border-radius: 8px;
        }

        .svg-container svg {
            width: 100%;
            height: 100%;
            /* max-width: 120px;
            max-height: 90px; */
        }

        /* Ensure Storyset animations work */
        .svg-container svg.animated {
            animation-play-state: running;
        }

        /* Loading placeholder for SVGs */
        .svg-placeholder {
            width: 120px;
            height: 90px;
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 2s infinite;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 11px;
            text-transform: uppercase;
            font-weight: 600;
        }

        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        /* Pause animations on card selection/skip */
        .selected-card .svg-container svg.animated,
        .skipped-card .svg-container svg.animated {
            animation-play-state: paused;
            opacity: 0.7;
        }

        /* Performance optimization */
        .svg-container {
            will-change: transform;
            transform: translateZ(0); /* Force hardware acceleration */
        }


    /* Consequence Card Styles */
        .consequence-card {
            position: relative;
        }

        /* Positive outcomes - white header */
        .consequence-card.positive {
            border-color: #10b981;
            box-shadow: 0 8px 32px rgba(16, 185, 129, 0.2);
        }

        .card-header.positive {
            background: linear-gradient(135deg, #ffffff 0%, #fffffe 100%);
            color: #1e3a8a;
        }

        /* Challenges - black header */
        .consequence-card.challenge {
            border-color: #1f2937;
            box-shadow: 0 8px 32px rgba(31, 41, 55, 0.3);
        }

        .card-header.challenge {
            background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
            color: white;
        }

        /* Opportunities - silver header */
        .consequence-card.opportunity {
            border-color: #6b7280;
            box-shadow: 0 8px 32px rgba(107, 114, 128, 0.2);
        }

        .card-header.opportunity {
            background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);
            color: #1f2937;
        }

        .consequence-card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            border-radius: 16px;
            z-index: -1;
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0%, 100% { transform: translateX(-100%); }
            50% { transform: translateX(100%); }
        }

        .follow-up-section {
            background: rgba(59, 130, 246, 0.1);
            border: 1px solid rgba(59, 130, 246, 0.2);
            border-radius: 8px;
            padding: 12px;
            margin: 12px 0;
            font-size: 13px;
            color: #1e40af;
        }

        .solutions-section {
            background: #fef3c7;
            border: 1px solid #fbbf24;
            border-radius: 8px;
            padding: 12px;
            margin: 12px 0;
        }

        .solutions-section h4 {
            margin: 0 0 8px 0;
            color: #92400e;
            font-size: 14px;
        }

        .solutions-list {
            margin: 0;
            padding-left: 16px;
            color: #92400e;
        }

        .solutions-list li {
            font-size: 13px;
            margin-bottom: 4px;
        }

        /* Special animations for consequence cards */
        .consequence-card {
            animation: consequenceSlideIn 0.8s ease-out forwards;
        }

        @keyframes consequenceSlideIn {
            from {
                transform: translateY(30px) scale(0.95);
                opacity: 0;
            }
            to {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        /* Pulse effect for challenge cards */
        .consequence-card.challenge {
            animation: consequenceSlideIn 0.8s ease-out forwards, pulse 2s infinite 1s;
        }

        @keyframes pulse {
            0%, 100% { 
                box-shadow: 0 8px 32px rgba(31, 41, 55, 0.3); 
            }
            50% { 
                box-shadow: 0 12px 40px rgba(31, 41, 55, 0.5); 
            }
        }

    /* Revenue category - metallic gold */
        .card-header.revenue {
            background: linear-gradient(135deg, #d1ad3a 0%, #a88b2e 100%);
            color: #1a1611;
            font-weight: 600;
        }

        .revenue .card-content {
            border-color: #d1ad3a;
            background: linear-gradient(135deg, #fffdf6 0%, #fdf8e8 100%);
        }

        .selection-item.revenue {
            border-color: #d1ad3a;
            background: linear-gradient(135deg, #fefbf0 0%, #fdf8e8 100%);
        }

        /* Revenue card special effects */
        .business-card.revenue {
            border: 2px solid transparent;
            background: linear-gradient(white, white) padding-box, 
                        linear-gradient(45deg, #d1ad3a, #a88b2e, #d1ad3a) border-box;
            animation: slideIn 0.6s ease-out forwards, goldShimmer 2s infinite 1s;
        }

        @keyframes goldShimmer {
            0%, 100% { 
                box-shadow: 0 8px 18px rgba(209, 173, 58, 0.2); 
            }
            50% { 
                box-shadow: 0 12px 24px rgba(209, 173, 58, 0.4); 
            }
        }

/* Month advance notification */
.month-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
    color: white;
    padding: 24px 32px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    opacity: 0;
    transition: all 0.4s ease;
    text-align: center;
    max-width: 320px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.month-notification.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.month-notification-content h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: #ffffff;
}

.month-notification-content p {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #10b981;
}

.month-notification-content small {
    color: #ef4444;
    font-size: 13px;
}

/* Revenue metrics styling */
.business-card.revenue .metric-value {
    color: #7b6211;
    font-weight: 700;
}

.business-card.revenue .metric-label {
    color: #a88b2e;
    font-weight: 500;
}

/* Revenue card glow effect on hover */
.business-card.revenue:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(209, 173, 58, 0.3);
}

/* Month progress indicator (optional) */
.month-progress {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient(#d1ad3a 0deg, #a88b2e 360deg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
    z-index: 100;
    animation: monthProgress 15s linear infinite;
}

@keyframes monthProgress {
    from {
        background: conic-gradient(#d1ad3a 0deg, #e5e7eb 0deg, #e5e7eb 360deg);
    }
    to {
        background: conic-gradient(#d1ad3a 360deg, #e5e7eb 360deg, #e5e7eb 360deg);
    }
}