@import url("./fonts.css");

:root {
  --cloud-text-dark-blue               : #101828;
  --cloud-blue                         : #0345d9;
  --cloud-med-blue                     : #00a1d8;
  --cloud-light-blue                   : #78d9e8;
  --cloud-dark-blue                    : #161d70;
  --cloud-bright-blue                  : #155dfc;
  --cloud-link-blue                    : #0042d7;
  --cloud-neutral-dark-blue-grey-header: #4a5565;
  --cloud-sec-light-blue-3             : #dbeafe;
  --cloud-sec-light-blue-4             : #dfe8f2;
  --cloud-sec-light-blue-5             : #bedbff;
  --cloud-tabs                         : #eff6ff;
  --cloud-sec-blue                     : #0787b5;
  --cloud-sec-med-blue-1               : #b0d5ff;
  --cloud-sec-med-blue-2               : #d8e7ff;
  --cloud-sec-light-blue-1             : #efefef;
  --cloud-sec-light-blue-2             : #fff;
  --cloud-purple-accent                : #b21adf;
  --cloud-orange-accent                : #f1aa38;
  --cloud-neutral-light-blue-grey-3    : #cdd1da;
  --cloud-neutral-light-blue-grey-4    : #b1b1b1;
  --cloud-white                        : #fff;
  --cloud-black                        : #000;
  --cloud-black-alt                    : #0a0a0a;
  --cloud-neutral-dark-grey-1          : #1d1212;
  --cloud-neutral-dark-grey-2          : #555;
  --cloud-neutral-dark-grey-3          : #333;
  --cloud-neutral-med-grey             : #818181;
  --cloud-neutral-light-grey           : #ccc;
  --cloud-neutral-light-grey-2         : #f3f3f3;
  --cloud-neutral-light-grey-3         : #dadada;
  --cloud-neutral-dark-blue-grey       : #49587a;
  --cloud-neutral-med-blue-grey        : #9ca8b5;
  --cloud-neutral-light-blue-grey      : #ccd1da;
  --cloud-neutral-light-blue-grey-2    : #f0f9ff;
  --cloud-blue-accent                  : #0da1db;
  --cloud-gradient-button              : linear-gradient(180deg, #161d70, #0345d9);
  --cloud-gradient-titles-light        : linear-gradient(91deg, #161d70 26.76%, #0345d9 68.15%);
  --cloud-gradient-strokes             : linear-gradient(90deg, #161d70, #0345d9);
  --cloud-gradient-titles-dark         : linear-gradient(92deg, #fff 21.29%, #78d9e8 89.11%);
  --cloud-gradient-title-cyan          : linear-gradient(90deg, #fff, #78d9e8);
  --cloud-gradient-site-bg             : linear-gradient(90deg, #fff, #eff6ff 49.52%, #f0f9ff);
  --cloud-gradient-footer              : linear-gradient(167.927deg, #000220, #000e63 50%, #0425ff);
  --cloud-gradient-footer-alt          : linear-gradient(137.62deg, #000220, #000e63 50%, #0425ff);
  --icon-gradient                      : linear-gradient(136deg, #0345d9 26.42%, #0da1db 91.88%);
  --milestone-card-shadow              : 0 0 10.7px 0 rgb(0 0 0 / 25%);
  --stacked-cards-shadow-blue-light    : 0 0 70px 0 #dff2fe;
  --color-background-primary           : var(--cloud-white);
  --color-background-light             : var(--cloud-sec-light-blue-1);
  --color-background-light-blue        : var(--cloud-light-blue);
  --color-background-primary-blue      : var(--cloud-blue);
  --color-background-dark-blue         : var(--cloud-dark-blue);
  --color-background-gradient-light    : var(--cloud-gradient-site-bg);
  --color-background-gradient-primary  : var(--cloud-gradient-button);
  --color-text-primary                 : var(--cloud-text-dark-blue);
  --color-text-dark-blue               : var(--cloud-text-dark-blue);
  --color-text-secondary               : var(--cloud-neutral-med-grey);
  --color-text-link                    : var(--cloud-link-blue);
  --color-text-on-light                : var(--cloud-text-dark-blue);
  --color-text-on-dark                 : var(--cloud-white);
  --color-text-on-primary              : var(--cloud-white);
  --color-text-disabled                : var(--cloud-neutral-light-grey);
  --color-container-card-bg            : var(--cloud-white);
  --color-container-card-border        : var(--cloud-neutral-light-grey);
  --color-container-frame-bg           : transparent;
  --color-container-frame-border       : var(--cloud-blue);
  --color-container-rich-bg            : var(--cloud-blue);
  --color-container-rich-text          : var(--cloud-white);
  --color-border-default               : var(--cloud-neutral-light-grey);
  --color-border-subtle                : var(--cloud-neutral-light-grey-2);
  --color-border-strong                : var(--cloud-neutral-dark-grey-2);
  --color-border-primary               : var(--cloud-blue);
  --color-border-light                 : var(--cloud-neutral-light-blue-grey);
  --color-border-dark                  : var(--cloud-neutral-dark-grey-1);
  --color-interactive-primary          : var(--cloud-blue);
  --color-interactive-primary-hover    : var(--cloud-dark-blue);
  --color-interactive-secondary        : var(--cloud-sec-blue);
  --color-interactive-link             : var(--cloud-link-blue);
  --color-interactive-link-hover       : var(--cloud-dark-blue);
  --color-primary-blue                 : var(--cloud-blue);
  --color-primary-dark-blue            : var(--cloud-dark-blue);
  --color-neutral-white                : var(--cloud-white);
  --color-error                        : #dc2626;
  --color-error-bg                     : #fee2e2;
  --color-error-border                 : #dc2626;
  --color-success                      : #16a34a;
  --color-success-bg                   : #d1fae5;
  --color-success-border               : #16a34a;
  --color-warning                      : var(--cloud-orange-accent);
  --color-warning-bg                   : #fef3c7;
  --color-warning-border               : var(--cloud-orange-accent);
  --color-info                         : var(--cloud-blue);
  --color-info-bg                      : var(--cloud-sec-med-blue-2);
  --color-info-border                  : var(--cloud-blue);
  --nav-border-color                   : #e5e7eb;
  --nav-divider-color                  : #ccc;
  --nav-mobile-bg                      : #dbe7ff;
  --space-unit                         : 0.25rem;
  --space-4x                           : calc(var(--space-unit)*1);
  --space-5x                           : calc(var(--space-unit)*1.5);
  --space-6x                           : calc(var(--space-unit)*2);
  --space-7x                           : calc(var(--space-unit)*3);
  --space-8x                           : calc(var(--space-unit)*4);
  --space-9x                           : calc(var(--space-unit)*5);
  --space-10x                          : calc(var(--space-unit)*6);
  --space-11x                          : calc(var(--space-unit)*8);
  --space-12x                          : calc(var(--space-unit)*10);
  --space-13x                          : calc(var(--space-unit)*12);
  --space-14x                          : calc(var(--space-unit)*14);
  --space-15x                          : calc(var(--space-unit)*16);
  --space-16x                          : calc(var(--space-unit)*20);
  --space-17x                          : calc(var(--space-unit)*24);
  --space-xs                           : var(--space-6x);
  --space-sm                           : var(--space-8x);
  --space-md                           : var(--space-10x);
  --space-lg                           : var(--space-11x);
  --space-xl                           : var(--space-12x);
  --space-2xl                          : var(--space-13x);
  --space-3xl                          : calc(var(--space-unit)*22.5);
  --space-4xl                          : var(--space-16x);
  --space-5xl                          : var(--space-17x);
  --space-section-sm                   : var(--space-10x);
  --space-section-md                   : var(--space-12x);
  --space-section-lg                   : var(--space-15x);
  --space-section-xl                   : var(--space-17x);
  --border-width                       : 1px;
  --radius-4                           : 0.25rem;
  --radius-8                           : 0.5rem;
  --radius-12                          : 0.75rem;
  --radius-16                          : 1rem;
  --radius-circle                      : 100%;
  --radius-sm                          : var(--radius-4);
  --radius-md                          : var(--radius-8);
  --radius-lg                          : var(--radius-16);
  --radius-full                        : var(--radius-circle);
  --radius-button                      : var(--radius-8);
  --radius-input                       : var(--radius-8);
  --radius-card                        : var(--radius-16);
  --radius-modal                       : var(--radius-4);
  --shadow-dark                        : 0 20px 25px -5px rgb(20 0 66 / 10%), 0 8px 10px -6px rgb(20 0 66 / 10%);
  --shadow-blue-light                  : 0 0 48px 0 #dff2fe;
  --shadow-blue-expanded               : -26px 38px 105.7px 0 #bedbff, 26px -31px 105.7px 0 #bedbff, 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
  --shadow-blue-expanded-1             : 38px 38px 105.7px 0 #bedbff, 26px 27px 105.7px 0 #bedbff, 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
  --shadow-blue-light-expand           : -26px 38px 50px 0 rgb(190 219 255 / 30%), 26px -31px 50px 0 rgb(190 219 255 / 30%), 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
  --shadow-blue-under-xl               : 0 120px 65.4px 0 rgb(190 219 255 / 30%);
  --shadow-blue-over-xl                : 0 -30px 90px 0 #bedbff;
  --shadow-map-tag                     : 0 151px 98px 0 rgb(20 0 66/7%), 0 75.574px 49.098px 0 rgb(20 0 66/5%), 0 45.522px 40.192px 0 rgb(20 0 66/4%), 0 29.173px 42.286px 0 rgb(20 0 66/4%), 0 18.908px 41.854px 0 rgb(20 0 66/4%), 0 11.902px 36.949px 0 rgb(20 0 66/3%), 0 6.838px 27.93px 0 rgb(20 0 66/3%), 0 3.01px 15.427px 0 rgb(20 0 66/2%);
  --elevation-1                        : var(--shadow-dark);
  --elevation-2                        : var(--shadow-blue-light-expand);
  --elevation-3                        : var(--shadow-blue-expanded);
  --elevation-blue-subtle              : var(--shadow-blue-light);
  --elevation-blue-strong              : var(--shadow-blue-expanded);
  --elevation-blue-xl                  : var(--shadow-blue-under-xl);

  /* Overlay / translucent colors */
  --color-overlay-dark-75              : rgb(19 19 19 / 75%);
  --color-overlay-dark-25              : rgb(19 19 19 / 25%);
  --color-overlay-white-60             : rgb(255 255 255 / 60%);
  --color-overlay-dark-35              : rgb(16 24 40 / 35%);
  --color-overlay-white-12             : rgb(255 255 255 / 12%);
  --color-overlay-white-20             : rgb(255 255 255 / 20%);

  /* Shadow / border translucent colors */
  --color-shadow-blue-10               : rgb(0 82 204 / 10%);
  --color-shadow-black-8               : rgb(0 0 0 / 8%);
  --color-shadow-black-10              : rgb(0 0 0 / 10%);
  --color-shadow-black-7               : rgb(0 0 0 / 7%);
  --color-shadow-black-16              : rgb(0 0 0 / 16%);
  --color-shadow-navy-8                : rgb(15 23 42 / 8%);
  --color-shadow-navy-12               : rgb(15 23 42 / 12%);
  --color-shadow-navy-18               : rgb(15 23 42 / 18%);
  --color-shadow-purple-10             : rgb(20 0 66 / 10%);
  --container-width                    : 80rem;
  --container-width-lg                 : 90rem;
  --container-width-md                 : 67.5rem;
  --container-width-sm                 : 64rem;
  --site-max-width                     : 86.25rem;
  --site-gutter                        : 1.875rem;
  --container-padding                  : 1rem;
  --background-color                   : var(--cloud-white);
  --light-color                        : var(--cloud-sec-light-blue-1);
  --dark-color                         : var(--cloud-neutral-dark-grey-2);
  --text-color                         : var(--cloud-text-dark-blue);
  --link-color                         : var(--cloud-link-blue);
  --link-hover-color                   : var(--cloud-dark-blue);
  --body-font-family                   : "Public Sans", roboto, roboto-fallback, sans-serif;
  --heading-font-family                : "Public Sans", roboto-condensed, roboto-condensed-fallback, sans-serif;
  --font-weight-regular                : 400;
  --font-weight-medium                 : 500;
  --font-weight-semibold               : 600;
  --font-weight-bold                   : 700;
  --body-font-size-m                   : 1rem;
  --body-font-size-s                   : 0.875rem;
  --body-font-size-xs                  : 0.8125rem;
  --body-font-size-l                   : 1.25rem;
  --body-font-size-xl                  : 1.375rem;
  --heading-font-size-xxl              : 2.5rem;
  --heading-font-size-xl               : 2rem;
  --heading-font-size-l                : 1.5rem;
  --heading-font-size-m                : 1.25rem;
  --body-line-height                   : 1.5rem;
  --caption-line-height                : 1.25rem;
  --intro-line-height                  : 1.75rem;
  --subtitle-line-height               : 2rem;
  --nav-height                         : 4rem
}

@media (width >=900px) {
  :root {
    --heading-font-size-xxl: 6rem;
    --heading-font-size-xl : 3.75rem;
    --heading-font-size-l  : 2rem;
    --heading-font-size-m  : 1.5rem;
    --container-padding    : 2rem
  }
}

body {
  background : var(--cloud-gradient-site-bg);
  color      : var(--color-text-primary);
  display    : none;
  font-family: var(--body-font-family);
  font-size  : var(--body-font-size-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--body-line-height);
  margin     : 0;
  min-height : 100vh;
  overflow-x : hidden
}

body.appear {
  display       : flex;
  flex-direction: column
}

main {
  flex: 1 0 auto
}

header {
  min-height: var(--nav-height)
}

.skip-to-main-content-link {
  position        : absolute;
  left            : -9999px;
  z-index         : 999;
  padding         : 0 1em;
  background-color: var(--cloud-black);
  color           : var(--cloud-white);
  opacity         : 0;
}

.skip-to-main-content-link:focus,
.skip-to-main-content-link:focus-visible {
  position       : fixed;
  left           : 50%;
  top            : -4px;
  transform      : translateX(-50%);
  opacity        : 1;
  z-index        : 100000;
  padding        : 0.5rem 2.25rem;
  background-color: var(--cloud-black);
  color          : var(--cloud-white);
  border         : 2px solid var(--cloud-blue);
  border-radius  : var(--radius-md);
  outline        : none;
  white-space    : nowrap;
  text-decoration: none;
}

@media (width >=900px) {
  header {
    height: var(--nav-height)
  }
}

footer .footer,
header .header {
  visibility: hidden
}

footer .footer[data-block-status="loaded"],
header .header[data-block-status="loaded"] {
  visibility: visible
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family  : var(--heading-font-family);
  font-weight  : var(--font-weight-medium);
  line-height  : 1.2;
  margin-bottom: .25em;
  margin-top   : .8em;
  scroll-margin: 2.5rem
}

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

h1,
h2 {
  font-weight: var(--font-weight-medium);
}

h2 {
  font-size: var(--heading-font-size-xl)
}

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

h3,
h4 {
  font-weight: var(--font-weight-medium)
}

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

h5 {
  font-size  : var(--body-font-size-l);
  font-weight: var(--font-weight-medium)
}

h6 {
  font-size  : var(--body-font-size-m);
  font-weight: var(--font-weight-bold)
}

blockquote,
dl,
ol,
p,
pre,
ul {
  margin-bottom: .25em;
  margin-top   : .8em
}

code,
pre {
  font-size: var(--body-font-size-s)
}

pre {
  background-color: var(--color-background-light);
  border-radius   : var(--radius-md);
  overflow-x      : auto;
  padding         : 1rem;
  white-space     : pre
}

main>:is(div, section) {
  margin: 2.5rem 1rem
}

button,
input,
select,
textarea {
  font: inherit
}

a:any-link {
  border               : none;
  color                : var(--color-interactive-link);
  overflow-wrap        : break-word;
  text-underline-offset: 3px
}

a:hover {
  color          : var(--color-interactive-link-hover);
  text-decoration: underline
}

a.button:any-link,
button {
  background     : linear-gradient(90deg, var(--cloud-dark-blue) .01%, var(--cloud-bright-blue));
  border         : var(--border-width) solid transparent;
  border-radius  : var(--radius-button);
  box-sizing     : border-box;
  color          : var(--cloud-white);
  cursor         : pointer;
  display        : inline-block;
  font-family    : var(--body-font-family);
  font-style     : normal;
  font-weight    : var(--font-weight-medium);
  line-height    : 1.5;
  margin         : 0.75rem 0;
  max-width      : 100%;
  overflow       : hidden;
  padding        : 0.75rem 1.5rem;
  text-align     : center;
  text-decoration: none;
  text-overflow  : ellipsis;
  white-space    : nowrap
}

a.button:focus,
a.button:focus-visible,
a.button:hover,
button.button:focus,
button.button:focus-visible,
button.button:hover {
  background: var(--cloud-blue);
  color     : var(--cloud-white);
  cursor    : pointer;
  transform : none
}

button:disabled,
button:disabled:hover {
  background-color: var(--color-border-subtle);
  color           : var(--color-text-disabled);
  cursor          : not-allowed;
  transform       : none
}

a.button.secondary,
button.secondary {
  background: var(--cloud-white);
  border    : var(--border-width) solid var(--cloud-neutral-light-blue-grey-3);
  color     : var(--cloud-text-dark-blue)
}

a.button.secondary:hover,
button.secondary:hover {
  background: linear-gradient(90deg, var(--cloud-dark-blue) .01%, var(--cloud-bright-blue));
  color     : var(--cloud-white);
  transform : none
}

main img {
  height   : auto;
  max-width: 100%;
  width    : auto
}

.icon {
  display: inline-block;
  height : 1.5rem;
  width  : 1.5rem
}

.icon img {
  height: 100%;
  width : 100%
}

/* Global inline icon tokens rendered from [icon] / [icon.svg] in RTE text */
.inline-icon-token {
  display       : inline-block;
  height        : 1.25em;
  margin-left   : .25em;
  vertical-align: -.125em;
  width         : 1.25em
}

.inline-icon-token-link {
  display       : inline-flex;
  vertical-align: baseline
}

.inline-icon-token-link:hover,
.inline-icon-token-link:focus-visible {
  text-decoration: none
}

a:any-link:has(.inline-icon-token) {
  border-bottom : 1px solid transparent;
  text-decoration: none
}

a:any-link:has(.inline-icon-token):hover,
a:any-link:has(.inline-icon-token):focus-visible {
  border-bottom : 1px solid currentcolor;
  text-decoration: none
}

main>.section {
  margin  : 2.5rem 0;
  position: relative;

  /* z-index : 1 */
}

main>.section>div {
  box-sizing: border-box;
  margin    : 0 auto;
  max-width : calc(var(--site-max-width) + var(--site-gutter)*2);
  padding   : 0 var(--site-gutter);
  width     : 100%
}

main>.section:first-of-type {
  margin-top: 0
}

main .section.highlight,
main .section.light {
  background-color: var(--color-background-light);
  margin          : 0;
  padding         : 2.5rem 0
}

main .section[class*="shadow-"]:not(.shadow-none) {
  box-shadow: none;
  z-index   : 0
}

main .section.shadow-none .block {
  box-shadow: none
}

main .section.shadow-dark .block {
  box-shadow: var(--shadow-dark)
}

main .section.shadow-blue-light .block {
  box-shadow: var(--shadow-blue-light)
}

main .section.shadow-blue-expanded .block {
  box-shadow: var(--shadow-blue-expanded)
}

main .section.shadow-blue-light-expand .block {
  box-shadow: var(--shadow-blue-light-expand)
}

main .section.shadow-blue-under-xl .block {
  box-shadow: var(--shadow-blue-under-xl)
}

main .section.shadow-blue-over-xl .block {
  box-shadow: var(--shadow-blue-over-xl)
}

main .section.shadow-map-tag .block {
  box-shadow: var(--shadow-map-tag)
}

main .section.fixed-width-center-aligned > div {
  max-width: var(--container-width-md);
  margin: 0 auto;
}

main .section.fixed-width-center-aligned > div > .block {
  max-width: var(--container-width-md);
  margin-left: auto;
  margin-right: auto;
}

.bg-white {
  background-color: var(--color-background-primary)
}

.bg-light {
  background-color: var(--color-background-light)
}

.bg-light-blue {
  background-color: var(--color-background-light-blue)
}

.bg-primary-blue {
  background-color: var(--color-background-primary-blue);
  color           : var(--color-text-on-primary)
}

.bg-dark-blue {
  background-color: var(--color-background-dark-blue);
  color           : var(--color-text-on-dark)
}

.bg-gradient-light {
  background: var(--color-background-gradient-light)
}

.bg-gradient-primary {
  background: var(--color-background-gradient-primary);
  color     : var(--color-text-on-primary)
}

.bg-site {
  background: var(--cloud-gradient-site-bg)
}

.text-primary {
  color: var(--color-text-primary)
}

.text-secondary {
  color: var(--cloud-neutral-dark-grey-2)
}

.text-white {
  color: var(--cloud-white)
}

.text-link {
  color: var(--color-text-link)
}

.text-dark-blue {
  color: var(--cloud-text-dark-blue)
}

.text-gradient-light {
  background             : var(--cloud-gradient-titles-light);
  background-clip        : text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-dark {
  background             : var(--cloud-gradient-titles-dark);
  background-clip        : text;
  -webkit-text-fill-color: transparent;
}

.intro-text {
  font-size  : var(--body-font-size-l);
  font-weight: var(--font-weight-regular);
  line-height: var(--intro-line-height)
}

.caption-text {
  font-size  : var(--body-font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--caption-line-height)
}

.body-bold {
  font-weight: var(--font-weight-bold)
}

.font-normal,
.font-regular {
  font-weight: var(--font-weight-regular)
}

.font-medium {
  font-weight: var(--font-weight-medium)
}

.font-bold {
  font-weight: var(--font-weight-bold)
}

.container-card {
  background-color: var(--color-container-card-bg);
  border          : var(--border-width) solid var(--color-container-card-border);
  border-radius   : var(--radius-card);
  padding         : var(--space-md)
}

.container-card:hover {
  box-shadow: var(--elevation-2);
  transition: box-shadow .3s ease
}

.container-frame {
  background-color: var(--color-container-frame-bg);
  border          : var(--border-width) solid var(--color-container-frame-border);
  border-radius   : var(--radius-card);
  padding         : var(--space-md)
}

.container-rich {
  background-color: var(--color-container-rich-bg);
  border-radius   : var(--radius-md);
  padding         : var(--space-lg)
}

.container-rich,
.container-rich h1,
.container-rich h2,
.container-rich h3,
.container-rich h4,
.container-rich h5,
.container-rich h6,
.container-rich p {
  color: var(--color-container-rich-text)
}

.container {
  max-width: var(--container-width)
}

.container,
.container-lg {
  margin-left  : auto;
  margin-right : auto;
  padding-left : var(--container-padding);
  padding-right: var(--container-padding);
  width        : 100%
}

.container-lg {
  max-width: var(--container-width-lg)
}

.container-sm {
  max-width: var(--container-width-sm)
}

.container-fluid,
.container-sm {
  margin-left  : auto;
  margin-right : auto;
  padding-left : var(--container-padding);
  padding-right: var(--container-padding);
  width        : 100%
}

.container-no-padding {
  padding-left : 0;
  padding-right: 0
}

.max-w-1280 {
  max-width: 79rem
}

.max-w-1280,
.max-w-1440 {
  margin-left : auto;
  margin-right: auto
}

.max-w-1440 {
  max-width: 90rem
}

.max-w-1024 {
  margin-left : auto;
  margin-right: auto;
  max-width   : 64rem
}

.border,
.border-default {
  border: var(--border-width) solid var(--color-border-default)
}

.border-subtle {
  border: var(--border-width) solid var(--color-border-subtle)
}

.border-strong {
  border: var(--border-width) solid var(--color-border-strong)
}

.border-primary {
  border: var(--border-width) solid var(--color-border-primary)
}

.border-light {
  border: var(--border-width) solid var(--color-border-light)
}

.border-dark {
  border: var(--border-width) solid var(--color-border-dark)
}

.border-top {
  border-top: var(--border-width) solid var(--color-border-default)
}

.border-bottom {
  border-bottom: var(--border-width) solid var(--color-border-default)
}

.border-left {
  border-left: var(--border-width) solid var(--color-border-default)
}

.border-right {
  border-right: var(--border-width) solid var(--color-border-default)
}

.border-bottom-primary {
  border-bottom: var(--border-width) solid var(--color-border-primary)
}

.border-bottom-subtle {
  border-bottom: var(--border-width) solid var(--color-border-subtle)
}

.border-0 {
  border: none
}

.rounded-none {
  border-radius: 0
}

.rounded-sm {
  border-radius: var(--radius-sm)
}

.rounded,
.rounded-md {
  border-radius: var(--radius-md)
}

.rounded-lg {
  border-radius: var(--radius-lg)
}

.rounded-full {
  border-radius: var(--radius-full)
}

.rounded-t {
  border-top-left-radius : var(--radius-md);
  border-top-right-radius: var(--radius-md)
}

.rounded-b {
  border-bottom-right-radius: var(--radius-md)
}

.rounded-b,
.rounded-l {
  border-bottom-left-radius: var(--radius-md)
}

.rounded-l {
  border-top-left-radius: var(--radius-md)
}

.rounded-r {
  border-bottom-right-radius: var(--radius-md);
  border-top-right-radius   : var(--radius-md)
}

.rounded-tl {
  border-top-left-radius: var(--radius-md)
}

.rounded-tr {
  border-top-right-radius: var(--radius-md)
}

.rounded-bl {
  border-bottom-left-radius: var(--radius-md)
}

.rounded-br {
  border-bottom-right-radius: var(--radius-md)
}

.alert {
  border-left  : calc(var(--border-width)*4) solid;
  border-radius: var(--radius-md);
  margin       : var(--space-sm) 0;
  padding      : var(--space-sm) var(--space-md)
}

.alert-error {
  background-color : var(--color-error-bg);
  border-left-color: var(--color-error-border);
  color            : var(--color-error)
}

.alert-success {
  background-color : var(--color-success-bg);
  border-left-color: var(--color-success-border);
  color            : var(--color-success)
}

.alert-warning {
  background-color : var(--color-warning-bg);
  border-left-color: var(--color-warning-border);
  color            : var(--color-warning)
}

.alert-info {
  background-color : var(--color-info-bg);
  border-left-color: var(--color-info-border);
  color            : var(--color-info)
}

.button-gradient {
  background: var(--cloud-gradient-button);
  border    : none;
  color     : var(--color-text-on-primary)
}

.button-gradient:hover {
  transform: none
}

.section-spacing-sm {
  padding: var(--space-section-sm) 0
}

.section-spacing-md {
  padding: var(--space-section-md) 0
}

.section-spacing-lg {
  padding: var(--space-section-lg) 0
}

.section-spacing-xl {
  padding: var(--space-section-xl) 0
}

@media (width >=900px) {
  .section-spacing-xl {
    padding: 8rem 0
  }
}

.m-0 {
  margin: 0
}

.m-xs {
  margin: var(--space-xs)
}

.m-sm {
  margin: var(--space-sm)
}

.m-md {
  margin: var(--space-md)
}

.m-lg {
  margin: var(--space-lg)
}

.m-xl {
  margin: var(--space-xl)
}

.m-2xl {
  margin: var(--space-2xl)
}

.m-3xl {
  margin: var(--space-3xl)
}

.mt-0 {
  margin-top: 0
}

.mt-xs {
  margin-top: var(--space-xs)
}

.mt-sm {
  margin-top: var(--space-sm)
}

.mt-md {
  margin-top: var(--space-md)
}

.mt-lg {
  margin-top: var(--space-lg)
}

.mt-xl {
  margin-top: var(--space-xl)
}

.mt-2xl {
  margin-top: var(--space-2xl)
}

.mt-3xl {
  margin-top: var(--space-3xl)
}

.mb-0 {
  margin-bottom: 0
}

.mb-xs {
  margin-bottom: var(--space-xs)
}

.mb-sm {
  margin-bottom: var(--space-sm)
}

.mb-md {
  margin-bottom: var(--space-md)
}

.mb-lg {
  margin-bottom: var(--space-lg)
}

.mb-xl {
  margin-bottom: var(--space-xl)
}

.mb-2xl {
  margin-bottom: var(--space-2xl)
}

.mb-3xl {
  margin-bottom: var(--space-3xl)
}

.ml-0 {
  margin-left: 0
}

.ml-xs {
  margin-left: var(--space-xs)
}

.ml-sm {
  margin-left: var(--space-sm)
}

.ml-md {
  margin-left: var(--space-md)
}

.ml-lg {
  margin-left: var(--space-lg)
}

.ml-xl {
  margin-left: var(--space-xl)
}

.ml-2xl {
  margin-left: var(--space-2xl)
}

.mr-0 {
  margin-right: 0
}

.mr-xs {
  margin-right: var(--space-xs)
}

.mr-sm {
  margin-right: var(--space-sm)
}

.mr-md {
  margin-right: var(--space-md)
}

.mr-lg {
  margin-right: var(--space-lg)
}

.mr-xl {
  margin-right: var(--space-xl)
}

.mr-2xl {
  margin-right: var(--space-2xl)
}

.mx-0 {
  margin-left : 0;
  margin-right: 0
}

.mx-xs {
  margin-left : var(--space-xs);
  margin-right: var(--space-xs)
}

.mx-sm {
  margin-left : var(--space-sm);
  margin-right: var(--space-sm)
}

.mx-md {
  margin-left : var(--space-md);
  margin-right: var(--space-md)
}

.mx-lg {
  margin-left : var(--space-lg);
  margin-right: var(--space-lg)
}

.mx-xl {
  margin-left : var(--space-xl);
  margin-right: var(--space-xl)
}

.mx-auto {
  margin-left : auto;
  margin-right: auto
}

.my-0 {
  margin-bottom: 0;
  margin-top   : 0
}

.my-xs {
  margin-bottom: var(--space-xs);
  margin-top   : var(--space-xs)
}

.my-sm {
  margin-bottom: var(--space-sm);
  margin-top   : var(--space-sm)
}

.my-md {
  margin-bottom: var(--space-md);
  margin-top   : var(--space-md)
}

.my-lg {
  margin-bottom: var(--space-lg);
  margin-top   : var(--space-lg)
}

.my-xl {
  margin-bottom: var(--space-xl);
  margin-top   : var(--space-xl)
}

.p-0 {
  padding: 0
}

.p-xs {
  padding: var(--space-xs)
}

.p-sm {
  padding: var(--space-sm)
}

.p-md {
  padding: var(--space-md)
}

.p-lg {
  padding: var(--space-lg)
}

.p-xl {
  padding: var(--space-xl)
}

.p-2xl {
  padding: var(--space-2xl)
}

.p-3xl {
  padding: var(--space-3xl)
}

.pt-0 {
  padding-top: 0
}

.pt-xs {
  padding-top: var(--space-xs)
}

.pt-sm {
  padding-top: var(--space-sm)
}

.pt-md {
  padding-top: var(--space-md)
}

.pt-lg {
  padding-top: var(--space-lg)
}

.pt-xl {
  padding-top: var(--space-xl)
}

.pt-2xl {
  padding-top: var(--space-2xl)
}

.pt-3xl {
  padding-top: var(--space-3xl)
}

.pb-0 {
  padding-bottom: 0
}

.pb-xs {
  padding-bottom: var(--space-xs)
}

.pb-sm {
  padding-bottom: var(--space-sm)
}

.pb-md {
  padding-bottom: var(--space-md)
}

.pb-lg {
  padding-bottom: var(--space-lg)
}

.pb-xl {
  padding-bottom: var(--space-xl)
}

.pb-2xl {
  padding-bottom: var(--space-2xl)
}

.pb-3xl {
  padding-bottom: var(--space-3xl)
}

.pl-0 {
  padding-left: 0
}

.pl-xs {
  padding-left: var(--space-xs)
}

.pl-sm {
  padding-left: var(--space-sm)
}

.pl-md {
  padding-left: var(--space-md)
}

.pl-lg {
  padding-left: var(--space-lg)
}

.pl-xl {
  padding-left: var(--space-xl)
}

.pl-2xl {
  padding-left: var(--space-2xl)
}

.pr-0 {
  padding-right: 0
}

.pr-xs {
  padding-right: var(--space-xs)
}

.pr-sm {
  padding-right: var(--space-sm)
}

.pr-md {
  padding-right: var(--space-md)
}

.pr-lg {
  padding-right: var(--space-lg)
}

.pr-xl {
  padding-right: var(--space-xl)
}

.pr-2xl {
  padding-right: var(--space-2xl)
}

.px-0 {
  padding-left : 0;
  padding-right: 0
}

.px-xs {
  padding-left : var(--space-xs);
  padding-right: var(--space-xs)
}

.px-sm {
  padding-left : var(--space-sm);
  padding-right: var(--space-sm)
}

.px-md {
  padding-left : var(--space-md);
  padding-right: var(--space-md)
}

.px-lg {
  padding-left : var(--space-lg);
  padding-right: var(--space-lg)
}

.px-xl {
  padding-left : var(--space-xl);
  padding-right: var(--space-xl)
}

.px-2xl {
  padding-left : var(--space-2xl);
  padding-right: var(--space-2xl)
}

.py-0 {
  padding-bottom: 0;
  padding-top   : 0
}

.py-xs {
  padding-bottom: var(--space-xs);
  padding-top   : var(--space-xs)
}

.py-sm {
  padding-bottom: var(--space-sm);
  padding-top   : var(--space-sm)
}

.py-md {
  padding-bottom: var(--space-md);
  padding-top   : var(--space-md)
}

.py-lg {
  padding-bottom: var(--space-lg);
  padding-top   : var(--space-lg)
}

.py-xl {
  padding-bottom: var(--space-xl);
  padding-top   : var(--space-xl)
}

.py-2xl {
  padding-bottom: var(--space-2xl);
  padding-top   : var(--space-2xl)
}

.py-3xl {
  padding-bottom: var(--space-3xl);
  padding-top   : var(--space-3xl)
}

/* Mobile-only padding (applies only on tablet and below) */
@media (width <= 1024px) {
  .mob-pt-0 { padding-top: 0 !important }
  .mob-pt-20 { padding-top: 1.25rem !important }
  .mob-pt-30 { padding-top: 1.875rem !important }
  .mob-pt-40 { padding-top: 2.5rem !important }

  .mob-pb-0 { padding-bottom: 0 !important }
  .mob-pb-20 { padding-bottom: 1.25rem !important }
  .mob-pb-30 { padding-bottom: 1.875rem !important }
  .mob-pb-40 { padding-bottom: 2.5rem !important }
}

.gap-xs {
  gap: var(--space-xs)
}

.gap-sm {
  gap: var(--space-sm)
}

.gap-md {
  gap: var(--space-md)
}

.gap-lg {
  gap: var(--space-lg)
}

.gap-xl {
  gap: var(--space-xl)
}

.gap-x-xs {
  column-gap: var(--space-xs)
}

.gap-x-sm {
  column-gap: var(--space-sm)
}

.gap-x-md {
  column-gap: var(--space-md)
}

.gap-x-lg {
  column-gap: var(--space-lg)
}

.gap-y-xs {
  row-gap: var(--space-xs)
}

.gap-y-sm {
  row-gap: var(--space-sm)
}

.gap-y-md {
  row-gap: var(--space-md)
}

.gap-y-lg {
  row-gap: var(--space-lg)
}

.shadow-none {
  box-shadow: none
}

.shadow,
.shadow-dark {
  box-shadow: var(--shadow-dark)
}

.shadow-blue,
.shadow-blue-light {
  box-shadow: var(--shadow-blue-light)
}

.shadow-blue-expanded {
  box-shadow: var(--shadow-blue-expanded)
}

.shadow-blue-light-expand {
  box-shadow: var(--shadow-blue-light-expand)
}

.shadow-blue-under-xl {
  box-shadow: var(--shadow-blue-under-xl)
}

.shadow-blue-over-xl {
  box-shadow: var(--shadow-blue-over-xl)
}

.shadow-map-tag {
  box-shadow: var(--shadow-map-tag)
}

.elevation-1 {
  box-shadow: var(--elevation-1)
}

.elevation-2 {
  box-shadow: var(--elevation-2)
}

.elevation-3 {
  box-shadow: var(--elevation-3)
}

.elevation-blue-subtle {
  box-shadow: var(--elevation-blue-subtle)
}

.elevation-blue-strong {
  box-shadow: var(--elevation-blue-strong)
}

.elevation-blue-xl {
  box-shadow: var(--elevation-blue-xl)
}

.hover-elevation:hover {
  box-shadow: var(--elevation-2);
  transition: box-shadow .3s ease
}

.hover-elevation-blue:hover {
  box-shadow: var(--elevation-blue-strong);
  transition: box-shadow .3s ease
}

.icon-container {
  align-items    : center;
  background     : var(--cloud-gradient-button);
  border-radius  : var(--radius-16);
  display        : inline-flex;
  flex-shrink    : 0;
  height         : 3.5rem;
  justify-content: center;
  width          : 3.5rem
}

.icon-container img,
.icon-container svg {
  color : var(--cloud-white);
  fill  : currentcolor;
  height: 1.75rem;
  width : 1.75rem
}

.icon-container-md {
  align-items    : center;
  background     : var(--cloud-gradient-button);
  border-radius  : var(--radius-16);
  display        : inline-flex;
  flex-shrink    : 0;
  height         : 3rem;
  justify-content: center;
  width          : 3rem
}

.icon-container-md img,
.icon-container-md svg {
  color : var(--cloud-white);
  fill  : currentcolor;
  height: 1.5rem;
  width : 1.5rem
}

.icon-container-sm {
  align-items    : center;
  background     : var(--cloud-gradient-button);
  border-radius  : var(--radius-8);
  display        : inline-flex;
  flex-shrink    : 0;
  height         : 2.5rem;
  justify-content: center;
  width          : 2.5rem
}

.icon-container-sm img,
.icon-container-sm svg {
  color : var(--cloud-white);
  fill  : currentcolor;
  height: 1.25rem;
  width : 1.25rem
}

.icon,
.icon-md {
  align-items    : center;
  display        : inline-flex;
  flex-shrink    : 0;
  justify-content: center
}

.icon img,
.icon svg,
.icon-md img,
.icon-md svg {
  color : var(--cloud-neutral-dark-grey-2);
  fill  : currentcolor;
  height: 2rem;
  width : 2rem
}

.icon-sm {
  align-items    : center;
  display        : inline-flex;
  flex-shrink    : 0;
  justify-content: center
}

.icon-sm img,
.icon-sm svg {
  color : var(--cloud-neutral-dark-grey-2);
  fill  : currentcolor;
  height: 1rem;
  width : 1rem
}

.icon-lg {
  align-items    : center;
  display        : inline-flex;
  flex-shrink    : 0;
  justify-content: center
}

.icon-lg img,
.icon-lg svg {
  color : var(--cloud-neutral-dark-grey-2);
  fill  : currentcolor;
  height: 2.5rem;
  width : 2.5rem
}

.icon-white img,
.icon-white svg {
  color: var(--cloud-white);
  fill : currentcolor
}

.icon-primary img,
.icon-primary svg {
  color: var(--cloud-blue);
  fill : currentcolor
}

.icon-secondary img,
.icon-secondary svg {
  color: var(--cloud-sec-med-blue-1);
  fill : currentcolor
}

.icon-dark img,
.icon-dark svg {
  color: var(--cloud-dark-blue);
  fill : currentcolor
}

.icon-neutral img,
.icon-neutral svg {
  color: var(--cloud-neutral-dark-grey-2);
  fill : currentcolor
}

.icon-light img,
.icon-light svg {
  color: var(--cloud-neutral-light-blue-grey-3);
  fill : currentcolor
}

button .icon img,
button .icon svg {
  height: 1.25rem;
  width : 1.25rem
}

a.button .icon img,
a.button .icon svg {
  height: 1.25rem;
  width : 1.25rem
}

@media (width < 900px) {
  :root {
    --site-gutter: 1rem
  }
}

#truste-consent-buttons button#truste-show-consent {
  background: var(--cloud-white)
}

#truste-consent-track {
  border-bottom: 10px solid !important;
}