.EnterpriseHubHero.Section {
            --sectionPaddingTop: 214px;
            --sectionPaddingBottom: 32px;
            background: linear-gradient(145deg, #24264d, #13172b 75%)
        }

        @media (min-width:900px) {
            .EnterpriseHubHero.Section {
                --sectionPaddingTop: 182px;
                --sectionPaddingBottom: 0
            }
        }

        .EnterpriseHubHero__copy.Copy {
            transition: opacity, transform .1s linear
        }

        .HubPage.MktRoot[lang^=fr] .EnterpriseHubHero__copy.Copy {
            --titleFontMin: 40;
            --titleFontMax: 66
        }

        .HubPage.MktRoot[lang^=de] .EnterpriseHubHero__copy.Copy {
            --titleFontMin: 30;
            --titleFontMax: 64
        }

        .HubPage.MktRoot[lang^=id] .EnterpriseHubHero__copy.Copy {
            --titleFontMin: 30;
            --titleFontMax: 66
        }

        @media (min-width:600px) {
            .HubPage.MktRoot[lang^=fr] .EnterpriseHubHero__copy.Copy {
                --titleFontMin: 66
            }

            .HubPage.MktRoot[lang^=es] .EnterpriseHubHero__copy.Copy {
                --titleFontMin: 50
            }

            .HubPage.MktRoot[lang^=de] .EnterpriseHubHero__copy.Copy {
                --titleFontMin: 58
            }

            .HubPage.MktRoot[lang^=id] .EnterpriseHubHero__copy.Copy {
                --titleFontMin: 66
            }
        }

        @media (max-width:899px) {
            .EnterpriseHubHero__copy.Copy {
                --headerMaxWidth: auto
            }
        }

        @media (min-width:900px) {
            .HubPage.MktRoot[lang^=fr] .EnterpriseHubHero__copy.Copy {
                --titleFontMin: 20;
                --titleFontMax: 66
            }

            .HubPage.MktRoot[lang^=de] .EnterpriseHubHero__copy.Copy {
                --titleFontMin: 30;
                --titleFontMax: 58
            }

            .HubPage.MktRoot[lang^=nl] .EnterpriseHubHero__copy.Copy {
                --titleFontMin: 48
            }

            .HubPage.MktRoot[lang^=id] .EnterpriseHubHero__copy.Copy {
                --titleFontMin: 36;
                --titleFontMax: 66
            }
        }

        @media (min-width:1112px) {
            .HubPage.MktRoot[lang^=fr] .EnterpriseHubHero__copy.Copy {
                --titleFontSize: 66px
            }

            .HubPage.MktRoot[lang^=de] .EnterpriseHubHero__copy.Copy {
                --titleFontSize: 58px
            }

            .HubPage.MktRoot[lang^=id] .EnterpriseHubHero__copy.Copy {
                --titleFontSize: 66px
            }
        }

        .EnterpriseHubHero__copy {
            visibility: hidden;
            margin-bottom: 16px
        }

        .EnterpriseHubHero__copy--isVisible {
            visibility: visible
        }

        .EnterpriseHubHero__copy .KnockoutText {
            display: inline-block;
            -webkit-mask-image: linear-gradient(45deg, transparent, #000 20%, #000 60%, transparent 80%);
            mask-image: linear-gradient(45deg, transparent, #000 20%, #000 60%, transparent 80%);
            -webkit-mask-position: -20%;
            mask-position: -20%;
            -webkit-mask-size: 1000%;
            mask-size: 1000%;
            transition: -webkit-mask-position 1s ease-out;
            transition: mask-position 1s ease-out;
            transition: mask-position 1s ease-out, -webkit-mask-position 1s ease-out
        }

        @media (min-width:900px) {

            .EnterpriseHubHero.Section,
            .EnterpriseHubHero__spacer {
                min-height: var(--heroHeight)
            }

            .EnterpriseHubHero.Section {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%
            }

            .EnterpriseHubHero.Section .Section__masked {
                position: absolute;
                inset: 0
            }

            .EnterpriseHubHero.Section .Section__layout {
                display: flex;
                margin: 0 var(--columnPaddingNormal)
            }

            .EnterpriseHubHero.Section .Section__container,
            .EnterpriseHubHero.Section .Section__layout,
            .EnterpriseHubHero__layout.ColumnLayout {
                min-height: 100%
            }
        }

        @media (max-width:899px) {
            .EnterpriseHubHero__layout.ColumnLayout[data-columns="2,2"] {
                grid-template-columns: auto;
                row-gap: 0
            }
        }

/* --- block --- */

.KnockoutText {
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            background-repeat: repeat-y;
            background-size: 100% auto;
            animation: knockoutText 5s linear infinite
        }

        @keyframes knockoutText {
            0% {
                background-position-y: 0
            }

            to {
                background-position-y: 100%
            }
        }

/* --- block --- */

.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;
            padding: 1px 0 4px
        }

        @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)
            }
        }

        @supports (hanging-punctuation:first) and (font:-apple-system-body) and (-webkit-appearance:none) {
            .CtaButton.variant--Link {
                text-wrap: wrap
            }
        }

        .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)
            }
        }

        .CtaButton.variant--Google {
            padding-left: 16px;
            padding-right: 16px;
            background-color: #fff;
            color: var(--buttonColor);
            border: 1px solid #e7ecf1;
            white-space: nowrap;
            transition-property: background-color
        }

        @media (pointer:fine) {
            .CtaButton.variant--Google:hover {
                background-color: #f6f9fc
            }
        }

        @media (pointer:coarse) {
            .CtaButton.variant--Google:active {
                background-color: #f6f9fc
            }
        }

        .CtaButton.variant--Google .HoverArrow {
            display: none
        }

        .CtaButton.variant--Google .GoogleIcon {
            position: relative;
            top: 3px;
            left: -4px
        }

/* --- block --- */

.HoverArrow {
            --arrowSpacing: 5px;
            --arrowHoverTransition: 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
            --arrowHoverOffset: translateX(3px);
            --arrowTipTransform: none;
            --arrowLineOpacity: 0;
            position: relative;
            top: var(--arrowTop, 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)
            }
        }

/* --- 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
        }

        .Copy__title.Copy__title--wrapPretty {
            text-wrap: pretty
        }

        @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;
            grid-template-columns: minmax(0, 1fr);
            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);
            word-wrap: break-word;
            overflow-wrap: break-word
        }

        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__body.Copy__body--wrapPretty {
            text-wrap: pretty
        }

        .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--alignCenter {
            justify-items: center;
            text-align: center
        }

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

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

        .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
            }
        }

/* --- block --- */

.CtaGroup {
            --ctaGroupGapSmall: 8px;
            --ctaGroupGapNormal: 16px;
            --ctaColGroupGap: var(--ctaGroupGapNormal);
            --ctaRowGroupGap: 12px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 0 0 0 var(--columnPaddingNormal);
            gap: var(--ctaRowGroupGap) var(--ctaColGroupGap)
        }

        .CtaGroup--inline {
            padding-left: 0
        }

        .CtaGroup--gapSmall {
            --ctaColGroupGap: var(--ctaGroupGapSmall)
        }

/* --- block --- */

.EnterpriseHubHeroWave .HubWave {
            right: -20px;
            bottom: -20px
        }

/* --- block --- */

.HubWave {
            position: absolute;
            z-index: -1;
            inset: 0
        }

/* --- block --- */

.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
        }

/* --- block --- */

.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--paddingTopMedium {
            --sectionPaddingTop: 80px
        }

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

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

        .Section--paddingTopAngleLarge.Section {
            --sectionAnglePaddingTopBaseMax: 172
        }

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

        .Section--paddingBottomSmall {
            --sectionPaddingBottom: 64px
        }

        .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)
            }
        }

/* --- block --- */

.EnterpriseHubTicker {
            --animationDuration: 45000;
            position: absolute;
            top: 82px;
            left: 0;
            right: 0;
            z-index: 1;
            transition: opacity .25s linear
        }

        @media (min-width:900px) {
            .EnterpriseHubTicker {
                position: fixed
            }
        }

        .EnterpriseHubTicker:hover {
            --animationDuration: 90000
        }

        .MktRoot[data-loading] .EnterpriseHubTicker {
            opacity: 0
        }

        .EnterpriseHubTicker__track {
            display: flex;
            background: hsla(0, 0%, 100%, .05);
            overflow: hidden
        }

        .EnterpriseHubTicker__tape {
            display: inline-flex;
            align-items: flex-start;
            gap: 80px;
            padding: 0 56px 0 24px
        }

        .EnterpriseHubTicker__item {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            height: 100px;
            padding: 24px 0;
            flex-shrink: 0;
            font: var(--fontWeightSemibold) 13px var(--fontFamily);
            letter-spacing: .2px;
            color: #fff;
            transition: opacity .15s linear
        }

        .EnterpriseHubTicker__item:hover {
            opacity: .6
        }

        .EnterpriseHubTicker__item:hover .EnterpriseHubTicker__itemArrowPath--initialArrow {
            transform: translateX(125%)
        }

        .EnterpriseHubTicker__item:hover .EnterpriseHubTicker__itemArrowPath--hoverArrow {
            transform: translateX(0)
        }

        .EnterpriseHubTicker__itemType {
            color: #7a73ff
        }

        .EnterpriseHubTicker__itemTitle {
            width: 210px
        }

        .EnterpriseHubTicker__itemArrow {
            display: grid;
            place-items: center;
            width: 16px;
            height: 16px
        }

        .EnterpriseHubTicker__itemArrowPath {
            transition: transform .25s ease-out, stroke .15s linear
        }

        .EnterpriseHubTicker__itemArrowPath--hoverArrow {
            transform: translateX(-125%)
        }

/* --- block --- */

.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
        }

/* --- block --- */

.EnterpriseHubHeroCardFan {
            position: relative;
            z-index: 2;
            background: #fff;
            visibility: hidden
        }

        .EnterpriseHubHeroCardFan--isVisible {
            visibility: visible
        }

        .EnterpriseHubHeroCardFan__section.Section {
            --backgroundColor: transparent;
            --sectionOverflow: visible;
            z-index: 3
        }

        .EnterpriseHubHeroCardFan__spacer {
            position: relative
        }

        .EnterpriseHubHeroCardFan__section.Section {
            --sectionPaddingTop: 32px;
            --sectionPaddingBottom: 92px
        }

        @media (min-width:900px) {
            .EnterpriseHubHeroCardFan__section.Section {
                --sectionPaddingBottom: 88px
            }
        }

        .EnterpriseHubHeroCardFan__section .Section__layout {
            position: relative
        }

        .EnterpriseHubHeroCardFan--fixed .Section__masked {
            position: fixed;
            width: 100%
        }

        .EnterpriseHubHeroCardFan__content {
            display: grid;
            grid: auto/repeat(var(--gridColumnCount), 1fr);
            gap: 24px var(--gridColumnGap);
            perspective: 1000px
        }

        @media (min-width:600px) and (max-width:899px) {
            .EnterpriseHubHeroCardFan__content {
                display: flex
            }
        }

        .EnterpriseHubHeroCardFan__content--Cloned {
            position: absolute;
            top: var(--sectionPaddingTop);
            pointer-events: none
        }

        .EnterpriseHubHeroCardFan__content--Cloned .EnterpriseHubHeroCard {
            opacity: 0
        }

/* --- block --- */

.EnterpriseHubHeroCard {
            display: flex;
            flex-direction: column;
            grid-column: span 4;
            will-change: transform;
            perspective: 1000px
        }

        .EnterpriseHubHeroCard__link.Link {
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            border-radius: 8px
        }

        .EnterpriseHubHeroCard__shadow {
            position: absolute;
            inset: -300px;
            pointer-events: none;
            transition: opacity .3s ease-out
        }

        .EnterpriseHubHeroCard__shadowContainer {
            position: absolute;
            inset: 0
        }

        .EnterpriseHubHeroCard__shadowArea {
            position: absolute;
            inset: 300px;
            border-radius: 8px;
            box-shadow: var(--cardShadowMedium)
        }

        .EnterpriseHubHeroCard__shadow--solid .EnterpriseHubHeroCard__shadowArea--bottom {
            background: #fff
        }

        .EnterpriseHubHeroCard__graphic {
            overflow: hidden;
            aspect-ratio: 1;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px
        }

        .EnterpriseHubHeroCard__content {
            display: flex;
            flex-grow: 1;
            flex-direction: column;
            gap: 24px;
            padding: 28px 24px;
            overflow: hidden;
            z-index: 1
        }

        @media (min-width:600px) and (max-width:899px) {
            .EnterpriseHubHeroCard__content .Copy__body {
                display: none
            }
        }

        .EnterpriseHubHeroCard__footer {
            --hoverColor: #0a2540;
            --hoverTransition: color 150ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 250ms ease-out;
            display: flex;
            align-items: center;
            -moz-column-gap: 7px;
            column-gap: 7px;
            border-top: 1px solid #f5f5f5;
            margin-top: auto;
            padding: 24px 0 2px;
            background: #fff
        }

        .EnterpriseHubHeroCard__copyOverflow {
            padding-top: 5px;
            margin-top: -5px;
            -webkit-mask-image: linear-gradient(transparent, #000 5px);
            mask-image: linear-gradient(transparent, #000 5px)
        }

        .EnterpriseHubHeroCard__footerIconRect {
            fill: #635bff;
            fill-opacity: .1
        }

        .EnterpriseHubHeroCard__footerIconArrow {
            stroke: #635bff;
            transition: transform .5s ease-out
        }

        .EnterpriseHubHeroCard__footerIconArrow--a {
            transition: var(--hoverTransition)
        }

        .EnterpriseHubHeroCard__footerIconArrow--b {
            transform: translateY(-100%);
            transition: var(--hoverTransition)
        }

        .EnterpriseHubHeroCard:hover .EnterpriseHubHeroCard__footerLabel {
            color: var(--hoverColor)
        }

        .EnterpriseHubHeroCard:hover .EnterpriseHubHeroCard__footerIconRect {
            fill: var(--hoverColor)
        }

        .EnterpriseHubHeroCard:hover .EnterpriseHubHeroCard__footerIconArrow {
            stroke: var(--hoverColor)
        }

        .EnterpriseHubHeroCard:hover .EnterpriseHubHeroCard__footerIconArrow--a {
            transform: translateY(100%)
        }

        .EnterpriseHubHeroCard:hover .EnterpriseHubHeroCard__footerIconArrow--b {
            transform: translateY(0)
        }

        .EnterpriseHubHeroCard--isAnimated .EnterpriseHubHeroCard--animates {
            transition: transform .85s cubic-bezier(.65, 0, .35, 1)
        }

        .EnterpriseHubHeroCard__shadow--hover {
            opacity: 0
        }

        .EnterpriseHubHeroCard__shadow--hover .EnterpriseHubHeroCard__shadowArea {
            box-shadow: 0 41px 60px -40px rgba(0, 0, 0, .1), 0 40px 100px 0 rgba(50, 50, 93, .15)
        }

        .EnterpriseHubHeroCard__link.Link:hover .EnterpriseHubHeroCard__shadow {
            opacity: 0
        }

        .EnterpriseHubHeroCard__link.Link:hover .EnterpriseHubHeroCard__shadow--hover,
        .EnterpriseHubHeroCard__link.Link:hover .EnterpriseHubHeroCard__shadow--solid {
            opacity: 1
        }

        .EnterpriseHubHeroCard__shadow--solid {
            transition: none
        }

        .EnterpriseHubHeroCard__shadow--solid .EnterpriseHubHeroCard__shadowArea {
            box-shadow: none
        }

/* --- block --- */

.Picture {
            --pictureMaxWidth: none;
            --pictureBleedLeft: 0;
            --pictureBleedRight: 0;
            --pictureBleedLeftMobile: 0;
            --pictureBleedRightMobile: 0;
            display: flex;
            max-width: var(--pictureMaxWidth);
            margin-left: calc(var(--pictureBleedLeft)*-1);
            margin-right: calc(var(--pictureBleedRight)*-1)
        }

        @media (max-width:599px) {
            .Picture {
                margin-left: calc(var(--pictureBleedLeftMobile)*-1);
                margin-right: calc(var(--pictureBleedRightMobile)*-1)
            }
        }

        .Picture--fitCover {
            width: 100%;
            height: 100%
        }

        .Picture__image {
            vertical-align: top;
            align-self: flex-start
        }

        .Picture--autosize .Picture__image {
            width: 100%;
            height: auto;
            max-width: 100%
        }

        .Picture--fitCover .Picture__image {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover
        }

/* --- block --- */

.EnterpriseHubUserLogoMarquee {
            --animationDuration: 30000;
            position: relative;
            z-index: 3;
            display: flex;
            justify-content: center
        }

        .EnterpriseHubUserLogoMarquee:hover {
            --animationDuration: 60000
        }

        .EnterpriseHubHeroCardFan--fixed .EnterpriseHubUserLogoMarquee {
            --animationDuration: 0
        }

        @media (max-height:900px) {
            .EnterpriseHubUserLogoMarquee {
                z-index: 2
            }
        }

        .EnterpriseHubUserLogoMarquee__container {
            position: relative;
            display: flex;
            overflow: hidden;
            max-width: var(--layoutWidth);
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)
        }

        .EnterpriseHubUserLogoMarquee__marquee {
            display: flex;
            height: 100px;
            gap: 16px;
            align-items: center
        }

        .EnterpriseHubUserLogoMarquee__logo.UserLogo {
            --userLogoColor: #425466;
            --userLogoColorAlt: var(--backgroundColor);
            --userLogoColorAltShadeDarker: color-mix(in srgb, var(--userLogoColor) 75%, #000);
            --userLogoColorAltShadeLighter: color-mix(in srgb, var(--userLogoColor) 75%, #fff);
            --userLogoColorAltNoTransparency: var(--backgroundColor);
            flex-shrink: 0;
            width: 182px;
            height: 100px
        }

        .EnterpriseHubUserLogoMarquee__logo.UserLogo path {
            transition: fill var(--hoverTransition)
        }

        .EnterpriseHubUserLogoMarquee__logo.UserLogo:hover {
            --userLogoColor: initial;
            --userLogoColorAlt: initial;
            --userLogoColorAltShadeDarker: initial;
            --userLogoColorAltShadeLighter: initial;
            --userLogoColorAltNoTransparency: initial
        }

        .EnterpriseHubUserLogoMarquee__logo.UserLogo.EnterpriseHubUserLogoMarquee__logo--disabled.UserLogo:hover {
            --userLogoColor: #b2bcc7
        }

/* --- block --- */

.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;
            --userLogoColorAltShadeLighter: color-mix(in srgb, var(--userLogoColor) 92.5%, #000)
        }

        .UserLogo.variant--Flat {
            --userLogoColorAlt: var(--backgroundColor);
            --userLogoColorAltShadeDarker: color-mix(in srgb, var(--userLogoColor) 85%, #000);
            --userLogoColorAltShadeLighter: color-mix(in srgb, var(--userLogoColor) 75%, #fff);
            --userLogoColorAltNoTransparency: var(--backgroundColor)
        }

/* --- block --- */

.EnterpriseHubFixedNav {
            position: absolute;
            inset: -24px 0 0 0
        }

        .EnterpriseHubFixedNav__fixedNav.FixedNav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            background-color: var(--cardBackground);
            box-shadow: var(--cardShadowLarge);
            opacity: 0;
            transform: translateY(-100%);
            transition-property: transform, opacity;
            transition-duration: .25s
        }

        .EnterpriseHubFixedNav__fixedNav.FixedNav[data-fixed] {
            opacity: 1;
            transform: none
        }

        @media (prefers-reduced-motion:reduce) {
            .EnterpriseHubFixedNav__fixedNav.FixedNav {
                transition: none
            }
        }

        .EnterpriseHubFixedNav__container {
            display: flex;
            align-items: center;
            max-width: var(--layoutWidth);
            margin: 0 auto
        }

        .EnterpriseHubFixedNav__track {
            position: relative;
            padding: 15px 24px;
            scrollbar-width: none;
            overscroll-behavior-x: contain;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: both mandatory;
            max-height: 64px;
            overflow: hidden;
            margin-left: -24px;
            width: calc(100% + 48px);
            transition: max-height .25s ease-out;
            will-change: max-height
        }

        @media (min-width:600px) {
            .EnterpriseHubFixedNav__track {
                padding: 16px 0 16px 24px;
                overflow-x: auto;
                scroll-padding-left: 24px;
                -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 90%, transparent);
                mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 90%, transparent)
            }
        }

        .EnterpriseHubFixedNav__track::-webkit-scrollbar {
            display: none
        }

        .EnterpriseHubFixedNav__itemList {
            display: grid;
            gap: 16px;
            list-style: none;
            margin: 0;
            padding: 0;
            transition: transform .25s ease-out
        }

        @media (min-width:600px) {
            .EnterpriseHubFixedNav__itemList {
                display: flex;
                gap: 40px
            }
        }

        .EnterpriseHubFixedNav__track--isExpanded .EnterpriseHubFixedNav__itemList {
            transform: translateY(0)
        }

        .EnterpriseHubFixedNav__item {
            white-space: nowrap;
            scroll-snap-align: center;
            height: 34px;
            display: flex;
            align-items: center
        }

        .EnterpriseHubFixedNav__item:nth-last-child(2) {
            padding-right: 10%
        }

        .EnterpriseHubFixedNav__item.EnterpriseHubFixedNav__item--mobileCTA {
            margin: 16px 0
        }

        @media (min-width:600px) {
            .EnterpriseHubFixedNav__item.EnterpriseHubFixedNav__item--mobileCTA {
                display: none
            }
        }

        .EnterpriseHubFixedNav__itemLink.Link {
            --linkColor: #0a2540;
            --linkHoverOpacity: 0.6;
            display: block;
            padding: 6px 0 7px
        }

        .EnterpriseHubFixedNav__item--active .EnterpriseHubFixedNav__itemLink.Link {
            --linkColor: #635bff
        }

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

        .EnterpriseHubFixedNav__scrollIndicator {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #96f, #bf70ff, #e67aff, #ff89dc, #ffa176, #ffb90f);
            clip-path: inset(0 100% 0 0)
        }

        .EnterpriseHubFixedNav__dropdownArrow {
            position: absolute;
            top: 0;
            right: 0;
            padding: 24px;
            cursor: pointer
        }

        .EnterpriseHubFixedNav__dropdownArrow svg {
            display: block;
            transition: transform .15s ease-out
        }

        @media (min-width:600px) {
            .EnterpriseHubFixedNav__dropdownArrow {
                display: none
            }
        }

        .EnterpriseHubFixedNav__track--isExpanded~.EnterpriseHubFixedNav__dropdownArrow svg {
            transform: rotate(-180deg)
        }

/* --- block --- */

.FixedNav[data-fixed-after],
        .FixedNav[data-fixed-before] {
            pointer-events: none
        }

/* --- block --- */

.EnterpriseHubGlobalPayments__titleLink.Link {
            --linkColor: #0a2540;
            --linkHoverOpacity: 0.6
        }

/* --- block --- */

.EnterpriseHubPaymentMethodsAnimation {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            width: 100%;
            height: 100%;
            align-self: center
        }

        .EnterpriseHubPaymentMethodsAnimation__container.DomGraphic {
            position: absolute
        }

        @media (max-width:599px) {
            .EnterpriseHubPaymentMethodsAnimation__container.DomGraphic {
                width: auto;
                height: 140px;
                aspect-ratio: 772/140;
                margin-bottom: 24px
            }
        }

        @media (min-width:600px) {
            .EnterpriseHubPaymentMethodsAnimation__container.DomGraphic {
                top: -12px;
                left: 0;
                width: auto;
                height: calc(100% + 24px);
                aspect-ratio: 298/456
            }
        }

        .EnterpriseHubPaymentMethodsAnimation__layout {
            display: grid;
            grid: auto/repeat(5, 140px);
            gap: 18px
        }

        @media (min-width:600px) {
            .EnterpriseHubPaymentMethodsAnimation__layout {
                grid: repeat(6, .5fr)/repeat(2, 140px);
                align-items: center
            }
        }

        @media (min-width:600px) {
            .EnterpriseHubPaymentMethodCard.Card.EnterpriseHubPaymentMethodsAnimation__card {
                grid-row-end: span 2
            }
        }

        @media (min-width:600px) {
            .EnterpriseHubPaymentMethodCard.Card.EnterpriseHubPaymentMethodsAnimation__card--paymentMethodLink {
                grid-column: 1
            }
        }

        .EnterpriseHubPaymentMethodCard.Card.EnterpriseHubPaymentMethodsAnimation__card--paymentMethodKlarna {
            --cardBackground: #ffb3c7
        }

        @media (min-width:600px) {
            .EnterpriseHubPaymentMethodCard.Card.EnterpriseHubPaymentMethodsAnimation__card--paymentMethodKlarna {
                grid-column: 2;
                grid-row-start: 2
            }
        }

        .EnterpriseHubPaymentMethodCard.Card.EnterpriseHubPaymentMethodsAnimation__card--paymentMethodApplePay {
            --cardBackground: #060606
        }

        @media (min-width:600px) {
            .EnterpriseHubPaymentMethodCard.Card.EnterpriseHubPaymentMethodsAnimation__card--paymentMethodApplePay {
                grid-column: 2
            }
        }

        .EnterpriseHubPaymentMethodCard.Card.EnterpriseHubPaymentMethodsAnimation__card--paymentMethodApplePay .EnterpriseHubPaymentMethodsAnimation__icon {
            transform: scale(1.5)
        }

        @media (min-width:600px) {
            .EnterpriseHubPaymentMethodCard.Card.EnterpriseHubPaymentMethodsAnimation__card--paymentMethodBancontact {
                grid-column: 1
            }
        }

        .EnterpriseHubPaymentMethodsAnimation__icon--paymentMethodLink {
            --paymentMethodLogoColor: #33ddb3
        }

/* --- block --- */

.EnterpriseHubPaymentMethodCard.Card {
            --cardBorderRadius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 140px;
            aspect-ratio: 1
        }

        .EnterpriseHubPaymentMethodCard>svg {
            position: absolute
        }

/* --- block --- */

.Card {
            --cardBleedRightResponsive: var(--cardBleedRight);
            --cardBleedRightSmall: calc(var(--columnWidth)*-0.5);
            --cardBleedRightNormal: calc(var(--columnWidth)*-1);
            --cardBleedBottomNormal: 16px;
            --cardBleedBottomSmall: 8px;
            --cardBleedBottomNone: 0px;
            --cardShadow: none;
            --cardShadowMargin: 0;
            --cardMinHeight: 72px;
            position: relative;
            min-width: 100px;
            min-height: var(--cardMinHeight);
            max-width: var(--cardMaxWidth, none);
            margin-right: var(--cardBleedRightResponsive);
            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 {
                --cardBleedRightResponsive: var(--cardBleedRightTablet, var(--cardBleedRight));
                max-width: var(--cardMaxWidthTablet, var(--cardMaxWidth))
            }
        }

        @media (min-width:900px) {
            .Card {
                --cardBleedRightResponsive: var(--cardBleedRightDesktop, var(--cardBleedRightTablet, var(--cardBleedRight)))
            }
        }

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

        .Card--border.Card--borderSoft {
            --cardBorderColor: var(--cardBorderColorSoft)
        }

        .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)
        }

/* --- block --- */

.DomGraphic {
            --maxWidth: 100%;
            --willChange: initial;
            position: relative;
            width: 100%;
            max-width: var(--maxWidth)
        }

        @media (max-width:600px) {
            .DomGraphic {
                max-width: var(--maxWidthPhone, var(--maxWidth))
            }
        }

        @media (min-width:600px) and (max-width:899px) {
            .DomGraphic {
                max-width: var(--maxWidthTablet, var(--maxWidth))
            }
        }

        @media (min-width:900px) {
            .DomGraphic {
                max-width: var(--maxWidthDesktop, var(--maxWidth))
            }
        }

        .DomGraphic__heightContainer {
            height: 0;
            width: 100%;
            max-width: var(--maxWidth);
            padding-bottom: var(--aspectRatio)
        }

        .DomGraphic__scaleContainer {
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: top left;
            will-change: var(--willChange)
        }

        .DomGraphic--isAnimating .DomGraphic__scaleContainer {
            will-change: transform
        }

/* --- block --- */

.BucketLink.Link {
            padding: 6px 16px 8px;
            border-radius: 4px;
            background: rgba(99, 91, 255, .05)
        }

/* --- block --- */

.BucketItem.Card {
            --cardBackground: #f6f9fc;
            display: grid;
            align-items: center;
            gap: 40px
        }

        @media (min-width:600px) {
            .BucketItem.Card {
                grid: auto/auto 41%
            }
        }

        .BucketItem__copy.Copy {
            padding: 0 24px 32px
        }

        @media (min-width:600px) {
            .BucketItem__copy.Copy {
                padding: 72px 0 64px 40px
            }
        }

        .BucketItem__linkList {
            display: flex;
            flex-wrap: wrap;
            gap: 10px
        }

        .BucketItem__graphicContainer {
            position: relative
        }

        @media (max-width:599px) {
            .BucketItem__graphicContainer {
                height: 218px
            }
        }

        @media (min-width:600px) {
            .BucketItem__graphicContainer {
                order: 1;
                min-height: 438px;
                height: 100%
            }
        }

        @media (max-width:599px) {
            .BucketItem__graphicContainer--directionUp {
                overflow: hidden
            }

            .BucketItem__graphicContainer--directionUp:after {
                position: absolute;
                bottom: 0;
                inset-inline: 0;
                border-bottom: 1px solid #e7ecf1;
                content: ""
            }
        }

        .BucketItem__graphicWrapper {
            height: 100%;
            opacity: 0
        }

        .BucketItem__tooltip {
            padding-left: 3px
        }

        .BucketItem__tooltipItem.TooltipItem {
            --tooltipItemPadding: 8px 16px;
            --tooltipItemTextColor: #727f96;
            --tooltipItemFont: var(--fontWeightNormal) 13px/1.538 var(--fontFamily)
        }

        .BucketItem__tooltip--icon.BasicIcon {
            --basicIconColor: #abb5c5
        }

        .BucketItem--variant .BucketLink {
            font-size: 12px;
            line-height: 15px;
            padding: 8px 9px;
            flex: 0;
            white-space: nowrap;
            text-transform: capitalize
        }

        .BucketItem--variant .Copy__icon {
            gap: 8px
        }

/* --- block --- */

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

/* --- block --- */

.isHidden .PortalTooltipItem,
        [hidden] .PortalTooltipItem {
            pointer-events: none
        }

        .PortalTooltipItem {
            --tooltipItemPadding: 12px 16px;
            --tooltipItemTextColor: var(--textColor);
            --tooltipItemFont: var(--fontWeightNormal) 15px/1.333333333 var(--fontFamily);
            --tooltipItemBackgroundColor: #fff;
            --tooltipItemShadow: var(--cardShadowLarge);
            --tooltipFocusRingOffset: -2px;
            position: relative;
            border: none;
            outline: none;
            background: none;
            display: inline-block;
            padding: 0;
            color: inherit;
            font: inherit;
            text-align: inherit;
            cursor: pointer
        }

        .PortalTooltipItem:before {
            content: "";
            position: absolute;
            width: calc(var(--iconSize, 100%) + 4px);
            height: calc(var(--iconSize, 100%) + 4px);
            transform: translate(var(--tooltipFocusRingOffset), var(--tooltipFocusRingOffset));
            border-radius: var(--iconBorderRadius);
            box-shadow: var(--focusBoxShadow);
            opacity: 0;
            transition-property: opacity;
            pointer-events: none
        }

        @media (prefers-reduced-motion:no-preference) {
            .PortalTooltipItem:before {
                transition: var(--hoverTransition)
            }
        }

        .PortalTooltipItem:focus-visible:not(.PortalTooltipItem--tapFocus) {
            outline: none
        }

        .PortalTooltipItem:focus-visible:not(.PortalTooltipItem--tapFocus):before {
            opacity: 1
        }

        .PortalTooltipItem__tooltip {
            --tooltipPointHeight: 12px;
            --tooltipPointOffsetX: 0px;
            --linkColor: var(--accentColor);
            position: absolute;
            top: 50%;
            left: 50%;
            width: -moz-fit-content;
            width: fit-content;
            max-width: 290px;
            z-index: 999999;
            transform-origin: top left;
            transform: scale(0);
            padding: var(--tooltipItemPadding);
            border: 1px solid var(--tooltipItemBackgroundColor);
            background: var(--tooltipItemBackgroundColor);
            box-shadow: var(--tooltipItemShadow);
            border-radius: 8px;
            font: var(--tooltipItemFont);
            letter-spacing: .2px;
            color: var(--tooltipItemTextColor);
            text-align: left;
            white-space: normal;
            word-break: break-word;
            opacity: 1;
            transition: opacity 1ms
        }

        .PortalTooltipItem__tooltip:before {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            height: var(--tooltipPointHeight)
        }

        .PortalTooltipItem__tooltip:after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-left: var(--tooltipPointHeight) solid transparent;
            border-right: var(--tooltipPointHeight) solid transparent;
            border-top-color: transparent;
            border-bottom: 0 solid transparent;
            border-top: var(--tooltipPointHeight) solid var(--tooltipItemBackgroundColor);
            left: calc(50% - var(--tooltipPointHeight) + var(--tooltipPointOffsetX))
        }

        .PortalTooltipItem__tooltip.PortalTooltipItem__tooltip--directionAbove {
            transform-origin: bottom center
        }

        .PortalTooltipItem__tooltip.PortalTooltipItem__tooltip--directionAbove:after,
        .PortalTooltipItem__tooltip.PortalTooltipItem__tooltip--directionAbove:before {
            bottom: calc(var(--tooltipPointHeight)*-1)
        }

        .PortalTooltipItem__tooltip.PortalTooltipItem__tooltip--directionBelow {
            transform-origin: top center
        }

        .PortalTooltipItem__tooltip.PortalTooltipItem__tooltip--directionBelow:after,
        .PortalTooltipItem__tooltip.PortalTooltipItem__tooltip--directionBelow:before {
            top: calc(var(--tooltipPointHeight)*-1)
        }

        .PortalTooltipItem__tooltip.PortalTooltipItem__tooltip--directionBelow:after {
            transform: rotate(180deg)
        }

        .PortalTooltipItem__tooltip.PortalTooltipItem__tooltip--disableInteraction {
            pointer-events: none
        }

        @media (prefers-reduced-motion:no-preference) {
            .PortalTooltipItem__tooltip {
                animation: PortalTooltipItemFadeIn .25s;
                transition-duration: .25s
            }
        }

        @keyframes PortalTooltipItemFadeIn {
            0% {
                opacity: 0
            }
        }

/* --- block --- */

.EnterpriseHubTerminalSignatureGraphic {
            display: flex;
            justify-content: center
        }

        @media (max-width:599px) {
            .EnterpriseHubTerminalSignatureGraphic {
                padding-top: 32px
            }
        }

        @media (min-width:600px) {
            .EnterpriseHubTerminalSignatureGraphic {
                position: absolute;
                left: calc(50% - 103px);
                bottom: -56px
            }
        }

        .EnterpriseHubTerminalSignatureGraphic__container {
            position: relative;
            z-index: 0
        }

        .EnterpriseHubTerminalSignatureGraphic__container:before {
            position: absolute;
            inset: 2px;
            z-index: -1;
            border-radius: 32px;
            box-shadow: var(--cardShadowLarge);
            content: ""
        }

        .EnterpriseHubTerminalSignatureGraphic__screen {
            position: absolute;
            inset: 0
        }

/* --- block --- */

.EnterpriseHubAuthRatesGraphic.Card {
            position: absolute;
            border-top-left-radius: 0;
            border-bottom-right-radius: 0
        }

        @media (max-width:599px) {
            .EnterpriseHubAuthRatesGraphic.Card {
                left: 24px;
                bottom: 0
            }
        }

        @media (min-width:600px) {
            .EnterpriseHubAuthRatesGraphic.Card {
                left: 0;
                top: 0
            }
        }

/* --- block --- */

.BucketListingGuideArt,
        .BucketListingGuideArt svg {
            position: absolute;
            width: 100%;
            height: 100%
        }

        .MktRoot[data-loading] .BucketListingGuideArt svg [stroke] {
            display: none
        }

/* --- block --- */

.BucketListing {
            --bucketListingCardBackground: #f6f9fc;
            --bucketListingCardBorderColor: #cbd6e0
        }

        .BucketListing__picture.Card {
            --cardBackground: var(--bucketListingCardBackground);
            --cardBorderColor: var(--bucketListingCardBorderColor);
            display: grid;
            place-items: center;
            aspect-ratio: 344/160
        }

        .BucketListing__type {
            margin: 16px 0 8px;
            font: var(--fontWeightSemibold) 15px/20px var(--fontFamily);
            color: #727f96
        }

        .BucketListing__titleLink.Link {
            --linkColor: #0a2540;
            --linkHoverOpacity: 0.6
        }

        .BucketListing__title {
            font: var(--fontWeightSemibold) 15px/20px var(--fontFamily)
        }

        .BucketListing__cta.CtaButton {
            margin-top: 4px
        }

/* --- block --- */

.BucketListingStat {
            position: relative
        }

        .BucketListingStat--knockout {
            animation: bucketListingStatBackgroundAnimation 86400s linear infinite;
            -webkit-background-clip: text;
            background-clip: text;
            background-repeat: repeat-y;
            background-size: 100% auto;
            color: transparent
        }

        .BucketListingStat__amount,
        .BucketListingStat__prefix {
            font: var(--fontWeightSemibold) 80px/1 var(--fontFamily);
            font-variant-numeric: tabular-nums;
            letter-spacing: -1px;
            text-anchor: middle
        }

        .BucketListingStat__unit {
            position: absolute;
            top: 12px;
            right: -20px;
            font: var(--fontWeightNormal) 15px/1 var(--fontFamily);
            color: #e383b4
        }

        .BucketListingStat__arrowSvg {
            position: absolute;
            bottom: 10px;
            right: -20px
        }

        .BucketListingStat__arrowSvg--arrowPath {
            fill: #e383b4;
            animation: bucketListingStatArrowAnimation 1s linear infinite
        }

        .BucketListingStat__arrowSvg--arrowPathA {
            animation-delay: 666ms
        }

        .BucketListingStat__arrowSvg--arrowPathB {
            animation-delay: 333ms
        }

        .BucketListingStat__arrowSvg--arrowPathC {
            animation-delay: 0
        }

        @keyframes bucketListingStatBackgroundAnimation {
            0% {
                background-position-y: 0
            }

            to {
                background-position-y: 400000%
            }
        }

        @keyframes bucketListingStatArrowAnimation {
            0% {
                opacity: .25
            }

            50% {
                opacity: 1
            }

            to {
                opacity: .25
            }
        }

/* --- block --- */

.BucketGrid {
            --bucketGridListDisplay: grid;
            display: grid;
            grid: auto/repeat(var(--gridColumnCount), 1fr);
            gap: 24px var(--gridColumnGap)
        }

        .BucketGrid__itemList {
            display: var(--bucketGridListDisplay);
            grid-column: 1/-1;
            gap: 24px
        }

        @media (min-width:900px) {
            .BucketGrid__itemList {
                grid-column: span 8
            }
        }

        .BucketGrid__aside {
            grid-column: 1/-1
        }

        @media (min-width:600px) and (max-width:899px) {
            .BucketGrid__aside {
                grid: auto/repeat(2, 1fr)
            }
        }

        @media (min-width:900px) {
            .BucketGrid__aside {
                grid-column: span 4
            }
        }

        .BucketGrid__asideSticky {
            position: sticky;
            top: 88px;
            display: grid;
            gap: 48px;
            align-content: flex-start
        }

/* --- block --- */

.RowLayout {
            --rowLayoutGapXSmall: 16px;
            --rowLayoutGapSmall: 24px;
            --rowLayoutGapNormal: 32px;
            --rowLayoutGapMedium: var(--rowLayoutGapNormal);
            --rowLayoutGapLarge: var(--rowLayoutGapNormal);
            --rowLayoutGapXLarge: var(--rowLayoutGapNormal);
            --rowLayoutGapXXLarge: var(--rowLayoutGapNormal);
            --rowLayoutGap: var(--rowLayoutGapLarge);
            display: grid;
            grid: auto/minmax(0, 1fr);
            row-gap: var(--rowLayoutGap);
            align-items: flex-start
        }

        @media (min-width:600px) {
            .RowLayout {
                --rowLayoutGapMedium: 48px;
                --rowLayoutGapLarge: var(--rowLayoutGapMedium);
                --rowLayoutGapXLarge: var(--rowLayoutGapMedium);
                --rowLayoutGapXXLarge: 64px
            }
        }

        @media (min-width:900px) {
            .RowLayout {
                --rowLayoutGapLarge: 64px;
                --rowLayoutGapXLarge: 96px;
                --rowLayoutGapXXLarge: 128px
            }
        }

        .HubPage .RowLayout {
            --rowLayoutGapXSmall: 16px;
            --rowLayoutGapSmall: 24px;
            --rowLayoutGapNormal: 32px;
            --rowLayoutGapMedium: 40px;
            --rowLayoutGapLarge: 40px;
            --rowLayoutGapXLarge: 96px
        }

        @media (min-width:600px) {
            .HubPage .RowLayout {
                --rowLayoutGapLarge: 48px;
                --rowLayoutGapXLarge: 112px
            }
        }

        @media (min-width:900px) {
            .HubPage .RowLayout {
                --rowLayoutGapLarge: 56px;
                --rowLayoutGapXLarge: 128px
            }
        }

        .ColumnLayout--alignStretch .RowLayout>:last-child {
            margin-top: auto
        }

/* --- block --- */

.EnterpriseHubDepositsPhoneGraphic {
            display: flex;
            justify-content: center
        }

        @media (max-width:599px) {
            .EnterpriseHubDepositsPhoneGraphic {
                padding-top: 32px
            }
        }

        .EnterpriseHubDepositsPhoneGraphic__phoneGraphic.PhoneGraphic {
            --phoneBorderRadius: 32px;
            --phoneScreenBorderRadius: 24px;
            --phoneWidth: 223px;
            --phoneHeight: 455px
        }

        @media (min-width:600px) {
            .EnterpriseHubDepositsPhoneGraphic__phoneGraphic.PhoneGraphic {
                position: absolute;
                bottom: -82px;
                left: calc(50% - var(--phoneWidth)/2)
            }
        }

/* --- block --- */

.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 {
            --phoneBorderRadius: 42px;
            --phoneScreenBorderRadius: 34px;
            --phoneWidth: 301px;
            --phoneHeight: 615px
        }

        .PhoneGraphic__screen {
            position: relative;
            height: 100%;
            border-radius: var(--phoneScreenBorderRadius);
            -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
            background: #fff
        }

/* --- block --- */

.EnterpriseHubEmbeddedFinancialServicesGraphic.Card {
            position: absolute
        }

        @media (max-width:599px) {
            .EnterpriseHubEmbeddedFinancialServicesGraphic.Card {
                left: 24px;
                right: -6px;
                bottom: 0
            }
        }

        @media (min-width:600px) {
            .EnterpriseHubEmbeddedFinancialServicesGraphic.Card {
                left: 0;
                top: calc(50% - 166px)
            }
        }

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

        .EnterpriseHubEmbeddedFinancialServicesGraphic__mobilePicture .Picture__image {
            width: 100%;
            height: auto
        }

        @media (min-width:600px) {
            .EnterpriseHubEmbeddedFinancialServicesGraphic__mobilePicture {
                display: none
            }
        }

/* --- block --- */

.RevenueAndFinanceAutomationRevRecGraphic.RevRecGraphic.Card {
            position: absolute;
            width: 100%;
            left: 10%;
            bottom: 0;
            max-width: 320px
        }

        @media (min-width:600px) {
            .RevenueAndFinanceAutomationRevRecGraphic.RevRecGraphic.Card {
                width: 118%;
                left: -5%;
                bottom: 18%
            }
        }

/* --- block --- */

.EnterpriseHubRetoolPhoneGraphic {
            display: flex;
            justify-content: center
        }

        @media (max-width:599px) {
            .EnterpriseHubRetoolPhoneGraphic {
                padding-top: 32px
            }
        }

        .EnterpriseHubRetoolPhoneGraphic__phoneGraphic.PhoneGraphic {
            --phoneBorderRadius: 27px;
            --phoneScreenBorderRadius: 22px;
            --phoneWidth: 223px;
            --phoneHeight: 446px
        }

        @media (min-width:600px) {
            .EnterpriseHubRetoolPhoneGraphic__phoneGraphic.PhoneGraphic {
                position: absolute;
                bottom: -66px;
                left: calc(50% - var(--phoneWidth)/2)
            }
        }

        @media (min-width:900px) {
            .EnterpriseHubRetoolPhoneGraphic__phoneGraphic.PhoneGraphic {
                right: 36px;
                left: auto
            }
        }

/* --- block --- */

.EnterpriseHubTogethereTaxGraphic.Card {
            position: absolute
        }

        @media (max-width:399px) {
            .EnterpriseHubTogethereTaxGraphic.Card {
                right: 24px;
                bottom: 0
            }
        }

        @media (min-width:400px) and (max-width:599px) {
            .EnterpriseHubTogethereTaxGraphic.Card {
                left: calc(50% - 152px);
                bottom: 0
            }
        }

        @media (min-width:600px) {
            .EnterpriseHubTogethereTaxGraphic.Card {
                left: 0;
                top: calc(50% - 166px)
            }
        }

/* --- block --- */

.RevRecGraphic.Card {
            --cardBackground: #fff
        }

        .RevRecGraphic__content {
            width: 320px;
            height: 370px;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            align-items: center;
            border-radius: 8px;
            border: 1px solid #fff;
            display: flex;
            flex-direction: column;
            gap: 9px;
            padding: 11px
        }

        .RevRecGraphic__graphContainer,
        .RevRecGraphic__summaryContainer {
            border-radius: 3px;
            border: 1px solid rgba(0, 0, 0, .05);
            padding: 10px;
            width: 100%
        }

        .RevRecGraphic__graphTitle {
            color: #727f96;
            font-size: 8px;
            font-weight: 500
        }

        .RevRecGraphic__graphTotal {
            color: #0a2540;
            flex-grow: 1;
            font-size: 12px;
            font-weight: 500;
            line-height: 23px
        }

        .RevRecGraphic__graphLegend {
            align-items: center;
            display: flex;
            flex-grow: 1;
            gap: 18px;
            justify-content: right
        }

        .RevRecGraphic__graphLegendSymbol {
            color: #727f96;
            font-size: 8px;
            padding-left: 10px;
            position: relative
        }

        .RevRecGraphic__graphLegendSymbol:before {
            border-radius: 3px;
            content: "";
            display: block;
            height: 6px;
            left: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 6px
        }

        .RevRecGraphic__graphLegendSymbol--open:before {
            background: #96f
        }

        .RevRecGraphic__graphLegendSymbol--closed:before {
            background: #ff5996
        }

        .RevRecGraphic__graphAxes {
            color: #727f96;
            display: flex;
            font-size: 8px;
            font-weight: 500;
            justify-content: space-between
        }

        .RevRecGraphic__graph {
            align-items: flex-end;
            background-image: linear-gradient(rgba(0, 0, 0, .05) 1px, transparent 0);
            background-size: 1px 33.333%;
            border-bottom: 1px solid #e7ecf1;
            display: flex;
            gap: 8px;
            height: 125px;
            justify-content: space-evenly;
            margin: 4px 0 8px;
            overflow: hidden
        }

        .RevRecGraphic__graphBar {
            background: #ff5996;
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
            height: 100%;
            width: 8px
        }

        .RevRecGraphic__graphBar:last-child {
            background: #96f
        }

        .RevRecGraphic__summaryTitle {
            align-items: center;
            display: flex;
            gap: 8px
        }

        .RevRecGraphic__summaryTitleText {
            font-size: 11px;
            font-weight: 500
        }

        .RevRecGraphic__summaryTitleDropdown {
            align-items: center;
            border-radius: 2px;
            box-shadow: 0 .63925px 1.2785px 0 rgba(6, 24, 44, .2), 0 0 .63925px 0 rgba(6, 24, 44, .18);
            display: flex;
            font-size: 8px;
            font-weight: 500;
            gap: 4px;
            padding: 2px 6px
        }

        .RevRecGraphic__summaryRow {
            display: flex;
            font-size: 8px;
            font-weight: 500;
            gap: 5px;
            justify-content: space-between;
            padding-top: 10px
        }

        .RevRecGraphic__summaryRowText {
            color: #0a2540
        }

        .RevRecGraphic__summaryRowValue {
            color: #727f96
        }

/* --- block --- */

.Icon {
            display: block
        }

/* --- block --- */

.NodesIcon__dot {
            transform: scale(.666666667);
            transform-origin: 34px 48px
        }

        .NodesIcon__segmentRotator {
            transform-origin: 34px 48px
        }

/* --- block --- */

.AnimatedIcon {
            --iconSize: 40px;
            --svgSize: 96px;
            width: var(--iconSize);
            height: var(--iconSize)
        }

        .AnimatedIcon__iconContainer {
            position: relative;
            left: calc(var(--columnPaddingNormal)*-1)
        }

        .AnimatedIcon__icon {
            position: absolute;
            top: calc(var(--svgSize)*-1/2 - var(--iconSize)*-1/2);
            left: 0;
            display: block;
            pointer-events: none
        }

/* --- block --- */

.EnterpriseHubWhiteGloveSupportCard.AccentedCard {
            min-height: 305px;
            padding: 40px 24px 32px
        }

        @media (min-width:600px) {
            .EnterpriseHubWhiteGloveSupportCard.AccentedCard {
                padding: 76px 40px
            }
        }

        .EnterpriseHubWhiteGloveSupportCard.AccentedCard:focus-within .EnterpriseHubWhiteGloveSupportCard__learnMore,
        .EnterpriseHubWhiteGloveSupportCard.AccentedCard:hover .EnterpriseHubWhiteGloveSupportCard__learnMore {
            color: var(--linkHoverColor)
        }

        .EnterpriseHubWhiteGloveSupportCard.AccentedCard:focus-within .HoverArrow,
        .EnterpriseHubWhiteGloveSupportCard.AccentedCard:hover .HoverArrow {
            --arrowTipTransform: var(--arrowHoverOffset);
            --arrowLineOpacity: 1
        }

        .EnterpriseHubWhiteGloveSupportCard__copy.Copy {
            position: relative
        }

        @media (min-width:600px) {
            .EnterpriseHubWhiteGloveSupportCard__copy.Copy {
                width: 65%
            }
        }

        .EnterpriseHubWhiteGloveSupportCard__globe {
            pointer-events: none
        }

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

        .EnterpriseHubWhiteGloveSupportCard__learnMore {
            color: var(--linkColor);
            font: var(--ctaFont);
            transition: color var(--linkHoverTransition)
        }

        .EnterpriseHubWhiteGloveSupportCard__link.Link {
            position: absolute;
            inset: 0
        }

/* --- block --- */

.BackgroundGlobe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%
        }

/* --- block --- */

.Globe {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-end
        }

        @media (prefers-reduced-motion:no-preference) {
            .Globe {
                cursor: grab
            }

            .is-globe-dragging .Globe {
                cursor: grabbing
            }
        }

        .Globe--isAngled {
            transform: skewY(6deg);
            transform-origin: 100% 0
        }

/* --- block --- */

.AccentedCard {
            --accentedCardShadowMargin: 0;
            --accentedCardMinHeight: 72px;
            --accentedCardBorderRadius: 8px;
            --accentedCardTopBorderHeight: 8px;
            --accentedCardTransitionEasing: 500ms cubic-bezier(0.7, 0, 0, 1);
            --accentedCardScale: 1.018;
            position: relative;
            min-width: 100px;
            min-height: var(--accentedCardMinHeight);
            max-width: var(--accentedCardMaxWidth, none);
            margin-right: calc(var(--cardBleedRight, 0)*-1);
            margin-bottom: calc(var(--cardBleedBottom, 0)*-1);
            border-radius: var(--accentedCardBorderRadius)
        }

        @media (min-width:600px) {
            .AccentedCard {
                max-width: var(--accentedCardMaxWidthTablet, var(--accentedCardMaxWidth))
            }
        }

        .AccentedCard .Copy {
            --headerPaddingRight: 40px;
            --bodyPaddingRight: 40px
        }

        .AccentedCard__shadow,
        .AccentedCard__shadow--hovered {
            position: absolute;
            display: block;
            inset: 0;
            overflow: hidden;
            border-radius: var(--accentedCardBorderRadius);
            box-shadow: var(--accentedCardShadow);
            pointer-events: none;
            transition: transform var(--accentedCardTransitionEasing), opacity var(--accentedCardTransitionEasing);
            z-index: 1
        }

        @media (hover:hover) and (prefers-reduced-motion:no-preference) {

            .AccentedCard:not(.AccentedCard--noHover):focus-within .AccentedCard__shadow,
            .AccentedCard:not(.AccentedCard--noHover):focus-within .AccentedCard__shadow--hovered,
            .AccentedCard:not(.AccentedCard--noHover):hover .AccentedCard__shadow,
            .AccentedCard:not(.AccentedCard--noHover):hover .AccentedCard__shadow--hovered {
                transform: scale(var(--accentedCardScale))
            }
        }

        .AccentedCard__shadow--hovered {
            box-shadow: var(--cardShadowHover, 0 100px 60px -40px rgba(0, 0, 0, .06), 0 60px 100px 0 rgba(50, 50, 93, .15));
            opacity: 0;
            transition: transform var(--accentedCardTransitionEasing), opacity var(--accentedCardTransitionEasing)
        }

        @media (hover:hover) and (prefers-reduced-motion:no-preference) {

            .AccentedCard:not(.AccentedCard--noHover):focus-within .AccentedCard__shadow--hovered,
            .AccentedCard:not(.AccentedCard--noHover):hover .AccentedCard__shadow--hovered {
                opacity: 1
            }
        }

        .AccentedCard__background {
            inset: 0;
            overflow: hidden;
            border-radius: var(--accentedCardBorderRadius);
            z-index: -1;
            background: var(--cardBackground)
        }

        .AccentedCard__background,
        .AccentedCard__background:after {
            position: absolute;
            display: block;
            transition: transform var(--accentedCardTransitionEasing)
        }

        .AccentedCard__background:after {
            content: "";
            top: 0;
            width: 100%;
            height: var(--accentedCardTopBorderHeight);
            background: var(--accentColor, var(--accentedCardAccentColor));
            transform-origin: top center
        }

        @media (hover:hover) and (prefers-reduced-motion:no-preference) {

            .AccentedCard:not(.AccentedCard--noHover):focus-within .AccentedCard__background,
            .AccentedCard:not(.AccentedCard--noHover):hover .AccentedCard__background {
                transform: scale(var(--accentedCardScale))
            }

            .AccentedCard:not(.AccentedCard--border):hover .AccentedCard__background:before .AccentedCard:not(.AccentedCard--noHover):focus-within .AccentedCard__background:before {
                transform: scaleY(1.51)
            }
        }

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

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

        .AccentedCard--shadowXSmall {
            --accentedCardShadow: var(--cardShadowXSmall);
            --accentedCardShadowMargin: var(--cardShadowXSmallMargin)
        }

        .AccentedCard--shadowSmall {
            --accentedCardShadow: var(--cardShadowSmall);
            --accentedCardShadowMargin: var(--cardShadowSmallMargin)
        }

        .AccentedCard--shadowMedium {
            --accentedCardShadow: var(--cardShadowMedium);
            --accentedCardShadowMargin: var(--cardShadowMediumMargin)
        }

        .AccentedCard--shadowLarge {
            --accentedCardShadow: var(--cardShadowLarge);
            --accentedCardShadowMargin: var(--cardShadowLargeMargin)
        }

        .AccentedCard--shadowXLarge {
            --accentedCardShadow: var(--cardShadowXLarge);
            --accentedCardShadowMargin: var(--cardShadowXLargeMargin)
        }

/* --- block --- */

.EnterpriseHubTestimonialCard.AccentedCard {
            --accentedCardTopBorderHeight: 100%
        }

        @media (pointer:fine) {
            .EnterpriseHubTestimonialCard.AccentedCard:hover .EnterpriseHubTestimonialCard__body {
                transform: translateY(-24px)
            }

            .EnterpriseHubTestimonialCard.AccentedCard:hover .EnterpriseHubTestimonialCard__cta {
                transform: translateY(-24px);
                opacity: 1
            }
        }

        .EnterpriseHubTestimonialCard__content {
            display: flex;
            flex-direction: column;
            min-height: 290px;
            color: #fff
        }

        .EnterpriseHubTestimonialCard__logoContainer {
            padding: 56px 24px;
            display: grid;
            place-items: center
        }

        .EnterpriseHubTestimonialCard__logo.UserLogo {
            --userLogoMaxWidth: 300px;
            width: 100%;
            height: 60px
        }

        .EnterpriseHubTestimonialCard__body {
            padding: 0 24px 8px;
            transition: transform .5s cubic-bezier(.7, 0, 0, 1);
            will-change: transform
        }

        @media (pointer:fine) {
            .EnterpriseHubTestimonialCard__body {
                padding: 0 24px 32px
            }
        }

        .EnterpriseHubTestimonialCard__cta {
            padding: 0 24px 32px
        }

        @media (pointer:fine) {
            .EnterpriseHubTestimonialCard__cta {
                position: absolute;
                bottom: 0;
                left: 24px;
                right: 24px;
                opacity: 0;
                padding: 0;
                transition: .5s cubic-bezier(.7, 0, 0, 1);
                transition-property: transform, opacity;
                will-change: transform, opacity
            }
        }

        .EnterpriseHubTestimonialCard__quote .Quote__body:before {
            left: -8px
        }

/* --- block --- */

.Quote__body {
            position: relative;
            font: var(--fontWeightNormal) 18px/1.55 var(--fontFamily);
            quotes: "“" "”" "‘" "’"
        }

        .Quote__body:before {
            content: open-quote;
            position: absolute;
            left: -10px
        }

        html[lang^=ja] .Quote__body:before {
            left: -20px;
            top: -5px
        }

        html[lang^=fr] .Quote__body:before {
            left: -14px
        }

        .Quote__body:after {
            content: close-quote;
            position: absolute
        }

        .Quote__body:after,
        html[lang^=fr] .Quote__body:after {
            transform: translateX(2px)
        }

        .Quote--bodySizeSmall .Quote__body {
            font: var(--fontWeightNormal) 15px/24px var(--fontFamily);
            letter-spacing: .2px
        }

        html[lang^=de] .Quote__body {
            quotes: "“" "”" "‘" "’"
        }

        html[lang^=sv] .Quote__body {
            quotes: "”" "”" "‘" "’"
        }

        html[lang^=es] .Quote__body,
        html[lang^=fr] .Quote__body {
            quotes: "«" "»" "“" "”"
        }

        html[lang^=it] .Quote__body {
            quotes: '"' '"'
        }

        html[lang^=ja] .Quote__body {
            quotes: "「" "」" "『" "』"
        }

        .Quote--excludeHangingQuotes .Quote__body:after,
        .Quote--excludeHangingQuotes .Quote__body:before {
            content: none
        }

        .Quote__attribution {
            margin: 16px 0 0;
            font: var(--fontWeightNormal) 15px/1.66 var(--fontFamily)
        }

        .Quote__author {
            font-weight: var(--fontWeightBold);
            color: var(--titleColor)
        }

/* --- block --- */

.EnterpriseHubDetailCard.AccentedCard {
            min-height: 305px
        }

        .EnterpriseHubDetailCard__content {
            display: flex;
            height: 100%;
            padding: 40px 24px 32px;
            flex-direction: column;
            gap: 8px
        }

        .EnterpriseHubDetailCard__fakeCta {
            padding: 0;
            margin-top: auto;
            font: var(--ctaFont)
        }

/* --- block --- */

.EnterpriseHubDetailCardGrid {
            display: grid;
            grid: min-content auto/auto;
            gap: 24px
        }

        @media (min-width:600px) {
            .EnterpriseHubDetailCardGrid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media (min-width:600px) {
            .EnterpriseHubDetailCardGridThreeColumn {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        .EnterpriseHubDetailCardGrid__title.Copy {
            grid-column: 1/-1
        }

/* --- block --- */

.EnterpriseHubDetailCardLayout {
            display: grid;
            gap: var(--rowLayoutGapLarge) var(--gridColumnGap)
        }

/* --- block --- */

.EnterpriseHubStatsCarousel {
            height: var(--heroHeight);
            min-height: 500px;
            display: flex;
            flex-direction: column;
            padding: 40px 0;
            color: #fff
        }

        @media (min-width:900px) {
            .EnterpriseHubStatsCarousel {
                min-height: 600px;
                padding: 78px 0 48px
            }
        }

        .EnterpriseHubStatsCarousel__header {
            display: flex;
            justify-content: space-between;
            z-index: 1
        }

        .EnterpriseHubStatsCarousel__counter {
            display: flex;
            align-items: center
        }

        .EnterpriseHubStatsCarousel__counterProgress {
            position: relative;
            width: 20px;
            height: 20px;
            overflow: hidden
        }

        .EnterpriseHubStatsCarousel__counterProgressValue {
            position: absolute;
            inset: 0;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-right: 1px
        }

        .EnterpriseHubStatsCarousel__counterSeparator,
        .EnterpriseHubStatsCarousel__counterTotal {
            opacity: .2
        }

        .EnterpriseHubStatsCarousel__headerNav {
            display: inline-flex;
            -moz-column-gap: 4px;
            column-gap: 4px
        }

        .EnterpriseHubStatsCarousel__headerNavButton {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 28px;
            height: 28px;
            padding: 0;
            background-color: var(--buttonColor);
            border: none;
            outline: none;
            border-radius: 50%;
            white-space: nowrap;
            text-decoration: none;
            text-align: center;
            cursor: pointer;
            transition: var(--hoverTransition)
        }

        .EnterpriseHubStatsCarousel__headerNavButton:before {
            content: "";
            position: absolute;
            inset: -2px;
            box-shadow: var(--focusBoxShadow);
            opacity: 0;
            border-radius: 50%;
            transition: var(--hoverTransition);
            transition-property: opacity
        }

        @media (pointer:fine) {
            .EnterpriseHubStatsCarousel__headerNavButton:hover {
                background-color: var(--buttonHoverColor)
            }
        }

        @media (pointer:coarse) {
            .EnterpriseHubStatsCarousel__headerNavButton:active {
                background-color: var(--buttonHoverColor)
            }
        }

        .EnterpriseHubStatsCarousel__headerNavButton:focus-visible {
            outline: none
        }

        .EnterpriseHubStatsCarousel__headerNavButton:focus-visible:before {
            opacity: 1
        }

        .EnterpriseHubStatsCarousel__stats {
            position: relative;
            top: -40px;
            text-align: center;
            flex-grow: 1
        }

        @media (min-width:900px) {
            .EnterpriseHubStatsCarousel__stats {
                top: -78px
            }
        }

        .EnterpriseHubStatsCarousel__statsItem {
            display: flex;
            position: absolute;
            inset: 0;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            pointer-events: none;
            perspective: 1000px;
            opacity: 0
        }

        .EnterpriseHubStatsCarousel__statsValue {
            font: var(--fontWeightBold) 76px/1.32 var(--fontFamily);
            letter-spacing: .114px;
            white-space: nowrap
        }

        @media (min-width:450px) {
            .EnterpriseHubStatsCarousel__statsValue {
                font: var(--fontWeightBold) 90px/1.32 var(--fontFamily)
            }
        }

        @media (min-width:900px) {
            .EnterpriseHubStatsCarousel__statsValue {
                font: var(--fontWeightBold) 150px/1.32 var(--fontFamily);
                letter-spacing: .187px
            }
        }

        .EnterpriseHubStatsCarousel__statsPercent {
            display: inline-block;
            margin-left: 5px;
            font-size: 12px;
            transform: translateY(-18px);
            color: #e8918e
        }

        @media (min-width:450px) {
            .EnterpriseHubStatsCarousel__statsPercent {
                font-size: 14px;
                transform: translateY(-24px)
            }
        }

        @media (min-width:900px) {
            .EnterpriseHubStatsCarousel__statsPercent {
                font-size: 22px;
                margin-left: 8px;
                transform: translateY(-34px)
            }
        }

        .EnterpriseHubStatsCarousel__statsDescription {
            color: #e7ecf1;
            max-width: 460px;
            font: var(--fontWeightNormal) 22px/1.19 var(--fontFamily)
        }

        @media (min-width:900px) {
            .EnterpriseHubStatsCarousel__statsDescription {
                margin: 0 46px;
                font: var(--fontWeightNormal) 24px/1.33 var(--fontFamily)
            }
        }

        .EnterpriseHubStatsCarousel__statsDescription,
        .EnterpriseHubStatsCarousel__statsValue {
            -webkit-mask-image: linear-gradient(45deg, transparent, #000 30%, #000 70%, transparent);
            mask-image: linear-gradient(45deg, transparent, #000 30%, #000 70%, transparent);
            -webkit-mask-size: 1000%;
            mask-size: 1000%;
            -webkit-mask-position: 0;
            mask-position: 0;
            transition: -webkit-mask-position .85s ease-out;
            transition: mask-position .85s ease-out;
            transition: mask-position .85s ease-out, -webkit-mask-position .85s ease-out
        }

        .EnterpriseHubStatsCarousel__statsItem--isActive {
            opacity: 1;
            pointer-events: auto
        }

        .EnterpriseHubStatsCarousel__statsItem--isActive .EnterpriseHubStatsCarousel__statsDescription,
        .EnterpriseHubStatsCarousel__statsItem--isActive .EnterpriseHubStatsCarousel__statsValue {
            -webkit-mask-position: 50%;
            mask-position: 50%
        }

        .EnterpriseHubStatsCarousel__waveContainer {
            position: absolute;
            inset: 0;
            background: #000;
            z-index: -2
        }

/* --- block --- */

.CarouselNav {
            --progressIndicatorIndex: 0;
            --mirroredProgressIndicatorIndex: 0;
            display: flex;
            justify-content: center;
            position: relative
        }

        .CarouselNav__indicatorControlList {
            position: absolute;
            top: -2px;
            z-index: 1;
            display: flex;
            -moz-column-gap: 4px;
            column-gap: 4px;
            padding: 0;
            margin: 0;
            list-style: none
        }

        .CarouselNav__controlButton {
            position: relative;
            display: block;
            outline: none;
            background: none;
            border: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            padding: 0;
            height: 6px;
            width: 24px
        }

        .CarouselNav__controlButton:before {
            content: "";
            position: absolute;
            top: 0;
            right: -2px;
            bottom: 0;
            left: -2px;
            box-shadow: var(--focusBoxShadow);
            opacity: 0;
            transition: var(--hoverTransition);
            transition-property: opacity
        }

        .CarouselNav__controlButton:after {
            content: "";
            position: absolute;
            inset: -40px 0
        }

        .CarouselNav__controlButton:focus-visible {
            outline: none
        }

        .CarouselNav__controlButton:focus-visible:before {
            opacity: 1
        }

        .CarouselNav__progressBar {
            pointer-events: none
        }

        .CarouselNav__progressIndicator {
            transition: var(--progressTransition, transform .35s ease);
            transform: translateX(calc(var(--progressIndicatorIndex)*28px))
        }

        .CarouselNav__progressIndicator--mirrored {
            transform: translateX(calc(var(--mirroredProgressIndicatorIndex)*28px))
        }

/* --- block --- */

.AccentedCardCarouselItemUserLogo.UserLogo {
            --userLogoColor: #425466;
            --userLogoColorAlt: var(--backgroundColor);
            --userLogoColorAltShadeDarker: color-mix(in srgb, var(--userLogoColor) 75%, #000);
            --userLogoColorAltShadeLighter: color-mix(in srgb, var(--userLogoColor) 75%, #fff);
            --userLogoColorAltNoTransparency: var(--backgroundColor);
            width: 100%;
            height: auto
        }

        .AccentedCardCarouselItemUserLogo.UserLogo path {
            transition: var(--hoverTransition);
            transition-property: fill
        }

        a>.AccentedCardCarouselItemUserLogo.UserLogo:hover {
            --userLogoColor: initial;
            --userLogoColorAlt: initial;
            --userLogoColorAltShadeDarker: initial;
            --userLogoColorAltShadeLighter: initial;
            --userLogoColorAltNoTransparency: initial
        }

/* --- block --- */

.AccentedCardCarouselItem {
            display: grid;
            min-width: var(--layoutWidth)
        }

        @media (min-width:600px) {
            .AccentedCardCarouselItem {
                min-width: calc(var(--layoutWidth)/2)
            }
        }

        .AccentedCardCarouselItem__accentedCard.AccentedCard {
            display: flex;
            flex-direction: column;
            margin-right: 24px
        }

        .AccentedCardCarouselItem__content {
            padding: 40px 24px
        }

        @media (min-width:900px) {
            .AccentedCardCarouselItem__content {
                padding: 80px 40px 68px
            }
        }

        .AccentedCardCarouselItem__userLogoGrid {
            position: relative;
            display: grid;
            grid: auto/repeat(3, 1fr);
            gap: 8px;
            padding: 24px 16px;
            margin-top: auto
        }

        .AccentedCardCarouselItem__userLogoGrid:before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 24px;
            right: 24px;
            height: 1px;
            background-color: #e7ecf1
        }

        @media (min-width:600px) {
            .AccentedCardCarouselItem__userLogoGrid {
                padding: 24px 32px
            }
        }

        @media (min-width:900px) {
            .AccentedCardCarouselItem__userLogoGrid {
                gap: 24px;
                padding: 32px 30px
            }

            .AccentedCardCarouselItem__userLogoGrid:before {
                left: 40px;
                right: 40px
            }
        }

        .AccentedCardCarouselItem__cta {
            font: var(--ctaFont)
        }

        .AccentedCardCarouselItem__ctas {
            display: flex;
            gap: 16px
        }

        .Link+.AccentedCardCarouselItem__ctas {
            margin-left: -16px
        }

        .AccentedCardCarouselItem__userLogo.UserLogo {
            --userLogoColor: #425466;
            --userLogoColorAlt: var(--backgroundColor);
            --userLogoColorAltShadeDarker: color-mix(in srgb, var(--userLogoColor) 75%, #000);
            --userLogoColorAltShadeLighter: color-mix(in srgb, var(--userLogoColor) 75%, #fff);
            --userLogoColorAltNoTransparency: var(--backgroundColor);
            width: 100%;
            height: auto
        }

        .AccentedCardCarouselItem__userLogo.UserLogo path {
            transition: var(--hoverTransition);
            transition-property: fill
        }

        .AccentedCardCarouselItem__userLogo.UserLogo:hover {
            --userLogoColor: initial;
            --userLogoColorAlt: initial;
            --userLogoColorAltShadeDarker: initial;
            --userLogoColorAltShadeLighter: initial;
            --userLogoColorAltNoTransparency: initial
        }

/* --- block --- */

.AccentedCardCarousel {
            --accentedCardCarouselIndicatorWidth: 0;
            position: relative;
            display: grid
        }

        .AccentedCardCarousel__fullWidthCarousel.FullWidthCarousel {
            --overflowMargin: 24px;
            --fullWidthCarouselOverflowPaddingTop: 24px;
            --fullWidthCarouselOverflowPaddingBottom: 128px
        }

        .AccentedCardCarousel__nav {
            padding: 0 var(--columnPaddingNormal);
            display: none;
            justify-content: flex-start;
            gap: 4px
        }

        @media (min-width:600px) {
            .AccentedCardCarousel__nav {
                display: flex;
                justify-content: flex-end
            }
        }

        .HubPage .AccentedCardCarousel__nav {
            padding: 0
        }

        .AccentedCardCarousel__button {
            position: relative;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            display: grid;
            place-items: center;
            width: 28px;
            height: 28px;
            border-radius: 14px;
            border: 1px solid transparent;
            outline: none;
            background-color: transparent;
            cursor: pointer;
            padding: 0
        }

        @media (prefers-reduced-motion:no-preference) {
            .AccentedCardCarousel__button {
                transition: .15s cubic-bezier(.65, 0, .35, 1);
                transition-property: border-color, background-color
            }
        }

        .AccentedCardCarousel__button:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: var(--accentColor);
            opacity: .15;
            border-radius: 50%;
            transition-property: opacity
        }

        .AccentedCardCarousel__button:before {
            content: "";
            position: absolute;
            inset: -2px;
            box-shadow: var(--focusBoxShadow);
            opacity: 0;
            border-radius: 50%;
            transition: var(--hoverTransition);
            transition-property: opacity
        }

        .AccentedCardCarousel__button:focus-visible {
            outline: none
        }

        .AccentedCardCarousel__button:focus-visible:before {
            opacity: 1
        }

        .AccentedCardCarousel__button>svg {
            stroke: var(--accentColor, #635bff)
        }

        @media (prefers-reduced-motion:no-preference) {
            .AccentedCardCarousel__button>svg {
                transition: stroke .15s cubic-bezier(.65, 0, .35, 1)
            }
        }

        .AccentedCardCarousel__button.AccentedCardCarousel__button--inactive {
            border-color: var(--monochrome-slate-6, #e7ecf1);
            background-color: transparent;
            pointer-events: none
        }

        .AccentedCardCarousel__button.AccentedCardCarousel__button--inactive>svg {
            stroke: #727f96
        }

        .AccentedCardCarousel__button.AccentedCardCarousel__button--inactive:after {
            background-color: transparent;
            transition: .15s cubic-bezier(.65, 0, .35, 1)
        }

        .AccentedCardCarousel__mobilePaginationTrack {
            position: absolute;
            left: 50%;
            bottom: -32px;
            width: 176px;
            height: 2px;
            background-color: #c4ccd8;
            border-radius: 2px;
            transform: translateX(-50%)
        }

        @media (pointer:fine) {
            .AccentedCardCarousel__mobilePaginationTrack {
                display: none
            }
        }

        @media (min-width:600px) {
            .AccentedCardCarousel__mobilePaginationTrack {
                bottom: -56px
            }
        }

        .AccentedCardCarousel__mobilePaginationIndicator {
            position: absolute;
            top: 0;
            left: 0;
            width: var(--accentedCardCarouselIndicatorWidth);
            height: 2px;
            border-radius: 2px;
            background-color: var(--accentColor, #635bff);
            transition: transform .25s ease-out
        }

/* --- block --- */

.FullWidthCarousel {
            --fullWidthCarouselOverflowPaddingNormal: 32px;
            --fullWidthCarouselOverflowPaddingLarge: 48px;
            --overflowMargin: 16px;
            --fullWidthCarouselOverflowPaddingTop: 0px;
            --fullWidthCarouselOverflowPaddingBottom: 0px;
            --fullWidthCarouselItemWidth: 0;
            min-width: 0
        }

        @media (min-width:900px) {
            .FullWidthCarousel {
                --fullWidthCarouselOverflowPaddingLarge: 64px
            }
        }

        .FullWidthCarousel__layout {
            display: flex;
            width: var(--windowWidth);
            margin-left: calc(var(--overflowMargin)*-1)
        }

        @media (min-width:1112px) {
            .FullWidthCarousel__layout {
                --overflowMargin: calc(var(--windowWidth)/2 - var(--layoutWidthMax)/2)
            }
        }

        .HubPage .FullWidthCarousel__layout {
            --overflowMargin: calc(var(--windowWidth)/2 - var(--layoutWidth)/2)
        }

        .FullWidthCarousel__track {
            position: relative;
            display: flex;
            padding: var(--fullWidthCarouselOverflowPaddingTop) 0 var(--fullWidthCarouselOverflowPaddingBottom);
            margin: calc(var(--fullWidthCarouselOverflowPaddingTop)*-1) 0 calc(var(--fullWidthCarouselOverflowPaddingBottom)*-1);
            scroll-snap-type: x mandatory;
            scroll-padding-left: var(--overflowMargin);
            scroll-padding-right: var(--overflowMargin);
            scrollbar-width: none;
            overflow-x: scroll;
            overscroll-behavior-x: contain;
            -webkit-overflow-scrolling: touch
        }

        .FullWidthCarousel__track::-webkit-scrollbar {
            display: none
        }

        .FullWidthCarousel__track>* {
            scroll-snap-align: start
        }

        .FullWidthCarousel__spacer {
            min-width: var(--overflowMargin);
            scroll-snap-align: none;
            margin: 0;
            height: 1px
        }

/* --- block --- */

.EnterpriseHubResouceDetail {
            display: flex;
            gap: 16px;
            flex-direction: column;
            align-items: flex-start
        }

        .BasicIcon .EnterpriseHubResouceDetail {
            --basicIconColor: #4f5b76
        }

/* --- block --- */

.Badge {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 4px;
            position: relative;
            z-index: 0;
            padding: var(--badgePaddingBlock, 3px) var(--badgePaddingInline, 8px);
            color: var(--badgeTextColor, #2c3a57);
            font: var(--fontWeightBold) 12px/15px var(--fontFamily);
            white-space: nowrap
        }

        .Badge:before {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            border-radius: var(--badgeBorderRadius, 9999px);
            background: var(--badgeBackground, #e7eaef);
            content: "";
            opacity: var(--badgeBackgroundOpacity, 1)
        }

        .Badge.variant--Squared {
            --badgeBorderRadius: 4px;
            --badgePaddingInline: 10px
        }

        .Badge.Badge--accented {
            --badgeBackground: var(--accentColor);
            --badgeTextColor: var(--accentColor);
            --badgeBackgroundOpacity: 0.07
        }

        .Badge.Badge--tooltip {
            padding-right: 4px
        }

        .Badge.Badge--hasIcon {
            --badgeTextColor: #0a2540;
            gap: 8px;
            padding: 4px 10px
        }

        .Badge.color--Purple {
            --badgeTextColor: #96f;
            --badgeBackground: #f0e8ff
        }

        .Badge.color--Blue {
            --badgeTextColor: #0073e6;
            --badgeBackground: #d9eafb
        }

        .Badge.color--Cyan {
            --badgeTextColor: #02bcf5;
            --badgeBackground: #d9f5fe
        }

        .Badge.color--Teal {
            --badgeTextColor: #00c4c4;
            --badgeBackground: #d9f6f6
        }

        .Badge.color--Pink {
            --badgeTextColor: #ff5996;
            --badgeBackground: #ffe6ef
        }

        .Badge.color--Green {
            --badgeTextColor: #15be53;
            --badgeBackground: #e6f9e8
        }

        .Badge.color--Slate {
            --badgeTextColor: #2e3a55;
            --badgeBackground: #e7eaef
        }

        .Badge__basicIcon.BasicIcon {
            --basicIconColor: #4f5b76
        }

/* --- block --- */

.FeatureCard.Card {
            --featureCardCopyRowPadding: 24px;
            --featureCardGraphicPaddingNone: 0;
            --featureCardGraphicPaddingMedium: var(--rowGapMedium);
            --featureCardGraphicPadding: var(--featureCardGraphicPaddingMedium)
        }

        @media (min-width:900px) {
            .FeatureCard.Card {
                --featureCardCopyRowPadding: 32px
            }
        }

        .FeatureCard__layout {
            display: grid;
            grid-template-columns: 1fr;
            row-gap: var(--rowGapMedium)
        }

        @media (min-width:600px) {
            .FeatureCard__layout {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        @media (min-width:900px) {
            .FeatureCard__layout {
                grid-template-columns: 1fr 380px
            }
        }

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

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

        .FeatureCard__copy.Copy {
            align-content: center;
            padding-bottom: var(--featureCardCopyRowPadding);
            order: 2
        }

        .FeatureCard--isGraphicLastMobile .FeatureCard__copy.Copy {
            order: 1;
            padding-top: var(--featureCardCopyRowPadding);
            padding-bottom: 0
        }

        .FeatureCard__copy.Copy:last-child {
            padding-top: var(--featureCardCopyRowPadding)
        }

        @media (min-width:600px) {
            .FeatureCard__copy.Copy {
                --paddingLeft: 40px;
                order: 1;
                grid-column: span 2;
                padding-top: var(--featureCardCopyRowPadding)
            }

            .FeatureCard--isGraphicLastMobile .FeatureCard__copy.Copy {
                padding-bottom: var(--featureCardCopyRowPadding)
            }

            [data-columns="1,1"] .FeatureCard__copy.Copy {
                order: 2;
                padding-top: 0
            }

            .FeatureCard--isGraphicLastMobile [data-columns="1,1"] .FeatureCard__copy.Copy {
                order: 1;
                padding-top: var(--featureCardCopyRowPadding);
                padding-bottom: 0
            }
        }

        @media (min-width:900px) {
            .FeatureCard__copy.Copy {
                --paddingLeft: 56px;
                grid-column: span 1
            }

            [data-columns="1,1"] .FeatureCard__copy.Copy {
                order: 1;
                padding-top: var(--featureCardCopyRowPadding)
            }

            .FeatureCard--isGraphicLastMobile [data-columns="1,1"] .FeatureCard__copy.Copy {
                padding-bottom: var(--featureCardCopyRowPadding)
            }
        }

        @media (max-width:599px) {
            .HubPage .FeatureCard__copy.Copy {
                padding: 0 24px 32px
            }
        }

        .FeatureCard__graphic {
            position: relative;
            display: flex;
            padding: var(--featureCardGraphicPadding);
            background-color: var(--featureCardGraphicBackground, none);
            align-items: var(--featureCardGraphicAlign, center);
            justify-content: center;
            order: 1;
            overflow: hidden
        }

        @media (min-width:600px) {
            .FeatureCard__graphic {
                order: 2;
                justify-content: var(--featureCardGraphicJustify, flex-end)
            }
        }

        @media (min-width:600px) {
            .FeatureCard__graphic>.LogoCloud {
                --logoCloudMaxWidth: 382px
            }
        }

        .FeatureCard__graphic>.GuideGraphic {
            position: relative;
            bottom: -60px;
            margin-top: -40px
        }

        @media (min-width:600px) {
            .FeatureCard__graphic>.GuideGraphic {
                margin-top: -20px
            }
        }

        @media (min-width:600px) {
            [data-columns="1,1"] .FeatureCard__graphic {
                order: 1
            }
        }

        @media (min-width:900px) {
            [data-columns="1,1"] .FeatureCard__graphic {
                order: 2
            }
        }

        @media (max-width:599px) {
            .HubPage .FeatureCard__graphic:after {
                position: absolute;
                bottom: 0;
                inset-inline: 0;
                border-bottom: 1px solid #e7ecf1;
                content: ""
            }
        }

/* --- block --- */

.List {
            --listSpacing: 4px;
            --linkWeight: var(--fontWeightSemibold);
            --columnCount: 1;
            --paddingRight: var(--columnPaddingNormal);
            --paddingLeft: var(--columnPaddingNormal);
            padding: 0 var(--paddingRight) 0 var(--paddingLeft);
            font: var(--fontWeightNormal) 15px/1.6 var(--fontFamily);
            letter-spacing: .2px
        }

        .HubPage .List,
        .List--inline {
            --paddingRight: 0;
            --paddingLeft: 0
        }

        .Copy__footer>.List {
            margin-left: calc(var(--footerPaddingLeft)*-1);
            margin-right: calc(var(--paddingRight)*-1)
        }

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

        .List__title.CopyTitle {
            --titleFontSize: 15px;
            --titleLineHeight: 1.6;
            --titleWeight: var(--fontWeightSemibold);
            --linkColor: currentColor;
            --linkWeight: var(--fontWeightSemibold);
            margin-bottom: 8px;
            color: var(--titleColor)
        }

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

        .List__list {
            margin: 0;
            padding: 0;
            list-style: none
        }

        .List--hasTitle .List__list {
            --linkColor: currentColor;
            --linkWeight: var(--fontWeightNormal)
        }

        .List[data-column-count] .List__list {
            display: grid;
            grid: auto/repeat(var(--columnCount), 1fr);
            gap: var(--listSpacing) 32px;
            margin: var(--listSpacing) 0
        }

        .HubPage .List[data-column-count] .List__list {
            gap: var(--listSpacing) var(--gridColumnGap)
        }

        @media (min-width:600px) {

            .List[data-column-count="2"] .List__list,
            .List[data-column-count="3"] .List__list {
                --columnCount: 2
            }
        }

        @media (min-width:900px) {
            .List[data-column-count="3"] .List__list {
                --columnCount: 3
            }
        }

        .List__item {
            position: relative;
            margin: var(--listSpacing) 0
        }

        .List--inline .List__item:first-of-type {
            margin-top: 0
        }

        .List--inline .List__item:last-of-type {
            margin-bottom: 0
        }

        .List[data-column-count] .List__item {
            margin-top: 0;
            margin-bottom: 0
        }

        .ListItem--hasIcon {
            padding-left: 24px
        }

        .List__itemIcon {
            position: absolute;
            top: 5px;
            left: 0
        }

        .ListItem--hasFlag {
            padding-left: 32px
        }

        .List__itemFlag {
            position: absolute;
            top: 5px;
            left: 0
        }

        .List__ctaGroup {
            margin-top: 12px
        }

        .ListItem:has(.ListItem__badgeContainer) .ListItem__label {
            margin-right: 4px
        }

/* --- block --- */

.EnterpriseHubPageContent {
            --heroHeight: calc(100vh - 100px);
            --fixedNavHeight: 64px;
            --fixedNavSpacing: 23px
        }

        @media (min-width:600px) {
            .EnterpriseHubPageContent {
                --fixedNavSpacing: 24px
            }
        }

        .EnterpriseHubPageContent__cta {
            position: fixed;
            inset: 0;
            top: auto;
            display: flex;
            justify-content: center;
            padding: 1rem;
            z-index: 500;
            background-color: #fff;
            will-change: transform;
            transform: translateY(100%);
            transition: transform .25s ease-in-out, opacity .25s ease-in-out;
            opacity: 0;
            box-shadow: 0 -3px 5px rgba(0, 0, 0, .15)
        }

        @media (min-width:600px) {
            .EnterpriseHubPageContent__cta {
                display: none;
                visibility: hidden
            }
        }

        .EnterpriseHubPageContent__cta--visible {
            transform: translateY(0);
            opacity: 1
        }

        .EnterpriseHubPageContent .SiteHeader {
            position: absolute;
            width: 100%
        }

        .EnterpriseHubPageContent__bodyContainer {
            position: relative;
            background: #fff
        }

        @media (min-width:900px) {

            .EnterpriseHubPageContent--coverNav .EnterpriseHubHeroCardFan,
            .EnterpriseHubPageContent--coverNav .EnterpriseHubPageContent__bodyContainer {
                z-index: 98
            }
        }

        .EnterpriseHubPageContent__heroContainer {
            overflow: hidden
        }

        .EnterpriseHubGlobalPayments__section.Section {
            --sectionPaddingTop: 64px
        }

        @media (min-width:600px) {
            .EnterpriseHubGlobalPayments__section.Section {
                --sectionPaddingTop: 88px
            }
        }

        .EnterpriseHubBucketListing__bucketListing--scaleUp .UserLogo {
            transform: scale(1.3)
        }

/* --- block --- */


        @media (max-width:899px) {
        }

        @media (min-width:900px) {
        }

        @media (prefers-reduced-motion:reduce) {
        }



        @media (min-width:900px) {
        }









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

        @media (min-width:900px) {

            .HubPage .SiteHeader__navContainer,
        }

        @media (pointer:fine) {

            @media (-webkit-min-device-pixel-ratio:2) {
            }

        }


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


        html[lang^=de] .SiteHeader__ctaNav,
        html[lang^=es]:has(.SiteHeader--hasSupportLink) .SiteHeader__ctaNav,
        html[lang^=fr]:has(.SiteHeader--hasSupportLink) .SiteHeader__ctaNav,
        html[lang^=ja]:has(.SiteHeader--hasSupportLink) .SiteHeader__ctaNav,
        html[lang^=nl]:has(.SiteHeader--hasSupportLink) .SiteHeader__ctaNav,
        html[lang^=th]:has(.SiteHeader--hasSupportLink) .SiteHeader__ctaNav {
            --ctaFont: var(--fontWeightSemibold) 14px/1.6 var(--fontFamily)
        }

        @media (min-width:900px) and (max-width:990px) {
            .MktRoot[lang^=en][data-loading] .SiteHeader__ctaNav {
                opacity: 0
            }
        }

        @media (min-width:900px) and (max-width:1069px) {
            .MktRoot:not([lang^=en])[data-loading] .SiteHeader__ctaNav {
                opacity: 0
            }
        }






        @media (min-width:900px) {
        }





        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
        }






        :lang(de) .SiteHeader--hasSupportLink .SiteHeader__ctaNav,
        :lang(es) .SiteHeader--hasSupportLink .SiteHeader__ctaNav,
        :lang(fr) .SiteHeader--hasSupportLink .SiteHeader__ctaNav,
        :lang(ja) .SiteHeader--hasSupportLink .SiteHeader__ctaNav,
        :lang(nl) .SiteHeader--hasSupportLink .SiteHeader__ctaNav,
        :lang(th) .SiteHeader--hasSupportLink .SiteHeader__ctaNav {
            margin-left: 4px
        }





        @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--opaque .SiteSolutionsNav {
                padding: 0;
                background-color: var(--menuBgColor)
            }

            .MktRoot .SiteHeader--isSticky.SiteHeader--opaque .SiteProductsNav {
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                background-color: var(--menuBgColor)
            }

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

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

        html:has(.SiteHeader--refreshed[data-menu-state=open]) {
            overflow: hidden;
            scrollbar-gutter: stable
        }

        .MktRoot .SiteHeader--refreshed {
            --siteMenuArrowSpacing: 0;
            --refreshedNavShadow: 0 30px 60px -50px rgba(0, 0, 0, 0.10196078431372549), 0 30px 60px -10px rgba(50, 50, 93, 0.25098039215686274);
            --refreshedMenuShadow: 0 18px 36px -18px rgba(0, 0, 0, 0.1), 0 30px 45px -30px rgba(50, 50, 93, 0.25);
            --refreshedNavWidth: calc(100vw - var(--columnPaddingNormal)*2 - var(--scrollbarWidth));
            --refreshedNavMaxWidth: 1264px;
            --refreshedNavHeight: 64px;
            --refreshedNavPaddingBlock: 6px;
            --refreshedNavBorderRadius: 8px;
            --navContainerBorderBottomRadius: 8px;
            --navContainerBgColor: #fff;
            --navContainerBoxShadow: var(--refreshedNavShadow);
            --hoverTransition: none;
            padding-block: var(--refreshedNavPaddingBlock)
        }

        .MktRoot .SiteHeader--refreshed.SiteHeader--hasGuides:after {
            z-index: -1
        }

        .MktRoot .SiteHeader--refreshed .SiteHeader__navContainer {
            min-height: var(--refreshedNavHeight);
            padding: 12px 16px;
            border-top-left-radius: var(--refreshedNavBorderRadius);
            border-top-right-radius: var(--refreshedNavBorderRadius)
        }

        .MktRoot .SiteHeader--refreshed .SiteHeader__navContainer .SiteHeaderNav__list {
            display: var(--desktopNavDisplay, flex);
            gap: 1px
        }

        .MktRoot .SiteHeader--refreshed .SiteHeader__navContainer .SiteHeaderNavItem__link {
            text-box: trim-both cap alphabetic
        }

        .MktRoot .SiteHeader--refreshed .SiteHeader__navContainer .SiteHeaderNavItem__link--hasCaret {
            -moz-column-gap: 4px;
            column-gap: 4px
        }

        .MktRoot .SiteHeader--refreshed .SiteHeader__navContainer .SiteHeaderNavItem__link--hasCaret .SiteHeaderNavItem__linkCaretContainer {
            margin-block-start: 2px;
            padding: 0
        }

        .MktRoot .SiteHeader--refreshed .SiteHeader__navContainer .SiteHeader__ctaNavContainer {
            margin-top: 0
        }

        .MktRoot .SiteHeader--refreshed .SiteHeader__navContainer .SiteHeader__ctaNavContainer .HoverArrow {
            --hoverTransition: 150ms cubic-bezier(0.215, 0.61, 0.355, 1)
        }

        .MktRoot .SiteHeader--refreshed .SiteHeader__navContainer .SiteHeader__ctaNavContainer .CtaButton.variant--Link {
            padding: 3px 0 5px
        }

        .MktRoot .SiteHeader--refreshed .SiteHeader__navContainer .SiteHeader__ctaNavContainer .CtaButton {
            display: flex;
            align-items: center;
            justify-content: center
        }

        .MktRoot .SiteHeader--refreshed.SiteHeader--mobileMenuVisible .SiteHeader__container {
            --navContainerTransitionMs: 0ms
        }

        .MktRoot .SiteHeader--refreshed.theme--HubDark:hover {
            --buttonHoverColor: #031323;
            fill: var(--knockoutColor)
        }

        .MktRoot .SiteHeader--refreshed.theme--HubDark .RefreshedMenuButton__icon {
            fill: var(--knockoutColor)
        }

        .MktRoot .SiteHeader--refreshed.SiteHeader--isHomepage .RefreshedMenuButton__icon {
            fill: var(--accentBrandDark)
        }

        @media (max-width:900px) {
            .MktRoot .SiteHeader--refreshed {
                padding-top: 0
            }

            .MktRoot .SiteHeader--refreshed .SiteHeader__container {
                padding: 16px 24px 12px
            }

            .MktRoot .SiteHeader--refreshed .SiteHeader__navContainer {
                padding: 0;
                min-height: 40px
            }
        }

        @media (min-width:900px) {
            .MktRoot .SiteHeader--refreshed .SiteHeader__logoLink {
                padding-block: 4px 5px;
                padding-inline: 4px
            }
        }

        .MktRoot .SiteHeader--refreshed .SiteHeader__overlay {
            position: fixed;
            inset: 0;
            z-index: 1;
            background: linear-gradient(transparent, rgba(236, 239, 241, .8));
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
            transition-property: opacity;
            transition-timing-function: cubic-bezier(.22, 1, .36, 1);
            transition-duration: .5s
        }

        .MktRoot .SiteHeader--refreshed .SiteHeader__container {
            overflow: hidden;
            z-index: 2
        }

        @media (min-width:1112px) {
            .MktRoot .SiteHeader--refreshed .SiteHeader__container {
                overflow: visible
            }
        }

        .MktRoot .SiteHeader--refreshed .SiteHeader__container:after {
            content: "";
            display: block;
            width: calc(100vw - var(--columnPaddingNormal)*2 - var(--scrollbarWidth));
            max-width: 1264px;
            height: 100%;
            position: absolute;
            z-index: -1;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition-property: opacity, border-radius;
            transition-duration: .24s, 0ms;
            transition-timing-function: cubic-bezier(.45, .05, .55, .95), linear;
            border-top-left-radius: var(--refreshedNavBorderRadius);
            border-top-right-radius: var(--refreshedNavBorderRadius);
            border-bottom-left-radius: var(--navContainerBorderBottomRadius);
            border-bottom-right-radius: var(--navContainerBorderBottomRadius);
            background-color: var(--navContainerBgColor);
            box-shadow: var(--navContainerBoxShadow)
        }

        @media (min-width:900px) {

            .MktRoot .SiteHeader--refreshed .SiteHeader__container .CtaButton,
            .MktRoot .SiteHeader--refreshed .SiteHeader__container .RefreshedNavGradientCta .HoverArrow,
            .MktRoot .SiteHeader--refreshed .SiteHeader__container .RefreshedNavGradientCta .NavCta__label,
            .MktRoot .SiteHeader--refreshed .SiteHeader__container .RefreshedNavGradientCta .NavCta__label--noGradient,
            .MktRoot .SiteHeader--refreshed .SiteHeader__container .SiteHeader__logo svg path,
            .MktRoot .SiteHeader--refreshed .SiteHeader__container .SiteHeaderNavItem__link {
                transition-property: opacity, color, background-color, border, fill, stroke;
                transition-duration: .3s;
                transition-timing-function: cubic-bezier(.25, 1, .5, 1);
                transform: translateZ(0)
            }

            .MktRoot .SiteHeader--refreshed .SiteHeader__container .SiteHeader__logo {
                transition-duration: .24s;
                transition-timing-function: cubic-bezier(.45, .05, .55, .95)
            }

            .MktRoot .SiteHeader--refreshed .SiteHeader__container:hover {
                --navColor: #061b31;
                --navHoverColor: #061b31;
                --linkColor: #061b31;
                --linkHoverColor: #061b31;
                --linkHoverOpacity: 0.6;
                --menuBgColor: #eff3f9;
                --userLogoColor: #031323;
                --knockoutColor: #fff;
                --buttonColor: #031323
            }

            .MktRoot .SiteHeader--refreshed .SiteHeader__container:hover .RefreshedNavGradientCta .CtaButton {
                background-color: #0a2540
            }

            .MktRoot .SiteHeader--refreshed .SiteHeader__container:hover .CtaButton.variant--Button:hover {
                opacity: .6
            }

            .MktRoot .SiteHeader--refreshed .SiteHeader__container:hover .RefreshedNavGradientCta .NavCta__label {
                opacity: 0
            }

            .MktRoot .SiteHeader--refreshed .SiteHeader__container:hover .RefreshedNavGradientCta .NavCta__label--noGradient {
                opacity: 1
            }

            .MktRoot .SiteHeader--refreshed .SiteHeader__container:hover .RefreshedNavGradientCta .HoverArrow {
                stroke: #fff !important
            }

            .MktRoot .SiteHeader--refreshed .SiteHeader__container:hover:after {
                opacity: 1
            }
        }

        .MktRoot .SiteHeader--refreshed .SiteHeader__menuContainer {
            all: unset;
            display: block;
            opacity: 1;
            height: 100%;
            position: relative;
            z-index: 2;
            pointer-events: none
        }

        .MktRoot .SiteHeader--refreshed .SiteHeader__menuContainer:before {
            content: "";
            display: block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: var(--refreshedNavWidth);
            max-width: var(--refreshedNavMaxWidth);
            transition-property: opacity;
            transition-duration: .24s;
            transition-timing-function: cubic-bezier(.45, .05, .55, .95);
            height: 10px;
            z-index: 100;
            top: -10px;
            border-bottom: 1px solid #e5edf5;
            pointer-events: auto
        }

        .MktRoot .SiteHeader--refreshed .RefreshedMenu {
            width: var(--refreshedNavWidth);
            max-width: var(--refreshedNavMaxWidth);
            background-color: #fff;
            border-bottom-left-radius: var(--refreshedNavBorderRadius);
            border-bottom-right-radius: var(--refreshedNavBorderRadius);
            box-shadow: var(--refreshedMenuShadow);
            display: inline-block;
            z-index: 2;
            overflow: clip;
            left: 50%;
            transform: translateX(-50%);
            transition: height .2s cubic-bezier(.45, .05, .55, .95);
            will-change: height
        }

        .MktRoot .SiteHeader--refreshed .RefreshedMenu__card {
            position: relative;
            height: 100%;
            overflow: hidden;
            z-index: 1
        }

        .MktRoot .SiteHeader--refreshed .RefreshedMenu__section {
            --siteMenuSectionOffset: 0;
            display: inline-block;
            position: absolute;
            top: 0;
            left: 50%;
            opacity: 1;
            transform: translateX(-50%) translateX(var(--siteMenuSectionOffset));
            transition-property: opacity, transform;
            transition-timing-function: cubic-bezier(.4, 0, .2, 1);
            transition-duration: .25s, .5s;
            will-change: opacity, transform
        }

        .MktRoot .SiteHeader--refreshed .RefreshedMenu__section[aria-hidden=true] {
            opacity: 0;
            pointer-events: none
        }

        .MktRoot .SiteHeader--refreshed .RefreshedMenu__section[aria-hidden=true].SiteMenu__section--left {
            --siteMenuSectionOffset: -20%
        }

        .MktRoot .SiteHeader--refreshed .RefreshedMenu__section[aria-hidden=true].SiteMenu__section--right {
            --siteMenuSectionOffset: 20%
        }

        .MktRoot .SiteHeader--refreshed.SiteHeader--noTransitions .RefreshedMenu__section {
            transition-duration: 0ms
        }

        .MktRoot .SiteHeader--refreshed[data-menu-state=closed].SiteHeader--dropdownVisible .CtaButton,
        .MktRoot .SiteHeader--refreshed[data-menu-state=closed].SiteHeader--dropdownVisible .RefreshedNavGradientCta .HoverArrow,
        .MktRoot .SiteHeader--refreshed[data-menu-state=closed].SiteHeader--dropdownVisible .RefreshedNavGradientCta .NavCta__label,
        .MktRoot .SiteHeader--refreshed[data-menu-state=closed].SiteHeader--dropdownVisible .RefreshedNavGradientCta .NavCta__label--noGradient,
        .MktRoot .SiteHeader--refreshed[data-menu-state=closed].SiteHeader--dropdownVisible .SiteHeader__logo svg path,
        .MktRoot .SiteHeader--refreshed[data-menu-state=closed].SiteHeader--dropdownVisible .SiteHeaderNavItem__link {
            transition-delay: .24s
        }

        .MktRoot .SiteHeader--refreshed[data-menu-state=closed].SiteHeader--dropdownVisible .SiteHeader__container:after {
            transition-delay: .24s, .2s
        }

        .MktRoot .SiteHeader--refreshed[data-menu-state=closed].SiteHeader--dropdownVisible .SiteHeaderNavItem__link:not(.SiteHeaderNavItem__link--hasCaret):hover {
            transition-delay: 0ms
        }

        .MktRoot .SiteHeader--refreshed[data-menu-state=closed] .RefreshedMenu {
            height: 0;
            pointer-events: none
        }

        .MktRoot .SiteHeader--refreshed[data-menu-state=closed] .SiteHeader__overlay {
            opacity: 0;
            pointer-events: none
        }

        .MktRoot .SiteHeader--refreshed[data-menu-state=closed] .SiteHeader__menuContainer:before {
            opacity: 0
        }

        .MktRoot .SiteHeader--refreshed[data-menu-state=open] .SiteHeader__container {
            --navContainerBorderBottomRadius: 0
        }

        @media (min-width:900px) {
            .MktRoot .SiteHeader--refreshed[data-menu-state=open] .SiteHeader__container {
                --navColor: #061b31;
                --navHoverColor: #061b31;
                --linkColor: #061b31;
                --linkHoverColor: #061b31;
                --linkHoverOpacity: 0.6;
                --menuBgColor: #eff3f9;
                --userLogoColor: #031323;
                --knockoutColor: #fff;
                --buttonColor: #031323
            }
        }

        .MktRoot .SiteHeader--refreshed[data-menu-state=open] .SiteHeader__container .RefreshedNavGradientCta .CtaButton {
            background-color: #0a2540
        }

        .MktRoot .SiteHeader--refreshed[data-menu-state=open] .SiteHeader__container .RefreshedNavGradientCta .CtaButton:hover {
            opacity: .6
        }

        .MktRoot .SiteHeader--refreshed[data-menu-state=open] .SiteHeader__container .RefreshedNavGradientCta .NavCta__label {
            opacity: 0
        }

        .MktRoot .SiteHeader--refreshed[data-menu-state=open] .SiteHeader__container .RefreshedNavGradientCta .NavCta__label--noGradient {
            opacity: 1
        }

        .MktRoot .SiteHeader--refreshed[data-menu-state=open] .SiteHeader__container .RefreshedNavGradientCta .HoverArrow {
            stroke: #fff !important
        }

        .MktRoot .SiteHeader--refreshed[data-menu-state=open] .SiteHeader__container:after {
            opacity: 1;
            transition: none
        }

        .MktRoot .SiteHeader--refreshed[data-menu-state=open] .RefreshedMenu {
            height: var(--siteMenuHeight);
            pointer-events: auto
        }

        .MktRoot .SiteHeader--refreshed[data-menu-state=open] .SiteHeader__menuContainer:before,
        .MktRoot .SiteHeader--refreshed[data-menu-state=open] .SiteHeader__overlay {
            opacity: 1
        }

/* --- block --- */





        .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
        }

        html[lang^=de] .SiteHeaderNavItem__link,
        html[lang^=de] .SiteHeaderNavItem__link.Link,
        html[lang^=es]:has(.SiteHeader--hasSupportLink) .SiteHeaderNavItem__link,
        html[lang^=es]:has(.SiteHeader--hasSupportLink) .SiteHeaderNavItem__link.Link,
        html[lang^=fr]:has(.SiteHeader--hasSupportLink) .SiteHeaderNavItem__link,
        html[lang^=fr]:has(.SiteHeader--hasSupportLink) .SiteHeaderNavItem__link.Link,
        html[lang^=ja]:has(.SiteHeader--hasSupportLink) .SiteHeaderNavItem__link,
        html[lang^=ja]:has(.SiteHeader--hasSupportLink) .SiteHeaderNavItem__link.Link,
        html[lang^=nl]:has(.SiteHeader--hasSupportLink) .SiteHeaderNavItem__link,
        html[lang^=nl]:has(.SiteHeader--hasSupportLink) .SiteHeaderNavItem__link.Link,
        html[lang^=th]:has(.SiteHeader--hasSupportLink) .SiteHeaderNavItem__link,
        html[lang^=th]:has(.SiteHeader--hasSupportLink) .SiteHeaderNavItem__link.Link {
            font: var(--fontWeightBold) 14px/1.6 var(--fontFamily)
        }


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

        html[lang^=de] .SiteHeader--hasContactSales:not(.SiteHeader--hasSupportLink, .SiteHeader--refreshed) .SiteHeaderNavItem__link,
        html[lang^=de] .SiteHeader--hasContactSales:not(.SiteHeader--hasSupportLink, .SiteHeader--refreshed) .SiteHeaderNavItem__link.Link {
            padding: 10px 8px
        }


        :lang(de) .SiteHeader--hasSupportLink .SiteHeaderNavItem__link,
        :lang(de) .SiteHeader--hasSupportLink .SiteHeaderNavItem__link.Link,
        :lang(es) .SiteHeader--hasSupportLink .SiteHeaderNavItem__link,
        :lang(es) .SiteHeader--hasSupportLink .SiteHeaderNavItem__link.Link,
        :lang(fr) .SiteHeader--hasSupportLink .SiteHeaderNavItem__link,
        :lang(fr) .SiteHeader--hasSupportLink .SiteHeaderNavItem__link.Link,
        :lang(ja) .SiteHeader--hasSupportLink .SiteHeaderNavItem__link,
        :lang(ja) .SiteHeader--hasSupportLink .SiteHeaderNavItem__link.Link,
        :lang(nl) .SiteHeader--hasSupportLink .SiteHeaderNavItem__link,
        :lang(nl) .SiteHeader--hasSupportLink .SiteHeaderNavItem__link.Link,
        :lang(th) .SiteHeader--hasSupportLink .SiteHeaderNavItem__link,
        :lang(th) .SiteHeader--hasSupportLink .SiteHeaderNavItem__link.Link {
            padding: 10px 9px
        }
















/* --- block --- */



/* --- block --- */


/* --- block --- */






/* --- block --- */



        @media (pointer:fine) {

        }

        @media (pointer:coarse) {

        }








/* --- block --- */


        @media (min-width:900px) {
        }

        @media (prefers-reduced-motion:reduced) {
        }








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




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






























/* --- block --- */





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

        @media (pointer:fine) {
        }

        @media (pointer:coarse) {
        }




/* --- block --- */












/* --- block --- */







        @media (hover:none) {
        }


/* --- block --- */


        @media (hover:hover) {

            a:hover .RefreshedHoverArrow,
            button:hover .RefreshedHoverArrow {
                animation-name: refreshed-nav-hover-arrow-in;
                animation-duration: .3s;
                visibility: visible;
                transition-delay: 0ms
            }
        }

        @keyframes refreshed-nav-hover-arrow-in {
            0% {
                opacity: 0;
                transform: translateX(-3px)
            }

            to {
                opacity: 1;
                transform: translateX(0)
            }
        }

        @keyframes refreshed-nav-hover-arrow-out {
            0% {
                opacity: 1
            }

            to {
                opacity: 0
            }
        }

/* --- block --- */










        @container sessions-banner (min-width: 400px) {




        }

/* --- block --- */



/* --- block --- */




        aside.RefreshedNavigation__group {
            position: relative;
            background-color: var(--bg-aside);
            padding: 24px;
            margin: 0 -24px
        }

        @media (min-width:940px) {
            aside.RefreshedNavigation__group:after {
                content: "";
                display: block;
                position: absolute;
                inset: 0 -1000px 0 0;
                box-shadow: 0 -1px 0 0 var(--shadow-aside);
                background-color: var(--bg-aside);
                z-index: -1
            }
        }



        @media (min-width:900px) {



            aside.RefreshedNavigation__group {
                border-left: var(--group-border);
                padding: 32px 32px 48px;
                margin: 0
            }
        }

/* --- block --- */



        @media (min-width:1300px) {
        }



        @media (min-width:940px) {
        }

        @media (min-width:1300px) {
        }




        @media (min-width:1300px) {

        }


        @media (min-width:1300px) {
        }







        .RefreshedGradientLine {
            position: relative;
            width: 100%;
            height: 1px;
            overflow: clip;
            margin-top: var(--divider-vertical-margin);
            margin-bottom: calc(var(--divider-vertical-margin)*-1);
            top: 0;
            border-radius: 1px
        }

        .RefreshedGradientLine:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            width: 100%;
            background: linear-gradient(90deg, var(--gradient-color), var(--gradient-color) 20%, var(--stop-color) 40%, var(--suite-color) 60%, var(--suite-color)), #e5edf5;
            border-radius: 1px;
            pointer-events: none
        }

        @media (hover:hover) {
            .RefreshedGradientLine:after {
                background-size: 0 100%, 100% 100%;
                background-position: var(--mouse-in-dir, right), 0;
                background-repeat: no-repeat, no-repeat;
                transition: background-size .3s ease-out
            }

        }

        @media (min-width:900px) and (max-height:900px) {

        }


        @media (min-width:1300px) {




        }

/* --- block --- */


        @media (min-width:900px) {
        }

        @media (max-width:899px) {
        }







/* --- block --- */

@media (min-width:901px) {
        }

/* --- block --- */

.HubPage.MktRoot {
            --cardShadowMedium: 0px 8px 16px -8px rgba(0, 0, 0, 0.1), 0px 13px 27px -12px rgba(50, 50, 93, 0.25);
            --cardShadowMediumMargin: 16px;
            --cardShadowLarge: 0px 18px 36px -18px rgba(0, 0, 0, 0.1), 0px 30px 45px -30px rgba(50, 50, 93, 0.25);
            --cardShadowLargeMargin: 32px;
            --cardShadowHover: 0px 100px 60px -40px rgba(0, 0, 0, 0.06), 0px 60px 100px 0px rgba(50, 50, 93, 0.15);
            --layoutWidthFull: calc(var(--windowWidth) - var(--gutterWidth)*2);
            --layoutWidthMax: 752px;
            --gutterWidth: 24px;
            --gutterWidthFlexible: calc(var(--windowWidth)/2 - var(--layoutWidth)/2);
            --gridColumnCount: 4;
            --gridColumnGap: 8px;
            --gridColumnWidth: calc((min(var(--layoutWidthFull), var(--layoutWidthMax)) - (var(--gridColumnCount) - 1)*var(--gridColumnGap))/var(--gridColumnCount))
        }

        @media (min-width:600px) {
            .HubPage.MktRoot {
                --gridColumnCount: 8;
                --gridColumnGap: 24px
            }
        }

        @media (min-width:800px) and (max-width:899px) {
            .HubPage.MktRoot {
                --gutterWidth: var(--gutterWidthFlexible);
                --layoutWidth: var(--layoutWidthMax)
            }
        }

        @media (min-width:900px) {
            .HubPage.MktRoot {
                --gridColumnCount: 12;
                --layoutWidthMax: 1080px
            }
        }

        @media (min-width:1112px) {
            .HubPage.MktRoot {
                --layoutWidth: var(--layoutWidthFull)
            }
        }

        @media (min-width:1128px) {
            .HubPage.MktRoot {
                --layoutWidth: var(--layoutWidthMax)
            }
        }

        .HubPage__grid {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999999;
            display: flex;
            justify-content: center;
            pointer-events: none
        }

        .HubPage__gridColumnList {
            display: grid;
            grid: auto/repeat(var(--gridColumnCount), 1fr);
            max-width: var(--layoutWidth);
            width: 100%;
            -moz-column-gap: var(--gridColumnGap);
            column-gap: var(--gridColumnGap)
        }

        .HubPage__gridColumn {
            background: rgba(255, 0, 0, .1)
        }

        @media (max-width:899px) {
            .HubPage__gridColumn:nth-child(3n) {
                display: none
            }
        }

        .HubPage .SiteHeader {
            z-index: 97
        }

/* --- block --- */


        @media (pointer:fine) {
        }

        @media (pointer:coarse) {
        }

        @media (prefers-reduced-motion:no-preference) {
            @media (pointer:fine) {


            }

            @media (pointer:coarse) {


            }
        }


        @media (prefers-reduced-motion:no-preference) {
        }



        @keyframes loadChatBubble {
            0% {
                opacity: 0;
                transform: translateY(30px) scale(.5)
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1)
            }
        }







        @keyframes UniversalChatTypingBubbleBounce {

            0%,
            to {
                animation-timing-function: ease-out;
                transform: translateY(2px)
            }

            50% {
                animation-timing-function: ease-in-out;
                transform: translateY(-2.5px)
            }
        }

/* --- block --- */


        @media (prefers-reduced-motion:no-preference) {
            @media (pointer:fine) {


            }

            @media (pointer:coarse) {


            }




        }




        @keyframes loadChatBox {
            0% {
                opacity: 0;
                transform: translateY(30px) scale(.5)
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1)
            }
        }







        @keyframes UniversalChatTypingBubbleBounce {

            0%,
            to {
                animation-timing-function: ease-out;
                transform: translateY(2px)
            }

            50% {
                animation-timing-function: ease-in-out;
                transform: translateY(-2.5px)
            }
        }

        @keyframes blink {

            0%,
            50% {
                opacity: 0
            }

            51%,
            to {
                opacity: 1
            }
        }


        @keyframes loadInChatTreatment {
            0% {
                opacity: 0;
                transform: scale(.8) translateY(100%)
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0)
            }
        }




        @keyframes fadeIn {
            0% {
                opacity: 0;
                transform: scale(.5) translateY(50%)
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0)
            }
        }



        @media (prefers-reduced-motion:no-preference) {
        }










        @media (prefers-reduced-motion:no-preference) {
        }

        @keyframes pulse {
            0% {
                transform: translateY(-50%) scale(1)
            }

            25% {
                transform: translateY(-50%) scale(2)
            }

            50% {
                transform: translateY(-50%) scale(1)
            }

            to {
                transform: translateY(-50%) scale(1)
            }
        }




/* --- block --- */

@media (min-width:600px) {
            @font-face {
                font-family: sohne-var;
                src: url(/fonts/f965fdf4.woff2) format("woff2-variations");
                font-weight: 1 1000;
                font-display: block
            }

            @font-face {
                font-family: SourceCodePro;
                src: url(/fonts/1a930247.woff2) format("woff2"), url(/fonts/ac6713d5.woff) format("woff");
                font-weight: 500;
                font-style: normal;
                font-display: block
            }
        }

        @media (max-width:599px) {
            @font-face {
                font-family: sohne-var;
                src: url(/fonts/f965fdf4.woff2) format("woff2-variations");
                font-weight: 1 1000;
                font-display: swap
            }

            @font-face {
                font-family: SourceCodePro;
                src: url(/fonts/1a930247.woff2) format("woff2"), url(/fonts/ac6713d5.woff) format("woff");
                font-weight: 500;
                font-style: normal;
                font-display: swap
            }
        }

/* --- block --- */

.MktRoot {
            --fontFamily: "sohne-var", "Helvetica Neue", "Arial", sans-serif;
            --fontWeightLight: 200;
            --fontWeightNormal: 300;
            --fontWeightSemibold: 425;
            --fontWeightBold: 500;
            --systemFontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --codeFontFamily: "SourceCodePro";
            --sourceCodeFont: 500 14px/1.714285714 var(--codeFontFamily);
            --ctaFont: var(--fontWeightSemibold) 15px/1.6 var(--fontFamily);
            --inputFont: var(--fontWeightNormal) 15px/1.6 var(--fontFamily);
            --cardShadowXSmall: 0 2px 5px -1px rgba(50, 50, 93, 0.25), 0 1px 3px -1px rgba(0, 0, 0, 0.3);
            --cardShadowSmall: 0 6px 12px -2px rgba(50, 50, 93, 0.25), 0 3px 7px -3px rgba(0, 0, 0, 0.3);
            --cardShadowMedium: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
            --cardShadowLarge: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
            --cardShadowLargeInset: inset 0 30px 60px -12px rgba(50, 50, 93, 0.25), inset 0 18px 36px -18px rgba(0, 0, 0, 0.3);
            --cardShadowXLarge: 0 50px 100px -20px rgba(50, 50, 93, 0.25), 0 30px 60px -30px rgba(0, 0, 0, 0.3);
            --cardShadowXSMallMargin: 2px;
            --cardShadowSmallMargin: 8px;
            --cardShadowMediumMargin: 16px;
            --cardShadowLargeMargin: 32px;
            --cardShadowXLargeMargin: 48px;
            --cardBorderRadius: 8px;
            --filterShadowMedium: 0px 3px 11.5px -3.5px rgba(50, 50, 93, 0.25), 0px 3.8px 7.5px -3.7px rgba(0, 0, 0, 0.1);
            --scrollbarOffset: 10px;
            --angleNormal: -6deg;
            --angleStrong: -12deg;
            --angleNormalSin: 0.106;
            --angleStrongSin: 0.212;
            --modalZIndex: 999999;
            --fixedNavHeight: 60px;
            --fixedNavSpacing: 48px;
            --fixedNavScrollMargin: calc(var(--fixedNavHeight) + var(--fixedNavSpacing));
            --hoverTransition: 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
            --focusBoxShadow: 0 0 0 2px #4d90fe, inset 0 0 0 2px hsla(0, 0%, 100%, 0.9);
            color-scheme: only light
        }

        .MktRoot *,
        .MktRoot :after,
        .MktRoot :before {
            box-sizing: border-box
        }

        @media (prefers-reduced-motion:reduce) {
            .MktRoot {
                --hoverTransition: none
            }
        }

        .MktRoot[lang^=ja] {
            --fontWeightNormal: 300;
            --fontWeightSemibold: 300
        }

        .MktRoot[lang^=th] {
            --fontWeightSemibold: 600;
            --fontWeightBold: 600
        }

        .MktRoot[lang^=zh] {
            --fontWeightNormal: 400;
            --fontWeightSemibold: 500
        }

        .MktRoot[data-loading] {
            overflow-x: hidden
        }

        .MktRoot[data-loading] :after,
        .MktRoot[data-loading] :before,
        .MktRoot[data-loading] :not([data-transition-in]) {
            transition: none !important
        }

        .MktBody {
            margin: 0;
            font-family: var(--fontFamily);
            font-weight: var(--fontWeightNormal);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: var(--textColor);
            background: var(--backgroundColor)
        }

        .MktBody--noScroll {
            overflow: hidden
        }

        .ThirdPartyFrame {
            width: 1px;
            height: 1px;
            position: fixed;
            visibility: hidden;
            pointer-events: none
        }

        blockquote,
        figure,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        pre {
            margin: 0
        }

        a {
            text-decoration: none
        }

        strong {
            font-weight: var(--fontWeightBold)
        }

/* --- block --- */

.theme--White {
            --backgroundColor: #fff;
            --linkColor: var(--accentColor);
            --linkHoverColor: #0a2540;
            --buttonColor: var(--accentColor);
            --buttonHoverColor: #0a2540;
            --buttonDisabledColor: #cfd7df;
            --buttonDisabledOpacity: 0.7;
            --knockoutColor: #fff;
            --knockoutDisabledColor: #8898aa;
            --guideSolidColor: rgba(66, 71, 112, 0.06);
            --guideDashedColor: rgba(66, 71, 112, 0.09);
            --titleColor: #0a2540;
            --textColor: #425466;
            --formFieldDescriptionTextColor: #3f4b66;
            --inputBackground: #f6f9fc;
            --checkboxInputBackground: #e7ecf1;
            --inputPlaceholderColor: #727f96;
            --inputTextColor: #0a2540;
            --inputErrorAccentColor: #ff5996;
            --annotationColor: #8c9eb1;
            --maskFadeColor: rgba(0, 0, 0, 0.4);
            --navColor: #0a2540;
            --navHoverColor: #0a2540;
            --navHoverOpacity: 0.6;
            --footerColor: #0a2540;
            --cardBorderColor: #cbd6e0;
            --cardBorderColorSoft: #e7ecf1;
            --cardBackground: #fff;
            --subcardBackground: #f6f9fc;
            --gridSubcardBackground: #f6f9fc;
            --tableIconColor: #8c9eb1;
            --accentBrandWhite: #fff;
            --accentBrandLight: #e3e7ec;
            --accentBrandDark: #0a2540;
            --bulletColor: #cfd7df;
            --footnoteTextColor: #4d5b78;
            --disclaimerTextColor: #707f98;
            --inlineCodeTextColor: #2c3a57;
            --inlineCodeBackground: #e6ecf2;
            --socialLogoColor: #c4ccd8;
            --socialLogoHoverColor: #0a2540
        }

        .theme--White.accent--Slate {
            --accentColor: #0a2540;
            --linkHoverOpacity: 0.6;
            --buttonHoverOpacity: 0.6
        }

/* --- block --- */

.theme--Light {
            --backgroundColor: #f6f9fc;
            --linkColor: var(--accentColor);
            --linkHoverColor: #0a2540;
            --buttonColor: var(--accentColor);
            --buttonHoverColor: #0a2540;
            --buttonDisabledColor: #cfd7df;
            --buttonDisabledOpacity: 0.7;
            --knockoutColor: #fff;
            --knockoutDisabledColor: #8898aa;
            --guideSolidColor: rgba(66, 71, 112, 0.06);
            --guideDashedColor: rgba(66, 71, 112, 0.09);
            --titleColor: #0a2540;
            --textColor: #425466;
            --formFieldDescriptionTextColor: #3f4b66;
            --inputBackground: #f6f9fc;
            --checkboxInputBackground: #e7ecf1;
            --inputPlaceholderColor: #727f96;
            --inputTextColor: #0a2540;
            --inputErrorAccentColor: #ff5996;
            --annotationColor: #8c9eb1;
            --maskFadeColor: rgba(0, 0, 0, 0.4);
            --navColor: #0a2540;
            --navHoverColor: #0a2540;
            --navHoverOpacity: 0.6;
            --footerColor: #0a2540;
            --cardBorderColor: #cbd6e0;
            --cardBorderColorSoft: #e7ecf1;
            --cardBackground: #fff;
            --subcardBackground: #f6f9fc;
            --gridSubcardBackground: #fff;
            --tableIconColor: #8c9eb1;
            --accentBrandWhite: #fff;
            --accentBrandLight: #e3e7ec;
            --accentBrandDark: #0a2540;
            --bulletColor: #cfd7df;
            --footnoteTextColor: #4d5b78;
            --disclaimerTextColor: #707f98;
            --inlineCodeTextColor: #2c3a57;
            --inlineCodeBackground: #dce6ee;
            --socialLogoColor: #c4ccd8;
            --socialLogoHoverColor: #0a2540
        }

        .theme--Light.accent--Slate {
            --accentColor: #0a2540;
            --linkHoverOpacity: 0.6;
            --buttonHoverOpacity: 0.6
        }

/* --- block --- */

.theme--Dark {
            --backgroundColor: #0a2540;
            --linkColor: var(--accentColor);
            --linkHoverColor: #fff;
            --linkHoverOpacity: 1;
            --buttonColor: var(--accentColor);
            --buttonHoverColor: #fff;
            --buttonDisabledColor: #6b7c93;
            --buttonHoverOpacity: 1;
            --buttonDisabledOpacity: 0.7;
            --knockoutColor: #0a2540;
            --knockoutDisabledColor: #e6ebf1;
            --guideSolidColor: rgba(66, 71, 112, 0.3);
            --guideDashedColor: rgba(66, 71, 112, 0.3);
            --titleColor: #fff;
            --textColor: #adbdcc;
            --formFieldDescriptionTextColor: #adbdcc;
            --inputBackground: #0c2e4e;
            --checkboxInputBackground: #0c2e4e;
            --inputBackgroundAlt: #274869;
            --inputPlaceholderColor: #b6c2cd;
            --inputTextColor: #fff;
            --inputErrorAccentColor: #ff5996;
            --annotationColor: #8c9eb1;
            --maskFadeColor: rgba(0, 0, 0, 0.4);
            --navColor: #fff;
            --navHoverColor: #fff;
            --navHoverOpacity: 0.6;
            --footerColor: #fff;
            --cardBorderColor: #0f395e;
            --cardBorderColorSoft: #0f395e;
            --cardBackground: #0c2e4e;
            --subcardBackground: #1f4468;
            --gridSubcardBackground: #1f4468;
            --tableIconColor: #8c9eb1;
            --accentBrandWhite: #fff;
            --accentBrandLight: #fff;
            --accentBrandDark: #0c2e4e;
            --bulletColor: #6b7c93;
            --footnoteTextColor: #adbdcc;
            --disclaimerTextColor: #707f98;
            --inlineCodeTextColor: #fff;
            --inlineCodeBackground: #1c4161;
            --socialLogoColor: #707f98;
            --socialLogoHoverColor: #fff
        }

        .theme--Dark.accent--Slate,
        .theme--Dark .accent--Slate {
            --accentColor: #fff
        }

/* --- block --- */

.theme--SemiDark {
            --backgroundColor: #0d2e4f;
            --linkColor: var(--accentColor);
            --linkHoverColor: #fff;
            --linkHoverOpacity: 1;
            --buttonColor: var(--accentColor);
            --buttonHoverColor: #fff;
            --buttonDisabledColor: #6b7c93;
            --buttonHoverOpacity: 1;
            --buttonDisabledOpacity: 0.7;
            --knockoutColor: #0a2540;
            --knockoutDisabledColor: #e6ebf1;
            --guideSolidColor: rgba(66, 71, 112, 0.3);
            --guideDashedColor: rgba(66, 71, 112, 0.3);
            --titleColor: #fff;
            --textColor: #adbdcc;
            --inputBackground: #0c2e4e;
            --inputBackgroundAlt: #274869;
            --inputPlaceholderColor: #b6c2cd;
            --inputTextColor: #fff;
            --inputErrorAccentColor: #ff5996;
            --annotationColor: #8c9eb1;
            --maskFadeColor: rgba(0, 0, 0, 0.4);
            --navColor: #fff;
            --navHoverColor: #fff;
            --navHoverOpacity: 0.6;
            --footerColor: #fff;
            --cardBorderColor: #0f395e;
            --cardBackground: #0c2e4e;
            --subcardBackground: #1f4468;
            --gridSubcardBackground: #1f4468;
            --tableIconColor: #8c9eb1;
            --accentBrandWhite: #fff;
            --accentBrandLight: #fff;
            --accentBrandDark: #0c2e4e;
            --bulletColor: #6b7c93;
            --footnoteTextColor: #adbdcc;
            --disclaimerTextColor: #707f98;
            --inlineCodeTextColor: #fff;
            --inlineCodeBackground: #1c4161;
            --socialLogoColor: #707f98;
            --socialLogoHoverColor: #fff
        }

        .theme--SemiDark.accent--Slate,
        .theme--SemiDark .accent--Slate {
            --accentColor: #fff
        }

/* --- block --- */

.theme--Transparent {
            --backgroundColor: none;
            --linkColor: #fff;
            --linkHoverColor: var(--linkColor);
            --linkHoverOpacity: 0.6;
            --buttonColor: hsla(0, 0%, 100%, 0.2);
            --buttonHoverColor: hsla(0, 0%, 100%, 0.4);
            --accentColor: #fff;
            --knockoutColor: #fff;
            --textColor: #fff;
            --guideSolidColor: rgba(66, 71, 112, 0.06);
            --guideDashedColor: rgba(66, 71, 112, 0.09);
            --titleColor: #fff;
            --maskFadeColor: rgba(0, 0, 0, 0.4);
            --navColor: #fff;
            --navHoverColor: #fff;
            --navHoverOpacity: 0.6;
            --accentBarColor: #fff
        }

/* --- block --- */

.theme--HubDark {
            --linkColor: #fff;
            --linkHoverColor: var(--linkColor);
            --buttonColor: #fff;
            --buttonHoverColor: hsla(0, 0%, 100%, 0.9);
            --knockoutColor: #0a2540;
            --textColor: #fff;
            --titleColor: #fff
        }

        .theme--HubDark,
        .theme--HubLight {
            --backgroundColor: none;
            --linkHoverOpacity: 0.9;
            --accentColor: #fff;
            --maskFadeColor: rgba(0, 0, 0, 0.4);
            --navColor: #fff;
            --navHoverColor: #fff;
            --navHoverOpacity: 0.8;
            --accentBarColor: #fff
        }

        .theme--HubLight {
            --linkColor: #635bff;
            --linkHoverColor: #0a2540;
            --buttonColor: #635bff;
            --buttonHoverColor: #0a2540;
            --knockoutColor: #fff;
            --textColor: #0a2540;
            --titleColor: #0a2540
        }

/* --- block --- */

.theme--LegacyDark,
        .theme--LegacyLight {
            --fontFamily: Camphor, "Open Sans", "Segoe UI", sans-serif;
            --ctaFont: var(--fontWeightSemibold) 15px/1.6 var(--fontFamily);
            --fontWeightBold: 600;
            --fontWeightSemibold: 600;
            --fontWeightNormal: 500
        }

        .theme--LegacyDark .ProductIcon--Atlas,
        .theme--LegacyLight .ProductIcon--Atlas {
            --iconHoverLightColor: #fcd669;
            --iconHoverDarkColor: #ce7c3a
        }

        .theme--LegacyDark .ProductIcon--Billing,
        .theme--LegacyLight .ProductIcon--Billing {
            --iconHoverLightColor: #74e4a2;
            --iconHoverDarkColor: #159570
        }

        .theme--LegacyDark .ProductIcon--Connect,
        .theme--LegacyDark .ProductIcon--Payouts,
        .theme--LegacyLight .ProductIcon--Connect,
        .theme--LegacyLight .ProductIcon--Payouts {
            --iconHoverLightColor: #68d4f8;
            --iconHoverDarkColor: #217ab7
        }

        .theme--LegacyDark .ProductIcon--Capital,
        .theme--LegacyDark .ProductIcon--CorporateCard,
        .theme--LegacyDark .ProductIcon--Issuing,
        .theme--LegacyDark .ProductIcon--Payments,
        .theme--LegacyDark .ProductIcon--Terminal,
        .theme--LegacyLight .ProductIcon--Capital,
        .theme--LegacyLight .ProductIcon--CorporateCard,
        .theme--LegacyLight .ProductIcon--Issuing,
        .theme--LegacyLight .ProductIcon--Payments,
        .theme--LegacyLight .ProductIcon--Terminal {
            --iconHoverLightColor: #87bbfd;
            --iconHoverDarkColor: #555abf
        }

        .theme--LegacyDark .ProductIcon--Radar,
        .theme--LegacyLight .ProductIcon--Radar {
            --iconHoverLightColor: #f6a4eb;
            --iconHoverDarkColor: #9251ac
        }

        .theme--LegacyDark .ProductIcon--Sigma,
        .theme--LegacyLight .ProductIcon--Sigma {
            --iconHoverLightColor: #beb0f4;
            --iconHoverDarkColor: #7356b6
        }

/* --- block --- */

.theme--LegacyLight {
            --backgroundColor: #f6f9fc;
            --linkColor: var(--accentColor);
            --linkHoverColor: #0a2540;
            --buttonColor: none;
            --buttonHoverColor: none;
            --buttonDisabledColor: none;
            --knockoutColor: #32325d;
            --knockoutDisabledColor: #8898aa;
            --guideSolidColor: rgba(66, 71, 112, 0.06);
            --guideDashedColor: rgba(66, 71, 112, 0.09);
            --titleColor: #0a2540;
            --textColor: #425466;
            --inputBackground: #fff;
            --inputPlaceholderColor: #acb9c5;
            --annotationColor: #8c9eb1;
            --maskFadeColor: rgba(0, 0, 0, 0.4);
            --navColor: #32325d;
            --navHoverColor: #32325d;
            --navHoverOpacity: 0.6;
            --footerColor: #0a2540;
            --cardBorderColor: #cbd6e0;
            --cardBackground: #fff;
            --subcardBackground: #f6f9fc;
            --accentBarColor: #0a2540
        }

        .theme--LegacyLight.accent--Slate {
            --accentColor: #0a2540;
            --linkHoverOpacity: 0.6;
            --buttonHoverOpacity: 0.6
        }

/* --- block --- */

.theme--LegacyDark {
            --backgroundColor: #0a2540;
            --linkColor: var(--accentColor);
            --linkHoverColor: #fff;
            --linkHoverOpacity: 1;
            --buttonColor: none;
            --buttonHoverColor: none;
            --buttonDisabledColor: none;
            --buttonHoverOpacity: 0.6;
            --knockoutColor: #fff;
            --knockoutDisabledColor: #e6ebf1;
            --guideSolidColor: rgba(66, 71, 112, 0.3);
            --guideDashedColor: rgba(66, 71, 112, 0.3);
            --titleColor: #fff;
            --textColor: #adbdcc;
            --inputBackground: #0c2e4e;
            --inputPlaceholderColor: #b6c2cd;
            --annotationColor: #8c9eb1;
            --maskFadeColor: rgba(0, 0, 0, 0.4);
            --navColor: #fff;
            --navHoverColor: #fff;
            --navHoverOpacity: 0.6;
            --footerColor: #fff;
            --cardBorderColor: #0f395e;
            --cardBackground: #0c2e4e;
            --subcardBackground: #1f4468;
            --accentBarColor: #fff
        }

        .theme--LegacyDark.accent--Slate,
        .theme--LegacyDark.flavor--Slate.accent--Slate {
            --accentColor: #fff;
            --linkHoverOpacity: 0.6;
            --buttonHoverOpacity: 0.6
        }

/* --- block --- */

.flavor--Chroma {
            --blendBackground: #80e9ff;
            --blendIntersection: #0048e5;
            --blendForeground: #7a73ff;
            --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);
            --shadeOneColor: #02bcf5;
            --shadeTwoColor: #0073e6;
            --shadeThreeColor: #003ab9;
            --shadeFourColor: #635bff;
            --shadeFiveColor: #002c59;
            --shadeSixColor: #09cbcb
        }

        .flavor--Chroma.theme--Dark,
        .flavor--Chroma .theme--Dark {
            --blendForeground: #7a73ff;
            --blendIntersection: #cff;
            --blendBackground: #00d4ff
        }

        .flavor--Chroma.theme--Dark .theme--Light,
        .flavor--Chroma.theme--Dark .theme--White {
            --blendForeground: #80e9ff;
            --blendIntersection: #0048e5;
            --blendBackground: #7a73ff
        }

        .flavor--Chroma.accent--Cyan,
        .flavor--Chroma .accent--Cyan {
            --accentColor: #02bcf5
        }

        .flavor--Chroma.theme--Dark.accent--Cyan,
        .flavor--Chroma.theme--Dark .accent--Cyan,
        .flavor--Chroma .theme--Dark.accent--Cyan {
            --accentColor: #00d4ff
        }

        .flavor--Chroma.accent--Blurple,
        .flavor--Chroma .accent--Blurple {
            --accentColor: #635bff;
            --guideBackground: #5d69e3;
            --guideDarkColor: #4d5ae0;
            --guideLightColor: #6772e5;
            --guideLighterColor: #7a84e9;
            --guideLightestColor: #8d95ec
        }

        .flavor--Chroma.theme--Dark.accent--Blurple,
        .flavor--Chroma.theme--Dark .accent--Blurple {
            --accentColor: #7a73ff
        }

        .flavor--Chroma.accent--Blue,
        .flavor--Chroma .accent--Blue {
            --accentColor: #0073e6
        }

        .flavor--Chroma.accent--Orange,
        .flavor--Chroma .accent--Orange {
            --accentColor: #ff7600
        }

        .flavor--Chroma.accent--Slate,
        .flavor--Chroma .accent--Slate {
            --accentColor: #0a2540
        }

        .flavor--Chroma.theme--Dark.accent--Slate,
        .flavor--Chroma.theme--Dark .accent--Slate,
        .flavor--Chroma .theme--Dark.accent--Slate {
            --accentColor: #fff
        }

/* --- block --- */

.flavor--CottonCandy {
            --blendBackground: #ff80ff;
            --blendIntersection: #003dc1;
            --blendForeground: #0073e6;
            --gradientColorZero: #45dfff;
            --gradientColorOne: #2aa1ff;
            --gradientColorTwo: #4536ff;
            --gradientColorThree: #ff79f6;
            --gradientColorZeroTransparent: rgba(69, 223, 255, 0);
            --gradientColorOneTransparent: rgba(42, 161, 255, 0);
            --gradientColorTwoTransparent: rgba(69, 54, 255, 0);
            --gradientColorThreeTransparent: rgba(255, 121, 246, 0)
        }

        .flavor--CottonCandy.theme--Dark,
        .flavor--CottonCandy .theme--Dark {
            --blendBackground: #ff80ff;
            --blendIntersection: #fac7ff;
            --blendForeground: #0073e6;
            --accentColor: #f363f3
        }

        .flavor--CottonCandy.accent--Pink,
        .flavor--CottonCandy .accent--Pink {
            --accentColor: #f363f3
        }

        .flavor--CottonCandy.theme--Dark.accent--Pink,
        .flavor--CottonCandy.theme--Dark .accent--Pink {
            --accentColor: #ff83ff
        }

        .flavor--CottonCandy.accent--Cyan,
        .flavor--CottonCandy .accent--Cyan {
            --accentColor: #02bcf5
        }

        .flavor--CottonCandy.theme--Dark.accent--Cyan,
        .flavor--CottonCandy.theme--Dark .accent--Cyan {
            --accentColor: #09d6ff
        }

        .flavor--CottonCandy.accent--Blurple,
        .flavor--CottonCandy .accent--Blurple {
            --accentColor: #6061f6
        }

        .flavor--CottonCandy.accent--Blue,
        .flavor--CottonCandy .accent--Blue {
            --accentColor: #0073e6
        }

/* --- block --- */

.flavor--LemonLime {
            --blendBackground: #ffd848;
            --blendIntersection: #00a600;
            --blendForeground: #00d924;
            --gradientColorZero: #1dcb5d;
            --gradientColorOne: #ffa832;
            --gradientColorTwo: #ffa832;
            --gradientColorThree: #ffe85e;
            --gradientColorZeroTransparent: rgba(29, 203, 93, 0);
            --gradientColorOneTransparent: rgba(255, 168, 50, 0);
            --gradientColorTwoTransparent: rgba(255, 168, 50, 0);
            --gradientColorThreeTransparent: rgba(255, 232, 94, 0);
            --shadeOneColor: #72d151;
            --shadeTwoColor: #15be1c;
            --shadeThreeColor: #13ad4c;
            --shadeFourColor: #008431
        }

        .flavor--LemonLime.theme--Dark,
        .flavor--LemonLime .theme--Dark {
            --blendBackground: #00d924;
            --blendIntersection: #fff5ad;
            --blendForeground: #ffd848
        }

        .flavor--LemonLime.accent--Green,
        .flavor--LemonLime .accent--Green {
            --accentColor: #15be53;
            --complimentaryColor: #fab000
        }

        .flavor--LemonLime.theme--Dark.accent--Green,
        .flavor--LemonLime.theme--Dark .accent--Green {
            --accentColor: #14d433
        }

        .flavor--LemonLime.accent--Yellow,
        .flavor--LemonLime .accent--Yellow {
            --accentColor: #eea800;
            --complimentaryColor: #15be53
        }

        .flavor--LemonLime.theme--Dark.accent--Yellow,
        .flavor--LemonLime.theme--Dark .accent--Yellow,
        .flavor--LemonLime .theme--Dark.accent--Yellow {
            --accentColor: #ffce48
        }

/* --- block --- */

.flavor--Overcast {
            --blendBackground: #11efe3;
            --blendIntersection: #00299c;
            --blendForeground: #0073e6;
            --gradientColorZero: #0073e6;
            --gradientColorOne: #00a8ff;
            --gradientColorTwo: #021b9c;
            --gradientColorThree: #11efe3;
            --gradientColorZeroTransparent: rgba(0, 115, 230, 0);
            --gradientColorOneTransparent: rgba(0, 168, 255, 0);
            --gradientColorTwoTransparent: rgba(2, 27, 156, 0);
            --gradientColorThreeTransparent: rgba(47, 229, 229, 0);
            --shadeOneColor: #009deb;
            --shadeTwoColor: #0073e6;
            --shadeThreeColor: #003f7f;
            --shadeFourColor: #002c59
        }

        .flavor--Overcast.theme--Dark,
        .flavor--Overcast .theme--Dark {
            --blendBackground: #11efe3;
            --blendIntersection: #b3ffff;
            --blendForeground: #0073e6
        }

        .flavor--Overcast.accent--Blue,
        .flavor--Overcast .accent--Blue {
            --accentColor: #0073e6
        }

        .flavor--Overcast.accent--Cyan,
        .flavor--Overcast .accent--Cyan,
        .flavor--Overcast.theme--Dark.accent--Cyan,
        .flavor--Overcast.theme--Dark .accent--Cyan {
            --accentColor: #02bcf5
        }

        .flavor--Overcast.accent--Teal,
        .flavor--Overcast .accent--Teal {
            --accentColor: #00c4c4
        }

        .flavor--Overcast.theme--Dark.accent--Teal,
        .flavor--Overcast.theme--Dark .accent--Teal {
            --accentColor: #0de4e4
        }

/* --- block --- */

.flavor--Perennial {
            --blendBackground: #ff80ff;
            --blendIntersection: #003dc1;
            --blendForeground: #0073e6;
            --gradientColorZero: #45dfff;
            --gradientColorOne: #2aa1ff;
            --gradientColorTwo: #4536ff;
            --gradientColorThree: #a755fa;
            --gradientColorZeroTransparent: rgba(69, 223, 255, 0);
            --gradientColorOneTransparent: rgba(42, 161, 255, 0);
            --gradientColorTwoTransparent: rgba(69, 54, 255, 0);
            --gradientColorThreeTransparent: rgba(167, 85, 250, 0)
        }

        .flavor--Perennial.theme--Dark,
        .flavor--Perennial .theme--Dark {
            --blendBackground: #0073e6;
            --blendIntersection: #fac7ff;
            --blendForeground: #ff80ff
        }

        .flavor--Perennial.accent--Blurple,
        .flavor--Perennial .accent--Blurple {
            --accentColor: #635bff
        }

        .flavor--Perennial.theme--Dark.accent--Blurple,
        .flavor--Perennial.theme--Dark .accent--Blurple {
            --accentColor: #7a73ff
        }

        .flavor--Perennial.accent--Cyan,
        .flavor--Perennial .accent--Cyan {
            --accentColor: #02bcf5
        }

        .flavor--Perennial.theme--Dark.accent--Cyan,
        .flavor--Perennial.theme--Dark .accent--Cyan {
            --accentColor: #09d6ff
        }

/* --- block --- */

.flavor--Pomegranate {
            --blendBackground: #ff5996;
            --blendIntersection: #6e00f5;
            --blendForeground: #96f;
            --gradientColorZero: #a54ddd;
            --gradientColorOne: #ff80ff;
            --gradientColorTwo: #ffb422;
            --gradientColorThree: #fe94d4;
            --gradientColorZeroTransparent: rgba(255, 89, 150, 0);
            --gradientColorOneTransparent: rgba(255, 128, 255, 0);
            --gradientColorTwoTransparent: rgba(255, 180, 34, 0);
            --gradientColorThreeTransparent: rgba(254, 148, 212, 0);
            --shadeOneColor: #9d46d5;
            --shadeTwoColor: #7b58e1;
            --shadeThreeColor: #635bff;
            --shadeFourColor: #0a2540
        }

        .flavor--Pomegranate.theme--Dark,
        .flavor--Pomegranate .theme--Dark {
            --blendBackground: #ff5996;
            --blendIntersection: #ffdcf2;
            --blendForeground: #96f;
            --accentColor: #ff5996
        }

        .flavor--Pomegranate.accent--Raspberry,
        .flavor--Pomegranate .accent--Raspberry {
            --accentColor: #ff5996;
            --guideBackground: #ff5996;
            --guideDarkColor: #ff5191;
            --guideLightColor: #ff74a7;
            --guideLighterColor: #ff85b2;
            --guideLightestColor: #ff97bd
        }

        .flavor--Pomegranate.accent--Purple,
        .flavor--Pomegranate .accent--Purple {
            --accentColor: #96f;
            --guideBackground: #a375ff;
            --guideDarkColor: #96f;
            --guideLightColor: #b793ff;
            --guideLighterColor: #b793ff;
            --guideLightestColor: #c2a3ff
        }

/* --- block --- */

.flavor--Slate {
            --blendBackground: #a4bdd2;
            --blendIntersection: #415465;
            --blendForeground: #657d92
        }

        .flavor--Slate.theme--Dark,
        .flavor--Slate .theme--Dark {
            --blendBackground: #b4d2eb;
            --blendIntersection: #ecf6ff;
            --blendForeground: #7995ac
        }

        .flavor--Slate.accent--Slate,
        .flavor--Slate .accent--Slate {
            --accentColor: #657d92
        }

        .flavor--Slate.theme--Dark.accent--Slate,
        .flavor--Slate.theme--Dark .accent--Slate {
            --accentColor: #b4d2eb
        }

/* --- block --- */

.flavor--Sunburst {
            --blendBackground: #ffd848;
            --blendIntersection: #ff7600;
            --blendForeground: #fb0;
            --gradientColorZero: #ff9a15;
            --gradientColorOne: #ff7600;
            --gradientColorTwo: #ffa829;
            --gradientColorThree: #ffdf56;
            --gradientColorZeroTransparent: rgba(255, 154, 21, 0);
            --gradientColorOneTransparent: rgba(255, 118, 0, 0);
            --gradientColorTwoTransparent: rgba(255, 168, 41, 0);
            --gradientColorThreeTransparent: rgba(255, 223, 86, 0)
        }

        .flavor--Sunburst.theme--Dark,
        .flavor--Sunburst .theme--Dark {
            --blendBackground: #f70;
            --blendIntersection: #ffea9e;
            --blendForeground: #fb0
        }

        .flavor--Sunburst.accent--Yellow,
        .flavor--Sunburst .accent--Yellow {
            --accentColor: #fab000
        }

        .flavor--Sunburst.theme--Dark.accent--Yellow,
        .flavor--Sunburst.theme--Dark .accent--Yellow {
            --accentColor: #ffce48
        }

        .flavor--Sunburst.accent--Orange,
        .flavor--Sunburst .accent--Orange {
            --accentColor: #ff7600
        }

        .flavor--Sunburst.theme--Dark.accent--Orange,
        .flavor--Sunburst.theme--Dark .accent--Orange {
            --accentColor: #ff7c0c
        }

/* --- block --- */

.flavor--Sunset {
            --blendBackground: #fb0;
            --blendIntersection: #ad4ffb;
            --blendForeground: #ff80ff
        }

        .flavor--Sunset.theme--Dark,
        .flavor--Sunset .theme--Dark {
            --blendBackground: #ff80ff;
            --blendIntersection: #ffeeb2;
            --blendForeground: #fb0
        }

        .flavor--Sunset.accent--Pink,
        .flavor--Sunset .accent--Pink {
            --accentColor: #f363f3
        }

        .flavor--Sunset.theme--Dark.accent--Pink,
        .flavor--Sunset.theme--Dark .accent--Pink {
            --accentColor: #ff83ff
        }

        .flavor--Sunset.accent--Yellow,
        .flavor--Sunset .accent--Yellow {
            --accentColor: #fab000
        }

        .flavor--Sunset.theme--Dark.accent--Yellow,
        .flavor--Sunset.theme--Dark .accent--Yellow {
            --accentColor: #ffce48
        }

/* --- block --- */

.flavor--Tropical {
            --blendBackground: #80e9ff;
            --blendIntersection: #0048e5;
            --blendForeground: #7a73ff;
            --gradientColorZero: #746dff;
            --gradientColorOne: #8cf9fb;
            --gradientColorTwo: #fecc69;
            --gradientColorThree: #fb80fd;
            --gradientColorZeroTransparent: rgba(169, 96, 238, 0);
            --gradientColorOneTransparent: rgba(255, 51, 61, 0);
            --gradientColorTwoTransparent: rgba(144, 224, 255, 0);
            --gradientColorThreeTransparent: rgba(255, 203, 87, 0);
            --shadeOneColor: #02bcf5;
            --shadeTwoColor: #0073e6;
            --shadeThreeColor: #003ab9;
            --shadeFourColor: #635bff;
            --shadeFiveColor: #002c59;
            --shadeSixColor: #09cbcb
        }

        .flavor--Tropical.theme--Dark,
        .flavor--Tropical .theme--Dark {
            --blendForeground: #7a73ff;
            --blendIntersection: #cff;
            --blendBackground: #00d4ff
        }

        .flavor--Tropical.accent--Cyan,
        .flavor--Tropical .accent--Cyan {
            --accentColor: #02bcf5
        }

        .flavor--Tropical.theme--Dark.accent--Cyan,
        .flavor--Tropical.theme--Dark .accent--Cyan,
        .flavor--Tropical .theme--Dark.accent--Cyan {
            --accentColor: #00d4ff
        }

        .flavor--Tropical.accent--Blurple,
        .flavor--Tropical .accent--Blurple {
            --accentColor: #635bff
        }

        .flavor--Tropical.theme--Dark.accent--Blurple,
        .flavor--Tropical.theme--Dark .accent--Blurple {
            --accentColor: #7a73ff
        }

        .flavor--Tropical.accent--Blue,
        .flavor--Tropical .accent--Blue {
            --accentColor: #0073e6
        }

        .flavor--Tropical.accent--Slate,
        .flavor--Tropical .accent--Slate {
            --accentColor: #0a2540
        }

        .flavor--Tropical.theme--Dark.accent--Slate,
        .flavor--Tropical.theme--Dark .accent--Slate,
        .flavor--Tropical .theme--Dark.accent--Slate {
            --accentColor: #fff
        }

/* --- block --- */

.flavor--Twilight {
            --blendBackground: #11efe3;
            --blendIntersection: #0048e5;
            --blendForeground: #96f;
            --gradientColorZero: #4436ff;
            --gradientColorOne: #56f;
            --gradientColorTwo: #d679ff;
            --gradientColorThree: #11efe3;
            --gradientColorZeroTransparent: rgba(68, 54, 255, 0);
            --gradientColorOneTransparent: rgba(85, 102, 255, 0);
            --gradientColorTwoTransparent: rgba(214, 121, 255, 0);
            --gradientColorThreeTransparent: rgba(4, 255, 255, 0);
            --shadeOneColor: #16cbe1;
            --shadeTwoColor: #20b5e3;
            --shadeThreeColor: #1086db;
            --shadeFourColor: #1959e6;
            --shadeFiveColor: #96f;
            --shadeSixColor: #002c59;
            --shadeSevenColor: #00c4c4;
            --shadeEightColor: #635bff
        }

        .flavor--Twilight.theme--Dark,
        .flavor--Twilight .theme--Dark,
        .flavor--Twilight.theme--SemiDark,
        .flavor--Twilight .theme--SemiDark {
            --blendBackground: #11efe3;
            --blendIntersection: #c2ffff;
            --blendForeground: #96f
        }

        .flavor--Twilight.theme--Dark .theme--Light,
        .flavor--Twilight.theme--Dark .theme--White {
            --blendForeground: #11efe3;
            --blendIntersection: #0048e5;
            --blendBackground: #96f
        }

        .flavor--Twilight.accent--Purple,
        .flavor--Twilight .accent--Purple {
            --accentColor: #96f;
            --guideBackground: #96f;
            --guideDarkColor: #a375ff;
            --guideLightColor: #ad85ff;
            --guideLighterColor: #b793ff;
            --guideLightestColor: #c2a3ff
        }

        .flavor--Twilight.accent--Teal,
        .flavor--Twilight .accent--Teal {
            --accentColor: #00c4c4
        }

        .flavor--Twilight.theme--Dark.accent--Teal,
        .flavor--Twilight.theme--Dark .accent--Teal,
        .flavor--Twilight .theme--Dark.accent--Teal,
        .flavor--Twilight.theme--SemiDark.accent--Teal,
        .flavor--Twilight.theme--SemiDark .accent--Teal,
        .flavor--Twilight .theme--SemiDark.accent--Teal {
            --accentColor: #0de4e4
        }

/* --- block --- */

.flavor--Wintergreen {
            --blendBackground: #1df5e9;
            --blendIntersection: #00a600;
            --blendForeground: #00d924;
            --gradientColorZero: #20d261;
            --gradientColorOne: #1df5e9;
            --gradientColorTwo: #00ff91;
            --gradientColorThree: #1df5e9;
            --gradientColorZeroTransparent: rgba(68, 54, 255, 0);
            --gradientColorOneTransparent: rgba(85, 102, 255, 0);
            --gradientColorTwoTransparent: rgba(214, 121, 255, 0);
            --gradientColorThreeTransparent: rgba(4, 255, 255, 0);
            --shadeOneColor: #16cbe1;
            --shadeTwoColor: #20b5e3;
            --shadeThreeColor: #1086db;
            --shadeFourColor: #1959e6;
            --shadeFiveColor: #96f;
            --shadeSixColor: #002c59;
            --shadeSevenColor: #00c4c4
        }

        .flavor--Wintergreen.theme--Dark,
        .flavor--Wintergreen .theme--Dark {
            --blendBackground: #00d924;
            --blendIntersection: #cbffef;
            --blendForeground: #1df5e9
        }

        .flavor--Wintergreen.accent--Green,
        .flavor--Wintergreen .accent--Green {
            --accentColor: #15be53
        }

        .flavor--Wintergreen.theme--Dark.accent--Green,
        .flavor--Wintergreen.theme--Dark .accent--Green {
            --accentColor: #14d433
        }

        .flavor--Wintergreen.accent--Teal,
        .flavor--Wintergreen .accent--Teal {
            --accentColor: #00c4c4
        }

        .flavor--Wintergreen.accent--Teal .theme--Dark,
        .flavor--Wintergreen.theme--Dark.accent--Teal,
        .flavor--Wintergreen.theme--Dark .accent--Teal {
            --accentColor: #0de4e4
        }

/* --- block --- */

html {
            --gutterWidth: 16px;
            --scrollbarWidth: 0px;
            --windowWidth: calc(100vw - var(--scrollbarWidth));
            --layoutWidth: calc(var(--windowWidth) - var(--gutterWidth)*2);
            --layoutWidthMax: 1080px;
            --viewportWidthSmall: 375;
            --viewportWidthMedium: 600;
            --viewportWidthLarge: 1112;
            --viewportScale: calc(var(--windowWidth)/var(--viewportWidthLarge));
            --paddingTop: 160px;
            --paddingBottom: 160px;
            --columnPaddingNone: 0;
            --columnPaddingSmall: 8px;
            --columnPaddingNormal: 16px;
            --columnPaddingMedium: 16px;
            --columnPaddingLarge: 16px;
            --columnPaddingXLarge: 16px;
            --rowGapNormal: 8px;
            --rowGapMedium: 24px;
            --rowGapLarge: 32px;
            --rowGapXLarge: 64px;
            --rowGapXXLarge: 88px;
            --rowGap: var(--rowGapNormal);
            --columnCountMax: 1;
            --columnWidth: calc(var(--layoutWidth)/var(--columnCountMax));
            --columnMaxWidth: calc(var(--layoutWidthMax)*0.25);
            --copyMaxWidth: calc(var(--columnMaxWidth)*3)
        }

        @media (min-width:600px) {
            html {
                --columnPaddingMedium: 32px;
                --columnPaddingLarge: 64px;
                --columnPaddingXLarge: 64px;
                --columnCountMax: 2
            }
        }

        @media (min-width:900px) {
            html {
                --columnPaddingXLarge: 112px;
                --columnCountMax: 4
            }
        }

        @media (min-width:1112px) {
            html {
                --layoutWidth: var(--layoutWidthMax);
                --gutterWidth: calc(var(--windowWidth)/2 - var(--layoutWidth)/2)
            }
        }