/*
 * legacy-nav.css - mega-menu / navigation styles.
 *
 * Extracted verbatim from a 711-line inline <style> block that was duplicated
 * byte-for-byte across 6 pages (ai-assistant, cron-jobs, whalepay, auto-backup,
 * mail-server, retail-product). These .ge-* classes are LIVE - they style the
 * desktop mega-menu, the mobile sheet and the nav auth buttons - so this file
 * is required by those pages, not dead code despite the "legacy" name.
 *
 * The "ge" prefix predates the current "gw" convention and is kept to avoid
 * touching every class attribute in the markup.
 */

                /* Transparent until the page scrolls: at the top the bar carries no
                   fill at all and the hero runs straight under it. The surface, its
                   blur and the hairline all fade in on .is-scrolled — which is also
                   forced while the mega menu or the mobile sheet is open, so a panel
                   never hangs off an invisible bar. */
                .ge-nav {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    z-index: 100;
                    background: transparent;
                    backdrop-filter: none;
                    -webkit-backdrop-filter: none;
                    border-bottom: 1px solid transparent;
                    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease,
                        backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
                    --mega-surface: #ffffff;
                }

                .ge-nav.is-scrolled {
                    background: rgba(255, 255, 255, 0.98);
                    backdrop-filter: blur(24px);
                    -webkit-backdrop-filter: blur(24px);
                    border-bottom-color: rgba(0, 0, 0, 0.05);
                    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
                }

                .ge-nav-inner {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    max-width: 1600px;
                    margin: 0 auto;
                    padding: 0 20px;
                    height: 75px;
                }

                .ge-nav-left {
                    display: flex;
                    align-items: center;
                    gap: .2rem;
                    height: 100%;
                }

                .ge-logo {
                    display: flex;
                    align-items: center;
                    gap: 16px;
                    text-decoration: none;
                }

                .ge-logo-icon {
                    width: 66px;
                    height: 66px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                }

                .ge-logo-icon img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

                .ge-logo-words {
                    display: block;
                }

                .ge-logo-text {
                    font-family: 'Rajdhani', 'DM Sans', sans-serif;
                    font-size: 34px;
                    font-weight: 800;
                    letter-spacing: 5px;
                    text-transform: uppercase;
                    line-height: 1;
                    margin-bottom: 2px;
                    min-width: 170px;
                    display: inline-block;
                }

                .ge-l {
                    display: inline-block;
                    transition: all .2s ease;
                }

                .ge-l-on {
                    color: #0f172a;
                }

                .ge-l-off {
                    color: #64748b;
                }

                .ge-l:hover {
                    color: #03D9F0;
                    transform: translateY(-1px) scale(1.05);
                }

                .ge-logo-version {
                    font-size: 11px;
                    letter-spacing: 2.2px;
                    font-weight: 700;
                    color: #64748b;
                    text-transform: uppercase;
                    line-height: 1;
                    display: block;
                }

                .ge-links {
                    display: flex;
                    gap: .5rem;
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    height: 100%;
                }

                .ge-item {
                    position: relative;
                    display: flex;
                    align-items: stretch;
                    height: 100%;
                }

                .ge-item-btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: .4rem;
                    padding: 0 1.2rem;
                    min-width: 110px;
                    height: 100%;
                    font-weight: 600;
                    font-size: .95rem;
                    color: #44494f;
                    background: transparent;
                    border: 0;
                    cursor: pointer;
                    text-decoration: none;
                    position: relative;
                    transition: all .2s ease;
                }

                .ge-item:hover>.ge-item-btn {
                    color: #0f172a;
                    background: rgba(15, 23, 42, 0.04);
                }

                .ge-item-btn::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 3px;
                    background: #0f172a;
                    transform: scaleX(0);
                    transform-origin: left;
                    transition: transform .3s ease;
                }

                .ge-item:hover>.ge-item-btn::after {
                    transform: scaleX(1);
                }

                .ge-chev {
                    transition: transform .3s ease;
                }

                .ge-item.is-open .ge-chev {
                    transform: rotate(180deg);
                }

                .ge-mega {
                    position: absolute;
                    top: 100%;
                    left: -20px;
                    width: min(900px, calc(100vw - 40px));
                    padding-top: .2rem;
                    opacity: 0;
                    visibility: hidden;
                    transform: translateY(15px) scale(.98);
                    transform-origin: top left;
                    transition: all .3s cubic-bezier(.2, .8, .2, 1);
                    pointer-events: none;
                }

                .ge-item.is-open .ge-mega {
                    opacity: 1;
                    visibility: visible;
                    transform: translateY(0) scale(1);
                    pointer-events: auto;
                }

                .ge-mega-inner {
                    background: rgba(255, 255, 255, 0.98);
                    backdrop-filter: blur(24px);
                    border-radius: 3px;
                    display: flex;
                    overflow: hidden;
                    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.03);
                    border: 1px solid rgba(226, 232, 240, 0.6);
                }

                .ge-mega-left {
                    width: 42%;
                    padding: 24px;
                    background: var(--mega-surface);
                    display: flex;
                    flex-direction: column;
                    gap: .35rem;
                }

                .ge-mega-right {
                    width: 58%;
                    padding: 24px;
                    background: var(--theme-bg);
                    border-left: 1px solid rgba(226, 232, 240, 0.5);
                    transition: background .3s ease;
                }

                .ge-mega-title {
                    font-size: .75rem;
                    font-weight: 800;
                    color: var(--theme-color);
                    text-transform: uppercase;
                    letter-spacing: .1em;
                    margin-bottom: 1rem;
                    transition: color .2s ease;
                }

                .ge-mega-right .ge-mega-title {
                    margin-bottom: 1.6rem;
                }

                .ge-mega-empty {
                    font-size: .85rem;
                    color: #64748b;
                    margin: 0;
                }

                .ge-mega-link {
                    display: flex;
                    gap: 1rem;
                    align-items: flex-start;
                    padding: .9rem;
                    border-radius: 3px;
                    border: 1px solid transparent;
                    background: transparent;
                    text-decoration: none;
                    transition: background .2s, border-color .2s;
                }

                .ge-mega-link.is-active {
                    background: var(--theme-item-bg);
                    border-color: var(--theme-item-border);
                }

                .ge-mega-icon {
                    width: 56px;
                    height: 56px;
                    flex-shrink: 0;
                    border-radius: 3px;
                    background: #fff;
                    border: 1px solid #f1f5f9;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
                }

                .ge-mega-icon img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }

                .ge-mega-anim {
                    display: inline-flex;
                    color: var(--theme-color);
                    transition: color .2s ease;
                }

                .ge-mega-copy {
                    flex: 1;
                    min-width: 0;
                }

                .ge-mega-copy h4 {
                    font-size: 1.02rem;
                    font-weight: 700;
                    color: #0f172a;
                    margin: 0 0 .3rem;
                    display: flex;
                    align-items: center;
                    gap: .5rem;
                    transition: color .2s;
                }

                .ge-mega-link.is-active h4 {
                    color: var(--theme-color);
                }

                .ge-mega-price {
                    font-size: .7rem;
                    font-weight: 800;
                    color: var(--theme-color);
                    background: var(--theme-item-bg);
                    border: 1px solid var(--theme-item-border);
                    padding: .1rem .45rem;
                    border-radius: 999px;
                }

                .ge-mega-copy p {
                    font-size: .82rem;
                    color: #475569;
                    line-height: 1.4;
                    margin: 0;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }

                .ge-mega-features {
                    column-count: 2;
                    column-gap: 1rem;
                    animation: geExploreIn .28s ease both;
                }

                /* Replays whenever the highlighted addon changes (the list is keyed
                   on the slug), so the column reads as a swap rather than a flicker. */
                @keyframes geExploreIn {
                    from {
                        opacity: 0;
                        transform: translateY(6px);
                    }

                    to {
                        opacity: 1;
                        transform: none;
                    }
                }

                @media (prefers-reduced-motion: reduce) {
                    .ge-mega-features {
                        animation: none;
                    }
                }

                .ge-mega-feature {
                    display: block;
                    margin-bottom: 1.6rem;
                    break-inside: avoid;
                    text-decoration: none;
                    position: relative;
                    padding-left: 1.2rem;
                }

                .ge-mega-feature::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 2px;
                    height: 16px;
                    width: 3px;
                    border-radius: 3px;
                    background: var(--theme-color);
                    opacity: .25;
                    transition: opacity .3s ease, background .3s ease;
                }

                .ge-mega-feature:hover::before {
                    opacity: 1;
                }

                .ge-mega-feature h4 {
                    font-size: 1.02rem;
                    font-weight: 700;
                    color: #0f172a;
                    margin: 0 0 .35rem;
                }

                .ge-mega-feature p {
                    font-size: .82rem;
                    color: #475569;
                    line-height: 1.5;
                    margin: 0;
                }

                .ge-nav-right {
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                }

                .ge-theme-btn {
                    background: transparent;
                    border: 0;
                    padding: .5rem;
                    color: #64748b;
                    cursor: pointer;
                    border-radius: 3px;
                    display: inline-flex;
                }

                .ge-theme-btn:hover {
                    color: #0f172a;
                    background: rgba(15, 23, 42, 0.04);
                }

                .ge-auth {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: 6px;
                    border-radius: 3px;
                    background: #0f172a;
                    color: #fff;
                    padding: 0 1.4rem;
                    height: 46px;
                    font-size: .95rem;
                    font-weight: 600;
                    border: none;
                    cursor: pointer;
                    text-decoration: none;
                    transition: background .2s;
                }

                .ge-auth:hover {
                    background: #1e293b;
                }

                .ge-auth button {
                    background: transparent;
                    border: 0;
                    color: inherit;
                    font: inherit;
                    cursor: pointer;
                    padding: 0;
                }

                .ge-auth-divider {
                    width: 1.5px;
                    height: 16px;
                    background: rgba(255, 255, 255, 0.4);
                    margin: 0 4px;
                }

                .ge-auth svg {
                    transition: transform .2s ease;
                    margin-left: 2px;
                }

                .ge-auth:hover svg {
                    transform: translateX(3px);
                }

                .ge-burger {
                    display: none;
                    background: transparent;
                    border: 0;
                    padding: .5rem;
                    color: #0f172a;
                    cursor: pointer;
                }

                .ge-mobile {
                    position: fixed;
                    inset: 0;
                    z-index: 90;
                    background: rgba(255, 255, 255, 0.95);
                    backdrop-filter: blur(20px);
                    -webkit-backdrop-filter: blur(20px);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 1.6rem;
                    opacity: 0;
                    pointer-events: none;
                    transform: translateY(-20px);
                    transition: all .3s ease;
                    padding: 5rem 1.5rem 2rem;
                    overflow-y: auto;
                }

                .ge-mobile.is-active {
                    opacity: 1;
                    pointer-events: auto;
                    transform: translateY(0);
                }

                .ge-mobile>a {
                    font-size: 1.5rem;
                    font-weight: 700;
                    color: #0f172a;
                    text-decoration: none;
                }

                .ge-mobile>a:hover {
                    color: #03D9F0;
                }

                .ge-mobile-addons {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: .6rem;
                }

                .ge-mobile-label {
                    font-size: .7rem;
                    font-weight: 800;
                    letter-spacing: .1em;
                    text-transform: uppercase;
                    color: #94a3b8;
                }

                .ge-mobile-addon {
                    font-size: 1.05rem;
                    font-weight: 600;
                    color: #334155;
                    text-decoration: none;
                }

                .ge-mobile-addon.is-plain {
                    color: #94a3b8;
                }

                .ge-mobile-cta {
                    font-size: 1.15rem;
                    font-weight: 700;
                    color: #03D9F0;
                    text-decoration: none;
                }

                .ge-mobile-auth {
                    display: flex;
                    gap: .75rem;
                }

                .ge-mobile-auth button {
                    padding: .7rem 1.6rem;
                    border-radius: 999px;
                    border: 1px solid #e2e8f0;
                    background: #fff;
                    font-weight: 600;
                    cursor: pointer;
                }

                .ge-mobile-auth button.is-primary {
                    background: #0f172a;
                    color: #fff;
                    border-color: #0f172a;
                }

                @media (max-width: 1100px) {

                    .ge-links,
                    .ge-auth {
                        display: none;
                    }

                    .ge-burger {
                        display: inline-flex;
                    }

                    .ge-logo-icon {
                        width: 52px;
                        height: 52px;
                    }

                    .ge-logo-text {
                        font-size: 26px;
                        letter-spacing: 3px;
                        min-width: 0;
                    }
                }

                @media (max-width: 420px) {
                    .ge-logo-icon {
                        width: 42px;
                        height: 42px;
                    }

                    .ge-logo-text {
                        font-size: 21px;
                        letter-spacing: 2px;
                    }

                    .ge-logo-version {
                        font-size: 9px;
                        letter-spacing: 1.6px;
                    }
                }

                /* Dark mode — the mockup is light-only, so every surface is restated. */
                html.dark .ge-nav {
                    background: transparent;
                    border-bottom-color: transparent;
                    --mega-surface: #0b0b0e;
                }

                html.dark .ge-nav.is-scrolled {
                    background: rgba(9, 9, 11, 0.95);
                    border-bottom-color: rgba(255, 255, 255, 0.07);
                    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
                }

                html.dark .ge-l-on {
                    color: #fafafa;
                }

                html.dark .ge-l-off {
                    color: #71717a;
                }

                html.dark .ge-logo-version {
                    color: #71717a;
                }

                html.dark .ge-item-btn {
                    color: #a1a1aa;
                }

                html.dark .ge-item:hover>.ge-item-btn {
                    color: #fafafa;
                    background: rgba(255, 255, 255, 0.05);
                }

                html.dark .ge-item-btn::after {
                    background: #03D9F0;
                }

                html.dark .ge-mega-inner {
                    background: rgba(11, 11, 14, 0.98);
                    border-color: rgba(255, 255, 255, 0.08);
                    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6);
                }

                html.dark .ge-mega-right {
                    border-left-color: rgba(255, 255, 255, 0.07);
                }

                html.dark .ge-mega-icon {
                    background: #18181b;
                    border-color: rgba(255, 255, 255, 0.08);
                }

                html.dark .ge-mega-copy h4,
                html.dark .ge-mega-feature h4 {
                    color: #fafafa;
                }

                html.dark .ge-mega-copy p,
                html.dark .ge-mega-feature p,
                html.dark .ge-mega-empty {
                    color: #a1a1aa;
                }

                html.dark .ge-theme-btn:hover {
                    color: #fafafa;
                    background: rgba(255, 255, 255, 0.06);
                }

                html.dark .ge-auth {
                    background: #03D9F0;
                    color: #04141a;
                }

                html.dark .ge-auth:hover {
                    background: #22e2f5;
                }

                html.dark .ge-auth-divider {
                    background: rgba(0, 0, 0, 0.35);
                }

                html.dark .ge-burger {
                    color: #fafafa;
                }

                html.dark .ge-mobile {
                    background: rgba(9, 9, 11, 0.97);
                }

                html.dark .ge-mobile>a {
                    color: #fafafa;
                }

                html.dark .ge-mobile-addon {
                    color: #d4d4d8;
                }

                html.dark .ge-mobile-auth button {
                    background: #18181b;
                    border-color: rgba(255, 255, 255, 0.1);
                    color: #fafafa;
                }

                html.dark .ge-mobile-auth button.is-primary {
                    background: #03D9F0;
                    color: #04141a;
                    border-color: #03D9F0;
                }