/* =============================================================================
   Bigscreen — Site chrome (nav + footer), shared by every static page.
   SINGLE SOURCE OF TRUTH: edit here (src/site/partials/chrome.css), then run
   `node scripts/build-pages.mjs`. Served as /landing/chrome.css.
   Order preserves the original cascade: base (Builder symbol) -> bs-footer ->
   mobile overlay -> floating pill overrides -> angular shape rules -> submenus
   -> mobile pill. Fonts are declared first so standalone pages don't depend on
   the legacy styles.css.
   ============================================================================= */

/* ---- Fonts (from the rip; same files styles.css uses) ----
   Zen Kaku (Japanese) is declared local()-only on purpose: the only CJK on the
   site is two Japanese press-review titles in the press rail, and the full face
   is a 2.3 MB download for ~35 glyphs. Those names render in the OS Japanese
   font instead. The masters are still in /landing/assets (077/078-asset.ttf) —
   restore the url() src, keeping the unicode-range, if a real Japanese
   localization ships. */
@font-face { font-family: "Neue Haas Grotesk Display Pro - 55 Roman"; src: local("Neue Haas Grotesk Display Pro - 55 Roman"), url("/landing/assets/052-asset.otf") format("woff2"); font-display: fallback; font-weight: 400; }
@font-face { font-family: "Zen Kaku Gothic New - Regular"; src: local("Zen Kaku Gothic New - Regular"); font-display: fallback; font-weight: 400; unicode-range: U+3000-30FF, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }
@font-face { font-family: "Fragment Mono"; src: local("Fragment Mono"), url("/landing/assets/056-asset.ttf") format("woff2"); font-display: fallback; font-weight: 400; }
@font-face { font-family: "Zen Kaku Gothic New - Medium"; src: local("Zen Kaku Gothic New - Medium"); font-display: fallback; font-weight: 400; unicode-range: U+3000-30FF, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }

/* ==== 1. Base chrome (Builder "Home Styles" symbol: vars, header, footer) ==== */
    /*--- Site-specific Variables ---*/
    :root {
    --navBgColor: 0, 0, 0;
    --logoInvert: 0;
    --headerColor: #FFF;

    --headerBtnHeight: 38px;
    --headerBtnFill: #4D1EF7;
    --headerBtnColor: #FFF;
    --headerBtnBorderColor: transparent;
    --headerBtnHoverTintAlpha: 0.1;
    --headerBtnHoverFill: #4D1EF7;
    --headerBtnHoverColor: #FFF;
    --headerBtnHoverBorderColor: transparent;

    --navBtnBorderColor: #FFF;
    --navBtnInnerColor: #FFF;

    --widthOffset: 0px;
    --mobileWidthOffset: 0px;
    --navMenuHeightOffset: 0px;
    --desktopMaxWidth: min(1648px, max(75vw, 856px));

    /* Desktop nav plate. --navInset is the air above and below the wordmark,
       derived (not chosen): a --navMarkH mark centred in a --navPlateH plate.
       The plate then hangs --navOverhang outside the content column so that same
       value works as its side padding, which leaves the wordmark evenly inset on
       all three sides AND still sitting exactly on the content grid line — the
       overhang absorbs the difference, so nothing on the page moves. The CTA
       holds the mirrored grid line the same way. Resize either height and the
       geometry stays true. Percentages resolve against the viewport: every
       consumer is a position:fixed box. */
    --navPlateH: 76px;
    --navMarkH: 22px;
    --navInset: calc((var(--navPlateH) - var(--navMarkH)) / 2);   /* 27px */
    --navOverhang: calc(var(--navInset) - 16px);                  /* 11px — 16px is the content gutter */
    --navEdge: max(8px, calc((100% - var(--desktopMaxWidth)) / 2 - var(--navOverhang)));

    --footerBtnFill: #FFF;
    --footerBtnColor: #000;
    --footerBtnBorderColor: #FFF;
    --footerBtnIconInvert: 0;
    --footerBtnHoverFill: #000;
    --footerBtnHoverColor: #FFF;
    --footerBtnHoverBorderColor: #FFF;
    }

    /*--- Site-specific Style Changes ---*/
    div.header-note {
        text-align: right;
        margin-right: 16px;
    }
    /* div.mobile-note {
        display: none;
    } */
    div.mobile-note {
        position: fixed;
        top: 96px;
        left: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 32px;
        width: 100vw;
        max-width: 100vw;
        height: 32px;
        --bg: 77, 30, 247;
        --bga: 1;
        --col: 255, 255, 255;
        background: rgba(var(--bg), var(--bga));
        color: rgba(var(--col), 1);
        transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
        transition-property: background-color, color;
    }
    div.mobile-note a {
        color: inherit;
        transition-property: color;
        text-decoration: underline;
    }
    /*- MOBILE Note -*/
    @media only screen and (max-width: 991px) {
        div.header-note {
            display: none;
        }
        div.mobile-note {
            position: relative;
            top: unset;
            left: unset;
            transform: translateX(64px);
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 0 0 32px;
            width: 100vw;
            max-width: 100vw;
            height: 32px;
            --bg: 77, 30, 247;
            --bga: 1;
            --col: 255, 255, 255;
            background: rgba(var(--bg), var(--bga));
            color: rgba(var(--col), 1);
            transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
            transition-property: background-color, color;
        }
    }


    /*##### vvv SYNC BETWEEN SITES vvv #####*/


    /*--- Header ---*/
    a {
        text-decoration: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    .float-right {
        float: right;
    }

    .header-nav-background {
        position: fixed;
        top: 0px;
        z-index: 100;
        width: 100%;
        height: 96px;
        /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), 75%, transparent); */
        /* perf: dropped the frosted-glass backdrop blur — repainting a blurred,
           fixed bar over moving content every scroll frame was a major jank
           source. A slightly more opaque translucent fill reads nearly the same. */
        background: rgba(var(--navBgColor), 0.82);
    }
    .header-nav-frame {
        position: -webkit-sticky;
        position: -moz-sticky;
        position: -o-sticky;
        position: -ms-sticky;
        position: sticky;
        top: 0;
        z-index: 100;
        /* mix-blend-mode: difference; */
        display: block;
        justify-content: start;
        align-items: center;
        margin-left: max(0px, calc(calc(100% - var(--desktopMaxWidth)) / 2));
        width: calc(calc(100% / 12) * 8);
        max-width: calc(calc(var(--desktopMaxWidth) / 12) * 8);
        margin-bottom: -96px;
    }
    .header-btn-frame {
        position: -webkit-sticky;
        position: -moz-sticky;
        position: -o-sticky;
        position: -ms-sticky;
        position: sticky;
        top: 0;
        z-index: 100;
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: center;
        padding: 0px 16px 0px 0px;
        margin-left: auto;
        margin-right: max(0px, calc(calc(100% - var(--desktopMaxWidth)) / 2));
        width: calc(calc(calc(100% / 12) * 4) - 16px);
        max-width: calc(calc(calc(var(--desktopMaxWidth) / 12) * 4) - 16px);
        height: 96px;
        background-color: #00000000;
        color: #FFF;
    }
    .header-btn-frame>div {
        display: flex;
        justify-content: end;
        align-items: center;
    }
    nav.header-nav {
        display: grid;
        height: 96px;
        grid: 'logo logo logo link link link link link';
        gap: 16px;
        padding: 0px 16px;
        background-color: #00000000;
        align-items: center;
        color: #FFF;
    }
    header.nav-mobile {
        display: none;
    }
    a.header-logo {
        grid-area: logo;
        /* margin-top: calc(calc(100% - 42px) * .407);
        margin-bottom: calc(calc(100% - 42px) * .593); */
        margin: 22px 0px 32px;
        height: 42px;
        width: 192px;
        align-items: center;
    }
    a.header-logo img {
        height: 42px;
        width: 192px;
        filter: invert(var(--logoInvert));
    }
    a.header-link {
        grid-area: link / span 1;
        width: fit-content;
        white-space: nowrap;
        color: #787E81;
    }
    a.header-link:not(:hover) span {
        color: var(--headerColor);
    }
    a.header-btn {
        z-index: 2;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: var(--headerBtnHeight);
        max-height: var(--headerBtnHeight);
        padding: 0px 36.5px;
        width: fit-content;
        background: var(--headerBtnFill);
        color: var(--headerBtnColor);
        border-radius: 40px;
        border: 1px solid var(--headerBtnBorderColor);
    }
    /* Real store link: pin :visited to the same adaptive variable as :link, so it
       always tracks the current nav state (dark/light pill) instead of the browser's
       default visited-link color (see purchase-model-button). */
    a.header-btn:link, a.header-btn:visited { color: var(--headerBtnColor); }
    a.header-btn:hover {
        background: linear-gradient(0deg, rgba(0, 0, 0, var(--headerBtnHoverTintAlpha)), rgba(0, 0, 0, var(--headerBtnHoverTintAlpha))), var(--headerBtnHoverFill);
        color: var(--headerBtnHoverColor);
        border-color: var(--headerBtnHoverBorderColor);
    }
    .nav-btn {
        display: none;
    }

    /*- MOBILE Header -*/
    @media only screen and (max-width: 991px) {
        div.builder-blocks[builder-type="blocks"] {
            align-items: flex-start;
            -webkit-box-align: start;
        }
        a.header-link {
            display: none;
        }
        .header-nav-background {
            position: fixed;
            top: 0;
            z-index: 100;
            width: 100%;
            height: 72px;
        }
        .header-nav-frame {
            position: sticky;
            top: 0;
            z-index: 100;
            display: block;
            justify-content: start;
            align-items: center;
            margin-left: 0px;
            width: calc(calc(100% / 6) * 6);
            max-width: calc(calc(100vw / 6) * 6);
            margin-bottom: -72px;
        }
        .header-btn-frame {
            position: sticky;
            top: 0;
            right: 0;
            z-index: 100;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            padding: 0;
            margin-left: auto;
            margin-right: 64px;
            width: calc(calc(calc(100vw / 6) * 2) - 12px);
            max-width: calc(calc(calc(100vw / 6) * 2) - 12px);
            height: 72px;
        }
        .header-btn-frame>div {
            display: flex;
            align-items: flex-end;
            flex-direction: column;
        }
        nav.header-nav {
            display: grid;
            height: 71px;
            grid: 'logo logo logo logo btn btn';
            gap: 12px;
            padding: 0px 12px;
            align-items: center;
        }
        a.header-logo {
            grid-area: logo;
            margin: 0px 0px;
            height: 30px;
            width: 134px;
            align-items: center;
        }
        a.header-logo img {
            height: 30px;
            width: 134px;
        }
        a.header-btn {
            z-index: 2;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin: 16px 0px;
            height: var(--headerBtnHeight);
            max-height: var(--headerBtnHeight);
            padding: 0px 25.5px;
            width: fit-content;
            border-radius: 40px;
        }
        .nav-btn {
            grid-area: btn;
            z-index: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            justify-self: end;
            margin-left: 12px;
            width: 40px;
            height: 40px;
            max-width: 40px;
            max-height: 40px;
            box-sizing: border-box;
            border: 1px solid var(--navBtnBorderColor);
            border-radius: 40px;
        }
        div.nav-btn-inner {
            z-index: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 28px;
            height: 28px;
            max-width: 28px;
            max-height: 28px;
            box-sizing: border-box;
            border: 1px solid var(--navBtnInnerColor);
            background: var(--navBtnInnerColor);
            border-radius: 28px;
        }
        div.nav-btn-inner.icon-navx {
            display: none;
        }

        /*- MOBILE Nav Menu -*/
        header.nav-mobile {
            position: fixed;
            top: 0;
            z-index: 50;
            display: none; /*block*/
            padding: 103px 12px 32px;
            width: calc(100% - var(--mobileWidthOffset));
            max-width: calc(100vw - var(--mobileWidthOffset));
            height: calc(100% - var(--navMenuHeightOffset));
            max-height: calc(100vh - var(--navMenuHeightOffset));
            background: rgb(var(--navBgColor));
        }
        header.nav-mobile>div {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        header.nav-mobile .base-grid {
            grid-template-columns: repeat(6, 1fr [col]);
            gap: 12px;
            padding: 0px 12px;
        }
        .nav-mobile-btm {
            width: 100%;
            display: flex;
            flex-grow: 1;
            flex-direction: column;
            justify-content: flex-end;
        }
        .nav-mobile-btm>.base-grid {
            padding: 0px;
        }
        .nav-mobile-btm>.base-grid>div {
            display: flex;
            flex-direction: column;
        }
        header.nav-mobile>div a.mobile-link:not(:last-child) {
            margin-bottom: 16px;
        }
        a.mobile-link {
            color: #787E81;
            width: fit-content;
        }
        a.mobile-link:not(:hover) {
            color: var(--headerColor);
        }
    } /*- END MOBILE Header, Nav Menu -*/

    /*- TINY Header -*/
    @media only screen and (max-width: 339px) {
        a.header-btn {
            z-index: -1;
            display: none;
        }
        .mobile-note {
            margin-top: 71px;
        }
    }


    /*--- Footer ---*/

    footer.footer-frame {
        position: relative;
        z-index: 9;
        display: block;
        width: 100%;
        height: fit-content;
        background-color: rgb(var(--navBgColor));
    }
    div.footer {
        margin-left: max(0px, calc(calc(100% - var(--desktopMaxWidth)) / 2));
        width: calc(100% - var(--widthOffset));
        max-width: var(--desktopMaxWidth);
        height: fit-content;
        display: grid;
        grid: 'nav nav nav nav news news . learn learn about about social';
        gap: 0px 16px;
        padding: 0px 16px;
        color: var(--headerColor);
    }
    span.footer-head {
        color: #787E81;
    }
    a.footer-link {
        width: fit-content;
        color: #787E81;
    }
    a.footer-link:not(:hover) {
        color: var(--headerColor);
    }
    a.detail-link {
        width: fit-content;
        color: var(--headerColor);
    }
    a.detail-link:not(:last-child) {
        margin-right: 24px;
    }
    a.detail-link:not(:hover) {
        color: #787E81;
    }
    a.footer-btn {
        z-index: 2;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 46px;
        max-height: 46px;
        padding: 0px 24px 0px 16px;
        width: fit-content;
        background: var(--footerBtnFill);
        color: var(--footerBtnColor);
        border-radius: 40px;
        border: 1px solid var(--footerBtnBorderColor);
        font-family: "Neue Haas Grotesk Display Pro - Medium", "Zen Kaku Gothic New - Medium", sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -.6px;
    }
    a.footer-btn:hover {
        background: var(--footerBtnHoverFill);
        color: var(--footerBtnHoverColor);
        border: 1px solid var(--footerBtnHoverBorderColor);
    }
    a.footer-btn img {
        width: 25px;
        height: 19px;
        margin-right: 12px;
        filter: invert(var(--footerBtnIconInvert));
    }
    a.footer-btn:hover img {
        filter: invert(calc(calc(var(--footerBtnIconInvert) - 1) * -1));
    }
    div.footer-spacer {
        grid-area: auto / nav / auto / social;
        width: calc(100% - 35px);
        margin-right: 32px;
        margin-left: 1px;
        padding-right: 1px;
    }
    div.footer-nav {
        grid-area: 2 / nav;
        display: flex;
        flex-direction: column;
    }
    div.footer-newsletter {
        grid-area: 2 / news;
        display: flex;
        flex-direction: column;
    }
    div.footer-learnmore {
        grid-area: 2 / learn;
        display: flex;
        flex-direction: column;
    }
    div.footer-about {
        grid-area: 2 / about;
        display: flex;
        flex-direction: column;
    }
    div.footer-social {
        grid-area: 2 / social;
        display: flex;
        flex-direction: column;
    }

    /*- MOBILE Footer -*/
    @media only screen and (max-width: 991px) {
        div.footer {
            margin-left: 0;
            width: calc(100% - var(--mobileWidthOffset));
            max-width: 100vw;
            height: fit-content;
            display: grid;
            grid: "nav nav nav nav nav nav"
            "learn learn about about social social"
            "foot foot foot foot foot foot"
            / 1fr 1fr 1fr 1fr 1fr 1fr;
            gap: 0px 12px;
            padding: 0px 12px;
            color: var(--headerColor);
        }
        div.footer .base-grid {
            grid-template-columns: repeat(6, 1fr [col]);
            gap: 12px;
            padding: 0px 12px;
        }
        a.detail-link:not(:last-child) {
            margin-right: 16px;
        }
        a.footer-btn {
            align-self: center;
            width: 100%;
            max-width: 300px !important;
            margin: 0 auto;
        }
        div.footer-spacer {
            grid-area: auto / 1 / auto / 7;
            /* width: calc(100% - 24px);
            margin-right: 0px;
            margin-left: 0px;
            padding-right: 1px; */
            width: 100%;
            margin: 0;
            padding: 0;
        }
        div.footer-nav {
            grid-area: auto / nav;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        div.footer-nav .row-fill {
            flex: 1 1 100%;
            width: auto;
            max-width: 100%;
        }
        div.footer-nav .row-half {
            flex: 1 1 50%;
            width: auto;
            max-width: 100%;
        }
        div.footer-newsletter {
            grid-area: auto / nav;
            display: flex;
            flex-direction: column;
        }
        div.footer-learnmore {
            grid-area: auto / learn;
            display: flex;
            flex-direction: column;
        }
        div.footer-about {
            grid-area: auto / about;
            display: flex;
            flex-direction: column;
        }
        div.footer-social {
            grid-area: auto / social;
            display: flex;
            flex-direction: column;
        }
        div.footer-fine-print {
            display: flex;
            flex-direction: column-reverse;
        }
    }

    /*- TABLET Footer (keep on this line) -*/
    @media only screen and (min-width: 641px) {
        a.footer-btn {
            margin: 0 auto 0 0;
        }
    }




/* ==== 2. Footer (bs-footer) ==== */

  .bs-footer { background: #fff; color: #0a0a0c; font-family: "Neue Haas Grotesk Display Pro - 55 Roman", "Zen Kaku Gothic New - Regular", sans-serif;
    padding: clamp(48px, 7vw, 96px) 0 0; position: relative; z-index: 10; }
  /* Both live in a Builder flex-column wrapper that doesn't stretch its children, so on
     narrow screens the footer shrinks to its content (~320px) and the pre-footer collapses
     to 0 (killing the grey gradient + circuit lines). Force them to fill the wrapper. */
  .bs-footer, #prefooter-signal { width: 100% !important; align-self: stretch; box-sizing: border-box; }
  /* Match the page .container box (desktopMaxWidth, centered, 16px gutter) so the
     footer's left/right edges line up with the nav logo and the Order Now button. */
  .bs-footer-inner { max-width: var(--desktopMaxWidth); margin: 0 auto; padding-inline: 16px;
    box-sizing: border-box; display: grid;
    grid-template-columns: 1.5fr 1.2fr 1fr 1fr 1fr; gap: 40px 32px; }
  .bs-foot-corp { color: #646A6E; font-size: 15px; margin: 0 0 24px; }
  .bs-foot-primary { display: flex; flex-direction: column; gap: 2px; }
  .bs-foot-primary a { font-family: "Neue Haas Grotesk Display Pro - 55 Roman", "Zen Kaku Gothic New - Regular", sans-serif;
    font-size: clamp(28px, 3vw, 40px); font-weight: 500; line-height: 1.18; color: #0a0a0c;
    text-decoration: none; letter-spacing: -0.01em; transition: color .18s cubic-bezier(.22,1,.36,1); }
  .bs-foot-primary a:hover { color: #4D1EF7; }
  .bs-foot-discord { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
    height: 46px; padding: 0 22px; border-radius: 40px; background: #000; color: #fff;
    font-size: 14px; font-weight: 500; text-decoration: none; width: fit-content;
    transition: transform .18s cubic-bezier(.22,1,.36,1), background-color .18s cubic-bezier(.22,1,.36,1); }
  .bs-foot-discord:hover { transform: translateY(-1px); background: #4D1EF7; }
  /* Pin every link state (and the label span): the ripped Builder css and the
     browser's :visited default both recolor plain links, which turned this
     button's text grey/blue once the Discord invite had been visited. The
     button is black-on-white footer furniture — its text is always white. */
  a.bs-foot-discord:link, a.bs-foot-discord:visited, a.bs-foot-discord:hover,
  a.bs-foot-discord:focus, a.bs-foot-discord:active,
  a.bs-foot-discord:link span, a.bs-foot-discord:visited span, a.bs-foot-discord:hover span,
  a.bs-foot-discord:focus span, a.bs-foot-discord:active span { color: #fff !important; }
  .bs-foot-head { color: #646A6E; font-size: 15px; font-weight: 400; margin: 0 0 18px; }
  .bs-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .bs-foot-col a { color: #0a0a0c; font-size: 15px; text-decoration: none;
    transition: color .18s cubic-bezier(.22,1,.36,1); }
  .bs-foot-col a:hover { color: #4D1EF7; }
  .bs-foot-news-head { margin-top: 40px; }
  .bs-foot-news { display: flex; align-items: center; gap: 8px; max-width: 240px;
    border-bottom: 1px solid #DFDFDF; padding-bottom: 8px; }
  .bs-foot-news input { flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-family: "Neue Haas Grotesk Display Pro - 55 Roman", "Zen Kaku Gothic New - Regular", sans-serif; font-size: 15px; color: #0a0a0c; }
  .bs-foot-news input::placeholder { color: #646A6E; }
  .bs-foot-news button { border: none; background: transparent; color: #0a0a0c; font-size: 18px;
    cursor: pointer; line-height: 1; padding: 2px 4px; }
  .bs-foot-news button:focus-visible, .bs-footer a:focus-visible, .bs-foot-news input:focus-visible {
    outline: 2px solid #4D1EF7; outline-offset: 3px; border-radius: 2px; }
  /* Subscribe states: the status note sits where the input line was, so the
     column doesn't jump; on success the form itself disappears. */
  .bs-foot-news.is-done { display: none; }
  .bs-foot-news-note { margin: 8px 0 0; font-size: 15px; color: #0a0a0c; }
  /* Visually-hidden (screen-reader-only). home.html defines its own copy; every
     other page only gets chrome.css, and the footer's label + honeypot rely on it. */
  .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* Box narrowed by the 2×16px gutter so the border-top rule spans the same 166→1080
     as the footer columns (not the wider container box). */
  /* width:100%-32px (not just a max-width) keeps the SAME 16px gutter as
     .bs-footer-inner at every breakpoint, so the copyright/legal line stays aligned
     with the columns above it (below --desktopMaxWidth the old max-width-only rule
     collapsed the gutter to 0 and shifted the legal text 16px left). Bottom padding
     opened up to 48px so the plate doesn't crowd the last line. */
  .bs-footer-legal { width: calc(100% - 32px); max-width: calc(var(--desktopMaxWidth) - 32px); margin: clamp(48px, 6vw, 80px) auto 0;
    padding: 24px 0 48px; box-sizing: border-box;
    border-top: 1px solid #DFDFDF; display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap; color: #646A6E; font-size: 13px; }
  .bs-footer-legal nav { display: flex; gap: 32px; }
  .bs-footer-legal a { color: #646A6E; text-decoration: none; transition: color .18s; }
  .bs-footer-legal a:hover { color: #0a0a0c; }
  /* Language: two links at legal-bar weight, not a control. A language choice
     should be findable rather than advertised — anything louder here competes
     with the one violet CTA above it. The current locale is simply darker, and
     a hairline divides the pair: the same separator language the bar's own top
     border already uses. */
  .bs-footer-legal .bs-foot-lang { gap: 0; align-items: center; }
  .bs-foot-lang a { padding: 0 10px; }
  .bs-foot-lang a:first-child { padding-left: 0; }
  .bs-foot-lang a + a { border-left: 1px solid #DFDFDF; }
  .bs-foot-lang a[aria-current] { color: #0a0a0c; }
  @media (max-width: 991px) {
    .bs-footer-inner { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
    .bs-foot-brand { grid-column: 1 / -1; }
  }
  /* Tablet / foldable: four link groups in two columns leave a hole under the
     short one. Three columns fills the row and the links (15px) still sit on a
     ~270px measure, so nothing wraps. */
  @media (min-width: 700px) and (max-width: 991px) {
    .bs-footer-inner { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
  }
  @media (max-width: 560px) {
    .bs-footer-inner { grid-template-columns: 1fr; }
    .bs-footer-legal { flex-direction: column; align-items: flex-start; }
    /* On the single-column mobile footer, let the Discord button and the newsletter
       field span the full column instead of hugging their content. */
    .bs-foot-discord { width: 100%; justify-content: center; }
    .bs-foot-news { max-width: none; }
  }


/* ==== 3. Mobile menu overlay (base) ==== */

  #mnav-overlay { position: fixed; inset: 0; z-index: 9999; background: #000; color: #FCFCFD;
    display: flex; flex-direction: column; padding: 96px 24px max(32px, env(safe-area-inset-bottom)) 24px;
    gap: 2px; transform: translateX(100%); visibility: hidden;
    transition: transform .42s cubic-bezier(0.22,1,0.36,1), visibility 0s linear .42s; }
  #mnav-overlay.open { transform: none; visibility: visible; transition: transform .42s cubic-bezier(0.22,1,0.36,1); }
  #mnav-cta { margin-top: 24px; display: flex; align-items: center; justify-content: center;
    min-height: 52px; border-radius: 40px; background: #4D1EF7; color: #FCFCFD;
    font-family: "Neue Haas Grotesk Display Pro - 55 Roman", "Zen Kaku Gothic New - Regular", sans-serif; font-weight: 500; font-size: 16px; text-decoration: none; }
  #mnav-close { position: absolute; top: 22px; right: 16px; width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center; background: transparent;
    border: none; color: #FCFCFD; font-size: 30px; line-height: 1; cursor: pointer; }
  #mnav-close:focus-visible, #mnav-overlay a:focus-visible { outline: 2px solid #4D1EF7; outline-offset: 3px; }
  @media (min-width: 992px) { #mnav-overlay { display: none !important; } }
  @media (prefers-reduced-motion: reduce) { #mnav-overlay, #mnav-overlay.open { transition: none; } }


/* ==== 4. Floating pill nav (overrides) ==== */

/* ── Floating pill nav: container-width, solid black, no outline (ported from v2) ── */
.header-nav-background {
  background: #000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 999px;
}
a.header-logo img { filter: brightness(0) invert(1); }   /* force white wordmark on black */
a.header-link {
  color: rgba(255, 255, 255, 0.62);
  transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
a.header-link:hover { color: #fff; }
a.header-link span { color: inherit; }
div.mobile-note { display: none !important; }   /* drop full-width shipping bar under the pill */

/* Desktop: one contained pill, logo+links left, order-now right */
@media (min-width: 992px) {
  .header-nav-background {
    top: 18px;
    /* --navEdge for BOTH sides — never left:50% + translateX(-50%). The two are
       mathematically identical, but they round differently: a transform-centred
       box and an inset-positioned box snap to different device pixels whenever
       (100% - --desktopMaxWidth)/2 lands on a fraction, leaving a 1px sliver at
       the left edge (found on the store twin in Brave at 90% zoom; reproduces at
       100% too, e.g. at 1443px wide). The frame and the CTA frame below use the
       same token for the same reason — change it in one place only. */
    left: var(--navEdge);
    right: var(--navEdge);
    width: auto;
    max-width: none;
    height: var(--navPlateH);
  }
  /* nav frame spans the full pill so links can center on the pill itself */
  .header-nav-frame {
    position: fixed;
    top: 18px;
    left: var(--navEdge);
    right: var(--navEdge);
    width: auto;
    max-width: none;
    height: var(--navPlateH);
    margin: 0;
  }
  nav.header-nav {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--navPlateH);
    width: 100%;
    padding: 0 var(--navInset);   /* minus the overhang = the 16px content grid line */
    background: transparent;
  }
  a.header-logo, a.header-logo img { height: var(--navMarkH); width: auto; margin: 0; }
  a.header-logo { display: flex; align-items: center; }
  /* links centered on the pill */
  .header-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 32px;
  }
  a.header-link {
    font-family: "Fragment Mono", ui-monospace, monospace;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .header-links { gap: 28px; }
  .header-btn-frame {
    position: fixed;
    top: 18px;
    left: auto;
    right: var(--navEdge);
    width: auto;
    max-width: none;
    height: var(--navPlateH);
    margin: 0;
    padding: 0 var(--navInset) 0 0;   /* minus the overhang: holds the CTA on the content grid line */
    align-items: center;
  }
  a.header-btn { height: 42px; max-height: 42px; padding: 0 24px; }
  .nav-btn { display: none !important; }
}

/* The "order now" CTA loses its fill without the live JS (coded-beyond) — restore
   the violet pill + white label, on every breakpoint. */
a.header-btn, a.header-btn.coded-beyond {
  background: #4D1EF7 !important;
  color: #fff !important;
  border: 0 !important;
  font-family: "Fragment Mono", ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: -0.01em;
}
a.header-btn:hover, a.header-btn.coded-beyond:hover {
  background: #4000FF !important;
  color: #fff !important;
}

/* Mobile: clean floating pill — logo left, order-now right (links live in footer) */
@media (max-width: 991px) {
  /* the rip sizes this spacer to 100vw, which includes the scrollbar gutter and
     causes horizontal overflow — clamp it to the content width */
  .navbar-offset > div > div { width: 100% !important; max-width: 100% !important; }

  .header-nav-background {
    top: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    height: 54px;
  }
  .header-nav-frame {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    height: 54px;
    margin: 0;
    display: flex;
    align-items: center;
  }
  nav.header-nav {
    display: flex;
    align-items: center;
    height: 54px;
    width: 100%;
    padding: 0 0 0 18px;
    gap: 0;
    background: transparent;
  }
  .header-links { display: none !important; }   /* links collapse on mobile */
  .nav-btn { display: none !important; }
  a.header-logo { display: flex; align-items: center; height: 18px; width: auto; margin: 0; }
  a.header-logo img { filter: brightness(0) invert(1); height: 18px; width: auto; margin: 0; }
  .header-btn-frame {
    position: fixed;
    top: 10px;
    right: 22px;
    left: auto;
    width: auto;
    max-width: none;
    height: 54px;
    margin: 0;
    align-items: center;
  }
  /* nav pill bevel on mobile too */
  .header-nav-background { border-radius: 3px 3px 18px 3px; corner-shape: round round bevel round; }
}



/* ==== 5. Angular shape system (chrome) + adaptive nav theme ==== */
/* ---- Buttons (all breakpoints): angular shape + Fragment Mono uppercase ---- */
.action-btn, .action-btn2, .action-btn-two, a.header-btn, a.header-btn.coded-beyond,
.hero-btn, .bs-foot-discord, .footer-btn {
  border-radius: 2px 2px 12px 2px !important;
  corner-shape: round round bevel round;
}
.action-btn, .action-btn2, .action-btn-two, a.header-btn, .hero-btn,
.action-btn-text, .action-btn-text2, .bs-foot-discord, .footer-btn {
  font-family: "Fragment Mono", ui-monospace, monospace !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (min-width: 992px) {
  /* nav pill — 3 corners softened ~3px, 45° bevel on the bottom-right */
  .header-nav-background {
    border-radius: 3px 3px 22px 3px;     /* TL TR BR BL */
    corner-shape: round round bevel round;
  }

  /* nav "order now" CTA */
  a.header-btn, a.header-btn.coded-beyond {
    border-radius: 2px 2px 10px 2px;
    corner-shape: round round bevel round;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

}

/* ---- Active nav link (current page) ---- */
@media (min-width: 992px) {
  a.header-link { position: relative; }
  a.header-link.is-active { color: #fff; }
  a.header-link.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -7px;
    height: 2px;
    background: #4D1EF7;
  }
}

/* ---- Adaptive nav theme: black pill over light/image/violet, violet pill over
        dark content sections (CTA flips to a white button with black text). ---- */
.header-nav-background { transition: background-color 280ms ease, box-shadow 280ms ease; }
/* Lift the pill off the dark hero so its outline (esp. the top-left corner) reads
   without a hard stroke: a soft, diffuse light glow gives a gentle luminance
   separation over the near-black areas, and a soft dark drop floats it over the
   brighter parts of the photo. */
.header-nav-background { box-shadow: 0 0 24px 2px rgba(255,255,255,0.08), 0 16px 34px -12px rgba(0,0,0,0.55); }
a.header-btn, a.header-btn.coded-beyond { transition: background-color 280ms ease, color 280ms ease; }
body.nav-purple .header-nav-background { background: #4D1EF7 !important; }
body.nav-purple a.header-btn,
body.nav-purple a.header-btn.coded-beyond,
body.nav-purple a.header-btn:visited,
body.nav-purple a.header-btn.coded-beyond:visited { background: #fff !important; color: #000 !important; }
body.nav-purple a.header-link.is-active::after { background: #fff; }

/* white pill over the violet section: black logo + links, violet CTA */
body.nav-white .header-nav-background { background: #fff !important; box-shadow: 0 16px 34px -12px rgba(0,0,0,0.35); }
body.nav-white a.header-logo img { filter: brightness(0) !important; }
body.nav-white a.header-link { color: rgba(0,0,0,0.55); }
body.nav-white a.header-link:hover,
body.nav-white a.header-link.is-active { color: #000; }
body.nav-white a.header-link.is-active::after { background: #4D1EF7; }
body.nav-white a.header-btn,
body.nav-white a.header-btn.coded-beyond,
body.nav-white a.header-btn:visited,
body.nav-white a.header-btn.coded-beyond:visited { background: #4D1EF7 !important; color: #fff !important; }

/* ==== Account icon (nav) ====
   Sits on the pill, left of "order now". Hidden until the reveal script (nav.html)
   finds a session cookie, so logged-out visitors never see it. Colour tracks the
   nav links across pill states (dark pill => light icon; white pill => dark icon);
   desktop only — mobile reaches the account via the footer. */
a.nav-account { display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-right: 8px; border-radius: 999px;
  color: rgba(255,255,255,0.62); flex: 0 0 auto;
  transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1); }
a.nav-account.is-visible { display: inline-flex; }
a.nav-account:hover { color: #fff; }
a.nav-account svg { display: block; }
body.nav-white a.nav-account { color: rgba(0,0,0,0.55); }
body.nav-white a.nav-account:hover { color: #000; }
@media (max-width: 991px) { a.nav-account.is-visible { display: none; } }


/* ==== 6. Nav submenus ==== */

/* ===========================================================================
   NAV SUBMENUS — hover/focus dropdowns on Beyond-2 / Experiences / Shop, plus a
   tiny "new posts" badge on Blog. Desktop only (links collapse on mobile).
   =========================================================================== */
@media (min-width: 992px) {
  .nav-item { position: relative; display: inline-flex; align-items: center; }
  .nav-item .header-link { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }

  /* caret */
  .nav-caret {
    width: 0; height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.55;
    transition: transform 180ms ease, opacity 180ms ease;
  }
  .nav-item:hover .nav-caret,
  .nav-item:focus-within .nav-caret { transform: rotate(180deg); opacity: 1; }

  /* panel container + invisible hover bridge over the pill edge */
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    padding-top: 30px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 170ms ease, transform 170ms ease;
    z-index: 300;
  }
  .nav-item:hover .nav-menu,
  .nav-item:focus-within .nav-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .nav-menu-panel {
    min-width: 268px;
    background: #0b0b0e;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 3px 3px 16px 3px;
    corner-shape: round round bevel round;
    padding: 7px;
    box-shadow: 0 20px 44px rgba(0,0,0,0.5);
  }
  .nav-menu-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 13px;
    border-radius: 2px 2px 9px 2px;
    corner-shape: round round bevel round;
    text-decoration: none;
    transition: background-color 150ms ease;
  }
  .nav-menu-link:hover { background: rgba(255,255,255,0.07); }
  .nml-title {
    font-family: "Fragment Mono", ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12.5px;
    color: #fff;
  }
  .nml-sub {
    font-family: "NeueHaasDisplay", "ZenKaku", sans-serif;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255,255,255,0.42);
  }
  /* group label (e.g. Accessories) */
  .nav-menu-group {
    margin: 6px 13px 2px;
    padding-top: 9px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-family: "Fragment Mono", ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 10px;
    color: rgba(255,255,255,0.4);
  }
  /* current-page marker (Overview) */
  .nav-menu-link.is-current { position: relative; }
  .nav-menu-link.is-current::after {
    content: "";
    position: absolute;
    top: 15px; right: 13px;
    width: 6px; height: 6px;
    background: #4D1EF7;
    border-radius: 50%;
  }

  /* nested submenu ("Resources") — a second panel flying out to the right */
  .nav-sub { position: relative; }
  .nav-sub-trigger { position: relative; padding-right: 30px; }
  /* right-pointing chevron marking the flyout */
  .nav-sub-trigger::after {
    content: "";
    position: absolute;
    top: 50%; right: 15px;
    width: 6px; height: 6px;
    border-top: 1.5px solid rgba(255,255,255,0.55);
    border-right: 1.5px solid rgba(255,255,255,0.55);
    transform: translateY(-50%) rotate(45deg);
    transition: border-color 150ms ease;
  }
  .nav-sub:hover > .nav-sub-trigger,
  .nav-sub:focus-within > .nav-sub-trigger { background: rgba(255,255,255,0.07); }
  .nav-sub:hover > .nav-sub-trigger::after,
  .nav-sub:focus-within > .nav-sub-trigger::after {
    border-top-color: #fff; border-right-color: #fff;
  }
  .nav-flyout {
    position: absolute;
    top: -7px;            /* align inner panel top with parent panel padding */
    left: 100%;
    padding-left: 10px;   /* invisible hover bridge across the gap */
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(6px);
    transition: opacity 170ms ease, transform 170ms ease;
    z-index: 310;
  }
  .nav-sub:hover > .nav-flyout,
  .nav-sub:focus-within > .nav-flyout {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(0);
  }
}

/* ---- Blog "new posts" badge — tiny angular violet chip, top-right ---- */
.header-link.has-badge { position: relative; overflow: visible; }
.nav-badge {
  position: absolute;
  top: -8px; right: -14px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  background: #4D1EF7 !important;
  color: #fff !important;   /* stays white on the white pill too */
  font-family: "Fragment Mono", ui-monospace, monospace;
  font-size: 9px;
  line-height: 15px;
  text-align: center;
  letter-spacing: 0;
  border-radius: 2px 2px 5px 2px;
  corner-shape: round round bevel round;
}
body.nav-purple .nav-badge {
  background: #fff !important;
  color: #4D1EF7 !important;
}


/* ==== 7. Mobile pill + menu skin ==== */

@media (max-width: 991px) {
  /* ---- Pill: logo left, line-icon hamburger right; order-now lives in the menu ---- */
  .header-links { display: none !important; }
  /* keep ORDER NOW in the pill, sitting just left of the hamburger */
  .header-btn-frame { position: fixed !important; top: 4px !important; bottom: auto !important; right: 64px; left: auto !important;
    z-index: 110; margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; height: auto !important; }
  .header-btn-frame a.header-btn { height: 34px !important; min-height: 0 !important; padding: 0 13px !important; font-size: 11px !important; }
  .header-btn-frame .mobile-note { display: none !important; }

  .header-nav .nav-btn {
    display: flex !important; position: fixed; z-index: 110;
    top: 17px; right: 16px; width: 40px; height: 40px;
    align-items: center; justify-content: center;
    color: #FCFCFD; cursor: pointer; pointer-events: auto; background: none; border: 0;
  }
  body.nav-white .header-nav .nav-btn { color: #0D0D0D; }
  /* drop the rip's raster icons; draw a hairline hamburger in currentColor (DS icon rule) */
  .header-nav .nav-btn .nav-btn-inner { display: none !important; }
  .header-nav .nav-btn::before,
  .header-nav .nav-btn::after {
    content: ""; position: absolute; left: 9px; right: 9px; height: 1.5px;
    background: currentColor; border-radius: 1px;
  }
  .header-nav .nav-btn::before { top: 14px; box-shadow: 0 6px 0 currentColor; }  /* top + middle bar */
  .header-nav .nav-btn::after  { top: 26px; }                                     /* bottom bar */

  /* ---- Slide-in menu ---- */
  #mnav-overlay {
    background: #0D0D0D;
    padding: 20px 24px max(28px, env(safe-area-inset-bottom)); gap: 0;
    transition: transform .42s cubic-bezier(0.2,0.8,0.2,1), visibility 0s linear .42s;
  }
  #mnav-overlay.open { transform: none !important; transition: transform .42s cubic-bezier(0.2,0.8,0.2,1); }

  /* Flex column so the utility tier can pin to the bottom (margin-top:auto)
     while still scrolling with the menu when the accordions are open. */
  .mnav-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 44px; scrollbar-width: none;
    display: flex; flex-direction: column; }
  .mnav-body::-webkit-scrollbar { display: none; }

  /* CTA matches the angular order-now button: violet, Fragment Mono, beveled corner */
  #mnav-cta {
    margin-top: 22px; min-height: 52px;
    background: #4D1EF7; color: #fff;
    border-radius: 3px 3px 14px 3px; corner-shape: round round bevel round;
    font-family: "Fragment Mono", ui-monospace, monospace;
    font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 400;
    transition: background-color .12s cubic-bezier(0.2,0.8,0.2,1);
  }
  #mnav-cta:active { background: #4000FF; }
  /* Real store link: pin every link state (see purchase-model-button). */
  a#mnav-cta:link, a#mnav-cta:visited, a#mnav-cta:hover, a#mnav-cta:focus, a#mnav-cta:active { color: #fff; }

  /* Close: hairline X in currentColor */
  #mnav-close { top: 14px; right: 18px; width: 44px; height: 44px; color: #FCFCFD; font-size: 0; }
  #mnav-close::before, #mnav-close::after {
    content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 1.5px;
    background: currentColor; border-radius: 1px;
  }
  #mnav-close::before { transform: rotate(45deg); }
  #mnav-close::after { transform: rotate(-45deg); }

}

/* ==== 8. Mobile menu = a runtime clone of the desktop nav ==== */
/* The overlay's .mnav-body is filled by nav.html's script with a clone of
   .header-links, so mobile always mirrors desktop 1:1. These rules restyle the
   cloned dropdown structure as a flat accordion in the desktop voice. */
@media (max-width: 991px) {
  /* the clone is a plain column; undo the desktop pill centering/hiding */
  #mnav-overlay .mnav-menu { display: flex; flex-direction: column; position: static; transform: none; gap: 0;
    flex: 0 0 auto; }   /* never shrink when the accordions overflow the body */
  #mnav-overlay .nav-item { display: flex; flex-wrap: wrap; align-items: center; position: static; }
  #mnav-overlay .mnav-menu > .nav-item,
  #mnav-overlay .mnav-menu > a.header-link { border-bottom: 1px solid rgba(252,252,253,.10); }

  /* top-level rows: the same mono-uppercase voice as the desktop pill links */
  #mnav-overlay a.header-link {
    display: inline-flex !important; align-items: center; gap: 10px;
    padding: 17px 0; min-height: 0; width: auto;
    font-family: "Fragment Mono", ui-monospace, monospace;
    font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
    color: #FCFCFD; line-height: 1.2; transition: opacity .12s;
  }
  #mnav-overlay a.header-link:active { opacity: .6; }
  /* active page: in-flow version of the desktop violet underline */
  #mnav-overlay a.header-link.is-active { text-decoration: underline;
    text-decoration-color: #4D1EF7; text-decoration-thickness: 2px; text-underline-offset: 7px; }

  /* the caret is a real toggle with a full-height tap area, pinned right */
  #mnav-overlay .mnav-toggle { margin-left: auto; width: 56px; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; color: #FCFCFD; cursor: pointer; }
  #mnav-overlay .nav-caret { width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 6px solid currentColor; opacity: .6;
    transition: transform .18s ease, opacity .18s ease; }
  #mnav-overlay .nav-item.is-open .nav-caret { transform: rotate(180deg); opacity: 1; }

  /* the dropdown panel, flattened into an accordion — same items as desktop */
  #mnav-overlay .nav-menu { flex-basis: 100%; display: none; position: static; transform: none;
    padding: 0; opacity: 1; visibility: visible; pointer-events: auto; }
  #mnav-overlay .nav-item.is-open .nav-menu { display: block; }
  /* rail-free accordion: sub-items are set off by indent + tone, never a line */
  #mnav-overlay .nav-menu-panel { min-width: 0; background: transparent; border: 0;
    border-radius: 0; box-shadow: none; padding: 4px 0 14px; margin: 0; }
  #mnav-overlay .nav-menu-link { display: flex; flex-direction: column; gap: 3px;
    padding: 11px 14px; text-decoration: none;
    border-radius: 2px 2px 10px 2px; corner-shape: round round bevel round;
    transition: background-color .15s ease; }
  #mnav-overlay .nav-menu-link:active { background: rgba(255,255,255,.06); opacity: 1; }
  #mnav-overlay .nml-title { font-family: "Fragment Mono", ui-monospace, monospace;
    text-transform: uppercase; letter-spacing: 0.04em; font-size: 12.5px; color: #fff; }
  #mnav-overlay .nml-sub { font-size: 12px; letter-spacing: 0; text-transform: none;
    color: rgba(255,255,255,.42);
    font-family: "Neue Haas Grotesk Display Pro - 55 Roman", "Zen Kaku Gothic New - Regular", sans-serif; }
  #mnav-overlay .nav-menu-group { margin: 12px 14px 4px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-family: "Fragment Mono", ui-monospace, monospace; text-transform: uppercase;
    letter-spacing: 0.1em; font-size: 10px; color: rgba(255,255,255,.4); }
  /* nested "Resources" submenu: flatten the flyout into a soft tonal group block
     (depth by tonal step, not a nested rule line) beneath its trigger */
  #mnav-overlay .nav-sub { display: block; width: 100%; }
  #mnav-overlay .nav-sub-trigger { padding-right: 14px; }
  #mnav-overlay .nav-sub-trigger::after { display: none; }
  #mnav-overlay .nav-flyout { position: static; padding-left: 0;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  #mnav-overlay .nav-flyout .nav-menu-panel {
    margin: 2px 0 6px 14px; padding: 4px 8px;
    background: rgba(255,255,255,.045);
    border-radius: 3px 3px 13px 3px; corner-shape: round round bevel round; }
  #mnav-overlay .nav-flyout .nav-menu-link { padding: 10px 8px; }
  /* current-page dot sits inline after the title (desktop pins it absolutely) */
  #mnav-overlay .nav-menu-link.is-current .nml-title::after { content: "";
    display: inline-block; width: 6px; height: 6px; margin-left: 8px;
    background: #4D1EF7; border-radius: 50%; }
  /* blog badge: in-flow next to the label instead of pinned to the corner */
  #mnav-overlay .nav-badge { position: static; margin-left: 6px; }

  /* ---- Utility tier (footer destinations, in the menu's quiet register) ----
     Pinned to the BOTTOM of .mnav-body (margin-top:auto), so it sits just above
     the Order Now CTA rather than crowding the primary nav — the empty space
     belongs between the two tiers, not under them. Its own hairline anchors it;
     once the accordions open and the body overflows, auto resolves to 0 and it
     simply flows after the menu and scrolls. Two mono-labeled columns; links in
     the reading voice at detail size — a tier below the mono-caps top-level
     rows, so the primary nav stays the loudest thing in the menu. */
  #mnav-overlay .mnav-util { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr;
    gap: 24px; padding: 26px 0 2px; border-top: 1px solid rgba(252,252,253,.10); }
  #mnav-overlay .mnav-util-head { margin: 0 0 6px;
    font-family: "Fragment Mono", ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255,255,255,.4); }
  #mnav-overlay .mnav-util-head::before { content: "/ "; }
  #mnav-overlay .mnav-util a { display: block; padding: 8px 0;
    font-family: "Neue Haas Grotesk Display Pro - 55 Roman", "Zen Kaku Gothic New - Regular", sans-serif;
    font-size: 15px; line-height: 1.2; color: rgba(252,252,253,.78);
    text-decoration: none; transition: opacity .12s; }
  #mnav-overlay .mnav-util a:active { opacity: .6; }
}

/* ==== Page entrance ==========================================================
   On every page load the main content softly rises and fades in, so navigating
   between pages (landing <-> experiences, and any future route) reveals the
   destination gracefully instead of hard-cutting. The nav and footer are outside
   <main>, so they stay put — the chrome is always there; only the content
   animates. Transform + opacity only (GPU-friendly, no layout thrash), and it's
   scoped to <main> so it never touches the homepage's fixed nav or sticky scroll
   canvas. Off under prefers-reduced-motion (content just appears). Tuning below. */
@media (prefers-reduced-motion: no-preference) {
  /* easeOutCubic — the rise stays perceptible across the whole duration (an
     expo-out curve snaps to rest in ~80ms and reads as a pop, not a glide). */
  .page-enter { animation: bs-page-enter 0.62s cubic-bezier(0.33, 1, 0.68, 1) both; }
  @keyframes bs-page-enter {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ==== In-page smooth scroll ==================================================
   Same-page anchor jumps (e.g. the Experiences category picker: Simulation ->
   Gaming) glide instead of snapping. Scoped with :not(.lenis) so it never fights
   the homepage, where Lenis owns scrolling and pins scroll-behavior:auto once it
   initialises — only native-scroll pages get the CSS smoothing. Off under
   prefers-reduced-motion. Anchor targets set their own scroll-margin-top to clear
   the fixed nav (see each page). */
@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}


/* ==== 9. Klaviyo newsletter popup (store-theme twin) =========================
   Ported VERBATIM from the store theme's bs-chrome.css section 6 ("KLAVIYO
   NEWSLETTER POPUP") on 2026-08-27 — the white-plate / bevel-corner / Haas
   reskin of signup form SVDdhc. Same twin discipline as the nav: a styling
   change to the popup must be made in BOTH files in the same sitting
   (bigscreenvr-store-theme/assets/bs-chrome.css <-> this block), and the
   block bodies are kept byte-comparable so drift shows up in a plain diff.

   The tokens it consumes live in system.css, which the home-page mirror does
   NOT load — and home is exactly where the popup fires. Restated here with
   the same values (source of truth: system.css / the store's bs-chrome.css
   :root; change all three together). */
:root {
  --brand:      #4D1EF7;
  --brand-deep: #4000FF;
  --hairline:   #DFDFDF;
  --font-display: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display Pro - 55 Roman", "Zen Kaku Gothic New - Regular", system-ui, sans-serif;
  --dur: 300ms;
}

/* =============================================================================
   6. KLAVIYO NEWSLETTER POPUP — the signup modal, reskinned from Klaviyo's old
   black card to the store system: white plate, bevel corner, Haas type, one
   violet signal on the submit arrow. The markup is Klaviyo's, rendered at
   runtime with inline styles + !important reset rules, so everything here is
   an !important override on Klaviyo's stable hooks (data-testids and the
   klaviyo-* classes — the goNNNN classes are generated per publish, never
   target them). The old dark skin lived in beyond-store.css ("KLAVIO
   NEWSLETTER MODAL", now removed); it also hid the validation-error container
   (input~div) — that stays visible now.

   Scoped to [data-testid="modal-form-container"]: hits any Klaviyo modal
   (popup/flyout), never the footer embed. Copy, trigger timing, and targeting
   stay in Klaviyo's form editor ("Newsletter Popup", form SVDdhc).
   ============================================================================= */
[data-testid="modal-form-container"],
[data-testid="modal-form-container"] form.klaviyo-form {
  border-radius: 3px 3px 24px 3px !important;
  corner-shape: round round bevel round;
}
[data-testid="modal-form-container"] form.klaviyo-form {
  background: #fff !important;
  border: 1px solid var(--hairline) !important;
  max-width: calc(100vw - 20px) !important;   /* store mobile gutter is 10px per side */
}

/* success step — the only step with no email input. Its single row of text
   otherwise collapses the plate to a ~50px strip with the close X floating
   oddly beside it; hold the main step's height and center the message so
   both steps read as the same card. */
[data-testid="modal-form-container"] form.klaviyo-form:not(:has(.klaviyo-emailinput)) {
  min-height: 284px !important;  /* the main step's measured height — the two steps hold the same plate */
  align-items: center !important;
  justify-content: center !important;
}

/* close X — Klaviyo draws it as an SVG with stroke="#FFFFFF" presentation
   attributes; CSS wins over those. Circle dropped, bare hairline glyph. */
[data-testid="modal-form-container"] .klaviyo-close-form circle { stroke: transparent; fill: transparent; }
[data-testid="modal-form-container"] .klaviyo-close-form path { stroke: #000; stroke-width: 1.5; }

/* type: heading = Subhead 32/40 (Klaviyo's inline 32px already matches; the
   mobile step to 26/32 is ours), body = Body Small 18/24 in the one grey.
   A Fragment Mono heading was tried and reverted (July 2026): even stepped
   down to Body Large and uppercased it read worse, not "more styled" —
   headlines stay Haas, mono stays labels. */
/* Baseline for EVERY step of the form: the success ("thanks for subscribing")
   step carries the form design's old white text on markup the specific rules
   below don't match, which rendered white-on-white on the white plate. Lowest
   specificity here, so the heading/paragraph rules below still win their
   colors on the main step. */
[data-testid="modal-form-container"] .klaviyo-form-richtext * {
  color: #000 !important;
  font-family: var(--font-display) !important;
}
[data-testid="modal-form-container"] .klaviyo-form-richtext :is(h1, h2, h3, h4) span {
  color: #000 !important;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;   /* 55 Roman — never bold */
  line-height: 40px !important;
  letter-spacing: normal !important;
}
[data-testid="modal-form-container"] .klaviyo-form-richtext p span {
  color: #70777A !important;
  font-family: var(--font-display) !important;
  line-height: 24px !important;
}

/* row padding — matched by content (:has), not row position, so a reordered
   or added row in the form editor degrades to Klaviyo's own padding instead
   of taking someone else's. 40px side gutter on the plate; the image (arrow)
   component's 20px top is alignment, not rhythm: it bottom-aligns the 40px
   chip with the input's underline inside Klaviyo's 60px row. */
[data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-form-richtext h1) { padding: 48px 40px 0 !important; }
[data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-form-richtext p) { padding: 8px 40px 16px !important; }
[data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-emailinput) { padding: 0 0 0 40px !important; }
[data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-form-image) { padding: 20px 40px 0 16px !important; }

/* email input — the footer embed's register: bare underline, no box */
[data-testid="modal-form-container"] .klaviyo-emailinput input {
  color: #000 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #70777A !important;
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  padding: 0 !important;
}
[data-testid="modal-form-container"] .klaviyo-emailinput input::placeholder { color: #70777A !important; opacity: 1 !important; }
[data-testid="modal-form-container"] .klaviyo-emailinput input:focus { border-bottom-color: #000 !important; }

/* submit — Klaviyo ships it as a button wrapping an arrow image. The chip is
   the popup's one violet signal; the filter forces the arrow art white
   whatever colour the uploaded PNG is. */
[data-testid="modal-form-container"] .klaviyo-form-image button {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; padding: 0 !important;
  background: var(--brand) !important;
  border-radius: 2px 2px 12px 2px !important;
  corner-shape: round round bevel round;
  transition: background-color var(--dur);
  cursor: pointer;
}
[data-testid="modal-form-container"] .klaviyo-form-image button:hover { background: var(--brand-deep) !important; }
[data-testid="modal-form-container"] .klaviyo-form-image img { filter: brightness(0) invert(1); }

@media (max-width: 640.98px) {
  /* heading steps to the mobile Subhead token (26/32); 24px side gutters */
  [data-testid="modal-form-container"] .klaviyo-form-richtext :is(h1, h2, h3, h4) span {
    font-size: 26px !important;
    line-height: 32px !important;
  }
  [data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-form-richtext h1) { padding: 40px 24px 0 !important; }
  [data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-form-richtext p) { padding: 8px 24px 16px !important; }
  [data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-emailinput) { padding: 0 0 0 24px !important; }
  [data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-form-image) { padding: 20px 24px 0 12px !important; }
}
/* ^ that close brace ends the 640.98px media block above — it was never
   closed and only worked because browsers auto-close at EOF. Anything
   appended below would otherwise silently scope to mobile. */

/* =============================================================================
   BEVEL FALLBACK — browsers without corner-shape (Safari incl. all iOS,
   Firefox, 2026-08) keep the border-radius but drop the bevel, so the big
   cut corner renders as a fat CURVE. Twin of the store theme's convention
   (bs-chrome.css, commit 4c592c4 there).

   Fallback: reproduce the CUT with a clip-path. The polygon hugs the element
   loosely (±80px) on the three straight sides — so focus outlines and most
   of a box-shadow survive — and slices exactly along the bevel diagonal.
   Template, for a bevel of N px:
     clip-path: polygon(-80px -80px, calc(100% + 80px) -80px,
                        100% calc(100% - Npx), calc(100% - Npx) 100%,
                        -80px calc(100% + 80px));

   Where clip-path CANNOT go: elements whose look is a CONTRASTY 1px ring
   (ghost buttons, hairline-ringed cards on white) — the clip slices the
   ring open and leaves a notch. Those either keep a quiet small radius, or
   (where the cut matters) draw the ring themselves with a winding-ring
   polygon pseudo. Faint rings on the dark stage (≤~30% white) hide the
   notch and take the cut with their border kept. A box-shadow whose cut
   region meets the shadow gets removed (a clipped shadow smears); the nav
   pill keeps its shadows — its 22px corner seam is soft and body.nav-white
   needs the lift.

   Every rule pairing a large radius with corner-shape in THIS FILE must
   have a twin here. Same convention in guide.css / account.css / legal.css
   and each page's inline style block.
   ============================================================================= */
@supports not (corner-shape: round round bevel round) {
  .header-nav-background {
    border-radius: 3px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 22px), calc(100% - 22px) 100%, -80px calc(100% + 80px));
  }
  @media (max-width: 991.98px) {
    .header-nav-background { clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 18px), calc(100% - 18px) 100%, -80px calc(100% + 80px)); }
  }
  /* shared button register: quiet baseline (the ghost .action-btn family is
     upgraded to a drawn ring in home.html, where its !important skin lives);
     the fill members get the cut right here */
  .action-btn, .action-btn2, .action-btn-two, a.header-btn, a.header-btn.coded-beyond,
  .hero-btn, .bs-foot-discord, .footer-btn { border-radius: 2px !important; }
  a.header-btn, a.header-btn.coded-beyond,
  .bs-foot-discord,
  .footer-btn {
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 12px), calc(100% - 12px) 100%, -80px calc(100% + 80px));
  }
  .nav-menu-panel {   /* dark panel: 12%-white keyline hides the notch; shadow would smear */
    border-radius: 3px;
    box-shadow: none;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 16px), calc(100% - 16px) 100%, -80px calc(100% + 80px));
  }
  .nav-menu-link {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 9px), calc(100% - 9px) 100%, -80px calc(100% + 80px));
  }
  .nav-badge {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 5px), calc(100% - 5px) 100%, -80px calc(100% + 80px));
  }
  #mnav-cta {
    border-radius: 3px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 14px), calc(100% - 14px) 100%, -80px calc(100% + 80px));
  }
  #mnav-overlay .nav-menu-link {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 10px), calc(100% - 10px) 100%, -80px calc(100% + 80px));
  }
  #mnav-overlay .nav-flyout .nav-menu-panel {
    border-radius: 3px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 13px), calc(100% - 13px) 100%, -80px calc(100% + 80px));
  }
  /* Klaviyo popup: white bordered card keeps the quiet corner; the violet
     submit chip is a fill and takes the cut */
  [data-testid="modal-form-container"],
  [data-testid="modal-form-container"] form.klaviyo-form { border-radius: 3px !important; }
  [data-testid="modal-form-container"] .klaviyo-form-image button {
    border-radius: 2px !important;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 12px), calc(100% - 12px) 100%, -80px calc(100% + 80px));
  }
}