:root {
    --color-navy: #0a090f;
    --color-navy-light: #111210;
    --color-text-main: #c8c2c0;
    --color-text-light: #bcc6e6;
    --color-gold: #e5c079;
    --color-gold-hover: #f4d08a;
    --color-paper: #ddd;
    --color-white: #ffffff;
    --color-red-mute: #f08ca5;
    --color-green-mute: #a8e399;
    --font-heading: serif;
    --font-body: sans-serif;
    --spacing-section: 100px;
    --container-width: 900px;
}

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

body {
    background-color: var(--color-navy);
    color: var(--color-text-main);
    font-family: var(--font-body);
    font-size: 1.4rem;
    -webkit-font-smoothing: antialiased;
}

h2 {
    color: var(--color-text-light);
    font-family: var(--font-heading);
    font-weight: 400;
    margin-bottom: 20px;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}

h2::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background-color: var(--color-gold);
    margin-top: 10px;
}

p {
    font-size: 1.5rem;
    font-weight: 300;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color .3s ease;
}
span.badge {display: inline-flex;align-items: center;
    font-family:ubuntu,sans;font-weight: 900;
    justify-content: center;width: 37px;height: 37px;
    color: #fff;font-size: 1.5rem;
    line-height: 1;border-radius: 50%;border: 5px solid #dcdbf6;}
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

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

.btn {
    margin: 20px 0;
    display: inline-block;
    padding: 16px 32px;
    border: 1px solid var(--color-gold);
    background-color: transparent;
    color: var(--color-gold);
    font-family: var(--font-body);
    font-size: .9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s ease;
    max-width: 100%; 
    white-space: nowrap; 
}

.btn:hover {
    background-color: rgba(197,160,89,.1);
}

.btn-primary {
    background-color: var(--color-gold);
    color: var(--color-navy);
    border: 1px solid var(--color-gold);
    font-weight: 500;
}

.btn-primary:hover {
    background-color: var(--color-gold-hover);
    color: var(--color-navy);
}

/* HEADER FIX: Replaced float with Flexbox */
header {
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    font-size: 1.5rem;
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-weight: 600;
}

.clr {
   color: var(--color-text-light);
}

.foo {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

/* RESPONSIVE H1 FIX: 
   clamp(min, preferred, max)
   1. 2.8rem (approx 45px) - Min size for mobile
   2. 5vw       - Fluid scaling based on screen width
   3. 4rem (64px)   - Max size for desktop
*/

/* NARRATIVE PREVIEW FIX: Scrolling container */

footer {
    padding: 60px 0;
    border-top: 1px solid rgba(255,255,255,.1);
    text-align: center;
    color: #ddd;
    font-size: 1.5rem;
}

.footer-tagline {
    display: block;
    margin-top: 10px;
    color: var(--color-gold);
    font-style: italic;
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
    
    .container {
        padding: 0 24px;
    }

    /* Header: Stack vertical */
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 20px 0;
    }
    
    /* 
       The clamp() function on h1 handles the scaling automatically.
       No need to hardcode a smaller size here. 
       However, we reduce line-height slightly on small screens 
       to prevent the two lines from overlapping.
    */

    /* Narrative Preview Wrapper Alignment */

    /* Stack other grids */

    footer {
        font-size: 1.2rem;
    }
}
/* Utility classes for showing/hiding content based on screen size */

/* Hide Mobile Content on Desktop */

/* Hide Desktop Content on Mobile */
/* ============================================================
   RESPONSIVE TOGGLE LOGIC
   ============================================================ */

/* 1. DESKTOP BEHAVIOR (Default - Screens larger than 768px) */
/* By default, we hide the mobile download card */

/* By default, we show the desktop preview */

/* 2. MOBILE BEHAVIOR (Screens smaller than 768px) */
@media (max-width: 768px) {
    
    /* On mobile: HIDE the desktop preview */

    /* On mobile: SHOW the mobile download card */

    /* --- Style the Mobile Card --- */
    .mobile-card {
        background-color: var(--color-navy-light);
        border: 1px solid var(--color-gold);
        padding: 40px 20px;
        text-align: center;
        border-radius: 4px;
        margin-top: 20px;
        /* Ensure it's visible */
        opacity: 1 !important; 
        visibility: visible !important;
    }

    /* --- Other Mobile Fixes --- */
    .container {
        padding: 0 24px;
    }

    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 20px 0;
    }

    footer {
        font-size: 1.2rem;
    }
}
        /* Specific Styles for Pricing Page */
        .pricing-section {
            padding: var(--spacing-section) 0;
            background-color: var(--color-navy);
        }

        .pricing-table {
            display: grid;
            /* 4 Columns: Feature | Observe | Analyze | Assure */
            grid-template-columns: 1fr 1fr 1fr 1fr; 
            gap: 1px; /* Creates border lines */
            background-color: rgba(255, 255, 255, 0.1); /* Border color */
            margin-top: 60px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Headers */
        .pt-header {
            background-color: var(--color-navy-light);
            padding: 20px;
            text-align: center;
        }

        .pt-title {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            color: var(--color-text-light);
            margin-bottom: 10px;
        }

        .pt-price {
            font-size: 1.25rem;
            color: var(--color-gold);
            font-family: var(--font-body);
            font-weight: 700;
        }

        /* Rows */
        .pt-row {
            display: contents;
        }

        .pt-cell {
            background-color: var(--color-navy);
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            min-height: 70px;
            color: var(--color-text-main);
            font-size: 1rem;
        }

        /* First column is the label */
        .pt-cell:first-child {
            background-color: rgba(255, 255, 255, 0.03);
            justify-content: flex-start; /* Align left */
            font-weight: 600;
            color: var(--color-text-light);
            padding-left: 30px;
        }

        /* Highlight the "Analyze" column */
        .pt-cell:nth-child(3) {
            background-color: rgba(229, 192, 121, 0.05);
        }

        .icon-check { color: var(--color-gold); font-size: 1.2rem; }
        .icon-cross { color: var(--color-text-main); opacity: 0.3; font-size: 1.2rem; }

        /* Mobile Responsiveness */
        @media (max-width: 900px) {
            .pricing-table {
                display: none; /* Hide table */
            }

            /* Mobile Cards */
            .mobile-cards-wrapper {
                display: flex;
                flex-direction: column;
                gap: 40px;
            }

            .mobile-card {
                border: 1px solid rgba(255,255,255,0.1);
                background-color: var(--color-navy-light);
                padding: 30px;
            }

            .m-header {
                text-align: center;
                border-bottom: 1px solid rgba(255,255,255,0.1);
                padding-bottom: 20px;
                margin-bottom: 20px;
            }

            .m-title {
                font-family: var(--font-heading);
                font-size: 1.8rem;
                color: var(--color-text-light);
            }

            .m-price {
                color: var(--color-gold);
                font-size: 1.5rem;
                margin-top: 10px;
            }

            .m-list {
                list-style: none;
                padding: 0;
                margin-bottom: 30px;
            }

            .m-list li {
                padding: 10px 0;
                border-bottom: 1px solid rgba(255,255,255,0.05);
                color: var(--color-text-main);
            }
            .m-list li:last-child { border-bottom: none; }
            
            .m-btn {
                width: 100%;
                display: block;
                text-align: center;
            }
        }
        
        @media (min-width: 901px) {
            .mobile-cards-wrapper {
                display: none;
            }
        }