/* Variable Definitions */
:root {
    --grid-unit: 32px;
    --minor-grid-size: 16px;
    --major-grid-size: 80px;
    --grid-color-major: #FFE0E0;
    --grid-color-minor: #FFF0F0;
    --text-color: #000000;
    --bg-color: #FFFFFF;

    /* --- Strict Typography Scale (User Requested) --- */
    --font-huge: 5.4rem;
    /* Hero / Main Titles (90% of 6.0) */
    --font-big: 2.88rem;
    /* Subtitles (H2) (90% of 3.2) */
    --font-medium: 1.89rem;
    /* Main Text, Menus (90% of 2.1) */
    --font-small: 1.53rem;
    /* Languages / Code (90% of 1.7) */
    --font-tiny: 1.125rem;
    /* Footer / Disclaimer (90% of 1.25) */

    /* --- Line Height Scale --- */
    --line-height-tight: 1.05;
    /* Hero, Titles, Compact UI */
    --line-height-normal: 1.35;
    /* Body text, readable content */
    --line-height-relaxed: 1.5;
    /* Long-form reading */

    /* --- Font Weights (No Bold Policy) --- */
    --font-weight-light: 300;
    --font-weight-regular: 400;

    /* --- Responsive Breakpoints --- */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1200px;
    --breakpoint-desktop: 1400px;
    --breakpoint-large: 2048px;

    /* --- Animation Easings --- */
    --easing-luxury: cubic-bezier(0.22, 1, 0.36, 1);
    --easing-heavy: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Font Face Definitions */
@font-face {
    font-family: 'Newfoundation Whyte';
    src: url('../fonts/Newfoundation Whyte/Regular/NewfoundationWhyte-Regular.woff2') format('woff2');
    font-weight: 400;
    /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'Newfoundation Whyte';
    src: url('../fonts/Newfoundation Whyte/Medium/NewfoundationWhyte-Medium.woff2') format('woff2');
    font-weight: 500;
    /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'ABCViafont';
    src: url('../fonts/ABCViafont-Regular-Trial.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

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

html {
    /* Fluid Base Font Size (Responsive Scaling) */
    font-size: clamp(11.2px, 0.7vw, 16px);

    /* 1. THE FOUNDATION: Super Crisp Defaults */
    html,
    body {
        margin: 0;
        padding: 0;
        font-family: 'Newfoundation Whyte', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
        color: var(--text-color);
        background: var(--bg-color);
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        letter-spacing: -0.01em;
        color: var(--text-color);
        background-color: var(--bg-color);
        overflow-x: hidden;
    }

    /* 2. THE NUANCED STRONG: The "Ink" Blend */
    strong,
    b,
    .nuanced-bold {
        /* Step A: The Standard Weight */
        font-weight: 300;

        /* Step B: The Aliasing Switch (The Secret Sauce)
     By switching just these words back to 'auto' or 'subpixel', 
     the browser uses RGB sub-pixels, adding natural density 
     contrasted against the 'antialiased' body. */
        -webkit-font-smoothing: auto;
        -moz-osx-font-smoothing: auto;
        color: #000000;
    }

    /* Global Grain Texture Removed per user request */

    a {
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }

    /* Force no bold on headings per user request */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 300 !important;
    }

    /* ===== ANTIGRAVITY ANIMATION SYSTEM ===== */

    /* Split-Text Base Styling */
    .word {
        display: inline-block;
        overflow: hidden;
    }

    .word .word-inner {
        display: inline-block;
        transform: translateY(100%);
        opacity: 0;
    }

    /* Scroll Velocity Edge Indicators (Proposal E) */
    .scroll-velocity-top,
    .scroll-velocity-bottom {
        position: fixed;
        left: 0;
        width: 100%;
        height: 80px;
        pointer-events: none;
        z-index: 9998;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .scroll-velocity-top {
        top: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), transparent);
    }

    .scroll-velocity-bottom {
        bottom: 0;
        background: linear-gradient(to top, rgba(255, 255, 255, 0.9), transparent);
    }

    /* Sidebars - Fixed with Difference Mode */
    nav.sidebar-left {
        position: fixed;
        top: 2.5rem;
        /* 40px */
        left: 2.5rem;
        width: auto;
        /* Removed max-width */
        z-index: 200;
        mix-blend-mode: difference;
        color: #fff;
        pointer-events: none;
    }

    aside.sidebar-right {
        position: fixed;
        top: 2.5rem;
        right: 2.5rem;
        width: auto;
        min-width: 12.5rem;
        /* 200px */
        text-align: right;
        z-index: 200;
        mix-blend-mode: difference;
        color: #fff;
        pointer-events: none;
    }

    .sidebar-left ul,
    .sidebar-right ul {
        list-style: none;
        pointer-events: auto;
    }

    .sidebar-left li {
        font-weight: var(--font-weight-light);
        font-size: var(--font-medium);
        letter-spacing: -0.01em;
        line-height: var(--line-height-tight);
        margin-bottom: 0.2rem;
        white-space: nowrap;
    }

    /* ===== SUBMENU ITEMS (Architecture) - Just padding, behave like normal links ===== */
    /* ===== SUBMENU ITEMS (Core Concepts) ===== */
    .submenu-parent {
        cursor: pointer;
    }

    /* Submenu Toggle behaves like a link */
    .submenu-toggle {
        cursor: pointer;
        user-select: none;
    }

    /* Optional: Active state style if needed, e.g. opacity change */
    .submenu-toggle.expanded {
        opacity: 1;
    }

    /* Submenu Items - Just adds left padding, otherwise behaves like normal menu items */
    .submenu-item {
        padding-left: 20px;
    }

    /* Utility to hide collapsed items */
    .hidden {
        display: none !important;
    }

    /* Mobile Menu Submenu Styles */
    .mobile-menu-links .submenu-item {
        padding-left: 20px;
    }

    .sidebar-right li {
        font-size: var(--font-small);
        font-weight: var(--font-weight-regular);
        line-height: var(--line-height-tight);
        white-space: nowrap;
    }

    /* Mobile Hamburger & Menu */
    .mobile-menu-btn {
        display: none;
        /* Hidden on desktop */
        position: fixed;
        top: 2.5rem;
        right: 2.5rem;
        z-index: 1000;
        /* Above sidebar */
        background: none;
        border: none;
        width: 2rem;
        height: 2rem;
        cursor: pointer;
        mix-blend-mode: difference;
        pointer-events: auto;
        padding: 0;
    }

    .mobile-menu-btn span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: white;
        position: relative;
        transition: background-color 0.3s ease;
    }

    .mobile-menu-btn span::before,
    .mobile-menu-btn span::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: white;
        left: 0;
        transition: transform 0.3s ease, top 0.3s ease;
    }

    .mobile-menu-btn span::before {
        top: -8px;
    }

    .mobile-menu-btn span::after {
        top: 8px;
    }

    /* Active State (Cross) */
    .mobile-menu-btn.active {
        mix-blend-mode: normal;
        /* Force white on top of dark overlay */
    }

    .mobile-menu-btn.active span {
        background-color: transparent;
    }

    .mobile-menu-btn.active span::before,
    .mobile-menu-btn.active span::after {
        background-color: white;
        /* Ensure white */
    }

    .mobile-menu-btn.active span::before {
        top: 0;
        transform: rotate(45deg);
    }

    .mobile-menu-btn.active span::after {
        transform: rotate(-45deg);
    }

    #splashCanvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        transition: filter 0.5s ease, opacity 0.5s ease;
        /* Blue glow removed */
    }

    .mobile-menu-overlay {
        /* Glassmorphism / Brutalist Black */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: black;
        /* Solid Black */
        backdrop-filter: none;
        /* No blur needed if solid black */
        -webkit-backdrop-filter: none;
        z-index: 999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        /* Align Left */
        padding-left: 2.5rem;
        /* Match sidebar margin */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

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

    .mobile-menu-links {
        list-style: none;
        text-align: left;
        /* Align Left */
    }

    /* Mobile Menu Logo */
    .mobile-menu-logo-link {
        position: absolute;
        top: 2.5rem;
        left: 2.5rem;
        z-index: 1001;
    }

    .mobile-menu-logo {
        width: 4rem;
        height: auto;
        filter: invert(1);
        display: block;
        margin: 0;
        margin-bottom: 1rem;
    }

    .mobile-menu-links li {
        margin: 2.5rem 0;
        /* Increased line spacing/margin from 1.5rem */
    }

    .mobile-menu-links a,
    .mobile-menu-links .nav-link {
        font-size: var(--font-medium);
        /* +10% from 2.1 */
        /* Reduced by 30% from 3rem */
        color: #ffffff;
        font-weight: var(--font-weight-light);
        text-decoration: none;
    }

    /* Center Content Column */
    main {
        width: 63.75%;
        max-width: 90rem;
        /* Reduced width difference by 75% (60 -> 75 = 15 diff. 15 * 0.25 = 3.75. 60+3.75 = 63.75) */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 50;
        padding-top: 8.75rem;
        /* 140px */
    }

    /* Brand Header */
    .brand-header {
        position: fixed;
        top: 2.5rem;
        left: 0;
        width: 100%;
        text-align: center;
        /* Centered */
        z-index: 300;
        mix-blend-mode: difference;
        color: #fff;
        pointer-events: none;
    }

    .brand-header h1 {
        font-size: var(--font-medium);
        font-weight: 400;
        /* Bolder weight */
        line-height: 1.2;
        letter-spacing: -0.02em;
        /* Tighter tracking */
        margin: 0;
        pointer-events: auto;
        cursor: pointer;
        display: inline-block;
    }



    /* Hero Video Background */
    /* Hero Video Background */
    .hero-video-container {
        position: absolute;
        top: -8.75rem;
        /* Counteract main padding */
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 55vh;
        /* Height to reach halfway to abstract */
        z-index: -1;
        overflow: hidden;
        pointer-events: none;
    }

    .hero-video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Hero Headline */
    /* Hero Headline */
    .hero-headline {
        text-align: left;
        margin-top: 10rem;
        margin-bottom: 0rem;
        width: 100%;
        max-width: none;
        /* Remove 900px limit site-wide */
        margin-left: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    /* Homepage Title Breakout - Full Width */
    .hero-headline.hero-headline-home {
        width: 100vw !important;
        position: relative;
        left: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        max-width: none !important;
        /* Padding to ensure text doesn't touch edges on small screens */
        padding-left: 5vw;
        padding-right: 5vw;
        box-sizing: border-box;
        text-align: center !important;
    }

    .hero-headline h2 {
        font-size: var(--font-huge);
        /* -10% from 5.56 */
        /* ~80px */
        font-weight: var(--font-weight-light);
        line-height: var(--line-height-tight);
        letter-spacing: -0.04em;
        /* Tighter tracking */
        white-space: normal;
        /* Allow wrapping */
        max-width: 100%;
        word-wrap: normal;
    }

    /* Force center alignment for breakout title */
    .hero-headline.hero-headline-home h2 {
        text-align: center !important;
        width: 100%;
        margin: 0 auto;
    }

    /* Abstract / Introduction */
    .intro-text {
        font-size: var(--font-small);
        font-weight: var(--font-weight-light);
        line-height: var(--line-height-normal);
        text-align: left;
        width: 550px;
        /* Fixed width */
        margin: 30px auto 10rem auto;
        /* Closer to headline */
        /* Increased vertical breathing room */


    }

    .intro-text p {
        position: relative;
        /* Ensure stacking context */
        z-index: 10;
    }

    /* Content Sections */
    .content-block {
        width: 100%;
        max-width: none;
        /* Remove 900px constraint */
        /* The parent <main> is already 63.75% / max 90rem. */
        /* So setting width: 100% here makes it fill that container. */
        margin-left: auto;
        margin-right: auto;
        margin-top: 10rem;
        /* Add top margin for breathing room */
        margin-bottom: 10rem;
        /* Increased separation */
        position: relative;
    }

    .content-block h3 {
        font-size: var(--font-huge);
        /* -10% from 5.0 */
        /* 72px */
        font-weight: var(--font-weight-regular);
        letter-spacing: -0.02em;
        margin-top: 20rem !important;
        margin-bottom: 1.25rem;
        /* Reduced Gap (was 2.5rem) */
        /* 20px */
        text-align: left;
        line-height: var(--line-height-tight);
    }

    .content-block h2 {
        font-size: var(--font-big);
        /* -10% from 3.875 */
        /* ~56px */
        font-weight: 500;
        letter-spacing: -0.02em;
        text-align: left;
        color: #000000;
        margin-bottom: 10px;
        /* Gap before paragraph */
    }

    /* ===== FAQ STYLING ===== */
    .faq-section {
        margin-top: 8rem;
    }

    .faq-item {
        border-bottom: 1px solid rgba(128, 128, 128, 0.4);
        /* Grey Border */
        margin-bottom: 0;
        overflow: hidden;
        /* For animation containment */
    }

    /* Summary styling */
    .faq-question {
        font-size: var(--font-medium);
        font-weight: var(--font-weight-light);
        /* Lighter weight */
        cursor: pointer;
        list-style: none;
        /* Hide default marker */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2.5rem 0;
        /* Equal vertical spacing */
        text-shadow: none;
        /* Remove faux bold */
        -webkit-text-stroke: 0;
        /* Remove faux bold */
        transition: color 0.3s ease;
        user-select: none;
        outline: none;
    }

    /* Hide default marker in Webkit */
    .faq-question::-webkit-details-marker {
        display: none;
    }

    /* Plus Icon */
    .faq-question::after {
        content: '+';
        font-size: 2.5rem;
        font-weight: 300;
        line-height: 1;
        transform-origin: center;
        transition: transform 0.4s var(--easing-luxury, cubic-bezier(0.22, 1, 0.36, 1));
        margin-left: 1rem;
    }

    /* Open State - Rotate to X (45deg) */
    .faq-item[open] .faq-question::after {
        transform: rotate(45deg);
    }

    /* Answer Content Animation */
    .faq-answer-wrapper {
        overflow: hidden;
        /* Ensure content is clipped during animation */
    }

    .faq-answer-inner {
        padding-bottom: 2rem;
        opacity: 0.9;
    }

    .content-block ul,
    .content-block ol {
        margin-bottom: 2.5rem;
        padding-left: 2rem;
        list-style: disc;
        /* Ensure bullets */
    }

    .content-block ol {
        list-style: decimal;
    }

    .content-block li {
        font-size: var(--font-medium);
        /* ~29px */
        font-weight: var(--font-weight-light);
        line-height: var(--line-height-normal);
        margin-bottom: 0;
        /* Compact: No line breaks */


    }

    .content-block p {
        font-size: var(--font-medium);
        /* ~29px */
        font-weight: var(--font-weight-light);
        line-height: var(--line-height-normal);
        margin-top: 2rem;
        margin-bottom: 2.5rem;



        /* Paragraph reveal base state */
        opacity: 0;
        transform: translateY(20px);
    }

    /* ===== CMS CODE BLOCKS ===== */
    .cms-code-block {
        position: relative;
        background-color: #000000;
        border-radius: 12px;
        padding: 3.5rem;
        /* Increased padding */
        margin-bottom: 2.5rem;
        overflow: hidden;
    }

    .cms-code-block pre {
        font-family: 'ABCViafont', monospace;
        font-size: var(--font-small);
        /* +10% from 1.25 */
        /* ~22px */
        line-height: var(--line-height-tight);
        color: #FFFFFF;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .code-copy-btn {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: transparent;
        border: none;
        width: 3rem;
        /* Bigger touch target */
        height: 3rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .code-copy-btn:hover {
        background: transparent;
    }

    .code-copy-btn .icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .code-copy-btn svg {
        /* Sized by inner SVG attributes now (24px) */
        width: 24px;
        height: 24px;
    }

    /* Checkbox animation handled via JS transforms on .icon-wrapper */
    .code-copy-btn.copied {
        background: transparent;
    }

    /* Footnotes */
    .footnotes {
        margin-top: 5rem;
        width: 100%;
        max-width: 100%;
    }

    .footnotes p {
        font-size: var(--font-tiny);
        /* +10% from 0.78 */
        /* ~13.7px */
        line-height: var(--line-height-normal);
        margin-bottom: 0.5rem;
    }

    /* Small Text Utility */
    .text-small {
        font-size: var(--font-tiny);
        font-weight: var(--font-weight-light);
        line-height: var(--line-height-tight);
    }

    /* Tiny Text Utility (CMS: font-size 8pt) */
    .text-tiny {
        font-size: var(--font-tiny);
        font-weight: var(--font-weight-light);
        line-height: var(--line-height-tight);
        opacity: 0.8;
    }

    /* Responsive & Mobile */
    @media (max-width: 1400px) {
        main {
            width: 90%;
        }
    }

    @media (max-width: 1200px) {

        /* Hide Sidebars, Show Hamburger */
        nav.sidebar-left,
        aside.sidebar-right {
            display: none;
        }

        .mobile-menu-btn {
            display: block;
        }

        .brand-header h1 {
            font-size: 3.75rem;
        }

        .hero-headline h2 {
            font-size: 3.75rem;
            /* 60px */
        }
    }

    @media (max-width: 768px) {
        html {
            /* On mobile, reset fluid base to be large enough */
            font-size: 11.2px;
            /* Fixed base for mobile logic to be predictable */
        }

        .intro-text,
        .globe-container {
            width: 90%;
        }

        .brand-header h1 {
            font-size: 1.8rem;
            /* Scale down for phone */
        }

        .hero-headline h2 {
            font-size: 3rem;
            letter-spacing: -1px;
        }
    }

    /* ===== SITE FOOTER (Final v3 Layout - Grid) ===== */
    .site-footer {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 35rem 2.5rem 5rem 2.5rem;
        /* Reverted side padding, kept top padding */
        position: relative;
        z-index: 50;
        font-family: inherit;
        display: flex;
        flex-direction: column;
        gap: 4rem;
        /* Reduced internal gap */
    }

    /* --- Rows as Grids --- */
    .footer-top-row,
    .footer-bottom-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* 4 Equal Columns */
        gap: 2rem;
        width: 100%;
        align-items: start;
    }

    .footer-col {
        display: flex;
        flex-direction: column;
    }

    /* Links */
    .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-links li {
        margin-bottom: 0.2rem;
    }

    .footer-links a,
    .footer-legal-link {
        font-size: var(--font-small);
        font-weight: var(--font-weight-light);
        text-decoration: none;
        line-height: var(--line-height-tight);
        color: currentColor;
        display: block;
    }

    /* Brand Column Styles */
    /* Match Header Style: .brand-header h1 (1.94rem, 500 weight) */
    .footer-brand-title {
        font-size: var(--font-small);
        font-weight: 400;
        letter-spacing: -0.01em;
        margin: 0 0 1rem 0;
        line-height: 1.2;
        color: currentColor;
    }

    .footer-copyright {
        font-size: var(--font-small);
        font-weight: var(--font-weight-light);
    }


    /* --- Middle Row (Disclaimer) --- */
    /* --- Middle Row (Disclaimer) --- */
    .footer-disclaimer {
        width: 100%;
        display: block;
        opacity: 1;
        padding: 0;
        box-sizing: border-box;
        mix-blend-mode: difference;
        /* Ensure text is visible against bg */
        line-height: 1.4;
        /* More readable line height */
    }

    .footer-disclaimer p {
        font-size: var(--font-tiny);
        color: currentColor;
        /* Use inherited color (usually black/white) */
        opacity: 0.6;
        /* 60% opacity for "grey" look but robust */
        display: inline;
        margin-right: 0.5rem;
        line-height: 1.4;
        /* More readable line height */
    }

    @media (prefers-color-scheme: dark) {
        .footer-disclaimer p {
            opacity: 0.6;
        }
    }


    /* --- Bottom Row Specifics --- */
    .footer-bottom-row {
        align-items: flex-end;
        /* Align items to bottom of row */
    }

    /* Logo in 4th Column, aligned Right */
    .footer-col-logo {
        align-items: flex-end;
    }

    .footer-logo-link {
        display: block;
        line-height: 0;
        /* Fix anchor height quirks */
    }

    .footer-globe {
        width: 4.8vw;
        /* Adaptive size, 40% smaller */
        max-width: 66px;
        /* Cap size */
        height: auto;
        cursor: pointer;
        transition: opacity 0.3s ease;
        /* Removed blend modes for reliable visibility */
    }

    .footer-globe:hover {
        opacity: 0.8;
    }


    /* --- Mobile Footer --- */
    @media (max-width: 1024px) {
        .site-footer {
            padding-top: 10rem;
            padding-left: 0;
            padding-right: 0;
            width: 90%;
            margin: 0 auto;
            gap: 5rem;
        }

        .footer-top-row,
        .footer-bottom-row {
            grid-template-columns: 1fr;
            /* Stack columns */
            gap: 3rem;
        }

        .footer-col-logo {
            align-items: flex-end;
            /* Right align logo on mobile */
        }
    }

    @media (min-width: 2048px) {
        :root {
            --font-medium: 1.692rem;
            /* 90% of 1.88 */
            --font-big: 2.502rem;
            /* 90% of 2.78 */
        }
    }

    /* Minimalist Table Styling (Global for Content Blocks) */
    .content-block table {
        width: 100%;
        border-collapse: collapse;
        margin: 3rem 0;
        font-size: var(--font-small);
    }

    .content-block th,
    .content-block td {
        padding: 1.25rem 1rem;
        text-align: left;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        vertical-align: top;
    }

    .content-block th {
        font-family: 'Newfoundation Whyte', sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: var(--font-tiny);
        opacity: 0.6;
        padding-bottom: 1rem;
    }

    .content-block td {
        font-weight: var(--font-weight-light);
        line-height: var(--line-height-normal);
        color: #000;
    }

    .content-block tr:last-child td {
        border-bottom: none;
    }
}