@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-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-med-grey : #818181; --cloud-neutral-light-grey : #ccc; --cloud-neutral-light-grey-2 : #f3f3f3; --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-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 : 4px; --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 : 90px; --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 : 4px; --radius-8 : 8px; --radius-16 : 16px; --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); --container-width : 80rem; --container-width-lg : 90rem; --container-width-sm : 64rem; --site-max-width : 1380px; --site-gutter : 30px; --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; --body-font-size-m : 16px; --body-font-size-s : 14px; --body-font-size-l : 20px; --heading-font-size-xxl : 40px; --heading-font-size-xl : 32px; --heading-font-size-l : 24px; --heading-font-size-m : 20px; --body-line-height : 24px; --caption-line-height : 20px; --intro-line-height : 28px; --subtitle-line-height : 32px; --nav-height : 64px } @font-face { font-family: roboto-condensed-fallback; size-adjust: 88.82%; src : local("Arial") } @font-face { font-family: roboto-fallback; size-adjust: 99.529%; src : local("Arial") } @media (width >=900px) { :root { --body-font-size-m : 16px; --body-font-size-s : 14px; --body-font-size-l : 20px; --heading-font-size-xxl: 96px; --heading-font-size-xl : 60px; --heading-font-size-l : 32px; --heading-font-size-m : 24px; --body-line-height : 24px; --caption-line-height : 20px; --intro-line-height : 28px; --subtitle-line-height : 32px; --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: 400; 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: #000; color : #fff; 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 : 8px 36px; background-color: #000; color : #fff; border : 2px solid var(--cloud-blue); border-radius : 8px; 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 : 500; line-height : 1.2; margin-bottom: .25em; margin-top : .8em; scroll-margin: 40px } h1 { font-size: var(--heading-font-size-xxl) } h1, h2 { font-weight: 500 } h2 { font-size: var(--heading-font-size-xl) } h3 { font-size: var(--heading-font-size-l) } h3, h4 { font-weight: 500 } h4 { font-size: var(--heading-font-size-m) } h5 { font-size : var(--body-font-size-l); font-weight: 500 } h6 { font-size : var(--body-font-size-m); font-weight: 700 } 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 : 16px; white-space : pre } main>:is(div, section) { margin: 40px 16px } button, input, select, textarea { font: inherit } a:any-link { border : none; color : var(--color-interactive-link); overflow-wrap : break-word; text-decoration : none; text-underline-offset: 3px } a:hover { color : var(--color-interactive-link-hover); text-decoration: underline } a.button:any-link, button { background : linear-gradient(90deg, #161d70 .01%, #155dfc); 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 : 500; line-height : 1.5; margin : 12px 0; max-width : 100%; overflow : hidden; padding : 12px 24px; 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: #fff; border : var(--border-width) solid #cdd1da; color : #101828 } a.button.secondary:hover, button.secondary:hover { background: linear-gradient(90deg, #161d70 .01%, #155dfc); color : var(--cloud-white); transform : none } main img { height : auto; max-width: 100%; width : auto } .icon { display: inline-block; height : 24px; width : 24px } .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 : 40px 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 : 40px 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) } .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: 400; line-height: var(--intro-line-height) } .caption-text { font-size : var(--body-font-size-s); font-weight: 400; line-height: var(--caption-line-height) } .body-bold { font-weight: 700 } .font-normal, .font-regular { font-weight: 400 } .font-medium { font-weight: 500 } .font-bold { font-weight: 700 } .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: 128px 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) } .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 : 56px; justify-content: center; width : 56px } .icon-container img, .icon-container svg { color : var(--cloud-white); fill : currentcolor; height: 28px; width : 28px } .icon-container-md { align-items : center; background : var(--cloud-gradient-button); border-radius : var(--radius-16); display : inline-flex; flex-shrink : 0; height : 48px; justify-content: center; width : 48px } .icon-container-md img, .icon-container-md svg { color : var(--cloud-white); fill : currentcolor; height: 24px; width : 24px } .icon-container-sm { align-items : center; background : var(--cloud-gradient-button); border-radius : var(--radius-8); display : inline-flex; flex-shrink : 0; height : 40px; justify-content: center; width : 40px } .icon-container-sm img, .icon-container-sm svg { color : var(--cloud-white); fill : currentcolor; height: 20px; width : 20px } .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: 32px; width : 32px } .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: 16px; width : 16px } .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: 40px; width : 40px } .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-grey-3); fill : currentcolor } button .icon img, button .icon svg { height: 20px; width : 20px } a.button .icon img, a.button .icon svg { height: 20px; width : 20px } @media (width < 900px) { :root { --site-gutter: 16px } } #truste-consent-buttons button#truste-show-consent { background: #fff } #truste-consent-track { border-bottom: 10px solid !important; }