﻿header{font-size:16px;min-height:60px;line-height:60px;position:fixed;left:0;top:0;width:100vw;z-index:15;font-family:"Manrope",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background-color:rgba(0,0,0,0);z-index:999;border-bottom:1px solid rgba(0,0,0,0)}header .header-container{position:relative;display:flex;flex-direction:row-reverse;justify-content:flex-end;z-index:4;max-width:1200px;height:100%;margin:0 auto;box-sizing:border-box;flex-wrap:wrap}header .mh-nav{padding-left:140px;position:relative;display:flex;flex-grow:1}header #take-to-app{display:none;padding:20px;background-color:#fff;position:fixed;top:59px;left:0;right:0;bottom:0;flex-grow:1;overflow-y:hidden}header #take-to-app .p1{font-size:46px;line-height:60px;margin-bottom:20px}header #take-to-app .p2{font-size:16px;line-height:26px;margin-bottom:20px;font-weight:500}header #take-to-app a{width:100%;margin-bottom:40px}header #take-to-app img{width:100%}header .mh-nav-menus{margin:0px}header .mh-nav-menuItem{display:inline-block;margin-right:56px}header .mh-nav-menuItem.log{position:absolute;top:0;right:-100px;bottom:0;margin-right:0;display:flex;align-items:center}header .mh-nav-menuItem.log div{font-size:14px}header .mh-nav-menuItem.log i{padding-right:8px;color:inherit}header .mh-nav-menuItem:not(.log)>a{display:inline-block;height:60px;font-weight:600;font-size:16px}header .mh-nav-menuItem .arrow{display:inline-block;height:60px;padding-right:10px;position:relative;color:#1a273e;line-height:60px}header .mh-nav-menuItem .arrow:before{position:absolute;right:-9px;top:0px;font-family:"iconfont";content:"";font-size:11px;display:inline-block;color:#202437;font-weight:600}header .mh-nav-menuItem .arrow.no-caret{padding-right:0}header .mh-nav-menuItem .arrow.no-caret:before{display:none}header .mh-menu-list{position:absolute;top:61px;left:50%;background:#fff;border-bottom-right-radius:5px;border-bottom-left-radius:5px;display:none;box-shadow:0px 2px 4px 0px rgba(0,0,0,.157);overflow:hidden;padding:20px;box-sizing:border-box;justify-content:flex-start;flex-direction:column}header .mh-menu-list.products{left:100px;max-width:420px}header .mh-menu-list.solutions{left:10px;padding:0px;flex-direction:row}@media(min-width: calc(800px + 1px)){header .mh-menu-list.resources{transform:translateX(-72px);max-width:462px}header .mh-menu-list.partners{transform:translateX(78px);max-width:462px}header .mh-menu-list.company{transform:translateX(212px);max-width:462px}}header .mh-solutions-tab{max-width:390px;padding:20px;box-sizing:border-box}header .mh-solutions-tab .item-title{font-weight:500}@media(min-width: calc(800px + 1px)){header .mh-solutions-tab{border-right:dashed 1px #ebecf1}}header .mh-solutions-wrap{display:flex;flex-direction:row;padding:20px;box-sizing:border-box;max-width:810px}header .mh-solutions-wrap .mh-menu-item{max-width:380px}header .mh-solutions-list{flex-wrap:wrap;display:none;height:fit-content;align-content:flex-start;align-items:flex-start}header .mh-solutions-list.website-services .mh-menu-item{flex:0 0 50%;width:50%;max-width:380px}header .mh-menu-item{padding:15px 20px;box-sizing:border-box;display:block;-webkit-tap-highlight-color:rgba(59,92,222,.05);border-radius:8px;cursor:pointer}header .mh-menu-item:hover .item-title::after{content:"";font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:12px;color:#000;font-weight:400;margin-left:8px}header .mh-menu-item:hover .item-desc{color:#202437}@media(min-width: calc(800px + 1px)){header .mh-menu-item.active{background-color:rgba(59,92,222,.05)}header .mh-menu-item:hover{background-color:rgba(59,92,222,.05)}}header .mh-menu-item a{font-size:18px;font-family:"Manrope";color:#414676;height:auto;line-height:1;min-width:165px;font-weight:600;text-align:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;white-space:nowrap}header .mh-menu-item .item-title{font-size:16px;color:#202437;font-weight:700;line-height:20px;display:flex;align-items:center;line-height:20px;margin-bottom:10px}header .mh-menu-item .item-title img{display:none}header .mh-menu-item .item-title .arrow-icon{width:auto;height:16px;margin-left:4px}header .mh-menu-item .item-desc{color:#515666;font-size:14px;font-weight:400;line-height:20px}header .mh-menu-item .li-nav-new{display:inline-block;background:linear-gradient(135deg, #6366f1, #8b5cf6);color:#fff;font-size:10px;font-weight:700;line-height:1;padding:3px 6px;border-radius:4px;margin-left:8px;letter-spacing:.5px;vertical-align:middle}header .mh-menu-icon{display:none}header .mh-login-wrap{margin-right:30px}header .mh-logo{position:absolute;top:0;left:0px;height:60px}header .mh-logo a{display:flex;height:100%;align-items:center}header .mh-logo img{height:25px}header .mh-logo-blue{display:block}header .mh-logo-normal{display:none}header .mh-account{font-weight:500;display:none}@media(max-width: 800px){header .mh-account{display:none !important}}header .mh-account-info{display:flex;align-items:center;cursor:pointer;position:relative}header .mh-account-info .info-avatar{width:36px;height:36px;border-radius:50%;margin-right:10px}header .mh-account-info .info-name::after{font-family:"iconfont";content:"";padding-left:8px}header .mh-account-info.show .info-name::after{content:""}header .mh-account-profile{position:absolute;border-radius:10px;border:1px solid #f3f3f3;background:#fff;box-shadow:0px 2px 5px 0px rgba(0,0,0,.1);padding:15px 20px;box-sizing:border-box;top:59px;right:0px;line-height:normal;font-size:14px;min-width:240px;display:none}header .mh-account-profile a{color:#202437;line-height:normal}header .mh-account-profile a:hover{color:#3b5cde}header .mh-account-profile .profile-info{padding-bottom:15px}header .mh-account-profile .profile-action{padding-top:11px;border-top:solid 1px #f6f7fb}header .mh-account-profile .profile-action .account-btn{cursor:pointer;margin-right:20px}header .mh-account-profile .profile-action .logout-btn{cursor:pointer}header .mh-rad-wrap{text-align:center;display:none}header .mh-icon-logo{width:84px;height:60px;background-repeat:no-repeat;background-size:contain;background-position:center center}header .mh-button-login{font-size:14px}header .mh-button-login:hover{text-decoration:underline}header .mh-button-register{padding:8px 15px;font-size:14px}header.dark .mh-icon-logo path{color:#fff;fill:currentColor}header.dark .mh-nav-menuItem .arrow{color:#fff}header.dark .mh-nav-menuItem .arrow:before{color:#fff}header.dark .mh-menu-icon{color:#fff}header.dark .mh-button-login{color:#fff}header.dark .mh-button-register{border:1px solid #fff;color:#fff}header.dark .mh-button-register:hover{color:#3b5cde;background-color:#fff}header.dark .mh-button-register:active{color:#3b5cde;background-color:#f6f7fb}header.dark .mh-button-register.disabled{color:#fff;background:none;opacity:.4}header.dark .mh-account .info-name{color:#fff}header:hover,header.light,header.leave,header.menu-show{transition:background-color .5s ease 0s,color .5s ease 0s,border-color .5s ease 0s}header:hover .mh-icon-logo path,header.light .mh-icon-logo path,header.leave .mh-icon-logo path,header.menu-show .mh-icon-logo path{color:#3b5cde;fill:currentColor}header:hover .mh-button-login,header.light .mh-button-login,header.leave .mh-button-login,header.menu-show .mh-button-login{color:#3b5cde}header:hover .mh-button-register,header.light .mh-button-register,header.leave .mh-button-register,header.menu-show .mh-button-register{border:1px solid #3b5cde;color:#3b5cde}header:hover .mh-button-register:hover,header.light .mh-button-register:hover,header.leave .mh-button-register:hover,header.menu-show .mh-button-register:hover{color:#fff;background-color:#3b5cde}header:hover .mh-button-register:active,header.light .mh-button-register:active,header.leave .mh-button-register:active,header.menu-show .mh-button-register:active{color:#fff;background-color:#3553c8}header:hover .mh-button-register.disabled,header.light .mh-button-register.disabled,header.leave .mh-button-register.disabled,header.menu-show .mh-button-register.disabled{color:#3b5cde;background:none;opacity:.4}header:hover .mh-nav-menuItem .arrow,header.light .mh-nav-menuItem .arrow,header.leave .mh-nav-menuItem .arrow,header.menu-show .mh-nav-menuItem .arrow{color:#1a273e}header:hover .mh-nav-menuItem .arrow:before,header.light .mh-nav-menuItem .arrow:before,header.leave .mh-nav-menuItem .arrow:before,header.menu-show .mh-nav-menuItem .arrow:before{color:#1a273e;border-color:#1a273e #1a273e rgba(0,0,0,0) rgba(0,0,0,0)}header:hover .nav-menu-show>.arrow,header.light .nav-menu-show>.arrow,header.leave .nav-menu-show>.arrow,header.menu-show .nav-menu-show>.arrow{color:#3b5cde}header:hover .nav-menu-show>.arrow:before,header.light .nav-menu-show>.arrow:before,header.leave .nav-menu-show>.arrow:before,header.menu-show .nav-menu-show>.arrow:before{content:"";color:#3b5cde}header:hover .nav-menu-show .mh-menu-list,header.light .nav-menu-show .mh-menu-list,header.leave .nav-menu-show .mh-menu-list,header.menu-show .nav-menu-show .mh-menu-list{display:flex;animation:navMenuIn .4s ease both}header:hover .mh-account .info-name,header.light .mh-account .info-name,header.leave .mh-account .info-name,header.menu-show .mh-account .info-name{color:#202437}header:hover .mh-account .info-name::after,header.light .mh-account .info-name::after,header.leave .mh-account .info-name::after,header.menu-show .mh-account .info-name::after{color:#202437}header:hover .mh-menu-icon,header.light .mh-menu-icon,header.leave .mh-menu-icon,header.menu-show .mh-menu-icon{color:#3b5cde}header:hover,header.leave,header.menu-show{background-color:#fff;border-color:#ebecf1}.header__skip{height:1px;left:-1000px;overflow:hidden;position:absolute;text-align:left;top:-1000px;width:1px}.header__skip:hover,.header__skip:focus,.header__skip:active{height:auto;left:0;overflow:visible;top:0;width:auto}.hs-tools-menu{display:none}@media(max-width: 1200px){header .header-container{width:1200px}}@media(max-width: 800px){header{height:60px}header .header-container{width:100%;flex-direction:row;align-items:center;height:60px;padding:0 20px}header .mh-nav{padding-left:0px;display:none;position:fixed;left:0px;right:0px;top:59px;background-color:#fff;bottom:0px;overflow-y:scroll}header .mh-nav-menus{line-height:20px}header .mh-nav-menus li{width:100%;margin:0px}header .mh-nav-menuItem a.iconfont.icon-fontarrow_up:before{content:""}header .mh-nav-menuItem{padding:0px 20px}header .mh-nav-menuItem:hover .arrow{-webkit-tap-highlight-color:rgba(59,92,222,.05)}header .mh-nav-menuItem.log{top:auto;right:0;bottom:0px;padding:0px;position:fixed;background-color:#fff}header .mh-nav-menuItem.company{padding-bottom:130px}header .mh-nav-menuItem .arrow{width:100%;font-weight:800}header .mh-nav-menuItem .arrow::before{position:absolute;right:0px}header .mh-menu-list{display:none;position:static;padding:0px;box-shadow:none;transform:none;max-width:100%}header .mh-menu-item{padding:8px 20px}header .mh-menu-item.active{background-color:rgba(0,0,0,0)}header .mh-menu-icon{display:block;color:#3b5cde}header .mh-menu-icon .iconfont{font-size:20px}header .mh-solutions-tab{padding:0px}header .mh-solutions-tab .mh-menu-item{padding-top:8px}header .mh-solutions-wrap{display:none;position:fixed;top:60px;bottom:0px;z-index:20;background-color:#fff;padding:0px;left:0px;right:0px}header .mh-solutions-list{flex-direction:column;width:100%}header .mh-solutions-list .mh-menu-item{padding:8px 30px;max-width:100%;width:100%}header .mh-logo{left:20px}header .mh-login-wrap,header .mh-register-wrap{display:none !important}header .mh-rad-wrap{display:block;width:100%;padding:20px;border-top:solid 1px #e1e2e6}header .mh-rad-text{text-align:center;margin-bottom:15px;font-family:"SF UI Tex";line-height:20px}header .mh-rad-text span{font-weight:700;color:#202437}header .mh-rad-btn{width:165px;font-size:14px}header .mh-icon-close{display:none;color:#515666}header .mh-icon-switch{display:block}header.menu-show .mh-icon-switch{display:none}header.menu-show .mh-icon-close{display:block}header .mh-menu-list .mh-menu-item:hover,header .mh-menu-list .mh-menu-item.active{border-radius:0px}}@keyframes navMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ===== top announcement banner =====================================
   The header is position:fixed and transparent, with page heroes sitting
   underneath it. The banner is opaque, so `html.has-top-banner` adds the
   same height as body padding to push content clear of it. One variable
   drives both, so the two can't drift apart. */
:root { --top-banner-h: 54px; }
html.has-top-banner body { padding-top: var(--top-banner-h); }
header .header-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  height: var(--top-banner-h);
  padding: 0 56px;
  box-sizing: border-box;
  background-color: #161a48;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}
header .header-tip .tip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  min-width: 0;
}
header .header-tip .tip-brand {
  flex: none;
  display: block;
  height: 17px;
  width: auto;
  /* optical alignment against the message and pill */
  position: relative;
  top: -2px;
}
header .header-tip .tip-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* sits 2px low so it optically centres against the logo and pill */
  position: relative;
  top: 1px;
}
header .header-tip .tip-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 20px;
  /* 10% white over the navy, so the label itself has to be white */
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
header .header-tip .tip-cta:hover {
  background: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}
header .header-tip .tip-close {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: color 0.2s ease;
}
header .header-tip .tip-close:hover { color: rgba(255, 255, 255, 0.6); }
header .header-tip .tip-close svg { display: block; width: 100%; height: 100%; }
@media (max-width: 800px) {
  /* one row: logo, message, arrow. the "Learn More" pill becomes the arrow so
     the link (and its accessible name) is reused rather than duplicated. */
  :root { --top-banner-h: 68px; }
  header .header-tip {
    height: var(--top-banner-h);
    padding: 0 36px 0 16px;
    font-size: 12px;
    text-align: left;
  }
  /* row 1: logo + arrow.  row 2: the message, full width beneath them */
  header .header-tip .tip-inner {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  header .header-tip .tip-brand { height: 16px; top: 0; }
  header .header-tip .tip-text {
    top: 0;
    order: 3;
    flex: 1 1 100%;
    white-space: normal;
    font-size: 16px;
    line-height: 1.25;
  }
  header .header-tip .tip-cta {
    /* the link is stretched over the whole banner, so tapping anywhere opens
       it. It stays a real anchor (middle-click, long-press, screen readers),
       and font-size:0 hides the label while keeping it as the accessible name.
       Absolute, so it leaves the flex flow and the arrow is simply gone. */
    position: absolute;
    inset: 0;
    z-index: 1;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 0;
  }
  header .header-tip .tip-cta:hover { background: none; }
  header .header-tip .tip-cta::after { content: none; }
  /* above the stretched link, so dismissing doesn't follow it */
  header .header-tip .tip-close { right: 10px; z-index: 2; }
}

/* Mobile header.
   - height:auto for every theme: mobile pins header{height:60px} (desktop uses
     min-height), so the banner overflowed the painted box and the nav row sat
     outside it.
   - the solid white bar is for light-theme pages only. On dark-theme pages
     (e.g. the home page) the nav stays a transparent overlay on the hero with
     white marks, and the mobile block's `.mh-menu-icon{color:#3b5cde}` has to
     be overridden to keep the hamburger white.
   Desktop untouched. */
@media (max-width: 800px) {
  header.mp-header {
    height: auto;
  }
  header.mp-header:not(.dark) {
    background-color: #fff;
    border-color: #ebecf1;
  }
  header.mp-header:not(.dark) .mh-icon-logo path {
    color: #3b5cde;
    fill: currentColor;
  }
  header.mp-header:not(.dark) .mh-menu-icon,
  header.mp-header:not(.dark) .mh-button-login {
    color: #3b5cde;
  }
  /* dark theme: transparent bar, white marks — but only while unscrolled.
     .leave (added past 60px) and .menu-show turn the bar white, and the
     existing rules then colour the marks blue; these must not override that,
     or you get white-on-white. */
  header.mp-header.dark:not(.leave):not(.menu-show):not(:hover) .mh-icon-logo path {
    color: #fff;
    fill: currentColor;
  }
  header.mp-header.dark:not(.leave):not(.menu-show):not(:hover) .mh-menu-icon,
  header.mp-header.dark:not(.leave):not(.menu-show):not(:hover) .mh-button-login {
    color: #fff;
  }
}

/* the mobile panels are anchored to the viewport at top:59/60px, which assumed
   a 60px header. With the banner they must clear it too. */
@media (max-width: 800px) {
  html.has-top-banner header .mh-nav,
  html.has-top-banner header #take-to-app {
    top: calc(var(--top-banner-h) + 59px);
  }
  html.has-top-banner header .mh-solutions-wrap {
    top: calc(var(--top-banner-h) + 60px);
  }
}
