/* css/responsive.css */

/* Tablet and smaller */
@media (max-width: 768px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    .section-padding { padding: 40px 0; }

    #nav-menu {
        display: none; /* Hide by default */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        background-color: #fff;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        padding-bottom: 10px;
    }
    #nav-menu.active {
        display: flex; /* Show when active */
    }
    #nav-menu li {
        margin: 0;
        width: 100%;
        text-align: center;
    }
    #nav-menu li a {
        display: block;
        padding: 15px;
        border-bottom: 1px solid #eee;
    }
    #nav-menu li:last-child a {
        border-bottom: none;
    }
    #mobile-menu-toggle {
        display: block;
    }

    .features-grid,
    .token-model-grid,
    .cashflow-details,
    .options-comparison,
    .footer-content {
        grid-template-columns: 1fr; /* Stack on smaller screens */
    }
    .cashflow-chart { margin-top: 2rem; }
    .bar-chart-container { height: 200px; }
}

/* Mobile specific */
@media (max-width: 480px) {
    .container { width: 95%; }
    .btn { padding: 10px 20px; font-size: 0.9rem; }
    .hero-section h1 { font-size: 1.8rem; }
    .hero-section .subtitle { font-size: 1.1rem; }
    .hero-section p:not(.subtitle) { font-size: 0.95rem; }

    .bar-segment::after { font-size: 0.7rem; }
}