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

        :root {
            --bg: #000000;
            --surface: #141414;
            --surface-raised: #1e1e1e;
            --border: #2a2a2a;
            --text: #ffffff;
            --muted: #a3a3a3;
            --accent: #ff6b1a;
            --accent-hv: #d85b16;
            --accent-fg: #141414;
            --radius: 12px;

            /* Minimal intentional layer scale (2026-08-27, added while fixing
               a real stacking bug -- see the mobile-menu z-index regression
               note near .site-header below). Only two layers exist today;
               add to this scale rather than inventing ad-hoc z-index values
               elsewhere. */
            --z-header: 100;
            --z-header-menu: 110;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: var(--bg);
            color: var(--text);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
            font-size: 16px;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        main {
            flex: 1;
        }

        .container {
            max-width: 1080px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        footer {
            border-top: 1px solid var(--border);
            color: var(--muted);
            font-size: 0.92rem;
        }

        footer a {
            color: var(--muted);
            text-decoration: none;
            transition: color 0.15s;
        }

        footer a:hover {
            color: var(--accent);
        }

        footer a:focus-visible,
        footer summary:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 3px;
            border-radius: 4px;
        }

        /* Desktop composition (2026-08-27 redesign): one grid, named areas,
           so "Use OVED" can move from a cramped sixth column to a full-width
           band beneath the nav row, and so mobile can reorder that same
           band ahead of the nav groups (see the 600px query) without any
           JS-driven DOM reordering -- CSS Grid areas keep DOM/reading order
           identical to desktop's visual order (brand, then each nav group,
           then the platform band), and only the mobile grid-template-areas
           moves the platform band earlier for sighted mobile users. */
        .footer-grid {
            display: grid;
            grid-template-columns: minmax(200px, 1.5fr) minmax(100px, 1fr) minmax(120px, 1.15fr) minmax(100px, 1fr) minmax(90px, 0.9fr);
            grid-template-areas:
                "brand oved product compare legal"
                "platform platform platform platform platform";
            column-gap: 2.75rem;
            row-gap: 3rem;
            padding: 4.5rem 0 3.5rem;
        }

        .footer-brand {
            grid-area: brand;
            display: grid;
            align-content: start;
            gap: 1.1rem;
        }

        .footer-group-oved {
            grid-area: oved;
        }

        .footer-group-product {
            grid-area: product;
        }

        .footer-group-compare {
            grid-area: compare;
        }

        .footer-group-legal {
            grid-area: legal;
        }

        .footer-heading {
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text);
        }

        .footer-disclosure-list {
            list-style: none;
            display: grid;
            gap: 0.85rem;
            margin-top: 1.1rem;
        }

        .footer-disclosure-list a {
            font-size: 0.92rem;
            line-height: 1.4;
        }

        .footer-disclosure-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            list-style: none;
        }

        .footer-disclosure-summary::-webkit-details-marker {
            display: none;
        }

        .footer-disclosure-icon {
            width: 14px;
            height: 14px;
            color: var(--muted);
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }

        .footer-disclosure[open] .footer-disclosure-icon {
            transform: rotate(45deg);
        }

        .footer-logo {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            color: var(--text);
            font-weight: 800;
            font-size: 1.3rem;
        }

        .footer-logo img {
            width: 30px;
            height: 30px;
            flex-shrink: 0;
        }

        .footer-tagline {
            color: var(--muted);
            font-size: 0.94rem;
            line-height: 1.7;
            max-width: 280px;
        }

        /* "Use OVED" platform band -- reuses the homepage's early-access-box
           visual language (raised surface, border, generous radius/padding)
           so the product's strongest conversion area in the footer carries
           the same weight as the site's other primary conversion box,
           rather than looking like a sixth, secondary nav column. */
        .footer-platform {
            grid-area: platform;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2rem 2.25rem;
        }

        .footer-platform-intro {
            display: grid;
            gap: 0.5rem;
            max-width: 320px;
        }

        .footer-platform-tagline {
            color: var(--text);
            font-size: 1.05rem;
            font-weight: 650;
            line-height: 1.5;
        }

        .footer-platform-options {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.85rem;
        }

        .footer-store-badges {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.65rem;
        }

        .footer-store-badges img {
            height: 44px;
            width: auto;
            display: block;
            border-radius: 6px;
        }

        .footer-webapp {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--surface-raised);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 0.6rem 1.15rem;
            min-height: 44px;
            color: var(--text);
            transition: border-color 0.15s, background 0.15s;
        }

        .footer-webapp:hover {
            border-color: rgba(255, 107, 26, 0.45);
            background: #262626;
            color: var(--text);
        }

        .footer-webapp-icon {
            width: 26px;
            height: 26px;
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .footer-webapp-icon svg {
            width: 20px;
            height: 20px;
        }

        .footer-webapp-text {
            display: grid;
            line-height: 1.3;
            min-width: 0;
        }

        .footer-webapp-text strong {
            font-size: 0.92rem;
            font-weight: 700;
        }

        .footer-webapp-text span {
            color: var(--muted);
            font-size: 0.8rem;
        }

        .footer-social {
            display: grid;
            gap: 0.6rem;
            padding-left: 0.85rem;
            margin-left: 0.85rem;
            border-left: 1px solid var(--border);
        }

        .footer-social-heading {
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .footer-social-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
        }

        .footer-social-list a {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--muted);
        }

        .footer-social-list a:hover {
            color: var(--accent);
            border-color: rgba(255, 107, 26, 0.4);
        }

        .footer-social-list svg {
            width: 17px;
            height: 17px;
        }

        .footer-bottom {
            border-top: 1px solid var(--border);
            padding: 1.5rem 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            color: var(--muted);
            font-size: 0.82rem;
        }

        /* Desktop only: the four link groups are semantically <details>
           disclosures (for the mobile accordion below) but must read as
           plain, always-open nav columns here -- no toggle affordance, no
           click/keyboard interaction, content always visible even with
           JavaScript disabled (the inline script in marketing_footer() only
           keeps the `open` attribute/aria-expanded honest for JS users; it
           is not required for the content to display). */
        @media (min-width: 601px) {
            .footer-disclosure-summary {
                cursor: default;
                pointer-events: none;
            }

            .footer-disclosure-icon {
                display: none;
            }

            .footer-disclosure-list {
                display: grid !important;
            }
        }

        @media (max-width: 960px) {
            .footer-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-template-areas:
                    "brand brand"
                    "oved product"
                    "compare legal"
                    "platform platform";
                row-gap: 2.5rem;
            }

            .footer-platform {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (max-width: 600px) {
            .footer-grid {
                grid-template-columns: minmax(0, 1fr);
                grid-template-areas:
                    "brand"
                    "platform"
                    "oved"
                    "product"
                    "compare"
                    "legal";
                row-gap: 1.5rem;
                padding: 3rem 0 2.5rem;
            }

            .footer-disclosure-summary {
                min-height: 44px;
                padding: 0.9rem 0;
            }

            .footer-group-oved .footer-disclosure-summary {
                padding-top: 0;
            }

            .footer-group-oved,
            .footer-group-product,
            .footer-group-compare {
                border-bottom: 1px solid var(--border);
            }

            .footer-platform {
                padding: 1.5rem;
                gap: 1.25rem;
            }

            .footer-platform-options {
                width: 100%;
            }

            .footer-webapp {
                width: 100%;
                justify-content: center;
            }

            .footer-social {
                border-left: none;
                padding-left: 0;
                margin-left: 0;
                padding-top: 0.5rem;
            }

            .footer-bottom {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
        }

        /* Site header: sticky, blurred (used by every page except 404.php,
           which overrides this with a static bordered header in its own
           inline <style> -- see 404.php).

           Scoped to .site-header, NOT a bare `nav` element selector
           (2026-08-27 fix): the footer also uses semantic `<nav
           aria-label="...">` landmarks for its link groups (OVED/Product/
           Compare/Legal), and a bare `nav {}` rule here previously matched
           those too -- silently making every footer nav column
           `position: sticky; z-index: 100` with this same background/blur.
           Two visible bugs traced to that single mistake: (1) the footer's
           three link-group columns each grew a stray border-bottom (the
           "mechanical divider" under every column), and (2) far more
           seriously, those sticky, same-z-index footer columns painted
           on top of the open mobile menu panel once the page was scrolled
           far enough for the footer to reach the header's z-index layer --
           a genuine stacking bug, not a "just raise the z-index" situation.
           Root cause was scope, not z-index value. */
        .site-header {
            position: sticky;
            top: 0;
            z-index: var(--z-header);
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(8px);
            border-bottom: 1px solid var(--border);
            padding: 1rem 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .site-header {
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .nav-brand {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 0.55rem;
            color: var(--text);
            text-decoration: none;
        }

        .nav-brand-icon {
            width: 34px;
            height: 34px;
            object-fit: contain;
            flex-shrink: 0;
        }

        .nav-brand-text {
            font-weight: 800;
            font-size: 1.55rem;
            letter-spacing: 0;
            line-height: 1;
        }

        .nav-cta {
            background: var(--accent);
            border-radius: var(--radius);
            color: var(--accent-fg);
            flex: 0 0 auto;
            font-size: 0.9rem;
            font-weight: 600;
            padding: 0.45rem 1.1rem;
            text-decoration: none;
            transition: background 0.15s;
        }

        .nav-cta:hover {
            background: var(--accent-hv);
        }

        .nav-menu {
            position: relative;
            flex: 0 0 auto;
        }

        .nav-menu-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            color: var(--text);
            cursor: pointer;
            list-style: none;
        }

        .nav-menu-toggle::-webkit-details-marker {
            display: none;
        }

        .nav-menu-icon {
            position: relative;
            width: 18px;
            height: 13px;
        }

        .nav-menu-icon span {
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background: currentColor;
            border-radius: 2px;
            transition: transform 0.2s ease, opacity 0.15s ease, top 0.2s ease;
        }

        .nav-menu-icon span:nth-child(1) {
            top: 0;
        }

        .nav-menu-icon span:nth-child(2) {
            top: 5.5px;
        }

        .nav-menu-icon span:nth-child(3) {
            top: 11px;
        }

        .nav-menu[open] .nav-menu-icon span:nth-child(1) {
            top: 5.5px;
            transform: rotate(45deg);
        }

        .nav-menu[open] .nav-menu-icon span:nth-child(2) {
            opacity: 0;
        }

        .nav-menu[open] .nav-menu-icon span:nth-child(3) {
            top: 5.5px;
            transform: rotate(-45deg);
        }

        /* Compact desktop mega-menu (2026-08-27 nav redesign). Anchored to
           the toggle (top/right match the old dropdown exactly -- only the
           content composition changed), sized to fit three comfortable
           columns without wrapping ordinary labels, capped well short of
           full-screen. Elevation comes from border + background contrast
           against --bg, matching every other raised surface on the site
           (.card, .early-access-box, .footer-platform) -- no box-shadow
           exists anywhere else in this design system, so this doesn't
           introduce one. */
        .nav-menu-panel {
            position: absolute;
            top: calc(100% + 0.6rem);
            right: 0;
            z-index: var(--z-header-menu);
            width: min(600px, calc(100vw - 2rem));
            max-height: calc(100vh - 5rem);
            overflow-y: auto;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.25rem;
        }

        .nav-menu:not([open]) .nav-menu-panel {
            display: none;
        }

        .nav-menu-groups {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            column-gap: 1.5rem;
            row-gap: 1.5rem;
        }

        .nav-menu-group {
            display: grid;
            align-content: start;
            gap: 0.5rem;
        }

        /* Eyebrow/category-label treatment: same sizing/weight/tracking
           convention already used for section eyebrows elsewhere on the
           site, but muted rather than accent-coloured -- these headings
           establish grouping, not emphasis, and the design brief is
           explicit that orange should stay reserved for Request access and
           small, deliberate accents (the web-app icon below), not every
           piece of chrome. */
        .nav-menu-heading {
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* Mobile-only accordion for the three nav groups -- same pattern as
           marketing_footer()'s .footer-disclosure (native <details>, closed
           by default, forced open past 601px via the override below).
           Namespaced separately from .footer-disclosure rather than shared:
           the two live in differently-shaped containers (a 3-column menu
           grid vs. the footer's named-area grid), so sharing one class
           would couple two independent layouts for a handful of lines. */
        .nav-disclosure-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            list-style: none;
        }

        .nav-disclosure-summary::-webkit-details-marker {
            display: none;
        }

        .nav-disclosure-icon {
            width: 14px;
            height: 14px;
            color: var(--muted);
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }

        .nav-disclosure[open] .nav-disclosure-icon {
            transform: rotate(45deg);
        }

        .nav-disclosure-list {
            display: grid;
            gap: 0.15rem;
            margin-top: 0.5rem;
        }

        .nav-disclosure-summary:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            border-radius: 4px;
        }

        @media (min-width: 601px) {
            .nav-disclosure-summary {
                cursor: default;
                pointer-events: none;
            }

            .nav-disclosure-icon {
                display: none;
            }

            .nav-disclosure-list {
                display: grid !important;
                margin-top: 0;
            }
        }

        .nav-menu-group a {
            display: block;
            border-radius: 8px;
            margin: 0 -0.5rem;
            padding: 0.4rem 0.5rem;
            color: var(--text);
            font-size: 0.9rem;
            font-weight: 500;
            text-decoration: none;
            transition: background 0.15s, color 0.15s;
        }

        .nav-menu-group a:hover {
            background: rgba(255, 255, 255, 0.06);
            color: #fff;
        }

        .nav-menu-group a:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        /* Current-page state: a restrained accent-coloured treatment (text
           colour + weight only, no fill) -- one of the few deliberate uses
           of orange in the menu, and only ever on a single link at a time. */
        .nav-menu-group a[aria-current="page"] {
            color: var(--accent);
            font-weight: 700;
        }

        /* Open OVED: visually separated from ordinary navigation via a
           divider, and styled like the footer's own Web app control
           (.footer-webapp) -- same raised-surface treatment, same globe
           icon -- so the one "enter the product" action reads as the same
           first-party control wherever it appears on the site, distinct
           from Request access's solid-orange CTA treatment. */
        .nav-menu-webapp {
            margin-top: 1.25rem;
            padding-top: 1.1rem;
            border-top: 1px solid var(--border);
        }

        .nav-menu-webapp-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            border-radius: var(--radius);
            background: var(--surface-raised);
            border: 1px solid var(--border);
            padding: 0.65rem 0.9rem;
            color: var(--text);
            text-decoration: none;
            transition: border-color 0.15s, background 0.15s;
        }

        .nav-menu-webapp-link:hover {
            border-color: rgba(255, 107, 26, 0.45);
            background: #262626;
        }

        .nav-menu-webapp-link:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        .nav-menu-webapp-icon {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            background: var(--surface);
            flex-shrink: 0;
        }

        .nav-menu-webapp-icon svg {
            width: 18px;
            height: 18px;
        }

        .nav-menu-webapp-text {
            display: grid;
            line-height: 1.3;
            min-width: 0;
        }

        .nav-menu-webapp-text strong {
            font-size: 0.92rem;
            font-weight: 700;
        }

        .nav-menu-webapp-text span {
            color: var(--muted);
            font-size: 0.8rem;
        }

        @media (max-width: 600px) {
            .site-header {
                gap: 0.5rem;
                padding: 1rem;
            }

            .nav-brand-text {
                font-size: 1.35rem;
            }

            .nav-brand-icon {
                width: 30px;
                height: 30px;
            }

            .nav-cta {
                padding: 0.55rem 0.65rem;
                font-size: 0.82rem;
            }

            .nav-menu-toggle {
                width: 36px;
                height: 36px;
            }

            .nav-menu-panel {
                padding: 1.1rem;
            }

            .nav-menu-groups {
                grid-template-columns: 1fr;
                row-gap: 0.25rem;
            }

            .nav-disclosure-summary {
                min-height: 44px;
            }

            .nav-menu-group:not(:last-child) {
                padding-bottom: 0.5rem;
                border-bottom: 1px solid var(--border);
            }
        }