/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
	--border-radius-none: 0rem; /** 0px — no border radius */
	--border-radius-xs: 0.125rem; /** 2px — extra small */
	--border-radius-s: 0.25rem; /** 4px — small */
	--border-radius-m: 0.5rem; /** 8px — medium */
	--border-radius-l: 0.75rem; /** 12px — large */
	--border-radius-xl: 6.25rem; /** 100px — extra large */
	--border-radius-rounded: 50%; /** 50% — fully rounded / pill */
	--border-width-none: 0px; /** 0px — no stroke */
	--border-width-s: 1px; /** 1px — small stroke */
	--border-width-m: 2px; /** 2px — medium stroke */
	--border-width-l: 3px; /** 3px — large stroke */
	--breakpoint-desktop: 120rem; /** 1920px — desktop/monitor, 12 columns */
	--breakpoint-laptop: 90rem; /** 1440px — laptop, default breakpoint, 12 columns */
	--breakpoint-tablet-lg: 80rem; /** 1280px — large tablet, 12 columns */
	--breakpoint-tablet: 48rem; /** 768px — tablet, 8 columns */
	--breakpoint-phone: 22.5rem; /** 360px — phone, 4 columns */
	--color-pure-white: #ffffff;
	--color-pure-white-80: rgba(255, 255, 255, 0.8);
	--color-pure-white-50: rgba(255, 255, 255, 0.5);
	--color-pure-white-10: rgba(255, 255, 255, 0.1);
	--color-pure-white-90: rgba(255, 255, 255, 0.9);
	--color-pure-white-70: rgba(255, 255, 255, 0.7);
	--color-pure-black: #000000;
	--color-pure-black-80: rgba(0, 0, 0, 0.8);
	--color-pure-black-50: rgba(0, 0, 0, 0.5);
	--color-pure-black-5: rgba(0, 0, 0, 0.05);
	--color-red-100: #fdf2f3;
	--color-red-200: #f0abb4;
	--color-red-300: #e9808e;
	--color-red-400: #e15669;
	--color-red-500: #da2c43;
	--color-red-600: #ae2336;
	--color-red-700: #831a28;
	--color-red-800: #57121b;
	--color-red-900: #2c090d;
	--color-orange-100: #fedfd7;
	--color-orange-200: #fdbeaf;
	--color-orange-300: #fc9e88;
	--color-orange-400: #fb7d60;
	--color-orange-500: #fa5d38;
	--color-orange-600: #c84a2d;
	--color-orange-700: #963822;
	--color-orange-800: #642516;
	--color-orange-900: #32130b;
	--color-coral-500: #ee5a6d;
	--color-beige-100: #faf8f7;
	--color-beige-200: #f7f5f2;
	--color-beige-300: #efece6;
	--color-neutral-50: #fafafa;
	--color-neutral-100: #f2f2f2;
	--color-neutral-150: #efefef;
	--color-neutral-200: #e5e5e5;
	--color-neutral-250: #d9d9d9;
	--color-neutral-300: #cccccc;
	--color-neutral-350: #b2b2b2;
	--color-neutral-400: #a6a6a6;
	--color-neutral-450: #999999;
	--color-neutral-500: #8c8c8c;
	--color-neutral-550: #808080;
	--color-neutral-600: #737373;
	--color-neutral-650: #666666;
	--color-neutral-700: #565656;
	--color-neutral-750: #4d4d4d;
	--color-neutral-800: #404040;
	--color-neutral-850: #333333;
	--color-neutral-900: #1a1a1a;
	--color-neutral-950: #0d0d0d;
	--color-blue-500: #34a0d5;
	--color-error-red: #e30000;
	--color-error-red-tint: #fce6e6;
	--color-text-heading: #000000;
	--color-text-body: #565656;
	--color-text-inverse: #ffffff;
	--color-text-faded: #737373;
	--color-text-black: #000000;
	--color-text-feature-a: #da2c43;
	--color-text-feature-b: #fa5d38;
	--color-section-header-tagline: #fa5d38;
	--color-section-header-heading: #000000;
	--color-section-header-description: #565656;
	--color-section-bg-white: #ffffff;
	--color-section-bg-beige: #faf8f7;
	--color-card-bg-white: #ffffff;
	--color-card-bg-beige: #faf8f7;
	--color-selection-accent-orange: #fa5d38;
	--color-selection-accent-red: #da2c43;
	--color-links-text: #da2c43;
	--color-links-icon: #da2c43;
	--color-links-hover: #ae2336;
	--color-links-pressed: #831a28;
	--color-links-disabled: #a6a6a6;
	--color-solid-button-background: #da2c43;
	--color-solid-button-background-disabled: #cccccc;
	--color-solid-button-text: #ffffff;
	--color-solid-button-icon: #da2c43;
	--color-solid-button-icon-hover: #ffffff;
	--color-solid-button-icon-disabled: #cccccc;
	--color-solid-button-icon-wrapper: #ffffff;
	--color-solid-button-icon-wrapper-hover: #333333;
	--color-solid-button-icon-wrapper-pressed: #000000;
	--color-solid-button-icon-wrapper-disabled: #ffffff;
	--color-outline-button-icon: #da2c43;
	--color-outline-button-text: #da2c43;
	--color-outline-button-stroke: #da2c43;
	--color-outline-button-icon-hover: #ffffff;
	--color-outline-button-text-hover: #ffffff;
	--color-outline-button-background-hover: #333333;
	--color-outline-button-background-pressed: #000000;
	--color-outline-button-disabled: #a6a6a6;
	--color-ghost-button-text: #da2c43;
	--color-ghost-button-icon: #da2c43;
	--color-ghost-button-hover: #ae2336;
	--color-ghost-button-pressed: #831a28;
	--color-ghost-button-disabled: #a6a6a6;
	--color-solid-inverse-button-background: #ffffff;
	--color-solid-inverse-button-background-disabled: #cccccc;
	--color-solid-inverse-button-text: #000000;
	--color-solid-inverse-button-icon: #ffffff;
	--color-solid-inverse-button-icon-disabled: #cccccc;
	--color-solid-inverse-button-icon-wrapper: #000000;
	--color-solid-inverse-button-icon-wrapper-hover: #da2c43;
	--color-solid-inverse-button-icon-wrapper-pressed: #ae2336;
	--color-solid-inverse-button-icon-wrapper-disabled: #a6a6a6;
	--color-outline-inverse-button-text: #ffffff;
	--color-outline-inverse-button-icon: #ffffff;
	--color-outline-inverse-button-stroke: #ffffff;
	--color-outline-inverse-button-text-hover: #000000;
	--color-outline-inverse-button-icon-hover: #000000;
	--color-outline-inverse-button-background-hover: #ffffff;
	--color-outline-inverse-button-background-pressed: #efefef;
	--color-outline-inverse-button-disabled: #a6a6a6;
	--color-stroke-orange: #fa5d38;
	--color-stroke-red: #da2c43;
	--color-stroke-grey: #efefef;
	--color-stroke-dark-grey: #cccccc;
	--color-elements-orange: #fa5d38;
	--color-elements-red: #da2c43;
	--color-elements-grey: #efefef;
	--color-elements-grey-dark: #565656;
	--color-icons-orange: #fa5d38;
	--color-icons-red: #da2c43;
	--color-icons-black: #000000;
	--color-icons-grey: #565656;
	--color-icons-white: #ffffff;
	--dimension-aspect-ratio-full: auto; /** Full Width */
	--dimension-aspect-ratio-16-9: 16/9; /** 16:9 */
	--dimension-aspect-ratio-4-3: 4/3; /** 4:3 */
	--dimension-aspect-ratio-7-6: 7/6; /** 7:6 */
	--dimension-height-cta: 28.125rem; /** 450px — CTA banner height in the side-by-side layout */
	--dimension-icon-3xs: 0.75rem;
	--dimension-icon-2xs: 1rem;
	--dimension-icon-xs: 1.25rem;
	--dimension-icon-lg: 1.5rem;
	--dimension-icon-xl: 3.4375rem;
	--dimension-icon-wrapper-s: 1.25rem;
	--dimension-icon-wrapper-m: 1.75rem;
	--dimension-width-list-column: 23.75rem; /** 380px — fixed sidebar/list column width in split layouts */
	--dimension-width-tab-min: 12.5rem; /** 200px — minimum tab width in a horizontal/stacked scroller */
	--gradient-100: linear-gradient(
		180deg,
		#ffffff 0%,
		#faf8f7 100%
	); /** Gradient 100 — white to beige, top to bottom */
	--shadow-card-1: 0px 14px 24px -5px rgba(0, 0, 0, 0.05); /** Card Shadow 1 — subtle elevation for cards */
	--shadow-card-2: 0px 8px 14px -5px rgba(0, 0, 0, 0.05); /** Card Shadow 2 — smaller elevation for cards at tablet/phone breakpoints */
	--spacing-0: 0rem; /** 0px */
	--spacing-2: 0.125rem; /** 2px */
	--spacing-4: 0.25rem; /** 4px */
	--spacing-8: 0.5rem; /** 8px */
	--spacing-12: 0.75rem; /** 12px */
	--spacing-16: 1rem; /** 16px */
	--spacing-20: 1.25rem; /** 20px */
	--spacing-24: 1.5rem; /** 24px */
	--spacing-28: 1.75rem; /** 28px */
	--spacing-32: 2rem; /** 32px */
	--spacing-36: 2.25rem; /** 36px */
	--spacing-40: 2.5rem; /** 40px */
	--spacing-44: 2.75rem; /** 44px */
	--spacing-48: 3rem; /** 48px */
	--spacing-52: 3.25rem; /** 52px */
	--spacing-56: 3.5rem; /** 56px */
	--spacing-60: 3.75rem; /** 60px */
	--spacing-64: 4rem; /** 64px */
	--spacing-72: 4.5rem; /** 72px */
	--spacing-80: 5rem; /** 80px */
	--spacing-88: 5.5rem; /** 88px */
	--spacing-96: 6rem; /** 96px */
	--spacing-104: 6.5rem; /** 104px */
	--spacing-112: 7rem; /** 112px */
	--spacing-120: 7.5rem; /** 120px */
	--spacing-128: 8rem; /** 128px */
	--spacing-136: 8.5rem; /** 136px */
	--spacing-144: 9rem; /** 144px */
	--spacing-152: 9.5rem; /** 152px */
	--spacing-160: 10rem; /** 160px */
	--spacing-none: 0rem;
	--spacing-2xs: 0.125rem;
	--spacing-xs: 0.25rem;
	--spacing-s: 0.5rem;
	--spacing-m: 0.75rem;
	--spacing-l: 1rem;
	--spacing-xl: 1.25rem;
	--spacing-2xl: 1.5rem;
	--spacing-3xl: 1.75rem;
	--spacing-4xl: 2rem;
	--spacing-5xl: 2.25rem;
	--spacing-6xl: 2.5rem;
	--spacing-7xl: 2.75rem;
	--spacing-8xl: 3rem;
	--spacing-9xl: 3.25rem;
	--spacing-10xl: 3.5rem;
	--spacing-11xl: 3.75rem;
	--spacing-12xl: 4rem;
	--spacing-13xl: 4.5rem;
	--spacing-14xl: 5rem;
	--spacing-15xl: 5.5rem;
	--spacing-16xl: 6rem;
	--spacing-17xl: 6.5rem;
	--spacing-18xl: 7rem;
	--spacing-19xl: 7.5rem;
	--spacing-20xl: 8rem;
	--spacing-21xl: 8.5rem;
	--spacing-22xl: 9rem;
	--spacing-23xl: 9.5rem;
	--spacing-24xl: 10rem;
	--typography-font-family-google-sans-flex: "Google Sans Flex", sans-serif; /** Primary heading and UI text font */
	--typography-font-size-2xs: 0.625rem; /** 10px */
	--typography-font-size-xs: 0.75rem; /** 12px */
	--typography-font-size-s: 0.875rem; /** 14px */
	--typography-font-size-m: 1rem; /** 16px */
	--typography-font-size-l: 1.125rem; /** 18px */
	--typography-font-size-xl: 1.25rem; /** 20px */
	--typography-font-size-2xl: 1.375rem; /** 22px */
	--typography-font-size-3xl: 1.75rem; /** 28px */
	--typography-font-size-4xl: 2rem; /** 32px */
	--typography-font-size-5xl: 2.5rem; /** 40px */
	--typography-font-size-6xl: 3rem; /** 48px */
	--typography-font-size-7xl: 3.5rem; /** 56px */
	--typography-font-size-8xl: 6rem; /** 96px */
	--typography-font-weight-regular: 400; /** Regular weight */
	--typography-font-weight-medium: 500; /** Medium weight */
	--typography-font-weight-semibold: 600; /** Semibold weight */
	--typography-line-height-tight: 1; /** 100% — for dense/compact layouts, no extra leading */
	--typography-line-height-heading: 1.2; /** 120% — for all heading styles, compact and impactful */
	--typography-line-height-text: 1.4; /** 140% — for text/body styles */
	--typography-line-height-button: 1.3; /** 130% — for size-s button labels (12/16); size-m reuses text (1.4) */
	--typography-line-height-body: 1.5; /** 150% — for long-form body copy */
}

/* ── Responsive typography ──────────────────────────────────────────── */
:root {
	--typography-heading-8xl: 6rem;
	--typography-heading-7xl: 2.5rem;
	--typography-heading-6xl: 3rem;
	--typography-heading-5xl: 1.75rem;
	--typography-heading-4xl: 2rem;
	--typography-heading-3xl: 1.75rem;
	--typography-heading-2xl: 0.875rem;
	--typography-heading-xl: 1.25rem;
	--typography-heading-l: 1rem;
	--typography-heading-m: 0.875rem;
	--typography-heading-s: 0.875rem;
	--typography-heading-xs: 0.75rem;
	--typography-heading-2xs: 0.625rem;
	--typography-text-8xl: 6rem;
	--typography-text-7xl: 3.5rem;
	--typography-text-6xl: 3rem;
	--typography-text-5xl: 2.5rem;
	--typography-text-4xl: 2rem;
	--typography-text-3xl: 1.25rem;
	--typography-text-2xl: 1.375rem;
	--typography-text-xl: 0.875rem;
	--typography-text-l: 0.875rem;
	--typography-text-m: 0.875rem;
	--typography-text-s: 0.75rem;
	--typography-text-xs: 0.75rem;
	--typography-text-2xs: 0.625rem;
}

@media (min-width: 48rem) {
	:root {
		--typography-heading-l: 0.875rem;
		--typography-heading-m: 1rem;
		--typography-text-m: 0.75rem;
		--typography-text-s: 0.875rem;
	}
}

@media (min-width: 80rem) {
	:root {
		--typography-heading-7xl: 3rem;
		--typography-heading-5xl: 2rem;
		--typography-heading-2xl: 1.25rem;
		--typography-heading-l: 1.125rem;
		--typography-text-3xl: 1.375rem;
		--typography-text-xl: 1.125rem;
		--typography-text-l: 1.125rem;
		--typography-text-m: 1rem;
	}
}

@media (min-width: 90rem) {
	:root {
		--typography-heading-7xl: 3.5rem;
		--typography-heading-5xl: 2.5rem;
		--typography-heading-2xl: 1.375rem;
		--typography-text-3xl: 1.75rem;
		--typography-text-xl: 1.25rem;
	}
}

/* ── Responsive layout spacing ──────────────────────────────────────── */
:root {
	--layout-section-padding-none: 0rem;
	--layout-section-padding-s: calc(
		2rem + clamp(0rem, (100vw - 22.5rem) * 0.039216, 1rem) +
			clamp(0rem, (100vw - 48rem) * 0.03125, 1rem) +
			clamp(0rem, (100vw - 80rem) * 0.1, 1rem)
	);
	--layout-section-padding-m: calc(
		1.25rem + clamp(0rem, (100vw - 22.5rem) * 0.068627, 1.75rem) +
			clamp(0rem, (100vw - 48rem) * 0.09375, 3rem) +
			clamp(0rem, (100vw - 80rem) * 0.2, 2rem)
	);
	--layout-section-padding-l: calc(
		4rem + clamp(0rem, (100vw - 22.5rem) * 0.039216, 1rem) +
			clamp(0rem, (100vw - 48rem) * 0.09375, 3rem) +
			clamp(0rem, (100vw - 80rem) * 0.2, 2rem)
	);
	--layout-container-s: 90rem;
	--layout-card-width-case-study: calc(
		18.75rem + clamp(0rem, (100vw - 22.5rem) * 0.294118, 7.5rem) +
			clamp(0rem, (100vw - 48rem) * 0.707031, 22.625rem)
	);
	--layout-slide-gap-case-study: calc(
		0.75rem + clamp(0rem, (100vw - 22.5rem) * 0.013043, 0.75rem)
	);
	--layout-element-width-s: calc(
		20rem + clamp(0rem, (100vw - 22.5rem) * 1.127451, 28.75rem)
	);
	--layout-element-width-m: calc(
		20rem + clamp(0rem, (100vw - 22.5rem) * 1.622549, 41.375rem) +
			clamp(0rem, (100vw - 48rem) * 0.104167, 7.5rem)
	);
	--layout-element-width-l: calc(
		20rem + clamp(0rem, (100vw - 22.5rem) * 2.117647, 54rem) +
			clamp(0rem, (100vw - 48rem) * 0.171875, 12.375rem)
	);
}

/**
 * Do not edit directly, this file was auto-generated.
 */

[data-theme="dark"] {
	--color-section-header-tagline: #ffffff;
	--color-section-header-heading: #ffffff;
	--color-section-header-description: rgba(255, 255, 255, 0.8);
}
