/* ===== LOADING SCREEN ===== */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #222;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-logo {
  width: 120px;
  height: 120px;
  position: relative;
  animation: logoPulse 2.5s ease-in-out infinite;
}

/* Efeito de luz removido para design mais limpo */

.loading-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 15px rgba(255,255,255,0.3));
}

/* Animação de piscar da logo */
@keyframes logoPulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Animação de brilho removida para design mais limpo */

/* Efeito de partículas flutuantes */
.loading-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  animation: particleFloat 8s linear infinite;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; animation-delay: 1s; }
.particle:nth-child(3) { left: 30%; animation-delay: 2s; }
.particle:nth-child(4) { left: 40%; animation-delay: 3s; }
.particle:nth-child(5) { left: 50%; animation-delay: 4s; }
.particle:nth-child(6) { left: 60%; animation-delay: 5s; }
.particle:nth-child(7) { left: 70%; animation-delay: 6s; }
.particle:nth-child(8) { left: 80%; animation-delay: 7s; }

@keyframes particleFloat {
  0% {
    top: 100%;
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  10% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(-100vh) scale(1);
  }
  100% {
    top: -10px;
    opacity: 0;
    transform: translateY(-100vh) scale(0);
  }
}

/* Loading bar sutil */
.loading-bar {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 1px;
  overflow: hidden;
}

.loading-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  animation: loadingBar 2s ease-in-out infinite;
}

@keyframes loadingBar {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Responsividade */
@media (max-width: 768px) {
  .loading-logo {
    width: 80px;
    height: 80px;
  }
  
  .loading-bar {
    width: 150px;
    bottom: 25%;
  }
}

/* ===== FIM LOADING SCREEN ===== */

h1, h2, h3, h4, h5, h6, .HomepageHeroHeader__title{
  font-weight: 600 !important;
}
*{
  font-weight: 500 !important;
}

.HomepageLogoGrid .Section__layout {
    --sectionPaddingTop: 0
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  @media (min-width:900px) {

    .HubPage .SiteHeader__navContainer,
    .SiteHeader__navContainer {
      padding: 12px var(--columnPaddingNormal)
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .SiteHeader__menuShadowContainer {
    position: absolute;
    inset: 0
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  @media (pointer:fine) {

    a:hover .HoverArrow__linePath,
    button:hover .HoverArrow__linePath {
      --arrowLineOpacity: 1
    }

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

  @media (pointer:coarse) {

    a:active .HoverArrow__linePath,
    button:active .HoverArrow__linePath {
      --arrowLineOpacity: 1
    }

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

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

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

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

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

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

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




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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .SiteMobileMenuNavItem__chevron {
    flex-shrink: 0
  }

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

  .SiteMobileProductsNav__moreGroup {
    margin-top: 24px
  }

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

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

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

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

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

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

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

  .SiteNavItem--isTruncated {
    position: relative
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .SiteProductsNavSubItem__label {
    white-space: nowrap
  }

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

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

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

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

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

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

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

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

  .SiteProductsNavSubItem__link:hover .SiteProductsNavSubItem__body {
    opacity: 1
  }

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

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

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

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

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

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

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

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

  .SiteProductsNavCollapsedItem {
    display: block
  }

  .SiteProductsNavCollapsedItem__link {
    display: block;
    outline: none
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .SiteMobileNavGroup--transparent {
    background: none
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .SiteMenu__section .SiteNavList__title {
    color: #101439
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .SiteNavItem--hasIcon .SiteNavItem__label {
    font-weight: var(--fontWeightSemibold)
  }

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

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

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

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

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

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

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

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

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

  .SiteNavItem__link:hover .SiteNavItem__body {
    opacity: 1
  }

  @media (max-width:899px) {
    .SiteNavItem__body {
      display: var(--siteNavItemBodyDisplay, none)
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .SiteNavList__excludeTitleIndent .SiteNavList__title {
    margin-left: 0
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .HomepageHero.Section {
    --sectionPaddingTopMax: 116
  }

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

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

  .HomepageHero__cta {
    will-change: opacity
  }

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

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

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

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

  .HeroEmailInput {
    display: flex;
    flex-direction: column;
    max-width: 480px;
    min-width: 310px;
    width: 100%
  }

  @media (max-width:600px) {
    .HeroEmailInput {
      align-items: center
    }
  }

  .HeroEmailInput .HeroEmailInput__form {
    flex: 1;
    position: relative
  }

  .HeroEmailInput .HeroEmailInput__form .EmailInput input::-moz-placeholder {
    color: #3f4b66
  }

  .HeroEmailInput .HeroEmailInput__form .EmailInput input::placeholder {
    color: #3f4b66
  }

  .HeroEmailInput .HeroEmailInput__form .EmailInput__input {
    background-color: #f6f9fb;
    border-radius: 32px;
    border: 1px solid rgba(171, 181, 197, .30196078431372547);
    padding: 9.5px 138px 9.5px 18px;
  }

  .HeroEmailInput .HeroEmailInput__form .EmailInput__input::placeholder {
    color: #999 !important;
  }

  .HeroEmailInput .HeroEmailInput__form .HeroEmailInput__button {
    position: absolute;
    top: 6px;
    right: 6px;
    bottom: 6px
  }

  .HeroEmailInput .HeroContactSalesMobile__link {
    margin-top: 24px;
    display: none
  }

  @media (max-width:600px) {
    .HeroEmailInput .HeroContactSalesMobile__link {
      display: block
    }
  }

  .EmailInput {
    --EmailInputBorderRadius: 4px;
    --EmailInputErrorWidth: 32px;
    --EmailInputHorizontalPadding: 12px;
    --EmailInputIconLeft: 0;
    --EmailInputIconPadding: 8px;
    --EmailInputPaddingTop: 5px;
    --EmailInputPaddingBottom: 7px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column
  }

  .EmailInput__icon {
    position: absolute;
    top: 50%;
    left: var(--EmailInputIconLeft);
    transform: translate(var(--EmailInputIconPadding), -50%)
  }

  .EmailInput__icon+.EmailInput__input {
    padding-left: calc(16px + var(--EmailInputIconPadding)*2)
  }

  .EmailInput__input {
    width: 100%;
    background: var(--inputBackground);
    border: none;
    border-radius: var(--EmailInputBorderRadius);
    outline: none;
    color: var(--inputTextColor);
    padding: var(--EmailInputPaddingTop) var(--EmailInputHorizontalPadding) var(--EmailInputPaddingBottom);
    font: var(--fontWeightNormal) 15px/24px var(--fontFamily)
  }

  .EmailInput__input::-moz-placeholder {
    color: var(--inputPlaceholderColor)
  }

  .EmailInput__input::placeholder {
    color: var(--inputPlaceholderColor)
  }

  .EmailInput__input--touched:invalid:not(:focus) {
    box-shadow: 0 0 0 1px var(--inputErrorAccentColor);
    padding-right: var(--EmailInputErrorWidth)
  }

  .EmailInput__input:focus-visible {
    box-shadow: var(--focusBoxShadow)
  }

  .EmailInput__error {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: var(--EmailInputErrorWidth);
    align-items: center;
    justify-content: center;
    border-radius: var(--EmailInputBorderRadius);
    background: var(--inputBackground)
  }

  .EmailInput__input--touched:invalid+.EmailInput__error {
    display: flex
  }

  .EmailInput__input--touched:invalid:focus+.EmailInput__error {
    display: none
  }

  .EmailInput__input--multiline {
    min-height: 64px;
    resize: vertical
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .Copy__body img {
    max-width: 100%
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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















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

.greyscale-transparent {
  filter: grayscale(100%) brightness(0%);
  opacity: 0.2;
} 











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

  .Gradient {
    overflow: hidden
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .HomepageDashboardGraphic__verticalSpacing {
    margin-top: 4px
  }

  .HomepageDashboardGraphic__mainGraphSvg {
    margin-top: 8px
  }

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

  .HomepageDashboardGraphic__mainGraph {
    margin-top: 6px
  }

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

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

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

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

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

  .HomepageDashboardGraphic__sectionGraph {
    margin: 10px 0
  }

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

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

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

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

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

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

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

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

  .HomepageDashboardGraphic__updatedTime {
    margin-top: 10px
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .CheckoutPhoneGraphic__linkButton {
    background-color: #00d66f
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .ApplePaySheet__checkoutInfo {
    color: #425466
  }

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

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

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

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

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

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

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

  .Face__border {
    opacity: 1
  }

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

  .Face__border--copy {
    opacity: 0
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .Face__features.is-hidden {
    opacity: 0
  }

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

  .Face__eye {
    stroke-width: 5.5 !important
  }

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

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

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

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

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

    50% {
      transform: scale(1.05)
    }

    to {
      transform: scale(1)
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

  @media (min-width:600px) {

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

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

  @media (max-width:899px) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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




  .MenuyWebsite {
    --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 #98bef7, inset 0 0 0 2px hsla(0, 0%, 100%, 0.9);
    color-scheme: only light
  }

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

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

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

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

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

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

  .MenuyWebsite[data-loading] :after,
  .MenuyWebsite[data-loading] :before,
  .MenuyWebsite[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)
  }

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

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

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

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

  .theme--Dark {
    --backgroundColor: #101439;
    --linkColor: var(--accentColor);
    --linkHoverColor: #fff;
    --linkHoverOpacity: 1;
    --buttonColor: var(--accentColor);
    --buttonHoverColor: #fff;
    --buttonDisabledColor: #6b7c93;
    --buttonHoverOpacity: 1;
    --buttonDisabledOpacity: 0.7;
    --knockoutColor: #101439;
    --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;
    --cardBackground: #0c2e4e;
    --subcardBackground: #1f4468;
    --gridSubcardBackground: #1f4468;
    --tableIconColor: #8c9eb1;
    --stripeAccentWhite: #fff;
    --stripeAccentLight: #fff;
    --stripeAccentDark: #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
  }

  .theme--SemiDark {
    --backgroundColor: #0d2e4f;
    --linkColor: var(--accentColor);
    --linkHoverColor: #fff;
    --linkHoverOpacity: 1;
    --buttonColor: var(--accentColor);
    --buttonHoverColor: #fff;
    --buttonDisabledColor: #6b7c93;
    --buttonHoverOpacity: 1;
    --buttonDisabledOpacity: 0.7;
    --knockoutColor: #101439;
    --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;
    --stripeAccentWhite: #fff;
    --stripeAccentLight: #fff;
    --stripeAccentDark: #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
  }

  .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;
    --stripeColor: #fff
  }

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

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

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

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

  .theme--LegacyLight {
    --backgroundColor: #f6f9fc;
    --linkColor: var(--accentColor);
    --linkHoverColor: #101439;
    --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: #101439;
    --textColor: #425466;
    --inputBackground: #fff;
    --inputPlaceholderColor: #acb9c5;
    --annotationColor: #8c9eb1;
    --maskFadeColor: rgba(0, 0, 0, 0.4);
    --navColor: #32325d;
    --navHoverColor: #32325d;
    --navHoverOpacity: 0.6;
    --footerColor: #101439;
    --cardBorderColor: #cbd6e0;
    --cardBackground: #fff;
    --subcardBackground: #f6f9fc;
    --stripeColor: #101439
  }

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

  .theme--LegacyDark {
    --backgroundColor: #101439;
    --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;
    --stripeColor: #fff
  }

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

  .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: #101439
  }

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

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

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

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

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

  .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: #101439
  }

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

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

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

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

  .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: #101439
  }

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

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

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

  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)
    }
  }.HomepageGlobalSection .Section__container{pointer-events:none}.HomepageGlobalSection__copy{--headerPaddingRight:120px;pointer-events:auto}.is-globe-dragging .HomepageGlobalSection__copy{pointer-events:none}.HomepageGlobalSection__uptimeStat{pointer-events:auto}.is-globe-dragging .HomepageGlobalSection__uptimeStat{pointer-events:none}@media (min-width:900px){.HomepageFrontdoor__subsection.ColumnLayout{max-height:900px}.HomepageFrontdoor__subsection.ColumnLayout:not(:first-of-type,:last-of-type){height:100vh}}@media (max-width:899px){.HomepageFrontdoor__section.Section{--sectionOverflow:hidden}}.HomepageFrontdoor__copy.Copy{--footerRowGap:56px}.HomepageFrontdoor__copy.Copy .Copy__header{--rowGap:16px}.HomepageFrontdoor__copyCaption{display:flex;align-items:center;gap:10px;color:#2e3a55}.HomepageFrontdoor__copyCaptionIcon.ProductIcon{width:20px;height:20px}.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}.GridLayout{--rowGap:var(--rowGapMedium);--columnGap:var(--columnPaddingMedium);--gridPadding:var(--columnPaddingNone);--gridColumns:1;display:grid;row-gap:var(--rowGap);-moz-column-gap:var(--columnGap);column-gap:var(--columnGap);align-items:flex-start;grid-template-columns:repeat(var(--gridColumns),minmax(0,1fr))}@media (min-width:600px){.GridLayout{padding:0 var(--gridPadding)}.GridLayout[data-columns="1,1,1"],.GridLayout[data-columns="1,1,1,1"],.GridLayout[data-columns="2,2"]{--gridColumns:2}}@media (min-width:600px) and (max-width:899px){.GridLayout[data-columns-tablet="1,1"]{--gridColumns:2}.GridLayout[data-columns-tablet="1"]{--gridColumns:1}}@media (min-width:900px){.GridLayout[data-columns="2,2"]{--gridColumns:2}.GridLayout[data-columns="1,1,1"]{--gridColumns:3}.GridLayout[data-columns="1,1,1,1"]{--gridColumns:4}}.GridLayout--alignCenter{align-items:center}.GridLayout--alignEnd{align-items:flex-end}.GridLayout--alignStretch{align-items:stretch}.Icon{display:block}.CheckoutForm.GraphicForm{--formBackground:#fff}.CheckoutField.GraphicFormField{transition:var(--transition);transition-property:transform}.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}.CopyTitle{--titlePaddingLeft:var(--columnPaddingNormal);--titlePaddingRight:var(--columnPaddingMedium);position:relative;padding:0 var(--titlePaddingRight) 0 var(--titlePaddingLeft);font-family:var(--fontFamily);font-weight:var(--titleWeight);font-size:var(--titleFontSize);line-height:var(--titleLineHeight);color:var(--titleColor);letter-spacing:var(--titleLetterSpacing,.2px)}html[lang^=ja] .CopyTitle{font-weight:600;font-variation-settings:"wght" var(--titleWeight)}.CopyTitle--inline{--titlePaddingLeft:0px;--titlePaddingRight:0px}.CopyTitle--accented{--titleColor:var(--accentColor)}.CopyTitle--anchored{--titleBorderColor:var(--accentColor)}.CopyTitle--variantHero{--titleFontSize:48px;--titleLineHeight:56px;--titleLetterSpacing:-0.02em}.CopyTitle--variantHero,.CopyTitle--variantSuperhero{--titleWeight:var(--fontWeightBold)}.CopyTitle--variantSection{--titleFontSize:34px;--titleLineHeight:1.294117647;--titleLetterSpacing:-0.1px}.CopyTitle--variantSection,.CopyTitle--variantSubsection{--titlePaddingRight:var(--columnPaddingXLarge);--titleWeight:var(--fontWeightBold)}.CopyTitle--variantSubsection{--titleFontSize:24px;--titleLineHeight:1.333333333;--titleLetterSpacing:0.1px}.CopyTitle--variantFooter{--titlePaddingRight:var(--columnPaddingXLarge)}.CopyTitle--variantFooter,.CopyTitle--variantStat{--titleFontSize:24px;--titleLineHeight:1.333333333;--titleWeight:var(--fontWeightBold);--titleLetterSpacing:0.1px}.CopyTitle--variantDetail,.CopyTitle--variantStat{--titleBorderColor:var(--accentColor)}.CopyTitle--variantDetail{--titleFontSize:15px;--titleLineHeight:1.6;--titleWeight:var(--fontWeightSemibold);--titleLetterSpacing:0.2px}html[lang^=ja] .CopyTitle--variantDetail{--titleWeight:425}@media (min-width:600px){.CopyTitle--variantSubsection{--titleFontSize:26px;--titleLineHeight:1.384615385;--titleLetterSpacing:0}}@media (min-width:1112px){.CopyTitle--variantHero{--titleFontSize:56px;--titleLineHeight:68px}.CopyTitle--variantSection{--titleFontSize:38px;--titleLineHeight:1.263157895;--titleLetterSpacing:-0.2px}}.CopyTitle:before{display:var(--titleAnchorDisplay,block);position:absolute;top:calc(.5px + var(--titleLineHeight)*var(--titleFontSize)/2 - var(--titleFontSize)/2);left:calc(var(--titlePaddingLeft) - var(--columnPaddingNormal));width:1px;height:var(--titleFontSize);background-color:var(--titleBorderColor,transparent);content:""}.List .HomepageProductListing{margin:4px 0}.HomepageProductListing__link.Link{--linkColor:var(--accentColor);--linkWeight:var(--fontWeightSemibold)}.Track{--currentIndex:0;--transitionEasing:cubic-bezier(0.4,0,0.2,1);--transitionDuration:350ms;--transition:var(--transitionDuration) var(--transitionEasing);--maskImage:linear-gradient(270deg,transparent 0%,#000 var(--columnPaddingMedium));--trackOverflowPaddingBottom:0px;--trackOverflowPaddingHorizontal:0px;--trackGap:0px;overflow:hidden;margin:0 calc(var(--trackOverflowPaddingHorizontal)*-1) calc(var(--trackOverflowPaddingBottom)*-1);padding:0 var(--trackOverflowPaddingHorizontal) var(--trackOverflowPaddingBottom);-webkit-mask-image:var(--maskImage);mask-image:var(--maskImage)}@media (prefers-reduced-motion:reduce){.Track{--transition:none}}.Track__track{transform:translateX(calc(var(--currentIndex)*-100%));transition:transform var(--transition);display:flex;gap:var(--trackGap);align-items:flex-start;width:calc(100% + var(--trackGap))}.Track__track .Copy{min-width:100%}.CheckoutCardField__iconContainer{display:flex;position:relative}.CheckoutCardField__icon+.CheckoutCardField__icon{margin-left:4px}.CheckoutCardField__activeCardIcon{position:absolute;right:0;top:0;opacity:0}.CheckoutCardField--SpacedOutRounded{--graphicFormFieldInputGridGap:10px;--graphicFormFieldInputPositionTopBorderRadius:var(--formFieldBorderRadius);--graphicFormFieldInputPositionTopBorderBottom:1px solid var(--formFieldBorderColor);--graphicFormFieldInputPositionBottomLeftBorderRadius:var(--formFieldBorderRadius);--graphicFormFieldInputPositionBottomLeftBorderRight:1px solid var(--formFieldBorderColor);--graphicFormFieldInputPositionBottomRightBorderRadius:var(--formFieldBorderRadius)}

/* Animação de ícones com fade - 16/12/2024 @filipemontt */
/* Container da animação unificada - 16/12/2024 @filipemontt */
.animation-container {
  position: relative;
  width: 100px;
  height: 140px;
  display: inline-block;
}

.animation-item {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  width: 100px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.animation-item.active {
  opacity: 1;
}

.animation-item img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.animation-text {
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  color: #333;
  font-weight: 500;
}

.animation-price {
  margin-top: 3px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  color: #005ebd;
  font-weight: 600;
}

/* CSS antigo removido - agora usando animação unificada */