/* General About Page Styles */
#mission, #team, #research, #focus, #multi-layer-security, #enterprise-features {
    padding: 4rem 0;
}

#focus {
    padding-bottom: 0;
}
#multi-layer-security{
    padding-top: 3rem;
    padding-bottom: 3rem;
}
#enterprise-features {
    padding-top: 3rem;
}

/* Apply alternating background colors */
.bg-surface {
    background-color: var(--surface);
}
.bg-white {
    background-color: white;
}

#mission {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

#mission-details {
    padding-top: 0;
    padding-bottom: 4rem;
}

/* Mission Section */
.mission-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 2rem;
    align-items: center;
}

.mission-content {
    align-self: center;
    padding-top: 2rem;
}

.mission-content .section-title {
    text-align: left;
    margin-bottom: 1.5rem;
}

.mission-media {
    justify-self: end;
}

.mission-media img {
    border-radius: var(--radius-lg);
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

#mission .mission-statement {
    font-size: 1.25rem;
    font-weight: var(--font-regular);
    color: var(--text-muted);
    text-align: left;
    margin: 0;
    line-height: 1.5;
    max-width: 50ch;
}

#mission-details .problem-card p {
    color: var(--text-muted);
}

#mission p {
    text-align: left;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    margin-bottom: 2rem;
}

#mission .mission-quote {
    font-size: 1.2rem;
    font-style: italic;
    text-align: left;
    max-width: 600px;
    margin: 2rem auto 0;
    padding: 1rem;
    border-left: 3px solid var(--primary);
    color: var(--text-muted);
}

.subsection-title {
    font-family: var(--font-headline);
    font-weight: var(--font-bold);
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 2rem;
    margin-top: 3rem;
    color: var(--primary);
}
#team .subsection-title:first-of-type {
    margin-top: 0;
}

/* Team Section - Overlay Fix */
.chroma-overlay, .chroma-fade {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
}

/* Research Section - Container Fix */
#research .chart-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--surface);
    border: 1px solid var(--border);
    padding: 1.5rem;
    border-radius: 8px;
}

#research .chart-footnote {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #aaa;
}

#research .chart-footnote a {
    color: #3B82F6;
    text-decoration: none;
}

#research .chart-footnote a:hover {
    text-decoration: underline;
}

/* Research Sticky Scroll Section */
#research .features-sticky-media {
    display: flex;
    align-items: center;
    justify-content: center;
}

#research .media-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0.4s;
}

#research .research-chart, #research .research-chart-mobile {
    max-width: 20rem;
    width: 100%;
    max-height: 20rem;
}

.research-chart-mobile {
    margin-top: 1.5rem;
}

/* Enterprise Features Section */
#enterprise-features .problem-grid {
    height: 100%;
}

#enterprise-features .problem-card {
    display: flex;
    flex-direction: column;
}

#enterprise-features .problem-card p {
    flex-grow: 1;
}

/* Fix for sticky scroll images */
#multi-layer-security .media-content {
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0.4s;
}

#multi-layer-security .media-content img {
    box-shadow: none;
    object-fit: contain;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    .mission-grid {
        grid-template-columns: 1fr;
    }

    /* --- Fix for Mobile Research Graphs & Text --- */
    #research .mobile-layout {
        display: block;
    }
    #research .feature-mobile-item {
        text-align: center;
    }
    #research .feature-mobile-item p {
        margin-left: auto;
        margin-right: auto;
    }
    .research-chart-mobile {
        margin-left: auto;
        margin-right: auto;
    }

    /* --- Padding reduction for Layer 3 Image --- */
    #multi-layer-security .feature-mobile-item:last-of-type {
       padding-bottom: 0;
       margin-bottom: 0;
    }
    #multi-layer-security .feature-mobile-item:last-of-type .feature-mobile-img {
       margin-top: 1rem;
       margin-bottom: 2rem;
    }
}

@media (max-width: 480px) {
    #research .research-chart-mobile {
        max-width: 16rem;
        max-height: 16rem;
    }
}