:root {
            --color-black: #0a0a0a;
            --color-white: #ffffff;
            --color-off-white: #f5f5f5;
            --color-gray-200: #e0e0e0;
            --color-gray-300: #a7a9a9;
            --color-gray-400: #808080;
            --color-gray-700: #4a4a4a;
            --color-primary: #2C5282;
            --color-primary-hover: #1e3a52;
            --color-border: #333333;
            --color-bg-light: #1a1a1a;
            
            --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
            --font-size-xs: 11px;
            --font-size-sm: 12px;
            --font-size-base: 14px;
            --font-size-lg: 16px;
            --font-size-xl: 18px;
            --font-size-2xl: 20px;
            --font-size-3xl: 24px;
            --font-size-4xl: 32px;
            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;
            --line-height-tight: 1.2;
            --line-height-normal: 1.5;
            --line-height-relaxed: 1.7;
            
            --space-4: 4px;
            --space-8: 8px;
            --space-12: 12px;
            --space-16: 16px;
            --space-20: 20px;
            --space-24: 24px;
            --space-32: 32px;
            --space-48: 48px;
            --space-64: 64px;
            
            --radius-md: 8px;
            --radius-lg: 12px;
            
            --duration-normal: 250ms;
            --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
        }

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

        html {
            font-size: var(--font-size-base);
            font-family: var(--font-family-base);
            line-height: var(--line-height-normal);
            color: var(--color-off-white);
            background-color: var(--color-black);
            -webkit-font-smoothing: antialiased;
        }

        body {
            background-color: var(--color-black);
        }

        h1, h2, h3, h4, h5, h6 {
            margin: 0;
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-tight);
            color: var(--color-white);
        }

        h1 { font-size: var(--font-size-4xl); }
        h2 { font-size: var(--font-size-2xl); margin-top: var(--space-32); margin-bottom: var(--space-16); }
        h3 { font-size: var(--font-size-lg); margin-top: var(--space-24); margin-bottom: var(--space-12); }
        h4 { font-size: var(--font-size-base); margin-top: var(--space-20); margin-bottom: var(--space-8); }

        p {
            margin: 0 0 var(--space-16) 0;
            color: var(--color-gray-300);
            line-height: var(--line-height-relaxed);
        }

        a {
            color: #a8a8a8;
            text-decoration: underline;
            transition: color var(--duration-normal) var(--ease-standard);
        }

        a:hover {
            color: #ffffff;
        }

        li {
            margin-bottom: var(--space-8);
        }

        strong {
            color: var(--color-white);
            font-weight: var(--font-weight-semibold);
        }

        code {
            background-color: rgba(44, 82, 130, 0.2);
            padding: var(--space-4) var(--space-8);
            border-radius: var(--radius-md);
            font-family: "Monaco", "Courier New", monospace;
            font-size: var(--font-size-sm);
            color: var(--color-off-white);
        }

        /* ============== CONTAINER ============== */
        .legal-container {
            display: flex;
            min-height: 100vh;
            background-color: var(--color-black);
        }

        /* ============== SIDEBAR ============== */
.legal-sidebar {
    width: 280px;
    padding: var(--space-32) 0;
    position: sticky;
    top: 100px; /* Adjusted to account for header height */
    max-height: calc(100vh - 100px); /* Match the top value */
    overflow-y: auto;
    flex-shrink: 0;
}

.sidebar-header {
    padding: 0 var(--space-24);
    margin-bottom: var(--space-32);
}

.sidebar-header h3 {
    font-size: var(--font-size-lg);
    margin: 0;
    color: var(--color-white);
    margin-bottom: var(--space-8);
}

.sidebar-subtext {
    font-size: var(--font-size-sm);
    color: var(--color-gray-300);
    line-height: var(--line-height-normal);
}

.sidebar-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-nav li {
    margin: 0;
}

.sidebar-nav a {
    text-decoration: none;
    display: block;
    padding: var(--space-16) var(--space-24);
    color: var(--color-gray-300);
    font-size: var(--font-size-md);
    transition: all var(--duration-normal) var(--ease-standard);
    border-left: 3px solid transparent;
}

.sidebar-nav a:hover {
    color: #ffffff;
}

.sidebar-nav a.active {
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
}


        /* ============== MAIN CONTENT ============== */
        .legal-main {
            flex: 1;
            padding: var(--space-64) var(--space-48);
            max-width: 900px;
        }

        .legal-header {
            margin-bottom: var(--space-48);
            padding-bottom: var(--space-32);
            border-bottom: 1px solid var(--color-border);
        }

        .legal-header h1 {
            margin-bottom: var(--space-8);
        }

        .legal-meta {
            font-size: var(--font-size-sm);
            color: var(--color-gray-300);
            display: flex;
            gap: var(--space-16);
            flex-wrap: wrap;
        }

        .legal-meta-item {
            display: flex;
            align-items: center;
            gap: var(--space-4);
        }

        .legal-content {
            color: var(--color-gray-300);
        }

        .legal-content h2 {
            scroll-margin-top: 80px;
        }

        .legal-content h3 {
            scroll-margin-top: 80px;
        }

        .section {
            margin-bottom: var(--space-48);
        }

        .highlight {
            background-color: rgba(44, 82, 130, 0.1);
            border-left: 4px solid var(--color-primary);
            padding: var(--space-16) var(--space-20);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            margin: var(--space-24) 0;
        }

        .highlight p {
            margin: 0;
        }

        /* ============== FOOTER ============== */
        .legal-footer {
            margin-top: var(--space-64);
            padding-top: var(--space-32);
            border-top: 1px solid var(--color-border);
            font-size: var(--font-size-sm);
            color: var(--color-gray-300);
        }

        .legal-footer p {
            margin-bottom: var(--space-8);
        }

        /* ============== RESPONSIVE ============== */
        @media (max-width: 1024px) {
            .legal-main {
                padding: var(--space-48) var(--space-32);
                max-width: 100%;
            }

            .legal-sidebar {
                width: 240px;
            }
        }

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

.legal-sidebar {
width: 100%;
max-height: none;
border-right: none;
border-bottom: none;
border-top: 1px solid var(--color-border);
padding: var(--space-20) 0;
position: static;
}


            .sidebar-header {
                padding: 0 var(--space-20);
                margin-bottom: var(--space-16);
            }

            .sidebar-nav a {
                padding: var(--space-12) var(--space-20);
                font-size: var(--font-size-sm);
            }

            .legal-main {
                padding: var(--space-32) var(--space-20);
                max-width: 100%;
            }

            .legal-header {
                margin-bottom: var(--space-32);
            }

            .legal-header h1 {
                font-size: var(--font-size-2xl);
            }

            .table-of-contents {
                padding: var(--space-16);
            }

            .section {
                margin-bottom: var(--space-32);
            }
        }

        @media (max-width: 480px) {
            .legal-main {
                padding: var(--space-20) var(--space-16);
            }

            .legal-header h1 {
                font-size: 34px;
            }

            .legal-meta {
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-12);
font-size: var(--font-size-xs);
}

.legal-meta strong {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--color-gray-300);
}

.legal-meta span {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--color-gray-300);
}


            .table-of-contents {
                padding: var(--space-12);
            }

            .table-of-contents h3 {
                font-size: var(--font-size-base);
            }

            .highlight {
                padding: var(--space-12) var(--space-16);
            }
        }

        /* ============== SCROLLBAR ============== */
        .legal-sidebar::-webkit-scrollbar {
            width: 6px;
        }

        .legal-sidebar::-webkit-scrollbar-track {
            background: transparent;
        }

        .legal-sidebar::-webkit-scrollbar-thumb {
            background: var(--color-border);
            border-radius: 3px;
        }

        .legal-sidebar::-webkit-scrollbar-thumb:hover {
            background: var(--color-gray-300);
        }

 /* 1. Force Section 10 Email to the left */
.contact-info {
    text-align: left !important;
    display: block !important;
    margin-left: 0 !important;
}

/* 2. Fix Footer Alignment Issues */
.footer-column {
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns contents of the column to the left */
}

.footer-links {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    list-style: none;
}

.footer-links li {
    text-align: left;
}

/* 3. Global safeguard for legal content */
.legal-content h2, 
.legal-content p {
    text-align: left !important;
}

@media (max-width: 330px) {
    .sidebar-nav a {
        padding: var(--space-12) var(--space-20);
        font-size: 14px;
    }
}