/* content offset on desktop: the 63px bar + the same 55px of air the old two-row header left */
:root {
  --nnav-desktop-height: 118px;
  --nnav-desktop-height-new: 156px;
}

body {
  margin-top: -1px;
  padding-top: 1px;
}

@media (min-width: 1100px) {
  body:has(.nnavbar-lbox-open) {
    --nnav-desktop-height: 198px;
  }
}

@media (max-width: 1099px) {
  :root {
    --nnav-desktop-height: 80px;
  }
}

.nnavbar-color-white {
  --nnav-bg-color: #FFF;
  --nnav-bg-color-0: rgba(255, 255, 255, 0);
  --nnav-link-color: #000;
  --nnav-link-2-color: #888;
  /* strzalka "scroll" glownej listy — na bialym panelu b2b mocniejszy
     zielony CTA (jasny #59EA6D ginie na bieli) */
  --nnav-scroll-arrow-color: #22E243;
}
.nnavbar-color-black {
  --nnav-bg-color: #121212;
  --nnav-bg-color-0: rgba(18, 18, 18, 0);
  --nnav-link-color: #FFF;
  --nnav-link-2-color: #888;
  --nnav-scroll-arrow-color: #59EA6D;
}

.page-template-page-multi-currency-account .page-template-multi-currency {
  padding-top: 0 !important;
}

.page-template-zen-cards-landing #page .site-content,
#page .site-content,
.site-content {
  margin-top: var(--nnav-desktop-height) !important;
}

.page-template-cashbackv4-landing #page .site-content,
.b2b_pages-template #page .site-content {
  margin-top: calc(var(--nnav-desktop-height) - 40px) !important;
}

.page-template-cashbackv4-landing #page .cashbackv4 {
  margin-top: 0 !important;
}

.online-currency {
  padding-top: 0 !important;
}

.nnavbar-menu-item-bold .nnavbar-menu-item-label {
  font-weight: 700 !important;
}

/* Elementy przypisane do segmentu (Log In / Register = Business, Help center
   w top menu = Personal) widoczne tylko przy segmencie aktywnym w
   przelaczniku Personal/Business (data-nnavbar-segment na headerze:
   serwer ustawia typ strony, JS przelacza przy zmianie taba) */
.nnavbar[data-nnavbar-segment="b2c"] [data-nnavbar-only="b2b"],
.nnavbar[data-nnavbar-segment="b2b"] [data-nnavbar-only="b2c"] {
  display: none !important;
}

/* desktop-only label of the www 2.0 bar (nnavbar-v2-right) */
.nnavbar-menu-item-label-d {
  display: none;
}

/* desktop-only CTA of the Company dropdown */
.nnavbar-company-cta {
  display: none;
}

@media (max-width: 1099px) {
  .page-template-cashbackv4-landing #page .site-content,
  .b2b_pages-template #page .site-content {
    margin-top: var(--nnav-desktop-height) !important;
  }

  .page-template-page-multi-currency-account .site-content .page-template-multi-currency,
  .page-template-page-pko-multicurrency .site-content .page-template-multi-currency {
    padding-top: 0 !important;
  }
}

.page-template-cashbackv4-landing,
.page-template-zen-cards-landing,
.page-template-page-reward-zone,
.page-template-crypto-lp-care,
.page-template-page-multi-currency-account,
.page-template-apple-pay,
.page-template-debit-card-multicurrency,
.page-template-online-currency,
.page-template-new-money-transfers,
.page-template-cash-withdraw {
  .zen-breadcrumbs ol li:last-child a,
  .zen-breadcrumbs ol li:last-child span {
    color: #22E243 !important;
  }
}

.nnavbar {
  max-width: none;
  position: fixed;
  top: var(--navbar-alert-height, 0px);
  z-index: 9999999;
  left: 0;
  right: 0;
  zoom: normal;
}
.nnavbar-lbox-container {
  background: #22E243;
  position: relative;
  width: 100%;
  z-index: 99;
  padding: 0 40px;
  height: 0;
  overflow: hidden;
  transition: .4s height ease-in-out;
}
.nnavbar-lbox-open .nnavbar-lbox-container {
  height: 80px;
  overflow: visible;
  transition: .4s height ease-in-out;
}
.nnavbar-lbox-box {
  width: 1456px;
  margin: 0 auto;
  max-width: 100%;
  display: flex;
  align-items: center;
  height: 80px;
  opacity: 0;
  transition: .4s opacity ease-in-out;
}
.nnavbar-lbox-open .nnavbar-lbox-box {
  opacity: 1;
  transition: .4s opacity ease-in-out .2s;
}
.nnavbar-lbox-info {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  color: #000;
  padding-right: 40px;
  margin-right: auto;
}
.nnavbar-lbox-select-block {
  margin-right: 20px;
  position: relative;
  z-index: 1;
}
.nnavbar-lbox-select-block:has(.nnavbar-lbox-select-open) {
  z-index: 2;
}
.nnavbar-lbox-select-box {
  width: 280px;
  position: relative;
}
.nnavbar-lbox-select-box:before {
  content: '';
  width: 100%;
  height: 24px;
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  background: #22E243;
}
.nnavbar-lbox-select {
  display: flex;
  height: 48px;
  color: #000;
  align-items: center;
  justify-content: flex-start;
  padding: 0 26px 0 16px;
  border: 1px solid #222;
  border-radius: 26px;
  width: 100%;
  cursor: pointer;
  position: relative;
  background: #22E243;
  z-index: 10;
}
.nnavbar-lbox-select-label {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.nnavbar-lbox-select-chevron {
  width: 10px;
  height: 10px;
  top: 50%;
  right: 21px;
  position: absolute;
  z-index: 2;
  transform: translate(0, -50%);
  transition: .2s all ease-in-out;
}
.nnavbar-lbox-select-open .nnavbar-lbox-select-chevron {
  transform: translate(0, -50%) rotate(180deg);
}
.nnavbar-lbox-select-chevron:before {
  content: '';
  width: 8px;
  height: 2px;
  background: #222;
  position: absolute;
  right: 75%;
  top: 50%;
  transform: translate(50%, -50%) rotate(45deg);
}
.nnavbar-lbox-select-chevron:after {
  content: '';
  width: 8px;
  height: 2px;
  background: #222;
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.nnavbar-lbox-options-box {
  position: absolute;
  z-index: 5;
  background: #FFF;
  width: 100%;
  padding: 10px 0 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  top: -200dvh;
  border-radius: 20px;
  transform: translate(0, -20px);
  opacity: 0;
  overflow: hidden;
  transition: .4s transform ease-in-out, .4s opacity ease-in-out, 0s top ease .4s;
}
.nnavbar-lbox-select-open .nnavbar-lbox-options-box {
  transform: translate(0, 0);
  opacity: 1;
  top: 55px;
  transition: .4s transform ease-in-out, .4s opacity ease-in-out;
}
.nnavbar-lbox-options {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 260px;
  max-height: max(260px, 46dvh);
  overflow: auto;
}
.nnavbar-lbox-options > li {}
.nnavbar-lbox-option-button {
  background: transparent;
  color: #000;
  border: none;
  width: 100%;
  cursor: pointer;
  position: relative;
  font-size: 14px;
  font-weight: 500;
  line-height: 40px;
  padding: 0 16px 0 46px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: .2s all ease-in-out;
}
.nnavbar-lbox-option-button:hover {
  background-color: #f5f5f5;
}
.nnavbar-lbox-option-button.active {
  background-color: #e8e8e8;
}
.nnavbar-lbox-option-button:before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translate(0, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--flag-img) no-repeat center / cover;
}
.nnavbar-lbox-submit-box {
  margin-right: 6px;
}
.nnavbar-lbox-submit {
  color: #FFF;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
  line-height: 18px;
  letter-spacing: 0.07px;
  text-transform: uppercase;
  border: 2px solid #000;
  background: #000;
  padding: 13px 30px;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 26px;
  cursor: pointer;
  transition: .2s all ease-in-out;
}
.nnavbar-lbox-submit:hover {
  background: #f7f7f7 url(../../../images/deals-landing/patern.webp) center / cover;
  border-color: #000;
  color: #222;
  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, .15);
}
.nnavbar-lbox-logo-box {
  display: none;
}
.nnavbar-lbox-logo {}
.nnavbar-lbox-close-box {}
.nnavbar-lbox-close {
  width: 48px;
  height: 48px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
}
.nnavbar-lbox-close:before {
  content: '';
  width: 14px;
  height: 2px;
  position: absolute;
  background: #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.nnavbar-lbox-close:after {
  content: '';
  width: 14px;
  height: 2px;
  position: absolute;
  background: #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Menu component: base for the mobile menu (≤1099px). The desktop bar has its own section at the end. */
@media (max-width: 1099px) {
  .nnavbar-container {
    width: 1312px;
    max-width: calc(100% - 40px);
    position: absolute;
    left: max(calc((100% - 1312px) / 2), 20px);
  }
  .nnavbar-container:before {
    content: '';
    position: absolute;
    background: var(--nnav-bg-color);
    border-radius: 0 0 50px 50px;
    width: 100%;
    height: 100%;
    z-index: 6;
    top: 0;
    left: 0;
    transition: .4s all ease-in-out;
  }
  .nnavbar-container:after {
    content: '';
    position: absolute;
    background: var(--nnav-bg-color);
    width: 100%;
    height: 200px;
    z-index: 9999;
    top: -200px;
    left: 0;
  }
  .nnavbar-small .nnavbar-container:before {
    border-radius: 0 0 34px 34px;
  }
  .nnavbar-box {
    display: block;
  }
  .nnavbar-desktop-hamburger-box {
    width: 56px;
    height: 56px;
    right: 16px;
    top: 10px;
    position: absolute;
    transform: translate(0, -100px);
    transition: .2s all ease-in-out;
  }
  .nnavbar-desktop-hamburger-box:before {
    content: '';
    background: #22E243;
    position: absolute;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .nnavbar-desktop-hamburger {
    background: none;
    width: 56px;
    height: 56px;
    border: 0;
    font-size: 0;
    vertical-align: top;
    position: relative;
    cursor: pointer;
    z-index: 2;
  }
  .nnavbar-desktop-hamburger:before {
    content: '';
    width: 14px;
    height: 2px;
    background: #000000;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, -2px);
  }
  .nnavbar-desktop-hamburger:after {
    content: '';
    width: 14px;
    height: 2px;
    background: #000000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 2px);
  }
  .nnavbar-top {
    padding: 0 40px;
    position: relative;
    z-index: 10;
  }
  .nnavbar-top-box {
    border-bottom: 1px solid rgba(134, 134, 139, .3);
    transition: .2s all ease-in-out;
  }
  /* b2c: kreska między górnym paskiem a menu — antracyt */
  .nnavbar-color-black .nnavbar-top-box {
    border-bottom-color: #222;
  }
  .nnavbar-top-box:after {
    content: '';
    clear: both;
    display: block;
  }
  .nnavbar-language-box {
    float: right;
    line-height: 76px;
    padding-left: 10px;
  }
  .nnavbar-language {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    cursor: pointer;
    width: 48px;
    height: 48px;
    background: none;
    padding: 0;
    vertical-align: middle;
    line-height: 48px;
    border: none;
    color: #888;
    position: relative;
    transform: translate(0, 0);
    transition: .2s all ease-in-out;
  }
  .nnavbar-language:hover {
    color: #22E243;
  }
  .nnavbar-language:before {
    content: '';
    display: block;
    position: absolute;
    width: 28px;
    height: 28px;
    border: 1px solid #888;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: .2s all ease-in-out;
  }
  .nnavbar-language:hover:before {
    border-color: #22E243;
  }
  .nnavbar-language > span {
    position: absolute;
    z-index: 2;
    vertical-align: top;
    line-height: normal;
    padding-left: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .nnavbar-top-menu {
    padding: 14px 0;
  }
  .nnavbar-top-menu-left {
    float: left;
  }
  .nnavbar-menu-block {
    position: relative;
  }
  .nnavbar-menu-tab {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    opacity: 0;
    transition: .2s opacity ease-in-out;
  }
  .nnavbar-menu-tab.nnavbar-active {
    user-select: auto;
    pointer-events: auto;
    opacity: 1;
    position: relative;
    z-index: auto;
    overflow: visible;
  }
  .nnavbar-menu-tab.nnavbar-menu-tab-show {
    z-index: 10;
    overflow: hidden;
  }
  .nnavbar-menu-box {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
  }
  .nnavbar-submenu-box > .nnavbar-menu-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .nnavbar-menu > .nnavbar-menu-box {}
  .nnavbar-menu-item {
    padding: 0;
  }
  .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link {
    padding-left: 41px;
    padding-right: 41px;
  }
  .nnavbar-menu > .nnavbar-menu-box:has(> .nnavbar-menu-item:nth-child(6):last-child) > .nnavbar-menu-item > .nnavbar-menu-item-link {
    padding-left: 23px;
    padding-right: 23px;
  }
  /* 7 itemow (tab Company na stronach b2b — z Help center) */
  .nnavbar-menu > .nnavbar-menu-box:has(> .nnavbar-menu-item:nth-child(7):last-child) > .nnavbar-menu-item > .nnavbar-menu-item-link {
    padding-left: 28px;
    padding-right: 28px;
  }
  .nnavbar-top .nnavbar-menu-item {
    padding: 0;
    text-transform: uppercase;
  }
  .nnavbar-top .nnavbar-menu-item-link {
    text-transform: uppercase;
  }
  .nnavbar-menu-item:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0;
    bottom: 0;
    z-index: 4;
  }
  .nnavbar-menu-item-link {
    padding: 10px 10px;
    display: block;
    position: relative;
    overflow: hidden;
    border: none;
    background: none;
    z-index: 10;
    font-size: 0;
    cursor: pointer;
    transition: .4s all ease-in-out;
  }
  .nnavbar-menu-item-box {
    position: relative;
  }
  .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link:has(.nnavbar-menu-item-arrow) {
    padding-right: 57px;
  }
  .nnavbar-top .nnavbar-menu-item-link {
    height: 48px;
  }
  .nnavbar-top .nnavbar-menu-item-link .nnavbar-menu-item-label {
    white-space: nowrap;
    line-height: 28px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .7px;
  }
  .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link {
    height: 48px;
  }
  .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link .nnavbar-menu-item-label {
    white-space: nowrap;
  }
  .nnavbar-menu-item-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    right: -26px;
    top: 50%;
    overflow: hidden;
    transform: translate(0, -50%);
  }
  .nnavbar-menu-item-arrow:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    height: 2px;
    width: 200%;
    background: #22E243;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .nnavbar-menu-item-arrow > span {
    display: block;
    width: 100%;
    height: 100%;
  }
  .nnavbar-menu-item-arrow > span:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #22E243;
    top: 0;
    left: 0;
  }
  .nnavbar-menu-item-arrow > span:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #22E243;
    top: -2px;
    right: 0;
    transform-origin: right bottom;
    transform: rotate(-90deg);
  }
  /* b2b (schemat white): strzałka itemu w tej samej zieleni co ikonki (#20BB3B) */
  .nnavbar-color-white .nnavbar-menu-item-arrow:before,
  .nnavbar-color-white .nnavbar-menu-item-arrow > span:before,
  .nnavbar-color-white .nnavbar-menu-item-arrow > span:after {
    background: #20BB3B;
  }
  .nnavbar-menu-item-normal {
    white-space: nowrap;
    opacity: 1;
    transition: .2s all ease-in-out;
  }
  .nnavbar-menu-item-icon {
    width: 30px;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
  }
  .nnavbar-menu-item-icon svg {
    vertical-align: middle;
    line-height: normal;
  }
  .nnavbar-menu-item-label {
    color: var(--nnav-link-color);
    vertical-align: middle;
    display: inline-block;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    white-space: normal;
    width: 100%;
    line-height: 20px;
  }

  html[lang="gr"] .nnavbar-menu-item-label {
    font-size: 13px;
    line-height: 18px;
  }

  html[lang="gr"] .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link {
    padding-left: 26px;
    padding-right: 26px;
  }

  .nnavbar-menu-item-hover:has(.nnavbar-menu-item-icon) .nnavbar-menu-item-label,
  .nnavbar-menu-item-normal:has(.nnavbar-menu-item-icon) .nnavbar-menu-item-label {
    width: calc(100% - 30px);
  }
  .nnavbar-menu-item-hover {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translate(0, -50%);
    white-space: nowrap;
    opacity: 0;
    transition: .2s all ease-in-out;
  }
  .nnavbar-top .nnavbar-menu-item-normal .nnavbar-menu-item-icon,
  .nnavbar-top .nnavbar-menu-item-normal .nnavbar-menu-item-label {
    transition: .2s all ease-in-out;
  }
  .nnavbar-top .nnavbar-menu-item[data-menu-button-type] a.nnavbar-menu-item-link .nnavbar-menu-item-normal .nnavbar-menu-item-label {
    color: var(--nnav-link-2-color);
    font-weight: 700;
  }
  .nnavbar-top .nnavbar-menu-item-normal .nnavbar-menu-item-icon {
    opacity: .5;
  }
  .nnavbar-top .nnavbar-menu-item.nnavbar-active[data-menu-button-type] a.nnavbar-menu-item-link .nnavbar-menu-item-normal .nnavbar-menu-item-label {
    color: var(--nnav-link-color);
    font-weight: 800;
  }
  .nnavbar-top .nnavbar-menu-item.nnavbar-active a.nnavbar-menu-item-link .nnavbar-menu-item-normal .nnavbar-menu-item-icon {
    opacity: 1;
  }
  .nnavbar-top .nnavbar-menu-item.nnavbar-active button.nnavbar-menu-item-link .nnavbar-menu-item-normal {
    opacity: 0;
  }
  .nnavbar-top .nnavbar-menu-item.nnavbar-active button.nnavbar-menu-item-link .nnavbar-menu-item-hover {
    opacity: 1;
  }
  .nnavbar-menu .nnavbar-menu-item-hover > .nnavbar-menu-item-label {
    color: #22E243;
  }
  .nnavbar-top-menu .nnavbar-menu-item-hover > .nnavbar-menu-item-label {
    color: #22E243;
  }

  .nnavbar-color-white .nnavbar-menu .nnavbar-menu-item-hover > .nnavbar-menu-item-label,
  .nnavbar-color-white .nnavbar-top-menu .nnavbar-menu-item-hover > .nnavbar-menu-item-label {
    color: #20BB3B;
  }

  .nnavbar-color-white .nnavbar-menu .nnavbar-menu-item-icon svg [fill]:not([fill="none"]) {
    fill: #20BB3B;
  }
  .nnavbar-color-white .nnavbar-menu .nnavbar-menu-item-icon svg [stroke]:not([stroke="none"]) {
    stroke: #20BB3B;
  }
  .nnavbar-top-menu-right {
    float: right;
  }
  .nnavbar-top-logo-box {
    line-height: 76px;
    width: 178px;
    margin: 0 auto;
  }
  .nnavbar-top-logo-link {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
  }
  .nnavbar-top-logo {
    vertical-align: top;
    width: 178px;
  }
  .nnavbar-menu {
    padding: 20px 40px;
    transition: .4s all ease-in-out;
  }
  .nnavbar-submenu-block {
    position: absolute;
    background: var(--nnav-bg-color);
    border-radius: 0 0 52px 52px;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 3;
    padding: 88px 0 0;
    transform: translate(0, -100%);
    transition: none !important;
    /* transition: .4s all ease-in-out .5s; */
  }
  .nnavbar-submenu-block:after {
    content: '';
    display: block;
    clear: both;
  }
  .nnavbar-submenu-padding {
    padding: 0 40px 40px;
  }
  .nnavbar-submenu-padding:after {
    content: '';
    clear: both;
    display: block;
  }
  .nnavbar-submenu {
    overflow: hidden;
    border-top: 1px solid rgba(134, 134, 139, .15);
    padding-top: 20px;
  }
  .nnavbar-submenu .nnavbar-menu-item {
    padding: 0;
    width: 100%;
  }
  .nnavbar-submenu-box {
    float: left;
    width: 33.3333%;
  }
  .nnavbar-submenu-label {
    color: #969494;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    text-transform: uppercase;
    letter-spacing: 2px;
    min-height: 32px;
    padding-left: 18px;
    margin-top: 0;
    text-align: left;
  }
  /* b2b (schemat white): nagłówki kolumn submenu w cieplejszym szarobeżu */
  .nnavbar-color-white .nnavbar-submenu-label {
    color: #B3AA9D;
  }
  .nnavbar-submenu-rbox {
    float: right;
    border-top: 1px solid rgba(134, 134, 139, .15);
    padding-top: 40px;
    width: 25%;
  }
  .nnavbar-submenu-rbox-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .nnavbar-submenu-rbox-icon {}
  .nnavbar-submenu-rbox-icon > svg {
    vertical-align: middle;
  }
  .nnavbar-submenu-rbox-label {
    color: var(--nnav-link-color);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
  }
  .nnavbar-submenu-rbox-button {
    margin-top: 30px;
    text-align: center;
  }
  .nnavbar-submenu-rbox-button > a,
  .nnavbar-submenu-rbox-button > button {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: 18px;
    letter-spacing: 0.07px;
    padding: 14px 30px;
    background: #22E243;
    border: 2px solid #22E243;
    cursor: pointer;
    border-radius: 30px;
    text-transform: uppercase;
    transition: .2s all ease-in-out;
  }
  .nnavbar-submenu-rbox-button > a:hover,
  .nnavbar-submenu-rbox-button > button:hover {
    background: #f7f7f7 url(../../../images/deals-landing/patern.webp) center / cover;
    border-color: #000;
    color: #222;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, .15);
  }
  .nnavbar-submenu-box .nnavbar-menu-item {
    overflow: hidden;
  }
  .nnavbar-submenu-box .nnavbar-menu-item-link {
    /* Animation OFF */
    /* transform: translate(0, 100%); */
    transform: translate(0, 0);
    transition: .4s all ease-in-out .4s;
  }
  .nnavbar-cbox {
    border-radius: 16px;
    border: 1px solid #D6D6D6;
    text-align: center;
    padding: 24px 20px;
  }
  .nnavbar-cbox-icon {
    margin-bottom: 10px;
  }
  .nnavbar-cbox-label {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
  }
  .nnavbar-color-black .nnavbar-cbox-label {
    color: #FFF;
  }
  .nnavbar-cbox-description {
    color: #000;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    white-space: normal;
    margin-top: 18px;
  }
  .nnavbar-color-black .nnavbar-cbox-description {
    color: #FFF;
  }
  .nnavbar-cbox-link-block {
    margin-top: 18px;
  }
  .nnavbar-cbox-link {
    display: inline-block;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    color: #222;
    border: 1px solid #222;
    text-transform: uppercase;
    vertical-align: top;
    padding: 6px 20px;
    border-radius: 20px;
    transition: .2s all ease-in-out;
  }
  .nnavbar-color-black .nnavbar-cbox-link {
    color: #FFF;
    border: 1px solid #FFF;
  }
  .nnavbar-cbox-link:hover {
    border-color: #22E243;
    background: #22E243;
    color: #222;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, .15);
  }
  /* ── Promo boxy submenu (child_boxes) ──
     WAZNE: nowy uklad tylko gdy sa 2+ boxy (Business Account: referral + pricing).
     Przy 1 boxie wrapper jest przezroczysty (display:contents) => pojedynczy box
     zachowuje sie DOKLADNIE jak wczesniej (reszta zakladek bez zmian).
     2 boxy — desktop (>=1200): obok siebie, kazdy 280px, gap 32px. */
  .nnavbar-submenu-boxes {
    display: contents;
  }
  /* 2+ boxy: kontener flex jako BFC (BEZ float) — wypelnia miejsce OBOK kolumny
     linkow. Dzieki temu przy zwezaniu boxy sie KURCZA (flex 0 1 280), a nie
     zawijaja cala sekcje pod linki (float 592px wpadal pod spod ~1200-1320). */
  .nnavbar-submenu-boxes:has(.nnavbar-submenu-box:nth-child(2)) {
    display: flex;
    gap: 32px;
    align-items: stretch;
  }
  .nnavbar-submenu-boxes:has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-submenu-box {
    float: none;
    width: auto;
    flex: 0 1 280px;
    min-width: 0;
    margin: 0;
  }
  .nnavbar-submenu-boxes:has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  /* Warianty tekstu/przycisku: -d = desktop (>1200: "Join our referral program" /
     "VIEW"), -m = stacked/mobile (<=1200: "Referral program" / "See details" z
     ikona). Domyslnie widoczny desktop; -m chowane; highlight opisu bez bolda. */
  .nnavbar-cbox-label-m { display: none; }
  .nnavbar-cbox-link-m { display: none; }
  .nnavbar-cbox-desc-hl { font-weight: 500; }
}

/* 2 boxy w szufladzie mobilnej: karty poziome — ikona z lewej, tekst z prawej,
   przycisk pod spodem, jedna pod druga. */
@media (max-width: 1099px) {
  .nnavbar-submenu-boxes:not(.nnavbar-cbox-slider):has(.nnavbar-submenu-box:nth-child(2)) {
    flex-direction: column;
    gap: 16px;
  }
  .nnavbar-submenu-boxes:not(.nnavbar-cbox-slider):has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-submenu-box {
    flex: none;
    width: 100%;
  }
  .nnavbar-submenu-boxes:not(.nnavbar-cbox-slider):has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 12px;
    align-items: start;
    text-align: left;
    padding: 18px 22px 22px;
  }
  .nnavbar-submenu-boxes:not(.nnavbar-cbox-slider):has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 64px;
    height: 64px;
    margin: 0;
  }
  .nnavbar-submenu-boxes:not(.nnavbar-cbox-slider):has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox-icon svg {
    width: 64px;
    height: 64px;
    display: block;
  }
  /* naglowek 18/28 + przelaczenie tekstu desktop -> mobile ("Referral program") */
  .nnavbar-submenu-boxes:not(.nnavbar-cbox-slider):has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox-label {
    grid-column: 2;
    grid-row: 1;
    font-size: 18px;
    line-height: 28px;
    /* w stacku label do lewej — kasujemy flex-center + rezerwacje 48px z bloku
       min-height (>=1100), ktory dotyczy tylko kart pionowych (obok siebie / slider) */
    display: block;
    min-height: 0;
  }
  .nnavbar-submenu-boxes:not(.nnavbar-cbox-slider):has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox-label:has(.nnavbar-cbox-label-m) .nnavbar-cbox-label-d {
    display: none;
  }
  .nnavbar-submenu-boxes:not(.nnavbar-cbox-slider):has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox-label-m {
    display: block;
  }
  /* opis 14/20 + pogrubiony highlight ("Earn up to €2,000") */
  .nnavbar-submenu-boxes:not(.nnavbar-cbox-slider):has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox-description {
    grid-column: 2;
    grid-row: 2;
    margin-top: 12px;
    font-size: 14px;
    line-height: 20px;
    min-height: 0; /* bez rezerwacji 32px z bloku min-height (>=1100) — w stacku niepotrzebna */
  }
  .nnavbar-submenu-boxes:not(.nnavbar-cbox-slider):has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox-desc-hl {
    font-weight: 700;
  }
  /* przycisk pod spodem (kolumna tekstu) + przelaczenie na "See details" z ikona */
  .nnavbar-submenu-boxes:not(.nnavbar-cbox-slider):has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox-link-block {
    grid-column: 2;
    grid-row: 3;
    margin-top: 22px;
  }
  .nnavbar-submenu-boxes:not(.nnavbar-cbox-slider):has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox-link-block:has(.nnavbar-cbox-link-m) .nnavbar-cbox-link-d {
    display: none;
  }
  .nnavbar-submenu-boxes:not(.nnavbar-cbox-slider):has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox-link-m {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    padding: 10px 24px;
    border-radius: 64px;
    font-size: 14px;
    font-weight: 800;
    line-height: 24px;
    box-sizing: border-box;
  }
  .nnavbar-submenu-boxes:not(.nnavbar-cbox-slider):has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox-link-ico {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: none;
  }
  .nnavbar-submenu-boxes:not(.nnavbar-cbox-slider):has(.nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox-link-ico svg {
    display: block;
    width: 16px;
    height: 16px;
  }
}


.nnavbar-mobile {
  display: none;
}
.nnavbar-subback {
  display: none;
}
.nnavbar-bottom-mobile {
  display: none;
}

@media (max-width: 1099px) {
  .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link {
    padding-left: 30px;
    padding-right: 30px;
  }
  .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link:has(.nnavbar-menu-item-arrow) {
    padding-right: 46px;
  }
}

@media (max-width: 1099px) {
  .nnavbar {
    width: 100%;
  }
  .nnavbar:before {
    content: '';
    position: absolute;
    background: #222;
    height: 100dvh;
    border-radius: 0;
    left: -100%;
    top: 0;
    width: 100%;
    z-index: 90;
    opacity: 0;
    transition: .4s opacity ease-in-out, 0s left ease .4s;
  }
  .nnavbar.nnavbar-mobile-opened:before {
    left: 0;
    opacity: .4;
    transition: .4s opacity ease-in-out;
  }
  .nnavbar.nnavbar-color-white.nnavbar-mobile-opened:before {
    opacity: .7;
  }
  .nnavbar-mobile {
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
  }
  .nnavbar-mobile-logo-box {
    line-height: 76px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -100%);
    transition: .4s all ease-in-out;
  }
  .nnavbar-stop .nnavbar-mobile-logo-box {
    transform: translate(-50%, 0);
  }
  .nnavbar-mobile-logo {
    vertical-align: middle;
  }
  .nnavbar-mobile-hamburger-box {
    width: 56px;
    height: 56px;
    right: 10px;
    top: 10px;
    position: absolute;
  }
  .nnavbar-mobile-hamburger-box:before {
    content: '';
    background: #22E243;
    position: absolute;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .nnavbar-mobile-hamburger {
    background: none;
    width: 56px;
    height: 56px;
    border: 0;
    font-size: 0;
    vertical-align: top;
    position: relative;
    z-index: 2;
  }
  .nnavbar-mobile-hamburger:before {
    content: '';
    width: 14px;
    height: 2px;
    background: #000000;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, -2px);
  }
  .nnavbar-mobile-hamburger:after {
    content: '';
    width: 14px;
    height: 2px;
    background: #000000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 2px);
  }

  .nnavbar-container {
    position: fixed;
    height: calc(100dvh - var(--navbar-alert-height, 0px));
    z-index: 990;
    width: 0;
    left: auto;
    transform: none;
    right: 0;
    overflow: hidden;
    transition: .4s width ease-in-out;
    max-width: none;
  }
  .nnavbar-container:before {
    display: none;
  }
  .nnavbar-mobile-opened .nnavbar-container {
    width: 100%;
    left: 0;
  }
  .nnavbar-box {
    position: absolute;
    width: 90vw;
    height: calc(100dvh - var(--navbar-alert-height, 0px));
    background: var(--nnav-bg-color);
    border-radius: 40px 0 0 40px;
    max-width: 400px;
    left: max(10dvw, calc(100dvw - 400px));
  }
  .nnavbar-menu-tab {
    height: 100%;
  }
  .nnavbar-top {
    padding: 24px 35px 0;
  }
  .nnavbar-box:has(.nnavbar-menu-item-open) .nnavbar-top {
    z-index: auto;
  }
  .nnavbar-top-box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    border: none;
    transform: translate(0, 0);
    /* wjazd/zjazd gornego paska przy submenu INSTANT (bez efektu pojawiania) */
    transition: 0s all ease-in-out;
  }
  .nnavbar-box:has(.nnavbar-menu-item-open) .nnavbar-top-box {
    transform: translate(140%, 0);
  }
  .nnavbar-desktop-hamburger-box {
    transform: none !important;
    width: 48px;
    height: 48px;
    top: 24px;
    right: 24px;
  }
  .nnavbar-box:has(.nnavbar-menu-item-open) .nnavbar-desktop-hamburger-box {
    z-index: 30;
  }
  .nnavbar-desktop-hamburger-box:before {
    border: 1px solid #22E243;
    background: #222;
    width: 38px;
    height: 38px;
  }
  .nnavbar-color-white .nnavbar-desktop-hamburger-box:before {
    border: 1px solid #222;
    background: #FFF;
  }
  .nnavbar-desktop-hamburger {
    width: 48px;
    height: 48px;
  }
  .nnavbar-desktop-hamburger:before {
    background: #22E243;
    transform: translate(-50%, -50%) rotate(45deg);
    bottom: auto;
    top: 50%;
  }
  .nnavbar-desktop-hamburger:after {
    background: #22E243;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .nnavbar-color-white .nnavbar-desktop-hamburger:before,
  .nnavbar-color-white .nnavbar-desktop-hamburger:after {
    background: #222;
  }
  .nnavbar-language-box {
    float: none;
    order: 2;
    line-height: normal;
    padding: 0;
  }
  .nnavbar-language {}
  .nnavbar-language:before {
    width: 38px;
    height: 38px;
  }
  .nnavbar-top-menu-container {
    order: 3;
    width: 100%;
    flex: 1;
    padding: 29px 0 0;
  }
  .nnavbar-menu-item-link {
    opacity: 1;
    transform: translate(0, 0);
    /* I poziom pojawia/znika INSTANT (0s) — symetrycznie do drugiego poziomu,
       ktory tez jest instant (otwarcie i zamkniecie submenu bez animacji) */
    transition: 0s opacity ease-in-out, 0s transform ease-in-out .4s;
  }
  .nnavbar-box:has(.nnavbar-menu-item-open) .nnavbar-menu-item-link {
    user-select: none;
    pointer-events: none;
    opacity: 0;
    transition: 0s opacity ease-in-out;
  }
  .nnavbar-submenu .nnavbar-menu-item-link {
    opacity: 1 !important;
    transform: none !important;
    user-select: auto !important;
    pointer-events: auto !important;
  }
  .nnavbar-mobile-hide {
    display: none;
  }
  .nnavbar-top-menu-overflow {
    overflow: auto;
    white-space: nowrap;
    font-size: 0;
    margin: 0 -35px;
    /* 2px oddechu w pionie — 1px bordery tracku nie wpadaja w krawedz
       przycinania scrolla */
    padding: 2px 35px 2px 21px;
    position: relative;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20px, rgba(0, 0, 0, 1) calc(100% - 35px), rgba(0, 0, 0, 0) 100%);
    /* przewijanie zostaje, scrollbar schowany */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nnavbar-top-menu-overflow::-webkit-scrollbar {
    display: none;
  }
  .nnavbar-top-menu-overflow .nnavbar-menu-item-link {
    padding: 6px 0;
    height: auto;
  }
  .nnavbar-top-menu-overflow .nnavbar-menu-item-normal {
    line-height: 38px;
    padding: 0 23px;
    opacity: 1 !important;
    border: 1px solid transparent;
  }
  .nnavbar-top-menu-overflow .nnavbar-active .nnavbar-menu-item-normal {
    border-color: #22E243;
    padding: 0 32px;
    border-radius: 24px;
  }
  .nnavbar-top-menu-overflow .nnavbar-menu-item-label {
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    width: 100% !important;
    color: var(--nnav-link-color) !important;
  }
  .nnavbar-top-menu-overflow .nnavbar-active .nnavbar-menu-item-label {
    color: #22E243;
  }
  .nnavbar-top-menu-overflow .nnavbar-menu-item-hover {
    display: none;
  }
  .nnavbar-top-menu-overflow .nnavbar-menu-item-icon {
    display: none;
  }
  /* obie grupy paska na wspolnej osi srodkowej — bez tego inline-blocki
     roznej wysokosci (segment 48px vs pigulki z paddingiem linka) siadaja
     po baseline i toggle ucieka w pionie razem z borderami */
  .nnavbar-top-menu-overflow .nnavbar-top-menu {
    vertical-align: middle;
  }
  /* ── Personal/Business jako segment-toggle (styl z zenref-hero__toggle;
     apla przesuwa sie jak .zenh_cards-nav:before — nnavbar.js ustawia
     --active-left/--active-width/--active-on na ul-ce) ── */
  .nnavbar-top-menu-left .nnavbar-menu-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  /* wizualny track segmentu malowany osobno (:after) i przyciety do tej
     samej wysokosci co apla — duze pola klikalne tabow (pionowe paddingi)
     nie rozdymaja tla */
  .nnavbar-top-menu-left .nnavbar-menu-box:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    height: 100%;
    border-radius: 48px;
    border: 1px solid transparent;
    background:
      linear-gradient(143deg, #222 0.72%, #000 100%) padding-box,
      linear-gradient(180deg, rgba(114, 114, 114, 0.50) 0%, rgba(0, 0, 0, 0) 100%) border-box;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-sizing: border-box;
    z-index: 0;
    transition: opacity .2s ease-in-out;
  }
  /* Company zaznaczone: segment przestaje byc togglem — track (border,
     tlo, blur) znika w calosci */
  .nnavbar-top-menu-left .nnavbar-menu-box:not(:has(.nnavbar-active)):after {
    opacity: 0;
  }
  /* b2b (schemat white): track na bialo */
  .nnavbar-color-white .nnavbar-top-menu-left .nnavbar-menu-box:after {
    border: 1px solid var(--color-anthracite, #222222);
    background: var(--color-white, #FFF);
    backdrop-filter: blur(17.5px);
    -webkit-backdrop-filter: blur(17.5px);
  }
  /* apla aktywnego taba — na ciemnym schemacie biala... */
  .nnavbar-top-menu-left .nnavbar-menu-box:before {
    content: '';
    position: absolute;
    left: calc(var(--active-left, 0px) + 1px);
    top: 50%;
    transform: translate(0, -50%);
    width: calc(var(--active-width, 0px) - 2px);
    /* pelna wysokosc tabow, wpuszczona o 1px z kazdej strony — border
       tracku (1px) zostaje widoczny, apla go nie przykrywa */
    height: calc(100% - 2px);
    box-sizing: border-box;
    border-radius: 64px;
    border: 1px solid #222222;
    background: #FFF;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: var(--active-on, 0);
    /* transition dopiero po pierwszym ustawieniu pozycji (inline skrypt
       za headerem dodaje nnavbar-apla-ready) — bez skoku przy starcie */
    transition: none;
    z-index: 1;
  }
  .nnavbar-top-menu-left .nnavbar-menu-box.nnavbar-apla-ready:before {
    transition: .2s all ease-in-out;
  }
  /* ...a na b2b (schemat white) czarna z gradientem */
  .nnavbar-color-white .nnavbar-top-menu-left .nnavbar-menu-box:before {
    background: var(--gradient-surface-black, linear-gradient(143deg, #222 0.72%, #000 100%));
  }
  .nnavbar-top-menu-left .nnavbar-menu-item {
    position: relative;
    z-index: 2;
    margin: 0;
  }
  /* link taba bez pionowego paddingu z reguly overflow (6px 0) — to on
     rozdymal toggle do 60px zamiast 48 i apla wystawala za border tracku */
  .nnavbar-top-menu-left .nnavbar-menu-item-link {
    display: block;
    padding: 0;
    height: auto;
  }
  /* oba stany identyczne wymiarowo: ikonka+napis wysrodkowane (symetryczny
     padding), a apla nigdy nie musi korygowac szerokosci po dojechaniu */
  .nnavbar-top-menu-left .nnavbar-menu-item-normal,
  .nnavbar-top-menu-left .nnavbar-active .nnavbar-menu-item-normal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    line-height: normal;
    border: 0;
    border-radius: 64px;
    /* smooth przejscie do/z kompaktowego stanu przy zaznaczonym Company */
    transition: height .2s ease-in-out, padding .2s ease-in-out, gap .2s ease-in-out;
  }
  /* wewnetrzne krawedzie segmentu: nieaktywny tab ma 16px od strony
     sasiada (Personal z prawej, Business z lewej); aktywny wraca do 24px */
  .nnavbar-top-menu-left [data-menu-button-type="b2c"]:not(.nnavbar-active) .nnavbar-menu-item-normal {
    padding-right: 16px;
  }
  .nnavbar-top-menu-left [data-menu-button-type="b2b"]:not(.nnavbar-active) .nnavbar-menu-item-normal {
    padding-left: 16px;
  }

  /* ikonki tabow wracaja (overflow ukrywa je wyzej) */
  .nnavbar-top-menu-left .nnavbar-menu-item-icon {
    display: block;
    width: 16px;
    height: 16px;
  }
  /* svg blokowo i na caly box — inline'owy siedzial na baseline
     i wystawal pod ikonke */
  .nnavbar-top-menu-left .nnavbar-menu-item-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  /* pelna nieprzezroczystosc — ogolna regula .nnavbar-top daje ikonkom
     opacity .5 i kolory wygladaja na szare */
  .nnavbar-top-menu-left .nnavbar-menu-item-normal .nnavbar-menu-item-icon {
    opacity: 1;
  }
  .nnavbar-top-menu-left .nnavbar-menu-item-label {
    width: auto !important;
    font-family: var(--font-family-master, Nunito, sans-serif);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.24px;
    text-transform: uppercase;
    /* nieaktywny na bialym tracku (b2b) */
    color: #222222 !important;
  }
  /* ciemny schemat: nieaktywny tab (np. Business na Personal) na #22E243 */
  .nnavbar-color-black .nnavbar-top-menu-left .nnavbar-menu-item-label {
    color: #22E243 !important;
  }
  /* aktywny na czarnej apli (b2b/white): bialy napis, ikonka zostaje
     zielona */
  .nnavbar-top-menu-left .nnavbar-active .nnavbar-menu-item-label {
    color: #FFF !important;
  }
  /* aktywny na bialej apli (personal/ciemny schemat): czarny tekst */
  .nnavbar-color-black .nnavbar-top-menu-left .nnavbar-active .nnavbar-menu-item-label {
    color: var(--color-black, #000) !important;
  }
  /* Company w prawym pasku: ikonka widoczna, wymiary STALE (48px jak
     toggle, padding linka wyzerowany) — nic nie skacze przy zaznaczaniu.
     Pigulka aktywnego stanu malowana na :before i wygaszana przez opacity,
     bo gradient tla nie umie sie animowac — dzieki temu wyjscie z Company
     jest smooth. */
  .nnavbar-top-menu-right [data-menu-button-type="company"] .nnavbar-menu-item-link {
    display: block;
    padding: 0;
    height: auto;
  }
  .nnavbar-top-menu-right [data-menu-button-type="company"] .nnavbar-menu-item-normal {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 64px;
    box-sizing: border-box;
    line-height: normal;
  }
  .nnavbar-top-menu-right [data-menu-button-type="company"] .nnavbar-menu-item-normal:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 64px;
    border: 1px solid var(--color-anthracite, #222222);
    background: var(--gradient-surface-black, linear-gradient(143deg, #222 0.72%, #000 100%));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-sizing: border-box;
    opacity: 0;
    transition: opacity .2s ease-in-out;
  }
  .nnavbar-top-menu-right [data-menu-button-type="company"].nnavbar-active .nnavbar-menu-item-normal:before {
    opacity: 1;
  }
  .nnavbar-top-menu-right [data-menu-button-type="company"] .nnavbar-menu-item-icon,
  .nnavbar-top-menu-right [data-menu-button-type="company"] .nnavbar-menu-item-label {
    position: relative;
    z-index: 1;
  }
  .nnavbar-top-menu-right [data-menu-button-type="company"] .nnavbar-menu-item-icon {
    display: block;
    width: 16px;
    height: 16px;
    /* pelna nieprzezroczystosc — .nnavbar-top daje .5 i czern robi sie szara */
    opacity: 1;
  }
  .nnavbar-top-menu-right [data-menu-button-type="company"] .nnavbar-menu-item-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .nnavbar-top-menu-right [data-menu-button-type="company"] .nnavbar-menu-item-icon svg [fill]:not([fill="none"]) {
    fill: #C5BFB5;
  }
  /* b2b (schemat white): ikonka Company czarna, tekst czarny */
  .nnavbar-color-white .nnavbar-top-menu-right [data-menu-button-type="company"] .nnavbar-menu-item-icon svg [fill]:not([fill="none"]) {
    fill: #000;
  }
  .nnavbar-color-white .nnavbar-top-menu-right [data-menu-button-type="company"] .nnavbar-menu-item-icon svg [stroke]:not([stroke="none"]) {
    stroke: #000;
  }
  .nnavbar-color-white .nnavbar-top-menu-right [data-menu-button-type="company"] .nnavbar-menu-item-label {
    color: #000 !important;
  }
  /* Company aktywne (czarna pigulka): tekst i ikonka #22E243 — po regulach
     schematow, zeby wygrywac kolejnoscia */
  .nnavbar-top-menu-right [data-menu-button-type="company"].nnavbar-active .nnavbar-menu-item-label {
    color: #22E243 !important;
  }
  .nnavbar-top-menu-right [data-menu-button-type="company"].nnavbar-active .nnavbar-menu-item-icon svg [fill]:not([fill="none"]) {
    fill: #22E243;
  }
  .nnavbar-top-menu-right [data-menu-button-type="company"].nnavbar-active .nnavbar-menu-item-icon svg [stroke]:not([stroke="none"]) {
    stroke: #22E243;
  }
  /* kolory ikon nadpisuja barwy zapieczone w inline SVG;
     baza = nieaktywny na bialym tracku (b2b) */
  .nnavbar-top-menu-left .nnavbar-menu-item-icon svg [fill]:not([fill="none"]) {
    fill: #222222;
  }
  .nnavbar-top-menu-left .nnavbar-menu-item-icon svg [stroke]:not([stroke="none"]) {
    stroke: #222222;
  }
  /* ciemny schemat: ikonka nieaktywnego taba tez #22E243 */
  .nnavbar-color-black .nnavbar-top-menu-left .nnavbar-menu-item-icon svg [fill]:not([fill="none"]) {
    fill: #22E243;
  }
  .nnavbar-color-black .nnavbar-top-menu-left .nnavbar-menu-item-icon svg [stroke]:not([stroke="none"]) {
    stroke: #22E243;
  }
  .nnavbar-top-menu-left .nnavbar-active .nnavbar-menu-item-icon svg [fill]:not([fill="none"]) {
    fill: #22E243;
  }
  .nnavbar-top-menu-left .nnavbar-active .nnavbar-menu-item-icon svg [stroke]:not([stroke="none"]) {
    stroke: #22E243;
  }
  .nnavbar-color-black .nnavbar-top-menu-left .nnavbar-active .nnavbar-menu-item-icon svg [fill]:not([fill="none"]) {
    fill: #20BB3B;
  }
  .nnavbar-color-black .nnavbar-top-menu-left .nnavbar-active .nnavbar-menu-item-icon svg [stroke]:not([stroke="none"]) {
    stroke: #20BB3B;
  }
  /* plynne przejscia kolorow tekstu i ikon w segmencie */
  .nnavbar-top-menu-left .nnavbar-menu-item-label {
    transition: color .2s ease-in-out;
  }
  .nnavbar-top-menu-left .nnavbar-menu-item-icon svg * {
    transition: fill .2s ease-in-out, stroke .2s ease-in-out;
  }
  /* ── Company zaznaczone (segment bez aktywnego taba, apla schowana):
     Personal/Business trzymaja wymiary, zmieniaja tylko kolory ── */
  .nnavbar-top-menu-left .nnavbar-menu-box:not(:has(.nnavbar-active)) .nnavbar-menu-item-label {
    color: var(--color-anthracite, #222222) !important;
  }
  /* Company nie flipuje juz schematu — na ciemnym (b2c) anthracite bylby
     niewidoczny, wiec teksty segmentu bez zaznaczenia ida na bialo */
  .nnavbar-color-black .nnavbar-top-menu-left .nnavbar-menu-box:not(:has(.nnavbar-active)) .nnavbar-menu-item-label {
    color: #FFF !important;
  }
  .nnavbar-top-menu-left .nnavbar-menu-box:not(:has(.nnavbar-active)) .nnavbar-menu-item-icon svg [fill]:not([fill="none"]) {
    fill: #20BB3B;
  }
  .nnavbar-top-menu-left .nnavbar-menu-box:not(:has(.nnavbar-active)) .nnavbar-menu-item-icon svg [stroke]:not([stroke="none"]) {
    stroke: #20BB3B;
  }
  .nnavbar-top-logo-box {
    order: 1;
    margin: 0;
    line-height: normal;
    width: calc(100% - 107px);
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(100% - 107px);
  }
  .nnavbar-top-logo-link {
    line-height: 48px;
  }
  .nnavbar-top-logo {
    vertical-align: middle;
    width: 135px;
    max-width: 90%;
  }
  .nnavbar-top-menu {
    float: none;
    padding: 0;
    vertical-align: middle;
    display: inline-block;
  }
  .nnavbar-menu-block {
    height: calc(100dvh - 275px);
    position: relative;
    z-index: 20;
  }
  .nnavbar-menu {
    padding-top: 46px;
    height: 100%;
    overflow: auto;
    /* staly runway na dole listy tabow (bez liczenia w JS) */
    padding-bottom: 24px;
  }

  .nnavbar-menu > .nnavbar-menu-box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link {
    padding-left: 10px;
    padding-right: 10px;
  }
  .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link:has(.nnavbar-menu-item-arrow) {
    padding-right: 26px;
  }

  @media (max-height: 680px) {
    .nnavbar-menu {
      padding-top: 20px;
    }
  }

  /* Odstepy pierwszego poziomu byly zmniejszane na niskich ekranach (z 22px
     bazowych do 10px, potem 0). Baza to teraz 0, wiec te przejscia sa zbedne
     — zostawione zakomentowane na wypadek powrotu do wiekszego odstepu.
  @media (max-height: 640px) {
    .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item {
      margin-bottom: 10px;
    }
  }

  @media (max-height: 590px) {
    .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item {
      margin-bottom: 0;
    }
  }
  */

  .nnavbar-menu-item {
    padding: 0 !important;
  }
  .nnavbar-menu-item:before {
    display: none;
  }
  /* pierwszy poziom listy tabow — bez odstepu miedzy itemami, tak jak drugi
     poziom (submenu ma margin-bottom: 0). Poziom 1 i 2 maja te sama odleglosc.
     Wczesniej: margin-bottom: 22px; (alternatywa: 10px). */
  .nnavbar-menu .nnavbar-menu-item {
    margin-bottom: 0;
  }
  .nnavbar-menu .nnavbar-menu-item:last-child {
    margin: 0;
  }
  .nnavbar-submenu-box > .nnavbar-menu-box {
    display: block;
  }
  .nnavbar-submenu-box > .nnavbar-menu-box > .nnavbar-menu-item {
    margin-bottom: 0;
  }
  .nnavbar-submenu-label {
    line-height: 24px;
    min-height: 24px;
  }
  .nnavbar-lbox-container {
    position: fixed;
    height: 100dvh !important;
    z-index: 996;
    width: 0;
    left: auto;
    transform: none;
    right: 0;
    padding: 0;
    background: none;
    overflow: hidden !important;
    transition: .4s width ease-in-out !important;
  }
  .nnavbar-lbox-open .nnavbar-lbox-container {
    width: 100%;
  }
  .nnavbar-lbox-box {
    position: absolute;
    width: 90vw;
    height: 100dvh;
    background: #222;
    border-radius: 40px 0 0 40px;
    opacity: 1;
    max-width: 400px;
    left: max(10vw, calc(100vw - 400px));
    display: block;
    padding: 140px 29px 0 35px;
  }
  .nnavbar-lbox-info {
    padding: 0;
    color: #FFF;
    margin-bottom: 34px;
  }
  .nnavbar-lbox-select-block {
    margin: 0 0 23px;
  }
  .nnavbar-lbox-select-box {
    width: 100%;
  }
  .nnavbar-lbox-select-box:before {
    background: #222;
  }
  .nnavbar-lbox-select {
    background: #222;
    color: #FFF;
    border-color: #FFF;
  }
  .nnavbar-lbox-select-chevron:before,
  .nnavbar-lbox-select-chevron:after {
    background: #FFF;
  }
  .nnavbar-lbox-select-label {}
  .nnavbar-lbox-options-box {}
  .nnavbar-lbox-options {
    /* max-height: 200px; */
    max-height: 50dvh;
    max-height: 50svh;
  }
  .nnavbar-lbox-option-button {}
  .nnavbar-lbox-submit-box {
    margin: 0;
  }
  .nnavbar-lbox-submit {
    width: 100%;
    color: #000;
    background: #22E243;
    border-color: #22E243;
  }
  .nnavbar-lbox-logo-box {
    display: block;
    position: absolute;
    top: 61px;
    left: 35px;
  }
  .nnavbar-lbox-logo {
    width: 134px;
    vertical-align: middle;
  }
  .nnavbar-lbox-close-box {
    position: absolute;
    width: 48px;
    height: 48px;
    right: 25px;
    top: 52px;
  }
  .nnavbar-lbox-close-box:before {
    content: '';
    width: 38px;
    height: 38px;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #222;
    border: 1px solid #22E243;
    border-radius: 50%;
  }
  .nnavbar-lbox-close {}
  .nnavbar-lbox-close:before {
    content: '';
    background: #22E243;
  }
  .nnavbar-lbox-close:after {
    content: '';
    background: #22E243;
  }

  .nnavbar-submenu-block {
    top: -121px;
    transform: translate(-200vw, 0);
    /* Drugi poziom po kliknieciu pojawia sie INSTANT — zadnych animacji.
       Blok chowany/pokazywany transformem (bazowe `transition: none !important`
       zeruje animacje), tlo to panel (.nnavbar:before, instant), a I poziom
       znika natychmiast (regula .nnavbar-menu-item-link ... transition: 0s),
       wiec nic nie przeswituje. */
    background: none;
    padding: 0;
    bottom: -18px;
    border-radius: 0;
  }
  .nnavbar-submenu-block.nnavbar-submenu-scroll:before {
    content: '';
    width: 8px;
    height: 14px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translate(-50%, 0);
    background: url(../imgs/scroll-down.svg) no-repeat center / contain;
  }
  .nnavbar-menu-item-open .nnavbar-submenu-block {
    transform: translate(0, 0);
  }
  .nnavbar-submenu-padding {
    height: 100%;
    padding: 0;
  }
  .nnavbar-submenu-rbox {
    display: none;
  }
  .nnavbar-submenu {
    border: none;
    padding: 15px 40px 40px;
    height: calc(100% - 55px);
    overflow: auto;
  }
  .nnavbar-submenu-block.nnavbar-submenu-scroll > .nnavbar-submenu-padding > .nnavbar-submenu {
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) calc(100% - 30px), rgba(0, 0, 0, 0) calc(100% - 20px), rgba(0, 0, 0, 0) 100%);
  }
  .nnavbar-submenu-box {
    width: 100%;
    float: none;
    margin-bottom: 24px;
  }
  .nnavbar-submenu-box:last-child {
    margin-bottom: 0;
  }

  .nnavbar-subback {
    display: block;
    /* border-bottom: 1px solid rgba(136, 136, 136, .6); */
    padding: 0 40px 7px;
  }
  .nnavbar-subback-button {
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    padding: 10px 0 10px 8px;
    position: relative;
  }
  .nnavbar-subback-button:before {
    content: '';
    position: absolute;
    width: 12px;
    height: 3px;
    background: #000;
    transform-origin: left top;
    top: calc(50% - 2px);
    left: -12px;
    transform: rotate(45deg);
  }
  .nnavbar-subback-button:after {
    content: '';
    position: absolute;
    width: 12px;
    height: 3px;
    background: #000;
    transform-origin: left bottom;
    bottom: calc(50% - 2px);
    left: -12px;
    transform: rotate(-45deg);
  }
  .nnavbar-color-black .nnavbar-subback-button:before,
  .nnavbar-color-black .nnavbar-subback-button:after {
    background-color: #FFF;
  }
  .nnavbar-subback-label-box {
    vertical-align: middle;
    white-space: nowrap;
    padding-right: 32px;
  }
  .nnavbar-subback-icon {
    width: 34px;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
  }
  .nnavbar-subback-icon > svg {
    vertical-align: middle;
    line-height: normal;
  }
  .nnavbar-subback-label {
    color: #22E243;
    vertical-align: middle;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    width: calc(100% - 34px);
    white-space: normal;
  }
  /* b2b (schemat white): subback — label i ikonka na #222222, tekst
     opuszczony o 2px do linii ikonki (fill/stroke nadpisują kolory
     zapieczone w inline SVG przez filtr ikon) */
  .nnavbar-color-white .nnavbar-subback-label {
    color: #222222;
    position: relative;
    top: 2px;
  }
  .nnavbar-color-white .nnavbar-subback-icon svg [fill]:not([fill="none"]) {
    fill: #222222;
  }
  .nnavbar-color-white .nnavbar-subback-icon svg [stroke]:not([stroke="none"]) {
    stroke: #222222;
  }
  .nnavbar-subback-cta_label {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    margin-top: 4px;
    padding-left: 10px;
    display: none !important; /* Disabled */
  }
  .nnavbar-color-black .nnavbar-subback-cta_label {
    color: #FFF;
  }

  .nnavbar-bottom-mobile {
    display: none;
    text-align: center;
    padding: 18px 31px 0 31px;
    position: relative;
    z-index: 21;
  }
  .nnavbar-bottom-mobile.nnavbar-active {
    display: block;
  }

  .nnavbar-box:has(.nnavbar-menu-tab.nnavbar-active.nnavbar-menu-scroll) .nnavbar-bottom-mobile.nnavbar-active:before {
    content: '';
    width: 8px;
    height: 14px;
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: 5px;
    transform: translate(-50%, 0);

    background-color: var(--nnav-scroll-arrow-color, #59EA6D);
    -webkit-mask: url(../imgs/scroll-down.svg) no-repeat center / contain;
            mask: url(../imgs/scroll-down.svg) no-repeat center / contain;
    z-index: 2;
    pointer-events: none;
  }

  .nnavbar-menu-tab.nnavbar-active.nnavbar-menu-scroll:not(:has(.nnavbar-menu-item-open)) .nnavbar-menu {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--menu-fade-y, 100%) - 46px), transparent calc(var(--menu-fade-y, 100%) - 20px), transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--menu-fade-y, 100%) - 46px), transparent calc(var(--menu-fade-y, 100%) - 20px), transparent 100%);
  }
  .nnavbar-bottom-cta-box {}
  .nnavbar-bottom-cta {
    color: #000;
    border: none;
    font-size: 14px;
    font-weight: 800;
    line-height: 18px;
    letter-spacing: 0.07px;
    background: #22E243;
    display: inline-block;
    text-transform: uppercase;
    vertical-align: top;
    padding: 15px 0;
    border-radius: 26px;
    width: 100%;
  }
  .nnavbar-bottom-hc-box {
    margin-top: 3px;
  }
  .nnavbar-bottom-hc {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    white-space: nowrap;
    padding: 10px 20px;
  }
  .nnavbar-bottom-hc-icon {
    width: 34px;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
  }
  .nnavbar-bottom-hc-icon > svg {
    vertical-align: middle;
    line-height: normal;
  }
  .nnavbar-bottom-hc-label {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
  }
  .nnavbar-color-black .nnavbar-bottom-hc-label {
    color: #FFF;
  }

  .nnavbar-body-mobile-effect {
    width: 100%;
    position: relative;
    left: 0;
    transition: .4s left ease-in-out;
  }
}

@media (max-width: 320px) {
  .nnavbar-top-logo-box {
    width: calc(100% - 97px);
    flex-basis: calc(100% - 97px);
  }
}
/* Stan otwarty bez animacji - reopen menu po nawigacji tabem Personal/Business */
.nnavbar.nnavbar-noanim,
.nnavbar.nnavbar-noanim:before,
.nnavbar.nnavbar-noanim * {
  transition: none !important;
}


/* Runtime-flip schematu (hover na desktopie, klik taba w szufladzie
   992-1099) vs logo zapieczone serwerowo — invert tylko gdy plik nie
   pasuje do aktualnej klasy schematu (biale logo na bialym navbarze
   i ciemne na ciemnym). Selektor po src, zeby nie psuc stron, gdzie
   serwer juz dobral wlasciwy plik. Bez media query: ponizej 1100
   szuflada pokazuje ten sam .nnavbar-top-logo (<=991 z nnavbar-second
   jest ukryty, pasek ma wlasna regule na .nnavbar-mobile-logo). */
.nnavbar-color-white .nnavbar-top-logo[src*="logo-zen-white"] {
  filter: invert(1);
}
.nnavbar-color-black .nnavbar-top-logo:not([src*="logo-zen-white"]) {
  filter: invert(1);
}

/* Alert */

.nnavbar_alert-block {
  position: relative;
  background: #000;
  z-index: 99999999;
  padding: 20px 0;
  overflow: hidden;
}
.nnavbar_alert {
  width: 1312px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 30px;
  padding-left: 20px;
  position: relative;
}
.nnavbar_alert:before {
  content: '';
  position: absolute;
  background: url(../../header-new/images/alert-left-icon.svg) no-repeat center / contain;
  width: 200px;
  max-width: 20%;
  top: -60px;
  right: 0;
  aspect-ratio: 44 / 39;
  opacity: .2;
}
.nnavbar_alert-icon-box {
  line-height: 39px;
  width: 44px;
  height: 39px;
  position: relative;
  z-index: 10;
}
.nnavbar_alert-icon {
  width: 44px;
  height: 39px;
  vertical-align: top;
}
.nnavbar_alert-text {
  color: #FFF;
  font-size: 15px;
  flex: 1;
  position: relative;
  z-index: 10;
}

@media (max-width: 800px) {
  .nnavbar_alert {
    padding: 0;
  }
  .nnavbar_alert:before {
    max-width: 50%;
  }
}

@media (max-width: 700px) {
  .nnavbar_alert {
    gap: 10px;
  }
}

@media (max-width: 500px) {
  .nnavbar_alert-text {
    font-size: 14px;
  }
}

@media (max-width: 400px) {
  .nnavbar_alert-icon-box {
    display: none;
  }
}
/* ── Desktop (≥1100px): one 63px bar ──
   [logo] [categories of the page segment] … [Company · Help center · Log In] [language] [the other segment]
   The mobile markup is reused: the wrappers of the old top row are flattened with display: contents and the
   pieces ordered in the bar. Dropdowns open on :hover and keyboard focus (CSS only); Company shows its tab
   as a dropdown. --nnav-u is 1px from 1352px up and shrinks with the bar below (bar = viewport − 40px). */
@media (min-width: 1100px) {
  .nnavbar {
    container-type: inline-size;
    transition: transform .3s ease-in-out;
    --nnav-bar: #121212;
    --nnav-text: #FFF;
    --nnav-muted: #969494;
    --nnav-icon: #888;
    --nnav-accent: #22E243;
    --nnav-pill: #FFF;
    --nnav-pill-text: #000;
  }
  .nnavbar-color-white {
    --nnav-bar: #FFF;
    --nnav-text: #000;
    --nnav-muted: #B3AA9D;
    --nnav-icon: #20BB3B;
    --nnav-accent: #20BB3B;
    --nnav-pill: #000;
    --nnav-pill-text: #FFF;
  }
  /* scrolling down hides the bar (nnavbar.js), unless it is hovered or keyboard-focused */
  .nnavbar.nnavbar-hidden:not(:hover):not(:has(:focus-visible)) {
    transform: translateY(-100%);
  }
  /* pages that also move the menu with margin-top (html.ltb-nav-ready, html.np-nav-ready) set their own
     transition on it - keep both */
  .nnavbar.nnavbar-v2.nnavbar-v2 {
    transition: transform .3s ease-in-out, margin-top .3s ease-in-out;
  }

  .nnavbar-container {
    --nnav-u: min(1px, (100cqw - 40px) / 1312);
    position: relative;
    width: 1312px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    font-family: var(--font-family-master, Nunito, sans-serif);
  }
  .nnavbar-box {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 63px;
    padding: 0 calc(16 * var(--nnav-u));
    background: var(--nnav-bar);
    border-radius: 0 0 24px 24px;
  }
  /* the page above the bar (overscroll) */
  .nnavbar-box:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 200px;
    background: var(--nnav-bar);
  }

  .nnavbar-top,
  .nnavbar-top-box,
  .nnavbar-top-menu-container,
  .nnavbar-top-menu-overflow {
    display: contents;
  }
  .nnavbar-desktop-hamburger-box {
    display: none;
  }

  /* logo area (130) + 40 of air before the categories. Long translations: first the air shrinks; if the
     bar still overflows, the inline script after the header sets nnavbar-tight and category labels wrap. */
  .nnavbar-top-logo-box {
    order: 1;
    display: flex;
    flex: 0 20 calc(170 * var(--nnav-u));
    align-items: center;
    min-width: calc(146 * var(--nnav-u));
    padding-left: calc(3.697 * var(--nnav-u));
    pointer-events: none;
  }
  .nnavbar-top-logo-link {
    position: relative;
    z-index: 5;
    display: block;
    pointer-events: auto;
  }
  .nnavbar-top-logo {
    display: block;
    width: calc(122.606 * var(--nnav-u));
    height: auto;
  }
  .nnavbar-menu-block {
    order: 2;
    display: flex;
    flex: none;
    margin-right: calc(24 * var(--nnav-u));
  }
  .nnavbar-tight .nnavbar-menu-block,
  .nnavbar-tight .nnavbar-top-menu-right {
    flex: 0 1 auto;
  }
  .nnavbar-top-menu-right {
    order: 3;
    display: flex;
    flex: none;
    margin-left: auto;
  }
  .nnavbar-top-menu-left {
    order: 5;
    display: flex;
    flex: none;
    align-items: center;
    margin-left: calc(16 * var(--nnav-u));
  }

  /* the language: a 28px ring between the links and the pill; it opens the green language bar over the menu
     (nnavbar.js, as on header-2026) */
  .nnavbar-language-box {
    order: 4;
    display: flex;
    flex: none;
    align-items: center;
    margin-left: calc(16 * var(--nnav-u));
  }
  .nnavbar-language {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: calc(28 * var(--nnav-u));
    height: calc(28 * var(--nnav-u));
    padding: 0 calc(3 * var(--nnav-u));
    border: 1px solid #888;
    border-radius: 64px;
    background: none;
    color: #888;
    font-family: inherit;
    font-size: calc(14 * var(--nnav-u));
    font-weight: 700;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s ease-in-out, border-color .2s ease-in-out;
  }
  .nnavbar-language:hover,
  .nnavbar-language:focus-visible {
    border-color: var(--nnav-accent);
    color: var(--nnav-accent);
  }

  .nnavbar-container .nnavbar-menu-box {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nnavbar-container .nnavbar-menu-item {
    display: flex;
  }
  .nnavbar-container .nnavbar-menu-item-link {
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--nnav-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease-in-out;
  }
  .nnavbar-container .nnavbar-menu-item-box,
  .nnavbar-container .nnavbar-menu-item-normal {
    display: flex;
    align-items: center;
  }
  .nnavbar-container .nnavbar-menu-item-hover {
    display: none;
  }
  .nnavbar-container .nnavbar-menu-item-label {
    color: inherit;
    white-space: nowrap;
  }
  /* ↗ next to links */
  .nnavbar-container .nnavbar-menu-item-arrow {
    flex: none;
    width: calc(12 * var(--nnav-u));
    height: calc(12 * var(--nnav-u));
    background: var(--nnav-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.68903 1.94781H10.0522V8.91558M10.0522 1.94781L1.94781 10.0522' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.68903 1.94781H10.0522V8.91558M10.0522 1.94781L1.94781 10.0522' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .nnavbar-container .nnavbar-menu-item-arrow > span {
    display: none;
  }

  /* categories: the tab of the page segment (Company pages show Personal) */
  .nnavbar-menu-tab {
    display: none;
  }
  .nnavbar[data-nnavbar-segment="b2c"] .nnavbar-menu-tab[data-menu-type="b2c"],
  .nnavbar[data-nnavbar-segment="b2b"] .nnavbar-menu-tab[data-menu-type="b2b"],
  .nnavbar-menu-tab > .nnavbar-menu {
    display: flex;
  }
  .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box {
    gap: calc(16 * var(--nnav-u));
  }
  .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link {
    position: relative;
    z-index: 5;
  }
  .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link .nnavbar-menu-item-box {
    gap: calc(6 * var(--nnav-u));
  }
  .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link .nnavbar-menu-item-icon,
  .nnavbar-top .nnavbar-menu-item-icon {
    display: none;
  }
  .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link .nnavbar-menu-item-label,
  .nnavbar-top-menu-right .nnavbar-menu-item-label {
    font-size: calc(15 * var(--nnav-u));
    font-weight: 500;
    line-height: calc(20 * var(--nnav-u));
  }
  .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link .nnavbar-menu-item-label {
    letter-spacing: .02em;
  }
  .nnavbar-tight .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link .nnavbar-menu-item-label,
  .nnavbar-tight .nnavbar-top-menu-right .nnavbar-menu-item-label {
    white-space: normal;
  }
  /* ↗ (link) / ˅ (dropdown) right after the label text: a word joiner keeps it on the line of the last
     word when a label wraps; the 4px gap + 12px icon are the padding, the icon a mask at its right end */
  .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link .nnavbar-menu-item-label:after {
    content: '\2060';
    padding-left: calc(16 * var(--nnav-u));
    letter-spacing: 0;
    background: var(--nnav-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.68903 1.94781H10.0522V8.91558M10.0522 1.94781L1.94781 10.0522' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / calc(12 * var(--nnav-u)) calc(12 * var(--nnav-u)) no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.68903 1.94781H10.0522V8.91558M10.0522 1.94781L1.94781 10.0522' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / calc(12 * var(--nnav-u)) calc(12 * var(--nnav-u)) no-repeat;
  }
  .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item:has(> .nnavbar-submenu-block) > .nnavbar-menu-item-link .nnavbar-menu-item-label:after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3.65437 4.87347L6.00004 7.23263L8.4626 4.76895' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3.65437 4.87347L6.00004 7.23263L8.4626 4.76895' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item > .nnavbar-menu-item-link .nnavbar-menu-item-arrow {
    display: none;
  }
  .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item:hover > .nnavbar-menu-item-link,
  .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item:has(:focus-visible) > .nnavbar-menu-item-link,
  .nnavbar-top-menu-right .nnavbar-menu-item:hover > .nnavbar-menu-item-link,
  .nnavbar-top-menu-right .nnavbar-menu-item-link:focus-visible,
  .nnavbar-box:has(.nnavbar-menu-tab[data-menu-type="company"]:hover) .nnavbar-top-menu-right [data-menu-button-type="company"] > .nnavbar-menu-item-link {
    color: var(--nnav-accent);
  }
  /* an open dropdown stays open while the pointer crosses the bar; bar items (z 5) sit above it and above the panels (z 3–4) */
  .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item:has(> .nnavbar-submenu-block):hover:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    height: 63px;
  }

  /* Company · Help center · Log In / Register */
  .nnavbar-top-menu-right > .nnavbar-menu-box {
    gap: calc(16 * var(--nnav-u));
  }
  .nnavbar-top-menu-right .nnavbar-menu-item-link,
  .nnavbar-top-menu-left .nnavbar-menu-item-link {
    position: relative;
    z-index: 5;
  }

  /* the other segment as a pill */
  .nnavbar[data-nnavbar-segment="b2c"] .nnavbar-top-menu-left [data-menu-button-type="b2c"],
  .nnavbar[data-nnavbar-segment="b2b"] .nnavbar-top-menu-left [data-menu-button-type="b2b"] {
    display: none;
  }
  .nnavbar-top-menu-left .nnavbar-menu-item {
    align-items: center;
  }
  .nnavbar-top-menu-left .nnavbar-menu-item-link {
    min-width: calc(150 * var(--nnav-u));
    padding: 6px calc(11 * var(--nnav-u)) 5px calc(15 * var(--nnav-u));
    border: 1px solid var(--nnav-pill);
    border-radius: 16px;
    background: var(--nnav-pill);
    color: var(--nnav-pill-text);
  }
  .nnavbar-top-menu-left .nnavbar-menu-item-box {
    flex: 1;
    justify-content: space-between;
    gap: calc(4 * var(--nnav-u));
  }
  .nnavbar-top-menu-left .nnavbar-menu-item-box:after {
    content: '';
    flex: none;
    width: calc(12 * var(--nnav-u));
    height: calc(12 * var(--nnav-u));
    background: #22E243;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.68903 1.94781H10.0522V8.91558M10.0522 1.94781L1.94781 10.0522' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.68903 1.94781H10.0522V8.91558M10.0522 1.94781L1.94781 10.0522' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .nnavbar-top-menu-left .nnavbar-menu-item-label {
    font-size: calc(13 * var(--nnav-u));
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .015em;
    text-transform: uppercase;
  }

  /* dropdown panels: category submenus and the Company tab */
  .nnavbar-submenu-block,
  .nnavbar-menu-tab[data-menu-type="company"] {
    position: absolute;
    left: 0;
    right: 0;
    top: 39px;
    z-index: 3;
    padding: calc(24px + 28 * var(--nnav-u)) calc(56 * var(--nnav-u)) calc(48 * var(--nnav-u)) calc(52 * var(--nnav-u));
    background: var(--nnav-bar);
    border-radius: 0 0 24px 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease-in-out, visibility 0s linear .2s;
  }
  .nnavbar-menu-tab[data-menu-type="company"] {
    display: block;
  }
  .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item:hover > .nnavbar-submenu-block,
  .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box > .nnavbar-menu-item:has(:focus-visible) > .nnavbar-submenu-block,
  .nnavbar-box:has(.nnavbar-top-menu-right [data-menu-button-type="company"]:hover) .nnavbar-menu-tab[data-menu-type="company"],
  .nnavbar-menu-tab[data-menu-type="company"]:hover {
    z-index: 4;
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease-in-out, visibility 0s;
  }
  /* nnavbar.js: going straight from one open dropdown to another swaps them at once (cross-fading two panels let
     the page show through); opening and closing still fade */
  .nnavbar-dd-swap .nnavbar-submenu-block,
  .nnavbar-dd-swap .nnavbar-menu-tab[data-menu-type="company"] {
    transition: none !important;
  }
  /* the open panel covers the bar's bottom corners: they go square with it and round off again as it fades out,
     instead of popping out at the start of the fade */
  .nnavbar-box {
    transition: border-radius .2s ease-in-out;
  }
  .nnavbar-box:has(.nnavbar-menu-item:hover > .nnavbar-submenu-block, .nnavbar-menu-item-link:focus-visible + .nnavbar-submenu-block, .nnavbar-submenu-block :focus-visible, .nnavbar-top-menu-right [data-menu-button-type="company"]:hover, .nnavbar-menu-tab[data-menu-type="company"]:hover) {
    border-radius: 0;
  }
  .nnavbar-menu-tab[data-menu-type="company"] .nnavbar-menu {
    display: flex;
    align-items: flex-start;
    gap: calc(40 * var(--nnav-u));
  }
  .nnavbar-menu-tab[data-menu-type="company"] .nnavbar-menu > .nnavbar-menu-box {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    grid-auto-columns: calc(304 * var(--nnav-u));
    justify-content: start;
    row-gap: calc(24 * var(--nnav-u));
  }

  .nnavbar-submenu-padding {
    display: flex;
    align-items: flex-start;
    gap: calc(40 * var(--nnav-u));
  }
  .nnavbar-submenu {
    order: 1;
    display: flex;
  }
  .nnavbar-submenu > .nnavbar-submenu-box,
  .nnavbar-submenu-boxes {
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--nnav-u));
    width: calc(304 * var(--nnav-u));
    padding-right: calc(24 * var(--nnav-u));
  }
  .nnavbar-submenu-label {
    height: calc(8 * var(--nnav-u));
    margin: 0;
    font-family: inherit;
    font-size: calc(12 * var(--nnav-u));
    font-weight: 700;
    line-height: .752em;
    letter-spacing: calc(2 * var(--nnav-u));
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--nnav-muted);
  }
  .nnavbar-submenu-box > .nnavbar-menu-box {
    flex-direction: column;
    gap: calc(24 * var(--nnav-u));
  }

  /* link rows: icon 16 + label */
  .nnavbar-submenu-box .nnavbar-menu-item-box,
  .nnavbar-submenu-box .nnavbar-menu-item-normal,
  .nnavbar-menu-tab[data-menu-type="company"] .nnavbar-menu-item-box,
  .nnavbar-menu-tab[data-menu-type="company"] .nnavbar-menu-item-normal {
    gap: calc(12 * var(--nnav-u));
  }
  .nnavbar-submenu-box .nnavbar-menu-item-icon,
  .nnavbar-menu-tab[data-menu-type="company"] .nnavbar-menu-item-icon {
    display: block;
    flex: none;
    width: calc(16 * var(--nnav-u));
    height: calc(16 * var(--nnav-u));
    color: var(--nnav-icon);
    transition: color .2s ease-in-out;
  }
  .nnavbar-submenu-box .nnavbar-menu-item-icon svg,
  .nnavbar-menu-tab[data-menu-type="company"] .nnavbar-menu-item-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .nnavbar-container .nnavbar-menu-item-icon svg [fill^="#"] {
    fill: currentColor;
  }
  .nnavbar-container .nnavbar-menu-item-icon svg [stroke^="#"] {
    stroke: currentColor;
  }
  /* the cap height (not the glyph box) centred on the icon */
  .nnavbar-submenu-box .nnavbar-menu-item-label,
  .nnavbar-menu-tab[data-menu-type="company"] .nnavbar-menu-item-label {
    margin: calc(-1.5 * var(--nnav-u)) 0 calc(-2.5 * var(--nnav-u));
    font-size: calc(16 * var(--nnav-u));
    font-weight: 500;
    line-height: calc(20 * var(--nnav-u));
    white-space: normal;
  }
  .nnavbar-submenu-box .nnavbar-menu-item-link:hover,
  .nnavbar-submenu-box .nnavbar-menu-item-link:focus-visible,
  .nnavbar-submenu-box .nnavbar-menu-item-link:hover .nnavbar-menu-item-icon,
  .nnavbar-submenu-box .nnavbar-menu-item-link:focus-visible .nnavbar-menu-item-icon,
  .nnavbar-menu-tab[data-menu-type="company"] .nnavbar-menu-item-link:hover,
  .nnavbar-menu-tab[data-menu-type="company"] .nnavbar-menu-item-link:hover .nnavbar-menu-item-icon {
    color: var(--nnav-accent);
  }

  /* promo cards (child_boxes) as on header-2026: a bordered card with the icon, title, description and a VIEW
     pill; two cards side by side, their titles and descriptions at the same height */
  .nnavbar-submenu-boxes {
    flex-direction: row;
    align-items: stretch;
    gap: calc(32 * var(--nnav-u));
    width: auto;
    padding-right: 0;
  }
  .nnavbar-submenu-boxes > .nnavbar-submenu-box {
    display: flex;
    flex: 0 1 calc(280 * var(--nnav-u));
    min-width: 0;
  }
  .nnavbar-cbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    padding: calc(24 * var(--nnav-u)) calc(20 * var(--nnav-u));
    border: 1px solid #D6D6D6;
    border-radius: 16px;
    text-align: center;
  }
  .nnavbar-cbox-label-m,
  .nnavbar-cbox-link-m {
    display: none;
  }
  .nnavbar-cbox-icon {
    margin-bottom: calc(10 * var(--nnav-u));
  }
  .nnavbar-cbox-icon svg {
    display: block;
    width: calc(80 * var(--nnav-u));
    height: calc(80 * var(--nnav-u));
  }
  .nnavbar-cbox-label {
    font-size: calc(16 * var(--nnav-u));
    font-weight: 700;
    line-height: calc(24 * var(--nnav-u));
    text-transform: uppercase;
    color: var(--nnav-text);
  }
  .nnavbar-cbox-description {
    margin-top: calc(18 * var(--nnav-u));
    font-size: calc(12 * var(--nnav-u));
    font-weight: 500;
    line-height: calc(16 * var(--nnav-u));
    white-space: normal;
    color: var(--nnav-text);
  }
  .nnavbar-cbox-desc-hl {
    font-weight: 500;
  }
  .nnavbar-submenu-boxes:has(> .nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(48 * var(--nnav-u));
  }
  .nnavbar-submenu-boxes:has(> .nnavbar-submenu-box:nth-child(2)) .nnavbar-cbox-description {
    min-height: calc(32 * var(--nnav-u));
  }
  .nnavbar-cbox-link-block {
    margin-top: calc(18 * var(--nnav-u));
  }
  .nnavbar-cbox-link-d {
    display: inline-block;
    padding: calc(6 * var(--nnav-u)) calc(20 * var(--nnav-u));
    border: 1px solid #222;
    border-radius: 20px;
    font-size: calc(10 * var(--nnav-u));
    font-weight: 700;
    line-height: calc(16 * var(--nnav-u));
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: top;
    color: #222;
    transition: .2s all ease-in-out;
  }
  .nnavbar-color-black .nnavbar-cbox-link-d {
    border-color: #FFF;
    color: #FFF;
  }
  .nnavbar-cbox-link-d:hover,
  .nnavbar-cbox-link-d:focus-visible {
    border-color: #22E243;
    background: #22E243;
    color: #222;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, .15);
  }

  /* CTA box */
  .nnavbar-submenu-rbox {
    order: 2;
    display: flex;
    flex: none;
    flex-direction: column;
    gap: calc(32 * var(--nnav-u));
    min-width: calc(203 * var(--nnav-u));
    padding-top: calc(16 * var(--nnav-u));
  }
  .nnavbar-submenu-rbox-icon {
    display: none;
  }
  .nnavbar-submenu-rbox-label {
    margin: calc(-7 * var(--nnav-u)) 0 calc(-8 * var(--nnav-u));
    font-size: calc(24 * var(--nnav-u));
    font-style: italic;
    font-weight: 900;
    line-height: calc(32 * var(--nnav-u));
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--nnav-accent);
  }
  .nnavbar-submenu-rbox-label:first-line {
    color: var(--nnav-text);
  }
  /* a label without its own line break (Card Issuing) wraps at the box width instead of one long line */
  .nnavbar-submenu-rbox-wrap .nnavbar-submenu-rbox-label {
    min-width: min-content;
    max-width: calc(203 * var(--nnav-u));
    white-space: normal;
  }
  .nnavbar-submenu-rbox-button > a,
  .nnavbar-submenu-rbox-button > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(16 * var(--nnav-u));
    width: 100%;
    /* the label's cap height centred, not its glyph box (the arrow is moved back up below) */
    padding: calc(16.83 * var(--nnav-u)) calc(16 * var(--nnav-u)) calc(15.17 * var(--nnav-u));
    border: 0;
    border-radius: 64px;
    background: #22E243;
    color: #000;
    font-size: calc(14 * var(--nnav-u));
    font-weight: 800;
    line-height: .752em;
    letter-spacing: .005em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease-in-out;
  }
  .nnavbar-submenu-rbox-button > a:hover,
  .nnavbar-submenu-rbox-button > button:hover {
    background-color: #20BB3B;
  }
  .nnavbar-submenu-rbox-button > a:after,
  .nnavbar-submenu-rbox-button > button:after {
    content: '';
    position: relative;
    top: calc(-.83 * var(--nnav-u));
    flex: none;
    width: calc(12 * var(--nnav-u));
    height: calc(12 * var(--nnav-u));
    background: #000;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.68903 1.94781H10.0522V8.91558M10.0522 1.94781L1.94781 10.0522' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.68903 1.94781H10.0522V8.91558M10.0522 1.94781L1.94781 10.0522' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
  }
  /* the ↗ arrow turns to → */
  .nnavbar-submenu-rbox-button > a:hover:after,
  .nnavbar-submenu-rbox-button > button:hover:after,
  .nnavbar-submenu-rbox-button > a:focus-visible:after,
  .nnavbar-submenu-rbox-button > button:focus-visible:after {
    transform: rotate(45deg);
  }

  /* Company CTA, right of the links: a one-line claim (cap height to baseline, like the CTA box label), the
     tagline 16 under it, the button 32 under that and as wide as its label */
  .nnavbar-company-cta {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    margin-left: auto;
    padding-top: calc(16 * var(--nnav-u));
  }
  .nnavbar-company-cta-title {
    margin: calc(-7 * var(--nnav-u)) 0 calc(-8 * var(--nnav-u));
    font-size: calc(24 * var(--nnav-u));
    font-style: italic;
    font-weight: 900;
    line-height: calc(32 * var(--nnav-u));
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--nnav-text);
  }
  .nnavbar-company-cta-green {
    color: var(--nnav-accent);
  }
  .nnavbar-company-cta-desc {
    margin: calc(6 * var(--nnav-u)) 0 calc(-10.73 * var(--nnav-u));
    font-size: calc(16 * var(--nnav-u));
    font-weight: 500;
    line-height: calc(32 * var(--nnav-u));
    color: var(--nnav-text);
  }
  .nnavbar-company-cta-button {
    margin-top: calc(32 * var(--nnav-u));
  }
  .nnavbar-company-cta-button > button {
    width: auto;
    gap: calc(32 * var(--nnav-u));
    padding-left: calc(20 * var(--nnav-u));
    font-weight: 900;
    letter-spacing: calc(.42 * var(--nnav-u));
  }

  /* ── www 2.0 bar (nnavbar-v2-right): [logo] … [categories] [the other segment ↗] [Company ˅], 23 apart.
     Help center, Log In and the language are not in this bar (the mobile menu keeps them). ── */
  .nnavbar-v2-right .nnavbar-box {
    padding: 0 calc(24 * var(--nnav-u)) 0 calc(16 * var(--nnav-u));
  }
  .nnavbar-v2-right .nnavbar-top-logo-box {
    flex: none;
    width: calc(130 * var(--nnav-u));
    min-width: 0;
    margin-right: calc(23 * var(--nnav-u));
  }
  .nnavbar-v2-right .nnavbar-menu-block {
    margin: 0 0 0 auto;
  }
  .nnavbar-v2-right .nnavbar-menu-tab:not([data-menu-type="company"]) .nnavbar-menu > .nnavbar-menu-box {
    gap: calc(23 * var(--nnav-u));
  }
  .nnavbar-v2-right .nnavbar-top-menu-left {
    order: 3;
    align-items: stretch;
    margin-left: calc(23 * var(--nnav-u));
  }
  .nnavbar-v2-right .nnavbar-top-menu-right {
    order: 4;
    margin-left: calc(23 * var(--nnav-u));
  }
  .nnavbar-v2-right .nnavbar-language-box,
  .nnavbar-v2-right .nnavbar-top-menu-right .nnavbar-menu-item:not([data-menu-button-type="company"]),
  .nnavbar-v2-right .nnavbar-top-menu-left .nnavbar-menu-item-box:after,
  .nnavbar-v2-right .nnavbar-menu-item-label-m {
    display: none;
  }
  .nnavbar-v2-right .nnavbar-menu-item-label-d {
    display: inline;
  }
  /* Help center (a Business-only Company item) also in the Personal Company dropdown, since this bar has no Help center link */
  .nnavbar-v2-right[data-nnavbar-segment="b2c"] .nnavbar-menu-tab[data-menu-type="company"] .nnavbar-menu-item[data-nnavbar-only="b2b"] {
    display: flex !important;
  }
  .nnavbar-v2-right .nnavbar-menu-tab[data-menu-type="company"] .nnavbar-menu-item-arrow {
    display: none;
  }
  .nnavbar-tight.nnavbar-v2-right .nnavbar-top-menu-left {
    flex: 0 1 auto;
  }
  .nnavbar-v2-right .nnavbar-submenu-block,
  .nnavbar-v2-right .nnavbar-menu-tab[data-menu-type="company"] {
    padding-top: calc(24px + 32 * var(--nnav-u));
  }

  /* the other segment and Company: plain links like the categories */
  .nnavbar-v2-right .nnavbar-top-menu-left .nnavbar-menu-item-link {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--nnav-text);
  }
  .nnavbar-v2-right .nnavbar-top-menu-left .nnavbar-menu-item:hover > .nnavbar-menu-item-link,
  .nnavbar-v2-right .nnavbar-top-menu-left .nnavbar-menu-item-link:focus-visible {
    color: var(--nnav-accent);
  }
  .nnavbar-v2-right .nnavbar-top-menu-left .nnavbar-menu-item-label,
  .nnavbar-v2-right .nnavbar-top-menu-right .nnavbar-menu-item-label {
    font-size: calc(15 * var(--nnav-u));
    font-weight: 500;
    line-height: calc(20 * var(--nnav-u));
    letter-spacing: .02em;
    text-transform: none;
  }
  .nnavbar-tight.nnavbar-v2-right .nnavbar-top-menu-left .nnavbar-menu-item-label {
    white-space: normal;
  }
  .nnavbar-v2-right .nnavbar-top-menu-left .nnavbar-menu-item-label:after,
  .nnavbar-v2-right .nnavbar-top-menu-right .nnavbar-menu-item-label:after {
    content: '\2060';
    padding-left: calc(16 * var(--nnav-u));
    letter-spacing: 0;
    background: var(--nnav-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.68903 1.94781H10.0522V8.91558M10.0522 1.94781L1.94781 10.0522' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / calc(12 * var(--nnav-u)) calc(12 * var(--nnav-u)) no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.68903 1.94781H10.0522V8.91558M10.0522 1.94781L1.94781 10.0522' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / calc(12 * var(--nnav-u)) calc(12 * var(--nnav-u)) no-repeat;
  }
  .nnavbar-v2-right .nnavbar-top-menu-right .nnavbar-menu-item-label:after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3.65437 4.87347L6.00004 7.23263L8.4626 4.76895' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3.65437 4.87347L6.00004 7.23263L8.4626 4.76895' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  /* nnavbar-v2-clear (homepage): no bar background at the very top of the page (nnavbar-stop) until the bar is
     hovered or focused; a scrolled page gets the bar colour. The colour is the :after layer fading its opacity like
     the panels (a background-color fade runs on the main thread and lags behind them on the busy homepage). At the
     top a dropdown starts right under the bar (no overlap), so bar and panel fade in as one, and the bar loses its
     bottom corners while one is open (the rule above the dropdown panels). */
  .nnavbar-v2-clear .nnavbar-box {
    background: none;
  }
  .nnavbar-v2-clear .nnavbar-box:after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--nnav-bar);
    pointer-events: none;
    transition: opacity .2s ease-in-out;
  }
  .nnavbar-v2-clear .nnavbar-box:before {
    transition: opacity .2s ease-in-out;
  }
  .nnavbar-v2-clear.nnavbar-stop .nnavbar-box:not(:hover):not(:has(:focus-visible)):after,
  .nnavbar-v2-clear.nnavbar-stop .nnavbar-box:not(:hover):not(:has(:focus-visible)):before {
    opacity: 0;
  }
  .nnavbar-v2-right.nnavbar-v2-clear.nnavbar-stop .nnavbar-submenu-block,
  .nnavbar-v2-right.nnavbar-v2-clear.nnavbar-stop .nnavbar-menu-tab[data-menu-type="company"] {
    top: 63px;
    padding-top: calc(32 * var(--nnav-u));
  }
}

/* ── Mobile (≤1099px): one dark bar — logo left, hamburger right; hides while scrolling down
   (nnavbar-hidden). The open menu keeps its own layout (centred logo, no bar). ── */
@media (max-width: 1099px) {
  /* closing (nnavbar-mobile-closing, 400ms): the panel background folds into the shape of the bar while the menu
     fades over it; closed: the bar fades in on top and the folded background goes out 200ms later */
  .nnavbar.nnavbar-v2:not(.nnavbar-mobile-opened):before {
    top: 0;
    height: 50px;
    border-radius: 0 0 26px 26px;
    background: linear-gradient(#0F0F0F, #0F0F0F);
  }
  .nnavbar.nnavbar-v2.nnavbar-color-white:not(.nnavbar-mobile-opened):before {
    background: linear-gradient(#F7F7F3, #F7F7F3);
  }
  .nnavbar.nnavbar-v2:not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing):before {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0s linear .2s !important;
  }
  .nnavbar-v2.nnavbar-mobile-closing .nnavbar-mobile {
    opacity: 0;
    transition: opacity .2s ease-in-out;
  }
  .nnavbar-v2:not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 50px;
    padding: 0 16px;
    border-radius: 0 0 26px 26px;
    background: #0F0F0F;
    transition: transform .3s ease-in-out, opacity .2s ease-in-out;
  }
  .nnavbar-v2.nnavbar-color-white:not(.nnavbar-mobile-opened) .nnavbar-mobile {
    background: #F7F7F3;
  }
  .nnavbar-v2.nnavbar-hidden:not(.nnavbar-mobile-opened) .nnavbar-mobile {
    transform: translateY(-100%);
  }
  .nnavbar-v2:not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile-logo-box {
    position: static;
    width: auto;
    line-height: 0;
    transform: none;
    transition: none;
  }
  .nnavbar-v2:not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile-logo-box a {
    display: block;
  }
  .nnavbar-v2:not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile-logo {
    display: block;
    width: 120.13px;
    height: auto;
    transition: none;
  }
  .nnavbar-v2.nnavbar-color-white .nnavbar-mobile-logo {
    filter: invert(1);
  }
  .nnavbar-v2:not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile-hamburger-box {
    position: static;
    width: 40px;
    height: 40px;
  }
  .nnavbar-v2 .nnavbar-mobile-hamburger-box:before,
  .nnavbar-v2 .nnavbar-mobile-hamburger:before,
  .nnavbar-v2 .nnavbar-mobile-hamburger:after {
    display: none;
  }
  .nnavbar-v2 .nnavbar-mobile-hamburger {
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #22E243;
    cursor: pointer;
  }
  .nnavbar-v2.nnavbar-color-white .nnavbar-mobile-hamburger {
    color: #20BB3B;
  }
  .nnavbar-mobile-hamburger-icon {
    display: block;
  }
}

/* ── Mobile www 2.0 (nnavbar-v2-right): at the very top (nnavbar-stop) the square bar — logo left, hamburger right;
   scrolled, only the hamburger stays, as a green circle 32 from the right and 31.5 from the top (no hiding on the
   way down). The homepage (nnavbar-v2-clear) has no bar colour: logo + green circle. ── */
@media (max-width: 1099px) {
  .nnavbar.nnavbar-v2.nnavbar-v2-right:not(.nnavbar-mobile-opened):before {
    border-radius: 0;
  }
  /* closing the menu where no bar is shown: its background folds away to the top */
  .nnavbar.nnavbar-v2.nnavbar-v2-clear:not(.nnavbar-mobile-opened):before,
  .nnavbar.nnavbar-v2.nnavbar-v2-right:not(.nnavbar-stop):not(.nnavbar-mobile-opened):before {
    height: 0;
  }
  .nnavbar-v2-right:not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile {
    border-radius: 0;
    background: none;
  }
  .nnavbar-v2.nnavbar-v2-right.nnavbar-hidden:not(.nnavbar-mobile-opened) .nnavbar-mobile {
    transform: none;
  }
  /* the bar colour is a layer, so it can go while the hamburger stays */
  .nnavbar-v2-right:not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile:before {
    content: '';
    position: absolute;
    inset: 0;
    background: #0F0F0F;
    transition: transform .3s ease-in-out;
  }
  .nnavbar-v2-right.nnavbar-color-white:not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile:before {
    background: #F7F7F3;
  }
  .nnavbar-v2-clear:not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile:before {
    display: none;
  }
  .nnavbar-v2-right:not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile-logo-box,
  .nnavbar-v2-right:not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile-hamburger-box {
    position: relative;
    inset: auto;
    z-index: 1;
    transition: transform .3s ease-in-out;
  }
  /* not under the fading close button while the menu closes; it comes in with the bar */
  .nnavbar-v2-right.nnavbar-mobile-closing .nnavbar-mobile-hamburger-box {
    opacity: 0;
  }
  .nnavbar-v2-right .nnavbar-mobile-hamburger {
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color .3s ease-in-out, color .3s ease-in-out, box-shadow .3s ease-in-out;
  }

  /* the homepage at the very top: 56px, logo 20/12, hamburger 16/12 */
  .nnavbar-v2-right.nnavbar-v2-clear:not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile {
    align-items: flex-start;
    height: 56px;
    padding: 12px 16px 8px 20px;
  }
  /* the logo centred in its 41.108px frame */
  .nnavbar-v2-right.nnavbar-v2-clear:not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile-logo-box {
    margin-top: 6.92px;
  }

  /* the green circle: the homepage, and every page once scrolled */
  .nnavbar-v2-clear:not(.nnavbar-mobile-opened) .nnavbar-mobile-hamburger,
  .nnavbar-v2-right:not(.nnavbar-stop):not(.nnavbar-mobile-opened) .nnavbar-mobile-hamburger {
    background-color: #22E243;
    color: #000;
    box-shadow: 0 0 12.3px 2px rgba(0, 0, 0, .15);
  }

  /* scrolled: the bar colour and the logo slide away, the hamburger moves to its floating place */
  .nnavbar-v2-right:not(.nnavbar-stop):not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile:before {
    transform: translateY(-100%);
  }
  .nnavbar-v2-right:not(.nnavbar-stop):not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile-logo-box {
    transform: translateY(-60px);
  }
  .nnavbar-v2-right:not(.nnavbar-stop):not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile-hamburger-box {
    transform: translate(-16px, 26.5px);
  }
  .nnavbar-v2-right.nnavbar-v2-clear:not(.nnavbar-stop):not(.nnavbar-mobile-opened):not(.nnavbar-mobile-closing) .nnavbar-mobile-hamburger-box {
    transform: translate(-16px, 19.5px);
  }
}

/* 992–1099: the side panel has its own logo; the bar's one stayed dimmed in the middle of the page */
@media (min-width: 992px) and (max-width: 1099px) {
  .nnavbar-v2-right.nnavbar-mobile-opened .nnavbar-mobile-logo-box {
    opacity: 0;
    pointer-events: none;
  }
}

/* open menu (≤991): logo left, the language centred between the logo and the close button (992–1099 already has
   it so in its side panel) */
@media (max-width: 991px) {
  .nnavbar-v2-right.nnavbar-mobile-opened .nnavbar-mobile-logo-box,
  .nnavbar-v2-right.nnavbar-mobile-closing .nnavbar-mobile-logo-box {
    left: 32px;
    width: auto;
    text-align: left;
    transform: none;
  }
  /* .nnavbar-top-box (its containing block) is centred: 50% + 27.22 puts the 40px ring halfway between the logo end
     (32 + 134.44) and the close button (24 from the right) */
  .nnavbar-v2-right .nnavbar-language-box {
    left: calc(50% + 27.22px);
  }
}