/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    background-color: #0F172A !important;
    /* Static Background */
    color: #F8FAFC;
}

:root {
    --primary-color: #EE3923;
    --bg-dark: #0F172A;
    --text-light: #F8FAFC;
    --text-gray: #94A3B8;
}

/* Mobile Header (Hidden on Desktop) */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #0f172a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    transition: transform 0.3s ease-in-out;
    /* Prevent overlap */
    gap: 1rem;
}

/* Adjust logo size for very small screens */
@media (max-width: 360px) {
    .mobile-logo {
        font-size: 1rem;
    }
}

.mobile-header.header-hidden {
    transform: translateY(-100%);
}

.menu-toggle {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.mobile-logo {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
    cursor: pointer;
}

.mobile-logo .highlight {
    color: var(--primary-color);
}

.close-sidebar {
    display: none;
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-gray);
    cursor: pointer;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.mobile-menu-overlay .close-menu {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.mobile-menu-overlay .menu-content {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.mobile-menu-overlay h2 {
    font-family: 'Outfit', sans-serif;
    color: white;
    margin-bottom: 2rem;
    font-size: 1.8rem;
}

.mobile-menu-overlay .menu-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.mobile-menu-overlay .menu-item {
    display: flex;
    align-items: center;
    padding: 0.8rem 1rem;
    color: var(--text-gray);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    /* Added back missing background */
}

.mobile-menu-overlay .menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-overlay .menu-item i {
    margin-right: 1rem;
    color: var(--primary-color);
}

/* Dashboard Layout */
.dashboard-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Styles */
.sidebar {
    width: 280px;
    background: rgba(15, 23, 42, 0.95);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    z-index: 100;
}

.sidebar .logo {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: white;
    margin-bottom: 2rem;
    padding-left: 1rem;
    cursor: pointer;
}

.sidebar .logo .highlight {
    color: var(--primary-color);
}

.nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* flex-grow: 1; Removed to fix support button position */
}

.nav-links li:last-child {
    /* Support button uses standard spacing */
}

.nav-btn {
    background: none;
    border: none;
    color: var(--text-gray);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 1rem;
    text-align: left;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.nav-btn.active {
    background: rgba(238, 57, 35, 0.1);
    color: var(--primary-color);
    font-weight: 600;
}

.nav-btn i {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
    /* Changed to red */
}

.nav-links li a:hover,
.nav-links li a.active {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.nav-links li a i {
    margin-right: 10px;
    width: 20px;
}

/* Bottom Navigation (Mobile) */
.bottom-nav {
    display: none;
    /* Hidden on Desktop */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px !important;
    /* Instagram size - Force fixed height */
    background: #0f172a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 5000;
    /* High z-index to stay on top */
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
    /* Handle iPhone notch */
    transition: transform 0.3s ease;
    /* Only animate showing/hiding, not resizing */
}

/* Mobile Only Visibility */
@media (max-width: 1024px) {
    .bottom-nav {
        display: flex;
    }

    /* Prevent Nav Item Text from being huge */
    .nav-item span {
        font-size: 10px;
        margin-top: 2px;
    }

    .nav-item i {
        width: 20px;
        height: 20px;
    }
}

/* FORCE HIDE CONTACT SECTION GHOST */
#contact:not(.active) {
    display: none !important;
}

.nav-item {
    background: none;
    border: none;
    color: var(--text-gray);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    gap: 4px;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.nav-item.active {
    color: var(--primary-color);
}

.nav-item i {
    width: 20px;
    height: 20px;
}

/* Main Content Area */
.main-content {
    flex-grow: 1;
    margin-left: 280px;
    /* Matches sidebar width */
    padding: 3rem 4rem;
    background: transparent;
}

/* Content Sections */
.content-section {
    display: none;
    /* Hidden by default */
    animation: fadeIn 0.4s ease;
}

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

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

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

/* Section Headers */
.section-header {
    margin-bottom: 3rem;
    text-align: center;
}

.section-header h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    text-align: center;
}

.section-header .subtitle {
    color: var(--text-gray);
    font-size: 1.2rem;
}

/* Home Dashboard Styles */
.welcome-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 3rem;
    text-align: center;
    margin-bottom: 3rem;
}

.welcome-card h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-button {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 2rem;
    transition: transform 0.2s ease;
}

.cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(238, 57, 35, 0.4);
}

/* Article Styles (For Time & Mistakes) */
.article-container {
    max-width: 800px;
    margin: 0 auto;
}

.article-block {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.article-block h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.article-block p {
    color: var(--text-gray);
    margin-bottom: 1rem;
    line-height: 1.8;
}

.article-block ul {
    list-style: none;
    margin-left: 1rem;
}

.article-block li {
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-light);
}

.article-block li::before {
    content: "•";
    color: var(--primary-color);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* How to Use Grid */
.how-to-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.how-to-card {
    flex: 0 1 300px;
    /* Base width of 300px, but can shrink */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

/* Viewing Counter Animation */
@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.viewing-counter span {
    animation: pulse-green 2s infinite;
}

.how-to-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.how-to-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
    border-color: var(--primary-color);
}

.how-to-card .icon-box {
    width: 40px;
    height: 40px;
    background: rgba(238, 57, 35, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    margin: 0 auto 1rem auto;
}

.how-to-card h4 {
    color: white;
    margin-bottom: 0.5rem;
    font-family: 'Outfit', sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.how-to-card h3 {
    color: white;
    margin-bottom: 0.5rem;
    font-family: 'Outfit', sans-serif;
    text-align: center;
    /* Ensure centering */
    width: 100%;
    display: block;
}

.how-to-card p {
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-bottom: 0;
    line-height: 1.4;
}

.scale-faster-section {
    margin-top: 3rem;
    padding: 2rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

.scale-faster-section h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: white;
}

.scale-faster-section p {
    color: var(--text-gray);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.scale-list {
    list-style: none;
    margin: 1rem 0;
    padding-left: 0;
}

.scale-list li {
    color: var(--text-gray);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.scale-list li strong {
    color: white;
}

.footer-disclaimer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.footer-disclaimer p {
    color: rgba(148, 163, 184, 0.5);
    font-size: 0.8rem;
}

/* --- COMMUNITY PAGE STYLES --- */

/* 1. Hero */
.community-hero {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.community-hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.community-hero .subtitle {
    font-size: 1.2rem;
    color: var(--text-gray);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* 2. Features Grid */
.community-features {
    margin-bottom: 4rem;
}

.community-features h2 {
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: white;
}

.section-subhead {
    text-align: center;
    color: var(--text-gray);
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-item {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 16px;
    border-radius: 16px;
    transition: transform 0.2s;
    text-align: center;
    /* Center content including emojis */
}

.feature-item:hover {
    transform: translateY(-5px);
    background: rgba(30, 41, 59, 0.8);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.feature-item h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: white;
}

.feature-item p {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* 3. Who For / Not For */
.community-who {
    margin-bottom: 4rem;
}

.community-who h2 {
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    margin-bottom: 3rem;
    color: white;
}

.who-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.who-col {
    padding: 2rem;
    border-radius: 16px;
}

.who-col.for {
    background: rgba(74, 222, 128, 0.05);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.who-col.not-for {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.who-col h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    color: white;
    text-align: center;
}

.who-col ul {
    list-style: none;
    padding: 0;
}

.who-col ul li {
    margin-bottom: 1rem;
    color: var(--text-gray);
    font-size: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* 4. Pricing */
.community-pricing {
    margin-bottom: 4rem;
}

.community-pricing h2 {
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    margin-bottom: 3rem;
    color: white;
}

.pricing-container {
    display: flex;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
    align-items: stretch;
}

.pricing-card {
    flex: 1;
    background: #0f172a;
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

.pricing-card.founders {
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 30px rgba(238, 57, 35, 0.15);
    transform: scale(1.02);
    z-index: 2;
}

.pricing-card.standard {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 17, 42, 0.5);
    opacity: 0.8;
}

.pricing-card .badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: white;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.tier-label {
    text-align: center;
    color: var(--text-gray);
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.pricing-card .price {
    font-size: 3rem;
    font-weight: 800;
    color: white;
    text-align: center;
    font-family: 'Outfit', sans-serif;
}

.pricing-card .price span {
    font-size: 1rem;
    color: var(--text-gray);
    font-weight: 400;
}

.daily-cost {
    text-align: center;
    color: var(--text-gray);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: white;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.pricing-features li i {
    color: var(--primary-color);
    width: 18px;
    height: 18px;
}

.availability {
    margin-bottom: 1.5rem;
}

.availability p {
    font-size: 0.85rem;
    color: var(--text-gray);
    margin-bottom: 0.5rem;
    text-align: center;
}

.spots-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.spots-bar .fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 3px;
}

.availability .count {
    color: white;
    font-weight: 600;
}

.cta-button.full-width {
    width: 100%;
    text-align: center;
    justify-content: center;
}

.cta-button.outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pricing-subtext {
    text-align: center;
    margin-top: 2rem;
}

.pricing-subtext p {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.pricing-subtext .disclaimer {
    font-size: 0.8rem;
    opacity: 0.7;
    max-width: 600px;
    margin: 1rem auto 0;
}

/* 5. Strategy Section */
.community-strategy {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
    padding: 3rem;
    background: rgba(30, 41, 59, 0.3);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.community-strategy h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    margin-bottom: 2rem;
    color: white;
}

.community-strategy p {
    color: var(--text-gray);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.community-strategy .question {
    color: white;
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 2rem;
}

/* Mobile Adjustments for Community Page */
@media (max-width: 768px) {
    .community-hero h1 {
        font-size: 2rem;
    }

    .who-grid {
        grid-template-columns: 1fr;
    }

    .pricing-container {
        flex-direction: column;
    }

    .pricing-card.founders {
        transform: none;
    }
}

/* Niche Details (Accordion) */
.niche-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-top: 1rem;
}

.niche-details.open {
    max-height: 500px;
    /* Arbitrary large height */
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.toggle-details {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: var(--text-gray);
    padding: 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 1rem;
    font-size: 0.9rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.toggle-details:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Mobile Responsiveness */
/* Global Niche Grid & Card Styles */
.niche-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.niche-card {
    background: #1e293b;
    /* Distinct dark slate background */
    border: 1px solid #334155;
    /* Visible border */
    border-radius: 16px;
    padding: 1.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    /* Strong shadow */
}

@media (max-width: 1024px) {
    .sidebar {
        width: 80px;
        padding: 1rem;
        align-items: center;
    }

    .sidebar .logo span,
    .nav-btn span {
        display: none;
    }

    .main-content {
        margin-left: 0;
        padding: 2rem;
        padding-top: 80px;
        /* Increased further to prevent header overlap */
        padding-bottom: 100px;
        /* Space for bottom nav */
    }

    .mobile-header {
        z-index: 2000;
    }

    .mobile-menu-overlay {
        z-index: 3000;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(10px);
    }

    .bonus-menu-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        padding: 1rem;
        margin-top: 2rem;
    }

    .bonus-menu-card {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.75rem;
        transition: all 0.2s ease;
        color: white;
        text-decoration: none;
    }

    .bonus-menu-card:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.1);
    }

    .bonus-menu-card i {
        width: 32px;
        height: 32px;
        color: #FF4D4D;
        margin-bottom: 0.5rem;
    }

    .bonus-menu-card span {
        font-family: 'Outfit', sans-serif;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2000;
        padding-bottom: env(safe-area-inset-bottom);
    }

}

.footer-disclaimer {
    padding-bottom: 80px;
}

/* Niche Grid & Card Styles */
/* Niche Grid & Card Styles removed from here to be global */

/* End of mobile-specific layout adjustments */

/* Global Niche Card Styles */
.niche-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
    background: #253248;
    /* Slightly lighter on hover */
}

.niche-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.niche-icon {
    width: 50px;
    height: 50px;
    background: rgba(238, 57, 35, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    flex-shrink: 0;
}

.niche-icon i {
    width: 24px;
    height: 24px;
}

.niche-info h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
    color: white;
}

.rpm-tag {
    font-size: 0.9rem;
    color: #4ade80;
    /* Green */
    font-weight: 600;
    background: rgba(74, 222, 128, 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.channel-list {
    list-style: none;
    margin-top: auto;
    /* Pushes list to bottom if needed */
    margin-bottom: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1rem;
}

.channel-list li {
    margin-bottom: 0.5rem;
}

.channel-list a {
    color: var(--text-gray);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.channel-list a:hover {
    color: var(--primary-color);
}

.channel-list a i {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

/* V2 Upgrade Styles */

/* Niche Data Points */
.niche-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.difficulty-stars {
    color: #fbbf24;
    /* Amber-400 */
}

.monetization-fast {
    color: #4ade80;
    /* Green-400 */
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.2);
}

.monetization-medium {
    color: #facc15;
    /* Yellow-400 */
    background: rgba(250, 204, 21, 0.1);
    border-color: rgba(250, 204, 21, 0.2);
}

.monetization-slow {
    color: #f87171;
    /* Red-400 */
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.2);
}

.strategy-tag {
    color: #60a5fa;
    /* Blue-400 */
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.2);
}

/* Niche Disclaimer */
.niche-disclaimer {
    margin-top: 3rem;
    padding: 1.5rem;
    background: rgba(238, 57, 35, 0.1);
    /* Primary color tint */
    border: 1px solid rgba(238, 57, 35, 0.2);
    border-radius: 12px;
    color: #fca5a5;
    /* Light red/orange text */
    font-size: 0.95rem;
    line-height: 1.6;
}

.niche-disclaimer strong {
    color: var(--primary-color);
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

/* Comparison Table (Anti-Failure Checklist) */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    overflow: hidden;
}

/* Fix for centered titles on cards */
.how-to-card h3,
.how-to-card h4 {
    text-align: center;
}

.how-to-card h4 {
    font-weight: 800;
}

/* Ebook Page Separators */
#ebook>div:not(:last-child):not(.ebook-upsell-section) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 3rem;
    margin-bottom: 3rem;
}

.comparison-table th {
    text-align: left;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-family: 'Outfit', sans-serif;
}

.comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-gray);
    vertical-align: top;
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

.comparison-table .problem-cell {
    color: #f87171;
    /* Red for problem */
    font-weight: 500;
    width: 30%;
}

.comparison-table .solution-cell {
    color: #4ade80;
    /* Green for solution */
    font-weight: 500;
}

/* Schedule Visuals */
.schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.day-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.day-card h4 {
    color: var(--primary-color);
    font-family: 'Outfit', sans-serif;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.day-card .task {
    font-size: 1.1rem;
    color: white;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.day-card .duration {
    font-size: 0.9rem;
    color: var(--text-gray);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    display: inline-block;
}

/* Tool Stack */
.tool-stack {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.tool-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-weight: 500;
}

.tool-badge i {
    color: var(--primary-color);
    width: 18px;
    height: 18px;
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .sidebar {
        width: 80px;
        padding: 1rem;
        align-items: center;
    }

    .sidebar .logo span,
    .nav-btn span {
        display: none;
    }

    .main-content {
        margin-left: 80px;
        padding: 2rem;
    }

    .nav-btn {
        justify-content: center;
        padding: 1rem 0;
    }

    .mobile-header {
        display: flex;
    }

    .bottom-nav {
        display: flex;
    }

    .sidebar {
        display: none;
        /* Hide sidebar completely on mobile */
    }

    .main-content {
        margin-left: 0;
        padding: 2rem;
        padding-top: 80px !important;
        /* FIX 1: Reduced from 180px to 80px */
        /* Space for mobile header */
        padding-bottom: 80px;
        /* Space for bottom nav */
    }

    .nav-btn {
        justify-content: flex-start;
        padding: 1rem;
    }

    .nav-btn span {
        display: inline;
        /* Show text in mobile menu */
    }

    .sidebar .logo {
        display: none;
        /* Hide sidebar logo on mobile as it's in header */
    }
}

@media (max-width: 768px) {
    .dashboard-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        flex-direction: row;
        justify-content: space-between;
        padding: 1rem;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-links {
        flex-direction: row;
        gap: 1rem;
        overflow-x: auto;
        /* Allow horizontal scroll if needed */
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
        /* Space for scrollbar */
    }

    .nav-btn {
        padding: 0.5rem;
    }

    .main-content {
        margin-left: 0;
        padding: 1rem;
        padding-top: 90px;
        /* Clear fixed header */
        padding-bottom: 80px;
        /* Clear bottom nav */
    }

    /* Fix Contact Page Alignment */
    #contact {
        padding-top: 40px !important;
        /* Ensure top padding */
        margin-top: 0;
        display: block;
        /* Remove flex centering if present */
        min-height: 100vh;
    }

    .sidebar .logo {
        margin-bottom: 0;
        font-size: 1.2rem;
    }
}

/* --- WHATSAPP ASSISTANT PAGE STYLES --- */

.whatsapp-hero {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.whatsapp-hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.whatsapp-hero .subtitle {
    font-size: 1.2rem;
    color: var(--text-gray);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #25D366;
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    font-size: 1.1rem;
}

.whatsapp-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}

.whatsapp-btn.large {
    font-size: 1.3rem;
    padding: 1.2rem 2.5rem;
}

/* Chat Grid */
.whatsapp-examples {
    margin-bottom: 4rem;
}

.chat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.chat-bubble {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 20px;
    border-bottom-left-radius: 4px;
    color: white;
    font-size: 1rem;
    line-height: 1.5;
    transition: transform 0.2s;
}

.chat-bubble:hover {
    transform: translateY(-3px);
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(37, 211, 102, 0.3);
}

.chat-note {
    text-align: center;
    color: var(--text-gray);
    font-size: 0.95rem;
    max-width: 600px;
    margin: 0 auto;
}

/* How It Works Steps */
.whatsapp-steps {
    margin-bottom: 4rem;
    text-align: center;
}

.steps-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.step-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 16px;
    width: 200px;
}

.step-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.step-card h4 {
    color: white;
    margin-bottom: 0.5rem;
    font-family: 'Outfit', sans-serif;
}

.step-card p {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin: 0;
}

.step-arrow {
    font-size: 2rem;
    color: var(--text-gray);
    opacity: 0.5;
}

.steps-note {
    color: var(--text-gray);
    font-size: 0.95rem;
}

/* CTA Block */
.whatsapp-cta-block {
    text-align: center;
    margin-bottom: 5rem;
}

.qr-text {
    margin-top: 1rem;
    color: var(--text-gray);
    font-size: 0.9rem;
}

/* Upsell Section */
.upsell-section {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.upsell-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 3rem;
}

.upsell-section h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    margin-bottom: 2rem;
    color: white;
}

.upsell-content {
    background: rgba(30, 41, 59, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 3rem;
    border-radius: 20px;
}

.upsell-content p {
    color: var(--text-gray);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.upsell-list {
    list-style: none;
    padding: 0;
    text-align: left;
    max-width: 500px;
    margin: 0 auto 2rem;
}

.upsell-list li {
    color: white;
    margin-bottom: 0.8rem;
    font-size: 1rem;
}

.upsell-note {
    font-size: 0.95rem !important;
    margin-bottom: 1.5rem !important;
}

.upsell-btn {
    background: var(--primary-color);
    /* Red */
    border: none;
}

/* Mobile Adjustments for WhatsApp Page */
@media (max-width: 768px) {
    .whatsapp-hero h1 {
        font-size: 2rem;
    }

    .steps-container {
        flex-direction: column;
        gap: 1rem;
    }

    .step-arrow {
        transform: rotate(90deg);
        margin: 0.5rem 0;
    }
}

/* --- EBOOK PAGE STYLES (NEW SPEC) --- */

/* 1. HERO SECTION */
.ebook-hero-split {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 2rem 0 4rem;
    max-width: 1100px;
    margin: 0 auto;
}

.hero-left {
    flex: 1.5;
    /* 60% approx */
}

.ebook-chapters-section h2 {
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 3rem;
    color: white;
}

.hero-right {
    flex: 1;
    /* 40% approx */
    display: flex;
    justify-content: center;
}

.back-link {
    display: inline-block;
    color: var(--text-gray);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--primary-color);
}

.ebook-hero-split h1 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 1rem;
    text-align: center;
}

.ebook-hero-split .subtitle {
    font-size: 1.25rem;
    color: #94A3B8;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.ebook-hero-split .hero-body {
    color: #CBD5E1;
    font-size: 1.1rem;
    line-height: 1.6;
}

.ebook-hero-split .hero-body p {
    margin-bottom: 1rem;
}

.ebook-mockup-image {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.ebook-mockup-image:hover {
    transform: scale(1.02);
}

.ebook-mockup-image img {
    width: 100%;
    height: auto;
    display: block;
}

.ebook-mockup-fallback {
    width: 100%;
    aspect-ratio: 1/1.4;
    background: rgba(30, 41, 59, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: 8px;
}

/* 2. PRIMARY CTA SECTION */
.ebook-cta-section {
    padding: 4rem 0;
    text-align: center;
}

.cta-content {
    max-width: 600px;
    margin: 0 auto;
}

.cta-button.large-red {
    background: var(--primary-color);
    /* Updated to use variable */
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 1rem 3rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    width: auto;
    min-width: 300px;
}

.cta-button.large-red:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(238, 57, 35, 0.3);
    /* Adjusted shadow color to match primary */
}

.subtext {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-gray);
}

/* 3. WHAT'S INSIDE SECTION */
.ebook-chapters-section {
    padding: 4rem 0;
    max-width: 800px;
    margin: 0 auto;
}

.chapter-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chapter-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1.5rem;
    transition: border-color 0.2s, transform 0.2s;
}

.chapter-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.chapter-emoji {
    font-size: 1.5rem;
    flex-shrink: 0;
    padding-top: 0.2rem;
}

.chapter-info h3 {
    color: white;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.chapter-info p {
    color: #94A3B8;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

/* 4. KEY INSIGHTS SECTION */
.ebook-insights-section {
    padding: 4rem 0;
    max-width: 1000px;
    margin: 0 auto;
}

.insights-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.insight-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.insight-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.check-icon {
    color: #10B981;
    /* Green */
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.insight-item p {
    color: #CBD5E1;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* 6. ABOUT THE AUTHOR */
.ebook-author-section {
    padding: 4rem 0;
}

.author-box {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.author-text-container {
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    padding: 2.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.author-text-content p {
    color: #CBD5E1;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.author-list {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.author-list li {
    color: #CBD5E1;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}

.signature {
    font-style: italic;
    text-align: right;
    font-weight: 600;
    color: white !important;
}

/* 7. UPSELL SECTION */
.ebook-upsell-section {
    padding: 4rem 0 6rem;
}

.upsell-box {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 3rem;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.upsell-text {
    text-align: left;
    max-width: 700px;
    margin: 0 auto;
}

.upsell-text h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.upsell-features {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.upsell-features li {
    margin-bottom: 0.8rem;
    color: #CBD5E1;
}

.upsell-btn {
    display: block;
    width: fit-content;
    margin: 2rem auto 0;
    background: var(--primary-color);
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
}

.upsell-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(238, 57, 35, 0.2);
}

/* --- LUNCH BREAK SYSTEM STYLES --- */

/* Hero */
.lunch-hero {
    text-align: center;
    padding: 3rem 0;
    max-width: 800px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    color: #CBD5E1;
}

.lunch-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1.1;
    text-align: center;
}

.lunch-hero .subtitle {
    font-size: 1.25rem;
    color: #94A3B8;
    margin-bottom: 1.5rem;
}

.lunch-hero .hero-body {
    font-size: 1.1rem;
    color: #CBD5E1;
    line-height: 1.6;
}

.lunch-hero .hero-body p {
    margin-bottom: 1rem;
}

/* Simple Math */
.simple-math-section {
    padding: 3rem 0;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.simple-math-section h2 {
    font-size: 2.25rem;
    margin-bottom: 2.5rem;
}

.math-box {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.math-box:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

.math-equation {
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.insight-box {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s ease;
}

.insight-box:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.insight-box p {
    font-size: 1.1rem;
    font-style: italic;
    color: #CBD5E1;
    margin: 0;
}

/* Stealth System */
.stealth-system-section {
    padding: 3rem 0;
    max-width: 800px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.phase-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.phase-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

.phase-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.phase-icon {
    font-size: 1.5rem;
}

.phase-header h3 {
    font-size: 1.25rem;
    color: white;
    margin: 0;
}

.phase-time {
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 1.5rem;
    padding-left: 2.5rem;
    /* Align with text */
}

.phase-content {
    padding-left: 2.5rem;
    color: #CBD5E1;
}

.phase-content p {
    margin-bottom: 0.5rem;
    color: white;
}

.phase-content ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.phase-content li {
    margin-bottom: 0.5rem;
    color: #94A3B8;
}

/* Lunch Blueprint */
.lunch-blueprint-section {
    padding: 3rem 0;
    max-width: 800px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.blueprint-timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blueprint-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.blueprint-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

.blueprint-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.blueprint-icon {
    font-size: 1.5rem;
}

.blueprint-header h3 {
    font-size: 1.1rem;
    color: white;
    margin: 0;
}

.blueprint-card ul {
    list-style: none;
    padding-left: 2.5rem;
}

.blueprint-card li {
    color: #94A3B8;
    margin-bottom: 0.5rem;
}

/* Stealth Techniques */
.stealth-techniques-section {
    padding: 3rem 0;
    max-width: 1000px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stealth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.stealth-col {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.stealth-col:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

.stealth-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.stealth-col h3 {
    color: white;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.stealth-col ul {
    list-style: none;
}

.stealth-col li {
    color: #94A3B8;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

/* Risk Management */
.risk-management-section {
    padding: 3rem 0;
    max-width: 900px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.risk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.risk-col {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.risk-col:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

.risk-col h3 {
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.risk-col.dont h3 {
    color: #EF4444;
}

.risk-col.do h3 {
    color: #10B981;
}

.risk-col ul {
    list-style: none;
}

.risk-col li {
    margin-bottom: 0.8rem;
    color: #CBD5E1;
}

.warning-box {
    margin-top: 2rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    color: #FCA5A5;
}

/* Compound Effect */
.compound-effect-section {
    padding: 3rem 0;
    max-width: 900px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.timeline-visual {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    padding: 0 2rem;
}

.timeline-step {
    text-align: center;
}

.step-label {
    display: block;
    font-weight: bold;
    color: white;
    margin-bottom: 0.5rem;
}

.step-desc {
    font-size: 0.9rem;
    color: #94A3B8;
}

.timeline-arrow {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.5rem;
}

.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.results-col {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.results-col:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

.results-col h3 {
    color: white;
    margin-bottom: 1.5rem;
}

.results-col ul {
    list-style: none;
}

.results-col li {
    margin-bottom: 0.8rem;
    color: #CBD5E1;
}

/* CTA & Quote */
.lunch-cta-section {
    padding: 5rem 0;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta-body {
    margin-bottom: 2rem;
    color: #CBD5E1;
}

.cta-list {
    list-style: none;
    text-align: left;
    max-width: 500px;
    margin: 1.5rem auto;
}

.cta-list li {
    margin-bottom: 0.5rem;
}

.lunch-quote-section {
    padding: 4rem 0;
    text-align: center;
}

.quote-box {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2.5rem;
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

.quote-text {
    font-style: italic;
    font-size: 1.2rem;
    color: white;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.copyright-text {
    font-size: 0.85rem;
    color: #64748B;
}

/* --- MODAL STYLES (Global) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 2000;
    /* High z-index */
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: #1E293B;
    border: 1px solid #334155;
    padding: 2.5rem;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.close-modal {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--text-gray);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.close-modal:hover {
    color: white;
}

.modal-content h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: white;
    text-align: center;
}

.modal-subhead {
    text-align: center;
    color: var(--text-gray);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group input {
    width: 100%;
    padding: 1rem;
    background: #0F172A;
    border: 1px solid #334155;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.helper-text {
    font-size: 0.85rem;
    color: var(--text-gray);
    text-align: center;
    margin-bottom: 1.5rem;
}

.cta-button.full-width {
    width: 100%;
    background: var(--primary-color);
    /* Updated */
    color: white;
    padding: 1rem;
    border-radius: 8px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
}

/* RESPONSIVE BREAKPOINTS FOR EBOOK PAGE */
@media (max-width: 1024px) {
    .ebook-hero-split {
        gap: 2rem;
    }

    .ebook-hero-split h1 {
        font-size: 2.5rem;
    }

    .section-header h1 {
        font-size: 2.5rem;
        /* Prevent overflow on smaller screens */
    }
}

@media (max-width: 768px) {
    .section-header h1 {
        font-size: 2rem;
    }
}

/* --- ANTI-FAILURE CHECKLIST STYLES --- */

/* 1. Mistakes Hero */
.mistakes-hero {
    text-align: center;
    padding: 3rem 0;
    max-width: 800px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mistakes-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1.1;
    text-align: center;
}

.mistakes-hero .subtitle {
    font-size: 1.25rem;
    color: #94A3B8;
    margin-bottom: 1.5rem;
}

.mistakes-hero .hero-body {
    font-size: 1.1rem;
    color: #CBD5E1;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.warning-callout {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 1rem;
    display: inline-block;
    color: #FCA5A5;
    font-weight: 500;
}

/* 2. Accordions */
.big-seven-section {
    padding: 3rem 0;
    max-width: 800px;
    margin: 0 auto;
}

.mistake-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.accordion-item {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-item.active {
    border-color: var(--primary-color);
    background: rgba(30, 41, 59, 0.8);
}

.accordion-header {
    width: 100%;
    padding: 1.5rem;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
}

.accordion-header h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: white;
    margin: 0;
    flex-grow: 1;
    padding-left: 1rem;
}

.mistake-number {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.1);
}

.accordion-item.active .mistake-number {
    color: var(--primary-color);
}

.accordion-header svg {
    color: white !important;
    transition: transform 0.3s;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-item.active .accordion-content {
    max-height: 1000px;
    /* Arbitrary large height */
}

.content-inner {
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.mistake-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.mistake-col h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: white;
}

.mistake-col p {
    font-size: 0.95rem;
    color: #CBD5E1;
    line-height: 1.5;
}

.solution-box {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.solution-box h4 {
    color: #34D399;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.solution-box p {
    color: #D1FAE5;
    font-size: 0.95rem;
    margin: 0;
}

.impact-quote {
    font-style: italic;
    color: #94A3B8;
    font-size: 0.9rem;
    border-left: 3px solid var(--primary-color);
    padding-left: 1rem;
}

/* 3. Hidden Killers */
.hidden-killers-section {
    padding: 3rem 0;
    max-width: 1000px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.killers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.killer-category {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
}

.killer-category h3 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

.killer-category ul {
    list-style: none;
    padding: 0;
}

.killer-category li {
    color: #CBD5E1;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* 4. Cost Section */
.cost-section {
    padding: 3rem 0;
    max-width: 900px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cost-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.cost-box {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s;
}

.cost-box:hover {
    transform: translateY(-3px);
    border-color: var(--primary-color);
}

.cost-box h4 {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.cost-box p {
    color: white;
    font-style: italic;
    font-size: 1rem;
}

/* 5. CTA Section */
.mistakes-cta-section {
    padding: 4rem 0;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.mistakes-cta-section h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    font-family: 'Outfit', sans-serif;
}

/* 6. Testimonial */
.testimonial-section {
    padding: 3rem 0;
    max-width: 800px;
    margin: 0 auto;
}

.testimonial-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
}

.testimonial-content {
    text-align: left;
    margin-top: 1.5rem;
}

.testimonial-content ul {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.testimonial-content li {
    color: #CBD5E1;
    margin-bottom: 0.5rem;
}

/* 7. Quote */
.mistakes-quote-section {
    padding: 3rem 0;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
    .mistake-grid {
        grid-template-columns: 1fr;
    }

    .cost-grid {
        grid-template-columns: 1fr;
    }

    .killers-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ebook-hero-split {
        flex-direction: column;
        text-align: center;
    }

    .hero-left,
    .hero-right {
        flex: auto;
        width: 100%;
    }

    .ebook-mockup-image {
        margin: 0 auto;
    }

    .insights-grid-v2 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .chapter-card {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .upsell-box {
        padding: 1.5rem;
    }

    .cta-button.large-red {
        width: 100%;
        min-width: unset;
    }

    /* Lunch Break Mobile */
    .stealth-grid,
    .risk-grid,
    .results-grid {
        grid-template-columns: 1fr;
    }

    .timeline-visual {
        flex-direction: column;
        gap: 1rem;
    }

    .timeline-arrow {
        transform: rotate(90deg);
    }

    .author-text-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .author-image {
        margin-bottom: 1rem;
    }

    .signature {
        text-align: center;
    }

    .step-card {
        width: 100%;
    }
}

/* Toast Notification */
.toast {
    visibility: hidden;
    min-width: 250px;
    background-color: rgba(15, 23, 42, 0.95);
    color: #fff;
    text-align: center;
    border-radius: 50px;
    padding: 12px 24px;
    position: fixed;
    z-index: 5000;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s;
    font-family: 'Outfit', sans-serif;
}

.toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px;
}

/* Global Bold Titles */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700 !important;
}

/* --- CORRECTED AI PAGE ALIGNMENT --- */


/* 1. SAFETY: Force hide by default so it doesn't appear on other pages */
#ai-landing {
    display: none !important;
}

/* 2. ACTIVATION: Only show when the Javascript adds 'active' class */
#ai-landing.active {
    display: block !important;
    min-height: 100vh;
    padding-top: 40px !important;
    /* Push it down from the top */
}

/* 3. CENTERING: Mimic the 'Home' page layout */
/* This grabs the inner blocks and centers them */
#ai-landing .ai-hero-section,
#ai-landing .ai-examples-section,
#ai-landing .ai-how-it-works {
    max-width: 900px !important;
    /* Limit the width */
    margin-left: auto !important;
    /* Auto left margin = push to center */
    margin-right: auto !important;
    /* Auto right margin = push to center */
    width: 100%;
}


.ai-hero-section {
    padding: 2rem 2rem 4rem;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.back-link {
    display: inline-block;
    color: var(--text-gray);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 2rem;
    transition: color 0.2s;
}

.back-link:hover {
    color: white;
}

.ai-hero-title {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 1rem;
    font-family: 'Outfit', sans-serif;
}

.ai-hero-subtitle {
    font-size: 1.25rem;
    color: white;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.ai-hero-body {
    font-size: 1.1rem;
    color: var(--text-gray);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 2rem;
}

.ai-mockup-visual {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    max-width: 500px;
    margin: 0 auto 2.5rem;
    text-align: left;
}

.mockup-chat-bubble {
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.mockup-chat-bubble.user {
    background: var(--primary-color);
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 2px;
    width: fit-content;
    max-width: 80%;
}

.mockup-chat-bubble.ai {
    background: rgba(255, 255, 255, 0.05);
    color: #E2E8F0;
    margin-right: auto;
    border-bottom-left-radius: 2px;
    width: fit-content;
    max-width: 80%;
}

.ai-hero-subtext {
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-top: 1rem;
}

/* Examples Section */
.ai-examples-section {
    padding: 80px 20px;
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
}

.section-subtitle {
    color: var(--text-gray);
    margin-bottom: 2.5rem;
}

.questions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    max-width: 1000px;
    margin: 0 auto;
}

.question-bubble {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    padding: 1rem 1.5rem;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-align: left;
}

.question-bubble:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.02);
    border-color: var(--primary-color);
}

.question-bubble .emoji {
    font-size: 1.2rem;
}

/* How It Works */
.ai-how-it-works {
    padding: 80px 20px;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 2.5rem 0;
}

.step-card {
    text-align: center;
}

.step-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.step-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: white;
}

.step-card p {
    color: var(--text-gray);
    font-size: 1rem;
    line-height: 1.5;
}

.steps-footer {
    color: var(--text-gray);
    font-size: 1rem;
    margin-top: 2rem;
}

/* Responsive Landing Page */
@media (max-width: 768px) {
    .ai-hero-title {
        font-size: 2.2rem;
    }

    .steps-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .questions-grid {
        grid-template-columns: 1fr;
    }
}

/* --- RESTORED WIDGET STYLES --- */
.chat-widget {
    display: none;
    /* Hidden by default, shown via JS on AI page */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    /* Ensure it's on top of everything */
    font-family: 'Inter', sans-serif;
}

/* Trigger Button */
.chat-trigger {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary-color);
    border: none;
    color: white;
    box-shadow: 0 4px 20px rgba(238, 57, 35, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.chat-trigger:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(238, 57, 35, 0.6);
}

.chat-trigger i {
    width: 28px;
    height: 28px;
}

/* Chat Window */
.chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 380px;
    height: 600px;
    max-height: 80vh;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    /* More rounded */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: bottom right;
}

.chat-window.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* Header */
.chat-header {
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.bot-icon {
    color: var(--primary-color);
}

.chat-header h3 {
    margin: 0;
    font-size: 1rem;
    color: white;
    font-family: 'Outfit', sans-serif;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    margin-right: 4px;
}

.status-text {
    font-size: 0.8rem;
    color: var(--text-gray);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.expand-chat,
.close-chat {
    background: none;
    border: none;
    color: var(--text-gray);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.expand-chat:hover,
.close-chat:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.expand-chat i,
.close-chat i {
    width: 18px;
    height: 18px;
}

/* Messages Area */
.chat-messages {
    flex-grow: 1;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    animation: messageSlideIn 0.4s ease-out forwards;
}

.message.user {
    align-self: flex-end;
    align-items: flex-end;
}

.message.ai {
    align-self: flex-start;
    align-items: flex-start;
}

.message-content {
    padding: 0.8rem 1.2rem;
    border-radius: 18px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #E2E8F0;
}

.message.user .message-content {
    background: var(--primary-color);
    color: white;
    border-bottom-right-radius: 4px;
}

.message.ai .message-content {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom-left-radius: 4px;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Mobile Responsive */
@media (max-width: 480px) {
    .chat-window {
        width: 100%;
        height: 100%;
        bottom: 0;
        right: 0;
        border-radius: 0;
        max-height: 100vh;
    }

    .chat-widget {
        bottom: 0;
        right: 0;
        z-index: 9999;
    }

    .chat-trigger {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }
}

/* --- AI CHAT PAGE (Full Screen) --- */
/* --- AI CHAT PAGE (Full Screen) --- */
/* FIX: Only show flex when active */
.content-section.full-height-section {
    display: none !important;
    /* Default to hidden - STRICT */
}

.content-section.active.full-height-section {
    display: flex !important;
    /* Only flex when active */
    min-height: 100vh;
    /* Allow growing */
    height: auto;
    /* Remove fixed height */
    flex-direction: column;
    padding: 0;
    margin-top: 0;
}

.ai-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    height: 100%;
}

.ai-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Move content to top */
    padding-top: 40px;
    /* Standard spacing */
    text-align: center;
    padding: 2rem;
    animation: fadeIn 0.5s ease;
    overflow-y: visible;
    /* Let page scroll */
}

.ai-logo-large {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.ai-logo-large i {
    width: 40px;
    height: 40px;
    color: var(--primary-color);
}

.ai-welcome h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.ai-subtitle {
    font-size: 1.2rem;
    color: var(--text-gray);
    margin-bottom: 3rem;
}

/* Prompt Grid */
.prompt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 600px;
}

.prompt-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 24px;
    /* More rounded */
    text-align: center;
    /* Centered */
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center items */
    justify-content: center;
    gap: 0.8rem;
}

.prompt-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    border-color: var(--primary-color);
}

.prompt-card i {
    color: white !important;
    /* White icon */
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.prompt-card span {
    color: #FFFFFF !important;
    font-weight: 700;
    /* Bold text */
    font-size: 1.1rem;
}

/* Messages Area */
.full-page-messages {
    flex: 1;
    /* Take available space */
    overflow-y: auto;
    /* Scroll internally */
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    scroll-behavior: smooth;
}

/* Reuse message styles but adjust max-width */
.full-page-messages .message {
    max-width: 70%;
}

/* Input Area */
.full-page-input-area {
    padding: 1.5rem 2rem;
    width: 100%;
    z-index: 10;
    background: transparent;
    /* Let container background show */
    flex-shrink: 0;
    /* Don't shrink */
}

.input-wrapper {
    background: rgba(30, 41, 59, 0.95);
    /* Solid background */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    /* Pill shape */
    padding: 0.5rem 1rem;
    /* Compact padding */
    display: flex;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s;
    max-width: 800px;
    /* Limit width like ChatGPT */
    margin: 0 auto;
    /* Center it */
}

.input-wrapper:focus-within {
    border-color: var(--primary-color);
}

#fullPageInput {
    flex-grow: 1;
    background: none;
    border: none;
    color: white;
    font-size: 1rem;
    /* Slightly smaller font */
    padding: 0.5rem;
    font-family: 'Inter', sans-serif;
}

#fullPageInput:focus {
    outline: none;
}

.send-btn-large {
    width: 40px;
    /* Slightly smaller */
    height: 40px;
    border-radius: 50%;
    /* Perfect circle */
    background: var(--primary-color);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.send-btn-large:hover {
    transform: scale(1.05);
}

.ai-disclaimer {
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    margin-top: 0.8rem;
}

/* Thinking Animation */
.thinking-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.thinking-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--primary-color);
    animation: pulse-logo 2s infinite ease-in-out;
}

@keyframes pulse-logo {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(238, 57, 35, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(238, 57, 35, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(238, 57, 35, 0);
    }
}

/* --- NEW AI ASSISTANT PAGE STYLES (REBUILT) --- */

/* 1. Page Layout & Centering */
#ai-landing {
    /* Inherits .content-section logic (hidden by default) */
}

#ai-landing.active {
    display: flex !important;
    /* Acts as a normal page */
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    min-height: 100vh;
}

/* Center all main containers */
.ai-page-hero,
.ai-page-examples,
.ai-page-steps,
.ai-chat-interface,
.ebook-upsell-section {
    width: 100%;
    /* Ensure they take full width up to max-width */
    max-width: 900px;
    margin: 0 auto;
    /* The Magic Centering Code */
    padding: 0 2rem;
    text-align: center;
    margin-bottom: 6rem;
    /* Spacing between sections */
}

/* 2. Hero Section */
.ai-page-hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.ai-page-hero .subtitle {
    font-size: 1.25rem;
    color: white;
    margin-bottom: 1.5rem;
}

.ai-page-hero .description {
    font-size: 1.1rem;
    color: var(--text-gray);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 2rem;
}

/* Mockup Visual */
.ai-mockup-visual {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    max-width: 500px;
    margin: 0 auto 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.mockup-chat-bubble {
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 90%;
}

.mockup-chat-bubble.user {
    background: var(--primary-color);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.mockup-chat-bubble.ai {
    background: rgba(30, 41, 59, 0.8);
    color: var(--text-light);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: left;
}

.hero-cta-wrapper .subtext {
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-top: 1rem;
}

/* 3. Example Questions (Pills) */
.questions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}



/* 4. Embedded Chat Interface */
.embedded-chat-container {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    min-height: 500px;
    /* Prevent empty look */
    height: auto;
    /* Grow with content */
    display: flex;
    flex-direction: column;
    overflow: visible;
    /* Let page scroll handle it */
    margin-top: 2rem;
}

.embedded-input-area {
    padding: 1.5rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    /* Safe area for mobile */
    background: rgba(15, 23, 42, 0.95);
    /* High opacity to hide scrolling text behind it */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* THE STICKY MAGIC - FIXED POSITION */
    position: fixed;
    bottom: 0;
    left: 280px;
    /* Sidebar width */
    right: 0;
    z-index: 1000;
    /* Ensure it's above everything */
    display: flex;
    justify-content: center;
    /* Center the input wrapper */
}

/* Ensure input wrapper doesn't stretch too wide */
.embedded-input-area .input-wrapper {
    width: 100%;
    max-width: 900px;
    /* Match container max-width */
}

/* Add padding to bottom of messages so content isn't hidden */
.embedded-messages {
    /* flex-grow: 1; Removed to let it take natural height */
    overflow-y: visible;
    /* No internal scroll */
    padding: 2rem;
    padding-bottom: 120px;
    /* Space for fixed input bar */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .embedded-input-area {
        left: 0;
        /* No sidebar on mobile */
        padding: 1rem;
    }

    .ai-page-hero h1 {
        font-size: 2.2rem;
    }

    .embedded-chat-container {
        /* height: 500px; REMOVED to allow auto-expand */
        min-height: 500px;
    }

    /* Ensure it clears the header on mobile */
    #ai-landing.active {
        padding-top: 80px;
    }
}