body {
            font-family: 'Inter', sans-serif;
            background-color: #fafaf9; /* stone-50 */
            color: #292524; /* stone-800 */
        }
        .benefit-card.active {
            border-color: #0d9488; /* teal-600 */
            background-color: #f0fdfa; /* teal-50 */
        }
        .benefit-card.active .benefit-icon {
            background-color: #0d9488; /* teal-600 */
            color: white;
        }
        .benefit-details {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out;
        }
        .benefit-details.show {
            max-height: 500px; /* Adjust as needed */
        }
        .interval-btn.active {
            background-color: #0d9488; /* teal-600 */
            color: white;
            border-color: #0d9488;
        }
        .faq-question.active + .faq-answer {
            max-height: 300px;
            padding-top: 0.5rem;
            padding-bottom: 1rem;
        }
        .faq-question.active .faq-arrow {
            transform: rotate(180deg);
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out, padding 0.4s ease-out;
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            height: 250px;
        }
        @media (min-width: 640px) {
            .chart-container {
                height: 300px;
            }
        }
        .hero-bg {
            background-image: url('../imgs/hero_mobile.webp');
        }
        @media (min-width: 768px) { /* md breakpoint */
            .hero-bg {
                background-image: url('../imgs/hero.webp');
            }
        }

        /* --- Booking Page Schedule Grid --- */
        .schedule-grid {
            display: grid;
            grid-template-columns: 60px repeat(5, 1fr); /* Time label column + 5 day columns */
            gap: 4px;
            text-align: center;
        }

        .schedule-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 4px;
            font-size: 0.875rem; /* text-sm */
        }

        .time-label {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem; /* text-xs */
            color: #78716c; /* stone-500 */
            padding-right: 8px;
        }

        .schedule-slot {
            height: 40px;
            border-radius: 4px;
            transition: background-color 0.2s, border-color 0.2s;
            background-color: #f5f5f4; /* stone-100 */
        }

        .schedule-slot.available {
            background-color: #ccfbf1; /* teal-100 */
            border: 1px solid #5eead4; /* teal-200 */
            cursor: pointer;
        }
        .schedule-slot.available:hover {
            background-color: #99f6e4; /* teal-200 */
        }
        .schedule-slot.selected {
            background-color: #0d9488; /* teal-600 */
            border-color: #042f2e; /* teal-950 */
            color: white;
        }
        .schedule-slot.past {
            background-color: #e7e5e4; /* stone-200 */
            color: #a8a29e; /* stone-400 */
        }