body {
            font-family: 'Inter', sans-serif;
            background-color: #faf9f6; /* Warm off-white */
            color: #333333;
        }

        .tab-content {
            display: none;
            animation: fadeIn 0.4s ease-in-out;
        }

        .tab-content.active {
            display: block;
        }

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

        .nav-btn {
            transition: all 0.3s ease;
        }
        
        .nav-btn.active {
            background-color: #8a9a86; /* Sage Green */
            color: white;
            border-color: #8a9a86;
        }

        /* STRICT CHART CONTAINER STYLING AS REQUESTED */
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            height: 350px;
            max-height: 400px;
        }
        
        @media (min-width: 768px) {
            .chart-container {
                height: 400px;
            }
        }

        .step-arrow::after {
            content: "↓";
            display: block;
            text-align: center;
            font-size: 1.5rem;
            color: #8a9a86;
            margin: 0.5rem 0;
        }
        @media (min-width: 768px) {
            .step-arrow::after {
                content: "→";
                display: inline-block;
                margin: 0 1rem;
            }
            .step-arrow:last-child::after {
                display: none;
            }
        }