html{
  background:#000;
  scrollbar-gutter:auto;
  scrollbar-width:none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{display:none}

#stoAppHeader{
  --sto-header-space:clamp(16px,2.5vw,24px);
  box-sizing:border-box;
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  height:65px;
  min-height:65px;
  margin:0;
  padding:0;
  overflow:visible;
  color:#fff;
  background:rgba(0,0,0,.96);
  border:0;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 1px 0 rgba(0,0,0,.18);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Arial,sans-serif;
  view-transition-name:sto-app-header;
}

#stoAppHeader *,
#stoAppHeader *::before,
#stoAppHeader *::after{box-sizing:border-box}

#stoAppHeader button,
#stoAppHeader select{font-family:inherit}

#stoAppHeader .nav-inner{
  box-sizing:border-box;
  position:relative;
  width:100%;
  max-width:1200px;
  height:65px;
  min-height:65px;
  margin:0 auto;
  padding:10px var(--sto-header-space);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

#stoAppHeader .brand{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  margin:0;
  padding:0;
  color:#fff;
  text-decoration:none;
}

#stoAppHeader .brand img{
  display:block;
  width:auto;
  max-width:none;
  height:40px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  flex:0 0 auto;
  object-fit:contain;
}

#stoAppHeader .brand .name{
  margin:0;
  overflow:hidden;
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Arial,sans-serif;
  font-size:1.18rem;
  font-weight:800;
  line-height:.94;
  letter-spacing:-.02em;
  text-overflow:ellipsis;
  white-space:nowrap;
  -webkit-mask-image:none;
  mask-image:none;
}

#stoAppHeader .brand-ops{color:#e39000}

#stoAppHeader .links{
  display:flex;
  align-items:center;
  gap:22px;
}

#stoAppHeader .links > a,
#stoAppHeader .nav-feature-trigger{
  width:auto;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  color:#fff;
  background:transparent;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Arial,sans-serif;
  font-size:.9rem;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  opacity:1;
  transition:color .18s ease,background .18s ease,opacity .18s ease;
}

#stoAppHeader .links > a:hover,
#stoAppHeader .nav-feature-trigger:hover{color:#fff;opacity:.72}

#stoAppHeader .nav-dropdown{display:flex;align-items:center}

#stoAppHeader .nav-feature-trigger{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}

#stoAppHeader .nav-feature-trigger i{font-size:.72rem;transition:transform .2s ease}
#stoAppHeader .nav-dropdown.open .nav-feature-trigger i{color:#e39000;transform:rotate(180deg)}

#stoAppHeader .mega-menu{
  --sto-mega-max-height:min(76vh,640px);
  position:fixed;
  top:65px;
  left:0;
  z-index:1010;
  width:100%;
  max-height:var(--sto-mega-max-height);
  margin:0;
  padding:22px max(24px,calc((100vw - 1240px)/2));
  overflow-y:auto;
  overscroll-behavior:contain;
  border:0;
  border-bottom:2px solid rgba(227,144,0,.42);
  border-radius:0;
  color:#1d1d1f;
  background:#fff;
  box-shadow:0 18px 38px rgba(0,0,0,.10);
  transform:translateY(8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}

#stoAppHeader .nav-dropdown.open .mega-menu{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

#stoAppHeader .mega-menu-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
  gap:28px 44px;
  width:100%;
  max-width:1240px;
  min-height:0;
  margin:0 auto;
}

#stoAppHeader .mega-menu-col{display:grid;align-content:start;gap:3px;min-height:0}

#stoAppHeader .mega-menu-heading{
  position:relative;
  margin:0 0 2px;
  padding:0 6px 12px 31px;
  color:#1d1d1f;
  font-size:.69rem;
  font-weight:750;
  line-height:1.2;
  letter-spacing:.045em;
  text-transform:uppercase;
}

#stoAppHeader .mega-menu-heading::before{
  content:"";
  position:absolute;
  top:.42em;
  left:6px;
  width:14px;
  height:2px;
  background:#e39000;
}

#stoAppHeader .mega-item{
  appearance:none;
  display:grid;
  grid-template-columns:19px minmax(0,1fr);
  align-items:flex-start;
  gap:12px;
  width:100%;
  min-height:0;
  margin:0;
  padding:9px 6px;
  overflow:visible;
  border:0;
  border-radius:4px;
  color:#1d1d1f;
  background:transparent;
  text-align:left;
  text-decoration:none;
  opacity:1;
  transform:none;
  cursor:pointer;
  transition:background .16s ease;
}

#stoAppHeader .mega-item:hover,
#stoAppHeader .mega-item:focus-visible{
  border:0;
  color:#1d1d1f;
  background:#fff8ed;
  outline:1px solid #f0d3a6;
  outline-offset:-1px;
  opacity:1;
  transform:none;
}

#stoAppHeader .mega-item-icon{
  display:grid;
  place-items:center;
  width:19px;
  height:19px;
  margin:2px 0 0;
  padding:0;
  border:0;
  border-radius:0;
  color:#b66d00;
  background:transparent;
  box-shadow:none;
  font-size:.77rem;
}

#stoAppHeader .mega-item-copy{display:grid;gap:3px;min-width:0}

#stoAppHeader .mega-item-title{
  color:#161617;
  font-size:.84rem;
  font-weight:650;
  line-height:1.28;
}

#stoAppHeader .mega-item:hover .mega-item-title,
#stoAppHeader .mega-item:focus-visible .mega-item-title{color:#7a4500}

#stoAppHeader .mega-item-desc{
  display:block;
  min-height:0;
  overflow:visible;
  color:#5f5f64;
  font-size:.76rem;
  font-weight:400;
  line-height:1.42;
  text-overflow:clip;
}

#stoAppHeader .lang-switch{display:inline-flex;align-items:center;gap:8px;margin-left:8px}

#stoAppHeader .lang-select{
  appearance:none;
  margin:0;
  padding:9px 13px;
  border:1px solid #343438;
  border-radius:999px;
  color:#fff;
  background:#111;
  font-size:.86rem;
  cursor:pointer;
}

#stoAppHeader .links > a.nav-trial-cta{
  padding:9px 16px;
  border-radius:999px;
  color:#111;
  background:#fff;
}

#stoAppHeader .links > a.nav-trial-cta:hover{color:#000;background:#ededf0;opacity:1}

#stoAppHeader .menu-btn{
  appearance:none;
  display:none;
  align-items:center;
  gap:8px;
  min-height:40px;
  margin:0;
  padding:9px 12px;
  border:1px solid #343438;
  border-radius:999px;
  color:#fff;
  background:#111;
  font-size:.9rem;
  cursor:pointer;
}

#stoAppHeader .menu-icon{position:relative;display:inline-block;width:18px;height:1.5px;background:#fff}
#stoAppHeader .menu-icon::before,
#stoAppHeader .menu-icon::after{content:"";position:absolute;right:0;left:0;height:1.5px;background:#fff}
#stoAppHeader .menu-icon::before{top:-6px}
#stoAppHeader .menu-icon::after{top:6px}

@media (max-width:768px){
  #stoAppHeader .nav-inner{
    height:65px;
    min-height:65px;
    padding:10px clamp(14px,4vw,22px);
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
  #stoAppHeader .brand img{height:40px}
  #stoAppHeader .brand .name{
    max-width:none;
    font-size:1.18rem;
    -webkit-mask-image:none;
    mask-image:none;
  }
}

@media (max-width:880px){
  #stoAppHeader .menu-btn{display:inline-flex}
  #stoAppHeader .links{
    position:fixed;
    top:65px;
    right:var(--sto-header-space);
    bottom:max(12px,env(safe-area-inset-bottom));
    left:var(--sto-header-space);
    z-index:1005;
    flex-direction:column;
    gap:12px;
    max-height:calc(100dvh - 72px - max(12px,env(safe-area-inset-bottom)));
    padding:14px;
    overflow-y:auto;
    overscroll-behavior:contain;
    border:1px solid #d9d9dc;
    border-radius:12px;
    color:#1d1d1f;
    background:#fff;
    box-shadow:0 18px 42px rgba(0,0,0,.16);
    transform:scale(.98);
    transform-origin:top right;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
    -webkit-overflow-scrolling:touch;
  }
  #stoAppHeader .links.open{transform:scale(1);opacity:1;visibility:visible;pointer-events:auto}
  #stoAppHeader .links > a,
  #stoAppHeader .nav-feature-trigger{
    width:100%;
    padding:10px 12px;
    border-radius:10px;
    color:#1d1d1f;
    background:transparent;
  }
  #stoAppHeader .links > a:hover,
  #stoAppHeader .nav-feature-trigger:hover{color:#1d1d1f;opacity:1}
  #stoAppHeader .links > a:active,
  #stoAppHeader .nav-feature-trigger:active{background:#f5f5f7}
  #stoAppHeader .links > a.nav-trial-cta{color:#fff;background:#1d1d1f}
  #stoAppHeader .links > a.nav-trial-cta:hover{color:#fff;background:#000}
  #stoAppHeader .lang-switch{align-self:flex-end}
  #stoAppHeader .nav-dropdown{display:block;width:100%}
  #stoAppHeader .nav-feature-trigger{justify-content:space-between}
  #stoAppHeader .mega-menu{
    position:static;
    width:100%;
    max-height:0;
    margin-top:8px;
    padding:0;
    overflow:hidden;
    border:0;
    border-top:1px solid #e5e5e7;
    border-radius:0;
    background:#fff;
    box-shadow:none;
    transform:none;
  }
  #stoAppHeader .nav-dropdown.open .mega-menu{
    max-height:min(62dvh,540px);
    padding:16px 4px 6px;
    overflow-y:auto;
    transform:none;
  }
  #stoAppHeader .mega-menu-grid{grid-template-columns:1fr;gap:14px}
  #stoAppHeader .mega-menu-heading{margin-bottom:0;padding:8px 8px 6px 39px}
  #stoAppHeader .mega-menu-heading::before{top:1.05em;left:8px}
  #stoAppHeader .mega-item{padding:9px 8px}
}

@supports not (height:100dvh){
  @media (max-width:880px){
    #stoAppHeader .links{max-height:calc(100vh - 84px)}
  }
}

@media (min-width:881px) and (max-width:1120px){
  #stoAppHeader .mega-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 42px}
}

@media (prefers-reduced-motion:reduce){
  #stoAppHeader .mega-menu,
  #stoAppHeader .links,
  #stoAppHeader .nav-feature-trigger i{transition:none}
}