.ecosystem-nav {
    --ecosystem-nav-accent: var(--pa-blue);
    --ecosystem-nav-accent-strong: var(--pa-teal-bright);
    --ecosystem-nav-ink: #18212f;
    --ecosystem-nav-muted: #5d6878;
    --ecosystem-nav-line: #dce2ea;
    --ecosystem-nav-surface: #ffffff;
    --ecosystem-nav-soft: #f4f7fb;
}

/* Navigation uses color, surface, and current-item indicators for state.
   Keep prose/link underlines out of every shared and semantic navigation
   surface while retaining the focus-visible outline below. */
body.pa-body :is(.ecosystem-nav, .pa-footer, nav, [role="navigation"]) a,
body.pa-body :is(.ecosystem-nav, .pa-footer, nav, [role="navigation"]) a:hover,
body.pa-body :is(.ecosystem-nav, .pa-footer, nav, [role="navigation"]) a:focus-visible,
body.pa-body :is(.ecosystem-nav, .pa-footer, nav, [role="navigation"]) a[aria-current="page"] {
    text-decoration: none !important;
}

body.pa-body .pa-footer .pa-cookie-settings > summary,
body.pa-body .pa-footer .pa-cookie-settings > summary:hover,
body.pa-body .pa-footer .pa-cookie-settings > summary:focus-visible {
    text-decoration: none !important;
}

.ecosystem-nav .pa-site-nav {
    background: color-mix(in srgb, var(--ecosystem-nav-surface) 96%, transparent);
    border-bottom: 1px solid var(--ecosystem-nav-line);
}

.ecosystem-nav__shell > .container-xxl { min-height: 4.25rem; }
.ecosystem-nav__brand { flex: 0 0 auto; margin-right: clamp(0.75rem, 1.5vw, 1.5rem); }
.ecosystem-nav__collapse { min-width: 0; }
.ecosystem-nav__desktop { align-items: center; flex: 1 1 auto; min-width: 0; }
.ecosystem-nav__goals { align-items: center; flex: 0 1 auto; gap: 0.12rem; min-width: 0; }
.ecosystem-nav__goal { position: relative; }

.ecosystem-nav__goal-link,
.ecosystem-nav__toggle,
.ecosystem-nav__work,
.ecosystem-nav__account-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--ecosystem-nav-ink);
    display: inline-flex;
    font-size: clamp(0.72rem, 0.75vw, 0.86rem);
    font-weight: 700;
    justify-content: center;
    line-height: 1.2;
    min-height: 2.75rem;
    padding: 0.65rem clamp(0.42rem, 0.65vw, 0.7rem) !important;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}

.ecosystem-nav__goal-link:hover,
.ecosystem-nav__toggle:hover,
.ecosystem-nav__work:hover,
.ecosystem-nav__account-toggle:hover { background: var(--ecosystem-nav-soft); color: var(--ecosystem-nav-ink); }

.ecosystem-nav__goal-link:not(.ecosystem-nav__goal--studio)::after,
.ecosystem-nav__toggle::before,
.ecosystem-nav__work::after,
.ecosystem-nav__account-toggle::before {
    background: transparent;
    border-radius: 999px;
    bottom: 0.2rem;
    content: "";
    height: 2px;
    left: 0.6rem;
    position: absolute;
    right: 0.6rem;
}

.ecosystem-nav__goal-link:not(.ecosystem-nav__goal--studio).is-active::after,
.ecosystem-nav__toggle.is-active::before,
.ecosystem-nav__work.is-active::after,
.ecosystem-nav__account-toggle.is-active::before { background: var(--ecosystem-nav-accent); }

.ecosystem-nav__goal--studio {
    margin-right: 0.28rem;
    padding-inline: clamp(0.7rem, 0.9vw, 0.95rem) !important;
}

.ecosystem-nav__goal-pill {
    align-items: center;
    border: 1px solid var(--ecosystem-nav-line);
    border-radius: 999px;
    color: var(--ecosystem-nav-muted);
    display: inline-flex;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1;
    margin-left: 0.35rem;
    padding: 0.2rem 0.45rem;
    position: relative;
    text-transform: uppercase;
    white-space: nowrap;
}

.ecosystem-nav__goal--studio:hover,
.ecosystem-nav__goal--studio:focus-visible,
.ecosystem-nav__goal--studio.is-active { color: inherit; }
.ecosystem-nav__goal--studio.is-active .ecosystem-nav__goal-pill {
    border-color: var(--ecosystem-nav-accent-strong);
    color: var(--ecosystem-nav-accent-strong);
}

.ecosystem-nav__menu {
    background: var(--ecosystem-nav-surface);
    border: 1px solid var(--ecosystem-nav-line);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(23, 32, 45, 0.16);
    max-height: min(36rem, calc(100dvh - 5.5rem));
    min-width: min(22rem, calc(100vw - 2rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.45rem;
    scrollbar-gutter: stable;
}

/* A quiet print-layer signature inside navigation menus, not a new panel.
   Keep it in normal flow so Bootstrap owns desktop placement and the mobile
   menu can remain static. The decoration never captures pointer input. */
.ecosystem-nav .ecosystem-nav__menu::before {
    background-image:
        linear-gradient(90deg, transparent, var(--ecosystem-nav-accent)),
        linear-gradient(90deg, transparent, var(--ecosystem-nav-accent)),
        linear-gradient(90deg, transparent, var(--ecosystem-nav-accent));
    background-position: right top, right center, right bottom;
    background-repeat: no-repeat;
    background-size: 52px 1px, 36px 1px, 20px 1px;
    content: "";
    display: block;
    height: 7px;
    margin: 0.2rem 0.75rem 0.35rem;
    opacity: 0.3;
    pointer-events: none;
}

.ecosystem-nav .ecosystem-nav__menu .dropdown-divider {
    border-color: color-mix(in srgb, var(--ecosystem-nav-accent) 12%, var(--ecosystem-nav-line));
}

@media (forced-colors: active) {
    .ecosystem-nav .ecosystem-nav__menu::before { display: none; }
}

.ecosystem-nav__menu--end { left: auto; right: 0; }
.ecosystem-nav__item {
    border-radius: 8px;
    color: var(--ecosystem-nav-ink);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 3.5rem;
    padding: 0.68rem 0.75rem;
    white-space: normal;
}

.ecosystem-nav__item:hover,
.ecosystem-nav__item:focus,
.ecosystem-nav__item.active { background: var(--ecosystem-nav-soft); color: var(--ecosystem-nav-ink); }
.ecosystem-nav__item.active { box-shadow: inset 3px 0 0 var(--ecosystem-nav-accent); }
.ecosystem-nav__item-title { font-size: 0.88rem; font-weight: 800; line-height: 1.25; }
.ecosystem-nav__item-description { color: var(--ecosystem-nav-muted); font-size: 0.77rem; line-height: 1.42; }
.ecosystem-nav__item--compact { display: block; font-size: 0.82rem; font-weight: 650; min-height: 2.65rem; padding-block: 0.72rem; }

.ecosystem-nav__utilities {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 0.12rem;
    margin-left: auto;
    padding-left: clamp(0.35rem, 0.7vw, 0.8rem);
}

.ecosystem-nav__context {
    border-left: 2px solid var(--ecosystem-nav-accent);
    color: var(--ecosystem-nav-ink);
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    margin-right: 0.25rem;
    max-width: clamp(7.5rem, 11vw, 10rem);
    min-width: 0;
    padding: 0.25rem 0.45rem 0.25rem 0.55rem;
    text-decoration: none;
}

.ecosystem-nav__context:hover .ecosystem-nav__context-name { color: var(--ecosystem-nav-accent-strong); }
.ecosystem-nav__context-label { color: var(--ecosystem-nav-muted); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ecosystem-nav__context-name { color: var(--ecosystem-nav-ink); font-size: 0.74rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecosystem-nav__account { position: relative; }
.ecosystem-nav__logout { margin: 0; }
.ecosystem-nav__signed-out--desktop {
    align-items: center;
    border-top: 0;
    flex: 0 0 auto;
    margin: 0 0 0 clamp(0.75rem, 1vw, 1rem);
    padding: 0;
}
.ecosystem-nav__signed-out--desktop .pa-header-link {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
    padding-inline: 0.5rem !important;
}
.ecosystem-nav__signed-out .pa-login-actions a { color: var(--ecosystem-nav-ink); }
.ecosystem-nav__signed-out .pa-login-actions a:hover,
.ecosystem-nav__signed-out .pa-login-actions a:focus-visible { color: var(--ecosystem-nav-accent-strong); }
html[data-pa-theme="dark"] .ecosystem-nav__signed-out .pa-login-actions .pa-header-link {
    color: var(--ecosystem-nav-ink) !important;
}
html[data-pa-theme="dark"] .ecosystem-nav__signed-out .pa-login-actions .pa-header-link:hover,
html[data-pa-theme="dark"] .ecosystem-nav__signed-out .pa-login-actions .pa-header-link:focus-visible {
    color: var(--ecosystem-nav-accent-strong) !important;
}
.ecosystem-nav__mobile { padding: 0.9rem 0 1.1rem; width: 100%; }
.ecosystem-nav__context--mobile { margin: 0 0 0.75rem; max-width: none; min-height: 2.75rem; padding-block: 0.42rem; }
.ecosystem-nav__mobile-actions { display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ecosystem-nav__mobile-action,
.ecosystem-nav__mobile-more-toggle,
.ecosystem-nav__mobile-utility {
    align-items: center;
    background: var(--ecosystem-nav-soft);
    border: 1px solid var(--ecosystem-nav-line);
    border-radius: 8px;
    color: var(--ecosystem-nav-ink);
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 750;
    justify-content: center;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

.ecosystem-nav__mobile-action:hover,
.ecosystem-nav__mobile-more-toggle:hover,
.ecosystem-nav__mobile-utility:hover,
.ecosystem-nav__mobile-action.is-active,
.ecosystem-nav__mobile-more-toggle.is-active,
.ecosystem-nav__mobile-utility.is-active { background: #e8f1ff; border-color: #9abcf0; color: var(--ecosystem-nav-accent-strong); }

.ecosystem-nav__mobile-more { margin-top: 0.5rem; position: relative; }
.ecosystem-nav__mobile-more-toggle::after { border-bottom: 0; border-left: 0.3em solid transparent; border-right: 0.3em solid transparent; border-top: 0.3em solid; content: ""; margin-left: 0.45rem; }
.ecosystem-nav__menu--mobile { width: 100%; }
.ecosystem-nav__mobile-more > .ecosystem-nav__menu--mobile.show {
    position: static !important;
    inset: auto !important;
    width: 100%;
    max-height: none;
    margin-top: 0.5rem !important;
    overflow: visible;
    transform: none !important;
}
.ecosystem-nav__menu-heading { color: var(--ecosystem-nav-muted); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.06em; margin: 0; padding: 0.72rem 0.75rem 0.3rem; text-transform: uppercase; }
.ecosystem-nav__mobile-account { border-top: 1px solid var(--ecosystem-nav-line); display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.85rem; padding-top: 0.85rem; }
.ecosystem-nav__mobile > .ecosystem-nav__signed-out {
    align-items: stretch;
    border-top: 1px solid var(--ecosystem-nav-line);
    display: grid;
    gap: 0.5rem;
    margin: 0.85rem 0 0;
    padding: 0.85rem 0 0;
    width: 100%;
}

.ecosystem-nav__mobile > .ecosystem-nav__signed-out .pa-nav-cta { order: 2; }
.ecosystem-nav__mobile > .ecosystem-nav__signed-out .pa-login-actions {
    display: grid;
    gap: 0.5rem;
    order: 1;
}

.ecosystem-nav__mobile > .ecosystem-nav__signed-out :is(.pa-header-link, .pa-nav-cta) {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 44px;
    text-align: center;
    width: 100%;
}

.ecosystem-nav a:focus-visible,
.ecosystem-nav button:focus-visible { outline: 3px solid #78aaf0; outline-offset: 2px; }

/* The global dark theme keeps the footer logo light, but the ecosystem nav
   remains a light surface and must preserve the approved navy/teal artwork. */
html[data-pa-theme="dark"] .ecosystem-nav .pa-brand-logo { filter: none !important; }

@media (max-width: 389.98px) {
    .ecosystem-nav__mobile-actions,
    .ecosystem-nav__mobile-account { grid-template-columns: 1fr; }
}

@media (max-width: 1199.98px) {
    #primaryNav.ecosystem-nav__collapse.collapse:not(.show):not(.collapsing) {
        display: none !important;
    }

    #primaryNav.ecosystem-nav__collapse.collapse.show,
    #primaryNav.ecosystem-nav__collapse.collapsing {
        display: block;
    }

    .ecosystem-nav__collapse {
        max-height: calc(100dvh - 6.75rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .ecosystem-nav__menu {
        max-height: min(28rem, calc(100dvh - 8rem));
    }

    .ecosystem-nav__menu--mobile {
        max-height: none;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .ecosystem-nav__context { display: none; }
    .ecosystem-nav__goal-link,
    .ecosystem-nav__toggle,
    .ecosystem-nav__work,
    .ecosystem-nav__account-toggle { font-size: 0.72rem; padding-inline: 0.42rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ecosystem-nav *,
    .ecosystem-nav *::before,
    .ecosystem-nav *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}