/* Platform Page Clean Theme */

/* Clean Theme Variables Override */
.clean-theme {
    --bg-color: #ffffff;
    --text-color: #111827;
    /* Gray 900 */
    --text-muted: #374151;
    /* Gray 700 */
    --text-dim: #6b7280;
    /* Gray 500 */
    --accent-color: #000000;
    /* Black for strong contrast */
    --accent-glow: rgba(0, 0, 0, 0.1);
    --border-color: #e5e7eb;
    /* Gray 200 */
    --nav-bg: rgba(255, 255, 255, 0.9);
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Reset tweaks for clean theme */
.clean-theme a {
    color: var(--text-color);
}

.clean-theme .main-nav {
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--border-color);
}

.clean-theme .main-logo {
    filter: none;
    /* Don't invert logo for light mode if it's already dark, but assuming original asset is white text? 
                     Actually the asset is 'enableuser-high-resolution-logo-transparent.png'. 
                     If it's white text, we need to invert it to black for light mode.
                     The 'dark mode' stylesheet had `filter: brightness(0) invert(1)` which usually turns black to white.
                     So the original logo is likely black? 
                     Let's assume original is black. If so, standard should be fine. 
                     If original is white, we need to invert.
                     Let's check style.css: `.main-logo { ... filter: brightness(0) invert(1); }`
                     This suggests the logo was turned WHITE. So the original is likely colored or black.
                     For light mode, we want it dark. So `filter: none` or specific coloring.
                  */
    filter: none;
}

/* Exception: If the original logo is actually white, `filter: none` will be invisible on white bg.
   But standard logo assets usually have color or black. 
   If it's white, we need `filter: invert(1) brightness(0)` to make it black. 
   Let's assume we need it Dark.
*/

.clean-theme .nav-links a {
    color: var(--text-muted);
    font-weight: 400;
}

.clean-theme .nav-links a:hover,
.clean-theme .nav-links a.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.clean-theme .nav-cta a {
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 500;
}

.clean-theme .nav-cta a:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    opacity: 1;
}

/* Layout & Typography */
.content-wrapper {
    max-width: 800px;
    /* Restrained width for reading */
    margin: 0 auto;
    padding: 120px 20px 80px;
    /* Top padding for fixed nav */
}

.section {
    margin-bottom: 6rem;
}

.container {
    /* Container is implicit in content-wrapper for this design, 
       but keeping the class for consistency if grid used */
    width: 100%;
}

h1.page-title {
    font-size: 3.5rem;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.03em;
    margin-bottom: 2rem;
    color: #000;
}

.lead-text {
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-weight: 400;
    margin-bottom: 2rem;
}

.sub-text {
    font-size: 1.125rem;
    color: var(--text-dim);
    line-height: 1.6;
    max-width: 600px;
}

h2.section-title {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    color: #000;
}

.section-intro {
    font-size: 1.25rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 4rem;
}

/* Lifecycle Grid */
.lifecycle-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    border-left: 1px solid var(--border-color);
    padding-left: 2rem;
}

.lifecycle-item {
    position: relative;
}

/* Timeline dot */
.lifecycle-item::before {
    content: '';
    position: absolute;
    left: -2.35rem;
    /* Align with border center (-2rem padding - 0.35rem half width roughly) */
    top: 0.5rem;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid var(--text-dim);
    border-radius: 50%;
}

.lifecycle-item h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lifecycle-item p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.highlight {
    display: block;
    margin-top: 0.5rem;
    font-weight: 500;
    color: #111;
}

/* Scope List */
.scope-list {
    margin: 2rem 0;
}

.scope-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.25rem;
    color: var(--text-muted);
}

.scope-item:first-child {
    border-top: 1px solid var(--border-color);
}

.scope-summary {
    margin-top: 2rem;
    font-weight: 500;
    color: #000;
}

/* Divider */
.divider {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 4rem 0 4rem;
}

.section-body {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

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

/* CTA */
.cta-section {
    margin-top: 8rem;
    padding-top: 4rem;
    border-top: 1px solid #000;
    /* Strong delimiter */
}

.cta-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.cta-text {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    max-width: 600px;
}

.text-link-cta {
    font-size: 1.25rem;
    font-weight: 500;
    color: #000;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.text-link-cta:hover {
    color: #4b5563;
}

/* Mobile */
@media (max-width: 768px) {
    h1.page-title {
        font-size: 2.5rem;
    }

    .grid-2-col {
        grid-template-columns: 1fr;
    }

    .content-wrapper {
        padding-top: 100px;
    }
}