body.marketing-page:not([data-theme="dark"]),
body.cms-page-render:not([data-theme="dark"]){
  --topbar-btn-bg: var(--marketing-topbar-btn-bg, transparent);
  --topbar-btn-border: var(--marketing-border, var(--qr-card-border));
  --topbar-btn-border-hover: color-mix(in oklab, var(--marketing-primary) 32%, transparent);
  --topbar-btn-bg-hover: color-mix(in oklab, var(--marketing-primary) 8%, transparent);
  --topbar-focus-ring: var(--marketing-ring, var(--qr-ring));
  --topbar-drop-bg: var(--marketing-surface, var(--qr-card));
  --topbar-drop-border: var(--marketing-border, var(--qr-card-border));
  --topbar-text: var(--marketing-text-on-surface, var(--qr-text));
  --drop-bg: var(--topbar-drop-bg);
  --drop-border: var(--topbar-drop-border);
  --drop-color: var(--topbar-text);
}
body.marketing-page[data-theme="dark"],
body.cms-page-render[data-theme="dark"]{
  --topbar-btn-bg: var(--marketing-topbar-btn-bg-dark, var(--marketing-topbar-btn-bg, #1f232a));
  --topbar-btn-border: var(--marketing-border, var(--qr-card-border));
  --topbar-btn-border-hover: color-mix(in oklab, var(--marketing-primary) 60%, transparent);
  --topbar-btn-bg-hover: color-mix(in oklab, var(--marketing-primary) 22%, transparent);
  --topbar-focus-ring: var(--marketing-ring, var(--qr-ring));
  --topbar-drop-bg: var(--marketing-surface-dark, var(--qr-card));
  --topbar-drop-border: var(--marketing-border, var(--qr-card-border));
  --topbar-text: var(--marketing-text-on-surface-dark, var(--qr-text));
  --drop-bg: var(--topbar-drop-bg);
  --drop-border: var(--topbar-drop-border);
  --drop-color: var(--topbar-text);
}
@media (max-width: 640px) {
  body.marketing-page,
  body.cms-page-render{
    --topbar-drop-bg: var(--marketing-surface, #ffffff);
  }
  body.marketing-page[data-theme="dark"],
  body.marketing-page.dark-mode,
  body.cms-page-render[data-theme="dark"],
  body.cms-page-render.dark-mode{
    --topbar-drop-bg: var(--marketing-surface-dark, #0a0d12);
  }
  body.marketing-page.high-contrast,
  body.cms-page-render.high-contrast{
    --topbar-drop-bg: var(--marketing-topbar-drop-bg-contrast-light, #ffffff);
  }
  body.marketing-page[data-theme="dark"].high-contrast,
  body.marketing-page.dark-mode.high-contrast,
  body.cms-page-render[data-theme="dark"].high-contrast,
  body.cms-page-render.dark-mode.high-contrast{
    --topbar-drop-bg: var(--marketing-topbar-drop-bg-contrast-dark, #000000);
  }
}
.marketing-page .qr-topbar,
.cms-page-render .qr-topbar{
  padding-top: env(safe-area-inset-top);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) #menuDrop{
  font-family: var(--marketing-font-stack);
  font-size: var(--marketing-body);
  line-height: var(--marketing-body-line-height);
  border-radius: calc(var(--marketing-card-radius, 10px) * 0.8);
  padding: calc(var(--marketing-section-gap, 24px) * 0.25);
  box-shadow: 0 12px 30px color-mix(in oklab, var(--marketing-primary) 18%, transparent);
}

:is(body, .marketing-scope):is(.marketing-page, .cms-page-render) #menuDrop .git-btn{
  font-family: inherit;
  font-size: inherit;
  border-radius: calc(var(--marketing-card-radius, 10px) * 0.6);
  min-height: 44px;
}

body.cms-page-render{
  --qr-card: var(--marketing-surface-glass);
  --qr-card-border: color-mix(in oklab, var(--marketing-primary) 18%, transparent);
  --qr-ring: color-mix(in oklab, var(--marketing-primary) 45%, transparent);
  --qr-text: var(--marketing-text, var(--marketing-text-default));
  --qr-landing-topbar-bg: var(--marketing-topbar-light, color-mix(in oklab, var(--marketing-surface, var(--marketing-surface-default)) 92%, var(--marketing-surface-glass) 8%));
}

body.cms-page-render[data-theme="dark"]{
  --qr-card: var(--marketing-surface-glass-dark);
  --qr-card-border: color-mix(in oklab, var(--marketing-primary) 30%, transparent);
  --qr-ring: color-mix(in oklab, var(--marketing-primary) 55%, transparent);
  --qr-text: color-mix(in oklab, var(--marketing-white) 85%, var(--marketing-primary) 15%);
  --qr-landing-topbar-bg: var(--marketing-topbar-dark, color-mix(in oklab, var(--marketing-surface, var(--marketing-surface-default)) 90%, var(--marketing-surface-glass-dark) 10%));
}
body.marketing-page.high-contrast,
body.cms-page-render.high-contrast{
  --topbar-text: var(--marketing-topbar-text-contrast-light, #0a0a0a);
  --topbar-drop-bg: var(--marketing-topbar-drop-bg-contrast-light, #ffffff);
  --topbar-drop-border: var(--marketing-topbar-drop-border-contrast-light, #000000);
  --topbar-btn-border: var(--marketing-topbar-btn-border-contrast-light, #000000);
  --topbar-btn-border-hover: var(--marketing-topbar-btn-border-hover-contrast-light, #000000);
  --topbar-btn-bg-hover: var(--marketing-topbar-btn-bg-hover-contrast-light, #e6e6e6);
  --topbar-focus-ring: var(--marketing-topbar-focus-ring-contrast-light, rgba(0,120,255,0.6));
  --drop-bg: var(--topbar-drop-bg);
  --drop-border: var(--topbar-drop-border);
  --drop-color: var(--topbar-text);
}
body.marketing-page[data-theme="dark"].high-contrast,
body.cms-page-render[data-theme="dark"].high-contrast{
  --topbar-text: var(--marketing-topbar-text-contrast-dark, #ffffff);
  --topbar-drop-bg: var(--marketing-topbar-drop-bg-contrast-dark, #000000);
  --topbar-drop-border: var(--marketing-topbar-drop-border-contrast-dark, #ffffff);
  --topbar-btn-border: var(--marketing-topbar-btn-border-contrast-dark, #ffffff);
  --topbar-btn-border-hover: var(--marketing-topbar-btn-border-hover-contrast-dark, #ffffff);
  --topbar-btn-bg-hover: var(--marketing-topbar-btn-bg-hover-contrast-dark, rgba(255,255,255,0.16));
  --topbar-focus-ring: var(--marketing-topbar-focus-ring-contrast-dark, rgba(140,200,255,0.8));
  --drop-bg: var(--topbar-drop-bg);
  --drop-border: var(--topbar-drop-border);
  --drop-color: var(--topbar-text);
}

body.marketing-page .git-btn,
body.cms-page-render .git-btn{
  width:var(--topbar-height);
  height:var(--topbar-height);
  max-width:var(--topbar-height);
  max-height:var(--topbar-height);
  min-width:var(--topbar-height);
  min-height:var(--topbar-height);
  padding:0;
  border-radius:6px;
  border:1px solid var(--topbar-btn-border);
  color:var(--topbar-text);
  background:var(--topbar-btn-bg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  cursor:pointer;
  transition:background .12s,border-color .12s,box-shadow .12s;
}

body.marketing-page .git-btn:hover,
body.cms-page-render .git-btn:hover{
  background:var(--topbar-btn-bg-hover);
  border-color:var(--topbar-btn-border-hover);
}

body.marketing-page .git-btn:focus,
body.cms-page-render .git-btn:focus{
  outline:none;
  box-shadow:0 0 0 3px var(--topbar-focus-ring);
}

body.marketing-page .git-btn svg,
body.cms-page-render .git-btn svg{
  width:24px;
  height:24px;
}

body.marketing-page .config-menu #configMenuToggle.git-btn,
body.cms-page-render .config-menu #configMenuToggle.git-btn{
  border-radius:0 0 6px 6px;
  border:none;
  background:transparent;
}

body.marketing-page .config-menu #configMenuToggle.git-btn:hover,
body.marketing-page .config-menu #configMenuToggle.git-btn:focus,
body.marketing-page .config-menu #configMenuToggle.git-btn:active,
body.cms-page-render .config-menu #configMenuToggle.git-btn:hover,
body.cms-page-render .config-menu #configMenuToggle.git-btn:focus,
body.cms-page-render .config-menu #configMenuToggle.git-btn:active{
  border:none;
  background:transparent;
}

body.marketing-page .uk-dropdown,
body.marketing-page .uk-drop,
body.marketing-page .uk-offcanvas-bar,
body.cms-page-render .uk-dropdown,
body.cms-page-render .uk-drop,
body.cms-page-render .uk-offcanvas-bar{
  background-color: var(--drop-bg, var(--marketing-surface));
  color: var(--drop-color, var(--topbar-text, var(--marketing-text, #0a0a0a)));
  border: 1px solid var(--drop-border, var(--qr-card-border));
  --uk-inverse: unset;
}

body.marketing-page #menuDrop,
body.cms-page-render #menuDrop{
  background:var(--topbar-drop-bg);
  border:1px solid var(--topbar-drop-border);
  border-radius:8px;
  padding:8px;
  color:var(--topbar-text);
  min-width:auto !important;
  width:fit-content !important;
  transform-origin: top right;
}

body.marketing-page .uk-dropdown-nav,
body.cms-page-render .uk-dropdown-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}

body.marketing-page .uk-dropdown-nav,
body.marketing-page .uk-dropdown-nav *,
body.cms-page-render .uk-dropdown-nav,
body.cms-page-render .uk-dropdown-nav *{
  color:var(--topbar-text);
}

body.marketing-page .uk-offcanvas-bar .uk-nav-default > li > a,
body.marketing-page .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a,
body.cms-page-render .uk-offcanvas-bar .uk-nav-default > li > a,
body.cms-page-render .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a{
  color: var(--drop-color, var(--topbar-text, var(--marketing-text, #0a0a0a)));
}

body.marketing-page .uk-offcanvas-bar .uk-nav-default > li > a:hover,
body.marketing-page .uk-offcanvas-bar .uk-nav-default > li > a:focus,
body.marketing-page .uk-offcanvas-bar .uk-nav-default > li > a:active,
body.marketing-page .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:hover,
body.marketing-page .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:focus,
body.marketing-page .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:active,
body.cms-page-render .uk-offcanvas-bar .uk-nav-default > li > a:hover,
body.cms-page-render .uk-offcanvas-bar .uk-nav-default > li > a:focus,
body.cms-page-render .uk-offcanvas-bar .uk-nav-default > li > a:active,
body.cms-page-render .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:hover,
body.cms-page-render .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:focus,
body.cms-page-render .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:active{
  background-color: color-mix(in oklab, var(--topbar-text) 8%, transparent);
  color: var(--topbar-text);
}

body.marketing-page .uk-offcanvas-bar .uk-nav-default > li.uk-active > a,
body.cms-page-render .uk-offcanvas-bar .uk-nav-default > li.uk-active > a{
  background-color: color-mix(in oklab, var(--topbar-text) 12%, transparent);
  color: var(--topbar-text);
}

.lang-option{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  min-width:160px;
  min-height:48px;
  padding:0 12px;
  height:auto;
}
.marketing-page .qr-topbar .lang-option.git-btn,
.cms-page-render .qr-topbar .lang-option.git-btn{
  width:100%;
  min-width:160px;
  min-height:48px;
  padding:0 12px;
  height:auto;
}
.lang-option__icon{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:16px;
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 0 0 1px color-mix(in oklab, var(--topbar-text) 25%, transparent);
}
.lang-option__svg{
  display:block;
  width:100%;
  height:100%;
}
.lang-option__label{
  flex:1;
  text-align:left;
}
body.marketing-page.high-contrast .lang-option__icon,
body.marketing-page[data-theme="dark"].high-contrast .lang-option__icon,
body.cms-page-render.high-contrast .lang-option__icon,
body.cms-page-render[data-theme="dark"].high-contrast .lang-option__icon{
  box-shadow:0 0 0 1px currentColor;
}

.cms-page-render .qr-topbar{
  background: var(--qr-landing-topbar-bg);
  backdrop-filter: blur(8px);
  color: var(--qr-text);
  min-height:64px;
  height:64px;
  border-bottom: 1px solid var(--qr-card-border);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.cms-page-render .qr-topbar nav.topbar{
  --topbar-height: 64px;
}
.cms-page-render .qr-topbar .uk-navbar,
.cms-page-render .qr-topbar .uk-navbar-container{
  background: var(--qr-landing-topbar-bg);
}
@media (max-width: 959px) {
  .cms-page-render .qr-topbar{
    min-height:56px;
    height:56px;
  }
  .cms-page-render .qr-topbar nav.topbar{
    --topbar-height: 56px;
  }
}
.cms-page-render .qr-topbar .uk-navbar-container,
.cms-page-render .qr-topbar .uk-navbar-right,
.cms-page-render .qr-topbar .uk-navbar-center{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:12px;
}
.cms-page-render .qr-topbar .uk-navbar-right{
  flex:1 1 auto;
  min-width:0;
  justify-content:flex-end;
}
.cms-page-render .qr-topbar .uk-navbar-right .uk-navbar-nav,
.cms-page-render .qr-topbar .uk-navbar-center .uk-navbar-nav{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  flex-wrap:nowrap;
  gap:8px;
}
.cms-page-render .qr-topbar .uk-navbar-right .uk-navbar-nav{
  justify-content:flex-end;
}
.cms-page-render .qr-topbar .uk-navbar-center .uk-navbar-nav{
  justify-content:center;
}
.cms-page-render .qr-topbar .uk-navbar-right .uk-navbar-nav>li{
  flex:0 0 auto;
}
.cms-page-render .qr-topbar .top-cta,
.cms-page-render .qr-topbar .config-menu{
  flex:0 0 auto;
}
.cms-page-render .qr-topbar .uk-navbar-nav>li>a{
  color:var(--qr-text)!important;
  font-weight:500;
  opacity:.9;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 10px;
  line-height:38px;
  height:40px;
  border:1px solid transparent;
  border-radius:6px;
  transition:opacity .2s,background .12s,border-color .12s;
}
.cms-page-render .qr-topbar .uk-navbar-nav>li>a:hover,
.cms-page-render .qr-topbar .uk-navbar-nav>li.uk-active>a{
  opacity:1;
  background:color-mix(in oklab,var(--qr-text) 8%,transparent);
  border-color:color-mix(in oklab,var(--qr-text) 40%,transparent);
  text-decoration:none;
}
.cms-page-render .qr-topbar .uk-navbar-nav>li>a:focus-visible,
.cms-page-render .qr-topbar #configMenuToggle:focus-visible,
.cms-page-render .qr-topbar .uk-navbar-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--qr-ring);
  border-radius:6px;
}
.cms-page-render .qr-topbar .uk-navbar-toggle{
  color:var(--qr-text)!important;
}
.cms-page-render .qr-topbar .git-btn{
  width:48px;
  height:48px;
}
