/* default content */

@font-face {
  font-family: 'Trebuchet MS';
  size-adjust: 90%;
  src: local('Trebuchet MS'), local('TrebuchetMS');
}

:root {
  --color-white: #fff;
  --color-light-gray: #E9E9E9;
  --color-gray-100: #f8f8f8;
  --color-gray-150: #f3f3f3;
  --color-gray-200: #e8e8e8;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #b6b6b6;
  --color-gray-500: #909090;
  --color-gray-600: #686868;
  --color-gray-700: #444;
  --color-gray-800: #242424;
  --color-black: #000;
  --color-brand-title: #000b1d;
  --color-info-accent: #5c5ce0;
  --color-info-accent-hover: #4646c6;
  --color-info-accent-down: #3d3db4;
  --color-info-accent-reverse: #eeeefc;
  --color-info-accent-reverse-down: #e6e6f4;
  --color-info-accent-light: #dedef9;
  --color-info-primary: #242424;
  --color-info-primary-hover: #090909;
  --color-info-primary-down: #000;
  --color-info-secondary: #e8e8e8;
  --color-info-secondary-hover: #d4d4d4;
  --color-info-secondary-down: #cdcdcd;
  --color-info-premium: #ebcf2d;
  --gradient-highlight-vertical: linear-gradient(15deg, #7c84fc, #ff4dd2);
  --gradient-highlight-horizontal: linear-gradient(90deg, #ff4dd2, #7c84fc);
  --gradient-highlight-diagonal: linear-gradient(45deg, #7c84fc, #ff4dd2);
  --palette-indigo-200: #E0E2FF;
  --palette-indigo-1000: #4046CA;
  --background-positive-default: #007A4D;

  /* header */
  --header-height: 65px;
  --breadcrumbs-height: 43px;
  --brand-header-height: 79px;

  /* body */
  --body-background-color: var(--color-white);
  --body-alt-background-color: var(--color-gray-200);
  --body-font-family: 'adobe-clean', 'Adobe Clean', 'Trebuchet MS', sans-serif;
  --body-serif-font-family: 'adobe-clean-serif', 'Adobe Clean Serif', serif;
  --body-font-weight: normal;
  --body-color: var(--color-gray-800);
  --body-line-height: 1.5;
  --body-font-size-xxl: 1.5rem;
  /* 24px */
  --body-font-size-xl: 1.25rem;
  /* 20px */
  --body-font-size-l: 1.125rem;
  /* 18px */
  --body-font-size-m: 1rem;
  /* 16px */
  --body-font-size-s: 0.875rem;
  /* 14px */
  --body-font-size-xs: 0.75rem;
  /* 12px */
  /* headings */
  --heading-font-weight: 800;
  --heading-color: var(--color-gray-800);
  --heading-line-height: 1.25;
  --heading-font-size-xxxl: 5rem;
  /* 80px */
  --heading-font-size-xxl: 3.75rem;
  /* 60px */
  --heading-font-size-xl: 2.8125rem;
  /* 45px */
  --heading-font-size-l: 2.25rem;
  /* 36px */
  --heading-font-size-m: 1.75rem;
  /* 28px */
  --heading-font-size-s: 1.375rem;
  /* 22px */

  --block-sm-max-width: 375px;
  --block-md-max-width: 830px;
  --block-lg-max-width: 1024px;
}

@media (min-width: 900px) {
  :root {
    --heading-font-size-xxxl: 3.75rem;
    /* 60px */
  }
}

@media (min-width: 1200px) {
  :root {
    --heading-font-size-xxxl: 2.8125rem;
    /* 45px */
  }
}

body {
  background-color: var(--body-background-color);
}

body[data-device="mobile"] {
  main h1, main h2, main h3, main h4, main h5, main h6 {
    hyphens: none;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  &.no-scroll {
    overflow-y: hidden;
    touch-action: none;
  }
}

:root:lang(ja) {
  --body-font-family: adobe-clean-han-japanese, 'Adobe Clean', adobe-clean,
  'Trebuchet MS', sans-serif;
}

:is(p):lang(ja) {
  line-break: normal;
}

/* floating-cta main CTA suppression */
body[data-device="mobile"] main .floating-button-wrapper[data-audience="mobile"][data-section-status="loaded"] .same-fcta {
  display: block;
}

/* gnav */
body > header {
  box-sizing: content-box;
  padding-bottom: 0;
  background-repeat: no-repeat;
  background-size: auto 32px;
  background-position: bottom 24px center;
  position: relative;
  background-color: #fff;
}

main {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  color: var(--body-color);
  overflow-x: clip;
  -webkit-font-smoothing: initial;
  line-height: initial;
}

main .section:not([data-padding='none']):not(.xxxl-spacing-static,
.xxl-spacing-static,
.xl-spacing-static,
.xxxl-spacing,
.xxl-spacing,
.xl-spacing,
.l-spacing,
.m-spacing,
.s-spacing,
.xs-spacing,
.xxs-spacing) > .content:first-child {
  padding-top: 60px;
}

main .content h2 {
  margin-top: 80px;
}

main ol, main ul {
  text-align: left;
}

main a, main a:hover, main u {
  text-decoration: none;
}

main video {
  max-width: 100%;
}

main a.button:any-link, main a.con-button:any-link {
  text-decoration: none;
  border-radius: 18px;
  padding: 5px 1.2em 6px;
  text-align: center;
  font-size: var(--body-font-size-s);
  font-style: normal;
  font-weight: 600;
  line-height: var(--body-line-height);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border 0.3s;
  border-width: 2px;
  border-style: solid;
  margin: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  min-height: initial;
}

main svg.icon-milo, main img.icon-milo {
  top: 0.15em !important;
}


.text-block .foreground > .cta-container .body-m.action-area a {
  margin: unset;
}


main a.con-button.button-l:any-link,
main a.con-button.l-button:any-link,
main .button-l a.con-button:any-link,
main .l-button a.con-button:any-link {
  border-radius: 999px;
  padding: 5px 1.2em 6px;
  font-size: var(--body-font-size-s);
}

main a.button.large:any-link,
main a.con-button.large:any-link,
main a.con-button.button-xl:any-link,
main a.con-button.xl-button:any-link,
main .button-xl a.con-button:any-link,
main .xl-button a.con-button:any-link {
  padding: 10px 1.5em;
  border-radius: 22px;
  font-size: var(--body-font-size-s);
  line-height: var(--body-line-height);
}

main a.button.xlarge:any-link,
main a.con-button.xlarge:any-link,
main a.con-button.button-xxl:any-link,
main a.con-button.xxl-button:any-link,
main .button-xxl a.con-button:any-link,
main .xxl-button a.con-button:any-link {
  padding: 13px 1.5em 14px;
  border-radius: 999px;
  font-size: var(--body-font-size-m);
  line-height: var(--body-line-height);
}

main a.button.small:any-link, main a.con-button.small:any-link, main .small a.con-button:any-link  {
  padding: 4px 1em;
  border-radius: 15px;
  font-size: var(--body-font-size-xs);
}

main a.button:any-link,
main a.button.accent:any-link,
main a.con-button.blue:any-link,
main .dark a.con-button.blue:any-link,
main a.button.primaryCTA:any-link {
  color: var(--color-white);
  background-color: var(--color-info-accent);
  border-color: var(--color-info-accent);
}

main a.button:any-link:hover,
main a.button.accent:any-link:hover,
main a.con-button.blue:any-link:hover,
main .dark a.con-button.blue:any-link:hover,
main a.button.primaryCTA:any-link:hover {
  background-color: var(--color-info-accent-hover);
  border-color: var(--color-info-accent-hover);
}

main a.button:any-link:active,
main a.button.accent:any-link:active,
main a.con-button.blue:any-link:active,
main .dark a.con-button.blue:any-link:active,
main a.button.primaryCTA:any-link:active {
  background-color: var(--color-info-accent-down);
  border-color: var(--color-info-accent-down);
}

main a.button:focus,
main a.button.accent:focus,
main a.con-button.blue:focus,
main .dark a.con-button.blue:focus,
main a.button.primaryCTA:focus {
  background-color: var(--color-info-accent-hover);
  border-color: var(--color-info-accent-hover);
  color: var(--color-white);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white),
  0 0 0 4px var(--color-info-accent-hover);
}

main a.button.primary:any-link, main .dark a.con-button.outline:any-link {
  color: var(--color-white);
  background-color: var(--color-info-primary);
  border-color: var(--color-info-primary);
}

main a.button.primary:any-link:hover, main a.con-button.outline:any-link:hover {
  background-color: var(--color-info-primary-hover);
  border-color: var(--color-info-primary-hover);
}

main a.button.primary:any-link:active, main a.con-button.outline:any-link:active {
  background-color: var(--color-info-primary-down);
  border-color: var(--color-info-primary-down);
}

main a.button.primary:focus,
main a.button.primary.reverse:focus {
  background-color: var(--color-info-primary-hover);
  border-color: var(--color-info-primary-hover);
  color: var(--color-white);
}

main a.button.secondary:any-link {
  color: var(--color-black);
  background-color: var(--color-info-secondary);
  border-color: var(--color-info-secondary);
}

main a.button.secondary:any-link:hover {
  background-color: var(--color-info-secondary-hover);
  border-color: var(--color-info-secondary-hover);
}

main a.button.secondary:any-link:active {
  background-color: var(--color-info-secondary-down);
  border-color: var(--color-info-secondary-down);
}

main a.button.secondary:focus{
  background-color: var(--color-gray-700);
  border-color: var(--color-gray-500);
  color: var(--color-white);
}

main a.button.reverse:any-link, main a.con-button.outline:any-link {
  color: var(--color-black);
  background-color: var(--color-white);
}

main a.button.reverse:any-link:hover, main a.con-button.outline:any-link:hover {
  background-color: var(--color-info-secondary-hover);
}

main a.button.reverse:any-link:active, main a.con-button.outline:any-link:active {
  background-color: var(--color-info-secondary-down);
}

main a.button.reverse:focus,
main a.button.reverse.accent:any-link:focus,
main a.button.reverse.primaryCTA:any-link:focus
{
  background-color: var(--color-info-accent-hover);
  border-color: var(--color-info-accent-hover);
  color: var(--color-white);
}

main a.button.reverse.accent:any-link,
main a.button.reverse.primaryCTA:any-link {
  color: var(--color-info-accent);
}

main a.button.reverse.accent:any-link:hover,
main a.button.reverse.primaryCTA:any-link:hover
{
  background-color: var(--color-info-accent-reverse);
}

main a.button.reverse.accent:any-link:active,
main a.button.reverse.primaryCTA:any-link:active {
  background-color: var(--color-info-accent-reverse-down);
}

main a.button.dark:any-link, main a.con-button.dark:any-link {
  color: var(--color-black);
  background-color: var(--color-white);
  border-color: var(--color-white);
}

main a.button.dark:any-link:hover, main a.con-button.dark:any-link:hover {
  color: var(--color-black);
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-100);
}

main a.button.dark:any-link:active, main a.con-button.dark:any-link:active {
  color: var(--color-black);
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-200);
}

main a.button.dark:any-link:focus {
  box-shadow: 0 0 0 2px var(--color-info-accent), 0 0 0 4px var(--color-white);
}

main a.con-button.outline:any-link:focus {
  background-color: var(--color-info-primary-hover);
  border-color: var(--color-info-primary-hover);
  color: var(--color-white);
  box-shadow: 0 0 0 2px var(--color-white),
  0 0 0 4px var(--color-info-accent-hover);
}

main a.con-button.outline:any-link:active {
  background-color: var(--color-info-secondary-hover);
  box-shadow: 0 0 0 2px var(--color-white),
  0 0 0 4px var(--color-info-accent-hover);
}

main a.button.dark.reverse:any-link, main .dark a.con-button.outline:any-link {
  color: var(--color-white);
  background-color: transparent;
  border-color: var(--color-white);
}

main a.button.dark.reverse:any-link:hover, main .dark a.con-button.outline:any-link:hover {
  color: var(--color-white);
  background-color: rgba(0, 0, 0, 0.1);
  border-color: var(--color-gray-100);
}

main a.button.dark.reverse:any-link:active, main .dark a.con-button.outline:any-link:active {
  color: var(--color-white);
  background-color: rgba(0, 0, 0, 0.2);
  border-color: var(--color-gray-200);
}

main a.button.dark.reverse:any-link:focus, main .dark a.con-button.outline:any-link:focus {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-info-accent-hover);
}

main a.button.wide, main a.con-button.wide {
  display: block;
}

main a.button.gradient:any-link,
main a.button.gradient:any-link:hover,
main a.button.gradient:any-link:active,
main a.button.gradient:any-link:focus {
  color: var(--color-white);
  border-color: transparent;
  background: linear-gradient(
          320deg,
          #7c84f3,
          #ff4dd2,
          #ff993b,
          #ff4dd2,
          #7c84f3,
          #ff4dd2,
          #ff993b
  );
  background-size: 400% 400%;
  transition: background-color 0.3s, color 0.3s, border 0.3s;
  -webkit-animation: buttonGradient 45s ease infinite;
  -moz-animation: buttonGradient 45s ease infinite;
  animation: buttonGradient 45s ease infinite;
}

main a.button > svg {
  float: left;
  display: inline;
  width: 20px;
  height: 20px;
  margin: 8px 8px 8px 0;
  fill: currentColor;
  color: currentColor;
}

main a.button > svg > use {
  fill: currentColor;
  color: currentColor;
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  -webkit-hyphens: auto; /* safari */
  hyphens: auto;
  margin-block-start: 0;
  margin-block-end: 0;
}

main h1 {
  font-size: var(--heading-font-size-xxl);
}

main h2 {
  font-size: var(--heading-font-size-l);
}

main h3 {
  font-size: var(--heading-font-size-m);
}

main h4,
main h5 {
  font-size: var(--heading-font-size-s);
}

main p {
  font-size: var(--body-font-size-xl);
  line-height: var(--body-line-height);
}

main a:any-link {
  color: var(--color-info-accent);
  font-weight: 600;
}

/* hero */
main .section#hero {
  color: var(--color-white);
  position: relative;
  padding: 120px 15px;
}

main #hero h1 {
  font-size: var(--heading-font-size-xl);
  line-height: var(--heading-line-height);
  text-align: center;
  margin: 0;
}

main #hero h2 {
  font-size: var(--body-font-size-xl);
  font-weight: var(--body-font-weight);
  margin: 32px;
}

main #hero h5 {
  font-size: var(--body-font-size-l);
  font-weight: var(--body-font-weight);
  margin: auto;
  margin-top: 32px;
}

main .icon {
  height: 1em;
  width: 1em;
  color: currentColor;
}

main #hero .icon {
  height: 2em;
  width: 2em;
}

main .icon.icon-cc-express-stacked,
main .columns .icon.icon-cc-express-stacked {
  width: unset;
  height: unset;
}

main .banner .icon.icon-facebook {
  fill: #1877f2;
}

main #hero .hero-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  z-index: -1;
}

main #hero .hero-bg img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

main #hero > div {
  padding: 0;
  margin: auto;
}

main #hero a:any-link {
  color: currentColor;
}

main #hero a.button:any-link {
  text-shadow: none;
  padding: 10px 1.5em;
  border-radius: 22px;
}

main #hero p.button-container {
  margin-bottom: 0;
}

main .section p.legal-copy {
  font-size: var(--body-font-size-xs);
  line-height: 1.5;
}

/* make page : default content */
main .section.secondary {
  background-color: var(--color-gray-100);
}

main .section p.button-container, main .section .content p.button-container {
  text-align: center;
  margin-top: 16px;
  margin-bottom: 0;
}

main .section #hero {
  color: initial;
}

/* jank protection for async blocks/sections */
main .pricing,
main .hero-animation {
  opacity: 0;
  height: 100vh;
  transition: opacity 100ms;
}

/* free plan widget */
main .button-container.free-plan-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

main .center .button-container.free-plan-container {
  justify-content: center;
}

main .center .free-plan-widget-placeholder,
main .fullscreen-marquee .free-plan-widget-placeholder {
  margin: auto;
}

main .button-container.free-plan-container.fixed {
  position: fixed;
  top: -8px;
  margin-top: 16px;
  z-index: 10;
}

main .button-container.free-plan-container a.button {
  max-height: 24px;
}

main .free-plan-widget {
  position: relative;
  box-sizing: border-box;
  background-color: var(--color-gray-100);
  border-radius: 20px;
  margin: 32px 0;
  padding: 16px 24px;
  width: fit-content;
  display: flex;
  flex-direction: column;
  font-size: var(--body-font-size-m);
  font-weight: 400;
  white-space: nowrap;
}

main .free-plan-widget .learn-more-button {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
}

main .center .free-plan-widget {
  margin: 32px auto;
}

main .free-plan-widget .plan-widget-tag {
  display: flex;
  align-items: center;
}

main .free-plan-widget .plan-widget-tag img.icon.icon-checkmark {
  background-color: #33ab84;
  display: block;
  border-radius: 50%;
  height: 8px;
  width: 8px;
  padding: 3px;
  margin-right: 4px;
}

:lang(ja) main .section > .content  {
  text-align: left;
  padding: 60px 20px 0;
}

:lang(ja) main .section > .content.center  {
  text-align: center;
  padding: 60px 20px 0;
}

main .section > .content {
  text-align: center;
  max-width: 375px;
}

main .section .content p, main .section p {
  margin: 32px 0;
}

main .section:not(.xxxl-spacing-static,
.xxl-spacing-static,
.xl-spacing-static,
.xxxl-spacing,
.xxl-spacing,
.xl-spacing,
.l-spacing,
.m-spacing,
.s-spacing,
.xs-spacing,
.xxs-spacing):last-of-type>.content:not(:has(+ .template-list-wrapper)) {
  padding-bottom: 40px;
}

main .section > div:not(.pricing-cards-wrapper, .pricing-table-wrapper, .split-action-wrapper, .link-list-wrapper, .wayfinder, .ratings, .ribbon-banner, .content, .banner) a.button.same-fcta,
main .section > div:not(.pricing-cards-wrapper, .pricing-table-wrapper, .split-action-wrapper, .link-list-wrapper, .wayfinder, .ratings, .ribbon-banner, .content, .banner) a.con-button.same-fcta,
#hero a.same-fcta {
  display: none;
}

/* Store icons */
main  img.icon-apple-store,
main  img.icon-google-store,
main  img.icon-galaxy-store,
main  img.icon-microsoft-store {
  height: 70px;
  width: auto;
  margin: 8px;
}

/* Lottie player default */
main .lottie {
  width: 32px;
  height: 32px;
}

/* Japanese font sizing styles */
main :lang(ja) h1.heading-long, main :lang(ja) #hero h1.heading-long {
  font-size: var(--heading-font-size-xl);
}

main :lang(ja) h1.heading-very-long, main :lang(ja) #hero h1.heading-very-long {
  font-size: var(--heading-font-size-l);
}

main :lang(ja) h1.heading-x-long, main :lang(ja) #hero h1.heading-x-long {
  font-size: var(--heading-font-size-l);
}

main :lang(ja) h2.heading-long, main :lang(ja) #hero h2.heading-long {
  font-size: var(--heading-font-size-l);
}

main :lang(ja) h2.heading-very-long, main :lang(ja) #hero h2.heading-very-long {
  font-size: var(--heading-font-size-l);
}

main :lang(ja) h2.heading-x-long, main :lang(ja) #hero h2.heading-x-long {
  font-size: var(--heading-font-size-m);
}

main .section.blog-content > .content *:is(h1, h2) {
  font-size: 32px;
}

main .section.blog-content > .content *:is(h1, h2, h3, h4, h5, h6),
main .section.blog-content > .content > p  {
  margin-left: 20px;
  margin-right: 20px;
  text-align: left;
}

main .section.blog-content > .content > p {
  font-size: var(--body-font-size-m);
}

@media (min-width: 600px) {
  main h2 {
    font-size: var(--heading-font-size-l);
  }

  main h3 {
    font-size: var(--heading-font-size-l);
  }

  main h4 {
    font-size: var(--heading-font-size-m);
  }

  main h1 + h5 {
    font-size: var(--body-font-size-xxl);
    font-weight: var(--body-font-weight);
    margin-top: 32px;
    margin-bottom: 16px;
  }

  main p {
    font-size: var(--body-font-size-l);
  }

  main #hero h5 {
    font-size: 22px;
    font-weight: 400;
    max-width: 672px;
    margin: auto;
    margin-top: 32px;
  }

  main #hero h2,
  main #hero p {
    font-size: var(--body-font-size-xl);
    line-height: var(--body-line-height);
    text-align: center;
    margin: 24px 15px 0;
  }

  main .section.blog-content > .content {
    max-width: 648px
  }

  main .section.blog-content.narrow > .content {
    max-width: 540px
  }
  
  main .section.blog-content > .content > p {
    font-size: var(--body-font-size-xl);
  }
}

@media (max-width: 600px) {
  main :lang(ja) h2.heading-long, :lang(ja) #hero h2.heading-long {
    font-size: var(--heading-font-size-l);
  }

  main :lang(ja) h2.heading-very-long, :lang(ja) #hero h2.heading-very-long {
    font-size: var(--heading-font-size-m);
  }

  main :lang(ja) h2.heading-x-long, :lang(ja) #hero h2.heading-x-long {
    font-size: var(--heading-font-size-m);
  }
}

@media (min-width: 900px) {
  main h5 + main p {
    text-align: unset;
  }

  main #hero {
    padding-left: 50px;
    padding-right: 50px;
  }

  main #hero h2,
  main #hero p {
    font-size: var(--body-font-size-xxl);
    margin: 24px 50px 0;
  }

  main .button-container.free-plan-container {
    width: max-content;
  }

  main .fullscreen-marquee .button-container.free-plan-container {
    justify-content: center;
    width: auto;
    align-items: center;
  }

  main .button-container.free-plan-container a.button {
    margin: 0;
    display: flex;
    align-items: center;
    /* todo: investigate why */
    z-index: 4;
  }

  main .free-plan-widget .plan-widget-tag {
    text-align: left;
  }

  main .section > div:not(.pricing-cards-wrapper, .pricing-table-wrapper, .split-action-wrapper, .link-list-wrapper, .wayfinder, .ratings) a.button.same-fcta,
  main .section > div:not(.pricing-cards-wrapper, .pricing-table-wrapper, .split-action-wrapper, .link-list-wrapper, .wayfinder, .ratings) a.con-button.same-fcta {
    display: inline-block;
  }

  main .section > .content {
    max-width: 830px;
  }

  main .section.blog-content > .content *:is(h1, h2, h3, h4, h5, h6),
  main .section.blog-content > .content > p  {
    margin-left: unset;
    margin-right: unset;
  }

  main .section.blog-content.narrow > .content {
    max-width: 875px
  }
}

@media (min-width: 1200px) {
  main h1,
  main h2,
  main h3,
  main h4,
  main h5,
  main h6 {
    -webkit-hyphens: unset; /* safari */
    hyphens: unset;
  }

  main .section h1 {
    font-size: var(--heading-font-size-l);
  }

  main #hero h1 {
    font-size: var(--heading-font-size-xxl);
    margin: 0;
  }

  main #hero .columns > div > div {
    margin: 8px;
  }

  main .button-container.free-plan-container {
    flex-direction: row;
    width: auto;
    justify-content: left;
  }

  main .center .button-container.free-plan-container {
    justify-content: unset;
    margin: 40px auto 0;
  }

  main .free-plan-widget {
    margin: 0 auto;
  }

  main .button-container.free-plan-container a.button + .free-plan-widget {
    margin-left: 24px;
  }

  main .button-container.free-plan-container .free-plan-widget {
    margin: 0;
  }

  main .button-container.free-plan-container.stacked {
    margin-top: 0;
    flex-wrap: wrap;
  }

  main .button-container.free-plan-container.stacked .free-plan-widget {
    margin-top: 24px;
    flex-direction: row;
  }

  main .button-container.free-plan-container.stacked .free-plan-widget > div {
    margin-right: 16px;
  }

  main .template-list-fourcols-container > div,
  main .template-list-horizontal-container > div {
    max-width: 1200px;
  }

  main .free-plan-bullet .free-plan-bullet-container,
  main .free-plan-widget-placeholder {
    max-width: 400px;
  }

  main .section > .content {
    max-width: 1024px;
  }
}

/* long-form section: left-align text */
main .section.long-form.narrow {
  max-width: 850px;
  margin: 0 auto;
}

main .section.long-form .content {
  box-sizing: border-box;
  padding: 0 20px 60px;
  max-width: unset;
}

main .section.long-form .content,
main .section.long-form .content p:not(.button-container, :has(.con-button)),
main .section.long-form .content h1,
main .section.long-form .content h2,
main .section.long-form .content h3,
main .section.long-form .content h4,
main .section.long-form .content h5,
main .section.long-form .content h6 {
  text-align: left;
}

main .section.long-form .content h2,
main .section.long-form .content h3,
main .section.long-form .content h4,
main .section.long-form .content h5,
main .section.long-form .content h6 {
  font-size: var(--heading-font-size-s);
}

main .section.long-form .content h2 {
  margin-top: 80px;
}

main .section.long-form .content h3 {
  margin-top: 64px;
}

main .section.long-form .content h4 {
  margin-top: 56px;
}

@media (min-width: 600px) {
  main .section.long-form .content {
    padding: 0 40px 60px;
    max-width: 1070px;
  }
}

/*Styles can be removed once we stop using block transpilations*/
main .marquee.transpiled p.action-area > span {
  display: flex;
  flex-direction: column;
  text-align: center;
}

main .marquee.transpiled p.action-area > span > a {
  margin: 0;
}

main .marquee.transpiled.small .text {
  order: 2;
}

main .marquee.transpiled.small .asset {
  order: 1;
}

main .marquee.transpiled .foreground .text h2 {
  font-weight: 700;
  text-transform: none;
  font-size: clamp(var(--heading-font-size-s), 3vw, var(--heading-font-size-l));
  margin: 0 0 8px 0;
}

@media screen and (min-width: 600px) {
  main .marquee.transpiled .foreground .text h2 {
    font-size: var(--heading-font-size-s);
  }

  main .marquee.transpiled .action-area {
    align-items: flex-start;
  }

  main .marquee.transpiled.small .text {
    order: 1;
  }

  main .marquee.transpiled.small .asset {
    order: 2;
  }
}

body:not(.blog) main #hero:not(:has(.hero-bg)) {
  color: var(--body-color);
  padding-top: 64px;
  padding-bottom: 0;
}

body:not(.blog) main #hero:not(:has(.hero-bg)) + .section {
  padding-top: 0;
}

body:not(.blog) main #hero:not(:has(.hero-bg)) > div {
  max-width: 1024px;
}

body:not(.blog) main #hero:not(:has(.hero-bg)) a.button:any-link {
  color: white;
}

body:not(.blog) main #hero:not(:has(.hero-bg)) a:any-link {
  color: black;
}

body:not(.blog) main #hero:not(:has(.hero-bg)) p {
  font-size: var(--body-font-size-s);
}


/* buttons */
@-webkit-keyframes buttonGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes buttonGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes buttonGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@-webkit-keyframes freePlanHighlight {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-25%);
  }
}

@-moz-keyframes freePlanHighlight {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-25%);
  }
}

@keyframes freePlanHighlight {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-25%);
  }
}

/* marquee light xxl-button overrides */
.marquee.light.xxl-button .icon-area img {
  max-height: 30px;
  max-width: 39px;
}

.marquee.light.xxl-button h2 {
  font-size: var(--heading-font-size-xl);
  line-height: 58.5px;
}

.marquee.light.xxl-button .action-area a {
  margin: 0;
}

.marquee.light.xxl-button a:not(.con-button), main a:not(.con-button):hover{
  text-decoration: underline;
}