/*!
 * erp-mobile-nav-redesign-v14.css
 *
 * Phone chrome for the two mobile surfaces of the ERP shell:
 *
 *   1. the hamburger drawer (#navMenu.mobile-open) — branded Elinom mark
 *      sticky on the left, the module grid sticky on the right, and the
 *      Login / Create Account pair sticky under that bar. Nav rows are
 *      cards, Capital + Elinom Wallet band together under a Financial
 *      Services header, and the locale picker stays last in the list;
 *   2. the app launcher (#erpExplorePanel) behind the grid button — branded
 *      title, AI search, four tile sections covering every module, a promo card and an All Apps /
 *      Categories bar. The panel is a full-viewport overlay so navbar chrome
 *      cannot clip or overlap the title.
 *
 * Load order: after erp-mobile-shell-fix.css. Only ≤900px is styled, so the
 * desktop navbar and the tablet/desktop shell are untouched.
 *
 * Ordering note: #navMenu is a column flexbox on mobile, so the DOM stays as
 * authored (which keeps `#navMenu > li.wallet-li` and the `.nav-end-link`
 * trio addressable) while `order` alone produces the designed sequence.
 * #mobileUtilBlock and its action row use `display: contents` so the Login
 * button, Create Account button and the locale pill become siblings of the
 * nav rows and can be ordered independently. Login + Create Account pin
 * under the navbar; the locale pill scrolls with the list. The open drawer
 * is full-viewport width and starts below the sticky navbar.
 */

@media (max-width: 900px) {
  :root {
    --erp-mnav-surface: #0b1120;
    --erp-mnav-card: #131c31;
    --erp-mnav-card-2: #16203a;
    --erp-mnav-line: rgb(148 163 184 / 16%);
    --erp-mnav-text: #e8edf7;
    --erp-mnav-muted: #93a1bd;
    --erp-mnav-shadow: 0 1px 2px rgb(2 6 18 / 55%), 0 6px 16px rgb(2 6 18 / 38%);
    --erp-mnav-amber: #f59e0b;
  }

  /* ── Drawer shell ───────────────────────────────────────────────── */

  html body.erp-body #navbar #navMenu.mobile-open {
    /* Re-assert the panel geometry here. The 520–1024px tablet block in
       mobile-responsive.css targets `#navbar #navMenu` without `.mobile-open`
       and out-specifies the phone rules in erp-mobile-shell-fix.css, so
       between 769px and 900px an open drawer collapsed back into a static
       navbar row. */
    display: flex !important;
    position: fixed !important;
    /* Start under the sticky logo / grid bar so Login can pin at top: 0
       without sliding under the brand chrome. */
    top: var(--erp-shell-navbar-offset, var(--navbar-height, 56px)) !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 10070 !important;
    /* Row spacing is a per-row margin rather than a container gap: the
       Financial Services band needs three consecutive rows to abut exactly,
       and cancelling a container gap with a negative margin overlaps their
       boxes instead of closing the space between them. */
    gap: 0 !important;
    padding: 0
      max(12px, env(safe-area-inset-right, 0px))
      calc(20px + env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px)) !important;
    background: var(--erp-mnav-surface) !important;
    /* dvh keeps the last row reachable when the mobile toolbar retracts. */
    height: calc(100dvh - var(--erp-shell-navbar-offset, var(--navbar-height, 56px))) !important;
    max-height: calc(100dvh - var(--erp-shell-navbar-offset, var(--navbar-height, 56px))) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Sticky branded chrome (logo left, module grid right) ─────────
     The nav-container is a three-item flex row (logo, grid, hamburger).
     space-between parks the grid in the middle and overflow:hidden on the
     wordmark can collapse the logo, which is why the open drawer showed a
     lone centred grid. Pin the real navbar above the drawer and force
     logo-left / grid-right so both stay visible while the list scrolls. */

  html.erp-nav-drawer-open body.erp-body #navbar,
  html body.erp-body #navbar:has(#navMenu.mobile-open) {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100080 !important;
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: var(--erp-mnav-surface) !important;
  }

  html body.erp-body #navbar .container.nav-container,
  html.erp-nav-drawer-open body.erp-body #navbar .container.nav-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 56px !important;
  }

  html body.erp-body #navbar .container.nav-container > a.logo.enhanced-logo,
  html.erp-nav-drawer-open body.erp-body #navbar a.logo.enhanced-logo {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 auto 0 0 !important;
    padding: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    transform: none !important;
    translate: none !important;
    flex: 0 1 auto !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.erp-body #navbar .container.nav-container > a.logo.enhanced-logo > svg,
  html.erp-nav-drawer-open body.erp-body #navbar a.logo.enhanced-logo > svg {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
    display: block !important;
    border-radius: 9px !important;
  }

  html body.erp-body #navbar .container.nav-container > a.logo.enhanced-logo .erp-logo-gradient-text,
  html body.erp-body #navbar .container.nav-container > a.logo.enhanced-logo .notranslate,
  html.erp-nav-drawer-open body.erp-body #navbar a.logo.enhanced-logo .notranslate {
    display: inline-block !important;
    overflow: visible !important;
    max-width: none !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    background: linear-gradient(
      120deg,
      #38bdf8 0%,
      #6366f1 34%,
      #f472b6 67%,
      #f59e0b 100%
    ) !important;
    background-size: 100% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }

  html body.erp-body #navbar .container.nav-container > #erpAppSwitcher,
  html body.erp-body #navbar .container.nav-container > .erp-app-switcher,
  html.erp-nav-drawer-open body.erp-body #navbar #erpAppSwitcher {
    order: 30 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    pointer-events: auto !important;
    color: #e8edf7 !important;
    border: 1.5px solid transparent !important;
    background:
      linear-gradient(#0b1120, #0b1120) padding-box,
      linear-gradient(
        120deg,
        #38bdf8 0%,
        #6366f1 34%,
        #f472b6 67%,
        #f59e0b 100%
      ) border-box !important;
    box-shadow: 0 0 0 1px rgb(99 102 241 / 18%), 0 6px 14px rgb(2 6 18 / 35%) !important;
  }

  html body.erp-body #navbar .container.nav-container > #erpAppSwitcher svg,
  html.erp-nav-drawer-open body.erp-body #navbar #erpAppSwitcher svg {
    width: 18px !important;
    height: 18px !important;
    fill: url(#elinomEGrad) !important;
    color: #a5b4fc !important;
  }

  html body.erp-body #navbar .container.nav-container > #mobileMenuBtn,
  html.erp-nav-drawer-open body.erp-body #navbar #mobileMenuBtn {
    order: 31 !important;
    margin-left: 6px !important;
    margin-right: 0 !important;
  }

  /* Rows sit in DOM order; erp-mobile-nav-redesign.js physically reorders the
     list so that visual order and source order agree. Only the auth row and
     the locale pill are moved with `order`. */
  html body.erp-body #navbar #navMenu.mobile-open > li {
    order: 0;
    z-index: 0;
    list-style: none !important;
    width: 100% !important;
    margin: 0 0 10px !important;
  }

  /* ── Auth pair and locale pill become drawer-level flex items ───── */

  html body.erp-body #navbar #navMenu.mobile-open > li#mobileUtilBlock,
  html body.erp-body #navbar #navMenu.mobile-open > li.mobile-util-block {
    display: contents !important;
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* Pin Login + Create Account under the logo / grid bar. Bleed into the
     drawer side padding so scrolling rows cannot peek around the buttons.
     Locale stays a later flex sibling and is not sticky. */
  html body.erp-body #navbar #navMenu.mobile-open .mobile-util-actions {
    order: -1;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    isolation: isolate !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: auto !important;
    align-self: stretch !important;
    margin: 0
      calc(-1 * max(12px, env(safe-area-inset-right, 0px)))
      0
      calc(-1 * max(12px, env(safe-area-inset-left, 0px))) !important;
    padding: 12px
      max(12px, env(safe-area-inset-right, 0px))
      10px
      max(12px, env(safe-area-inset-left, 0px)) !important;
    background: var(--erp-mnav-surface) !important;
    box-shadow: 0 10px 16px var(--erp-mnav-surface) !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open .mobile-util-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    /* The side-by-side layout reserved 54px for the icon-only Account
       Security square; the buttons are stacked full-width now. */
    max-width: none !important;
    min-height: 52px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    box-shadow: var(--erp-mnav-shadow) !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open .mobile-util-action--primary {
    order: 1;
    width: 100% !important;
    border: 0 !important;
    color: #fff !important;
    background: linear-gradient(
      90deg,
      #f97316 0%,
      #ec4899 52%,
      #8b5cf6 100%
    ) !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open .mobile-util-action--signup {
    order: 2;
    color: var(--erp-mnav-text) !important;
    background: var(--erp-mnav-card) !important;
    border: 1px solid rgb(148 163 184 / 34%) !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open .mobile-util-action--icon {
    order: 3;
    align-self: flex-start !important;
    width: 52px !important;
    min-width: 52px !important;
    flex: 0 0 52px !important;
    padding: 0 !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open .mobile-util-lock {
    font-size: 0.9rem !important;
  }

  /* Locale pill is the last card in the list. Do not use margin-top: auto
     here: in a scrollable flex drawer that pins the pill to the viewport
     floor so later rows slide underneath it. */
  html body.erp-body #navbar #navMenu.mobile-open > li#mobileUtilBlock > .mobile-lang-select,
  html body.erp-body #navbar #navMenu.mobile-open .mobile-lang-select {
    order: 90;
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    width: 100% !important;
    margin-top: 0 !important;
    border-radius: 14px !important;
    background: var(--erp-mnav-card) !important;
    border: 1px solid var(--erp-mnav-line) !important;
    box-shadow: var(--erp-mnav-shadow) !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open .mobile-lang-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 16px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--erp-mnav-text) !important;
    font-size: 0.98rem !important;
    font-weight: 600 !important;
  }

  /* The visually-hidden word "Language" would push the locale off-centre. */
  html body.erp-body #navbar #navMenu.mobile-open .mobile-lang-trigger > .mobile-util-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open .mobile-lang-current {
    flex: 1 1 auto !important;
    text-align: left !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open .mobile-lang-caret {
    margin-left: auto !important;
    color: var(--erp-mnav-muted) !important;
  }

  /* ── Top-level nav rows as cards ────────────────────────────────── */

  html body.erp-body #navbar #navMenu.mobile-open > li > a.nav-link {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 14px !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    background: var(--erp-mnav-card) !important;
    border: 1px solid var(--erp-mnav-line) !important;
    box-shadow: var(--erp-mnav-shadow) !important;
    color: var(--erp-mnav-text) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-align: left !important;
    /* The marketing navbar paints its labels with a clipped gradient. In the
       drawer there is no gradient to clip, so the transparent fill left the
       Marketplace row showing only its two icons. */
    -webkit-text-fill-color: currentColor !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
  }

  /* Rows carry a real chevron element, so the navbar's "▾" pseudo-element is
     a second, differently-styled caret on the same row. */
  html body.erp-body #navbar #navMenu.mobile-open > li > a.nav-link::after {
    content: none !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open > li > a.nav-link .nav-row-icon {
    flex: 0 0 22px !important;
    width: 22px !important;
    font-size: 1.05rem !important;
    text-align: center !important;
  }

  /* Chevron affordance, injected by erp-mobile-nav-redesign.js. */
  html body.erp-body #navbar #navMenu.mobile-open .nav-row-caret {
    margin-left: auto !important;
    font-size: 0.82rem !important;
    color: var(--erp-mnav-muted) !important;
    transition: transform 0.18s ease !important;
  }

  html body.erp-body
    #navMenu.mobile-open
    > li.nav-dropdown.nav-dropdown-open
    > a.nav-link
    .nav-row-caret {
    transform: rotate(180deg) !important;
  }

  /* The trio reads as rows like the rest of the list, not as a centred
     footer block: the redesign puts every row on one icon rail. */
  /* #navbar is in the selector to out-specify the two-id rule in
     erp-mobile-shell-fix.css that centres this trio. */
  html body.erp-body #navbar #navMenu.mobile-open > li.nav-end-link > a.nav-link {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* ── Financial Services band ────────────────────────────────────── */

  /* Capital and Elinom Wallet stay direct children of #navMenu — the shell's
     dropdown wiring and the drawer tests both address them that way — so the
     band is drawn with borders across three consecutive rows rather than by
     nesting them inside a wrapper element. */
  html body.erp-body #navbar #navMenu.mobile-open > li.nav-fin-head > a.nav-link {
    border-radius: 14px !important;
    border-color: rgb(245 158 11 / 45%) !important;
    background: linear-gradient(
      180deg,
      rgb(245 158 11 / 12%) 0%,
      rgb(245 158 11 / 6%) 100%
    ) !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open.fin-open > li.nav-fin-head > a.nav-link {
    border-radius: 14px 14px 0 0 !important;
    border-bottom-color: transparent !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open.fin-open > li.nav-fin-head > a.nav-link .nav-row-caret {
    transform: rotate(180deg) !important;
  }

  /* Children are hidden unless the band is expanded. */
  html body.erp-body #navbar #navMenu.mobile-open > li.nav-fin-child {
    display: none !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open.fin-open > li.nav-fin-child {
    display: block !important;
  }

  /* Header and Capital lose their bottom margin so the band's three rows
     read as one card. */
  html body.erp-body #navbar #navMenu.mobile-open.fin-open > li.nav-fin-head,
  html body.erp-body #navbar #navMenu.mobile-open.fin-open > li.capital-li {
    margin-bottom: 0 !important;
  }

  html body.erp-body #navbar #navMenu.mobile-open.fin-open > li.nav-fin-child > a.nav-link {
    border-radius: 0 !important;
    border-top: 0 !important;
    border-color: rgb(245 158 11 / 45%) !important;
    background: rgb(245 158 11 / 5%) !important;
    min-height: 62px !important;
    align-items: center !important;
  }

  html body.erp-body
    #navMenu.mobile-open.fin-open
    > li.nav-fin-child:last-of-type
    > a.nav-link,
  html body.erp-body #navbar #navMenu.mobile-open.fin-open > li.wallet-li > a.nav-link {
    border-radius: 0 0 14px 14px !important;
  }

  /* Separator hairline between Capital and Elinom Wallet. */
  html body.erp-body #navbar #navMenu.mobile-open.fin-open > li.wallet-li > a.nav-link {
    border-top: 1px solid rgb(245 158 11 / 22%) !important;
  }

  /* Full-width basis drops the description onto its own line under the
     title, aligned to the label rail rather than the icon rail. */
  html body.erp-body #navbar #navMenu.mobile-open .nav-fin-sub {
    flex: 1 0 100% !important;
    margin-top: 2px !important;
    padding-left: 36px !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: var(--erp-mnav-muted) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  /* Expanded Capital / Wallet submenus indent inside the band. */
  html body.erp-body
    #navMenu.mobile-open.fin-open
    > li.nav-fin-child.nav-dropdown-open
    > .dropdown-menu {
    padding: 4px 0 8px 12px !important;
    margin: 0 !important;
    border-left: 2px solid rgb(245 158 11 / 30%) !important;
  }

  /* ── App launcher (Explore Elinom) ──────────────────────────────── */

  /* Full-viewport overlay. Sitting the panel under the sticky navbar left
     the grid button clipped at the top of the screen and overlapping the
     title; the launcher now owns its own chrome and close control. */
  #erpExplorePanel {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    /* Above #loginBtn's 100002 overlay so the util-bar Login cannot float
       over the tiles. */
    z-index: 100010;
    display: flex;
    flex-direction: column;
    background: #0b1120;
    background: var(--erp-mnav-surface, #0b1120);
    color: #e8edf7;
    color: var(--erp-mnav-text, #e8edf7);
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Navbar chrome (grid button / hamburger) must not peek through or clip
     over the title. The launcher has its own close control. */
  html.erp-explore-open body.erp-body #navbar,
  html.erp-explore-open body.erp-body #util-bar,
  html.erp-explore-open body.erp-body #loginBtn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  #erpExplorePanel[hidden] {
    display: none !important;
  }

  .erp-explore__chrome {
    flex: 0 0 auto;
    padding: 10px 16px 8px;
  }

  .erp-explore__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
  }

  .erp-explore__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #fff;
  }

  .erp-explore__brand {
    background: linear-gradient(
      120deg,
      #38bdf8 0%,
      #6366f1 34%,
      #f472b6 67%,
      #f59e0b 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 900;
  }

  .erp-explore__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--erp-mnav-line);
    border-radius: 999px;
    background: var(--erp-mnav-card);
    color: #fff;
    font-size: 1rem;
  }

  .erp-explore__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 8px 0 12px;
    margin: 8px 0 0;
    border-radius: 16px;
    background:
      linear-gradient(var(--erp-mnav-card), var(--erp-mnav-card)) padding-box,
      linear-gradient(
        120deg,
        #38bdf8 0%,
        #6366f1 40%,
        #f472b6 75%,
        #f59e0b 100%
      ) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 0 0 1px rgb(99 102 241 / 12%), 0 8px 20px rgb(2 6 18 / 28%);
  }

  .erp-explore__search-ai {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #f472b6 100%);
    font-size: 0.78rem;
  }

  .erp-explore__search-ai i {
    color: #fff;
  }

  .erp-explore__search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--erp-mnav-text);
    /* 16px keeps iOS Safari from zooming the viewport on focus. */
    font-size: 16px;
  }

  .erp-explore__search input::placeholder {
    color: var(--erp-mnav-muted);
  }

  .erp-explore__search-badge {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #c4b5fd;
    background: rgb(99 102 241 / 22%);
    border: 1px solid rgb(167 139 250 / 28%);
  }

  .erp-explore__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 4px 16px 16px;
  }

  /* Site-wide `section` rules add 32px of block padding and out-specify a
     lone class selector; the launcher sets its own rhythm. */
  #erpExplorePanel .erp-explore__section {
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  .erp-explore__section[hidden] {
    display: none;
  }

  .erp-explore__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
  }

  .erp-explore__head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
  }

  .erp-explore__viewall {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.86rem;
    font-weight: 600;
    color: #6ea8fe;
    text-decoration: none;
  }

  .erp-explore__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  /* All Apps overview keeps two rows per section. View all / search
     drop .erp-explore--preview so the remaining tiles can paint. */
  #erpExplorePanel.erp-explore--preview .erp-explore__tile:nth-child(n + 9) {
    display: none !important;
  }

  .erp-explore__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 4px 8px;
    border-radius: 14px;
    background: var(--erp-mnav-card);
    border: 1px solid var(--erp-mnav-line);
    color: var(--erp-mnav-text);
    text-decoration: none;
    text-align: center;
    min-height: 80px;
  }

  .erp-explore__tile[hidden] {
    display: none;
  }

  .erp-explore__tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 1.05rem;
  }

  .erp-explore__tile-icon img {
    width: 22px;
    height: 22px;
    border-radius: 6px;
  }

  .erp-explore__ext {
    font-size: 0.55rem;
    opacity: 0.55;
  }

  html.erp-landing-carousels-on .zuto-ecosystem-band {
    display: none !important;
  }

  .erp-explore__tile-label {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--erp-mnav-text);
  }

  /* Tile tones */
  .erp-explore__tile-icon[data-tone="blue"] {
    color: #60a5fa;
    background: rgb(59 130 246 / 16%);
  }
  .erp-explore__tile-icon[data-tone="green"] {
    color: #4ade80;
    background: rgb(34 197 94 / 16%);
  }
  .erp-explore__tile-icon[data-tone="violet"] {
    color: #a78bfa;
    background: rgb(139 92 246 / 18%);
  }
  .erp-explore__tile-icon[data-tone="rose"] {
    color: #fb7185;
    background: rgb(244 63 94 / 16%);
  }
  .erp-explore__tile-icon[data-tone="emerald"] {
    color: #34d399;
    background: rgb(16 185 129 / 16%);
  }
  .erp-explore__tile-icon[data-tone="pink"] {
    color: #f472b6;
    background: rgb(236 72 153 / 16%);
  }
  .erp-explore__tile-icon[data-tone="amber"] {
    color: #fbbf24;
    background: rgb(245 158 11 / 16%);
  }
  .erp-explore__tile-icon[data-tone="orange"] {
    color: #fb923c;
    background: rgb(249 115 22 / 16%);
  }

  .erp-explore__empty {
    padding: 18px 4px;
    color: var(--erp-mnav-muted);
    font-size: 0.9rem;
  }

  .erp-explore__empty[hidden] {
    display: none;
  }

  .erp-explore__cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
    background: var(--erp-mnav-card-2);
    border: 1px solid var(--erp-mnav-line);
    text-decoration: none;
  }

  .erp-explore__cta[hidden] {
    display: none;
  }

  .erp-explore__cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    font-size: 1.35rem;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 55%, #f97316 100%);
  }

  .erp-explore__cta-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  .erp-explore__cta-text {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--erp-mnav-text);
  }

  .erp-explore__cta-link {
    font-size: 0.88rem;
    font-weight: 700;
    color: #a78bfa;
  }

  .erp-explore__tabs {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    border-top: 1px solid var(--erp-mnav-line);
    background: var(--erp-mnav-surface);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .erp-explore__tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    border: 0;
    background: transparent;
    color: var(--erp-mnav-muted);
    font-size: 0.92rem;
    font-weight: 600;
  }

  .erp-explore__tab + .erp-explore__tab {
    border-left: 1px solid var(--erp-mnav-line);
  }

  .erp-explore__tab.is-active {
    color: #fff;
  }

  .erp-explore__categories[hidden] {
    display: none;
  }

  .erp-explore__cat {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 62px;
    padding: 0 16px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: var(--erp-mnav-card);
    border: 1px solid var(--erp-mnav-line);
    color: var(--erp-mnav-text);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
  }

  .erp-explore__cat-count {
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--erp-mnav-muted);
  }

  /* Active state on the grid button while the launcher is open. */
  html.erp-explore-open body.erp-body #erpAppSwitcher {
    border-color: #8b5cf6 !important;
    color: #c4b5fd !important;
  }

  /* ── Landing category carousels ───────────────────────────────────
     Phone landing cards leave the 1-col stack and sit in four snap
     tracks (Business / Operations / Industry Solutions / Elinom
     Ecosystem). The emptied source grids are hidden so the page does
     not keep a second vertical copy of the same modules. */

  #erpLandingCarousels {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 1.15rem;
  }

  #erpLandingCarousels .erp-modcat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
  }

  #erpLandingCarousels .erp-modcat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 4px;
  }

  #erpLandingCarousels .erp-modcat__title {
    margin: 0;
    color: #e8edf7;
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  #erpLandingCarousels .erp-modcat__count {
    flex: 0 0 auto;
    min-width: 1.6rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 10%);
    color: #c7d4ea;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    text-align: center;
  }

  html[data-active-module="landing"] body.erp-body #landing #erpLandingCarousels .erp-modcat__track,
  #erpLandingCarousels .erp-modcat__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 2px 4px 10px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: none !important;
    scrollbar-width: none;
  }

  #erpLandingCarousels .erp-modcat__track::-webkit-scrollbar {
    display: none;
  }

  #erpLandingCarousels .erp-modcat::after {
    content: "";
    position: absolute;
    top: 1.7rem;
    right: 0;
    width: 1.35rem;
    height: calc(100% - 2.4rem);
    pointer-events: none;
    background: linear-gradient(90deg, rgb(11 18 32 / 0%), rgb(11 18 32 / 78%));
  }

  html[data-active-module="landing"] body.erp-body #landing #erpLandingCarousels .erp-fcard,
  html[data-active-module="landing"] body.erp-body #landing #erpLandingCarousels .unit-card,
  #erpLandingCarousels .erp-fcard,
  #erpLandingCarousels .unit-card {
    flex: 0 0 43% !important;
    width: 43% !important;
    max-width: 168px !important;
    min-width: 142px !important;
    scroll-snap-align: start;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 12px 10px !important;
    gap: 7px !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 22px rgb(6 12 28 / 22%);
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
  }

  #erpLandingCarousels .erp-fcard-icon,
  #erpLandingCarousels .unit-icon-wrapper {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.95rem !important;
    border-radius: 10px !important;
  }

  #erpLandingCarousels .erp-fcard-badge,
  #erpLandingCarousels .unit-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.62rem !important;
  }

  #erpLandingCarousels .erp-fcard-title,
  #erpLandingCarousels .unit-card h3 {
    margin: 0;
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #erpLandingCarousels .erp-fcard-desc,
  #erpLandingCarousels .unit-card p {
    margin: 0;
    font-size: 0.7rem !important;
    line-height: 1.35 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #erpLandingCarousels .fcard-mini-dash,
  #erpLandingCarousels .erp-fcard .ana-bars,
  #erpLandingCarousels .erp-fcard .ana-spark,
  #erpLandingCarousels .erp-fcard .acq-funnel,
  #erpLandingCarousels .erp-fcard .wb-preview,
  #erpLandingCarousels .erp-fcard .jobs-chip {
    display: none !important;
  }

  #erpLandingCarousels .erp-fcard-footer,
  #erpLandingCarousels .unit-footer {
    margin-top: auto;
    padding-top: 6px !important;
    font-size: 0.64rem !important;
    gap: 0.35rem;
  }

  #erpLandingCarousels .erp-modcat__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-height: 10px;
  }

  #erpLandingCarousels .erp-modcat__dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgb(255 255 255 / 22%);
  }

  #erpLandingCarousels .erp-modcat__dot.is-active {
    width: 14px;
    background: #7dd3fc;
  }

  /* ── Landing actions band (Get Support / View Docs / Contact Sales) ─
     The pills wrap on a phone. Centre the group in the light box so the
     third button does not sit under the first with empty space on the
     right. */

  html[data-active-module="landing"] body.erp-body .erp-actions-band {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }

  html[data-active-module="landing"] body.erp-body .erp-actions-band .erp-actions-band-item {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center !important;
  }

  html.erp-landing-carousels-on[data-active-module="landing"] body.erp-body #landing.module-section #modules-grid,
  html.erp-landing-carousels-on[data-active-module="landing"] body.erp-body #landing.module-section .unit-gateway-grid,
  html.erp-landing-carousels-on[data-active-module="landing"] body.erp-body #landing.module-section .erp-module-card-grid,
  html.erp-landing-carousels-on[data-active-module="landing"] body.erp-body #landing #modules-grid,
  html.erp-landing-carousels-on[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid,
  html.erp-landing-carousels-on[data-active-module="landing"] body.erp-body #landing .erp-module-card-grid {
    display: none !important;
  }
}

/* The launcher is phone-only; a resize past the breakpoint must not leave a
   full-screen panel pinned over the desktop shell. The drawer-only chrome is
   present in the markup at every width — the drawer is enhanced once, not on
   each breakpoint crossing — so it is hidden here rather than removed. */
@media (min-width: 901px) {
  #erpLandingCarousels {
    display: none !important;
  }

  #erpExplorePanel {
    display: none !important;
  }

  #navMenu > li.nav-fin-head,
  #navMenu .nav-row-caret,
  #navMenu .nav-fin-sub {
    display: none !important;
  }
}