/* Header + mobile menu, shared by the localized landing pages and the
 * standalone /blog and /affiliate pages. It used to live inline in
 * index.template.html, which meant the standalone pages rendered the header
 * markup with no styling at all. */
#main-header {
            isolation: isolate;
            min-height: 108px;
            padding: var(--space-6) clamp(var(--space-5), 3vw, var(--space-10));
            color: #fff;
            border-bottom: 1px solid rgba(255, 255, 255, var(--a-10)) !important;
            background:
                linear-gradient(90deg, rgba(5, 7, 10, var(--a-30)) 0%, rgba(17, 20, 26, var(--a-08)) 48%, rgba(5, 7, 10, var(--a-24)) 100%) !important;
            box-shadow: var(--shadow-2);
            -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(120%);
            backdrop-filter: blur(var(--blur-sm)) saturate(120%);
            transition: min-height var(--dur-slow) ease, padding var(--dur-slow) ease, background var(--dur-slow) ease, border-color var(--dur-slow) ease, box-shadow var(--dur-slow) ease !important;
        }

        #main-header::before {
            position: absolute;
            inset: 0;
            z-index: var(--z-base);
            background: linear-gradient(105deg, rgba(255, 255, 255, var(--a-04)), transparent 27%, transparent 73%, rgba(255, 255, 255, var(--a-04)));
            content: '';
            pointer-events: none;
        }

        #main-header>* {
            position: relative;
            z-index: var(--z-raised);
        }

        #main-header .site-header__brand {
            display: inline-flex;
            gap: var(--space-2);
            align-items: center;
            flex: 0 0 auto;
            color: #fff;
            background: none;
            -webkit-text-fill-color: currentColor;
            letter-spacing: var(--tracking-tighter);
            white-space: nowrap;
        }

        #main-header .site-header__logo {
            width: 30px;
            height: 30px;
            flex: 0 0 auto;
            border-radius: var(--radius-sm);
            object-fit: contain;
        }

        #main-header .site-header__links {
            position: absolute;
            left: 50%;
            gap: clamp(var(--space-4), 2vw, var(--space-8));
            transform: translateX(-50%);
        }

        #main-header .site-header__links a {
            color: rgba(255, 255, 255, var(--a-85));
            font-size: var(--text-sm);
            font-weight: var(--weight-semibold);
            letter-spacing: var(--tracking-tight);
            line-height: var(--leading-normal);
            padding-block: var(--space-1);
        }

        #main-header .site-header__links a:hover {
            color: #fff;
        }

        #main-header .site-header__actions {
            display: flex;
            align-items: center;
            flex: 0 0 auto;
            gap: var(--space-3);
            margin-left: auto;
        }

        #main-header .site-header__login,
        #main-header .site-header__cta {
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 0 var(--space-5);
            border-radius: var(--radius-full);
            font-size: var(--text-sm);
            font-weight: var(--weight-bold);
            letter-spacing: var(--tracking-tight);
            white-space: nowrap;
            transition: background var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease, transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
        }

        #main-header .site-header__login {
            display: inline-flex;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, var(--a-30));
            background: rgba(5, 7, 10, var(--a-14));
        }

        #main-header .site-header__login:hover {
            border-color: rgba(255, 255, 255, var(--a-72));
            background: rgba(255, 255, 255, var(--a-10));
        }

        #main-header .site-header__cta {
            display: inline-flex;
            color: var(--lf-button-foreground);
            border: 1px solid rgba(255, 255, 255, var(--a-85));
            background: #fff;
            box-shadow: var(--shadow-2);
        }

        #main-header .site-header__cta:hover {
            color: var(--lf-button-foreground);
            border-color: #fff;
            background: #fff;
            box-shadow: var(--shadow-2), 0 0 14px rgba(var(--brand-blue-rgb), var(--a-14));
            transform: translateY(-1px);
        }

        #main-header.nav-scrolled {
            min-height: 90px;
            padding-top: var(--space-5);
            padding-bottom: var(--space-5);
            border-bottom-color: rgba(255, 255, 255, var(--a-14)) !important;
            background: rgba(7, 9, 13, var(--a-42)) !important;
            box-shadow: var(--shadow-3);
        }

        #mobile-menu {
            top: var(--mobile-header-height);
            bottom: 0;
            padding: var(--space-3) var(--space-4) var(--space-4);
            overflow-y: auto;
            overscroll-behavior: contain;
            visibility: hidden;
            background: linear-gradient(180deg, rgba(5, 7, 10, var(--a-85)), rgba(5, 7, 10, var(--a-95)));
            opacity: 0;
            pointer-events: none;
            transition: visibility 0s linear var(--dur-moderate), opacity var(--dur-moderate) ease;
        }

        #mobile-menu.is-open {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
            transition-delay: 0s;
        }

        #mobile-menu nav {
            width: min(100%, 520px);
            max-height: calc(100dvh - var(--mobile-header-height) - 28px);
            padding: var(--space-3);
            margin: 0 auto;
            overflow-y: auto;
            background: rgba(11, 13, 18, var(--a-72)) !important;
            -webkit-backdrop-filter: blur(24px) saturate(135%);
            backdrop-filter: blur(24px) saturate(135%);
            transform: translateY(-10px);
            transition: transform var(--dur-moderate) var(--ease-out);
        }

        #mobile-menu.is-open nav {
            transform: translateY(0);
        }

        @media (max-width: 1023px) {
            #main-header {
                min-height: var(--mobile-header-height);
                height: var(--mobile-header-height);
                padding: var(--space-3) var(--space-5);
            }

            #main-header.nav-scrolled {
                min-height: var(--mobile-header-height);
                padding: var(--space-3) var(--space-5);
            }

            #main-header .site-header__logo {
                width: 26px;
                height: 26px;
                border-radius: var(--radius-sm);
            }

            #main-header .site-header__wordmark {
                font-size: var(--text-lg);
            }

            #main-header .site-header__actions {
                gap: var(--space-2);
            }

            #main-header .site-header__cta {
                min-height: 42px;
                padding: 0 var(--space-3);
                font-size: var(--text-xs);
            }

            #mobile-menu-toggle {
                width: 44px;
                height: 44px;
                flex: 0 0 44px;
            }}

        @media (max-width: 1023px) {
            #main-header .site-header__language {
                display: none;
            }}

        @media (max-width: 374px) {
            #main-header,
            #main-header.nav-scrolled {
                padding-right: var(--space-4);
                padding-left: var(--space-4);
            }

            #main-header .site-header__brand {
                gap: var(--space-2);
            }}

        @media (max-width: 359px) {
            #main-header .site-header__cta {
                display: none;
            }}

        @media (min-width: 1024px) {
            #main-header .site-header__links {
                display: flex;
            }

            #main-header .site-header__login {
                display: inline-flex;
            }

            #mobile-menu-toggle {
                display: none;
            }

            #mobile-menu {
                display: none !important;
            }}

        /* Secondary actions deliberately avoid the white CTA treatment. */
        #main-header .site-header__login.secondary-action,
        .hero-carousel__secondary.secondary-action {
            color: rgba(214, 235, 255, var(--a-95)) !important;
            border: 1px solid var(--lf-border-strong) !important;
            background: rgba(8, 25, 50, var(--a-55)) !important;
            box-shadow: var(--shadow-inset-top), 0 8px 20px rgba(0, 0, 0, var(--a-14));
            backdrop-filter: blur(var(--blur-sm));
        }

        #main-header .site-header__login.secondary-action:is(:hover, :focus-visible),
        .hero-carousel__secondary.secondary-action:is(:hover, :focus-visible) {
            color: #fff !important;
            border-color: rgba(102, 217, 255, var(--a-72)) !important;
            background: rgba(8, 62, 116, var(--a-72)) !important;
            box-shadow: inset 0 1px rgba(255, 255, 255, var(--a-12)), 0 0 20px rgba(var(--brand-blue-rgb), var(--a-24));
            animation: none;
        }