/* ══════════════════════════════════════════════════════════════════════
   <as-navbar> shadow-root stylesheet.

   Loaded as a real same-origin stylesheet inside the shadow root so the
   component needs no <style> element and no style-src-elem 'unsafe-inline'.

   url() below resolves against THIS file, not the host document, so the
   same sheet is correct from any page depth.

   Edited here only — script/as-navbar.js links it, it is not generated.
   ══════════════════════════════════════════════════════════════════════ */


    @font-face {
        font-family: 'AsNavMegumi';
        src: url('../../Fonts/Megumi.woff2') format('woff2');
        font-weight: 400 900;
        font-style: normal;
        font-display: swap;
    }

    /* Host-level protection: shield <as-navbar> from ANY page CSS */
    :host {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        line-height: normal !important;
        z-index: 9999 !important;
        float: none !important;
        transform: none !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        flex-basis: auto !important;
    }

    /* as-nav: scroll-lock class (only body-level rule needed by component) */
    body.as-nav-lock {
        overflow: hidden !important;
    }

    /* as-nav: scoped reset — replaces global *, a, button, ul resets */
    #as-nav-root,
    #as-nav-root *,
    #as-nav-root *::before,
    #as-nav-root *::after {
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        line-height: normal !important;
        letter-spacing: normal !important;
        text-transform: none !important;
        text-indent: 0 !important;
        text-shadow: none !important;
        float: none !important;
    }

    #as-nav-root {
        font-family: 'AsNavMegumi', system-ui, -apple-system, sans-serif !important;
        font-size: 16px !important;
        color: #e6e6e6 !important;
        line-height: 1.5 !important;
        -webkit-text-fill-color: unset !important;
    }

    #as-nav-root a {
        text-decoration: none !important;
        color: inherit !important;
        background: none !important;
        -webkit-text-fill-color: unset !important;
        border: none !important;
    }

    #as-nav-root button {
        border: none !important;
        cursor: pointer !important;
        font-family: inherit !important;
        background: transparent !important;
        -webkit-text-fill-color: unset !important;
    }

    #as-nav-root ul,
    #as-nav-root li {
        list-style: none !important;
    }

    #as-nav-root img {
        border-style: none !important;
        max-width: none !important;
        height: auto !important;
    }

    #as-nav-root svg {
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* as-nav: z-index scale variable */
    #as-nav-root {
        --as-nav-z: 5000;
    }

    /* ===== SCROLLING BANNER ===== */
    #as-nav-root .top-banner {
        width: 100% !important;
        background: #222 !important;
        overflow: hidden !important;
        position: relative !important;
        z-index: calc(var(--as-nav-z) + 4) !important;
        height: 34px !important;
        display: flex !important;
        align-items: center !important;
        border: none !important;
    }

    #as-nav-root .banner-track {
        display: flex !important;
        white-space: nowrap !important;
        animation: as-nav-bannerScroll 20s linear infinite !important;
    }

    /* There is no pause button on this ticker by design. It stops on hover,
       and the paired script adds [data-motion-paused] for keyboard focus,
       hidden tabs and prefers-reduced-motion. The :hover rule is CSS-only on
       purpose, so the band still holds still under the pointer before (or
       without) the component script. */
    #as-nav-root .top-banner:hover .banner-track,
    #as-nav-root .top-banner[data-motion-paused] .banner-track {
        animation-play-state: paused !important;
    }

    #as-nav-root .banner-item {
        display: inline-flex !important;
        align-items: center !important;
        gap: 32px !important;
        padding: 0 32px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        letter-spacing: 0.01em !important;
        line-height: 1 !important;
        background: linear-gradient(90deg, #bafc01, #01fca3) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }

    #as-nav-root .banner-item a {
        background: linear-gradient(90deg, #bafc01, #01fca3) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        transition: opacity .2s !important;
        border: none !important;
        padding: 0 !important;
        font-size: inherit !important;
    }

    #as-nav-root .banner-item a:hover {
        opacity: 0.8 !important;
    }

    /* as-nav: namespaced keyframes */
    @keyframes as-nav-bannerScroll {
        0% {
            transform: translateX(0);
        }

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

    /* ===== MAIN NAV ===== */
    #as-nav-root .main-nav {
        position: relative !important;
        top: 0 !important;
        z-index: calc(var(--as-nav-z) + 3) !important;
        background: #000000 !important;
        height: 58px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        border-bottom: none !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
        width: 100% !important;
    }

    /* as-nav: fixed state applied by JS when banner scrolls out */
    #as-nav-root .main-nav.as-nav-fixed {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    #as-nav-root .nav-inner {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        height: 100% !important;
        padding: 0 clamp(28px, 3.2vw, 64px) !important;
    }

    /* ===== LOGO ===== */
    #as-nav-root .logo {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        height: 100% !important;
        margin-right: 0 !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
    }

    #as-nav-root .logo img {
        max-height: 38px !important;
        width: auto !important;
        display: block !important;
        height: auto !important;
    }

    /* ===== NAV LINKS ===== */
    #as-nav-root .nav-links {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        gap: 3px !important;
        height: 100% !important;
        margin-left: clamp(56px, 12vw, 250px) !important;
    }

    #as-nav-root .nav-item {
        position: relative !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        height: 100% !important;
        display: flex !important;
        align-items: stretch !important;
    }

    #as-nav-root .nav-trigger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: clamp(118px, 7.8vw, 160px) !important;
        gap: 7px !important;
        height: calc(100% - 8px) !important;
        margin: 4px 0 !important;
        padding: 0 16px !important;
        font-size: 15.5px !important;
        font-weight: 700 !important;
        color: #e6e6e6 !important;
        background: #262626 !important;
        border-radius: 5px !important;
        transition: background .2s ease, color .2s ease !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        border: none !important;
        line-height: 1 !important;
        letter-spacing: 0.018em !important;
        text-decoration: none !important;
        -webkit-text-fill-color: unset !important;
        box-shadow: none !important;
    }

    #as-nav-root .nav-links .nav-item:nth-child(2) .nav-trigger {
        width: clamp(130px, 8.5vw, 174px) !important;
    }

    #as-nav-root .nav-links .nav-item:nth-child(3) .nav-trigger {
        width: clamp(138px, 9vw, 184px) !important;
    }

    #as-nav-root .nav-links .nav-item:nth-child(4) .nav-trigger {
        width: clamp(100px, 6.2vw, 128px) !important;
    }

    #as-nav-root .nav-links .nav-item:nth-child(5) .nav-trigger {
        width: clamp(124px, 8.7vw, 178px) !important;
    }

    #as-nav-root .nav-trigger:hover,
    #as-nav-root .nav-item.active .nav-trigger {
        background: #fff !important;
        color: #000 !important;
        -webkit-text-fill-color: unset !important;
    }

    #as-nav-root :is(a, button, input, select, textarea):focus-visible {
        outline: 2px solid #fff !important;
        outline-offset: 3px !important;
        box-shadow: 0 0 0 5px #2563eb !important;
    }

    #as-nav-root .nav-trigger .plus-icon {
        width: 14px !important;
        height: 14px !important;
        border-radius: 1px !important;
        background: #eb3434 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        color: #000000 !important;
        text-shadow: 0.35px 0 0 #000000, -0.35px 0 0 #000000, 0 0.35px 0 #000000, 0 -0.35px 0 #000000 !important;
        transition: transform .3s ease !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
        position: relative !important;
        top: -3px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ===== RIGHT SIDE ===== */
    #as-nav-root .nav-right {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        flex-shrink: 0 !important;
        height: 100% !important;
        margin-left: auto !important;
    }

    #as-nav-root .login-link {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        height: calc(100% - 8px) !important;
        margin: 4px 0 !important;
        padding: 0 22px !important;
        font-size: 15.5px !important;
        font-weight: 700 !important;
        color: #e6e6e6 !important;
        background: #262626 !important;
        transition: background .2s, color .2s !important;
        border-radius: 5px !important;
        border: none !important;
        text-decoration: none !important;
        -webkit-text-fill-color: unset !important;
        line-height: 1 !important;
        letter-spacing: 0.018em !important;
        box-shadow: none !important;
    }

    #as-nav-root .login-link:hover {
        background: rgba(255, 255, 255, .1) !important;
    }

    #as-nav-root .login-link .arrow-icon {
        width: 18px !important;
        height: 18px !important;
        border: 1.5px solid rgba(255, 255, 255, .5) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #as-nav-root .login-link .arrow-icon svg {
        width: 10px !important;
        height: 10px !important;
    }

    #as-nav-root .btn-demo {
        height: calc(100% - 8px) !important;
        margin: 4px 0 !important;
        padding: 0 22px !important;
        font-size: 15.5px !important;
        font-weight: 700 !important;
        background: #ebdc77 !important;
        color: #000 !important;
        border-radius: 2px !important;
        transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important;
        border: none !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        letter-spacing: 0.018em !important;
        -webkit-text-fill-color: unset !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    #as-nav-root .btn-demo:hover {
        transform: translateY(-1px) !important;
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(247, 255, 0, .3) !important;
    }

    #as-nav-root .btn-try {
        height: calc(100% - 8px) !important;
        margin: 4px 0 !important;
        padding: 0 22px !important;
        font-size: 15.5px !important;
        font-weight: 700 !important;
        background: #f58af5 !important;
        color: #000 !important;
        border-radius: 2px !important;
        transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important;
        border: none !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        letter-spacing: 0.018em !important;
        -webkit-text-fill-color: unset !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    #as-nav-root .btn-try:hover {
        transform: translateY(-1px) !important;
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(255, 0, 255, .3) !important;
    }

    @media (min-width: 1025px) and (max-width: 1320px) {
        #as-nav-root .nav-inner {
            padding: 0 24px !important;
        }

        #as-nav-root .logo img {
            max-height: 40px !important;
        }

        #as-nav-root .nav-links {
            margin-left: 24px !important;
        }

        #as-nav-root .nav-trigger {
            width: auto !important;
            min-width: 96px !important;
            padding: 0 12px !important;
            font-size: 15.5px !important;
            gap: 5px !important;
        }

        #as-nav-root .nav-links .nav-item:nth-child(2) .nav-trigger,
        #as-nav-root .nav-links .nav-item:nth-child(3) .nav-trigger,
        #as-nav-root .nav-links .nav-item:nth-child(5) .nav-trigger {
            min-width: 112px !important;
        }

        #as-nav-root .nav-links .nav-item:nth-child(4) .nav-trigger {
            min-width: 88px !important;
        }

        #as-nav-root .login-link,
        #as-nav-root .btn-demo,
        #as-nav-root .btn-try {
            padding: 0 14px !important;
            font-size: 15.5px !important;
        }
    }

    /* ===== MEGA MENU OVERLAY ===== */
    #as-nav-root .mega-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, .5) !important;
        z-index: calc(var(--as-nav-z) + 1) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity .3s ease !important;
        border: none !important;
    }

    #as-nav-root .mega-overlay.visible {
        opacity: 1 !important;
        pointer-events: all !important;
    }

    /* ===== MEGA MENU PANEL ===== */
    #as-nav-root .nav-item {
        perspective: 800px !important;
    }

    #as-nav-root .mega-panel {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: max-content !important;
        background: #000 !important;
        z-index: calc(var(--as-nav-z) + 2) !important;
        border-radius: 6px !important;
        margin-top: 10px !important;
        pointer-events: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-12px) scale3d(.96, .96, 1) !important;
        transform-origin: top center !important;
        transition:
            opacity .2s cubic-bezier(.2, 0, .2, 1),
            transform .25s cubic-bezier(.2, 0, .2, 1),
            visibility 0s .25s !important;
        will-change: transform, opacity !important;
        box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .6) !important;
        border: none !important;
    }

    #as-nav-root .mega-panel.open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: all !important;
        transform: translateY(0) scale3d(1, 1, 1) !important;
        transition:
            opacity .25s cubic-bezier(.2, 0, .2, 1),
            transform .3s cubic-bezier(.2, 0, .1, 1),
            visibility 0s 0s !important;
    }

    #as-nav-root .mega-content {
        padding: 6px !important;
        display: grid !important;
        grid-template-columns: 250px auto !important;
        gap: 6px !important;
        align-items: stretch !important;
    }

    /* FEATURED CARD (left) */
    #as-nav-root .mega-featured {
        border-radius: 4px !important;
        padding: 32px 28px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        position: relative !important;
        overflow: hidden !important;
        border: none !important;
    }

    #as-nav-root .mega-featured.theme-cyan {
        background: linear-gradient(135deg, #67e8f9, #a5f3fc, #cffafe) !important;
    }

    #as-nav-root .mega-featured.theme-yellow {
        background: linear-gradient(135deg, #fde68a, #fef08a, #fef9c3) !important;
    }

    #as-nav-root .mega-featured.theme-purple {
        background: linear-gradient(135deg, #c4b5fd, #ddd6fe, #ede9fe) !important;
    }

    #as-nav-root .mega-featured.theme-pink {
        background: linear-gradient(135deg, #f9a8d4, #f472b6, #fce7f3) !important;
    }

    #as-nav-root .mega-featured-text {
        font-size: 28px !important;
        font-weight: 800 !important;
        color: #000 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
        -webkit-text-fill-color: unset !important;
    }

    #as-nav-root .mega-featured-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: #000 !important;
        color: #e6e6e6 !important;
        padding: 12px 20px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        width: fit-content !important;
        transition: background .2s, transform .2s !important;
        text-decoration: none !important;
        margin-top: 24px !important;
        border: none !important;
        line-height: 1 !important;
        -webkit-text-fill-color: unset !important;
    }

    #as-nav-root .mega-featured-btn:hover {
        background: #333 !important;
        transform: translateY(-1px) !important;
    }

    #as-nav-root .mega-featured-btn .circle-arrow {
        width: 22px !important;
        height: 22px !important;
        border: 1.5px solid rgba(255, 255, 255, .5) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #as-nav-root .mega-featured-btn .circle-arrow svg {
        width: 10px !important;
        height: 10px !important;
    }

    /* LINKS (right column) */
    #as-nav-root .mega-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        min-width: 200px !important;
    }

    #as-nav-root .mega-links.as-nav-multi-col {
        display: grid !important;
        grid-template-rows: repeat(9, min-content) !important;
        grid-auto-flow: column !important;
        grid-auto-columns: 270px !important;
        gap: 2px !important;
        width: auto !important;
    }

    #as-nav-root .mega-link {
        display: flex !important;
        align-items: center !important;
        padding: 14px 54px 14px 20px !important;
        border-radius: 4px !important;
        background: #2a2a2a !important;
        transition: background .25s ease, border-color .25s ease, box-shadow .2s, transform .2s !important;
        border: 1px solid transparent !important;
        cursor: pointer !important;
        text-decoration: none !important;
        color: #e6e6e6 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        -webkit-text-fill-color: unset !important;
    }

    #as-nav-root .mega-link:hover {
        background: #333 !important;
        border-color: rgba(255, 255, 255, .1) !important;
        transform: translateY(-2px) !important;
        z-index: 1 !important;
        position: relative !important;
    }

    /* Icon badges inside mega-links */
    #as-nav-root .mega-link-icon {
        width: 22px !important;
        height: 22px !important;
        border-radius: 5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
        margin-right: 10px !important;
        line-height: 1 !important;
    }

    #as-nav-root .mega-product-right { display: flex !important; flex-direction: column !important; gap: 6px !important; }
    #as-nav-root .mega-groups { display: grid !important; grid-template-columns: repeat(3, 224px) !important; gap: 2px 10px !important; align-items: start !important; }
    #as-nav-root .mega-group { display: flex !important; flex-direction: column !important; gap: 2px !important; }
    #as-nav-root .mega-group-title { font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.4) !important; padding: 9px 12px 3px !important; }
    #as-nav-root .mega-product-right .mega-link { padding: 9px 16px 9px 14px !important; font-size: 13.5px !important; }
    #as-nav-root .as-nav-highlight { background: linear-gradient(135deg, rgba(103,232,249,0.18), rgba(192,132,252,0.16)) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14) !important; }
    #as-nav-root .mega-subrow { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; margin-top: 6px !important; padding: 14px 18px !important; border-radius: 6px !important; background: linear-gradient(90deg, rgba(103,232,249,0.18), rgba(192,132,252,0.16)) !important; border: 1px solid rgba(255,255,255,0.1) !important; }
    #as-nav-root .mega-subrow-text { color: rgba(255,255,255,0.85) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.3 !important; }
    #as-nav-root .mega-subrow-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; background: #22d3ee !important; color: #04232b !important; padding: 10px 16px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap !important; transition: transform .2s, filter .2s !important; }
    #as-nav-root .mega-subrow-btn:hover { transform: translateY(-2px) !important; background: #06b6d4 !important; box-shadow: 0 8px 22px rgba(34,211,238,0.45) !important; }
    #as-nav-root .mega-subrow-btn .circle-arrow { width: 20px !important; height: 20px !important; border: 1.5px solid rgba(0,0,0,0.35) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: transform .2s !important; }
    #as-nav-root .mega-subrow-btn .circle-arrow svg { width: 10px !important; height: 10px !important; }
    #as-nav-root .mega-subrow-btn:hover .circle-arrow { transform: translate(2px,-2px) !important; }
    @media (max-width: 640px) {
        #as-nav-root .top-banner { height: auto !important; min-height: 30px !important; padding: 5px 0 !important; }
        #as-nav-root .banner-item { font-size: 11.5px !important; padding: 0 16px !important; gap: 16px !important; line-height: 1.4 !important; }
    }

    /* Theme Colors */
    #as-nav-root .nav-item[data-as-nav-dropdown="product"] .mega-link:hover {
        background: rgba(103, 232, 249, 0.35) !important;
        box-shadow: 0 4px 20px rgba(103, 232, 249, 0.4), inset 0 0 0 1px rgba(103, 232, 249, 0.5) !important;
        border-color: rgba(103, 232, 249, 0.6) !important;
    }

    #as-nav-root .nav-item[data-as-nav-dropdown="solutions"] .mega-link:hover {
        background: rgba(253, 230, 138, 0.35) !important;
        box-shadow: 0 4px 20px rgba(253, 230, 138, 0.4), inset 0 0 0 1px rgba(253, 230, 138, 0.5) !important;
        border-color: rgba(253, 230, 138, 0.6) !important;
    }

    #as-nav-root .nav-item[data-as-nav-dropdown="resources"] .mega-link:hover {
        background: rgba(196, 181, 253, 0.35) !important;
        box-shadow: 0 4px 20px rgba(196, 181, 253, 0.4), inset 0 0 0 1px rgba(196, 181, 253, 0.5) !important;
        border-color: rgba(196, 181, 253, 0.6) !important;
    }

    #as-nav-root .nav-item[data-as-nav-dropdown="company"] .mega-link:hover {
        background: rgba(249, 168, 212, 0.35) !important;
        box-shadow: 0 4px 20px rgba(249, 168, 212, 0.4), inset 0 0 0 1px rgba(249, 168, 212, 0.5) !important;
        border-color: rgba(249, 168, 212, 0.6) !important;
    }


    #as-nav-root .mega-link.as-nav-highlight {
        background: linear-gradient(135deg, #a855f7, #6366f1) !important;
        color: #e6e6e6 !important;
        font-weight: 600 !important;
    }

    #as-nav-root .mega-link.as-nav-highlight:hover {
        background: linear-gradient(135deg, #9333ea, #4f46e5) !important;
    }

    /* ===== MOBILE ===== */
    #as-nav-root .mobile-toggle {
        display: none !important;
        width: 40px !important;
        height: 40px !important;
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, .15) !important;
        border-radius: 8px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        cursor: pointer !important;
    }

    #as-nav-root .mobile-toggle span {
        width: 20px !important;
        height: 2px !important;
        background: #fff !important;
        border-radius: 2px !important;
        transition: transform .3s, opacity .3s !important;
        display: block !important;
    }

    #as-nav-root .mobile-toggle.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    #as-nav-root .mobile-toggle.open span:nth-child(2) {
        opacity: 0 !important;
    }

    #as-nav-root .mobile-toggle.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }

    #as-nav-root .mobile-menu {
        display: none !important;
        position: fixed !important;
        /* Sit BELOW the 58px navbar with a small buffer so the first item
           (Product) is never clipped by the navbar's higher z-index. */
        top: 64px !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 300px !important;
        max-width: 85vw !important;
        background: #111 !important;
        z-index: calc(var(--as-nav-z) + 2) !important;
        flex-direction: column !important;
        padding: 18px 20px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translateX(100%) !important;
        transition: transform .35s cubic-bezier(.4, 0, .2, 1) !important;
        border: none !important;
        box-sizing: border-box !important;
    }

    #as-nav-root .mobile-menu.open {
        transform: translateX(0) !important;
    }

    #as-nav-root .mobile-menu-item {
        border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    }

    #as-nav-root .mobile-menu-trigger {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 8px 0 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #e6e6e6 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        -webkit-text-fill-color: unset !important;
        line-height: 1.2 !important;
    }

    /* "+" indicator — drawn with TWO white CSS bars (no font, no SVG, no
       pseudo-element content text). This cannot fail to render. */
    #as-nav-root .mobile-menu-trigger .mobile-plus {
        position: relative !important;
        display: inline-block !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        flex: 0 0 18px !important;
        background: transparent !important;
        transition: transform .3s !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 0 !important;
    }

    /* Horizontal white bar */
    #as-nav-root .mobile-menu-trigger .mobile-plus::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 8px !important;
        left: 2px !important;
        width: 14px !important;
        height: 2px !important;
        background: #ffffff !important;
        border-radius: 1px !important;
    }

    /* Vertical white bar */
    #as-nav-root .mobile-menu-trigger .mobile-plus::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 2px !important;
        left: 8px !important;
        width: 2px !important;
        height: 14px !important;
        background: #ffffff !important;
        border-radius: 1px !important;
        transition: opacity .3s !important;
    }

    /* When item is open, hide the vertical bar so "+" becomes "−" */
    #as-nav-root .mobile-menu-item.open .mobile-menu-trigger .mobile-plus::after {
        opacity: 0 !important;
    }

    #as-nav-root .mobile-accordion {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height .35s cubic-bezier(.4, 0, .2, 1) !important;
    }

    #as-nav-root .mobile-menu-item.open .mobile-accordion {
        max-height: 500px !important;
    }

    #as-nav-root .mobile-accordion a {
        display: block !important;
        padding: 5px 0 5px 14px !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.25 !important;
        color: rgba(255, 255, 255, .7) !important;
        transition: color .2s !important;
        border: none !important;
        background: none !important;
        -webkit-text-fill-color: unset !important;
    }

    #as-nav-root .mobile-accordion a:hover {
        color: #e6e6e6 !important;
    }

    #as-nav-root .mobile-menu-link {
        display: block !important;
        padding: 8px 0 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #e6e6e6 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
        background: none !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        -webkit-text-fill-color: unset !important;
        line-height: 1.2 !important;
    }

    #as-nav-root .mobile-cta {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin: 14px 0 0 !important;
        padding: 14px 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #as-nav-root .mobile-cta a {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
        padding: 10px 12px !important;
        margin: 0 !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border: none !important;
        -webkit-text-fill-color: unset !important;
        line-height: 1.2 !important;
    }

    #as-nav-root .mobile-cta .m-demo {
        background: #bafc01 !important;
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }

    #as-nav-root .mobile-cta .m-try {
        background: #ffffff !important;
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }

    /* ===== TRY FOR FREE CHOOSER ===== */
    #as-nav-root .as-start-modal-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: calc(var(--as-nav-z) + 80) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: clamp(14px, 4vw, 34px) !important;
        background: rgba(0, 0, 0, .74) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #as-nav-root .as-start-modal-backdrop[hidden] {
        display: none !important;
    }

    #as-nav-root .as-start-modal-panel {
        position: relative !important;
        width: min(720px, calc(100vw - 28px)) !important;
        max-height: calc(100vh - 28px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: clamp(18px, 3vw, 26px) !important;
        border-radius: 8px !important;
        background: #08090c !important;
        border: 1px solid rgba(255, 255, 255, .16) !important;
        box-shadow: 0 28px 90px rgba(0, 0, 0, .62), 0 0 0 1px rgba(245, 138, 245, .18) !important;
        color: #ffffff !important;
        transform: translateY(0) scale(1) !important;
        animation: as-nav-start-modal-in .18s ease-out !important;
        outline: none !important;
    }

    #as-nav-root .as-start-modal-panel::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 0 auto 0 !important;
        height: 5px !important;
        background: linear-gradient(90deg, #bafc01, #22d3ee, #f58af5, #ebdc77) !important;
        border-radius: 8px 8px 0 0 !important;
        pointer-events: none !important;
    }

    #as-nav-root .as-start-modal-close {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, .09) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        transition: background .2s ease, transform .2s ease !important;
    }

    #as-nav-root .as-start-modal-close:hover {
        background: rgba(255, 255, 255, .18) !important;
        transform: translateY(-1px) !important;
    }

    #as-nav-root .as-start-modal-head {
        padding-right: 42px !important;
        margin-bottom: 16px !important;
    }

    #as-nav-root .as-start-modal-title {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-size: clamp(25px, 3.4vw, 34px) !important;
        font-weight: 900 !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;
        margin: 4px 0 8px !important;
    }

    #as-nav-root .as-start-modal-subtitle {
        color: rgba(255, 255, 255, .74) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, .74) !important;
        font-size: 15.5px !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
        max-width: 570px !important;
    }

    #as-nav-root .as-start-options {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    #as-nav-root .as-start-option-card {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        min-height: 230px !important;
        padding: 18px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, .13) !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    }

    #as-nav-root .as-start-option-card[data-as-card="free"] {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(186, 252, 1, .08) !important;
    }

    #as-nav-root .as-start-option-card[data-as-card="trial"] {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(245, 138, 245, .10) !important;
    }

    #as-nav-root .as-start-option-kicker {
        width: 34px !important;
        height: 6px !important;
        border-radius: 999px !important;
        margin-bottom: 13px !important;
        background: #bafc01 !important;
        display: block !important;
    }

    #as-nav-root .as-start-option-card[data-as-card="trial"] .as-start-option-kicker {
        background: #f58af5 !important;
    }

    #as-nav-root .as-start-option-card h3 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-size: 21px !important;
        font-weight: 900 !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;
        margin-bottom: 9px !important;
        overflow-wrap: anywhere !important;
    }

    #as-nav-root .as-start-option-card p {
        color: rgba(255, 255, 255, .76) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, .76) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.42 !important;
        overflow-wrap: anywhere !important;
    }

    #as-nav-root .as-start-option-note {
        color: rgba(255, 255, 255, .58) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, .58) !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        margin: 13px 0 15px !important;
    }

    #as-nav-root .as-start-option-btn {
        width: 100% !important;
        min-height: 44px !important;
        margin-top: auto !important;
        padding: 12px 14px !important;
        border-radius: 6px !important;
        background: #bafc01 !important;
        color: #050505 !important;
        -webkit-text-fill-color: #050505 !important;
        font-size: 14.5px !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    #as-nav-root .as-start-option-card[data-as-card="trial"] .as-start-option-btn {
        background: #f58af5 !important;
    }

    #as-nav-root .as-start-option-btn:hover {
        transform: translateY(-1px) !important;
        filter: brightness(1.04) !important;
        box-shadow: 0 12px 28px rgba(186, 252, 1, .20) !important;
    }

    #as-nav-root .as-start-option-card[data-as-card="trial"] .as-start-option-btn:hover {
        box-shadow: 0 12px 28px rgba(245, 138, 245, .23) !important;
    }

    #as-nav-root .as-start-modal-footer {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px 18px !important;
        margin-top: 15px !important;
        padding-top: 14px !important;
        border-top: 1px solid rgba(255, 255, 255, .10) !important;
    }

    #as-nav-root .as-start-modal-footer a {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;
        text-decoration: underline !important;
        text-underline-offset: 4px !important;
        overflow-wrap: anywhere !important;
    }

    #as-nav-root .as-start-modal-footer .as-start-access-link {
        color: rgba(255, 255, 255, .72) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, .72) !important;
        max-width: 430px !important;
        text-decoration-color: rgba(255, 255, 255, .42) !important;
    }

    #as-nav-root .as-start-modal-close:focus-visible,
    #as-nav-root .as-start-option-btn:focus-visible,
    #as-nav-root .as-start-modal-footer a:focus-visible {
        outline: 3px solid #22d3ee !important;
        outline-offset: 3px !important;
    }

    @keyframes as-nav-start-modal-in {
        from {
            opacity: 0;
            transform: translateY(8px) scale(.98);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @media (max-width: 720px) {
        #as-nav-root .as-start-modal-backdrop {
            align-items: flex-start !important;
            padding: 12px !important;
        }

        #as-nav-root .as-start-modal-panel {
            width: 100% !important;
            max-height: calc(100vh - 24px) !important;
            padding: 18px !important;
        }

        #as-nav-root .as-start-options {
            grid-template-columns: 1fr !important;
        }

        #as-nav-root .as-start-option-card {
            min-height: 0 !important;
        }

        #as-nav-root .as-start-modal-footer {
            align-items: flex-start !important;
            flex-direction: column !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        #as-nav-root .banner-track {
            animation: none !important;
        }

        #as-nav-root *,
        #as-nav-root *::before,
        #as-nav-root *::after {
            transition-duration: 0.001ms !important;
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
        }

        #as-nav-root .as-start-modal-panel {
            animation: none !important;
        }

        #as-nav-root .as-start-option-btn,
        #as-nav-root .as-start-modal-close {
            transition: none !important;
        }
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1024px) {

        #as-nav-root .nav-links,
        #as-nav-root .nav-right {
            display: none !important;
        }

        #as-nav-root .mobile-toggle {
            display: flex !important;
            /* Pin the burger to the far right of the navbar so it never
               sits next to the logo. */
            margin-left: auto !important;
            margin-right: 12px !important;
        }

        #as-nav-root .logo {
            margin-right: 0 !important;
        }

        #as-nav-root .mobile-menu {
            display: flex !important;
        }

        #as-nav-root .mega-panel {
            display: none !important;
        }
    }

    /* ===== ACTIVE PAGE HIGHLIGHT ===== */
    #as-nav-root a.as-nav-active-link {
        color: #bafc01 !important;
        -webkit-text-fill-color: #bafc01 !important;
    }
    #as-nav-root .as-nav-active-parent > .nav-trigger {
        color: #bafc01 !important;
        -webkit-text-fill-color: #bafc01 !important;
    }