/* ============================== */
        /* Cognition Co Colour Variables  */
        /* ============================== */
        :root {
            --deep-space-blue: #003049;
            --flag-red: #d62828;
            --vivid-tangerine: #f77f00;
            --sunflower-gold: #fcbf49;
            --vanilla-custard: #eae2b7;
            /* Semantic Variables - Dark Mode Default */
            --graphite-black: #001524;
            --graphite-dark: #00223A;
            --graphite-border: #00446A;
            --lime-primary: #f77f00;
            --lime-hover: #fcbf49;
            --cognition-blue: #003049;
            --cognition-red: #d62828;
            --cognition-cream: #eae2b7;
            --text-main: #eae2b7;
            --text-muted: rgba(234, 226, 183, 0.7);
            --sunflower: #fcbf49;
        }

        .light-mode {
            --graphite-black: #f5f0dc;
            --graphite-dark: #ffffff;
            --graphite-border: rgba(0, 48, 73, 0.2);
            --lime-primary: #f77f00;
            --lime-hover: #fcbf49;
            --cognition-blue: #003049;
            --cognition-red: #d62828;
            --cognition-cream: #eae2b7;
            --text-main: #003049;
            --text-muted: rgba(0, 48, 73, 0.7);
            --sunflower: #fcbf49;
        }

        @keyframes scroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-33.33%);
            }
        }

        .animate-scroll {
            animation: scroll 30s linear infinite;
        }

        /* Sun icon color */
        .text-sunflower {
            color: #fcbf49;
        }

        /* ============================== */
        /* Light Mode Overrides           */
        /* ============================== */

        /* --- Logo theme switching --- */
        /* CSS Grid perfectly overlaps images to exactly the same maximum dimensions, guaranteeing no width jumps */
        .logo-wrapper {
            display: grid;
            grid-template-areas: "logo";
            place-items: center;
        }

        .logo-dark-mode,
        .logo-light-mode {
            grid-area: logo;
            transition: opacity 0.3s ease;
        }

        .logo-dark-mode {
            opacity: 1;
            pointer-events: auto;
        }

        .logo-light-mode {
            opacity: 0;
            pointer-events: none;
        }

        .light-mode .logo-dark-mode {
            opacity: 0 !important;
        }

        .light-mode .logo-light-mode {
            opacity: 1 !important;
            pointer-events: auto;
        }



        /* --- Transition all themed elements --- */
        .light-mode,
        .light-mode * {
            transition-property: background-color, border-color, color, fill, stroke, box-shadow;
            transition-duration: 0.3s;
            transition-timing-function: ease;
        }

        /* --- Page background --- */
        .light-mode body {
            color: #003049;
        }

        .light-mode #motion-background-container {
            background-color: #eae2b7 !important;
        }

        .light-mode #motion-pattern {
            opacity: 0.25 !important;
        }

        .light-mode #motion-spotlight {
            background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 48, 73, 0.12), transparent 400px) !important;
        }

        /* --- Theme Variables for Matrix --- */
        :root {
            --matrix-color: #f77f00;
        }

        .light-mode {
            --matrix-color: #003049;
        }

        /* --- Navigation --- */
        .light-mode nav {
            background-color: rgba(234, 226, 183, 0.92) !important;
            border-bottom-color: #c9c19a !important;
        }

        .light-mode nav .text-text-main,
        .light-mode nav span.text-text-main {
            color: #003049 !important;
        }

        .light-mode nav .text-text-muted {
            color: #4a6274 !important;
        }

        .light-mode nav .text-text-muted:hover {
            color: #d62828 !important;
            /* Flag Red for better contrast than orange */
        }

        .light-mode .theme-toggle-btn {
            background-color: rgba(0, 48, 73, 0.08) !important;
            border-color: #c9c19a !important;
        }

        /* Toggle icon swap */
        .light-mode #theme-icon-sun {
            opacity: 0;
            transform: scale(0.5) rotate(90deg);
        }

        .light-mode #theme-icon-moon {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        .dark-mode #theme-icon-sun {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        .dark-mode #theme-icon-moon {
            opacity: 0;
            transform: scale(0.5) rotate(-90deg);
        }

        /* --- Text colours --- */
        .light-mode .text-text-main {
            color: #003049 !important;
        }

        .light-mode .text-text-main {
            color: #003049 !important;
        }

        .light-mode .text-text-muted {
            color: rgba(0, 48, 73, 0.7) !important;
            /* Deep Space Blue faded */
        }

        .light-mode .prose-markdown {
            color: #003049 !important;
        }

        .light-mode .prose-markdown h1,
        .light-mode .prose-markdown h2,
        .light-mode .prose-markdown h3,
        .light-mode .prose-markdown h4 {
            color: #003049 !important;
        }

        /* Hero Text Contrast Fix */
        .light-mode .light-mode-hero-accent {
            color: #f77f00 !important;
            /* Vivid Tangerine for accent against Deep Space Blue */
        }

        /* --- Background colours --- */
        .light-mode .bg-graphite-black {
            background-color: #f5f0dc !important;
        }

        .light-mode .bg-graphite-dark {
            background-color: #ffffff !important;
        }

        .light-mode .bg-graphite-black\/90 {
            background-color: rgba(234, 226, 183, 0.92) !important;
        }

        .light-mode .bg-graphite-dark\/30 {
            background-color: rgba(0, 48, 73, 0.04) !important;
        }

        .light-mode .bg-graphite-black\/50 {
            background-color: rgba(234, 226, 183, 0.5) !important;
        }

        .light-mode .bg-gray-700 {
            background-color: #c9c19a !important;
        }

        .light-mode .bg-gray-500 {
            background-color: #8a816a !important;
        }

        .light-mode .bg-gray-600 {
            background-color: #6b8a9e !important;
        }

        /* --- Borders --- */
        .light-mode .border-graphite-border {
            border-color: rgba(0, 48, 73, 0.2) !important;
        }

        .light-mode .border-graphite-border\/30 {
            border-color: rgba(0, 48, 73, 0.05) !important;
        }

        .light-mode .border-graphite-border\/50 {
            border-color: rgba(0, 48, 73, 0.1) !important;
        }

        /* --- Cards & Surfaces --- */
        .light-mode .glow-card {
            background-color: #ffffff !important;
            box-shadow: 0 1px 3px rgba(0, 48, 73, 0.08) !important;
        }

        .light-mode .glow-border {
            border-color: #f77f00 !important;
        }

        .light-mode .glow-inner {
            background-color: rgba(247, 127, 0, 0.05) !important;
        }

        /* --- CTA Footer section (vivid tangerine bg) --- */
        .light-mode section.bg-lime-primary {
            background-color: #003049 !important;
        }

        .light-mode section.bg-lime-primary .text-graphite-black {
            color: #eae2b7 !important;
        }

        .light-mode section.bg-lime-primary h2 {
            color: #eae2b7 !important;
        }

        .light-mode section.bg-lime-primary p {
            color: #eae2b7 !important;
        }

        .light-mode section.bg-lime-primary a {
            background-color: #f77f00 !important;
            color: #001524 !important;
        }

        .light-mode section.bg-lime-primary a:hover {
            background-color: #fcbf49 !important;
        }

        /* --- Footer --- */
        .light-mode #site-footer {
            background-color: #003049 !important;
            border-top-color: rgba(234, 226, 183, 0.2) !important;
        }

        .light-mode #site-footer .text-text-main {
            color: #eae2b7 !important;
        }

        .light-mode #site-footer .text-text-muted {
            color: #eae2b7 !important;
        }

        .light-mode #site-footer .text-text-muted {
            color: rgba(234, 226, 183, 0.9) !important;
        }

        .light-mode #site-footer .text-text-muted {
            color: rgba(234, 226, 183, 0.8) !important;
        }

        .light-mode #site-footer .border-graphite-border {
            border-color: rgba(234, 226, 183, 0.15) !important;
        }

        .light-mode #site-footer .border-graphite-border {
            border-color: rgba(234, 226, 183, 0.2) !important;
        }

        .light-mode #site-footer a:hover {
            color: #f77f00 !important;
        }

        /* --- Pricing section --- */
        .light-mode .peer-checked\:bg-lime-primary:checked~div,
        .light-mode .peer:checked~div {
            background-color: #f77f00 !important;
        }

        /* Badges - use vivid tangerine */
        .light-mode .bg-lime-primary.text-black.text-xs {
            background-color: #f77f00 !important;
            color: #001524 !important;
        }

        /* --- Process step circles --- */
        .light-mode [class*="border-4"][class*="border-lime-primary"] {
            border-color: #f77f00 !important;
            background-color: #003049 !important;
            color: #eae2b7 !important;
        }

        /* --- Range inputs --- */
        .light-mode input[type="range"] {
            background-color: #c9c19a !important;
        }

        /* --- Security section --- */
        .light-mode .bg-lime-primary\/5 {
            background-color: rgba(247, 127, 0, 0.05) !important;
        }

        .light-mode .bg-lime-primary\/10 {
            background-color: rgba(247, 127, 0, 0.1) !important;
        }

        /* --- Founder avatar --- */
        .light-mode .bg-lime-primary.flex.items-center.justify-center {
            background-color: #003049 !important;
            color: #fcbf49 !important;
        }

        /* --- Sticky FAB --- */
        .light-mode #sticky-fab a {
            background-color: #003049 !important;
            color: #fcbf49 !important;
            border-color: #eae2b7 !important;
            box-shadow: 0 10px 25px rgba(0, 48, 73, 0.3) !important;
        }

        /* --- Gradient fades on marquee --- */
        .light-mode .from-\[\#001524\] {
            --tw-gradient-from: #eae2b7 !important;
            --tw-gradient-to: rgba(234, 226, 183, 0) !important;
            --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
        }

        /* --- Mobile menu override --- */
        .light-mode #navbar-sticky ul {
            background-color: transparent !important;
            border-color: transparent !important;
        }

        @media (max-width: 767px) {
            .light-mode #navbar-sticky ul {
                background-color: #f5f0dc !important;
                border-color: #c9c19a !important;
            }

            /* Enhanced Touch Targets */
            input[type="range"]::-webkit-slider-thumb {
                height: 32px;
                width: 32px;
            }

            input[type="range"]::-moz-range-thumb {
                height: 32px;
                width: 32px;
            }
        }
    

/* Markdown content */
.prose-markdown{max-width:48rem;margin-left:auto;margin-right:auto;}
.prose-markdown h1{font-size:2.25rem;font-weight:800;margin-bottom:1rem;line-height:1.2;}
.prose-markdown h2{font-size:1.875rem;font-weight:700;margin-top:2rem;margin-bottom:1rem;line-height:1.3;}
.prose-markdown h3{font-size:1.5rem;font-weight:600;margin-top:1.5rem;margin-bottom:0.75rem;}
.prose-markdown h4{font-size:1.25rem;font-weight:600;margin-top:1.25rem;margin-bottom:0.5rem;}
.prose-markdown p{margin-bottom:1rem;line-height:1.75;}
.prose-markdown ul,.prose-markdown ol{margin-bottom:1rem;padding-left:1.5rem;}
.prose-markdown li{margin-bottom:0.5rem;}
.prose-markdown a{color:#f77f00;text-decoration:underline;}
.prose-markdown a:hover{color:#fcbf49;}
.prose-markdown blockquote{border-left:4px solid #f77f00;padding-left:1rem;margin:1rem 0;font-style:italic;opacity:0.95;}
.prose-markdown table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.875rem;}
.prose-markdown th,.prose-markdown td{border:1px solid rgba(0,68,106,0.5);padding:0.5rem 0.75rem;}
.prose-markdown th{background:rgba(0,34,58,0.5);text-align:left;}
.light-mode .prose-markdown th{background:rgba(0,48,73,0.08);}
.prose-markdown code{background:rgba(0,34,58,0.5);padding:0.1rem 0.3rem;border-radius:0.25rem;font-size:0.875em;}
.prose-markdown pre{background:#001524;padding:1rem;border-radius:0.5rem;overflow-x:auto;margin:1rem 0;}
.light-mode .prose-markdown code{background:rgba(0,48,73,0.08);}
.prose-markdown hr{margin:2rem 0;border-color:rgba(0,68,106,0.4);}