/* menu css */
ul.submenu {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 20px 10px #ffffff21;
    position: absolute;
    top: 32px;
    min-width: 300px;
    translate: -10% 0px;
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    gap: 0 !important;
}

ul.submenu {
    padding-top: 0px !important;
}

.main_menu ul li.menu_item {
    position: relative;
}

.main_menu ul.submenu li.menu_item {
    position: relative;
    padding: 15px;
    border-bottom: 1px solid #f5f5f5;
}

ul.submenu li.menu_item a {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.submenu_desc h3 {
    font-size: 14px;
    text-align: left;
}

.submenu_desc p {
    font-size: 12px;
}

.main_menu ul li.menu_item:hover ul.submenu {
    opacity: 1;
    visibility: visible;
    top: 40px;
}

span.submenu_arrw {
    display: none;
}

.main_menu ul.submenu.one_col {
    min-width: initial;
}

@media screen and (max-width: 1024px) {
    html.body_menu, body.body_menu {
        overflow: hidden;
    }

    span.submenu_arrw {
        display: inline-block;
        padding: 10px;
    }

    ul.submenu, .main_menu ul li.menu_item:hover ul.submenu {
        position: absolute;
        height: 0;
        top: 0;
        left: -100%;
        opacity: 0;
        visibility: hidden;
    }

    .main_menu ul li.menu_item.parent_menu {
        text-align: left;
        border-bottom: 1px solid #ccc;
    }

    .main_menu ul li.menu_item.sub_open ul.submenu {
        height: auto;
        opacity: 1;
        visibility: visible;
    }
}
/* menu css */
.HomepageLogoGrid .Section__layout {
    --sectionPaddingTop: 0
}

.SiteHeader {
    --siteMenuTransition: 250ms;
    --siteMenuArrowSpacing: 13px;
    --siteMenuArrowOffset: 0;
    --userLogoColor: var(--navColor);
    --tabletOverlayDisplay: none;
    position: relative;
    z-index: 100;
    background-color: var(--backgroundColor)
}

@media (max-width:599px) {
    .SiteHeader {
        --tabletOverlayDisplay: none
    }
}

@media (max-width:1019px) {
    .SiteHeader {
        --desktopNavDisplay: none
    }
}

@media (min-width:1020px) {
    .SiteHeader {
        --mobileNavDisplay: none;
        --tabletOverlayDisplay: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .SiteHeader {
        --siteMenuTransition: 1ms
    }
}

.SiteHeader--noTransitions {
    --siteMenuTransition: 0ms
}

.SiteHeader.variant--Overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: none
}

@media (min-width:900px) {
    .SiteHeader.variant--Fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%
    }
}

.SiteHeader--hasGuides:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    margin: 0;
    border: none;
    background: linear-gradient(90deg,var(--guideDashedColor),var(--guideDashedColor) 50%,transparent 0,transparent);
    background-size: 8px 1px;
    content: ""
}

.SiteHeader--excludesNav {
    pointer-events: none
}

    .SiteHeader--excludesNav .SiteHeader__logo {
        pointer-events: auto
    }

.SiteHeader.theme--Transparent:after {
    display: none
}

.SiteHeader__guidesContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.SiteHeader.theme--Transparent .SiteHeader__guidesContainer {
    display: none
}

.SiteHeader__container {
    position: relative;
    max-width: calc(var(--columnPaddingNormal)*2 + var(--layoutWidth));
    margin: 0 auto;
    padding: 0 var(--columnPaddingNormal);
    overflow: hidden
}

.SiteHeader__navContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 68px;
    padding: 32px var(--columnPaddingNormal) 12px
}

.HubPage .SiteHeader__navContainer {
    padding-left: 0;
    padding-right: 0
}

@media (min-width:900px) {
    .HubPage .SiteHeader__navContainer, .SiteHeader__navContainer {
        padding: 12px var(--columnPaddingNormal)
    }
}

@media (pointer:fine) {
    .SiteHeader__logo {
        transition: var(--hoverTransition);
        transition-property: color,opacity
    }

    @media (-webkit-min-device-pixel-ratio:2) {
        .SiteHeader__logo {
            will-change: opacity,color
        }
    }

    .SiteHeader__logo:hover {
        color: var(--navHoverColor);
        opacity: var(--navHoverOpacity)
    }
}

.SiteHeader__logoLink {
    display: block;
    outline: none;
    padding: 4px;
    margin: -4px
}

.keyboard-navigation .SiteHeader__logoLink:focus {
    box-shadow: var(--focusBoxShadow);
    border-radius: 2px
}

.SiteHeader__ctaNav {
    display: var(--desktopNavDisplay,initial);
    white-space: nowrap;
    overflow: hidden;
    justify-content: flex-end
}

.SiteHeader__menuNav {
    display: var(--mobileNavDisplay,initial)
}

.SiteHeader__tabletOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10,37,64,.05);
    opacity: 0;
    transition: opacity ease-out var(--siteMenuTransition);
    display: var(--tabletOverlayDisplay);
    z-index: 0
}

@media (min-width:600px) and (max-width:899px) {
    .SiteHeader--mobileMenuVisible .SiteHeader__tabletOverlay {
        --tabletOverlayDisplay: block;
        opacity: 1
    }
}

.SiteHeader__mobileMenuMask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: var(--mobileNavDisplay,flex);
    justify-content: flex-end;
    transform: translateY(-100%);
    transition: ease-out var(--siteMenuTransition);
    overflow: hidden;
    z-index: 1;
    pointer-events: none
}

.SiteHeader--mobileMenuVisible .SiteHeader__mobileMenuMask {
    transform: translateY(0)
}

.SiteHeader__mobileMenu {
    opacity: 0;
    transform: translateY(100%);
    transform-origin: 50% 0;
    transition: visibility step-end var(--siteMenuTransition),transform ease-out var(--siteMenuTransition),opacity ease-out var(--siteMenuTransition);
    pointer-events: none;
    visibility: hidden
}

.SiteHeader--mobileMenuVisible .SiteHeader__mobileMenu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: visibility step-start var(--siteMenuTransition),transform ease-out var(--siteMenuTransition),opacity ease-out var(--siteMenuTransition)
}

@media (min-width:900px) {
    .SiteHeader__mobileMenu {
        display: none
    }
}

.SiteHeader__menuContainer {
    display: var(--desktopNavDisplay,block);
    position: absolute;
    top: calc(100% - 1px - var(--siteMenuArrowSpacing));
    left: 0;
    width: 100%;
    height: 1000px;
    z-index: 1;
    pointer-events: none;
    perspective: 2000px;
    overflow: hidden;
    opacity: 0;
    transition-property: opacity;
    transition: var(--siteMenuTransition)
}

.SiteHeader--dropdownVisible .SiteHeader__menuContainer {
    opacity: 1
}

.SiteHeader__menuShadowContainer {
    position: absolute;
    inset: 0
}

.SiteHeader__menu {
    position: absolute;
    top: 0;
    left: 0
}

.SiteHeader--hasContactSales .SiteHeader__navContainer {
    -moz-column-gap: 20px;
    column-gap: 20px
}

html[lang^=de] .SiteHeader--hasContactSales .SiteHeader__navContainer, html[lang^=es] .SiteHeader--hasContactSales .SiteHeader__navContainer, html[lang^=fr] .SiteHeader--hasContactSales .SiteHeader__navContainer, html[lang^=id] .SiteHeader--hasContactSales .SiteHeader__navContainer, html[lang^=nl] .SiteHeader--hasContactSales .SiteHeader__navContainer {
    -moz-column-gap: 16px;
    column-gap: 16px
}

.SiteHeader--hasContactSales .SiteHeader__ctaNav {
    display: var(--desktopNavDisplay,flex);
    flex-grow: 1
}

.SiteHeader--hasContactSales .SiteHeader__ctaNavContainer {
    display: flex;
    margin-top: 3px;
    -moz-column-gap: 16px;
    column-gap: 16px
}

.SiteHeader--hasContactSales .SiteHeader__leftCta.SiteHeader__leftCta--isHidden {
    position: absolute;
    visibility: hidden;
    pointer-events: none
}

.SiteHeader--hasContactSales .SiteHeader__ctaNav .variant--Link {
    color: var(--linkColor)
}

@media (min-width:900px) {
    .MktRoot .SiteHeader--isSticky {
        --easeOutSine: cubic-bezier(0.61,1,0.88,1)
    }

        .MktRoot .SiteHeader--isSticky .SiteHeader__stickyShadow {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            transform: translateY(-100%);
            transition: opacity .25s var(--easeOutSine);
            box-shadow: 0 0 60px rgba(50,50,93,.18);
            pointer-events: none;
            opacity: 0
        }

        .MktRoot .SiteHeader--isSticky.SiteHeader--opaque {
            --accentColor: #96f;
            --navColor: #0a2540;
            --navHoverColor: #0a2540;
            --linkColor: #0a2540;
            --linkHoverColor: #0a2540;
            --linkHoverOpacity: 0.6;
            --buttonColor: #635bff;
            --menuBgColor: #eff3f9
        }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteHeader__stickyContainer {
                background: #fff
            }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteMenu__card.Card {
                box-shadow: 0 20px 60px rgba(50,50,93,.18)
            }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteSubMenu {
                --siteSubMenuBackgroundColor: var(--menuBgColor)
            }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteHeader__ctaNav .variant--Button {
                color: var(--textColor);
                background-color: var(--buttonColor)
            }

                .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteHeader__ctaNav .variant--Button:hover {
                    background-color: var(--linkColor)
                }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteHeader__ctaNav .variant--Link {
                color: var(--linkColor)
            }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteHeader__stickyShadow {
                transform: translateY(0)
            }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteMenu {
                padding-top: 0;
                height: calc(var(--siteMenuHeight))
            }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteMenu__card.Card {
                --cardBackground: var(--menuBgColor);
                border-top-left-radius: 0;
                border-top-right-radius: 0
            }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteHeader__menuContainer {
                top: 100%;
                overflow: visible
            }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteHeader__menuShadowContainer {
                overflow: hidden
            }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteMenu__sectionWrapper {
                margin: 4px
            }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteMenuSection__body {
                border-radius: 4px;
                background: #fff
            }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteMenuSection__footer {
                --siteMenuFooterMargin: 0px;
                border-radius: 0;
                background: var(--menuBgColor)
            }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteSubMenu {
                border-radius: 0
            }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteHeaderArrow {
                top: -6px;
                box-shadow: none;
                --siteHeaderArrowBackgroundColor: var(--menuBgColor)
            }

        .MktRoot .SiteHeader--isSticky.SiteHeader--isStuck {
            position: fixed
        }

        .MktRoot .SiteHeader--isSticky.SiteHeader--noStickyTransitions .SiteHeader__navContainer * {
            transition: none
        }
}

.Guides {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    padding: 0 var(--columnPaddingNormal);
    pointer-events: none
}

@media (max-width:1111px) {
    .Guides {
        max-width: var(--windowWidth)
    }
}

.Guides__container {
    display: grid;
    grid: 1fr/repeat(var(--columnCountMax),1fr);
    position: relative;
    max-width: var(--layoutWidth);
    height: 100%;
    margin: 0 auto
}

.Guides__guide {
    width: 1px;
    background: linear-gradient(180deg,var(--guideDashedColor),var(--guideDashedColor) 50%,transparent 0,transparent);
    background-size: 1px 8px
}

    .Guides__guide:first-of-type, .Guides__guide:last-of-type {
        background: var(--guideSolidColor)
    }

    .Guides__guide:last-of-type {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%
    }

@media (max-width:599px) {
    .Guides__guide:nth-of-type(3n) {
        display: none
    }
}

@media (max-width:899px) {
    .Guides__guide:nth-of-type(2n) {
        display: none
    }
}

.UserLogo {
    --userLogoMaxWidth: 160px;
    display: block
}

@media (max-width:899px) {
    .UserLogo {
        max-width: var(--userLogoMaxWidth)
    }
}

.theme--White .UserLogo.variant--Flat {
    --userLogoColor: #b2bcc7
}

.theme--Light .UserLogo.variant--Flat {
    --userLogoColor: #aab4c1
}

.theme--Dark .UserLogo.variant--Flat {
    --userLogoColor: #fff
}

.UserLogo.variant--Flat {
    --userLogoColorAlt: var(--backgroundColor);
    --userLogoColorAltNoTransparency: var(--backgroundColor)
}

    .UserLogo.variant--Flat .UserLogo__path--blendModeMultiply {
        mix-blend-mode: multiply
    }

.SiteHeaderNavItem + .SiteHeaderNavItem {
    margin-left: -1px
}

.SiteHeaderNavItem__link, .SiteHeaderNavItem__link.Link {
    --linkColor: var(--navColor);
    --linkHoverColor: var(--navHoverColor);
    --linkHoverOpacity: var(--navHoverOpacity);
    display: block;
    padding: 10px 20px;
    font: var(--fontWeightBold) 15px/1.6 var(--fontFamily);
    letter-spacing: .2px;
    color: var(--navColor);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    outline: none
}

    .SiteHeaderNavItem__link.Link[aria-haspopup=true], .SiteHeaderNavItem__link[aria-haspopup=true] {
        cursor: default;
        transition: var(--hoverTransition);
        transition-property: color,opacity
    }

    .SiteHeaderNavItem__link.Link[aria-expanded=true], .SiteHeaderNavItem__link[aria-expanded=true] {
        color: var(--linkHoverColor);
        opacity: var(--linkHoverOpacity)
    }

.keyboard-navigation .SiteHeaderNavItem__link.Link:focus, .keyboard-navigation .SiteHeaderNavItem__link:focus {
    box-shadow: var(--focusBoxShadow);
    border-radius: 4px
}

html[lang^=ja] .SiteHeaderNavItem__link, html[lang^=ja] .SiteHeaderNavItem__link.Link {
    font-weight: 600;
    font-variation-settings: "wght" 500
}

.SiteHeader--hasContactSales .SiteHeaderNavItem__link, .SiteHeader--hasContactSales .SiteHeaderNavItem__link.Link {
    padding: 10px 20px
}

html[lang^=de] .SiteHeader--hasContactSales .SiteHeaderNavItem__link, html[lang^=de] .SiteHeader--hasContactSales .SiteHeaderNavItem__link.Link, html[lang^=es] .SiteHeader--hasContactSales .SiteHeaderNavItem__link, html[lang^=es] .SiteHeader--hasContactSales .SiteHeaderNavItem__link.Link, html[lang^=fr] .SiteHeader--hasContactSales .SiteHeaderNavItem__link, html[lang^=fr] .SiteHeader--hasContactSales .SiteHeaderNavItem__link.Link, html[lang^=id] .SiteHeader--hasContactSales .SiteHeaderNavItem__link, html[lang^=id] .SiteHeader--hasContactSales .SiteHeaderNavItem__link.Link, html[lang^=nl] .SiteHeader--hasContactSales .SiteHeaderNavItem__link, html[lang^=nl] .SiteHeader--hasContactSales .SiteHeaderNavItem__link.Link {
    padding: 10px 16px
}

.SiteHeaderNavItem__link--hasCaret {
    display: flex;
    align-items: center;
    -moz-column-gap: 3px;
    column-gap: 3px
}

    .SiteHeaderNavItem__link--hasCaret span, .SiteHeaderNavItem__link--hasCaret svg {
        display: inline-flex
    }

    .SiteHeaderNavItem__link--hasCaret.SiteHeaderNavItem__link[aria-expanded=true] .SiteHeaderNavItem__linkCaret--left {
        transform: rotate(-90deg)
    }

    .SiteHeaderNavItem__link--hasCaret.SiteHeaderNavItem__link[aria-expanded=true] .SiteHeaderNavItem__linkCaret--right {
        transform: rotate(90deg)
    }

    .SiteHeaderNavItem__link--hasCaret .SiteHeaderNavItem__linkCaretContainer {
        position: relative;
        padding: 7px 1px 5px
    }

    .SiteHeaderNavItem__link--hasCaret .SiteHeaderNavItem__linkCaret {
        transition: transform .4s cubic-bezier(.4,0,.2,1)
    }

    .SiteHeaderNavItem__link--hasCaret .SiteHeaderNavItem__linkCaret--left {
        translate: 2px
    }

    .SiteHeaderNavItem__link--hasCaret .SiteHeaderNavItem__linkCaret--right {
        translate: -2px
    }

.Link {
    font-weight: var(--linkWeight,var(--fontWeightSemibold));
    cursor: pointer;
    color: var(--linkColor);
    opacity: var(--linkOpacity,1);
    transition: var(--hoverTransition);
    transition-property: color,opacity;
    outline: none
}

@media (pointer:fine) {
    .Link:hover {
        color: var(--linkHoverColor,var(--linkColor));
        opacity: var(--linkHoverOpacity,1)
    }
}

@media (pointer:coarse) {
    .Link:active {
        color: var(--linkHoverColor,var(--linkColor));
        opacity: var(--linkHoverOpacity,1)
    }
}

.keyboard-navigation .Link:focus {
    box-shadow: var(--focusBoxShadow);
    border-radius: 2px
}

.Link__icon {
    position: relative;
    top: 2px;
    margin: 0 8px 0 0
}

.SiteHeaderNav__list {
    display: var(--desktopNavDisplay,flex);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none
}

.CtaButton {
    display: inline-block;
    padding: 3px 0 6px;
    border-radius: 16.5px;
    font: var(--ctaFont);
    color: var(--buttonColor);
    transition: var(--hoverTransition);
    outline: none
}

.keyboard-navigation .CtaButton:focus {
    box-shadow: var(--focusBoxShadow)
}

html[lang^=ja] .CtaButton {
    font-weight: 600;
    font-variation-settings: "wght" 425
}

.CtaButton.variant--Link {
    font-weight: var(--linkWeight,var(--fontWeightSemibold));
    transition-property: color,opacity
}

    .CtaButton.variant--Link.CtaButton--jumpArrowLink {
        display: inline-flex;
        align-items: center;
        gap: 8px
    }

@media (pointer:fine) {
    .CtaButton.variant--Link:hover {
        color: var(--linkHoverColor,var(--linkColor));
        opacity: var(--linkHoverOpacity,1)
    }
}

@media (pointer:coarse) {
    .CtaButton.variant--Link:active {
        color: var(--linkHoverColor,var(--linkColor));
        opacity: var(--linkHoverOpacity,1)
    }
}

.CtaButton.variant--Button {
    padding-left: 16px;
    padding-right: 16px;
    background-color: var(--buttonColor);
    color: var(--knockoutColor);
    white-space: nowrap;
    transition-property: background-color,opacity
}

    .CtaButton.variant--Button.CtaButton--arrow {
        padding-right: 12px
    }

@media (pointer:fine) {
    .CtaButton.variant--Button:hover {
        background-color: var(--buttonHoverColor,var(--buttonColor));
        opacity: var(--buttonHoverOpacity,1)
    }
}

@media (pointer:coarse) {
    .CtaButton.variant--Button:active {
        background-color: var(--buttonHoverColor,var(--buttonColor));
        opacity: var(--buttonHoverOpacity,1)
    }
}

.HoverArrow {
    --arrowSpacing: 5px;
    --arrowHoverTransition: 150ms cubic-bezier(0.215,0.61,0.355,1);
    --arrowHoverOffset: translateX(3px);
    --arrowTipTransform: none;
    --arrowLineOpacity: 0;
    position: relative;
    top: 1px;
    margin-left: var(--arrowSpacing);
    stroke-width: 2px;
    fill: none;
    stroke: currentColor
}

.HoverArrow--sizeSmall {
    --arrowSpacing: 4px;
    stroke-width: 1.5px
}

.HoverArrow__linePath {
    opacity: var(--arrowLineOpacity);
    transition: opacity var(--hoverTransition,var(--arrowHoverTransition))
}

.HoverArrow__tipPath {
    transform: var(--arrowTipTransform);
    transition: transform var(--hoverTransition,var(--arrowHoverTransition))
}

@media (pointer:fine) {
    a:hover .HoverArrow__linePath, button:hover .HoverArrow__linePath {
        --arrowLineOpacity: 1
    }

    a:hover .HoverArrow__tipPath, button:hover .HoverArrow__tipPath {
        --arrowTipTransform: var(--arrowHoverOffset)
    }
}

@media (pointer:coarse) {
    a:active .HoverArrow__linePath, button:active .HoverArrow__linePath {
        --arrowLineOpacity: 1
    }

    a:active .HoverArrow__tipPath, button:active .HoverArrow__tipPath {
        --arrowTipTransform: var(--arrowHoverOffset)
    }
}

.NavCtaGradient {
    --buttonColor: #fff;
    --buttonHoverColor: hsla(0,0%,100%,0.9);
    --initialGradientColor: linear-gradient(90deg,#e18638,#e17a38)
}

    .NavCtaGradient .CtaButton.variant--Button .NavCta__label {
        background: var(--initialGradientColor);
        will-change: color;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        transition: background .3s linear
    }

    .NavCtaGradient .CtaButton.variant--Button .HoverArrow {
        stroke: #e17a38;
        will-change: stroke;
        transition: stroke .3s linear
    }

.MenuButton {
    --buttonHeight: 32px;
    display: inline-flex;
    align-items: center;
    height: var(--buttonHeight);
    padding: 0 calc(var(--buttonHeight)/2);
    border-radius: calc(var(--buttonHeight)/2);
    background-color: var(--buttonColor);
    color: var(--knockoutColor);
    transition: var(--hoverTransition);
    transition-property: background-color,opacity
}

@media (pointer:fine) {
    .MenuButton:hover {
        background-color: var(--buttonHoverColor,var(--buttonColor));
        opacity: var(--buttonHoverOpacity,1)
    }
}

@media (pointer:coarse) {
    .MenuButton:active {
        background-color: var(--buttonHoverColor,var(--buttonColor));
        opacity: var(--buttonHoverOpacity,1)
    }
}

.MobileMenu {
    --siteMobileMenuHeaderHeight: 60px;
    --siteMobileMenuFooterHeight: 64px;
    --siteMobileMenuPadding: 4px;
    --siteMobileMenuNavListTransform: translateY(0px);
    --siteMobileMenuSectionTransform: translateY(0px);
    --transitionDuration: 400ms;
    --transitionEasing: cubic-bezier(0,-0.01,0.19,0.99);
    --siteMobileMenuTransition: var(--transitionDuration) var(--transitionEasing);
    --siteMobileMenuTransitionIn: visibility var(--transitionDuration) step-end,transform var(--siteMobileMenuTransition),opacity var(--siteMobileMenuTransition);
    --siteMobileMenuTransitionOut: visibility var(--transitionDuration) step-start,transform var(--siteMobileMenuTransition),opacity var(--siteMobileMenuTransition);
    position: fixed;
    inset: 0;
    transform: translateY(0);
    background: #f6f9fb;
    overflow-x: hidden;
    overflow-y: var(--siteMobileMenuOverflowY);
    display: grid;
    grid: var(--siteMobileMenuHeaderHeight) auto var(--siteMobileMenuFooterHeight)/auto;
    padding: var(--siteMobileMenuPadding);
    z-index: 2
}

@media (min-width:900px) {
    .MobileMenu {
        display: none
    }
}

@media (prefers-reduced-motion:reduced) {
    .MobileMenu {
        --transitionDuration: 1ms
    }
}

.MobileMenu__header {
    position: sticky;
    top: 0;
    padding: 16px;
    height: var(--siteMobileMenuHeaderHeight);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 4px 4px 0 0;
    z-index: 1
}

    .MobileMenu__header:before {
        content: "";
        position: absolute;
        inset: calc(var(--siteMobileMenuPadding)*-1) calc(var(--siteMobileMenuPadding)*-1) 0 calc(var(--siteMobileMenuPadding)*-1);
        border: solid #f6f9fb;
        border-width: var(--siteMobileMenuPadding);
        border-bottom: 0 solid #f6f9fb;
        pointer-events: none
    }

    .MobileMenu__header:after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        background: linear-gradient(90deg,var(--guideDashedColor),var(--guideDashedColor) 50%,transparent 0,transparent);
        background-size: 8px 1px
    }

.MobileMenu__logo {
    --userLogoColor: var(--accentColor);
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: var(--siteMobileMenuTransitionOut);
    -webkit-tap-highlight-color: transparent
}

.MobileMenu--isMenuSectionActive .MobileMenu__logo {
    transform: translateX(-100%)
}

.MobileMenu--isMenuSectionActive .MobileMenu__logo, .MobileMenu__backButton {
    opacity: 0;
    visibility: hidden;
    transition: var(--siteMobileMenuTransitionIn);
    pointer-events: none
}

.MobileMenu__backButton {
    position: absolute;
    left: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    -moz-column-gap: 4px;
    column-gap: 4px;
    padding: 0;
    color: var(--accentColor);
    font: var(--fontWeightSemibold) 16px/1.5 var(--fontFamily);
    border: none;
    outline: none;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transform: translateX(100%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.MobileMenu--isMenuSectionActive .MobileMenu__backButton {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
    transition: var(--siteMobileMenuTransitionOut)
}

.keyboard-navigation .MobileMenu__backButton:focus {
    box-shadow: var(--focusBoxShadow)
}

.MobileMenu__backButtonText {
    padding: 0 4px 2px 0
}

.MobileMenu__closeButton {
    padding: 0;
    border: none;
    outline: none;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.keyboard-navigation .MobileMenu__closeButton:focus {
    box-shadow: var(--focusBoxShadow)
}

.MobileMenu__body {
    width: calc(100vw - 8px);
    display: flex
}

.MobileMenu__nav {
    width: 100%;
    flex-shrink: 0;
    background-color: #fff;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: visibility var(--transitionDuration) step-start,transform var(--siteMobileMenuTransition),opacity var(--transitionDuration) cubic-bezier(0,.81,.36,.87)
}

.MobileMenu--isMenuSectionActive .MobileMenu__nav {
    opacity: 0;
    transform: translateX(-25%);
    max-height: 0;
    visibility: hidden;
    transition: visibility var(--transitionDuration) step-end,transform var(--siteMobileMenuTransition),opacity var(--transitionDuration) cubic-bezier(.705,.07,1,.17)
}

.MobileMenu__navList {
    list-style: none;
    margin: 20px 16px;
    padding: 0;
    transform: var(--siteMobileMenuNavListTransform)
}

.MobileMenu__sections {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    background: #f6f9fb;
    transform: translateX(0);
    transition: transform var(--siteMobileMenuTransition)
}

.MobileMenu--isMenuSectionActive .MobileMenu__sections {
    transform: translateX(-100%)
}

.MobileMenu__sections:before {
    content: "";
    display: block;
    width: 32px;
    position: absolute;
    top: 0;
    left: -32px;
    height: 100%;
    background: linear-gradient(270deg,rgba(107,124,147,.07),rgba(107,124,147,0));
    opacity: 0;
    transform: translateX(0);
    transition: opacity var(--transitionDuration) cubic-bezier(.705,.07,1,.17);
    pointer-events: none
}

.MobileMenu--isMenuSectionActive .MobileMenu__sections:before {
    opacity: 1;
    transform: translateX(-100%);
    transition: opacity var(--transitionDuration) cubic-bezier(0,.81,.36,.87),transform var(--transitionDuration) cubic-bezier(0,.81,.36,.87) var(--transitionDuration)
}

.MobileMenu__footer {
    height: var(--siteMobileMenuFooterHeight);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
    position: sticky;
    bottom: 0;
    background: radial-gradient(66.35% 66.35% at 50% 50%,hsla(0,0%,100%,.9) 0,hsla(0,0%,100%,0) 100%),hsla(0,0%,100%,.8);
    -webkit-backdrop-filter: blur(3.5px);
    backdrop-filter: blur(3.5px);
    z-index: 2;
    border-radius: 0 0 4px 4px
}

    .MobileMenu__footer:after {
        content: "";
        position: absolute;
        inset: 0 calc(var(--siteMobileMenuPadding)*-1) calc(var(--siteMobileMenuPadding)*-1) calc(var(--siteMobileMenuPadding)*-1);
        border: solid #f6f9fb;
        border-width: var(--siteMobileMenuPadding);
        border-top: 0 solid #f6f9fb;
        pointer-events: none
    }

.SiteMobileMenuNavItem {
    --linkColor: #3f4b66;
    position: relative
}

    .SiteMobileMenuNavItem:not(.SiteMobileMenuNavItem--hasDescription):before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        background: linear-gradient(90deg,var(--guideDashedColor),var(--guideDashedColor) 50%,transparent 0,transparent);
        background-size: 8px 1px
    }

.SiteMobileMenuNavItem--hasDescription {
    --linkHoverOpacity: 0.8
}

.SiteMobileMenuNavItem__link {
    --linkWeight: var(--fontWeightBold);
    display: flex;
    justify-content: space-between;
    align-items: center;
    -moz-column-gap: 20px;
    column-gap: 20px;
    width: 100%;
    padding: 20px 0;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    text-align: left;
    font: var(--fontWeightBold) 18px/1.27 var(--fontFamily);
    letter-spacing: .2px;
    color: #3f4b66;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.keyboard-navigation .SiteMobileMenuNavItem__link:focus {
    box-shadow: var(--focusBoxShadow)
}

@media (pointer:fine) {
    .SiteMobileMenuNavItem__link:hover {
        opacity: var(--linkHoverOpacity,1)
    }
}

@media (pointer:coarse) {
    .SiteMobileMenuNavItem__link:active {
        opacity: var(--linkHoverOpacity,1)
    }
}

.SiteMobileMenuNavItem__label:not(:only-child) {
    color: #0a2540;
    font: var(--fontWeightBold) 16px/1.3 var(--fontFamily)
}

.SiteMobileMenuNavItem__description {
    margin-top: 4px;
    font: var(--fontWeightNormal) 16px/1.25 var(--fontFamily)
}

.SiteMobileMenuNavItem__chevron {
    flex-shrink: 0
}

.SiteMobileProductsNav {
    background-color: #fff;
    min-height: 100%;
    padding: 24px 16px
}

.SiteMobileProductsNav__moreGroup {
    margin-top: 24px
}

.SiteMobileProductsNav__moreGroupTitle {
    color: #0a2540;
    font: var(--fontWeightSemibold) 13px/1.84 var(--fontFamily);
    text-transform: uppercase
}

.SiteMobileProductsNav__moreGroupMenuList {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    row-gap: 8px
}

.VariantSiteMobileProductsNavGlobalPayments__subMenuList {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    display: grid;
    row-gap: 8px;
    min-width: 248px;
    max-width: 400px
}

html[lang^=en] .VariantSiteMobileProductsNavGlobalPayments__subMenuList {
    margin-left: 48px;
    width: 70%
}

.SiteProductsNavIcon {
    width: 32px;
    height: 32px;
    background: #f6f9fb;
    border-radius: 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center
}

.SiteProductsNavIcon__productIconWrapper {
    display: inline-flex;
    width: 16px;
    height: 16px
}

.SiteNavItem {
    --SiteNavItemBodyWhiteSpace: nowrap;
    --SiteNavItemBodyHyphens: none;
    --SiteNavItemBodyWordBreak: normal;
    --siteNavExternalIconMarginLeft: 4px;
    --siteNavExternalIconMarginBottom: 2px;
    margin-left: calc(var(--siteNavIconSize) + var(--siteNavIconSpacingRight));
    font: var(--siteNavItemFont,var(--fontWeightNormal) 14px/1.428571429 var(--fontFamily));
    letter-spacing: .2px
}

.SiteNavItem--isTruncated {
    position: relative
}

    .SiteNavItem--isTruncated .SiteNavItem__bodyLabel {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden
    }

        .SiteNavItem--isTruncated .SiteNavItem__bodyLabel:after {
            content: "";
            display: block;
            inset: 0 -4px 0 -4px;
            position: absolute;
            background: #fff;
            z-index: -1;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0,0,0,.1)
        }

    .SiteNavItem--isTruncated .SiteNavItem__bodyLabelTruncated {
        display: block;
        visibility: visible
    }

    .SiteNavItem--isTruncated:hover {
        z-index: 1
    }

        .SiteNavItem--isTruncated:hover .SiteNavItem__bodyLabel {
            visibility: visible
        }

        .SiteNavItem--isTruncated:hover .SiteNavItem__bodyLabelTruncated {
            visibility: hidden
        }

.SiteProductsNavSubItem {
    display: inline-flex;
    border-radius: 4px;
    overflow: hidden;
    background-color: #f6f9fc
}

@media (min-width:900px) {
    .SiteProductsNavSubItem {
        border: 1px solid #fff
    }
}

.SiteProductsNavSubItem__link {
    display: inline-flex;
    align-items: flex-start;
    padding: 8px;
    color: #0a2540;
    outline: none;
    font: var(--fontWeightSemibold) 14px/1.2 var(--fontFamily)
}

@media (min-width:900px) {
    .SiteProductsNavSubItem__link {
        font: var(--fontWeightSemibold) 12px/1.1 var(--fontFamily)
    }
}

html[lang^=ja] .SiteProductsNavSubItem__link {
    --fontWeightSemibold: 425
}

.keyboard-navigation .SiteProductsNavSubItem__link:focus {
    box-shadow: var(--focusBoxShadow);
    border-radius: 2px
}

@media (min-width:900px) {
    .SiteProductsNavSubItem__link {
        overflow: hidden;
        align-items: center
    }
}

.SiteProductsNavSubItem__label {
    white-space: nowrap
}

.SiteProductsNavSubItem__seperator {
    margin-top: 1px;
    width: 14px;
    height: 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: relative
}

@media (min-width:900px) {
    .SiteProductsNavSubItem__seperator {
        height: auto
    }
}

.SiteProductsNavSubItem__seperatorDot {
    display: flex;
    opacity: 1;
    transform: translateX(0);
    transition: var(--hoverTransition);
    transition-property: opacity,transform
}

@media (min-width:900px) {
    .SiteProductsNavSubItem__link:hover .SiteProductsNavSubItem__seperatorDot {
        opacity: 0;
        transform: translateX(5px)
    }
}

.SiteProductsNavSubItem__seperatorArrow {
    position: absolute;
    inset: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: -3px
}

.SiteProductsNavSubItem__arrow.HoverArrow {
    opacity: 0;
    width: 8px;
    height: 8px;
    transition: var(--hoverTransition);
    transition-property: opacity;
    position: absolute;
    left: 0
}

@media (min-width:900px) {
    .SiteProductsNavSubItem__link:hover .SiteProductsNavSubItem__arrow.HoverArrow {
        opacity: 1
    }
}

.SiteProductsNavSubItem__body {
    font-weight: var(--fontWeightNormal);
    opacity: .6;
    transition: var(--hoverTransition);
    transition-property: opacity
}

.SiteProductsNavSubItem__link:hover .SiteProductsNavSubItem__body {
    opacity: 1
}

@media (min-width:900px) {
    .SiteProductsNavSubItem__body {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

.SiteMobileProductsNavGroup {
    background-color: #fff;
    padding: 24px 16px;
    border-radius: 4px;
    margin-bottom: 4px
}

    .SiteMobileProductsNavGroup:first-child {
        border-radius: 0 0 4px 4px
    }

.SiteMobileProductsNavGroup__title {
    color: #0a2540;
    font: var(--fontWeightSemibold) 13px/1.84 var(--fontFamily);
    text-transform: uppercase
}

.SiteMobileProductsNavGroup__menuList {
    --siteNavItemLinkPadding: 0;
    --siteNavItemFont: var(--fontWeightNormal) 16px/1.1 var(--fontFamily);
    --siteNavIconSize: 32px;
    --siteNavIconSpacingTop: 7px;
    --siteNavIconSpacingRight: 16px;
    --siteNavIconLabelLineHeight: 24px;
    --siteNavItemBodyDisplay: block;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    row-gap: 16px
}

    .SiteMobileProductsNavGroup__menuList .SiteNavItem {
        --SiteNavItemBodyWhiteSpace: normal;
        --SiteNavItemBodyWordBreak: break-word
    }

[lang^=de] .SiteMobileProductsNavGroup__menuList .SiteNavItem {
    --SiteNavItemBodyWordBreak: normal;
    --SiteNavItemBodyHyphens: auto
}

.SiteMobileProductsNavGroup__menuSubList {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    row-gap: 4px
}

.SiteProductsNavCollapsedItem {
    display: block
}

.SiteProductsNavCollapsedItem__link {
    display: block;
    outline: none
}

html[lang^=ja] .SiteProductsNavCollapsedItem__link {
    --fontWeightSemibold: 425
}

.keyboard-navigation .SiteProductsNavCollapsedItem__link:focus {
    box-shadow: var(--focusBoxShadow);
    border-radius: 2px
}

.SiteProductsNavCollapsedItem__label {
    color: #0a2540;
    font: var(--fontWeightSemibold) 14px/1.61 var(--fontFamily)
}

@media (min-width:900px) {
    .SiteProductsNavCollapsedItem__label {
        font: var(--fontWeightNormal) 14px/1.61 var(--fontFamily)
    }

    .SiteProductsNavCollapsedItem__link:hover .SiteProductsNavCollapsedItem__label {
        font-weight: var(--fontWeightSemibold)
    }
}

.SiteProductsNavCollapsedItem__arrow.HoverArrow {
    opacity: 0;
    transition: var(--hoverTransition);
    transition-property: opacity
}

@media (min-width:900px) {
    .SiteProductsNavCollapsedItem__link:hover .SiteProductsNavCollapsedItem__arrow.HoverArrow {
        opacity: 1
    }
}

.SiteProductsNavCollapsedItem__body {
    --height: 0px;
    --expanded-height: 0px;
    color: #727f96;
    font: var(--fontWeightNormal) 14px/1.5 var(--fontFamily)
}

@media (min-width:900px) {
    .SiteProductsNavCollapsedItem__body {
        height: var(--height);
        opacity: 0;
        transition: .36s ease;
        transition-property: opacity,height
    }

    .SiteProductsNavCollapsedItem__link:hover .SiteProductsNavCollapsedItem__body {
        transition: .3s ease .1s;
        height: var(--expanded-height);
        opacity: 1
    }
}

.SiteProductsNavCollapsedItem__bodyContent {
    display: inline-block;
    pointer-events: none
}

.SiteMobileNavGroup {
    background-color: #fff;
    padding: 24px 16px;
    border-radius: 4px;
    margin-bottom: 4px
}

    .SiteMobileNavGroup:first-child {
        border-radius: 0 0 4px 4px
    }

.SiteMobileNavGroup--transparent {
    background: none
}

.SiteMobileNavGroup__title {
    color: #0a2540;
    font: var(--fontWeightSemibold) 13px/1.84 var(--fontFamily);
    text-transform: uppercase
}

.SiteMobileNavGroup__menuList {
    --siteNavItemLinkPadding: 2px 0;
    --siteNavIconSize: 16px;
    --siteNavIconSpacingTop: 2px;
    --siteNavIconSpacingRight: 10px;
    --siteNavItemFont: var(--fontWeightSemibold) 16px/1.25 var(--fontFamily);
    margin: 0;
    padding: 12px 0;
    list-style: none;
    display: grid;
    row-gap: 24px
}

.SiteMobileMenuSection {
    height: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: var(--siteMobileMenuSectionTransform);
    transition: max-height var(--transitionDuration) step-end,opacity var(--transitionDuration) step-end
}

.SiteMobileMenuSection--isActive {
    max-height: 100%;
    opacity: 1;
    transition: max-height var(--transitionDuration) step-start,opacity var(--transitionDuration) step-start
}

:where(.BasicIcon) {
    --basicIconColor: #0a2540;
    display: block
}

.VariantSiteMobileDevelopersNav__subsection {
    margin: 18px 0;
    padding-left: 26px
}

    .VariantSiteMobileDevelopersNav__subsection .SiteNavItem__link {
        padding: var(--siteNavItemLinkPadding,6px) 0
    }

    .VariantSiteMobileDevelopersNav__subsection:first-of-type {
        margin-top: 8px
    }

    .VariantSiteMobileDevelopersNav__subsection:last-of-type {
        margin-bottom: 0
    }

.VariantSiteMobileDevelopersNav__sublist {
    margin: 0;
    padding: 0;
    list-style: none;
    --siteNavItemFont: var(--fontWeightNormal) 16px/1.27375 var(--fontFamily)
}

.VariantSiteMobileDevelopersNav__subtitle {
    font: var(--fontWeightSemibold) 13px/1.538461538 var(--fontFamily);
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #0a2540
}

.SiteHeaderArrow {
    --siteHeaderArrowBackgroundColor: var(--cardBackground);
    position: absolute;
    top: 8px;
    left: 50%;
    margin: 0 0 0 -6px;
    width: 12px;
    height: 12px;
    transform: translateY(12px) translateX(var(--siteMenuArrowOffset)) rotate(45deg);
    border-radius: 3px 0 0 0;
    background-color: var(--siteHeaderArrowBackgroundColor);
    box-shadow: -3px -3px 5px rgba(82,95,127,.04);
    transition-property: transform;
    transition-duration: var(--siteMenuTransition);
    z-index: 2
}

.SiteHeader--dropdownVisible .SiteHeaderArrow {
    transform: translateY(0) translateX(var(--siteMenuArrowOffset)) rotate(45deg)
}

@media (max-width:899px) {
    .SiteHeaderArrow {
        display: none
    }
}

.SiteHeaderArrow.SiteHeaderArrow--themeLight {
    --siteHeaderArrowBackgroundColor: #f0f3f6
}

.SiteMenu {
    --siteMenuOffset: 0;
    --siteMenuRotateX: 0;
    --siteMenuTranslateX: 0;
    display: inline-block;
    padding-top: var(--siteMenuArrowSpacing);
    height: calc(var(--siteMenuHeight) + var(--siteMenuArrowSpacing));
    transform: translateX(var(--siteMenuTranslateX)) rotateX(var(--siteMenuRotateX));
    transform-origin: 50% -50px;
    transition: var(--siteMenuTransition);
    transition-property: transform,width,height;
    will-change: transform,width,height;
    z-index: 2
}

    .SiteMenu[hidden] {
        --siteMenuRotateX: -15deg
    }

.SiteMenu__card.Card {
    position: relative;
    height: 100%;
    z-index: 1;
    --cardShadow: var(--cardShadowXLarge);
    --cardShadowMargin: var(--cardShadowXLargeMargin)
}

.SiteMenu__section {
    --siteMenuSectionOffset: 0;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateX(var(--siteMenuSectionOffset));
    transition: var(--siteMenuTransition);
    transition-property: transform,opacity;
    will-change: transform,opacity
}

    .SiteMenu__section[hidden] {
        opacity: 0;
        pointer-events: none
    }

        .SiteMenu__section[hidden].SiteMenu__section--left {
            --siteMenuSectionOffset: -150px
        }

        .SiteMenu__section[hidden].SiteMenu__section--right {
            --siteMenuSectionOffset: 150px
        }

    .SiteMenu__section .SiteNavList__title {
        color: #0a2540
    }

.SiteNavItem--hasNoIcon.SiteNavItem--hasNoBody .SiteNavItem__link .SiteNavItem__label {
    transition: none;
    opacity: 1
}

.SiteNavItem--hasNoIcon.SiteNavItem--hasNoBody .SiteNavItem__link:hover {
    font-weight: var(--fontWeightSemibold)
}

.SiteProductsNav {
    --siteProductsNavWidth: 960px;
    --siteProductsNavAsideWidth: 200px;
    width: var(--siteProductsNavWidth);
    max-width: calc(100vw - 48px);
    padding: 4px;
    display: grid;
    grid: auto/1fr var(--siteProductsNavAsideWidth);
    border-radius: var(--cardBorderRadius);
    background-color: #f6f9fb
}

@media (min-width:960px) {
    .SiteProductsNav {
        --siteProductsNavAsideWidth: 244px
    }
}

html[lang^=en] .SiteProductsNav, html[lang^=zh] .SiteProductsNav {
    --siteProductsNavAsideWidth: 244px
}

.SiteProductsNav__groupList {
    display: grid;
    row-gap: 4px
}

.SiteProductsNav__group {
    background-color: #fff;
    padding: 24px;
    border-radius: 4px
}

.SiteProductsNav__groupTitle {
    color: #0a2540;
    font: var(--fontWeightSemibold) 13px/1.84 var(--fontFamily);
    text-transform: uppercase
}

.SiteProductsNav__groupMenuContainer {
    --groupMenuMaxWidth: 640px;
    --groupColumnWidth: 290px;
    max-width: var(--groupMenuMaxWidth);
    margin-top: 8px;
    display: grid;
    grid: auto/repeat(2,var(--groupColumnWidth));
    align-items: start;
    justify-content: space-between;
    -moz-column-gap: 20px;
    column-gap: 20px
}

html[lang^=en] .SiteProductsNav__groupMenuContainer, html[lang^=zh] .SiteProductsNav__groupMenuContainer {
    --groupMenuMaxWidth: 800px;
    --groupColumnWidth: 388px
}

.SiteProductsNav__groupMenuList {
    --siteNavIconSize: 32px;
    --siteNavIconSpacingTop: 5px;
    --siteNavIconSpacingRight: 16px;
    --siteNavIconLabelLineHeight: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid: auto/auto;
    row-gap: 12px
}

.SiteProductsNav__groupMenuSubList {
    margin: 0;
    padding-left: var(--sublistInset);
    list-style: none;
    display: grid;
    grid: auto/auto;
    row-gap: 2px
}

html[lang^=en] .SiteProductsNav__groupMenuSubList, html[lang^=zh] .SiteProductsNav__groupMenuSubList {
    --sublistInset: 42px
}

.SiteProductsNav__aside {
    padding: 24px 10px 28px 24px
}

@media (min-width:960px) {
    .SiteProductsNav__aside {
        padding-left: 28px
    }
}

.SiteProductsNav__asideTitle {
    color: #0a2540;
    font: var(--fontWeightSemibold) 13px/1.84 var(--fontFamily);
    text-transform: uppercase
}

.SiteProductsNav__asideMenuList {
    margin: 9px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid: auto/auto;
    row-gap: 8px
}

.SiteMenuSection {
    --siteMenuSpacing: 24px;
    position: relative
}

@media (min-width:900px) {
    .SiteMenuSection {
        display: inline-block;
        --siteMenuSpacing: 32px
    }
}

@media (max-width:899px) {
    .SiteMenuSection:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg,var(--guideDashedColor),var(--guideDashedColor) 50%,transparent 0,transparent);
        background-size: 8px 1px;
        content: ""
    }
}

.SiteMenuSection__body {
    padding: var(--siteMenuSectionBodyPadding,var(--siteMenuSpacing) var(--siteMenuSpacing) calc(var(--siteMenuSpacing) - 11px))
}

.SiteMenuSection:only-child .SiteMenuSection__body {
    padding: var(--siteMenuSectionBodyPadding,var(--siteMenuSpacing) var(--siteMenuSpacing) calc(var(--siteMenuSpacing) - 8px))
}

.SiteMenuSection + .SiteMenuSection .SiteMenuSection__body {
    padding-top: var(--siteMenuSectionBodyPadding,calc(var(--siteMenuSpacing) - 12px))
}

.SiteMenuSection--variantNoPadding .SiteMenuSection__body, .SiteMenuSection--variantNoPadding:only-child .SiteMenuSection__body {
    padding: 0;
}

.SiteMenuSection + .SiteMenuSection:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,var(--guideDashedColor),var(--guideDashedColor) 50%,transparent 0,transparent);
    background-size: 8px 1px;
    content: ""
}

.SiteMenuSection__footer {
    --siteMenuFooterMargin: 4px;
    border-radius: 4px;
    background-color: #eff3f9;
    margin: var(--siteMenuFooterMargin);
    padding: calc(var(--siteMenuSpacing) - var(--siteMenuFooterMargin)) calc(var(--siteMenuSpacing) - var(--siteMenuFooterMargin))
}

.SiteSolutionsNav {
    --siteSolutionsNavWidth: 604px;
    width: var(--siteSolutionsNavWidth);
    padding: 4px;
    border-radius: var(--cardBorderRadius);
    background-color: #f6f9fb
}

.SiteSolutionsNav__groupList {
    display: grid;
    row-gap: 4px
}

.SiteSolutionsNav__group {
    background-color: #fff;
    padding: 24px 28px;
    border-radius: 4px
}

.SiteSolutionsNav__group--grid {
    display: grid;
    grid: auto/1fr 1fr;
    -moz-column-gap: 12px;
    column-gap: 12px
}

.SiteSolutionsNav__groupTitle {
    color: #0a2540;
    font: var(--fontWeightSemibold) 13px/1.84 var(--fontFamily);
    text-transform: uppercase
}

.SiteSolutionsNav__groupMenuContainer {
    margin-top: 12px;
    display: grid;
    grid: auto/repeat(auto-fit,minmax(200px,1fr));
    -moz-column-gap: 12px;
    column-gap: 12px
}

.SiteSolutionsNav__groupMenuList {
    --siteNavIconSize: 16px;
    --siteNavIconSpacingTop: 2px;
    --siteNavIconSpacingRight: 10px;
    --siteNavIconLabelLineHeight: 20px;
    margin: 0;
    padding: 2px 0;
    list-style: none;
    display: grid;
    row-gap: 12px;
    grid-auto-rows: max-content
}

.SiteSolutionsNav__externalMenu.SiteNavItem {
    --siteNavExternalIconMarginLeft: 0px
}

.SiteDevelopersNav__bodyLayout {
    display: inline-grid;
    grid: auto/repeat(2,1fr);
    gap: var(--siteMenuSpacing) var(--siteMenuSpacing)
}

.SiteDevelopersNav__header {
    grid-area: auto/span 2
}

.SiteDevelopersNav__footerLayout {
    display: inline-grid;
    grid: auto/repeat(2,1fr);
    -moz-column-gap: var(--siteMenuSpacing);
    column-gap: var(--siteMenuSpacing)
}

.SiteNavItem {
    --SiteNavItemBodyWhiteSpace: nowrap;
    --SiteNavItemBodyHyphens: none;
    --SiteNavItemBodyWordBreak: normal;
    --siteNavExternalIconMarginLeft: 4px;
    --siteNavExternalIconMarginBottom: 2px;
    margin-left: calc(var(--siteNavIconSize) + var(--siteNavIconSpacingRight));
    font: var(--siteNavItemFont,var(--fontWeightNormal) 14px/1.428571429 var(--fontFamily));
    letter-spacing: .2px
}

.SiteNavItem--hasIcon {
    margin-left: 0
}

.SiteNavItem__link {
    display: inline-flex;
    color: #0a2540;
    outline: none
}

.keyboard-navigation .SiteNavItem__link:focus {
    box-shadow: var(--focusBoxShadow);
    border-radius: 2px
}

.SiteNavList--iconSizeMedium .SiteNavItem__link {
    align-items: start
}

.SiteNavList--iconSizeLarge .SiteNavItem__link {
    align-items: center
}

@media (min-width:900px) {
    .SiteNavList--iconSizeLarge .SiteNavItem__link {
        align-items: start
    }
}

.SiteNavList--iconSizeXLarge .SiteNavItem__link {
    align-items: center
}

@media (max-width:899px) {
    .SiteNavItem__link {
        padding: var(--siteNavItemLinkPadding,6px)
    }
}

.SiteNavItem__iconContainer {
    --iconLightColor: #88add2;
    --iconDarkColor: #0a2540;
    --iconKnockoutColor: #fff;
    flex: 0 0 auto;
    width: var(--siteNavIconSize);
    height: var(--siteNavIconSize);
    margin-top: var(--siteNavIconSpacingTop);
    margin-right: var(--siteNavIconSpacingRight)
}

    .SiteNavItem__iconContainer svg {
        width: inherit;
        height: inherit;
        vertical-align: top
    }

    .SiteNavItem__iconContainer circle, .SiteNavItem__iconContainer path, .SiteNavItem__iconContainer rect {
        transition: var(--hoverTransition);
        transition-property: fill,stroke
    }

.SiteNavList--iconSizeNormal .SiteNavItem__iconContainer {
    margin-top: 3px
}

.SiteNavItem__link:hover .SiteNavItem__iconContainer {
    --iconLightColor: initial;
    --iconDarkColor: initial;
    --iconKnockoutColor: initial
}

.SiteNavItem__basicIcon.BasicIcon {
    --basicIconColor: var(--iconLightColor,var(--iconHoverLightColor,#0a2540))
}

.SiteNavItem__externalIcon {
    --siteNavIconSize: 10px;
    --iconLightColor: #727f96;
    flex: 0 0 auto;
    width: var(--siteNavIconSize);
    height: var(--siteNavIconSize);
    margin: 0 0 var(--siteNavExternalIconMarginBottom) var(--siteNavExternalIconMarginLeft);
    vertical-align: middle
}

    .SiteNavItem__externalIcon path {
        transition: var(--hoverTransition);
        transition-property: fill,stroke
    }

.SiteNavItem__link:hover .SiteNavItem__externalIcon {
    --iconLightColor: initial
}

.SiteNavItem__label {
    color: inherit;
    line-height: var(--siteNavIconLabelLineHeight,inherit)
}

.SiteNavItem--hasIcon .SiteNavItem__label {
    font-weight: var(--fontWeightSemibold);
    font-size: 16px;
    font-weight: 500;
}

.SiteNavItem--hasNoIcon.SiteNavItem--hasNoBody .SiteNavItem__label {
    transition: var(--hoverTransition);
    transition-property: opacity;
    opacity: .8
}

.SiteNavItem--hasNoIcon.SiteNavItem--hasNoBody .SiteNavItem__link:hover .SiteNavItem__label {
    opacity: 1
}

html[lang^=ja] .SiteNavItem__label {
    --fontWeightSemibold: 425
}

.SiteNavItem__arrow.HoverArrow {
    transition: var(--hoverTransition);
    transition-property: opacity
}

.SiteNavItem--isArrowHidden .SiteNavItem__arrow.HoverArrow {
    opacity: 0
}

@media (max-width:899px) {
    .SiteNavItem--isArrowHidden .SiteNavItem__arrow.HoverArrow {
        display: none
    }
}

.SiteNavItem__link:hover .SiteNavItem__arrow.HoverArrow {
    opacity: 1
}

@media (min-width:900px) {
    .SiteNavItem--hasNoBody.SiteNavItem--isArrowHidden .SiteNavItem__arrow.HoverArrow {
        display: none
    }
}

.SiteNavItem__body {
    color: inherit;
    line-height: var(--siteNavIconBodyLineHeight,inherit);
    opacity: .6;
    position: relative;
    transition: var(--hoverTransition);
    transition-property: opacity;
    white-space: var(--SiteNavItemBodyWhiteSpace);
    word-break: var(--SiteNavItemBodyWordBreak);
    -webkit-hyphens: var(--SiteNavItemBodyHyphens);
    hyphens: var(--SiteNavItemBodyHyphens)
}

.SiteNavItem__link:hover .SiteNavItem__body {
    opacity: 1
}

@media (max-width:899px) {
    .SiteNavItem__body {
        display: block;
    }
}

.SiteNavList {
    --siteNavIconSpacingTop: 0;
    --siteNavIconSpacingRight: 10px;
    --siteNavListMinWidth: 254px
}

.SiteNavList--iconSizeNormal {
    --siteNavIconSize: 16px;
    --siteNavListSpacing: 8px
}

    .SiteNavList--iconSizeNormal .SiteNavItem--hasIcon + .SiteNavItem {
        --siteNavListSpacing: 12px
    }

    .SiteNavList--iconSizeNormal .SiteNavItem--hasBody + .SiteNavItem {
        --siteNavListSpacing: 22px
    }

.SiteNavList--iconSizeMedium {
    --siteNavIconSize: 20px;
    --siteNavIconSpacingRight: 16px;
    --siteNavListSpacing: 12px
}

    .SiteNavList--iconSizeMedium .SiteNavItem--hasIcon + .SiteNavItem {
        --siteNavListSpacing: 12px
    }

.SiteNavList--iconSizeLarge {
    --siteNavIconSize: 28px;
    --siteNavIconSpacingRight: 12px;
    --siteNavListSpacing: 12px
}

@media (min-width:900px) {
    .SiteNavList--iconSizeLarge {
        --siteNavIconSpacingTop: 6px;
        --siteNavIconSpacingRight: 16px;
        --siteNavListSpacing: 20px
    }
}

.SiteNavList--iconSizeXLarge {
    --siteNavIconSize: 32px;
    --siteNavIconSpacingRight: 14px;
    --siteNavListSpacing: 32px
}

.SiteNavList__title {
    margin-bottom: var(--siteNavListSpacing);
    font: var(--fontWeightSemibold) 13px/1.538461538 var(--fontFamily);
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #727f96
}

@media (max-width:899px) {
    .SiteNavList__title {
        margin: var(--SiteNavListTitleMargin,0 0 calc(10px + var(--siteNavListSpacing)) 0)
    }
}

@media (min-width:900px) {
    .SiteNavList--iconSizeNormal .SiteNavList__title {
        margin-left: calc(var(--siteNavIconSize) + var(--siteNavIconSpacingRight))
    }
}

.SiteNavList__excludeTitleIndent .SiteNavList__title {
    margin-left: 0
}

.SiteNavList__list {
    min-width: var(--siteNavListMinWidth);
    margin: 0;
    padding: 0;
    list-style: none
}

    .SiteNavList__list .SiteNavItem + .SiteNavItem {
        margin-top: var(--siteNavListSpacing)
    }

.SiteNavList[data-column-count="2"] .SiteNavList__list {
    --columnCount: 2;
    display: grid;
    grid: auto/repeat(var(--columnCount),1fr)
}

    .SiteNavList[data-column-count="2"] .SiteNavList__list .SiteNavItem + .SiteNavItem {
        margin-top: 0
    }

@media (max-width:899px) {
    .SiteNavList[data-column-count="2"] .SiteNavList__list {
        margin: calc(var(--siteNavListSpacing)/-2)
    }
}

@media (min-width:600px) {
    .SiteNavList[data-column-count="2"] .SiteNavList__list {
        --columnCount: 3
    }
}

@media (min-width:750px) {
    .SiteNavList[data-column-count="2"] .SiteNavList__list {
        --columnCount: 4
    }
}

@media (min-width:900px) {
    .SiteNavList[data-column-count="2"] .SiteNavList__list {
        gap: var(--siteNavListSpacing) var(--siteNavListSpacing)
    }
}

.SiteResourcesNav__bodyLayout {
    display: inline-grid;
    grid: auto/repeat(2,1fr);
    -moz-column-gap: var(--siteMenuSpacing);
    column-gap: var(--siteMenuSpacing)
}

    .SiteResourcesNav__bodyLayout .SiteNavList {
        --siteNavListMinWidth: 217px
    }

.SiteResourcesNav__footerLayout {
    display: inline-grid;
    grid: auto/repeat(2,1fr);
    -moz-column-gap: var(--siteMenuSpacing);
    column-gap: var(--siteMenuSpacing)
}

    .SiteResourcesNav__footerLayout .SiteNavList {
        --siteNavListMinWidth: 217px
    }

.Card {
    --cardBleedRightNormal: var(--columnWidth);
    --cardBleedBottomNormal: 16px;
    --cardShadow: none;
    --cardShadowMargin: 0;
    --cardMinHeight: 72px;
    position: relative;
    min-width: 100px;
    min-height: var(--cardMinHeight);
    max-width: var(--cardMaxWidth,none);
    margin-right: calc(var(--cardBleedRight, 0)*-1);
    margin-bottom: calc(var(--cardBleedBottom, 0)*-1);
    border-radius: var(--cardBorderRadius);
    background: var(--cardBackground);
    box-shadow: var(--cardShadow);
    overflow: hidden
}

@media (min-width:600px) {
    .Card {
        max-width: var(--cardMaxWidthTablet,var(--cardMaxWidth))
    }
}

.Card--border {
    border: 1px solid var(--cardBorderColor)
}

.Card--accented:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--cardAccentColor);
    z-index: 2
}

@media (max-width:599px) {
    .Card--hasShadowMargin {
        margin-bottom: var(--cardShadowMargin)
    }
}

.Card--shadowXSmall {
    --cardShadow: var(--cardShadowXSmall);
    --cardShadowMargin: var(--cardShadowXSmallMargin)
}

.Card--shadowSmall {
    --cardShadow: var(--cardShadowSmall);
    --cardShadowMargin: var(--cardShadowSmallMargin)
}

.Card--shadowMedium {
    --cardShadow: var(--cardShadowMedium);
    --cardShadowMargin: var(--cardShadowMediumMargin)
}

.Card--shadowLarge {
    --cardShadow: var(--cardShadowLarge);
    --cardShadowMargin: var(--cardShadowLargeMargin)
}

.Card--shadowXLarge {
    --cardShadow: var(--cardShadowXLarge);
    --cardShadowMargin: var(--cardShadowXLargeMargin)
}

.HomepageHero.Section {
    --sectionPaddingTopMax: 116
}

@media (max-width:899px) {
    .HomepageHero.Section {
        --sectionPaddingBottomMax: calc(var(--sectionPaddingNormalMax) + 40)
    }
}

@media (max-width:599px) {
    .HomepageHero__graphic {
        display: none
    }
}

.HomepageHero__cta {
    will-change: opacity
}

.HomepageHero__ctas {
    display: flex;
    align-items: center;
    -moz-column-gap: var(--ctaSpacing);
    column-gap: var(--ctaSpacing);
    flex-wrap: wrap
}

@media (min-width:900px) {
    .HomepageHero__ctas {
        display: none
    }
}

.HomepageHero__emailInput {
    display: none;
    width: 100%
}

@media (min-width:900px) {
    .HomepageHero__emailInput {
        display: block
    }
}

.Copy {
    --paddingLeft: var(--columnPaddingNormal);
    --paddingRight: var(--columnPaddingMedium);
    --headerPaddingLeft: var(--paddingLeft);
    --headerPaddingRight: var(--paddingRight);
    --headerMaxWidth: var(--copyMaxWidth);
    --bodyPaddingLeft: var(--paddingLeft);
    --bodyPaddingRight: var(--paddingRight);
    --bodyMaxWidth: var(--copyMaxWidth);
    --footerPaddingLeft: var(--paddingLeft);
    --footerPaddingRight: var(--paddingLeft);
    --footerRowGap: var(--rowGapMedium);
    --ctaSpacing: 16px;
    --footerGap: "";
    scroll-margin-top: var(--fixedNavScrollMargin)
}

.HubPage .Copy {
    --paddingLeft: 0px;
    --paddingRight: 0px;
    --footerRowGap: 32px;
    --titleAnchorDisplay: none
}

.Copy--accented {
    --titleColor: var(--accentColor)
}

.Copy.variant--Hero {
    --titleFontSize: 48px;
    --titleLineHeight: 56px;
    --titleLetterSpacing: -0.02em;
    --rowGap: var(--rowGapLarge)
}

.Copy.variant--Hero, .Copy.variant--Section {
    --titleWeight: var(--fontWeightBold);
    --paragraphGap: 20px
}

.Copy.variant--Section {
    --paddingRight: var(--columnPaddingXLarge);
    --rowGap: var(--rowGapMedium);
    --titleFontSize: 34px;
    --titleLineHeight: 1.294117647;
    --titleLetterSpacing: -0.1px
}

.HubPage .Copy.variant--Section {
    --rowGap: 16px;
    --titleFontSize: 32px;
    --titleWeight: var(--fontWeightSemibold);
    --titleLineHeight: 40px;
    --titleLetterSpacing: -0.64px;
    --bodyFontSize: 18px;
    --bodyLineHeight: 1.5555555556
}

@media (min-width:900px) {
    .HubPage .Copy.variant--Section {
        --titleFontSize: 48px;
        --titleLineHeight: 56px;
        --titleLetterSpacing: -0.96px
    }
}

.CondensedExperiment .Copy.variant--Section {
    --rowGap: 16px
}

.Copy.variant--Subsection {
    --paddingRight: var(--columnPaddingXLarge);
    --rowGap: var(--rowGapMedium);
    --titleFontSize: 24px;
    --titleLineHeight: 1.333333333;
    --titleWeight: var(--fontWeightBold);
    --titleLetterSpacing: 0.1px;
    --paragraphGap: 20px
}

.HubPage .Copy.variant--Subsection {
    --rowGap: 16px;
    --footerRowGap: 32px;
    --titleFontSize: 24px;
    --titleLineHeight: 32px;
    --titleWeight: var(--fontWeightSemibold);
    --bodyFontSize: 18px;
    --bodyLineHeight: 28px
}

@media (min-width:600px) {
    .HubPage .Copy.variant--Subsection {
        --titleFontSize: 28px;
        --titleLineHeight: 36px;
        --paddingRight: 40px
    }
}

.Copy.variant--Footer {
    --paddingRight: var(--columnPaddingXLarge);
    --rowGap: var(--rowGapMedium);
    --paragraphGap: 20px
}

.Copy.variant--Footer, .Copy.variant--Stat {
    --titleFontSize: 24px;
    --titleLineHeight: 1.333333333;
    --titleWeight: var(--fontWeightBold);
    --titleLetterSpacing: 0.1px
}

.Copy.variant--Detail, .Copy.variant--Stat {
    --rowGap: var(--rowGapNormal);
    --titleBorderColor: var(--accentColor);
    --bodyFontSize: 15px;
    --bodyLineHeight: 1.6
}

.Copy.variant--Detail {
    --titleFontSize: 15px;
    --titleLineHeight: 1.6;
    --titleWeight: var(--fontWeightSemibold);
    --titleLetterSpacing: 0.2px;
    --paragraphGap: 8px
}

html[lang^=ja] .Copy.variant--Detail {
    --titleWeight: 425
}

.HubPage .Copy.variant--Detail {
    --titleFontSize: 18px;
    --titleWeight: var(--fontWeightSemibold);
    --titleLineHeight: 28px;
    --bodyFontSize: 15px;
    --bodyLineHeight: 24px
}

@media (min-width:600px) {
    .HubPage .Copy.variant--Detail {
        --paddingRight: 40px
    }
}

.Copy__title.Copy__title--wrapBalance {
    text-wrap: balance
}

@media (min-width:600px) {
    .Copy.variant--Subsection {
        --titleFontSize: 26px;
        --titleLineHeight: 1.384615385;
        --titleLetterSpacing: 0
    }
}

@media (min-width:1112px) {
    .Copy.variant--Hero {
        --titleFontSize: 56px;
        --titleLineHeight: 68px
    }

    .Copy.variant--Section {
        --titleFontSize: 38px;
        --titleLineHeight: 1.263157895;
        --titleLetterSpacing: -0.2px
    }
}

.Copy {
    --titleFont: var(--titleWeight) var(--titleFontSize)/var(--titleLineHeight) var(--fontFamily);
    --captionFont: var(--fontWeightBold) var(--captionFontSize,18px)/var(--captionLineHeight,1.555555556) var(--fontFamily);
    --bodyFont: var(--fontWeightNormal) var(--bodyFontSize,18px)/var(--bodyLineHeight,1.555555556) var(--fontFamily);
    letter-spacing: .2px
}

.Copy, .Copy__header {
    display: grid;
    row-gap: var(--rowGap)
}

.Copy__header {
    position: relative;
    padding: 0 var(--headerPaddingRight) 0 var(--headerPaddingLeft);
    max-width: var(--headerMaxWidth)
}

    .Copy__header.variant--HeroCondensed {
        align-items: center;
        display: flex;
        padding: 0 16px 0 var(--headerPaddingLeft)
    }

        .Copy__header.variant--HeroCondensed .Copy__icon {
            margin-right: 16px
        }

        .Copy__header.variant--HeroCondensed .Copy__title {
            font-size: 15px;
            font-weight: 500
        }

    .Copy__header.variant--Condensed {
        --rowGap: 16px
    }

.Copy__icon {
    min-height: 40px;
    display: flex;
    align-items: flex-end;
    margin-bottom: var(--rowGap)
}

.Copy__caption {
    font: var(--captionFont);
    color: var(--accentColor)
}

html[lang^=ja] .Copy__caption {
    font-weight: 600;
    font-variation-settings: "wght" 500
}

.Copy__title {
    position: relative;
    font: var(--titleFont);
    color: var(--titleColor);
    letter-spacing: var(--titleLetterSpacing,inherit)
}

html[lang^=ja] .Copy__title {
    font-weight: 600;
    font-variation-settings: "wght" var(--titleWeight)
}

.Copy__title:before {
    display: var(--titleAnchorDisplay,block);
    position: absolute;
    top: calc(.5px + var(--titleLineHeight)*var(--titleFontSize)/2 - var(--titleFontSize)/2);
    left: calc(var(--headerPaddingLeft)*-1);
    width: 1px;
    height: var(--titleFontSize);
    background-color: var(--titleBorderColor,transparent);
    content: ""
}

.Copy__title .Badge {
    position: relative;
    top: -3px;
    margin-left: 2px
}

.variant--Detail .Copy__title .Badge {
    top: -1px
}

.Copy__body.variant--Detail {
    --bodyFont: var(--fontWeightNormal) 15px/1.6 var(--fontFamily)
}

.Copy__body {
    padding: 0 var(--bodyPaddingRight) 0 var(--bodyPaddingLeft);
    font: var(--bodyFont);
    color: var(--textColor);
    max-width: var(--bodyMaxWidth)
}

    .Copy__body img {
        max-width: 100%
    }

    .Copy__body p + p {
        margin-top: var(--paragraphGap)
    }

    .Copy__body.Copy__body--wrapBalance {
        text-wrap: balance
    }

.Copy__footer {
    display: grid;
    grid-auto-columns: minmax(0,1fr);
    row-gap: var(--footerRowGap);
    margin-top: calc(var(--footerGap, var(--rowGap)) - var(--rowGap));
    padding: 0 var(--footerPaddingRight) 0 var(--footerPaddingLeft)
}

    .Copy__footer > .CtaButton, .Copy__footer > .CtaLink {
        justify-self: flex-start
    }

    .Copy__footer > .List[data-column-count="2"] {
        max-width: calc(var(--columnWidth)*2)
    }

    .Copy__footer > .CopyBody--anchored {
        margin-left: calc(var(--columnPaddingNormal)*-1)
    }

.Copy__ctaContainer {
    display: flex;
    align-items: center;
    -moz-column-gap: var(--ctaSpacing);
    column-gap: var(--ctaSpacing)
}

@media (max-width:899px) {
    .Copy__ctaContainer {
        flex-wrap: wrap
    }
}

.Copy__ctaContainer > .CtaButton:first-of-type, .Copy__ctaContainer > .CtaButton:last-of-type {
    margin-bottom: 16px
}

    .Copy__ctaContainer > .CtaButton:first-of-type:last-of-type {
        margin-bottom: 0
    }

.Copy.variant--Superhero {
    --rowGap: var(--rowGapLarge);
    --titleWeight: var(--fontWeightBold);
    --paragraphGap: 20px
}

.HubPage .Copy.variant--Superhero {
    --titleFontMin: 50;
    --titleFontMax: 76;
    --viewportMin: var(--viewportWidthSmall);
    --viewportMax: var(--viewportWidthMedium);
    --titleFontSize: calc(var(--titleFontMin)*1px + (var(--titleFontMax) - var(--titleFontMin))*(var(--windowWidth) - var(--viewportMin)*1px)/(var(--viewportMax) - var(--viewportMin)));
    ;
    --titleLineHeight: 1.04;
    --titleLetterSpacing: -0.04em;
    --titleWeight: var(--fontWeightSemibold);
    --titleFont: var(--titleWeight) var(--titleFontSize)/var(--titleLineHeight) var(--fontFamily);
    --headerMarginTop: 100px;
    --headerPadding: 0 var(--headerPaddingRight) 0 var(--headerPaddingLeft);
    min-width: 0;
    padding: var(--headerPadding);
    --rowGap: var(--rowGapLarge);
    --paragraphGap: 20px
}

@media (min-width:600px) {
    .HubPage .Copy.variant--Superhero {
        --headerPaddingRight: var(--columnPaddingNone);
        --titleFontMin: 60;
        --viewportMin: var(--viewportWidthMedium);
        --viewportMax: var(--viewportWidthLarge)
    }
}

@media (min-width:900px) and (max-height:700px) {
    .HubPage .Copy.variant--Superhero {
        --titleFontSize: 64px
    }
}

@media (min-width:1112px) {
    .HubPage .Copy.variant--Superhero {
        --titleFontSize: 76px
    }
}

.HomepageHeroHeader {
    --titleFontMin: 50;
    --titleFontMax: 78;
    --viewportMin: var(--viewportWidthSmall);
    --viewportMax: var(--viewportWidthMedium);
    --titleFontSize: calc(var(--titleFontMin)*1px + (var(--titleFontMax) - var(--titleFontMin))*(var(--windowWidth) - var(--viewportMin)*1px)/(var(--viewportMax) - var(--viewportMin)));
    ;
    --titleLineHeight: 1.04;
    --titleLetterSpacing: -0.04em;
    --titleWeight: var(--fontWeightBold);
    --titleFont: var(--titleWeight) var(--titleFontSize)/var(--titleLineHeight) var(--fontFamily);
    --headerMarginTop: 100px;
    --headerPadding: 0 var(--headerPaddingRight) 0 var(--headerPaddingLeft);
    --captionHeight: 25px;
    --captionTitleGap: 48px;
    --captionTitleGapSmall: 32px;
    --captionMarginTop: calc(var(--headerMarginTop) - var(--captionHeight) - var(--captionTitleGap));
    position: relative;
    min-width: 0;
    padding: var(--headerPadding)
}

.MktRoot[lang^=fr] .HomepageHeroHeader {
    --titleFontMin: 40;
    --titleFontMax: 68
}

.MktRoot[lang=fr-ca-au] .HomepageHeroHeader, .MktRoot[lang=fr-ca-gb] .HomepageHeroHeader, .MktRoot[lang=fr-ca-us] .HomepageHeroHeader {
    --titleFontMin: 40;
    --titleFontMax: 60
}

.MktRoot[lang=es-419-au] .HomepageHeroHeader, .MktRoot[lang=es-419-gb] .HomepageHeroHeader, .MktRoot[lang=es-419-us] .HomepageHeroHeader, .MktRoot[lang=es-au] .HomepageHeroHeader, .MktRoot[lang=es-gb] .HomepageHeroHeader, .MktRoot[lang=es-us] .HomepageHeroHeader {
    --titleFontMin: 38;
    --titleFontMax: 62
}

.MktRoot[lang*=ja] .HomepageHeroHeader {
    --titleFontMin: 34;
    --titleFontMax: 62
}

@media (min-width:600px) {
    .HomepageHeroHeader {
        --headerPaddingRight: var(--columnPaddingNone);
        --titleFontMin: 60;
        --titleFontMax: 94;
        --viewportMin: var(--viewportWidthMedium);
        --viewportMax: var(--viewportWidthLarge)
    }

    .MktRoot[lang^=fr] .HomepageHeroHeader {
        --titleFontMin: 36;
        --titleFontMax: 72
    }

    .MktRoot[lang=fr-au] .HomepageHeroHeader, .MktRoot[lang=fr-gb] .HomepageHeroHeader, .MktRoot[lang=fr-us] .HomepageHeroHeader {
        --titleFontMin: 46;
        --titleFontMax: 76
    }

    .MktRoot[lang=es-419-au] .HomepageHeroHeader, .MktRoot[lang=es-419-gb] .HomepageHeroHeader, .MktRoot[lang=es-419-us] .HomepageHeroHeader, .MktRoot[lang=es-au] .HomepageHeroHeader, .MktRoot[lang=es-gb] .HomepageHeroHeader, .MktRoot[lang=es-us] .HomepageHeroHeader {
        --titleFontMin: 46;
        --titleFontMax: 78
    }

    .MktRoot[lang*=ja] .HomepageHeroHeader {
        --titleFontMin: 40;
        --titleFontMax: 66
    }
}

@media (min-width:1112px) {
    .HomepageHeroHeader {
        --titleFontSize: 94px
    }

    .MktRoot[lang^=fr] .HomepageHeroHeader {
        --titleFontSize: 72px
    }

    .MktRoot[lang=fr-au] .HomepageHeroHeader, .MktRoot[lang=fr-gb] .HomepageHeroHeader, .MktRoot[lang=fr-us] .HomepageHeroHeader {
        --titleFontSize: 76px
    }

    .MktRoot[lang=es-419-au] .HomepageHeroHeader, .MktRoot[lang=es-419-gb] .HomepageHeroHeader, .MktRoot[lang=es-419-us] .HomepageHeroHeader, .MktRoot[lang=es-au] .HomepageHeroHeader, .MktRoot[lang=es-gb] .HomepageHeroHeader, .MktRoot[lang=es-us] .HomepageHeroHeader {
        --titleFontSize: 78px
    }

    .MktRoot[lang*=ja] .HomepageHeroHeader {
        --titleFontSize: 66px
    }
}

.HomepageHeroHeader__caption {
    margin-top: var(--captionMarginTop)
}

@media (min-width:600px) {
    .HomepageHeroHeader__caption {
        min-width: calc(100% + 100px)
    }
}

@media (min-width:900px) {
    .HomepageHeroHeader__caption {
        margin-top: 0
    }
}

.HomepageHeroHeader__title {
    margin-top: var(--headerMarginTop);
    position: relative;
    display: flex;
    align-items: flex-end;
    font: var(--titleFont);
    color: #bdc6d2;
    letter-spacing: var(--titleLetterSpacing,inherit)
}

.HomepageHeroHeader--hasCaption .HomepageHeroHeader__title {
    margin-top: var(--captionTitleGapSmall)
}

@media (min-width:600px) {
    .HomepageHeroHeader__title {
        min-width: calc(100% + 90px);
        min-height: 200px
    }
}

html[lang^=ja] .HomepageHeroHeader__title {
    font-weight: 600;
    font-variation-settings: "wght" 500
}

.HomepageHeroHeader__title--overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: var(--headerPadding);
    z-index: 2;
    color: #3a3a3a;
    opacity: .3
}

.HomepageHeroHeader__title--burn {
    mix-blend-mode: color-burn;
    opacity: 1
}

@media (min-width:1112px) {
    .HomepageHeroHeader__title--scaled {
        font-size: clamp(4.75rem,9.9vh,5.875rem)
    }

    @media (max-height:937px) {
        .HomepageHeroHeader__title--scaled {
            min-width: auto
        }
    }

    @media (max-height:800px) {
        .HomepageHeroHeader__title--scaled {
            padding-right: 22px
        }
    }

    .Copy.variant--Superhero:has(.HomepageHeroHeader__title--scaled) {
        --rowGap: clamp(1.5rem,3.28vh,2rem)
    }
}

.HeroCaption__container {
    display: inline-flex;
    position: relative;
    font: var(--fontWeightNormal) 13px/18px var(--fontFamily);
    letter-spacing: .2px;
    color: var(--knockoutColor)
}

    .HeroCaption__container:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        border-radius: inherit;
        mix-blend-mode: multiply;
        content: ""
    }

    .HeroCaption__container.HeroCaption--onDark:before {
        background: #121252;
        opacity: .3
    }

    .HeroCaption__container.HeroCaption--onLight {
        color: #0a2540
    }

        .HeroCaption__container.HeroCaption--onLight:before {
            background: #e7eaef
        }

@media (max-width:749px) {
    .HeroCaption__container {
        padding: 8px 12px 9px 16px;
        border-radius: 4px
    }
}

@media (min-width:750px) {
    .HeroCaption__container {
        padding: 3px 8px 4px 12px;
        border-radius: 12.5px;
        white-space: nowrap
    }
}

@media (max-width:749px) {
    .HeroCaption__container.HeroCaption--noLink {
        padding: 8px 16px 9px
    }
}

@media (min-width:750px) {
    .HeroCaption__container.HeroCaption--noLink {
        padding: 3px 12px 4px
    }
}

.HeroCaption__content {
    z-index: 3
}

.HeroCaption__title {
    font-weight: var(--fontWeightBold)
}

.HeroCaption__separator {
    margin: 0 5px 0 4px
}

@media (max-width:749px) {
    .HeroCaption__separator.HeroCaption__separator--desktopOnly {
        display: none
    }
}

.HeroCaption__link.Link {
    --linkColor: currentColor;
    --linkHoverColor: currentColor;
    --linkHoverOpacity: 0.6;
    --linkOpacity: 0.9
}

@media (max-width:749px) {
    .HeroCaption__link.Link {
        display: flex;
        align-items: center;
        margin-top: 2px
    }
}

.HomepageHeroGradient {
    --gradientColorZero: #a960ee;
    --gradientColorOne: #ff333d;
    --gradientColorTwo: #90e0ff;
    --gradientColorThree: #ffcb57;
    --gradientColorZeroTransparent: rgba(169,96,238,0);
    --gradientColorOneTransparent: rgba(255,51,61,0);
    --gradientColorTwoTransparent: rgba(144,224,255,0);
    --gradientColorThreeTransparent: rgba(255,203,87,0);
    --gradientAngle: var(--angleStrong);
    --gradientHeight: calc(100% + var(--sectionPaddingTop) + var(--transformOriginX)*var(--sectionAngleSin));
    --offsetX: var(--gutterWidth);
    --transformOriginX: -60px;
    --sectionAngleSin: var(--angleStrongSin);
    position: absolute;
    bottom: 0;
    top: auto;
    left: calc(var(--offsetX)*-1);
    width: var(--windowWidth);
    height: var(--gradientHeight);
    transform-origin: var(--transformOriginX) 100%;
    transform: skewY(var(--gradientAngle));
    overflow: hidden;
    border: none
}

@media (min-width:600px) {
    .HomepageHeroGradient {
        --transformOriginX: calc(var(--gutterWidth)*0.8)
    }
}

.Gradient {
    overflow: hidden
}

.Gradient__canvas {
    position: relative;
    display: block;
    width: inherit;
    height: 100%;
    opacity: 0
}

    .Gradient__canvas.isLoaded {
        opacity: 1;
        transition: opacity 1.8s ease-in 50ms
    }

.Gradient__guides {
    --guideDashedColor: rgba(0,0,0,0.3);
    --guideSolidColor: rgba(0,0,0,0.2);
    mix-blend-mode: soft-light
}

.Gradient:after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    min-width: 1000px;
    width: 100%;
    height: 100%;
    background: radial-gradient(var(--gradientColorZero) 40%,var(--gradientColorTwoTransparent) 60%) -620px -180px no-repeat,radial-gradient(var(--gradientColorThree) 33%,var(--gradientColorThreeTransparent) 67%) -120px -24px no-repeat,radial-gradient(var(--gradientColorTwo) 40%,var(--gradientColorTwoTransparent) 70%) -470px 150px no-repeat,var(--gradientColorZero)
}

@media (min-width:600px) {
    .Gradient:after {
        background: radial-gradient(var(--gradientColorZero) 40%,var(--gradientColorTwoTransparent) 60%) -420px -180px no-repeat,radial-gradient(var(--gradientColorThree) 23%,var(--gradientColorThreeTransparent) 70%) 240px -24px no-repeat,radial-gradient(var(--gradientColorTwo) 30%,var(--gradientColorTwoTransparent) 70%) -270px 220px no-repeat,var(--gradientColorZero)
    }
}

@media (min-width:900px) {
    .Gradient:after {
        background: radial-gradient(var(--gradientColorThree) 23%,var(--gradientColorThreeTransparent) 67% 100%) 385px -24px,radial-gradient(var(--gradientColorOne) 0,var(--gradientColorOneTransparent) 60% 100%) -940px 290px,radial-gradient(var(--gradientColorTwo) 10%,var(--gradientColorTwoTransparent) 60% 100%) -120px 250px,radial-gradient(var(--gradientColorOne) 40%,var(--gradientColorOneTransparent) 57% 100%) 495px -44px,radial-gradient(var(--gradientColorZero) 30%,var(--gradientColorZeroTransparent) 67% 100%) 122px -120px,radial-gradient(var(--gradientColorZero) 10%,var(--gradientColorZeroTransparent) 60% 100%) -420px 120px,radial-gradient(var(--gradientColorTwo) 15%,var(--gradientColorTwoTransparent) 50% 100%) -620px 0,radial-gradient(var(--gradientColorTwo) 25%,var(--gradientColorTwoTransparent) 50% 100%) 520px -250px,var(--gradientColorZero);
        background-repeat: repeat-y
    }
}

.Gradient.isLoaded:after {
    transition: transform 1s 1s;
    transform: translateX(-50%) scaleY(.995)
}

.HomepageHeroGraphic {
    position: relative;
    z-index: 2
}

.HomepageHeroGraphic__phone.PhoneGraphic {
    --phoneWidth: 270px;
    --phoneHeight: 536px;
    position: relative;
    margin-top: 60px;
    left: 140px
}

.HomepageHeroGraphic__dashboard {
    position: absolute;
    top: 0;
    left: 253px
}

.HomepageDashboardGraphic {
    display: grid;
    grid: auto/132px 1fr;
    gap: 24px;
    width: 975px;
    padding: 24px 0 24px 24px;
    border-radius: 8px;
    background: linear-gradient(hsla(0,0%,100%,.4),hsla(0,0%,100%,.3) 25%,rgba(246,249,252,.3) 50%,#f6f9fc 60%);
    box-shadow: inset 0 1px 1px 0 hsla(0,0%,100%,.1),0 50px 100px -20px rgba(50,50,93,.25),0 30px 60px -30px rgba(0,0,0,.3);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: .2px;
    line-height: 14px;
    color: #425466;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.HomepageDashboardGraphic__company {
    display: grid;
    grid: max-content/auto-flow max-content;
    gap: 8px;
    align-items: center;
    font-weight: 620;
    color: #fff;
    letter-spacing: .8px;
    text-transform: uppercase
}

.HomepageDashboardGraphic__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-right: 16px
}

.HomepageDashboardGraphic__searchBar {
    display: flex;
    align-items: center;
    border-radius: 4px;
    height: 20px;
    width: 278px;
    background: #fff;
    color: #62788d
}

.HomepageDashboardGraphic__searchIcon {
    width: 10px;
    margin: 1px 5px 0 6px
}

.HomepageDashboardGraphic__body {
    display: grid;
    grid: auto/1fr 20px;
    gap: 12px;
    margin-right: 12px
}

.HomepageDashboardGraphic__content {
    display: grid;
    gap: 12px
}

.HomepageDashboardGraphic__topSection {
    background: #fff;
    border-radius: 4px;
    padding: 18px 20px 20px
}

.HomepageDashboardGraphic__title {
    font: var(--fontWeightBold) 17px/22.9px var(--fontFamily);
    color: #414552;
    border-bottom: 1px solid #ebeef1;
    padding-bottom: 5px
}

.HomepageDashboardGraphic__todaySection {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 46px;
    padding: 20px 0 0
}

.HomepageDashboardGraphic__todaySection--right {
    display: grid;
    gap: 20px
}

.HomepageDashboardGraphic__netVolumeLayout {
    display: flex;
    justify-content: space-between;
    width: 255px
}

.HomepageDashboardGraphic__copy--XSmall {
    font: var(--fontWeightNormal) 10px/12px var(--fontFamily);
    color: #727f96
}

    .HomepageDashboardGraphic__copy--XSmall b {
        color: #15be53;
        font: var(--fontWeightSemibold) 10px/12px var(--fontFamily)
    }

.HomepageDashboardGraphic__copy--XSmallFancy {
    color: #635bff
}

.HomepageDashboardGraphic__copy--small {
    font: var(--fontWeightNormal) 11px/14px var(--fontFamily);
    letter-spacing: -.1px;
    color: #727f96
}

    .HomepageDashboardGraphic__copy--small b {
        font: var(--fontWeightSemibold) 11px/14px var(--fontFamily);
        letter-spacing: -.1px;
        color: #0a2540
    }

.HomepageDashboardGraphic__copy--smallInvoices {
    font: var(--fontWeightNormal) 11px/14px var(--fontFamily);
    letter-spacing: -.1px;
    color: #0a2540
}

.HomepageDashboardGraphic__copy--smallHeaderFancy {
    font: var(--fontWeightSemibold) 11px/14px var(--fontFamily);
    color: #635bff;
    align-self: start;
    margin-top: 2px
}

.HomepageDashboardGraphic__copy--medium {
    font: var(--fontWeightNormal) 12px/15px var(--fontFamily);
    letter-spacing: -.1px;
    color: #727f96
}

    .HomepageDashboardGraphic__copy--medium b {
        font: var(--fontWeightBold) 12px/15px var(--fontFamily);
        letter-spacing: -.1px;
        color: #0a2540
    }

.HomepageDashboardGraphic__copy--large, .HomepageDashboardGraphic__copy--large b {
    font: var(--fontWeightNormal) 14px/18px var(--fontFamily);
    color: #0a2540
}

.HomepageDashboardGraphic__flexGroup {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.HomepageDashboardGraphic__flexGroup--baseline {
    align-items: baseline
}

.HomepageDashboardGraphic__flexGroup--gap {
    display: flex;
    gap: 6px;
    align-items: baseline
}

    .HomepageDashboardGraphic__flexGroup--gap svg {
        flex-shrink: 0
    }

.HomepageDashboardGraphic__verticalSpacing {
    margin-top: 4px
}

.HomepageDashboardGraphic__mainGraphSvg {
    margin-top: 8px
}

.HomepageDashboardGraphic__graphTimeLayout {
    display: flex;
    justify-content: space-between
}

.HomepageDashboardGraphic__mainGraph {
    margin-top: 6px
}

.HomepageDashboardGraphic__separator {
    width: 100%;
    height: 1px;
    background: #ebeef1
}

.HomepageDashboardGraphic__bottomSection {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px
}

.HomepageDashboardGraphic__column {
    background: #fff;
    border-radius: 4px;
    padding: 18px 16px 16px
}

.HomepageDashboardGraphic__sideBar {
    display: flex;
    align-items: center;
    justify-content: center
}

.HomepageDashboardGraphic__iconLayout {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.HomepageDashboardGraphic__sectionGraph {
    margin: 10px 0
}

.HomepageDashboardGraphic__paymentsBar {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 3.38px;
    overflow: hidden;
    margin-top: 5px
}

.HomepageDashboardGraphic__lineItem {
    border-bottom: 1px solid #ebeef1;
    padding: 10px 0
}

.HomepageDashboardGraphic__block {
    width: 8px;
    height: 8px;
    border-radius: 2.54px;
    background: #96f
}

.HomepageDashboardGraphic__block--blue {
    background: #0073e6
}

.HomepageDashboardGraphic__block--teal {
    background: #00c4c4
}

.HomepageDashboardGraphic__paymentsBar--purple {
    width: 40%;
    height: 100%;
    background: #96f
}

.HomepageDashboardGraphic__paymentsBar--blue {
    width: 40%;
    height: 100%;
    background: #0073e6
}

.HomepageDashboardGraphic__paymentsBar--teal {
    width: 20%;
    height: 100%;
    background: #00c4c4
}

.HomepageDashboardGraphic__updatedTime {
    margin-top: 10px
}

.CheckoutPhoneGraphic {
    --checkoutPhoneVerticalPadding: 5px;
    --checkoutPhoneInputMinHeight: 24px;
    --checkoutPhoneFontSize: 11px;
    --checkoutPhoneContainerPaddingVertical: 24px;
    --checkoutPhoneContainerPaddingHorizontal: 16px;
    --checkoutPhoneBackToArrowHeight: 8px;
    --checkoutPhonePayButtonColor: #0a2540
}

html[lang*=ja] .CheckoutPhoneGraphic {
    --checkoutPhoneFontSize: 10px
}

.CheckoutPhoneGraphic {
    height: 100%;
    padding: var(--checkoutPhoneContainerPaddingVertical) var(--checkoutPhoneContainerPaddingHorizontal);
    border-radius: 28px;
    background: #fff;
    font-size: var(--checkoutPhoneFontSize);
    font-weight: var(--fontWeightNormal);
    letter-spacing: .2px
}

.CheckoutPhoneGraphic--scaleLarge {
    --checkoutPhoneVerticalPadding: 8px;
    --checkoutPhoneInputMinHeight: 28px;
    --checkoutPhoneFontSize: 13px;
    --checkoutPhoneBackToArrowHeight: 10px
}

    .CheckoutPhoneGraphic--scaleLarge .CheckoutPhoneGraphic__applePay {
        height: 16px
    }

.CheckoutPhoneGraphic--logo {
    padding-top: 0
}

.CheckoutPhoneGraphic__backTo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: -10px 0 20px
}

.CheckoutPhoneGraphic__backToArrow {
    margin-right: var(--checkoutPhoneBackToArrowHeight);
    height: var(--checkoutPhoneBackToArrowHeight);
    width: auto
}

.CheckoutPhoneGraphic__backTo + .CheckoutPhoneGraphic__image {
    margin-top: 20px;
    height: 60px
}

.CheckoutPhoneGraphic__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px
}

.CheckoutPhoneGraphic__image {
    display: flex;
    justify-content: center;
    height: 80px
}

    .CheckoutPhoneGraphic__image .Picture {
        border-radius: 4px;
        overflow: hidden
    }

.CheckoutPhoneGraphic__description {
    margin-top: 15px;
    text-align: center;
    color: #0a2540;
    font-weight: var(--fontWeightSemibold)
}

.CheckoutPhoneGraphic__price {
    margin: 2px 0 16px;
    text-align: center
}

.CheckoutPhoneGraphic__button {
    border-radius: 4px;
    padding: var(--checkoutPhoneVerticalPadding) 0;
    text-align: center;
    font-weight: var(--fontWeightSemibold);
    color: #fff;
    background: var(--checkoutPhonePayButtonColor);
    box-shadow: 0 2px 4px -1px rgba(50,50,93,.25),0 1px 3px -1px rgba(0,0,0,.3)
}

.CheckoutPhoneGraphic__buttonsContainer {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.CheckoutPhoneGraphic__button {
    display: grid;
    place-items: center
}

.CheckoutPhoneGraphic__linkButton {
    background-color: #00d66f
}

.CheckoutPhoneGraphic__applePay {
    display: block;
    height: 14px;
    margin: 0 auto
}

.CheckoutPhoneGraphic__separator {
    margin: 16px 0 12px;
    text-align: center;
    background: linear-gradient(#e6ebf1,#e6ebf1) no-repeat 0 50%/100% 1px
}

.CheckoutPhoneGraphic__separatorTitle {
    display: inline;
    padding: 0 6px;
    background: #fff
}

.CheckoutPhoneGraphic__input {
    min-height: var(--checkoutPhoneInputMinHeight);
    line-height: var(--checkoutPhoneInputMinHeight);
    margin: 6px 0 16px;
    color: #62788d;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(50,50,93,.07),0 2px 3px -1px rgba(50,50,93,.12),0 1px 3px -1px rgba(0,0,0,.12)
}

.CheckoutPhoneGraphic__input--card {
    display: grid;
    grid: auto/repeat(2,1fr)
}

.CheckoutPhoneGraphic__placeholder {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: column;
    padding-left: 8px
}

.CheckoutPhoneGraphic__placeholder--number {
    gap: 0 6px;
    grid-area: auto/span 2;
    align-items: center;
    padding-right: 6px;
    border-bottom: 1px solid #e6ebf1
}

.CheckoutPhoneGraphic__placeholder--cvc {
    padding-right: 4px;
    border-left: 1px solid #e6ebf1;
    white-space: nowrap
}

.CheckoutPhoneGraphic__cvcIcon {
    margin: 4px 0 0 4px
}

.CheckoutPhoneGraphic__input--country {
    margin-bottom: 24px
}

.CheckoutPhoneGraphic__placeholder--country {
    align-items: center;
    padding-right: 9px;
    border-bottom: 1px solid #e6ebf1
}

.ApplePaySheet {
    --paysheetCancelButtonSize: 13px;
    --paysheetLogoWidth: 39px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.ApplePaySheet--isHidden .ApplePaySheet__overlay, .ApplePaySheet--isHidden .ApplePaySheet__sheet {
    opacity: 0;
    pointer-events: none
}

    .ApplePaySheet--isHidden .ApplePaySheet__overlay .Face, .ApplePaySheet--isHidden .ApplePaySheet__sheet .Face {
        pointer-events: none
    }

.ApplePaySheet__overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #0b3055;
    opacity: .2
}

.ApplePaySheet__sheet {
    background: #fff;
    box-shadow: 0 6px 12px -2px rgba(50,50,93,.12),0 3px 7px -3px rgba(0,0,0,.15);
    border-radius: 8px 8px 30px 30px;
    position: absolute;
    right: 4px;
    bottom: 4px;
    left: 4px
}

.ApplePaySheet__row {
    display: grid;
    grid: auto/54px 1fr auto;
    gap: 16px;
    margin-left: 12px;
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid #e6ebf1;
    font-size: 10px;
    letter-spacing: .3px;
    font-weight: 300
}

.ApplePaySheet__row--header {
    grid: auto/1fr auto;
    align-items: center
}

.ApplePaySheet__logo {
    width: var(--paysheetLogoWidth)
}

.ApplePaySheet__cancelButton {
    font-size: var(--paysheetCancelButtonSize);
    letter-spacing: .2px;
    color: #2a69fe
}

.ApplePaySheet__checkoutInfo, .ApplePaySheet__checkoutLabel {
    text-transform: uppercase;
    line-height: 16px
}

.ApplePaySheet__checkoutLabel {
    text-align: right;
    color: #66788f;
    text-overflow: ellipsis;
    overflow: hidden
}

.ApplePaySheet__checkoutInfo {
    color: #425466
}

.ApplePaySheet__checkoutArrow {
    width: 6px;
    align-self: center
}

.ApplePaySheet__faceID {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 12px auto;
    height: 40px
}

.Face {
    cursor: pointer;
    pointer-events: auto;
    transform-origin: 50% 0;
    transform: scale(.37)
}

@media (prefers-reduced-motion:reduce) {
    .Face.is-active {
        --faceAnimationDisabled: none
    }
}

.Face__borders {
    width: 100px;
    height: 100px;
    transform-origin: 50% 50%
}

.is-resting.Face .Face__borders {
    animation: var(--faceAnimationDisabled,border-rest 1s ease-in-out forwards infinite)
}

.Face__border--copy path, .Face__border path {
    transition: d .2s,stroke .2s
}

.Face__border {
    opacity: 1
}

.Face__border, .Face__border--copy {
    transition: opacity .4s;
    transform-origin: 50%
}

.Face__border--copy {
    opacity: 0
}

.Face path {
    stroke: #999;
    stroke-width: 4px;
    fill: none;
    stroke-linecap: round
}

.Face__check {
    width: 100px;
    height: 100px
}

    .Face__check path {
        stroke-linecap: square;
        stroke-width: 6px;
        stroke-dashoffset: 60px;
        stroke-dasharray: 60px 60px
    }

.Face.is-checked .Face__check path {
    stroke-dashoffset: 0;
    transition: .4s
}

.Face.is-checked .Face__phone {
    opacity: 0 !important
}

.Face.is-active path, .Face.is-active rect {
    stroke: #0278fc
}

.Face__phone {
    transition: .25s ease-out
}

.Face svg {
    position: absolute;
    left: 0;
    top: 0
}

.Face__phoneContainer {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    transform: translateZ(0)
}

.Face.is-phone .Face__phone {
    opacity: 1;
    transform: perspective(500px) translateY(12px) rotateX(0deg);
    animation: var(--faceAnimationDisabled,phone-tap 2.7s ease-in-out forwards infinite .4s)
}

.Face .Face__phoneClip, .Face .Face__phoneGlare, .Face .Face__phoneIcon {
    transform-origin: 50% 50%;
    transform: translateY(0)
}

.Face.is-phone .Face__phoneClip, .Face.is-phone .Face__phoneGlare, .Face.is-phone .Face__phoneIcon {
    transform: translateY(-76px);
    transition: .3s ease-out
}

.Face path.Face__phoneGlare {
    fill: #e7f0f9;
    stroke: none
}

.Face.is-phone .Face__phoneGlare {
    animation: var(--faceAnimationDisabled,phone-shimmer 2.7s ease-in-out forwards infinite .4s)
}

.Face.is-phone .Face__features {
    transform: perspective(500px) rotateX(-30deg) translateY(-10px);
    transition: .3s;
    opacity: 0
}

.Face__text span:first-of-type {
    opacity: 1;
    transition: .3s
}

.Face__text span:last-of-type {
    position: absolute;
    opacity: 0;
    transition: .3s;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    white-space: nowrap
}

.Face.is-phone .Face__text span:first-of-type {
    opacity: 0
}

.Face.is-phone .Face__text span:last-of-type {
    opacity: 1
}

.Face.is-phone.is-checked .Face__text span {
    opacity: 0
}

.Face.is-active rect {
    stroke-width: 2.25
}

.Face__features {
    transition: .3s;
    transform-origin: 50% 50%
}

    .Face__features.is-hidden {
        opacity: 0
    }

        .Face__features.is-hidden .Face__eye, .Face__features.is-hidden .Face__mouth {
            transition: .2s
        }

.Face__eye {
    stroke-width: 5.5 !important
}

.Face__text {
    position: relative;
    margin-top: 10px;
    text-align: center;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
    font-size: 28px;
    color: var(--slate5)
}

@keyframes phone-tap {
    0% {
        transform: perspective(500px) translateY(12px) rotateX(0deg)
    }

    50% {
        transform: perspective(500px) translateY(12px) rotateX(48deg) scale(.9)
    }

    to {
        transform: perspective(500px) translateY(12px) rotateX(0deg)
    }
}

@keyframes border-rest {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }

    to {
        transform: scale(1)
    }
}

@keyframes phone-shimmer {
    0% {
        transform: skewY(40deg) translateY(-66px)
    }

    50% {
        transform: skewY(40deg) translateY(10px)
    }

    to {
        transform: skewY(40deg) translateY(-66px)
    }
}

.PhoneGraphic {
    --phoneBorderRadius: 36px;
    --phoneScreenBorderRadius: 29px;
    --phoneWidth: 264px;
    --phoneHeight: 533px;
    --phoneGraphicShadow: 0 50px 100px -20px rgba(50,50,93,0.25),0 30px 60px -30px rgba(0,0,0,0.3),inset 0 -2px 6px 0 rgba(10,37,64,0.35);
    width: var(--phoneWidth);
    height: var(--phoneHeight);
    padding: 8px;
    border-radius: var(--phoneBorderRadius);
    background: #f6f9fc;
    box-shadow: var(--phoneGraphicShadow);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-size: 16px
}

.HubPage .PhoneGraphic {
    --phoneGraphicShadow: 0px 20px 39px -20px rgba(0,0,0,0.3),0px 32px 66px -13px rgba(50,50,93,0.25),0px -1px 3px 0px rgba(10,37,64,0.35) inset
}

.PhoneGraphic--scaleLarge {
    --phoneWidth: 301px;
    --phoneHeight: 615px;
    border-radius: 42px
}

.PhoneGraphic__screen {
    position: relative;
    height: 100%;
    border-radius: var(--phoneScreenBorderRadius);
    background: #fff
}

.ColumnLayout {
    --columnRowGap: var(--rowGapLarge);
    display: grid;
    row-gap: var(--columnRowGap);
    align-items: flex-start
}

.HubPage .ColumnLayout {
    -moz-column-gap: var(--gridColumnGap);
    column-gap: var(--gridColumnGap)
}

.ColumnLayout--alignCenter {
    align-items: center
}

.ColumnLayout--alignBottom {
    align-items: flex-end
}

.ColumnLayout--alignStretch {
    align-items: stretch
}

@media (min-width:600px) {
    .ColumnLayout[data-columns="1,1,1"], .ColumnLayout[data-columns="1,1,1,1"], .ColumnLayout[data-columns="2,1"], .ColumnLayout[data-columns="2,1,0"], .ColumnLayout[data-columns="2,1,1"], .ColumnLayout[data-columns="2,2"], .ColumnLayout[data-columns="3,2"] {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:599px) {
    .ColumnLayout[data-columns="2,2"].ColumnLayout--reflowDirectionRightToLeft > :first-child {
        order: 1
    }
}

@media (max-width:899px) {
    .ColumnLayout[data-columns="1,3"]:not(.ColumnLayout--reflowDirectionLeftToRight) > :first-child, .ColumnLayout[data-columns="3,1"].ColumnLayout--reflowDirectionRightToLeft > :first-child, .ColumnLayout[data-columns="3,2"].ColumnLayout--reflowDirectionRightToLeft > :first-child {
        order: 1
    }
}

@media (min-width:600px) and (max-width:899px) {
    .ColumnLayout[data-columns-tablet="1"] {
        grid-template-columns: 1fr
    }

    .ColumnLayout[data-columns-tablet="3,1"] {
        grid-template-columns: 3fr 1fr
    }

    .ColumnLayout[data-columns="2,1,1"] > :first-child {
        grid-area: 1/span 2
    }
}

@media (min-width:900px) {
    .ColumnLayout[data-columns="1,1,1"] {
        grid-template-columns: repeat(3,1fr)
    }

    .ColumnLayout[data-columns="2,1"] {
        grid-template-columns: 2fr 1fr
    }

    .ColumnLayout[data-columns="1,1,1,1"] {
        grid-template-columns: repeat(4,1fr)
    }

    .ColumnLayout[data-columns="1,1"] {
        grid-template-columns: repeat(2,1fr)
    }

    .ColumnLayout[data-columns="1,3"] {
        grid-template-columns: 1fr minmax(0,3fr)
    }

    .ColumnLayout[data-columns="3,1"] {
        grid-template-columns: 3fr 1fr
    }

    .ColumnLayout[data-columns="2,1,1"] {
        grid-template-columns: 2fr repeat(2,1fr)
    }

    .ColumnLayout[data-columns="2,1,0"] {
        grid-template-columns: 2fr 1fr 1fr
    }

    .ColumnLayout[data-columns="1,2,1"] {
        grid-template-columns: 1fr 2fr 1fr
    }
}

@media (min-width:1112px) {
    .ColumnLayout[data-columns="3,2"] {
        grid-template-columns: 3fr 2fr;
        min-width: calc(var(--columnWidth)*5)
    }
}

.HubPage .ColumnLayout[data-columns="2,1"] {
    grid-template-columns: repeat(var(--gridColumnCount),1fr)
}

    .HubPage .ColumnLayout[data-columns="2,1"] > :nth-child(n) {
        grid-column: 1/-1
    }

@media (min-width:900px) {
    .HubPage .ColumnLayout[data-columns="2,1"] > :nth-child(odd) {
        grid-column: span 8
    }

    .HubPage .ColumnLayout[data-columns="2,1"] > :nth-child(2n) {
        grid-column: span 4
    }
}

.HubPage .ColumnLayout[data-columns="1,1,1"] {
    grid-template-columns: repeat(var(--gridColumnCount),1fr)
}

    .HubPage .ColumnLayout[data-columns="1,1,1"] > :nth-child(n) {
        grid-column: span 4
    }

.Section {
    --sectionAngleSin: var(--angleNormalSin);
    --sectionAngle: 0;
    --sectionPaddingSmallMax: 110;
    --sectionPaddingXSmallMax: 72;
    --sectionPaddingMin: 72;
    --sectionPaddingMax: var(--sectionPaddingNormalMax);
    --sectionPaddingTopMax: var(--sectionPaddingMax);
    --sectionPaddingBottomMax: var(--sectionPaddingMax);
    --sectionMarginTop: 0;
    --sectionMarginBottom: 0;
    --sectionAngleHeight: calc(var(--windowWidth)*var(--sectionAngleSin));
    --sectionAnglePaddingBaseMin: 100;
    --sectionAnglePaddingBaseMax: var(--sectionPaddingMax);
    --sectionAnglePaddingTopBaseMax: var(--sectionAnglePaddingBaseMax);
    --sectionAnglePaddingBottomBaseMax: var(--sectionAnglePaddingBaseMax);
    --sectionAngleMaxHeight: none;
    --sectionOverflow: hidden;
    --sectionTransformOrigin: 100% 0;
    --sectionBackgroundOverflow: visible;
    position: relative;
    z-index: 1;
    margin-top: var(--sectionMarginTop);
    margin-bottom: var(--sectionMarginBottom);
    color: var(--textColor);
    scroll-margin-top: calc(var(--fixedNavHeight) + var(--fixedNavSpacing) - var(--sectionPaddingTop))
}

.HubPage .Section, .Section {
    --sectionPaddingNormalMax: 128
}

.HubPage .Section {
    --sectionPaddingSmallMax: 112;
    --sectionPaddingXSmallMax: 96;
    --sectionPaddingMin: 96
}

.Section--hasStickyNav {
    --sectionOverflow: visible
}

.Section--hasBorderTop .Section__background {
    border-top: 1px solid rgba(230,235,241,.52)
}

.Section--paddingSmall {
    --sectionPaddingMax: var(--sectionPaddingSmallMax)
}

.Section--paddingXSmall {
    --sectionPaddingMax: var(--sectionPaddingXSmallMax)
}

.Section {
    --sectionAnglePaddingTopBase: calc(var(--sectionAnglePaddingBaseMin)*1px + (var(--sectionAnglePaddingTopBaseMax) - var(--sectionAnglePaddingBaseMin))*(var(--windowWidth)/737 - 0.50882px));
    ;
    --sectionAnglePaddingBottomBase: calc(var(--sectionAnglePaddingBaseMin)*1px + (var(--sectionAnglePaddingBottomBaseMax) - var(--sectionAnglePaddingBaseMin))*(var(--windowWidth)/737 - 0.50882px));
    ;
    --sectionPaddingTopGutterWidth: var(--gutterWidth);
    --sectionAnglePaddingTop: calc(var(--sectionAngleHeight) - var(--sectionAngleSin)*var(--sectionPaddingTopGutterWidth) + var(--sectionAnglePaddingTopBase));
    --sectionAnglePaddingBottom: calc(var(--sectionAngleHeight) - var(--sectionAngleSin)*var(--gutterWidth) + var(--sectionAnglePaddingBottomBase));
    --sectionPaddingTop: calc(var(--sectionPaddingMin)*1px + (var(--sectionPaddingTopMax) - var(--sectionPaddingMin))*(var(--windowWidth)/737 - 0.50882px));
    ;
    --sectionPaddingBottom: calc(var(--sectionPaddingMin)*1px + (var(--sectionPaddingBottomMax) - var(--sectionPaddingMin))*(var(--windowWidth)/737 - 0.50882px));
}

@media (max-width:375px) {
    .Section {
        --sectionAnglePaddingTopBase: calc(var(--sectionAnglePaddingBaseMin)*1px);
        --sectionAnglePaddingBottomBase: calc(var(--sectionAnglePaddingBaseMin)*1px);
        --sectionPaddingTop: calc(var(--sectionPaddingMin)*1px);
        --sectionPaddingBottom: calc(var(--sectionPaddingMin)*1px)
    }
}

@media (min-width:1112px) {
    .Section {
        --sectionAnglePaddingTopBase: calc(var(--sectionAnglePaddingTopBaseMax)*1px);
        --sectionAnglePaddingBottomBase: calc(var(--sectionAnglePaddingBottomBaseMax)*1px);
        --sectionPaddingTop: calc(var(--sectionPaddingTopMax)*1px);
        --sectionPaddingBottom: calc(var(--sectionPaddingBottomMax)*1px)
    }
}

.Section__background {
    position: relative;
    height: 100%;
    max-height: var(--sectionAngleMaxHeight);
    width: 100%;
    top: 0;
    left: 0;
    transform-origin: var(--sectionTransformOrigin);
    transform: skewY(var(--sectionAngle));
    background: var(--backgroundColor);
    overflow: hidden
}

.Section__background--isTransparent {
    background: hsla(0,0%,100%,.2);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px)
}

.Section__masked {
    overflow: var(--sectionOverflow)
}

.Section__container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    min-height: var(--sectionMinHeight)
}

.Section__layoutContainer {
    width: 100%;
    max-width: var(--layoutWidth);
    margin: 0 var(--columnPaddingNormal)
}

.Section__layout {
    padding: var(--sectionPaddingTop) 0 var(--sectionPaddingBottom)
}

.Section--angleTop {
    --sectionPaddingTop: var(--sectionAnglePaddingTop);
    --sectionAngle: var(--angleNormal)
}

.Section--angleBottom {
    --sectionTransformOrigin: 0 0
}

.Section--angleBoth, .Section--angleBottom {
    --sectionPaddingBottom: var(--sectionAnglePaddingBottom);
    --sectionMarginBottom: calc(var(--sectionAngleHeight)*-1)
}

.Section--angleBoth {
    --sectionPaddingTop: var(--sectionAnglePaddingTop);
    --sectionAngle: var(--angleNormal)
}

.Section--bleed3 {
    --sectionPaddingBottom: 0
}

.Section__backgroundMask {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: var(--sectionBackgroundOverflow)
}

.Section--paddingTopNone {
    --sectionPaddingTop: 0
}

.Section--paddingTopXXLarge {
    --sectionPaddingTop: 160px
}

@media (min-width:600px) {
    .Section--paddingTopXXLarge {
        --sectionPaddingTop: calc(90px + 15vw)
    }
}

.Section--paddingBottomNone {
    --sectionPaddingBottom: 0
}

.Section--marginTopLarge {
    --sectionMarginTop: 20px
}

@media (min-width:600px) {
    .Section--marginTopLarge {
        --sectionMarginTop: 40px
    }
}

@media (min-width:900px) {
    .Section--peekingContent .Section__layout {
        padding-top: calc(var(--sectionPaddingTop) + 45px)
    }
}

@media (min-width:900px) {
    .Section--peekingContent--invoicing .Section__layout {
        padding-top: calc(var(--sectionPaddingTop) - 65px)
    }
}

.UserLogoGrid {
    --gridColumnCount: 2;
    --gridRowGap: 60px;
    display: grid;
    grid: auto/repeat(var(--gridColumnCount),1fr);
    justify-items: center;
    align-items: center;
    row-gap: var(--gridRowGap)
}

@media (min-width:672px) {
    .UserLogoGrid {
        --gridColumnCount: 4
    }

    .UserLogoGrid--variantHalf {
        --gridColumnCount: 2
    }
}

@media (max-width:672px) and (min-width:600px) {
    .UserLogoGrid--variantHalf > svg {
        --userLogoMaxWidth: 142px
    }
}

.mobilemenu_back {
    display: none;
}

.SiteMenuSection {
    padding: 0;
}

.main_menu ul.submenu {
    z-index: 9;
}

    .main_menu ul.submenu ul {
        list-style: none;
        display: grid;
        grid: auto / auto;
        row-gap: 4px;
    }

.SiteMenu__section {
    position: relative;
    top: 0;
    left: 0;
    transform: translate(0);
}

.main_menu ul.submenu.one_col ul {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(1, 1fr);
}

.main_menu ul.submenu.one_col .SiteProductsNav__groupMenuContainer {
    grid-template-rows: 1fr; /* One row */
    grid-template-columns: repeat(1, 1fr); /* Three equal columns */
    gap: 10px; /* Space between grid items */
    --groupMenuMaxWidth: auto;
    --groupColumnWidth: auto;
}

.main_menu ul.submenu.one_col .SiteProductsNav {
    width: auto;
    max-width: 100%;
    grid: auto / 1fr;
}

@media screen and (max-width:1024px) {
    .mobilemenu_back {
        display: block;
    }

    .mobilemenu_back {
        background: #fff;
        display: flex;
        flex-direction: row;
        padding: 15px;
        border-bottom: 1px solid #f6f9fb;
        cursor: pointer;
    }

    .main_menu ul li.menu_item {
        position: initial;
    }

        .main_menu ul li.menu_item.sub_open ul.submenu {
            translate: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
            max-width: 100%;
            max-height: 100vh;
            overflow: auto;
            height: 100vh;
            width: 100vh;
        }

    .SiteProductsNav {
        display: flex;
        flex-direction: column;
    }

    .SiteProductsNav__groupList {
        display: flex;
        flex-direction: column;
    }

    .SiteProductsNav__groupTitle {
        text-align: left;
    }

    .SiteProductsNav__groupMenuContainer {
        display: flex;
        flex-direction: column;
    }

    .main_menu ul.submenu ul {
        display: flex;
        align-items: flex-start;
    }

    .SiteNavItem__link {
        text-align: left;
    }

    .main_menu ul.submenu {
        translate: 0;
    }

    .SiteMenu__section, .SiteMenuSection, .SiteProductsNav {
        max-width: 100%;
    }

    .SiteProductsNav__asideTitle {
        text-align: left;
    }

    .main_menu ul.submenu ul {
        text-align: left;
    }
}

span.SiteNavItem__bodyLabel {
    font-size: 13px;
}