/* default content */

/*
 * Font-display swap ensures text is visible while fonts load (FCP optimization)
 * Font metric overrides minimize layout shift when fonts swap (CLS optimization)
 */

/* Fallback font with metric adjustments to match Adobe Clean */
@font-face {
  font-family: 'Trebuchet MS';
  font-display: swap;
  size-adjust: 95%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
  src: local('Trebuchet MS'), local('TrebuchetMS');
}

/* System font fallback chain with font-display swap */
@font-face {
  font-family: 'adobe-clean-fallback';
  font-display: swap;
  size-adjust: 95%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
  src: local('Trebuchet MS'), local('TrebuchetMS'), local('Arial'), local('Helvetica');
}

:root {
  --color-white: #fff;

  --color-light-gray: #E9E9E9;
  --color-gray-100: #F8F8F8;
  --color-gray-150: #f3f3f3;
  --color-gray-200: #e8e8e8;
  --color-gray-250: #e1e1e1;
  --color-gray-300: #d4d4d4;
  --color-gray-300-variant: #dadada;
  --color-gray-325: #D5D5D5;
  --color-gray-350: #9e9e9e;
  --color-gray-350-variant: #b1b1b1;
  --color-gray-400: #b6b6b6;
  --color-gray-400-variant: #C6C6C6;
  --color-gray-500: #909090;
  --color-gray-600: #686868;
  --text-color-secondary: #6e6e6e;
  --color-gray-700: #444;
  --color-gray-750: #717171;
  --color-gray-700-variant: #464646;
  --color-gray-800: #242424;
  --color-gray-800-variant: #292929;
  --color-gray-900: #222;
  --color-gray-950: #131313;
  --color-blue-600: #0066CC;
  --color-black: #000;
  --color-focus-ring-strong: #4B75FF;
  --color-content-neutral: #222222;
  --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);
  --cyan-1600: #000E14;
  --cyan-1500: #001F2B;
  --transparent-white-400: rgba(255, 255, 255, 0.21);
  --transparent-white-500: rgba(255, 255, 255, 0.39);
  --palette-indigo-200: #E0E2FF;
  --palette-indigo-1000: #4046CA;
  --palette-gray-200: #E6E6E6;
  --palette-gray-600: #717171;
  --palette-gray-700: #505050;
  --palette-gray-900: #131313;
  --background-positive-default: #007A4D;
  --c1-text-text: #2C2C2C;

  /* new styles with similar names and shades */
  --color-background-accent-default: #5258E4;
  --color-background-accent-hover: #4046CA;
  --color-background-accent-down: #3236A8;
  --color-background-accent-focus: var(--color-background-accent-hover);

  /* body */
  --body-background-color: var(--color-white);
  --body-alt-background-color: var(--color-gray-200);
  --body-font-family: 'adobe-clean', 'Adobe Clean', 'adobe-clean-fallback', 'Trebuchet MS', sans-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-regular: 400;
  --heading-font-weight-medium: 700;
  --heading-font-weight: 800;
  --heading-font-weight-extra: 900;
  --subheading-font-weight: 700;
  --heading-color: var(--color-gray-800);
  --heading-line-height: 130%;
  --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-2xl: 45px;
  --heading-font-size-m: 1.75rem;
  /* 28px */
  --heading-font-size-s: 1.375rem;
  /* 22px */
  --heading-font-size-xs: 1.25rem;
  /* 20px */

  --heading-font-size-ml : 2rem;
  /* 32px */
 
  --block-sm-max-width: 375px;
  --block-md-max-width: 830px;
  --block-lg-max-width: 1024px;
  --block-wd-grid-max-width: 1600px;
  --block-wd-max-width: 1440px;

  /* Spacing */
  --spacing-0: 0px;
  --spacing-50: 2px;
  --spacing-75: 4px;
  --spacing-80: 6px;
  --spacing-100: 8px;
  --spacing-200: 12px;
  --spacing-250: 14px;
  --spacing-300: 16px;
  --spacing-325: 18px;
  --spacing-350: 20px;
  --spacing-400: 24px;
  --spacing-500: 32px;
  --spacing-600: 40px;
  --spacing-700: 48px;
  --spacing-800: 64px;
  --spacing-900: 80px;
  --spacing-1000: 96px;
  --Spacing-spacing-300: var(--spacing-300);
  --Radius-corner-radius-200: var(--spacing-300);
  --SN-Radius-corner-radius-full: 2000px;

  --S2-Buttons-Gen-AI: linear-gradient(96deg, #D73220 0%, #D92361 33%, #7155FA 100%);
 
  --S2-Buttons-Premium: linear-gradient(95.85deg, #b539c8, #7155fa 66%, #3b63fb);
  --S2-Buttons-Premium-Hover: linear-gradient(96deg, #9C28AF 0%, #6338EE 66%, #274DEA 100%);
  --S2-Buttons-Premium-Down: linear-gradient(96deg, #871B9A 0%, #5424DB 66%, #1D3ECF 100%);
  --Alias-background-app-frame-layer-2: var(--color-white);
  --Alias-drop-shadow-elevated-key: rgba(0, 0, 0, 0.12);
  --Alias-drop-shadow-transition: rgba(0, 0, 0, 0.04);
  --Alias-drop-shadow-ambient: rgba(0, 0, 0, 0.08);
  --Alias-drop-shadow-emphasized-hover-key: rgba(0, 0, 0, 0.12);
  --Alias-drop-shadow-emphasized-key: rgba(0, 0, 0, 0.08);
  --Alias-drop-shadow-emphasized-key-color: rgba(0, 0, 0, 0.08);
  --Alias-drop-shadow-transition-color: rgba(0, 0, 0, 0.04);
  --Alias-drop-shadow-ambient-color: rgba(0, 0, 0, 0.08);
  --Background-sx-extra-subdued-hover: var(--color-gray-325);
  --Background-sx-extra-subdued-down: var(--color-gray-350-variant);
  --Content-disabled-default: var(--color-gray-350-variant);
  /* current ax-grid system */
  --ax-grid-margin: var(--spacing-350);
  --ax-grid-gutter: 8px;
  --ax-grid-container-width: 100%;
  --ax-grid-column-width: calc((var(--ax-grid-container-width) - var(--ax-grid-gutter) * 11) / 12);
  --ax-grid-1-col-width: calc(var(--ax-grid-column-width) * 1 + var(--ax-grid-gutter) * 0);
  --ax-grid-2-col-width: calc(var(--ax-grid-column-width) * 2 + var(--ax-grid-gutter) * 1);
  --ax-grid-3-col-width: calc(var(--ax-grid-column-width) * 3 + var(--ax-grid-gutter) * 2);
  --ax-grid-4-col-width: calc(var(--ax-grid-column-width) * 4 + var(--ax-grid-gutter) * 3);
  --ax-grid-5-col-width: calc(var(--ax-grid-column-width) * 5 + var(--ax-grid-gutter) * 4);
  --ax-grid-6-col-width: calc(var(--ax-grid-column-width) * 6 + var(--ax-grid-gutter) * 5);
  --ax-grid-7-col-width: calc(var(--ax-grid-column-width) * 7 + var(--ax-grid-gutter) * 6);
  --ax-grid-8-col-width: calc(var(--ax-grid-column-width) * 8 + var(--ax-grid-gutter) * 7);
  --ax-grid-9-col-width: calc(var(--ax-grid-column-width) * 9 + var(--ax-grid-gutter) * 8);
  --ax-grid-10-col-width: calc(var(--ax-grid-column-width) * 10 + var(--ax-grid-gutter) * 9);
  --ax-grid-11-col-width: calc(var(--ax-grid-column-width) * 11 + var(--ax-grid-gutter) * 10);
  --ax-grid-12-col-width: calc(var(--ax-grid-column-width) * 12 + var(--ax-grid-gutter) * 11);

  /* ===== EXPRESS TYPOGRAPHY SYSTEM (ax- namespace) ===== */
  /* Based on Figma design system values */
  
  /* Express Heading Typography Variables */
  --ax-heading-xxxl-size: 44px;
  --ax-heading-xxxl-lh: 55px;
  --ax-heading-xxl-size: 36px;
  --ax-heading-xxl-lh: 45px;
  --ax-heading-xl-size: 28px;
  --ax-heading-xl-lh: 35px;
  --ax-heading-l-size: 24px;
  --ax-heading-l-lh: 30px;
  --ax-heading-m-size: 20px;
  --ax-heading-m-lh: 25px;
  --ax-heading-s-size: 18px;
  --ax-heading-s-lh: 22.5px;
  --ax-heading-xs-size: 16px;
  --ax-heading-xs-lh: 20px;
  --ax-heading-xxs-size: 14px;
  --ax-heading-xxs-lh: 18px;

  /* Express Body Typography Variables */
  --ax-body-xxl-size: 28px;
  --ax-body-xxl-lh: 42px;
  --ax-body-xl-size: 22px;
  --ax-body-xl-lh: 33px;
  --ax-body-l-size: 20px;
  --ax-body-l-lh: 30px;
  --ax-body-m-size: 18px;
  --ax-body-m-lh: 27px;
  --ax-body-s-size: 16px;
  --ax-body-s-lh: 24px;
  --ax-body-xs-size: 14px;
  --ax-body-xs-lh: 21px;
  --ax-body-xxs-size: 12px;
  --ax-body-xxs-lh: 18px;

  /* Express Detail Typography Variables */
  --ax-detail-xl-size: 20px;
  --ax-detail-xl-lh: 25px;
  --ax-detail-l-size: 16px;
  --ax-detail-l-lh: 20px;
  --ax-detail-m-size: 12px;
  --ax-detail-m-lh: 15px;
  --ax-detail-s-size: 10px;
  --ax-detail-s-lh: 12px;

  /* Express Typography Weights */
  --ax-heading-weight: 700;
  --ax-body-weight: 400;
  --ax-body-weight-bold: 700;
  --ax-detail-weight: 700;
  --ax-detail-transform: uppercase;

  --color-dark-gray: #505050;
  --color-error-red: #d7373f;
  --color-default-font: #131313;
  --color-light-gray-2: #e1e1e1;

  --border-radius-10: 10px;
  --border-radius-max: 999px;

  --button-padding-top: 13px;
  --button-padding-bottom: 13px;

  --border-width-2: 2px;

  --Global-Typography-Size-Headings-Heading-2XL: 32px;
  --Global-Typography-Size-Headings-Heading-XL: 28px;
  --Global-Typography-Size-Headings-Heading-L: 24px;
  --Global-Typography-Size-Title-Title-XS: 16px;
  --Global-Typography-Line-height-Title-Title-XS: 20px;
  --Global-Typography-Size-Body-Body-M: 16px;

  /* ===== COLOR FEATURE TOKENS ===== */

  /* Additional color tokens */
  --color-green-800: #079355;
  --color-green-900: #05834E;
  --color-green-1000: #036E45;
  --color-blue-700: #005ECB;
  --color-blue-800: #4B75FF;
  --color-orange-700: #E86A00;
  --color-purple-1000: #862BD9;
  --carwash-blue: var(--palette-indigo-1000);

  /* Typography */
  --body-serif-font-family: 'adobe-clean-serif', 'Adobe Clean Serif', serif;
  --font-weight-medium: 500;

  /* Semantic aliases */
  --color-negative: var(--color-error-red);

  /* Color Explore layout */
  --color-explore-filter-picker-width: 144px;
  --color-explore-filter-picker-max-width: 180px;

  /* S2 Button tokens */
  --S2-Buttons-Accent-Color-Default: #3B63FB;
  --S2-Buttons-Accent-Color-Hover: #274DEA;

  /* Corner radius tokens */
  --Corner-radius-corner-radius-100: 8px;
  --Corner-radius-corner-radius-200: 16px;
  --Corner-radius-corner-radius-500: 100px;

  /* Spectrum color picker tokens */
  --mod-swatch-border-radius: 3px;
  --spectrum-color-handle-size: 16px;
  --spectrum-color-handle-border-width: 2px;
  --mod-colorhandle-border-color: var(--color-white);
  --spectrum-color-handle-outer-border-width: 0;
  --spectrum-colorhandle-outer-border-width: 0;
  --spectrum-color-handle-inner-border-width: 1px;
  --mod-colorhandle-inner-border-width: 1px;
  --mod-colorhandle-inner-border-color: #1F1F1F4D;
  --mod-colorhandle-outer-border-width: 0;

  /* Shadow/overlay tokens (color component overrides) */
  --Alias-overlay-curtain: rgba(0, 0, 0, 0.5);
  --Elevation-Dialog: 0 4px 16px rgba(0, 0, 0, 0.16);
  --Alias-drop-shadow-ambient: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
  --Alias-drop-shadow-transition: 0 2px 6px 0 rgba(0, 0, 0, 0.04);
  --Alias-drop-shadow-elevated-key: 0 0 2px 0 rgba(0, 0, 0, 0.12);
  --Modal-close-shadow-tablet: 0 0 12px rgba(0, 0, 0, 0.16);
  --Modal-close-shadow-desktop: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Global typography tokens */
  --Global-Typography-Size-Label-Label-L: 16px;
  --Global-Typography-Line-height-Label-Label-L: 22px;
  --typography-label-l: 16px;
  --typography-title-2xs: 14px;
  --typography-line-height-Title-2xs: 20px;

  /* Palette tokens */
  --Palette-gray-100: #E9E9E9;
  --Palette-gray-200: #E1E1E1;
  --Palette-gray-400: #C6C6C6;
  --Palette-gray-600: #717171;
  --Palette-gray-700: #505050;
  --Palette-gray-900: #131313;
  --Palette-gray-1000: #000000;

  --Palette-blue-1000: #274DEA;

  /* Alias tokens */
  --Alias-focus-indicator-default: #4b75ff;
  --Alias-content-neutral-default: #292929;
  --Alias-content-neutral-hover: #131313;
  --Alias-content-disabled-default: #C6C6C6;
  --Alias-content-typography-Title: var(--Palette-gray-900);
  --Alias-content-typography-Heading: var(--Palette-gray-900);
  --Alias-content-typography-Body: var(--Palette-gray-700);
  --Alias-content-semantic-accent-key-focus: var(--Palette-blue-1000);

  /* Additional radius tokens */
  --Radius-corner-radius-75: 4px;
  --corner-radius-80: 6px;

  /* Background/button semantic tokens */
  --Background-accent-default: var(--color-background-accent-default);
  --Buttons-default: var(--S2-Buttons-Accent-Color-Default);
  --Buttons-hover: var(--S2-Buttons-Accent-Color-Hover);
}

@media (min-width: 600px) {
  :root {
    --ax-grid-margin: var(--spacing-500);
    --ax-grid-gutter: 16px;
  }
}

@media (min-width: 1200px) {
  :root {
    --ax-grid-margin: var(--spacing-600);
    --ax-grid-gutter: 24px;
    
    /* Express Typography Desktop Overrides */
    --ax-heading-xxxl-size: 80px;
    --ax-heading-xxxl-lh: 88px;
    --ax-heading-xxl-size: 44px;
    --ax-heading-xxl-lh: 55px;
    --ax-heading-xl-size: 36px;
    --ax-heading-xl-lh: 45px;
    --ax-heading-l-size: 28px;
    --ax-heading-l-lh: 35px;
    --ax-heading-m-size: 24px;
    --ax-heading-m-lh: 30px;
    --ax-heading-s-size: 20px;
    --ax-heading-s-lh: 25px;
    --ax-heading-xs-size: 18px;
    --ax-heading-xs-lh: 22.5px;

    --Global-Typography-Size-Headings-Heading-2XL: 44px;
    --Global-Typography-Size-Headings-Heading-XL: 36px;
    --Global-Typography-Size-Headings-Heading-L: 28px;
    --Global-Typography-Size-Title-Title-XS: 18px;
    --Global-Typography-Line-height-Title-Title-XS: 22px;
    --Global-Typography-Size-Body-Body-M: 18px;
    --typography-title-2xs: 16px;
    --typography-line-height-Title-2xs: 22px;
  }
}

@media (min-width: 1680px) {
  :root {
    --ax-grid-container-width: min(1600px, 100%);
  }
}

@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: var(--color-white);
}

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: var(--spacing-900);
}

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 var(--spacing-80);
  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: var(--spacing-50);
  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 var(--spacing-80);
  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 var(--spacing-250);
  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: var(--spacing-75) 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 {
  color: var(--color-white);
  border-color: transparent;
  background: var(--S2-Buttons-Premium);
  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;
  border: none;
}

main a.button.gradient:any-link:hover {
  background: var(--S2-Buttons-Premium-Hover);
}

main a.button.gradient:any-link:focus {
  outline: 2px solid var(--color-info-accent);
  outline-offset: 2px;
  background: var(--S2-Buttons-Premium);
}

main a.button.gradient:any-link:active {
  background: var(--S2-Buttons-Premium-Down);
}

main a.button.gradient.disabled:any-link {
  color: var(--color-gray-500);
  background: var(--color-gray-200);
  pointer-events: none;
}
 
main a.button>svg {
  float: left;
  display: inline;
  width: var(--spacing-350);
  height: var(--spacing-350);
  margin: var(--spacing-100) var(--spacing-100) var(--spacing-100) 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, main ul, main ol {
  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: var(--spacing-500);
}

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

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

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

#hero .icon.express-logo {
  width: initial;
  height: 30px;
  padding: 1rem 0 1rem;
}

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.panel {
  margin: 0 var(--spacing-600) var(--spacing-900) var(--spacing-600); 
  padding: var(--spacing-600) var(--spacing-500);
  border-radius: 16px;
  border: 2px solid var(--color-white);
  background: var(--color-gray-100);
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.08), 0 1px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 8px 0 rgba(0, 0, 0, 0.08);
}

@media (max-width: 899px) {
  main .section.panel {
    margin: 0 var(--spacing-500) var(--spacing-600) var(--spacing-500);
  }
}

@media (max-width: 599px) {
  main .section.panel {
    margin: 0 var(--spacing-300) var(--spacing-600) var(--spacing-300);
    padding-left: var(--spacing-300);
    padding-right: var(--spacing-300);
  }
}

@media (min-width: 1800px) {
  main .section.panel {
    margin: 0 auto var(--spacing-900) auto;
    max-width: 1679px;
  }
}

/* Align link-list with template container when in modular-search */
main .section.panel .link-list-wrapper,
main .section.panel .link-list-wrapper:has(.link-list),
main .section.panel .link-list-wrapper:has(.link-list:is([class*=" "])),
main .section.panel .link-list-wrapper:has(.link-list.inline) {
  max-width: var(--ax-grid-10-col-width);
  margin: 0 auto;
  padding: 0 28px var(--spacing-500) 28px;
}

@media (min-width: 1200px) {
  main .section.panel .link-list-wrapper,
  main .section.panel .link-list-wrapper:has(.link-list),
  main .section.panel .link-list-wrapper:has(.link-list:is([class*=" "])),
  main .section.panel .link-list-wrapper:has(.link-list.inline) {
    max-width: var(--ax-grid-10-col-width);
    margin: 0 auto;
    padding: 0;
  }
}

main .section p.button-container,
main .section .content p.button-container {
  text-align: center;
  margin-top: var(--spacing-300);
  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;
}

main .promotion.auto-promotion:not([data-block-status="loaded"]) {
  display: none;
}

/* 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: -var(--spacing-100);
  margin-top: var(--spacing-300);
  z-index: 10;
}

main .button-container.free-plan-container a.button {
  max-height: var(--spacing-400);
}

main .free-plan-widget {
  position: relative;
  box-sizing: border-box;
  background-color: var(--color-gray-100);
  border-radius: 20px;
  margin: var(--spacing-500) 0;
  padding: var(--spacing-300) var(--spacing-400);
  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: -var(--spacing-500);
  left: 50%;
  transform: translateX(-50%);
}

main .center .free-plan-widget {
  margin: var(--spacing-500) 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: var(--spacing-100);
  width: var(--spacing-100);
  padding: 3px;
  margin-right: var(--spacing-75);
}

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

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

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

main .section .content p,
main .section p {
  margin: var(--spacing-500) 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: var(--spacing-600);
}

div[data-block-status]:not(.pricing-cards-wrapper, .pricing-table-wrapper, .split-action-wrapper, .link-list-wrapper, .wayfinder, .ratings, .ribbon-banner, .content, .banner, .text, .hover-cards, .cta-cards, .simplified-pricing-cards-v2, .cta-carousel) a.button.same-fcta,
div[data-block-status]:not(.pricing-cards-wrapper, .pricing-table-wrapper, .split-action-wrapper, .link-list-wrapper, .wayfinder, .ratings, .ribbon-banner, .content, .banner, .text, .hover-cards, .cta-cards, .simplified-pricing-cards-v2, .cta-carousel) 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: var(--spacing-100);
}

/* Lottie player default */
main .lottie {
  width: var(--spacing-500);
  height: var(--spacing-500);
}

/* 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: var(--spacing-350);
  margin-right: var(--spacing-350);
  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: var(--spacing-500);
    margin-bottom: var(--spacing-300);
  }

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

  main #hero h5 {
    font-size: 22px;
    font-weight: 400;
    max-width: 672px;
    margin: auto;
    margin-top: var(--spacing-500);
  }

  main #hero h2,
  main #hero p {
    font-size: var(--body-font-size-xl);
    line-height: var(--body-line-height);
    text-align: center;
    margin: var(--spacing-400) 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: var(--spacing-400) 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;
  }

  div[data-block-status]:not(.pricing-cards-wrapper, .pricing-table-wrapper, .split-action-wrapper, .link-list-wrapper, .wayfinder, .ratings, .text, .hover-cards, .cta-cards, .simplified-pricing-cards-v2) a.button.same-fcta,
  div[data-block-status]:not(.pricing-cards-wrapper, .pricing-table-wrapper, .split-action-wrapper, .link-list-wrapper, .wayfinder, .ratings, .text, .hover-cards, .cta-cards, .simplified-pricing-cards-v2) 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: var(--spacing-100);
  }

  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: var(--spacing-600) auto 0;
  }

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

  main .button-container.free-plan-container a.button+.free-plan-widget {
    margin-left: var(--spacing-400);
  }

  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: var(--spacing-400);
    flex-direction: row;
  }

  main .button-container.free-plan-container.stacked .free-plan-widget>div {
    margin-right: var(--spacing-300);
  }

  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: var(--block-lg-max-width);
  }
}

main .section.long-form.narrow {
  max-width: 850px;
  margin: 0 auto;
}

main .section.long-form .content,
main .section.long-form .text .foreground {
  box-sizing: border-box;
  padding-left: var(--spacing-350);
  padding-right: var(--spacing-350);
  max-width: unset;
  width: var(--ax-grid-12-col-width);
  margin: 0 auto;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

main .section.long-form .content h1 {
  font-size: var(--heading-font-size-xl);
}

main .section.long-form .content h2 {
  font-size: var(--heading-font-size-m);
}

main .section.long-form.long-form-blog .content h2 {
  font-size: var(--Global-Typography-Size-Headings-Heading-XL);
  font-weight: var(--heading-font-weight-extra);
  line-height: 104%;
}

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);
  color: var(--color-gray-950);
}

main .section.long-form.long-form-blog .content :is(h3, h4, h5, h6) {
  font-size: var(--Global-Typography-Size-Headings-Heading-L);
  line-height: 104%;
  font-weight: var(--heading-font-weight-extra);
}

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

main .section.long-form .content,
main .section.long-form .content p:not(.button-container, :has(.con-button)) {
  color: var(--palette-gray-700);
}

main .section.long-form .content :is(h1, h2, h3, h4, h5, h6) {
  color: var(--palette-gray-900);
}

main .section.long-form .content h1,
main .section.long-form .content h2,
main .section.long-form .content h3,
main .section.long-form .content h4 {
  margin-top: 0;
  color: var(--color-gray-950);
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

main .section.long-form .content p {
  margin-top: var(--spacing-300);
  color: var(--color-dark-gray);
}

main .section.long-form .content :is(p, ul, ol) {
  font-size: var(--Global-Typography-Size-Body-Body-M);
  line-height: 130%;
}

main .section.long-form-blog .content .button-container a {
  margin-bottom: var(--spacing-100);
}

main .section.long-form-blog .milo-video {
  margin-bottom: var(--spacing-400);
}

@media (min-width: 768px) {
  main .section.long-form .content,
  main .section.long-form .text .foreground {
    padding: 0 var(--spacing-600) 0;
    width: var(--ax-grid-8-col-width);
    margin: 0 auto;
    box-sizing: border-box;
  }
}

@media (min-width: 1024px) {
  main .section.long-form .content,
  main .section.long-form .text .foreground {
    /* Desktop: 7 columns, shifted right to accommodate fixed TOC */
    max-width: var(--ax-grid-7-col-width);
    margin-left: calc(var(--ax-grid-3-col-width) + var(--spacing-600) + var(--ax-grid-gutter));
    margin-right: auto;
  }
}

@media (min-width: 1680px) {
  main .section.long-form .content,
  main .section.long-form .text .foreground {
    margin: 0 auto;
  }
}

/*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 var(--spacing-100) 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: var(--spacing-800);
  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: var(--color-white);
}

body:not(.blog) main #hero:not(:has(.hero-bg)) a:any-link {
  color: var(--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) {
  text-decoration: underline;
}

/* TODO: deprecated: util classes for current ax-grid system */
.ax-grid-container {
  margin-left: var(--ax-grid-margin);
  margin-right: var(--ax-grid-margin);
  box-sizing: border-box;
  display: flex;
  gap: var(--ax-grid-gutter);
  justify-content: center;
  flex-wrap: wrap;
}

/* video controls for accessibility */
.video-controls-wrapper {
  position: absolute;
  bottom: 15px;
  right: 35px;
  width: var(--spacing-500);
  height: var(--spacing-500);
  /* Reset button styles */
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  background-color: var(--color-gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  z-index: 2;
}

.video-controls-wrapper:hover {
  background-color: var(--color-black);
}

.video-controls-wrapper:focus-visible {
  outline: 2px solid #1473e6;
  outline-offset: 2px;
}

.video-controls-wrapper .icon {
  width: var(--spacing-400);
  height: var(--spacing-400);
  fill: var(--color-white);
}

.video-controls-wrapper[aria-pressed="true"] .accessibility-control.icon-play-video.isHidden {
  display: none;
}

.video-controls-wrapper[aria-pressed="false"] .accessibility-control.icon-pause-video {
  display: none;
}

.hero-animation-overlay.column > .video-container {
  position: relative;
}

.hero-animation-overlay.column > .video-container > .video-controls-wrapper{
  right: 15px;
}

.icon.icon-adobe-express-logo {
  width: initial;
  height: 30px;
  padding: 1rem 0 1rem;
}

.section.display-none {
  display: none;
  height: var(--spacing-0);
}

main .section.zero-margin:not([data-padding='none']) .content:first-child {
  padding-top: var(--spacing-0);
}

main .section.no-h2-margin h2,
main .section.no-h2-margin .content h2 {
  margin: 0;
}

.text.ax-eyebrow :is([class^="heading-"]:only-child, [class^="body-"]:only-child, [class^="detail-"]) {
  color: var(--palette-gray-600);
  font-size: var(--Global-Typography-Size-Title-Title-XS);
  line-height: var(--Global-Typography-Line-height-Title-Title-XS);
  font-weight: 700;
}

/* ===== EXPRESS TYPOGRAPHY CLASSES (ax- namespace) ===== */
/* Based on Figma design system values - matches Milo's consonant typography pattern */

/* Express Heading Classes */
.ax-heading-xxxl,
.ax-heading-xxl,
.ax-heading-xl,
.ax-heading-l,
.ax-heading-m,
.ax-heading-s,
.ax-heading-xs,
.ax-heading-xxs {
  margin: 0;
  font-weight: var(--ax-heading-weight);
  font-family: var(--body-font-family);
}

.ax-heading-xxxl {
  font-size: var(--ax-heading-xxxl-size);
  line-height: var(--ax-heading-xxxl-lh);
}

.ax-heading-xxl {
  font-size: var(--ax-heading-xxl-size);
  line-height: var(--ax-heading-xxl-lh);
}

.ax-heading-xl {
  font-size: var(--ax-heading-xl-size);
  line-height: var(--ax-heading-xl-lh);
}

.ax-heading-l {
  font-size: var(--ax-heading-l-size);
  line-height: var(--ax-heading-l-lh);
}

.ax-heading-m {
  font-size: var(--ax-heading-m-size);
  line-height: var(--ax-heading-m-lh);
}

.ax-heading-s {
  font-size: var(--ax-heading-s-size);
  line-height: var(--ax-heading-s-lh);
}

.ax-heading-xs {
  font-size: var(--ax-heading-xs-size);
  line-height: var(--ax-heading-xs-lh);
}

.ax-heading-xxs {
  font-size: var(--ax-heading-xxs-size);
  line-height: var(--ax-heading-xxs-lh);
}

/* Express Body Classes */
.ax-body-xxl,
.ax-body-xl,
.ax-body-l,
.ax-body-m,
.ax-body-s,
.ax-body-xs,
.ax-body-xxs {
  margin: 0;
  font-family: var(--body-font-family);
  font-weight: var(--ax-body-weight);
}

.ax-body-xxl {
  font-size: var(--ax-body-xxl-size);
  line-height: var(--ax-body-xxl-lh);
}

.ax-body-xl {
  font-size: var(--ax-body-xl-size);
  line-height: var(--ax-body-xl-lh);
}

.ax-body-l {
  font-size: var(--ax-body-l-size);
  line-height: var(--ax-body-l-lh);
}

.ax-body-m {
  font-size: var(--ax-body-m-size);
  line-height: var(--ax-body-m-lh);
}

.ax-body-s {
  font-size: var(--ax-body-s-size);
  line-height: var(--ax-body-s-lh);
}

.ax-body-xs {
  font-size: var(--ax-body-xs-size);
  line-height: var(--ax-body-xs-lh);
}

.ax-body-xxs {
  font-size: var(--ax-body-xxs-size);
  line-height: var(--ax-body-xxs-lh);
}

/* Express Body Bold Classes */
.ax-body-xxl-bold,
.ax-body-xl-bold,
.ax-body-l-bold,
.ax-body-m-bold,
.ax-body-s-bold,
.ax-body-xs-bold,
.ax-body-xxs-bold {
  margin: 0;
  font-family: var(--body-font-family);
  font-weight: var(--ax-body-weight-bold);
}

.ax-body-xxl-bold {
  font-size: var(--ax-body-xxl-size);
  line-height: var(--ax-body-xxl-lh);
}

.ax-body-xl-bold {
  font-size: var(--ax-body-xl-size);
  line-height: var(--ax-body-xl-lh);
}

.ax-body-l-bold {
  font-size: var(--ax-body-l-size);
  line-height: var(--ax-body-l-lh);
}

.ax-body-m-bold {
  font-size: var(--ax-body-m-size);
  line-height: var(--ax-body-m-lh);
}

.ax-body-s-bold {
  font-size: var(--ax-body-s-size);
  line-height: var(--ax-body-s-lh);
}

.ax-body-xs-bold {
  font-size: var(--ax-body-xs-size);
  line-height: var(--ax-body-xs-lh);
}

.ax-body-xxs-bold {
  font-size: var(--ax-body-xxs-size);
  line-height: var(--ax-body-xxs-lh);
}

/* Express Detail Classes */
.ax-detail-xl,
.ax-detail-l,
.ax-detail-m,
.ax-detail-s {
  margin: 0;
  font-family: var(--body-font-family);
  font-weight: var(--ax-detail-weight);
  text-transform: var(--ax-detail-transform);
}

.ax-detail-xl {
  font-size: var(--ax-detail-xl-size);
  line-height: var(--ax-detail-xl-lh);
}

.ax-detail-l {
  font-size: var(--ax-detail-l-size);
  line-height: var(--ax-detail-l-lh);
}

.ax-detail-m {
  font-size: var(--ax-detail-m-size);
  line-height: var(--ax-detail-m-lh);
}

.ax-detail-s {
  font-size: var(--ax-detail-s-size);
  line-height: var(--ax-detail-s-lh);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}