/* Шрифты MR — те же файлы, что на city.mr-group.ru:
   заголовки Grtsk Giga Medium, основной текст Suisse Intl Regular/Medium */
@font-face {
	font-family: "Grtsk Giga";
	src: url("../fonts/GrtskGiga-Medium.woff2") format("woff2"),
	     url("../fonts/GrtskGiga-Medium.woff") format("woff");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Suisse Intl";
	src: url("../fonts/SuisseIntl-Regular.woff2") format("woff2"),
	     url("../fonts/SuisseIntl-Regular.woff") format("woff");
	font-weight: 100 450;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Suisse Intl";
	src: url("../fonts/SuisseIntl-Medium.woff2") format("woff2"),
	     url("../fonts/SuisseIntl-Medium.woff") format("woff");
	font-weight: 451 900;
	font-style: normal;
	font-display: swap;
}
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-duration: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
      --tw-content: "";
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1440px;
    --color-primary-50: #eff3ff;
    --color-primary-100: #dae2ff;
    --color-primary-200: #becdff;
    --color-primary-300: #91aeff;
    --color-primary-400: #5e84fc;
    --color-primary-500: #3758f9;
    --color-primary-600: #2237ee;
    --color-primary-700: #1a25db;
    --color-primary-800: #1c20b1;
    --color-primary-900: #1c228c;
    --color-primary-950: #161755;
    --color-neutral: white;
    --color-neutral-100: oklch(96.7% .003 264.542);
    --color-neutral-200: oklch(92.8% .006 264.531);
    --color-neutral-300: oklch(87.2% .01 258.338);
    --color-neutral-400: oklch(70.7% .022 261.325);
    --color-neutral-500: oklch(55.1% .027 264.364);
    --color-neutral-700: oklch(37.3% .034 259.733);
    --color-neutral-800: oklch(27.8% .033 256.848);
    --color-neutral-900: oklch(21% .034 264.665);
    --color-background: white;
    --divider-color: #00000014;
    --font-primary: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-secondary: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --radius-sm: .25rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    --overlay-dark: #00000080;
    --overlay-gradient: linear-gradient(to top, #0009, transparent 70%);
    --transition-duration-fast: .2s;
    --h1-color: var(--color-neutral-800);
    --h1-font-weight: 700;
    --h1-font-family: var(--font-primary);
    --h1-font-size: 3rem;
    --h1-line-height: 1.15;
    --h1-letter-spacing: -.01em;
    --h1-text-transform: none;
    --h1-text-align: inherit;
    --h2-color: var(--color-neutral-800);
    --h2-font-weight: 700;
    --h2-font-family: var(--font-primary);
    --h2-font-size: 2.5rem;
    --h2-line-height: 1.15;
    --h2-letter-spacing: -.01em;
    --h2-text-transform: none;
    --h2-text-align: inherit;
    --h3-color: var(--color-neutral-800);
    --h3-font-weight: 600;
    --h3-font-family: var(--font-primary);
    --h3-font-size: 2rem;
    --h3-line-height: 1.2;
    --h3-letter-spacing: 0;
    --h3-text-transform: none;
    --h3-text-align: inherit;
    --h4-color: var(--color-neutral-800);
    --h4-font-weight: 600;
    --h4-font-family: var(--font-primary);
    --h4-font-size: 1.5rem;
    --h4-line-height: 1.25;
    --h4-letter-spacing: 0;
    --h4-text-transform: none;
    --h4-text-align: inherit;
    --h5-color: var(--color-neutral-800);
    --h5-font-weight: 600;
    --h5-font-family: var(--font-primary);
    --h5-font-size: 1.25rem;
    --h5-line-height: 1.3;
    --h5-letter-spacing: 0;
    --h5-text-transform: none;
    --h5-text-align: inherit;
    --h6-color: var(--color-neutral-800);
    --h6-font-weight: 600;
    --h6-font-family: var(--font-primary);
    --h6-font-size: 1.125rem;
    --h6-line-height: 1.3;
    --h6-letter-spacing: 0;
    --h6-text-transform: none;
    --h6-text-align: inherit;
    --text-link-color: var(--color-neutral-800);
    --text-link-color-hover: var(--color-primary-500);
    --text-link-color-focus: var(--color-neutral-800);
    --text-link-color-visited: var(--color-neutral-800);
    --text-link-font-weight: inherit;
    --text-link-font-family: inherit;
    --text-link-font-size: inherit;
    --text-link-line-height: inherit;
    --text-link-letter-spacing: inherit;
    --text-link-text-decoration: inherit;
    --text-title-accent-color: var(--color-primary-500);
    --text-title-accent-font-size: inherit;
    --text-lead-color: var(--color-neutral-500);
    --text-lead-font-weight: 400;
    --text-lead-font-family: var(--font-primary);
    --text-lead-font-size: 1.125rem;
    --text-lead-line-height: 1.5;
    --text-lead-letter-spacing: 0;
    --body-color: var(--color-neutral-500);
    --body-font-weight: 400;
    --body-font-family: var(--font-primary);
    --body-font-size: 1rem;
    --body-line-height: 1.5;
    --body-letter-spacing: 0;
    --body-text-align: inherit;
    --text-small-color: var(--color-neutral-400);
    --text-small-font-weight: 400;
    --text-small-font-family: var(--font-primary);
    --text-small-font-size: .875rem;
    --text-small-line-height: 1.5;
    --text-small-letter-spacing: 0;
    --text-label-color: var(--color-primary-500);
    --text-label-font-weight: 500;
    --text-label-font-family: var(--font-primary);
    --text-label-font-size: .875rem;
    --text-label-line-height: 1.5;
    --text-label-letter-spacing: 0;
    --text-label-text-transform: none;
    --text-caption-color: var(--color-neutral-400);
    --text-caption-font-weight: 400;
    --text-caption-font-family: var(--font-primary);
    --text-caption-font-size: .75rem;
    --text-caption-line-height: 1.4;
    --text-caption-letter-spacing: 0;
    --text-display-xl-color: var(--color-neutral-800);
    --text-display-xl-font-weight: 700;
    --text-display-xl-font-family: var(--font-primary);
    --text-display-xl-font-size: 4.5rem;
    --text-display-xl-line-height: 1.1;
    --text-display-xl-letter-spacing: -.02em;
    --text-display-l-color: var(--color-neutral-800);
    --text-display-l-font-weight: 700;
    --text-display-l-font-family: var(--font-primary);
    --text-display-l-font-size: 3.5rem;
    --text-display-l-line-height: 1.1;
    --text-display-l-letter-spacing: -.02em;
    --text-overline-color: var(--color-neutral-500);
    --text-overline-font-weight: 600;
    --text-overline-font-family: var(--font-primary);
    --text-overline-font-size: .75rem;
    --text-overline-line-height: 1.3;
    --text-overline-letter-spacing: .06em;
    --text-overline-text-transform: uppercase;
    --text-muted-color: var(--color-neutral-400);
    --text-muted-font-weight: 400;
    --text-muted-font-family: var(--font-primary);
    --text-muted-font-size: inherit;
    --text-muted-line-height: inherit;
    --text-muted-letter-spacing: 0;
    --text-quote-color: var(--color-neutral-500);
    --text-quote-font-weight: 400;
    --text-quote-font-family: var(--font-primary);
    --text-quote-font-size: 1rem;
    --text-quote-line-height: 1.75;
    --text-quote-letter-spacing: 0;
    --text-quote-font-style: normal;
    --text-price-color: var(--color-neutral-900);
    --text-price-font-weight: 600;
    --text-price-font-family: var(--font-primary);
    --text-price-font-size: 1.5rem;
    --text-price-line-height: 1.2;
    --text-price-letter-spacing: -.02em;
    --text-name-color: var(--color-neutral-800);
    --text-name-font-weight: 600;
    --text-name-font-family: var(--font-primary);
    --text-name-font-size: 1rem;
    --text-name-line-height: 1.5;
    --text-name-letter-spacing: 0;
    --text-nav-color: var(--color-neutral-700);
    --text-nav-color-hover: var(--color-primary-500);
    --text-nav-color-active: var(--color-primary-500);
    --text-nav-font-weight: 400;
    --text-nav-font-family: var(--font-primary);
    --text-nav-font-size: 1rem;
    --text-nav-line-height: 1.5;
    --text-nav-letter-spacing: 0;
    --label-font-family: var(--font-primary);
    --label-font-size: .875rem;
    --label-font-weight: 500;
    --label-line-height: 1.5;
    --label-letter-spacing: 0;
    --label-color: var(--color-neutral-700);
    --label-required-color: var(--color-neutral-400);
    --label-gap: .5rem;
    --btn-font-family: var(--font-primary);
    --btn-font-size: 1rem;
    --btn-font-weight: 400;
    --btn-letter-spacing: 0;
    --btn-line-height: 1.5;
    --btn-bg: var(--color-neutral-800);
    --btn-color: var(--color-neutral-200);
    --btn-radius: 9999px;
    --btn-border-width: 0;
    --btn-border-style: solid;
    --btn-border-color: transparent;
    --btn-bg-image: none;
    --btn-bg-hover: var(--color-neutral-900);
    --btn-color-hover: var(--color-neutral-100);
    --btn-border-color-hover: transparent;
    --btn-bg-focus: var(--color-neutral-900);
    --btn-color-focus: var(--color-neutral-100);
    --btn-border-color-focus: transparent;
    --btn-padding-block: .5rem;
    --btn-padding-inline: 1.5rem;
    --btn-height: auto;
    --btn-width: auto;
    --btn-gap: .5rem;
    --btn-shadow: none;
    --btn-primary-bg: var(--color-primary-500);
    --btn-primary-bg-hover: var(--color-primary-600);
    --btn-primary-bg-focus: var(--color-primary-500);
    --btn-primary-color: var(--color-neutral);
    --btn-primary-color-hover: var(--color-neutral);
    --btn-primary-color-focus: var(--color-neutral);
    --btn-primary-border-color: transparent;
    --btn-primary-border-color-hover: transparent;
    --btn-primary-border-color-focus: transparent;
    --btn-primary-bg-image: none;
    --btn-primary-border-width: 0;
    --btn-primary-border-style: solid;
    --btn-primary-radius: var(--btn-radius);
    --btn-outline-bg: transparent;
    --btn-outline-bg-hover: var(--color-neutral-100);
    --btn-outline-bg-focus: transparent;
    --btn-outline-image: none;
    --btn-outline-color: var(--color-neutral-800);
    --btn-outline-color-hover: var(--color-neutral-900);
    --btn-outline-color-focus: var(--color-neutral-900);
    --btn-outline-border-color: var(--color-neutral-300);
    --btn-outline-border-color-hover: var(--color-neutral-300);
    --btn-outline-border-color-focus: var(--color-neutral-300);
    --btn-outline-border-width: 1.5px;
    --btn-outline-border-style: solid;
    --btn-outline-radius: var(--btn-radius);
    --btn-outline-focus-ring-color: var(--color-neutral-500);
    --btn-outline-focus-ring-opacity: .2;
    --btn-ghost-bg: var(--color-neutral-300);
    --btn-ghost-bg-hover: var(--color-primary-500);
    --btn-ghost-bg-focus: var(--color-primary-500);
    --btn-ghost-color: var(--color-neutral-800);
    --btn-ghost-color-hover: var(--color-neutral-900);
    --btn-ghost-color-focus: var(--color-neutral-800);
    --btn-ghost-border-width: 0;
    --btn-light-bg: var(--color-primary-100);
    --btn-light-bg-hover: var(--color-primary-200);
    --btn-light-bg-focus: var(--color-primary-100);
    --btn-light-image: none;
    --btn-light-color: var(--color-primary-500);
    --btn-light-color-hover: var(--color-primary-600);
    --btn-light-color-focus: var(--color-primary-500);
    --btn-light-border-color: transparent;
    --btn-light-border-color-hover: transparent;
    --btn-light-border-color-focus: transparent;
    --btn-light-border-width: 0;
    --btn-light-border-style: solid;
    --btn-light-radius: var(--btn-radius);
    --input-font-family: var(--font-primary);
    --input-font-size: var(--body-font-size);
    --input-font-weight: var(--body-font-weight);
    --input-line-height: var(--body-line-height);
    --input-letter-spacing: var(--body-letter-spacing);
    --input-bg: var(--color-neutral);
    --input-color: var(--color-neutral-800);
    --input-border-color: var(--color-neutral-300);
    --input-placeholder-color: var(--color-neutral-500);
    --input-bg-hover: var(--color-neutral);
    --input-border-color-hover: var(--color-neutral-300);
    --input-bg-focus: var(--color-neutral);
    --input-border-color-focus: var(--color-primary-400);
    --input-radius: var(--radius-md);
    --input-border-width: 1px;
    --input-border-style: solid;
    --input-height: auto;
    --input-padding-inline: 1rem;
    --input-padding-block: .5rem;
    --input-autofill-bg: var(--color-neutral);
    --input-autofill-color: var(--color-neutral-800);
    --textarea-font-family: var(--font-primary);
    --textarea-font-size: var(--body-font-size);
    --textarea-font-weight: var(--body-font-weight);
    --textarea-line-height: var(--body-line-height);
    --textarea-letter-spacing: var(--body-letter-spacing);
    --textarea-bg: var(--color-neutral);
    --textarea-color: var(--color-neutral-800);
    --textarea-border-color: var(--color-neutral-300);
    --textarea-placeholder-color: var(--color-neutral-500);
    --textarea-bg-hover: var(--color-neutral);
    --textarea-border-color-hover: var(--color-neutral-300);
    --textarea-bg-focus: var(--color-neutral);
    --textarea-border-color-focus: var(--color-primary-400);
    --textarea-radius: var(--radius-md);
    --textarea-border-width: 1px;
    --textarea-border-style: solid;
    --textarea-min-height: 6rem;
    --textarea-height: auto;
    --textarea-padding-inline: 1rem;
    --textarea-padding-block: .5rem;
    --textarea-autofill-bg: var(--color-neutral);
    --textarea-autofill-color: var(--color-neutral-800);
    --card-radius: var(--radius-lg);
    --card-bg: #fdfdfd;
    --card-border-color: var(--color-neutral-200);
    --card-min-height: unset;
    --card-bg-image: none;
    --card-border-width: 1px;
    --card-border-style: solid;
    --card-color: inherit;
    --card-shadow: none;
    --card-position: static;
    --card-padding-inline: 1.25rem;
    --card-padding-block: 1.25rem;
    --card-actions-margin-top: auto;
    --card-actions-padding-top: 1rem;
    --card-actions-gap: .5rem;
    --card-ribbon-bg: var(--color-primary-500);
    --card-ribbon-color: var(--color-neutral);
    --card-ribbon-padding-inline: 1rem;
    --card-ribbon-padding-block: .5rem;
    --card-ribbon-font-size: .75rem;
    --card-ribbon-font-weight: 600;
    --card-elevated-color: inherit;
    --card-elevated-shadow: var(--shadow-md);
    --card-elevated-border-width: 0;
    --card-filled-color: inherit;
    --card-filled-bg: var(--color-neutral-100);
    --card-filled-border-width: 0;
    --chip-font-family: var(--font-primary);
    --chip-font-size: .875rem;
    --chip-font-weight: 500;
    --chip-line-height: 1.5;
    --chip-letter-spacing: 0;
    --chip-bg: var(--color-neutral-100);
    --chip-color: var(--color-primary-500);
    --chip-radius: var(--radius-md);
    --chip-padding-inline: .75rem;
    --chip-padding-block: .5rem;
    --chip-text-transform: none;
    --chip-border-width: 0;
    --chip-border-style: solid;
    --chip-border-color: transparent;
    --chip-primary-bg: var(--color-primary-500);
    --chip-primary-color: var(--color-neutral);
    --chip-primary-radius: 99rem;
    --chip-primary-text-transform: uppercase;
    --chip-primary-padding-inline: var(--chip-padding-inline);
    --tag-font-family: var(--font-primary);
    --tag-font-size: max(.875rem, 12px);
    --tag-font-weight: 500;
    --tag-line-height: 1.5;
    --tag-letter-spacing: 0;
    --tag-bg: var(--color-neutral-100);
    --tag-color: var(--color-primary-500);
    --tag-radius: var(--radius-md);
    --tag-padding-inline: .5rem;
    --tag-padding-block: 0;
    --tag-primary-bg: var(--color-primary-500);
    --tag-primary-color: var(--color-neutral);
    --tag-primary-radius: 99rem;
    --section-padding-inline: 0;
    --section-padding-block: 0;
    --section-margin-top: 0;
    --section-margin-bottom: 0;
    --section-bg: transparent;
    --section-position: static;
    --section-border-color: transparent;
    --section-border-width: 0;
    --accordion-padding-inline: 1.5rem;
    --accordion-padding-block: 1.25rem;
    --accordion-radius: var(--radius-md);
    --accordion-border-width: 0;
    --accordion-border-top-width: var(--accordion-border-width);
    --accordion-border-right-width: var(--accordion-border-width);
    --accordion-border-bottom-width: var(--accordion-border-width);
    --accordion-border-left-width: var(--accordion-border-width);
    --accordion-border-style: solid;
    --accordion-border-color: transparent;
    --accordion-bg: transparent;
    --accordion-bg-open: transparent;
    --accordion-max-width: none;
    --accordion-width: 100%;
    --accordion-divider-color: var(--color-neutral-200);
    --accordion-divider-width: 1px;
    --accordion-icon-size: 1rem;
    --accordion-icon-box-size: unset;
    --accordion-icon-padding-inline: 0;
    --accordion-icon-padding-block: 0;
    --accordion-icon-radius: 0;
    --accordion-icon-bg: transparent;
    --accordion-icon-bg-open: transparent;
    --accordion-icon-color: inherit;
    --accordion-icon-color-open: var(--color-neutral-500);
    --accordion-trigger-justify: space-between;
    --accordion-trigger-direction: row;
    --accordion-body-padding-block-start: unset;
    --accordion-body-padding-block-end: unset;
    --accordion-body-padding-inline-start: unset;
    --accordion-body-padding-inline-end: unset;
    --accordion-body-margin-start: 0;
    --accordion-body-margin-end: 0;
    --accordion-body-border-top: 0;
    --accordion-body-border-color: transparent;
    --accordion-body-border-start: 0;
    --accordion-body-border-start-color: transparent;
    --accordion-trigger-color: var(--color-neutral-800);
    --accordion-trigger-font-weight: 400;
    --accordion-trigger-font-family: var(--font-primary);
    --accordion-trigger-font-size: 1.25rem;
    --accordion-trigger-line-height: 1.375;
    --accordion-trigger-letter-spacing: 0;
    --accordion-trigger-text-transform: none;
    --accordion-trigger-text-align: inherit;
    --accordion-content-color: var(--color-neutral-600);
    --accordion-content-font-weight: 400;
    --accordion-content-font-family: var(--font-primary);
    --accordion-content-font-size: 1rem;
    --accordion-content-line-height: 1.5;
    --accordion-content-letter-spacing: 0;
    --accordion-content-text-transform: none;
    --accordion-content-text-align: inherit;
    --accordion-outline-radius: var(--radius-lg);
    --accordion-outline-border-width: 2px;
    --accordion-outline-border-color: var(--color-neutral-200);
    --accordion-outline-padding-inline: 2rem;
    --accordion-outline-padding-block: 1.5rem;
    --accordion-outline-icon-size: .875rem;
    --accordion-outline-icon-padding-inline: .5rem;
    --accordion-outline-icon-padding-block: .5rem;
    --accordion-outline-icon-radius: 9999px;
    --accordion-outline-icon-bg: var(--color-primary-500);
    --accordion-outline-icon-color: var(--color-neutral);
    --accordion-outline-icon-bg-open: var(--color-neutral-200);
    --accordion-outline-icon-color-open: var(--color-neutral-700);
    --accordion-outline-bg: transparent;
    --accordion-outline-bg-open: transparent;
    --accordion-card-radius: var(--radius-lg);
    --accordion-card-bg: var(--color-neutral-100);
    --accordion-card-bg-open: var(--accordion-card-bg);
    --accordion-card-padding-inline: 1.5rem;
    --accordion-card-padding-block: 1.25rem;
    --accordion-card-icon-padding-inline: .5rem;
    --accordion-card-icon-padding-block: .5rem;
    --accordion-card-icon-radius: 9999px;
    --accordion-card-icon-color: var(--color-neutral-700);
    --accordion-card-icon-color-open: var(--color-neutral-500);
    --accordion-collapse-divider-color: var(--color-neutral-200);
    --accordion-collapse-divider-width: 1px;
    --accordion-collapse-padding-block: 1.25rem;
    --accordion-collapse-icon-size: 1.25rem;
    --accordion-collapse-icon-color: var(--color-primary-500);
    --accordion-collapse-accent-color: var(--color-primary-500);
    --accordion-collapse-accent-width: 2px;
    --tab-font-family: var(--font-primary);
    --tab-font-weight: 500;
    --tab-font-size: 1rem;
    --tab-height: 3rem;
    --tab-padding-inline: 2rem;
    --tab-padding-block: .5rem;
    --tab-bg: transparent;
    --tab-bg-hover: transparent;
    --tab-bg-active: transparent;
    --tab-color: var(--color-neutral-700);
    --tab-color-active: var(--color-primary-500);
    --tab-border-color: var(--color-neutral-200);
    --tab-border-color-hover: var(--color-neutral-400);
    --tab-border-color-active: var(--color-primary-500);
    --tab-border-width: 2px;
    --tab-radius: 0;
    --tab-shadow: none;
    --tab-shadow-hover: none;
    --container-bg: transparent;
    --container-bg-image: none;
    --container-bg-size: cover;
    --container-bg-position: center;
    --container-bg-repeat: no-repeat;
    --container-radius: 0;
    --container-padding: unset;
    --container-padding-inline: unset;
    --container-padding-block: unset;
    --container-display: block;
    --container-gap: 0;
    --container-min-height: unset;
    --container-position: auto;
    --container-overflow: auto;
    --image-width: auto;
    --image-height: auto;
    --image-max-width: 100%;
    --image-position: static;
    --image-left: auto;
    --image-top: auto;
    --image-bottom: auto;
    --image-right: auto;
    --image-object-fit: unset;
    --image-object-position: unset;
    --image-z-index: auto;
    --image-margin-inline: unset;
    --image-margin-block: unset;
    --step-indicator-size: 3.25rem;
    --step-indicator-radius: 9999px;
    --step-indicator-bg: var(--color-neutral);
    --step-indicator-color: var(--color-neutral-900);
    --step-indicator-font-family: var(--font-primary);
    --step-indicator-font-size: 1.5rem;
    --step-indicator-font-weight: 800;
    --step-indicator-line-height: 1.08;
    --step-indicator-letter-spacing: 0;
    --icon-box-size: 3rem;
    --icon-box-padding: .75rem;
    --icon-box-radius: 99rem;
    --icon-box-bg: transparent;
    --icon-box-color: inherit;
    --icon-box-border-width: 0;
    --icon-box-border-style: solid;
    --icon-box-border-color: transparent;
    --icon-box-primary-bg: var(--color-primary-500);
    --icon-box-primary-color: var(--color-neutral);
    --icon-box-outline-bg: transparent;
    --icon-box-outline-color: var(--color-neutral-800);
    --icon-box-outline-border-width: 1px;
    --icon-box-outline-border-color: var(--color-neutral-300);
    --icon-box-light-bg: var(--color-primary-100);
    --icon-box-light-color: var(--color-primary-500);
    --icon-box-ghost-bg: var(--color-neutral-100);
    --icon-box-ghost-color: var(--color-neutral-800);
    --nav-list-gap: 1.5rem;
    --nav-link-color: var(--text-nav-color);
    --nav-link-color-hover: var(--text-nav-color-hover);
    --nav-link-color-active: var(--text-nav-color-active);
    --nav-link-font-size: var(--text-nav-font-size);
    --nav-link-font-weight: var(--text-nav-font-weight);
    --nav-link-font-family: var(--text-nav-font-family);
    --nav-link-line-height: var(--text-nav-line-height);
    --nav-link-letter-spacing: var(--text-nav-letter-spacing);
    --nav-link-display: inline;
    --nav-link-padding-inline: 0;
    --nav-link-padding-block: 0;
    --navbar-toggle-color: var(--text-nav-color);
    --navbar-toggle-size: 1.5rem;
    --banner-radius: var(--radius-2xl);
    --banner-bg: transparent;
    --banner-min-height: 650px;
    --banner-max-width: 100%;
    --banner-justify-content: center;
    --banner-margin-block-end: 1.5rem;
    --banner-content-width: 80%;
    --banner-content-z-index: 10;
    --banner-content-padding-top: 2.5rem;
    --banner-content-padding-right: 0;
    --banner-content-padding-bottom: 0;
    --banner-content-padding-left: 0;
    --banner-title-font-family: var(--font-secondary);
    --banner-title-font-size: 2rem;
    --banner-title-font-weight: 800;
    --banner-title-line-height: 1.09;
    --banner-title-color: var(--color-neutral-900);
    --banner-title-text-transform: uppercase;
    --banner-title-text-align: center;
    --banner-title-margin-block-end: 0;
    --banner-description-font-size: 1rem;
    --banner-description-line-height: 1.37;
    --banner-description-color: var(--color-neutral-900);
    --banner-description-text-align: center;
    --banner-description-margin-block-start: 1rem;
    --banner-description-margin-block-end: 0;
    --banner-example-font-size: 1rem;
    --banner-example-line-height: 1.37;
    --banner-example-color: var(--color-neutral-900);
    --banner-example-text-align: center;
    --banner-example-margin-block-start: 1rem;
    --banner-example-margin-block-end: 0;
    --banner-media-bg: var(--color-neutral-200);
    --banner-media-color: var(--color-neutral-500);
    --banner-padding-inline: 1rem;
    --banner-padding-block: 1rem;
    --banner-gap: 1rem;
    --banner-inner-max-width: 100%;
    --banner-inner-margin-inline: 0;
    --banner-content-max-width: 48rem;
    --banner-badge-bg: var(--color-primary-100);
    --banner-badge-color: var(--color-neutral-900);
    --banner-badge-radius: var(--radius-full);
    --banner-badge-padding-inline: .75rem;
    --banner-badge-padding-block: .375rem;
    --banner-badge-font-size: .75rem;
    --banner-badge-font-weight: 600;
    --banner-badge-letter-spacing: 0;
    --banner-muted-color: var(--color-neutral-500);
    --banner-border-color: var(--color-neutral-200);
    --banner-panel-bg: var(--color-neutral);
    --banner-panel-border-color: var(--banner-border-color);
    --banner-panel-border-width: 1px;
    --banner-panel-radius: var(--radius-xl);
    --banner-panel-shadow: none;
    --banner-panel-padding-inline: 1rem;
    --banner-panel-padding-block: 1rem;
    --banner-input-bg: var(--color-neutral);
    --banner-input-border-color: var(--color-neutral-300);
    --banner-input-color: var(--color-neutral-900);
    --banner-input-radius: var(--radius-lg);
    --banner-input-padding-inline: .875rem;
    --banner-input-padding-block: .75rem;
    --banner-chip-bg: var(--color-neutral);
    --banner-chip-color: var(--color-neutral-900);
    --banner-chip-border-color: var(--banner-border-color);
    --banner-chip-radius: var(--radius-full);
    --banner-chip-font-size: .8125rem;
    --banner-chip-padding-inline: .75rem;
    --banner-chip-padding-block: .25rem;
    --banner-list-marker-bg: var(--color-primary-500);
    --banner-stat-bg: var(--color-neutral);
    --banner-stat-border-color: var(--banner-border-color);
    --banner-stat-border-width: 1px;
    --banner-stat-radius: .875rem;
    --banner-stat-padding-inline: .875rem;
    --banner-stat-padding-block: .875rem;
    --banner-stat-value-color: var(--color-neutral-900);
    --banner-stat-label-color: var(--color-neutral-500);
    --banner-timer-bg: var(--color-neutral);
    --banner-timer-border-color: var(--banner-border-color);
    --banner-timer-border-width: 1px;
    --banner-timer-radius: .875rem;
    --banner-timer-value-color: var(--color-neutral-900);
    --banner-timer-label-color: var(--color-neutral-500);
    --layout-display: flex;
    --layout-direction: column;
    --layout-gap: 1rem;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

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

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  button, a, label {
    cursor: pointer;
  }

  h1 {
    color: var(--h1-color);
    font-weight: var(--h1-font-weight);
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    text-transform: var(--h1-text-transform);
    text-align: var(--h1-text-align);
  }

  h2 {
    color: var(--h2-color);
    font-weight: var(--h2-font-weight);
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    text-transform: var(--h2-text-transform);
    text-align: var(--h2-text-align);
  }

  h3 {
    color: var(--h3-color);
    font-weight: var(--h3-font-weight);
    font-family: var(--h3-font-family);
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    text-transform: var(--h3-text-transform);
    text-align: var(--h3-text-align);
  }

  h4 {
    color: var(--h4-color);
    font-weight: var(--h4-font-weight);
    font-family: var(--h4-font-family);
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
    text-transform: var(--h4-text-transform);
    text-align: var(--h4-text-align);
  }

  h5 {
    color: var(--h5-color);
    font-weight: var(--h5-font-weight);
    font-family: var(--h5-font-family);
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height);
    text-transform: var(--h5-text-transform);
    text-align: var(--h5-text-align);
  }

  h6 {
    color: var(--h6-color);
    font-weight: var(--h6-font-weight);
    font-family: var(--h6-font-family);
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height);
    text-transform: var(--h6-text-transform);
    text-align: var(--h6-text-align);
  }

  a {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .3s;
    color: var(--text-link-color);
    font-weight: var(--text-link-font-weight);
    font-family: var(--text-link-font-family);
    font-size: var(--text-link-font-size);
    line-height: var(--text-link-line-height);
    -webkit-text-decoration: var(--text-link-text-decoration);
    -webkit-text-decoration: var(--text-link-text-decoration);
    text-decoration: var(--text-link-text-decoration);
    transition-duration: .3s;
  }

  a:visited {
    color: var(--text-link-color-visited);
  }

  @media (hover: hover) {
    a:hover {
      color: var(--text-link-color-hover);
    }
  }

  a:focus {
    color: var(--text-link-color-focus);
  }

  button:not(.tab):not(.navbar-toggle):not(.chip):not(.chip-primary) {
    --tw-duration: .3s;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    border-radius: var(--btn-radius);
    border-width: var(--btn-border-width);
    border-style: var(--btn-border-style);
    border-color: var(--btn-border-color);
    line-height: 1.5;
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    background-image: var(--btn-bg-image);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    height: var(--btn-height);
    width: var(--btn-width);
    justify-content: center;
    align-items: center;
    gap: var(--btn-gap);
    box-shadow: var(--btn-shadow);
    transition-duration: .3s;
    display: inline-flex;
  }

  @media (hover: hover) {
    button:not(.tab):not(.navbar-toggle):not(.chip):not(.chip-primary):hover {
      background-color: var(--btn-bg-hover);
      color: var(--btn-color-hover);
      border-color: var(--btn-border-color-hover);
    }
  }

  button:not(.tab):not(.navbar-toggle):not(.chip):not(.chip-primary):focus {
    background-color: var(--btn-bg-focus);
    color: var(--btn-color-focus);
    border-color: var(--btn-border-color-focus);
  }

  img {
    max-width: var(--image-max-width);
    width: var(--image-width);
    height: var(--image-height);
    position: var(--image-position);
    margin-block: var(--image-margin-block);
    margin-inline: var(--image-margin-inline);
    left: var(--image-left);
    top: var(--image-top);
    bottom: var(--image-bottom);
    right: var(--image-right);
    z-index: var(--image-z-index);
    object-fit: var(--image-object-fit);
    object-position: var(--image-object-position);
  }

  @media (max-width: 47.99rem) {
    .cards [data-cms-key="cards.title"], .cards [data-cms-key="cards.description"], .job-board [data-cms-key="job-board.title"], .job-board [data-cms-key="job-board.subtitle"] {
      text-align: center;
      margin-inline: auto;
    }
  }

  label {
    color: var(--label-color);
    font-family: var(--label-font-family);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    line-height: var(--label-line-height);
    display: block;
  }

  input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="password"] {
    --tw-duration: .2s;
    padding-inline: var(--input-padding-inline);
    padding-block: var(--input-padding-block);
    height: var(--input-height);
    background-color: var(--input-bg);
    color: var(--input-color);
    border-width: var(--input-border-width);
    border-style: var(--input-border-style);
    border-color: var(--input-border-color);
    border-radius: var(--input-radius);
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    line-height: var(--input-line-height);
    outline: none;
    transition-duration: .2s;
  }

  :is(input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="password"])::placeholder {
    color: var(--input-placeholder-color);
    opacity: 1;
  }

  @media (hover: hover) {
    :is(input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="password"]):hover {
      background-color: var(--input-bg-hover);
      border-color: var(--input-border-color-hover);
    }
  }

  :is(input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="password"]):focus {
    background-color: var(--input-bg-focus);
    border-color: var(--input-border-color-focus);
  }

  :is(input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="password"]):autofill,
  :is(input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="password"]):-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--input-autofill-bg) inset;
    -webkit-text-fill-color: var(--input-autofill-color);
    caret-color: var(--input-autofill-color);
  }

  textarea {
    resize: none;
    --tw-duration: .2s;
    padding-inline: var(--textarea-padding-inline);
    padding-block: var(--textarea-padding-block);
    height: var(--textarea-height);
    min-height: var(--textarea-min-height);
    background-color: var(--textarea-bg);
    color: var(--textarea-color);
    border-width: var(--textarea-border-width);
    border-style: var(--textarea-border-style);
    border-color: var(--textarea-border-color);
    border-radius: var(--textarea-radius);
    font-family: var(--textarea-font-family);
    font-size: var(--textarea-font-size);
    font-weight: var(--textarea-font-weight);
    line-height: var(--textarea-line-height);
    outline: none;
    transition-duration: .2s;
  }

  textarea::placeholder {
    color: var(--textarea-placeholder-color);
    opacity: 1;
  }

  @media (hover: hover) {
    textarea:hover {
      background-color: var(--textarea-bg-hover);
      border-color: var(--textarea-border-color-hover);
    }
  }

  textarea:focus {
    background-color: var(--textarea-bg-focus);
    border-color: var(--textarea-border-color-focus);
  }

  textarea:autofill,
  textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--textarea-autofill-bg) inset;
    -webkit-text-fill-color: var(--textarea-autofill-color);
    caret-color: var(--textarea-autofill-color);
  }

  section, header, footer {
    padding-inline: var(--section-padding-inline);
    padding-block: var(--section-padding-block);
    background-color: var(--section-bg);
    position: var(--section-position);
    border-color: var(--section-border-color);
    border-width: var(--section-border-width);
    border-style: solid;
    margin-block-start: var(--section-margin-top);
    margin-block-end: var(--section-margin-bottom);
  }

  section:not(.hero),
  footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body {
    display: var(--layout-display);
    flex-direction: var(--layout-direction);
    gap: var(--layout-gap);
    font-size: var(--body-font-size);
  }

}

@layer components;

@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }

  .collapse {
    visibility: collapse;
  }

  .visible {
    visibility: visible;
  }

  .image {
    max-width: var(--image-max-width);
    width: var(--image-width);
    height: var(--image-height);
    position: var(--image-position);
    margin-block: var(--image-margin-block);
    margin-inline: var(--image-margin-inline);
    left: var(--image-left);
    top: var(--image-top);
    bottom: var(--image-bottom);
    right: var(--image-right);
    z-index: var(--image-z-index);
    object-fit: var(--image-object-fit);
    object-position: var(--image-object-position);
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .card-elevated {
    border-radius: var(--card-radius);
    color: var(--card-color);
    background-color: var(--card-bg);
    background-image: var(--card-bg-image);
    box-shadow: var(--card-shadow);
    position: var(--card-position);
    padding-inline: var(--card-padding-inline);
    padding-block: var(--card-padding-block);
    min-height: var(--card-min-height);
    border-color: var(--card-border-color);
    border-width: var(--card-border-width);
    border-style: var(--card-border-style);
    --card-color: var(--card-elevated-color);
    --card-shadow: var(--card-elevated-shadow);
    --card-border-width: var(--card-elevated-border-width);
    background-position: center;
    background-size: cover;
  }

  .card-filled {
    border-radius: var(--card-radius);
    color: var(--card-color);
    background-color: var(--card-bg);
    background-image: var(--card-bg-image);
    box-shadow: var(--card-shadow);
    position: var(--card-position);
    padding-inline: var(--card-padding-inline);
    padding-block: var(--card-padding-block);
    min-height: var(--card-min-height);
    border-color: var(--card-border-color);
    border-width: var(--card-border-width);
    border-style: var(--card-border-style);
    --card-color: var(--card-filled-color);
    --card-bg: var(--card-filled-bg);
    --card-border-width: var(--card-filled-border-width);
    background-position: center;
    background-size: cover;
  }

  .card {
    border-radius: var(--card-radius);
    color: var(--card-color);
    background-color: var(--card-bg);
    background-image: var(--card-bg-image);
    box-shadow: var(--card-shadow);
    position: var(--card-position);
    padding-inline: var(--card-padding-inline);
    padding-block: var(--card-padding-block);
    min-height: var(--card-min-height);
    border-color: var(--card-border-color);
    border-width: var(--card-border-width);
    border-style: var(--card-border-style);
    background-position: center;
    background-size: cover;
    overflow-wrap: break-word;
  }

  @media (max-width: 47.99rem) {
    .card [class*="btn"] {
      width: 100%;
      text-align: center;
    }
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-1 {
    top: calc(var(--spacing) * 1);
  }

  .top-1\/2 {
    top: 50%;
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-4 {
    left: calc(var(--spacing) * 4);
  }

  .isolate {
    isolation: isolate;
  }

  .-z-10 {
    z-index: calc(10 * -1);
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }

  .order-first {
    order: -9999;
  }

  .order-last {
    order: 9999;
  }

  .col-span-1 {
    grid-column: span 1 / span 1;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .-m-1 {
    margin: calc(var(--spacing) * -1);
  }

  .-m-2 {
    margin: calc(var(--spacing) * -2);
  }

  .-m-4 {
    margin: calc(var(--spacing) * -4);
  }

  .-m-12 {
    margin: calc(var(--spacing) * -12);
  }

  .m-0 {
    margin: calc(var(--spacing) * 0);
  }

  .m-1 {
    margin: calc(var(--spacing) * 1);
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .-mx-1\.5 {
    margin-inline: calc(var(--spacing) * -1.5);
  }

  .-mx-2 {
    margin-inline: calc(var(--spacing) * -2);
  }

  .-mx-4 {
    margin-inline: calc(var(--spacing) * -4);
  }

  .-mx-6 {
    margin-inline: calc(var(--spacing) * -6);
  }

  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }

  .mx-1\.5 {
    margin-inline: calc(var(--spacing) * 1.5);
  }

  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }

  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-5 {
    margin-inline: calc(var(--spacing) * 5);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .-my-8 {
    margin-block: calc(var(--spacing) * -8);
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }

  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }

  .my-5 {
    margin-block: calc(var(--spacing) * 5);
  }

  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }

  .my-7 {
    margin-block: calc(var(--spacing) * 7);
  }

  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }

  .my-10 {
    margin-block: calc(var(--spacing) * 10);
  }

  .my-12 {
    margin-block: calc(var(--spacing) * 12);
  }

  .accordion-body {
    overflow: hidden;
  }

  .accordion-body > * {
    border-top-width: var(--accordion-body-border-top);
    border-top-style: solid;
    border-top-color: var(--accordion-body-border-color);
    border-inline-start-width: var(--accordion-body-border-start);
    border-inline-start-style: solid;
    border-inline-start-color: var(--accordion-body-border-start-color);
    color: var(--accordion-content-color);
    font-weight: var(--accordion-content-font-weight);
    font-family: var(--accordion-content-font-family);
    font-size: var(--accordion-content-font-size);
    line-height: var(--accordion-content-line-height);
    text-transform: var(--accordion-content-text-transform);
    text-align: var(--accordion-content-text-align);
    margin-block-end: var(--accordion-body-margin-end);
    margin-inline-start: var(--accordion-body-margin-start);
    padding-block-start: var(--accordion-body-padding-block-start, 0);
    padding-block-end: var(--accordion-body-padding-block-end, var(--accordion-padding-block));
    padding-inline-start: var(--accordion-body-padding-inline-start, var(--accordion-padding-inline));
    padding-inline-end: var(--accordion-body-padding-inline-end, var(--accordion-padding-inline));
  }

  .-mt-4 {
    margin-top: calc(var(--spacing) * -4);
  }

  .-mt-20 {
    margin-top: calc(var(--spacing) * -20);
  }

  .-mt-72 {
    margin-top: calc(var(--spacing) * -72);
  }

  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-14 {
    margin-top: calc(var(--spacing) * 14);
  }

  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }

  .mt-20 {
    margin-top: calc(var(--spacing) * 20);
  }

  .mt-auto {
    margin-top: auto;
  }

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }

  .mr-5 {
    margin-right: calc(var(--spacing) * 5);
  }

  .-mb-1 {
    margin-bottom: calc(var(--spacing) * -1);
  }

  .-mb-10 {
    margin-bottom: calc(var(--spacing) * -10);
  }

  .-mb-px {
    margin-bottom: -1px;
  }

  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }

  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }

  .mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
  }

  .mb-auto {
    margin-bottom: auto;
  }

  .ml-0 {
    margin-left: calc(var(--spacing) * 0);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-5 {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-6 {
    margin-left: calc(var(--spacing) * 6);
  }

  .ml-9 {
    margin-left: calc(var(--spacing) * 9);
  }

  .ml-auto {
    margin-left: auto;
  }

  .box-border {
    box-sizing: border-box;
  }

  .step-indicator {
    width: var(--step-indicator-size);
    height: var(--step-indicator-size);
    border-radius: var(--step-indicator-radius);
    background-color: var(--step-indicator-bg);
    color: var(--step-indicator-color);
    font-family: var(--step-indicator-font-family);
    font-size: var(--step-indicator-font-size);
    font-weight: var(--step-indicator-font-weight);
    line-height: var(--step-indicator-line-height);
    flex-shrink: 0;
    justify-content: center;
    align-self: center;
    align-items: center;
    display: inline-flex;
  }

  .accordion-icon {
    width: var(--accordion-icon-box-size);
    height: var(--accordion-icon-box-size);
    padding-inline: var(--accordion-icon-padding-inline);
    padding-block: var(--accordion-icon-padding-block);
    border-radius: var(--accordion-icon-radius);
    background-color: var(--accordion-icon-bg);
    color: var(--accordion-icon-color);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: background-color .3s, color .3s;
    display: flex;
  }

  .accordion-icon svg {
    width: var(--accordion-icon-size);
    height: var(--accordion-icon-size);
  }

  .group:where([open]) .accordion-icon {
    background-color: var(--accordion-icon-bg-open);
    color: var(--accordion-icon-color-open);
  }

  .btn-outline {
    --tw-duration: .3s;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    border-radius: var(--btn-radius);
    border-width: var(--btn-border-width);
    border-style: var(--btn-border-style);
    border-color: var(--btn-border-color);
    line-height: 1.5;
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    background-image: var(--btn-bg-image);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    height: var(--btn-height);
    width: var(--btn-width);
    justify-content: center;
    align-items: center;
    gap: var(--btn-gap);
    box-shadow: var(--btn-shadow);
    transition-duration: .3s;
    display: inline-flex;
  }

  @media (hover: hover) {
    .btn-outline:hover {
      background-color: var(--btn-bg-hover);
      color: var(--btn-color-hover);
      border-color: var(--btn-border-color-hover);
    }
  }

  .btn-outline:focus {
    background-color: var(--btn-bg-focus);
    color: var(--btn-color-focus);
    border-color: var(--btn-border-color-focus);
  }

  .btn-outline {
    --btn-bg: var(--btn-outline-bg);
    --btn-bg-hover: var(--btn-outline-bg-hover);
    --btn-bg-focus: var(--btn-outline-bg-focus);
    --btn-bg-image: none;
    --btn-color: var(--btn-outline-color);
    --btn-color-hover: var(--btn-outline-color-hover);
    --btn-color-focus: var(--btn-outline-color-focus);
    --btn-border-color: var(--btn-outline-border-color);
    --btn-border-color-hover: var(--btn-outline-border-color-hover);
    --btn-border-color-focus: var(--btn-outline-border-color-focus);
    --btn-border-width: var(--btn-outline-border-width);
    --btn-border-style: var(--btn-outline-border-style);
    --btn-radius: var(--btn-outline-radius);
    --btn-focus-ring-color: var(--btn-outline-focus-ring-color);
    --btn-focus-ring-opacity: var(--btn-outline-focus-ring-opacity);
  }

  .btn-light {
    --tw-duration: .3s;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    border-radius: var(--btn-radius);
    border-width: var(--btn-border-width);
    border-style: var(--btn-border-style);
    border-color: var(--btn-border-color);
    line-height: 1.5;
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    background-image: var(--btn-bg-image);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    height: var(--btn-height);
    width: var(--btn-width);
    justify-content: center;
    align-items: center;
    gap: var(--btn-gap);
    box-shadow: var(--btn-shadow);
    transition-duration: .3s;
    display: inline-flex;
  }

  @media (hover: hover) {
    .btn-light:hover {
      background-color: var(--btn-bg-hover);
      color: var(--btn-color-hover);
      border-color: var(--btn-border-color-hover);
    }
  }

  .btn-light:focus {
    background-color: var(--btn-bg-focus);
    color: var(--btn-color-focus);
    border-color: var(--btn-border-color-focus);
  }

  .btn-light {
    --btn-bg: var(--btn-light-bg);
    --btn-bg-hover: var(--btn-light-bg-hover);
    --btn-bg-focus: var(--btn-light-bg-focus);
    --btn-bg-image: var(--btn-light-image);
    --btn-color: var(--btn-light-color);
    --btn-color-hover: var(--btn-light-color-hover);
    --btn-color-focus: var(--btn-light-color-focus);
    --btn-border-color: var(--btn-light-border-color);
    --btn-border-color-hover: var(--btn-light-border-color-hover);
    --btn-border-color-focus: var(--btn-light-border-color-focus);
    --btn-border-width: var(--btn-light-border-width);
    --btn-border-style: var(--btn-light-border-style);
    --btn-radius: var(--btn-light-radius);
  }

  .btn-primary {
    --tw-duration: .3s;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    border-radius: var(--btn-radius);
    border-width: var(--btn-border-width);
    border-style: var(--btn-border-style);
    border-color: var(--btn-border-color);
    line-height: 1.5;
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    background-image: var(--btn-bg-image);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    height: var(--btn-height);
    width: var(--btn-width);
    justify-content: center;
    align-items: center;
    gap: var(--btn-gap);
    box-shadow: var(--btn-shadow);
    transition-duration: .3s;
    display: inline-flex;
  }

  @media (hover: hover) {
    .btn-primary:hover {
      background-color: var(--btn-bg-hover);
      color: var(--btn-color-hover);
      border-color: var(--btn-border-color-hover);
    }
  }

  .btn-primary:focus {
    background-color: var(--btn-bg-focus);
    color: var(--btn-color-focus);
    border-color: var(--btn-border-color-focus);
  }

  .btn-primary {
    --btn-bg: var(--btn-primary-bg);
    --btn-bg-hover: var(--btn-primary-bg-hover);
    --btn-bg-focus: var(--btn-primary-bg-focus);
    --btn-color: var(--btn-primary-color);
    --btn-color-hover: var(--btn-primary-color-hover);
    --btn-color-focus: var(--btn-primary-color-focus);
    --btn-border-color: var(--btn-primary-border-color);
    --btn-border-color-hover: var(--btn-primary-border-color-hover);
    --btn-border-color-focus: var(--btn-primary-border-color-focus);
    --btn-border-width: var(--btn-primary-border-width);
    --btn-border-style: var(--btn-primary-border-style);
    --btn-radius: var(--btn-primary-radius);
    --btn-bg-image: var(--btn-primary-bg-image);
  }

  .btn-ghost {
    --tw-duration: .3s;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    border-radius: var(--btn-radius);
    border-width: var(--btn-border-width);
    border-style: var(--btn-border-style);
    border-color: var(--btn-border-color);
    line-height: 1.5;
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    background-image: var(--btn-bg-image);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    height: var(--btn-height);
    width: var(--btn-width);
    justify-content: center;
    align-items: center;
    gap: var(--btn-gap);
    box-shadow: var(--btn-shadow);
    transition-duration: .3s;
    display: inline-flex;
  }

  @media (hover: hover) {
    .btn-ghost:hover {
      background-color: var(--btn-bg-hover);
      color: var(--btn-color-hover);
      border-color: var(--btn-border-color-hover);
    }
  }

  .btn-ghost:focus {
    background-color: var(--btn-bg-focus);
    color: var(--btn-color-focus);
    border-color: var(--btn-border-color-focus);
  }

  .btn-ghost {
    --btn-bg: var(--btn-ghost-bg);
    --btn-bg-hover: var(--btn-ghost-bg-hover);
    --btn-bg-focus: var(--btn-ghost-bg-focus);
    --btn-color: var(--btn-ghost-color);
    --btn-color-hover: var(--btn-ghost-color-hover);
    --btn-color-focus: var(--btn-ghost-color-focus);
    --btn-border-color: transparent;
    --btn-border-color-hover: transparent;
    --btn-border-color-focus: transparent;
    --btn-border-width: var(--btn-ghost-border-width);
  }

  .btn {
    --tw-duration: .3s;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    border-radius: var(--btn-radius);
    border-width: var(--btn-border-width);
    border-style: var(--btn-border-style);
    border-color: var(--btn-border-color);
    line-height: 1.5;
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    background-image: var(--btn-bg-image);
    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);
    height: var(--btn-height);
    width: var(--btn-width);
    justify-content: center;
    align-items: center;
    gap: var(--btn-gap);
    box-shadow: var(--btn-shadow);
    transition-duration: .3s;
    display: inline-flex;
  }

  @media (hover: hover) {
    .btn:hover {
      background-color: var(--btn-bg-hover);
      color: var(--btn-color-hover);
      border-color: var(--btn-border-color-hover);
    }
  }

  .btn:focus {
    background-color: var(--btn-bg-focus);
    color: var(--btn-color-focus);
    border-color: var(--btn-border-color-focus);
  }

  .icon-box-outline {
    width: var(--icon-box-size);
    height: var(--icon-box-size);
    padding: var(--icon-box-padding);
    background-color: var(--icon-box-bg);
    color: var(--icon-box-color);
    border-radius: var(--icon-box-radius);
    border-width: var(--icon-box-border-width);
    border-style: var(--icon-box-border-style);
    border-color: var(--icon-box-border-color);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .icon-box-outline svg {
    width: 100%;
    height: 100%;
  }

  .icon-box-outline {
    --icon-box-bg: var(--icon-box-outline-bg);
    --icon-box-color: var(--icon-box-outline-color);
    --icon-box-border-width: var(--icon-box-outline-border-width);
    --icon-box-border-color: var(--icon-box-outline-border-color);
  }

  .icon-box-ghost {
    width: var(--icon-box-size);
    height: var(--icon-box-size);
    padding: var(--icon-box-padding);
    background-color: var(--icon-box-bg);
    color: var(--icon-box-color);
    border-radius: var(--icon-box-radius);
    border-width: var(--icon-box-border-width);
    border-style: var(--icon-box-border-style);
    border-color: var(--icon-box-border-color);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .icon-box-ghost svg {
    width: 100%;
    height: 100%;
  }

  .icon-box-ghost {
    --icon-box-bg: var(--icon-box-ghost-bg);
    --icon-box-color: var(--icon-box-ghost-color);
  }

  .icon-box-light {
    width: var(--icon-box-size);
    height: var(--icon-box-size);
    padding: var(--icon-box-padding);
    background-color: var(--icon-box-bg);
    color: var(--icon-box-color);
    border-radius: var(--icon-box-radius);
    border-width: var(--icon-box-border-width);
    border-style: var(--icon-box-border-style);
    border-color: var(--icon-box-border-color);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .icon-box-light svg {
    width: 100%;
    height: 100%;
  }

  .icon-box-light {
    --icon-box-bg: var(--icon-box-light-bg);
    --icon-box-color: var(--icon-box-light-color);
  }

  .icon-box-primary {
    width: var(--icon-box-size);
    height: var(--icon-box-size);
    padding: var(--icon-box-padding);
    background-color: var(--icon-box-bg);
    color: var(--icon-box-color);
    border-radius: var(--icon-box-radius);
    border-width: var(--icon-box-border-width);
    border-style: var(--icon-box-border-style);
    border-color: var(--icon-box-border-color);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .icon-box-primary svg {
    width: 100%;
    height: 100%;
  }

  .icon-box-primary {
    --icon-box-bg: var(--icon-box-primary-bg);
    --icon-box-color: var(--icon-box-primary-color);
  }

  .icon-box {
    width: var(--icon-box-size);
    height: var(--icon-box-size);
    padding: var(--icon-box-padding);
    background-color: var(--icon-box-bg);
    color: var(--icon-box-color);
    border-radius: var(--icon-box-radius);
    border-width: var(--icon-box-border-width);
    border-style: var(--icon-box-border-style);
    border-color: var(--icon-box-border-color);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .icon-box svg {
    width: 100%;
    height: 100%;
  }

  .tab {
    height: var(--tab-height);
    padding-inline: var(--tab-padding-inline);
    padding-block: var(--tab-padding-block);
    border: none;
    border-bottom-width: var(--tab-border-width);
    border-bottom-style: solid;
    border-bottom-color: var(--tab-border-color);
    border-radius: var(--tab-radius);
    background-color: var(--tab-bg);
    box-shadow: var(--tab-shadow);
    color: var(--tab-color);
    font-family: var(--tab-font-family);
    font-size: var(--tab-font-size);
    font-weight: var(--tab-font-weight);
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    justify-content: center;
    align-items: center;
    gap: .25rem;
    transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s;
    display: inline-flex;
  }

  .tab:focus {
    outline: none;
  }

  @media (hover: hover) {
    .tab:hover {
      border-bottom-color: var(--tab-border-color-hover);
      background-color: var(--tab-bg-hover);
      box-shadow: var(--tab-shadow-hover);
    }
  }

  .accordion-trigger {
    cursor: pointer;
    align-items: center;
    justify-content: var(--accordion-trigger-justify);
    flex-direction: var(--accordion-trigger-direction);
    width: 100%;
    padding: var(--accordion-padding-block) var(--accordion-padding-inline);
    color: var(--accordion-trigger-color);
    font-weight: var(--accordion-trigger-font-weight);
    font-family: var(--accordion-trigger-font-family);
    font-size: var(--accordion-trigger-font-size);
    line-height: var(--accordion-trigger-line-height);
    text-transform: var(--accordion-trigger-text-transform);
    text-align: var(--accordion-trigger-text-align);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    background: none;
    border: 0;
    gap: .75rem;
    list-style: none;
    display: flex;
  }

  .accordion-trigger::-webkit-details-marker {
    display: none;
  }

  .accordion-trigger:focus {
    outline: none;
  }

  .accordion-trigger:active {
    box-shadow: none;
    background: none;
    outline: none;
    transform: none;
  }

  .card-ribbon {
    width: 100%;
    padding: var(--card-ribbon-padding-block) var(--card-ribbon-padding-inline);
    background-color: var(--card-ribbon-bg);
    color: var(--card-ribbon-color);
    font-size: var(--card-ribbon-font-size);
    font-weight: var(--card-ribbon-font-weight);
    text-align: center;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    display: block;
  }

  .chip-primary {
    padding-inline: var(--chip-primary-padding-inline);
    padding-block: var(--chip-padding-block);
    background-color: var(--chip-bg);
    color: var(--chip-color);
    border-radius: var(--chip-radius);
    border-width: var(--chip-border-width);
    border-style: var(--chip-border-style);
    border-color: var(--chip-border-color);
    font-family: var(--chip-font-family);
    font-size: var(--chip-font-size);
    font-weight: var(--chip-font-weight);
    line-height: var(--chip-line-height);
    text-transform: var(--chip-text-transform);
    cursor: pointer;
    touch-action: manipulation;
    --chip-bg: var(--chip-primary-bg);
    --chip-color: var(--chip-primary-color);
    --chip-radius: var(--chip-primary-radius);
    --chip-text-transform: var(--chip-primary-text-transform);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .chip {
    padding-inline: var(--chip-padding-inline);
    padding-block: var(--chip-padding-block);
    background-color: var(--chip-bg);
    color: var(--chip-color);
    border-radius: var(--chip-radius);
    border-width: var(--chip-border-width);
    border-style: var(--chip-border-style);
    border-color: var(--chip-border-color);
    font-family: var(--chip-font-family);
    font-size: var(--chip-font-size);
    font-weight: var(--chip-font-weight);
    line-height: var(--chip-line-height);
    text-transform: var(--chip-text-transform);
    cursor: pointer;
    touch-action: manipulation;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .accordion-content {
    opacity: 0;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s, opacity .3s;
    display: grid;
  }

  details[open] + .accordion-content {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .tag-primary {
    padding-inline: var(--tag-padding-inline);
    padding-block: var(--tag-padding-block);
    background-color: var(--tag-bg);
    color: var(--tag-primary-color);
    border-radius: var(--tag-radius);
    font-family: var(--tag-font-family);
    font-size: var(--tag-font-size);
    font-weight: var(--tag-font-weight);
    line-height: var(--tag-line-height);
    background-color: var(--tag-primary-bg);
    border-radius: var(--tag-primary-radius);
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .tag {
    padding-inline: var(--tag-padding-inline);
    padding-block: var(--tag-padding-block);
    background-color: var(--tag-bg);
    color: var(--tag-color);
    border-radius: var(--tag-radius);
    font-family: var(--tag-font-family);
    font-size: var(--tag-font-size);
    font-weight: var(--tag-font-weight);
    line-height: var(--tag-line-height);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .navbar {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .nav-list {
    align-items: center;
    gap: var(--nav-list-gap);
    display: flex;
  }

  .tabs {
    padding-block: 1rem;
    display: flex;
    overflow: auto hidden;
  }

  .nav-link {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .3s;
    color: var(--text-nav-color);
    font-weight: var(--text-nav-font-weight);
    font-family: var(--text-nav-font-family);
    font-size: var(--text-nav-font-size);
    line-height: var(--text-nav-line-height);
    transition-duration: .3s;
  }

  @media (hover: hover) {
    .nav-link:hover {
      color: var(--text-nav-color-hover);
    }
  }

  .nav-link[aria-current="page"], .nav-link.active {
    color: var(--text-nav-color-active);
  }

  .nav-link {
    color: var(--nav-link-color);
    font-size: var(--nav-link-font-size);
    font-weight: var(--nav-link-font-weight);
    font-family: var(--nav-link-font-family);
    line-height: var(--nav-link-line-height);
    display: var(--nav-link-display);
    padding-inline: var(--nav-link-padding-inline);
    padding-block: var(--nav-link-padding-block);
  }

  @media (hover: hover) {
    .nav-link:hover {
      color: var(--nav-link-color-hover);
    }
  }

  .nav-link[aria-current="page"] {
    color: var(--nav-link-color-active);
  }

  .label {
    color: var(--label-color);
    font-family: var(--label-font-family);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    line-height: var(--label-line-height);
    margin-block-end: var(--label-gap);
    display: block;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .list-item {
    display: list-item;
  }

  .table {
    display: table;
  }

  .aspect-\[3\/2\] {
    aspect-ratio: 3 / 2;
  }

  .aspect-\[3\/4\] {
    aspect-ratio: 3 / 4;
  }

  .aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
  }

  .aspect-\[4\/5\] {
    aspect-ratio: 4 / 5;
  }

  .aspect-\[5\/6\] {
    aspect-ratio: 5 / 6;
  }

  .aspect-\[6\/5\] {
    aspect-ratio: 6 / 5;
  }

  .aspect-\[7\/3\] {
    aspect-ratio: 7 / 3;
  }

  .aspect-\[7\/5\] {
    aspect-ratio: 7 / 5;
  }

  .aspect-\[14\/5\] {
    aspect-ratio: 14 / 5;
  }

  .aspect-\[16\/9\] {
    aspect-ratio: 16 / 9;
  }

  .aspect-\[21\/9\] {
    aspect-ratio: 21 / 9;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }

  .textarea {
    resize: none;
    --tw-duration: .2s;
    padding-inline: var(--textarea-padding-inline);
    padding-block: var(--textarea-padding-block);
    height: var(--textarea-height);
    min-height: var(--textarea-min-height);
    background-color: var(--textarea-bg);
    color: var(--textarea-color);
    border-width: var(--textarea-border-width);
    border-style: var(--textarea-border-style);
    border-color: var(--textarea-border-color);
    border-radius: var(--textarea-radius);
    font-family: var(--textarea-font-family);
    font-size: var(--textarea-font-size);
    font-weight: var(--textarea-font-weight);
    line-height: var(--textarea-line-height);
    outline: none;
    transition-duration: .2s;
  }

  .textarea::placeholder {
    color: var(--textarea-placeholder-color);
    opacity: 1;
  }

  @media (hover: hover) {
    .textarea:hover {
      background-color: var(--textarea-bg-hover);
      border-color: var(--textarea-border-color-hover);
    }
  }

  .textarea:focus {
    background-color: var(--textarea-bg-focus);
    border-color: var(--textarea-border-color-focus);
  }

  .no-container {
    width: auto;
    max-width: none;
    height: auto;
    padding-inline: calc(var(--spacing) * 0);
  }

  .navbar-toggle {
    color: var(--navbar-toggle-color);
  }

  .navbar-toggle svg {
    width: var(--navbar-toggle-size);
    height: var(--navbar-toggle-size);
  }

  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .tabs-outline {
    border: 1px solid var(--color-neutral-200);
    --tab-bg: var(--color-neutral);
    --tab-bg-hover: var(--color-neutral-100);
    --tab-bg-active: var(--color-primary-500);
    --tab-color: var(--color-neutral-800);
    --tab-color-active: var(--color-neutral);
    --tab-border-color: transparent;
    --tab-border-color-hover: transparent;
    --tab-border-color-active: transparent;
    --tab-border-width: 0;
    --tab-radius: calc(.5rem - 2px);
    background-color: #0000;
    border-radius: .5rem;
    flex-direction: row;
    gap: 0;
    padding: .125rem;
    padding-block: .125rem;
    overflow: hidden;
    box-shadow: 0 1px 2px #0000000d;
  }

  .tabs-outline .tab {
    height: auto;
    padding-block: .375rem;
    padding-inline: 1rem;
  }

  .tabs-outline .tab-active:hover {
    background-color: var(--color-primary-600);
    color: var(--tab-color-active);
  }

  .input {
    --tw-duration: .2s;
    padding-inline: var(--input-padding-inline);
    padding-block: var(--input-padding-block);
    height: var(--input-height);
    background-color: var(--input-bg);
    color: var(--input-color);
    border-width: var(--input-border-width);
    border-style: var(--input-border-style);
    border-color: var(--input-border-color);
    border-radius: var(--input-radius);
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    line-height: var(--input-line-height);
    outline: none;
    transition-duration: .2s;
  }

  .input::placeholder {
    color: var(--input-placeholder-color);
    opacity: 1;
  }

  @media (hover: hover) {
    .input:hover {
      background-color: var(--input-bg-hover);
      border-color: var(--input-border-color-hover);
    }
  }

  .input:focus {
    background-color: var(--input-bg-focus);
    border-color: var(--input-border-color-focus);
  }

  .h-1 {
    height: calc(var(--spacing) * 1);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-28 {
    height: calc(var(--spacing) * 28);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-36 {
    height: calc(var(--spacing) * 36);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-44 {
    height: calc(var(--spacing) * 44);
  }

  .h-48 {
    height: calc(var(--spacing) * 48);
  }

  .h-52 {
    height: calc(var(--spacing) * 52);
  }

  .h-56 {
    height: calc(var(--spacing) * 56);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-72 {
    height: calc(var(--spacing) * 72);
  }

  .h-80 {
    height: calc(var(--spacing) * 80);
  }

  .h-96 {
    height: calc(var(--spacing) * 96);
  }

  .h-100 {
    height: calc(var(--spacing) * 100);
  }

  .h-\[28rem\] {
    height: 28rem;
  }

  .h-\[32rem\] {
    height: 32rem;
  }

  .h-\[38rem\] {
    height: 38rem;
  }

  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .tabs-segmented {
    background-color: var(--color-neutral-100);
    --tab-bg: transparent;
    --tab-bg-hover: var(--color-neutral-200);
    --tab-bg-active: var(--color-neutral-200);
    --tab-color: var(--color-neutral-800);
    --tab-color-active: var(--color-neutral-800);
    --tab-border-color: transparent;
    --tab-border-color-hover: transparent;
    --tab-border-color-active: transparent;
    --tab-border-width: 0;
    --tab-radius: .5rem;
    border-radius: .5rem;
    flex-direction: column;
    gap: .25rem;
    padding: .375rem;
    padding-block: .375rem;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .tabs-segmented {
      flex-flow: wrap;
    }
  }

  .tabs-segmented .tab {
    justify-content: space-between;
    width: 100%;
    min-height: 2.5rem;
    padding-inline: .75rem;
  }

  @media (min-width: 768px) {
    .tabs-segmented .tab {
      justify-content: center;
      width: auto;
    }
  }

  .min-h-80 {
    min-height: calc(var(--spacing) * 80);
  }

  .min-h-screen {
    height: 100vh;
    max-height: 90vw;
  }

  @media (max-width: 767px) {
    .min-h-screen {
      max-height: 220vw;
    }
  }

  .accordion-collapse {
    width: var(--accordion-width);
    max-width: var(--accordion-max-width);
    border-width: var(--accordion-border-width);
    border-top-width: var(--accordion-border-top-width);
    border-right-width: var(--accordion-border-right-width);
    border-bottom-width: var(--accordion-border-bottom-width);
    border-left-width: var(--accordion-border-left-width);
    border-style: var(--accordion-border-style);
    border-color: var(--accordion-border-color);
    border-radius: var(--accordion-radius);
    background-color: var(--accordion-bg);
    transition: background-color .3s;
  }

  .accordion-collapse:has(details[open]) {
    background-color: var(--accordion-bg-open);
  }

  .accordion-collapse {
    --accordion-padding-inline: 0;
    --accordion-padding-block: var(--accordion-collapse-padding-block);
    --accordion-icon-size: var(--accordion-collapse-icon-size);
    --accordion-icon-color: var(--accordion-collapse-icon-color);
    --accordion-icon-color-open: var(--accordion-collapse-icon-color);
    --accordion-trigger-justify: flex-start;
    --accordion-body-margin-start: 2rem;
    --accordion-body-margin-end: var(--accordion-collapse-padding-block);
    --accordion-body-padding-inline-start: 1rem;
    --accordion-body-padding-block-end: 0;
    --accordion-body-border-start: var(--accordion-collapse-accent-width);
    --accordion-body-border-start-color: var(--accordion-collapse-accent-color);
    border-top-width: var(--accordion-collapse-divider-width);
    border-top-style: solid;
    border-top-color: var(--accordion-collapse-divider-color);
  }

  .accordion-outline {
    width: var(--accordion-width);
    max-width: var(--accordion-max-width);
    border-width: var(--accordion-border-width);
    border-top-width: var(--accordion-border-top-width);
    border-right-width: var(--accordion-border-right-width);
    border-bottom-width: var(--accordion-border-bottom-width);
    border-left-width: var(--accordion-border-left-width);
    border-style: var(--accordion-border-style);
    border-color: var(--accordion-border-color);
    border-radius: var(--accordion-radius);
    background-color: var(--accordion-bg);
    transition: background-color .3s;
  }

  .accordion-outline:has(details[open]) {
    background-color: var(--accordion-bg-open);
  }

  .accordion-outline {
    --accordion-radius: var(--accordion-outline-radius);
    --accordion-border-width: var(--accordion-outline-border-width);
    --accordion-border-top-width: var(--accordion-outline-border-width);
    --accordion-border-right-width: var(--accordion-outline-border-width);
    --accordion-border-bottom-width: var(--accordion-outline-border-width);
    --accordion-border-left-width: var(--accordion-outline-border-width);
    --accordion-border-color: var(--accordion-outline-border-color);
    --accordion-padding-inline: var(--accordion-outline-padding-inline);
    --accordion-padding-block: var(--accordion-outline-padding-block);
    --accordion-divider-color: var(--accordion-outline-border-color);
    --accordion-divider-width: var(--accordion-outline-border-width);
    --accordion-icon-size: var(--accordion-outline-icon-size);
    --accordion-icon-padding-inline: var(--accordion-outline-icon-padding-inline);
    --accordion-icon-padding-block: var(--accordion-outline-icon-padding-block);
    --accordion-icon-radius: var(--accordion-outline-icon-radius);
    --accordion-icon-bg: var(--accordion-outline-icon-bg);
    --accordion-icon-color: var(--accordion-outline-icon-color);
    --accordion-icon-bg-open: var(--accordion-outline-icon-bg-open);
    --accordion-icon-color-open: var(--accordion-outline-icon-color-open);
    --accordion-bg: var(--accordion-outline-bg);
    --accordion-bg-open: var(--accordion-outline-bg-open);
    --accordion-body-border-color: var(--accordion-outline-border-color);
    --accordion-body-padding-block-start: var(--accordion-outline-padding-block);
  }

  .accordion-card {
    width: var(--accordion-width);
    max-width: var(--accordion-max-width);
    border-width: var(--accordion-border-width);
    border-top-width: var(--accordion-border-top-width);
    border-right-width: var(--accordion-border-right-width);
    border-bottom-width: var(--accordion-border-bottom-width);
    border-left-width: var(--accordion-border-left-width);
    border-style: var(--accordion-border-style);
    border-color: var(--accordion-border-color);
    border-radius: var(--accordion-radius);
    background-color: var(--accordion-bg);
    transition: background-color .3s;
  }

  .accordion-card:has(details[open]) {
    background-color: var(--accordion-bg-open);
  }

  .accordion-card {
    --accordion-radius: var(--accordion-card-radius);
    --accordion-bg: var(--accordion-card-bg);
    --accordion-bg-open: var(--accordion-card-bg-open);
    --accordion-padding-inline: var(--accordion-card-padding-inline);
    --accordion-padding-block: var(--accordion-card-padding-block);
    --accordion-icon-padding-inline: var(--accordion-card-icon-padding-inline);
    --accordion-icon-padding-block: var(--accordion-card-icon-padding-block);
    --accordion-icon-radius: var(--accordion-card-icon-radius);
    --accordion-icon-color: var(--accordion-card-icon-color);
    --accordion-icon-color-open: var(--accordion-card-icon-color-open);
  }

  .accordion {
    width: var(--accordion-width);
    max-width: var(--accordion-max-width);
    border-width: var(--accordion-border-width);
    border-top-width: var(--accordion-border-top-width);
    border-right-width: var(--accordion-border-right-width);
    border-bottom-width: var(--accordion-border-bottom-width);
    border-left-width: var(--accordion-border-left-width);
    border-style: var(--accordion-border-style);
    border-color: var(--accordion-border-color);
    border-radius: var(--accordion-radius);
    background-color: var(--accordion-bg);
    transition: background-color .3s;
  }

  .accordion:has(details[open]) {
    background-color: var(--accordion-bg-open);
  }

  .w-1 {
    width: calc(var(--spacing) * 1);
  }

  .w-1\/2 {
    width: 50%;
  }

  .w-2\/3 {
    width: 66.6667%;
  }

  .w-2\/4 {
    width: 50%;
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\/4 {
    width: 75%;
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-5\/6 {
    width: 83.3333%;
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-7\/12 {
    width: 58.3333%;
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-36 {
    width: calc(var(--spacing) * 36);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-96 {
    width: calc(var(--spacing) * 96);
  }

  .w-100 {
    width: calc(var(--spacing) * 100);
  }

  .w-\[28rem\] {
    width: 28rem;
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-px {
    width: 1px;
  }

  .w-xl {
    width: var(--container-xl);
  }

  .w-xs {
    width: var(--container-xs);
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-6xl {
    max-width: var(--container-6xl);
  }

  .max-w-7xl {
    max-width: var(--container-7xl);
  }

  .max-w-\[140px\] {
    max-width: 140px;
  }

  .max-w-\[480px\] {
    max-width: 480px;
  }

  .max-w-full {
    max-width: 100%;
  }

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

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-screen-xl {
    max-width: var(--breakpoint-xl);
  }

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

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-\[600px\] {
    min-width: 600px;
  }

  .min-w-full {
    min-width: 100%;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .flex-grow, .grow {
    flex-grow: 1;
  }

  .table-auto {
    table-layout: auto;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .accordion-icon-plus path:last-child {
    transform-origin: center;
    transition: transform .3s;
  }

  details[open] .accordion-icon-plus path:last-child {
    transform: rotate(-90deg);
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .accordion__icon-arrow {
    transition: transform .3s;
  }

  details[open] .accordion__icon-arrow {
    transform: rotate(-180deg);
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .cursor-auto {
    cursor: auto;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .list-none {
    list-style-type: none;
  }

  .appearance-none {
    appearance: none;
  }

  .columns-1 {
    columns: 1;
  }

  .break-inside-avoid {
    break-inside: avoid;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .content-start {
    align-content: flex-start;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-around {
    justify-content: space-around;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-items-center {
    justify-items: center;
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }

  .gap-16 {
    gap: calc(var(--spacing) * 16);
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-10 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-12 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-16 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }

  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }

  .gap-x-16 {
    column-gap: calc(var(--spacing) * 16);
  }

  :where(.space-x-4 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
  }

  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }

  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }

  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }

  .gap-y-5 {
    row-gap: calc(var(--spacing) * 5);
  }

  .gap-y-6 {
    row-gap: calc(var(--spacing) * 6);
  }

  .gap-y-8 {
    row-gap: calc(var(--spacing) * 8);
  }

  .gap-y-10 {
    row-gap: calc(var(--spacing) * 10);
  }

  .gap-y-12 {
    row-gap: calc(var(--spacing) * 12);
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-y-2 > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(2px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-neutral-200 > :not(:last-child)) {
    border-color: var(--color-neutral-200);
  }

  .self-center {
    align-self: center;
  }

  .self-end {
    align-self: flex-end;
  }

  .self-start {
    align-self: flex-start;
  }

  .self-stretch {
    align-self: stretch;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-y-hidden {
    overflow-y: hidden;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-\[var\(--card-radius\)\] {
    border-radius: var(--card-radius);
  }

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

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

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

  .rounded-none {
    border-radius: 0;
  }

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

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-t-\[inherit\] {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
  }

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

  .rounded-l-none {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .rounded-tl-none {
    border-top-left-radius: 0;
  }

  .rounded-r-none {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

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

  .rounded-tr-none {
    border-top-right-radius: 0;
  }

  .rounded-b-lg {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-t-2 {
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
  }

  .border-t-4 {
    border-top-style: var(--tw-border-style);
    border-top-width: 4px;
  }

  .border-r-2 {
    border-right-style: var(--tw-border-style);
    border-right-width: 2px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }

  .border-current, .border-current\/10 {
    border-color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-current\/10 {
      border-color: color-mix(in oklab, currentcolor 10%, transparent);
    }
  }

  .border-neutral-200 {
    border-color: var(--color-neutral-200);
  }

  .border-primary-500 {
    border-color: var(--color-primary-500);
  }

  .border-transparent {
    border-color: #0000;
  }

  .tab-active {
    color: var(--tab-color-active);
    border-bottom-color: var(--tab-border-color-active);
    background-color: var(--tab-bg-active);
  }

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

  .bg-current {
    background-color: currentColor;
  }

  .bg-neutral-100 {
    background-color: var(--color-neutral-100);
  }

  .bg-neutral-200 {
    background-color: var(--color-neutral-200);
  }

  .bg-neutral-300 {
    background-color: var(--color-neutral-300);
  }

  .bg-neutral-800\/60 {
    background-color: #1e293999;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-neutral-800\/60 {
      background-color: color-mix(in oklab, var(--color-neutral-800) 60%, transparent);
    }
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-tr {
    --tw-gradient-position: to top right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .from-neutral-900\/80 {
    --tw-gradient-from: #101828cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-neutral-900\/80 {
      --tw-gradient-from: color-mix(in oklab, var(--color-neutral-900) 80%, transparent);
    }
  }

  .from-neutral-900\/80 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .bg-cover {
    background-size: cover;
  }

  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
  }

  .bg-center {
    background-position: center;
  }

  .bg-repeat {
    background-repeat: repeat;
  }

  .fill-current {
    fill: currentColor;
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .object-center {
    object-position: center;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .p-12 {
    padding: calc(var(--spacing) * 12);
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }

  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }

  .px-\[var\(--rem14\)\] {
    padding-inline: var(--rem14);
  }

  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }

  .py-32 {
    padding-block: calc(var(--spacing) * 32);
  }

  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }

  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }

  .pr-0 {
    padding-right: calc(var(--spacing) * 0);
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }

  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }

  .pl-0 {
    padding-left: calc(var(--spacing) * 0);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }

  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }

  .text-h1 {
    color: var(--h1-color);
    font-weight: var(--h1-font-weight);
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    text-transform: var(--h1-text-transform);
    text-align: var(--h1-text-align);
  }

  .text-h2 {
    color: var(--h2-color);
    font-weight: var(--h2-font-weight);
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    text-transform: var(--h2-text-transform);
    text-align: var(--h2-text-align);
  }

  .text-h3 {
    color: var(--h3-color);
    font-weight: var(--h3-font-weight);
    font-family: var(--h3-font-family);
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    text-transform: var(--h3-text-transform);
    text-align: var(--h3-text-align);
  }

  .text-h4 {
    color: var(--h4-color);
    font-weight: var(--h4-font-weight);
    font-family: var(--h4-font-family);
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
    text-transform: var(--h4-text-transform);
    text-align: var(--h4-text-align);
  }

  .text-h5 {
    color: var(--h5-color);
    font-weight: var(--h5-font-weight);
    font-family: var(--h5-font-family);
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height);
    text-transform: var(--h5-text-transform);
    text-align: var(--h5-text-align);
  }

  .text-h6 {
    color: var(--h6-color);
    font-weight: var(--h6-font-weight);
    font-family: var(--h6-font-family);
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height);
    text-transform: var(--h6-text-transform);
    text-align: var(--h6-text-align);
  }

  .text-body {
    color: var(--body-color);
    font-weight: var(--body-font-weight);
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    text-align: var(--body-text-align);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .align-text-bottom {
    vertical-align: text-bottom;
  }

  .text-label {
    color: var(--text-label-color);
    font-weight: var(--text-label-font-weight);
    font-family: var(--text-label-font-family);
    font-size: var(--text-label-font-size);
    line-height: var(--text-label-line-height);
    text-transform: var(--text-label-text-transform);
  }

  .text-quote {
    color: var(--text-quote-color);
    font-weight: var(--text-quote-font-weight);
    font-family: var(--text-quote-font-family);
    font-size: var(--text-quote-font-size);
    line-height: var(--text-quote-line-height);
    font-style: var(--text-quote-font-style);
  }

  .text-link {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .3s;
    color: var(--text-link-color);
    font-weight: var(--text-link-font-weight);
    font-family: var(--text-link-font-family);
    font-size: var(--text-link-font-size);
    line-height: var(--text-link-line-height);
    -webkit-text-decoration: var(--text-link-text-decoration);
    -webkit-text-decoration: var(--text-link-text-decoration);
    text-decoration: var(--text-link-text-decoration);
    transition-duration: .3s;
  }

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

  @media (hover: hover) {
    .text-link:hover {
      color: var(--text-link-color-hover);
    }
  }

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

  .text-nav {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .3s;
    color: var(--text-nav-color);
    font-weight: var(--text-nav-font-weight);
    font-family: var(--text-nav-font-family);
    font-size: var(--text-nav-font-size);
    line-height: var(--text-nav-line-height);
    transition-duration: .3s;
  }

  @media (hover: hover) {
    .text-nav:hover {
      color: var(--text-nav-color-hover);
    }
  }

  .text-nav[aria-current="page"], .text-nav.active {
    color: var(--text-nav-color-active);
  }

  .text-caption {
    color: var(--text-caption-color);
    font-weight: var(--text-caption-font-weight);
    font-family: var(--text-caption-font-family);
    font-size: var(--text-caption-font-size);
    line-height: var(--text-caption-line-height);
  }

  .text-lead {
    color: var(--text-lead-color);
    font-weight: var(--text-lead-font-weight);
    font-family: var(--text-lead-font-family);
    font-size: var(--text-lead-font-size);
    line-height: var(--text-lead-line-height);
  }

  .text-muted {
    color: var(--text-muted-color);
    font-weight: var(--text-muted-font-weight);
    font-family: var(--text-muted-font-family);
    font-size: var(--text-muted-font-size);
    line-height: var(--text-muted-line-height);
  }

  .text-name {
    color: var(--text-name-color);
    font-weight: var(--text-name-font-weight);
    font-family: var(--text-name-font-family);
    font-size: var(--text-name-font-size);
    line-height: var(--text-name-line-height);
  }

  .text-price {
    color: var(--text-price-color);
    font-weight: var(--text-price-font-weight);
    font-family: var(--text-price-font-family);
    font-size: var(--text-price-font-size);
    line-height: var(--text-price-line-height);
  }

  .text-small {
    color: var(--text-small-color);
    font-weight: var(--text-small-font-weight);
    font-family: var(--text-small-font-family);
    font-size: var(--text-small-font-size);
    line-height: var(--text-small-line-height);
  }

  .font-primary {
    font-family: var(--font-primary);
  }

  .font-secondary {
    font-family: var(--font-secondary);
  }

  .text-title-accent {
    color: var(--text-title-accent-color);
    font-size: var(--text-title-accent-font-size);
  }

  .text-display-xl {
    color: var(--text-display-xl-color);
    font-weight: var(--text-display-xl-font-weight);
    font-family: var(--text-display-xl-font-family);
    font-size: var(--text-display-xl-font-size);
    line-height: var(--text-display-xl-line-height);
  }

  .text-display-l {
    color: var(--text-display-l-color);
    font-weight: var(--text-display-l-font-weight);
    font-family: var(--text-display-l-font-family);
    font-size: var(--text-display-l-font-size);
    line-height: var(--text-display-l-line-height);
  }

  .text-overline {
    color: var(--text-overline-color);
    font-weight: var(--text-overline-font-weight);
    font-family: var(--text-overline-font-family);
    font-size: var(--text-overline-font-size);
    line-height: var(--text-overline-line-height);
    text-transform: var(--text-overline-text-transform);
  }

  .text-lead-font-size {
    font-size: var(--text-lead-font-size);
  }

  .text-nav-color {
    font-size: var(--text-nav-color);
  }

  .text-nav-color-hover {
    font-size: var(--text-nav-color-hover);
  }

  .text-nav-font-size {
    font-size: var(--text-nav-font-size);
  }

  .text-nav-font-weight {
    font-size: var(--text-nav-font-weight);
  }

  .text-price-font-size {
    font-size: var(--text-price-font-size);
  }

  .text-quote-font-size {
    font-size: var(--text-quote-font-size);
  }

  .text-small-color {
    font-size: var(--text-small-color);
  }

  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }

  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }

  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .leading-8 {
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

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

  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }

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

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .text-ellipsis {
    text-overflow: ellipsis;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .text-neutral-300 {
    color: var(--color-neutral-300);
  }

  .text-neutral-400 {
    color: var(--color-neutral-400);
  }

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

  .text-transparent {
    color: #0000;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .normal-case {
    text-transform: none;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .line-through {
    text-decoration-line: line-through;
  }

  .no-underline {
    text-decoration-line: none;
  }

  .overline {
    text-decoration-line: overline;
  }

  .underline {
    text-decoration-line: underline;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-10 {
    opacity: .1;
  }

  .opacity-20 {
    opacity: .2;
  }

  .opacity-25 {
    opacity: .25;
  }

  .opacity-30 {
    opacity: .3;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 2px var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring, .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-4 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-neutral-300 {
    --tw-ring-color: var(--color-neutral-300);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .-outline-offset-1 {
    outline-offset: calc(1px * -1);
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .blur-sm {
    --tw-blur: blur(var(--blur-sm));
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-700 {
    --tw-duration: .7s;
    transition-duration: .7s;
  }

  .duration-fast {
    --tw-duration: var(--transition-duration-fast);
    transition-duration: var(--transition-duration-fast);
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (hover: hover) {
    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }
  }

  .peer-checked\:bg-primary-500:is(:where(.peer):checked ~ *) {
    background-color: var(--color-primary-500);
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .after\:top-0\.5:after {
    content: var(--tw-content);
    top: calc(var(--spacing) * .5);
  }

  .after\:left-\[2px\]:after {
    content: var(--tw-content);
    left: 2px;
  }

  .after\:h-5:after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 5);
  }

  .after\:w-5:after {
    content: var(--tw-content);
    width: calc(var(--spacing) * 5);
  }

  .after\:rounded-full:after {
    content: var(--tw-content);
    border-radius: var(--radius-full);
  }

  .after\:transition-all:after {
    content: var(--tw-content);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .after\:content-\[\'\'\]:after {
    --tw-content: "";
    content: var(--tw-content);
  }

  .peer-checked\:after\:translate-x-full:is(:where(.peer):checked ~ *):after {
    content: var(--tw-content);
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .first\:pt-0:first-child {
    padding-top: calc(var(--spacing) * 0);
  }

  .last\:pb-0:last-child {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .focus-within\:ring:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  @media (hover: hover) {
    .hover\:border-transparent:hover {
      border-color: #0000;
    }

    .hover\:text-title-accent:hover {
      color: var(--text-title-accent-color);
      font-size: var(--text-title-accent-font-size);
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:opacity-100:hover {
      opacity: 1;
    }
  }

  .focus\:bg-transparent:focus {
    background-color: #0000;
  }

  .focus\:placeholder-transparent:focus::placeholder {
    color: #0000;
  }

  .focus\:ring:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-0:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (min-width: 768px) {
    .md\:fixed {
      position: fixed;
    }

    .md\:relative {
      position: relative;
    }

    .md\:top-0 {
      top: calc(var(--spacing) * 0);
    }

    .md\:order-2 {
      order: 2;
    }

    .md\:order-first {
      order: -9999;
    }

    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .md\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .md\:row-span-2 {
      grid-row: span 2 / span 2;
    }

    .md\:-m-2 {
      margin: calc(var(--spacing) * -2);
    }

    .md\:m-0 {
      margin: calc(var(--spacing) * 0);
    }

    .md\:-mx-2 {
      margin-inline: calc(var(--spacing) * -2);
    }

    .md\:-mx-3 {
      margin-inline: calc(var(--spacing) * -3);
    }

    .md\:-mx-4 {
      margin-inline: calc(var(--spacing) * -4);
    }

    .md\:-mx-5 {
      margin-inline: calc(var(--spacing) * -5);
    }

    .md\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }

    .md\:mx-2 {
      margin-inline: calc(var(--spacing) * 2);
    }

    .md\:mx-3 {
      margin-inline: calc(var(--spacing) * 3);
    }

    .md\:mx-4 {
      margin-inline: calc(var(--spacing) * 4);
    }

    .md\:mx-5 {
      margin-inline: calc(var(--spacing) * 5);
    }

    .md\:mx-6 {
      margin-inline: calc(var(--spacing) * 6);
    }

    .md\:mx-8 {
      margin-inline: calc(var(--spacing) * 8);
    }

    .md\:mx-10 {
      margin-inline: calc(var(--spacing) * 10);
    }

    .md\:mx-24 {
      margin-inline: calc(var(--spacing) * 24);
    }

    .md\:my-0 {
      margin-block: calc(var(--spacing) * 0);
    }

    .md\:my-8 {
      margin-block: calc(var(--spacing) * 8);
    }

    .md\:my-10 {
      margin-block: calc(var(--spacing) * 10);
    }

    .md\:-mt-96 {
      margin-top: calc(var(--spacing) * -96);
    }

    .md\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .md\:mt-4 {
      margin-top: calc(var(--spacing) * 4);
    }

    .md\:mt-8 {
      margin-top: calc(var(--spacing) * 8);
    }

    .md\:mt-14 {
      margin-top: calc(var(--spacing) * 14);
    }

    .md\:mt-16 {
      margin-top: calc(var(--spacing) * 16);
    }

    .md\:mr-0 {
      margin-right: calc(var(--spacing) * 0);
    }

    .md\:mr-auto {
      margin-right: auto;
    }

    .md\:mb-0 {
      margin-bottom: calc(var(--spacing) * 0);
    }

    .md\:mb-2 {
      margin-bottom: calc(var(--spacing) * 2);
    }

    .md\:ml-0 {
      margin-left: calc(var(--spacing) * 0);
    }

    .md\:ml-4 {
      margin-left: calc(var(--spacing) * 4);
    }

    .md\:ml-6 {
      margin-left: calc(var(--spacing) * 6);
    }

    .md\:ml-auto {
      margin-left: auto;
    }

    .md\:block {
      display: block;
    }

    .md\:flex {
      display: flex;
    }

    .md\:grid {
      display: grid;
    }

    .md\:hidden {
      display: none;
    }

    .md\:inline-flex {
      display: inline-flex;
    }

    .md\:h-9 {
      height: calc(var(--spacing) * 9);
    }

    .md\:h-36 {
      height: calc(var(--spacing) * 36);
    }

    .md\:h-48 {
      height: calc(var(--spacing) * 48);
    }

    .md\:h-56 {
      height: calc(var(--spacing) * 56);
    }

    .md\:h-64 {
      height: calc(var(--spacing) * 64);
    }

    .md\:h-72 {
      height: calc(var(--spacing) * 72);
    }

    .md\:h-80 {
      height: calc(var(--spacing) * 80);
    }

    .md\:h-96 {
      height: calc(var(--spacing) * 96);
    }

    .md\:h-\[32rem\] {
      height: 32rem;
    }

    .md\:h-\[450px\] {
      height: 450px;
    }

    .md\:h-auto {
      height: auto;
    }

    .md\:w-1\/2 {
      width: 50%;
    }

    .md\:w-1\/3 {
      width: 33.3333%;
    }

    .md\:w-1\/4 {
      width: 25%;
    }

    .md\:w-2\/3 {
      width: 66.6667%;
    }

    .md\:w-2\/5 {
      width: 40%;
    }

    .md\:w-3\/4 {
      width: 75%;
    }

    .md\:w-3\/5 {
      width: 60%;
    }

    .md\:w-3\/6 {
      width: 50%;
    }

    .md\:w-9 {
      width: calc(var(--spacing) * 9);
    }

    .md\:w-32 {
      width: calc(var(--spacing) * 32);
    }

    .md\:w-40 {
      width: calc(var(--spacing) * 40);
    }

    .md\:w-48 {
      width: calc(var(--spacing) * 48);
    }

    .md\:w-64 {
      width: calc(var(--spacing) * 64);
    }

    .md\:w-72 {
      width: calc(var(--spacing) * 72);
    }

    .md\:w-80 {
      width: calc(var(--spacing) * 80);
    }

    .md\:w-96 {
      width: calc(var(--spacing) * 96);
    }

    .md\:w-auto {
      width: auto;
    }

    .md\:w-fit {
      width: fit-content;
    }

    .md\:w-full {
      width: 100%;
    }

    .md\:max-w-md {
      max-width: var(--container-md);
    }

    .md\:shrink-0 {
      flex-shrink: 0;
    }

    .md\:flex-grow {
      flex-grow: 1;
    }

    .md\:columns-2 {
      columns: 2;
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .md\:grid-cols-\[1fr_auto\] {
      grid-template-columns: 1fr auto;
    }

    .md\:flex-col {
      flex-direction: column;
    }

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:flex-row-reverse {
      flex-direction: row-reverse;
    }

    .md\:flex-nowrap {
      flex-wrap: nowrap;
    }

    .md\:items-center {
      align-items: center;
    }

    .md\:items-end {
      align-items: flex-end;
    }

    .md\:items-start {
      align-items: flex-start;
    }

    .md\:justify-between {
      justify-content: space-between;
    }

    .md\:justify-center {
      justify-content: center;
    }

    .md\:justify-end {
      justify-content: flex-end;
    }

    .md\:justify-evenly {
      justify-content: space-evenly;
    }

    .md\:justify-start {
      justify-content: flex-start;
    }

    .md\:justify-items-stretch {
      justify-items: stretch;
    }

    .md\:gap-0 {
      gap: calc(var(--spacing) * 0);
    }

    .md\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .md\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .md\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }

    .md\:gap-10 {
      gap: calc(var(--spacing) * 10);
    }

    .md\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }

    :where(.md\:space-y-0 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
    }

    .md\:gap-x-8 {
      column-gap: calc(var(--spacing) * 8);
    }

    .md\:gap-y-8 {
      row-gap: calc(var(--spacing) * 8);
    }

    .md\:gap-y-10 {
      row-gap: calc(var(--spacing) * 10);
    }

    .md\:self-auto {
      align-self: auto;
    }

    .md\:rounded-2xl {
      border-radius: var(--radius-2xl);
    }

    .md\:rounded-\[var\(--card-radius\)\] {
      border-radius: var(--card-radius);
    }

    .md\:border-x {
      border-inline-style: var(--tw-border-style);
      border-inline-width: 1px;
    }

    .md\:border-r {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }

    .md\:border-b-0 {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0;
    }

    .md\:border-l {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }

    .md\:border-neutral-200 {
      border-color: var(--color-neutral-200);
    }

    .md\:border-neutral-300 {
      border-color: var(--color-neutral-300);
    }

    .md\:bg-transparent {
      background-color: #0000;
    }

    .md\:p-0 {
      padding: calc(var(--spacing) * 0);
    }

    .md\:p-2 {
      padding: calc(var(--spacing) * 2);
    }

    .md\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .md\:p-12 {
      padding: calc(var(--spacing) * 12);
    }

    .md\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .md\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .md\:px-12 {
      padding-inline: calc(var(--spacing) * 12);
    }

    .md\:py-1 {
      padding-block: calc(var(--spacing) * 1);
    }

    .md\:py-3 {
      padding-block: calc(var(--spacing) * 3);
    }

    .md\:py-4 {
      padding-block: calc(var(--spacing) * 4);
    }

    .md\:py-6 {
      padding-block: calc(var(--spacing) * 6);
    }

    .md\:py-8 {
      padding-block: calc(var(--spacing) * 8);
    }

    .md\:py-20 {
      padding-block: calc(var(--spacing) * 20);
    }

    .md\:py-24 {
      padding-block: calc(var(--spacing) * 24);
    }

    .md\:pr-10 {
      padding-right: calc(var(--spacing) * 10);
    }

    .md\:pr-12 {
      padding-right: calc(var(--spacing) * 12);
    }

    .md\:pr-16 {
      padding-right: calc(var(--spacing) * 16);
    }

    .md\:pr-20 {
      padding-right: calc(var(--spacing) * 20);
    }

    .md\:pb-24 {
      padding-bottom: calc(var(--spacing) * 24);
    }

    .md\:pl-4 {
      padding-left: calc(var(--spacing) * 4);
    }

    .md\:pl-6 {
      padding-left: calc(var(--spacing) * 6);
    }

    .md\:pl-8 {
      padding-left: calc(var(--spacing) * 8);
    }

    .md\:pl-12 {
      padding-left: calc(var(--spacing) * 12);
    }

    .md\:pl-16 {
      padding-left: calc(var(--spacing) * 16);
    }

    .md\:pl-20 {
      padding-left: calc(var(--spacing) * 20);
    }

    .md\:text-center {
      text-align: center;
    }

    .md\:text-left {
      text-align: left;
    }

    .md\:text-right {
      text-align: right;
    }
  }

  @media (min-width: 1024px) {
    .lg\:absolute {
      position: absolute;
    }

    .lg\:sticky {
      position: sticky;
    }

    .lg\:inset-x-0 {
      inset-inline: calc(var(--spacing) * 0);
    }

    .lg\:top-8 {
      top: calc(var(--spacing) * 8);
    }

    .lg\:top-24 {
      top: calc(var(--spacing) * 24);
    }

    .lg\:order-2 {
      order: 2;
    }

    .lg\:order-none {
      order: 0;
    }

    .lg\:col-span-1 {
      grid-column: span 1 / span 1;
    }

    .lg\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .lg\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .lg\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .lg\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .lg\:col-span-7 {
      grid-column: span 7 / span 7;
    }

    .lg\:col-span-8 {
      grid-column: span 8 / span 8;
    }

    .lg\:m-0 {
      margin: calc(var(--spacing) * 0);
    }

    .lg\:-mx-4 {
      margin-inline: calc(var(--spacing) * -4);
    }

    .lg\:-mx-6 {
      margin-inline: calc(var(--spacing) * -6);
    }

    .lg\:-mx-10 {
      margin-inline: calc(var(--spacing) * -10);
    }

    .lg\:-mx-12 {
      margin-inline: calc(var(--spacing) * -12);
    }

    .lg\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }

    .lg\:mx-2 {
      margin-inline: calc(var(--spacing) * 2);
    }

    .lg\:mx-4 {
      margin-inline: calc(var(--spacing) * 4);
    }

    .lg\:mx-6 {
      margin-inline: calc(var(--spacing) * 6);
    }

    .lg\:mx-8 {
      margin-inline: calc(var(--spacing) * 8);
    }

    .lg\:mx-10 {
      margin-inline: calc(var(--spacing) * 10);
    }

    .lg\:mx-12 {
      margin-inline: calc(var(--spacing) * 12);
    }

    .lg\:my-0 {
      margin-block: calc(var(--spacing) * 0);
    }

    .lg\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .lg\:mt-2 {
      margin-top: calc(var(--spacing) * 2);
    }

    .lg\:mt-8 {
      margin-top: calc(var(--spacing) * 8);
    }

    .lg\:mt-12 {
      margin-top: calc(var(--spacing) * 12);
    }

    .lg\:mt-16 {
      margin-top: calc(var(--spacing) * 16);
    }

    .lg\:mt-20 {
      margin-top: calc(var(--spacing) * 20);
    }

    .lg\:mr-0 {
      margin-right: calc(var(--spacing) * 0);
    }

    .lg\:mb-0 {
      margin-bottom: calc(var(--spacing) * 0);
    }

    .lg\:ml-0 {
      margin-left: calc(var(--spacing) * 0);
    }

    .lg\:ml-4 {
      margin-left: calc(var(--spacing) * 4);
    }

    .lg\:ml-auto {
      margin-left: auto;
    }

    .lg\:block {
      display: block;
    }

    .lg\:flex {
      display: flex;
    }

    .lg\:grid {
      display: grid;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:inline-block {
      display: inline-block;
    }

    .lg\:inline-flex {
      display: inline-flex;
    }

    .lg\:h-48 {
      height: calc(var(--spacing) * 48);
    }

    .lg\:h-56 {
      height: calc(var(--spacing) * 56);
    }

    .lg\:h-80 {
      height: calc(var(--spacing) * 80);
    }

    .lg\:h-96 {
      height: calc(var(--spacing) * 96);
    }

    .lg\:h-\[32rem\] {
      height: 32rem;
    }

    .lg\:h-\[36rem\] {
      height: 36rem;
    }

    .lg\:h-auto {
      height: auto;
    }

    .lg\:h-full {
      height: 100%;
    }

    .lg\:min-h-0 {
      min-height: calc(var(--spacing) * 0);
    }

    .lg\:w-1\/2 {
      width: 50%;
    }

    .lg\:w-1\/3 {
      width: 33.3333%;
    }

    .lg\:w-1\/4 {
      width: 25%;
    }

    .lg\:w-1\/5 {
      width: 20%;
    }

    .lg\:w-1\/6 {
      width: 16.6667%;
    }

    .lg\:w-2\/3 {
      width: 66.6667%;
    }

    .lg\:w-2\/5 {
      width: 40%;
    }

    .lg\:w-2\/6 {
      width: 33.3333%;
    }

    .lg\:w-3\/4 {
      width: 75%;
    }

    .lg\:w-3\/5 {
      width: 60%;
    }

    .lg\:w-4\/5 {
      width: 80%;
    }

    .lg\:w-4\/6 {
      width: 66.6667%;
    }

    .lg\:w-5\/12 {
      width: 41.6667%;
    }

    .lg\:w-7\/12 {
      width: 58.3333%;
    }

    .lg\:w-56 {
      width: calc(var(--spacing) * 56);
    }

    .lg\:w-64 {
      width: calc(var(--spacing) * 64);
    }

    .lg\:w-72 {
      width: calc(var(--spacing) * 72);
    }

    .lg\:w-80 {
      width: calc(var(--spacing) * 80);
    }

    .lg\:w-96 {
      width: calc(var(--spacing) * 96);
    }

    .lg\:w-\[26rem\] {
      width: 26rem;
    }

    .lg\:w-\[32rem\] {
      width: 32rem;
    }

    .lg\:w-auto {
      width: auto;
    }

    .lg\:w-full {
      width: 100%;
    }

    .lg\:max-w-2xl {
      max-width: var(--container-2xl);
    }

    .lg\:max-w-3xl {
      max-width: var(--container-3xl);
    }

    .lg\:max-w-5xl {
      max-width: var(--container-5xl);
    }

    .lg\:max-w-6xl {
      max-width: var(--container-6xl);
    }

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

    .lg\:max-w-sm {
      max-width: var(--container-sm);
    }

    .lg\:max-w-xl {
      max-width: var(--container-xl);
    }

    .lg\:max-w-xs {
      max-width: var(--container-xs);
    }

    .lg\:flex-1 {
      flex: 1;
    }

    .lg\:flex-grow {
      flex-grow: 1;
    }

    .lg\:scale-105 {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .lg\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lg\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[0\.9fr_1\.1fr\] {
      grid-template-columns: .9fr 1.1fr;
    }

    .lg\:grid-cols-\[1\.1fr_1fr\] {
      grid-template-columns: 1.1fr 1fr;
    }

    .lg\:grid-cols-\[1fr_1\.1fr\] {
      grid-template-columns: 1fr 1.1fr;
    }

    .lg\:grid-cols-\[1fr_auto\] {
      grid-template-columns: 1fr auto;
    }

    .lg\:flex-col {
      flex-direction: column;
    }

    .lg\:flex-row {
      flex-direction: row;
    }

    .lg\:flex-row-reverse {
      flex-direction: row-reverse;
    }

    .lg\:flex-wrap {
      flex-wrap: wrap;
    }

    .lg\:items-center {
      align-items: center;
    }

    .lg\:items-end {
      align-items: flex-end;
    }

    .lg\:items-start {
      align-items: flex-start;
    }

    .lg\:items-stretch {
      align-items: stretch;
    }

    .lg\:justify-between {
      justify-content: space-between;
    }

    .lg\:justify-center {
      justify-content: center;
    }

    .lg\:justify-end {
      justify-content: flex-end;
    }

    .lg\:justify-start {
      justify-content: flex-start;
    }

    .lg\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .lg\:gap-10 {
      gap: calc(var(--spacing) * 10);
    }

    .lg\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }

    .lg\:gap-16 {
      gap: calc(var(--spacing) * 16);
    }

    .lg\:gap-28 {
      gap: calc(var(--spacing) * 28);
    }

    :where(.lg\:space-y-0 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.lg\:space-y-3 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }

    .lg\:self-auto {
      align-self: auto;
    }

    .lg\:self-start {
      align-self: flex-start;
    }

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

    .lg\:rounded-l-lg {
      border-top-left-radius: var(--radius-lg);
      border-bottom-left-radius: var(--radius-lg);
    }

    .lg\:rounded-tr-none {
      border-top-right-radius: 0;
    }

    .lg\:border-l {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }

    .lg\:border-current\/10 {
      border-color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .lg\:border-current\/10 {
        border-color: color-mix(in oklab, currentcolor 10%, transparent);
      }
    }

    .lg\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .lg\:p-12 {
      padding: calc(var(--spacing) * 12);
    }

    .lg\:p-16 {
      padding: calc(var(--spacing) * 16);
    }

    .lg\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .lg\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }

    .lg\:px-12 {
      padding-inline: calc(var(--spacing) * 12);
    }

    .lg\:py-6 {
      padding-block: calc(var(--spacing) * 6);
    }

    .lg\:py-12 {
      padding-block: calc(var(--spacing) * 12);
    }

    .lg\:py-16 {
      padding-block: calc(var(--spacing) * 16);
    }

    .lg\:py-44 {
      padding-block: calc(var(--spacing) * 44);
    }

    .lg\:pr-0 {
      padding-right: calc(var(--spacing) * 0);
    }

    .lg\:pr-10 {
      padding-right: calc(var(--spacing) * 10);
    }

    .lg\:pr-24 {
      padding-right: calc(var(--spacing) * 24);
    }

    .lg\:pl-6 {
      padding-left: calc(var(--spacing) * 6);
    }

    .lg\:pl-8 {
      padding-left: calc(var(--spacing) * 8);
    }

    .lg\:pl-10 {
      padding-left: calc(var(--spacing) * 10);
    }

    .lg\:pl-12 {
      padding-left: calc(var(--spacing) * 12);
    }

    .lg\:pl-24 {
      padding-left: calc(var(--spacing) * 24);
    }

    .lg\:text-left {
      text-align: left;
    }

    .lg\:text-right {
      text-align: right;
    }

    .lg\:shadow-md {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  @media (min-width: 1440px) {
    .xl\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .xl\:-mx-8 {
      margin-inline: calc(var(--spacing) * -8);
    }

    .xl\:mx-4 {
      margin-inline: calc(var(--spacing) * 4);
    }

    .xl\:mx-8 {
      margin-inline: calc(var(--spacing) * 8);
    }

    .xl\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .xl\:mt-6 {
      margin-top: calc(var(--spacing) * 6);
    }

    .xl\:mt-8 {
      margin-top: calc(var(--spacing) * 8);
    }

    .xl\:mt-10 {
      margin-top: calc(var(--spacing) * 10);
    }

    .xl\:mt-12 {
      margin-top: calc(var(--spacing) * 12);
    }

    .xl\:mt-14 {
      margin-top: calc(var(--spacing) * 14);
    }

    .xl\:mt-16 {
      margin-top: calc(var(--spacing) * 16);
    }

    .xl\:mr-4 {
      margin-right: calc(var(--spacing) * 4);
    }

    .xl\:block {
      display: block;
    }

    .xl\:flex {
      display: flex;
    }

    .xl\:grid {
      display: grid;
    }

    .xl\:h-10 {
      height: calc(var(--spacing) * 10);
    }

    .xl\:h-80 {
      height: calc(var(--spacing) * 80);
    }

    .xl\:h-\[28rem\] {
      height: 28rem;
    }

    .xl\:h-\[34rem\] {
      height: 34rem;
    }

    .xl\:w-1\/2 {
      width: 50%;
    }

    .xl\:w-1\/3 {
      width: 33.3333%;
    }

    .xl\:w-1\/4 {
      width: 25%;
    }

    .xl\:w-2\/4 {
      width: 50%;
    }

    .xl\:w-48 {
      width: calc(var(--spacing) * 48);
    }

    .xl\:w-80 {
      width: calc(var(--spacing) * 80);
    }

    .xl\:w-\[34rem\] {
      width: 34rem;
    }

    .xl\:columns-3 {
      columns: 3;
    }

    .xl\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .xl\:flex-row {
      flex-direction: row;
    }

    .xl\:flex-nowrap {
      flex-wrap: nowrap;
    }

    .xl\:items-center {
      align-items: center;
    }

    .xl\:items-start {
      align-items: flex-start;
    }

    .xl\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .xl\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }

    .xl\:gap-10 {
      gap: calc(var(--spacing) * 10);
    }

    .xl\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }

    .xl\:gap-16 {
      gap: calc(var(--spacing) * 16);
    }

    :where(.xl\:space-y-8 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.xl\:space-y-12 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.xl\:space-y-20 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 20) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 20) * calc(1 - var(--tw-space-y-reverse)));
    }

    .xl\:gap-x-16 {
      column-gap: calc(var(--spacing) * 16);
    }

    .xl\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .xl\:p-12 {
      padding: calc(var(--spacing) * 12);
    }

    .xl\:px-24 {
      padding-inline: calc(var(--spacing) * 24);
    }

    .xl\:px-32 {
      padding-inline: calc(var(--spacing) * 32);
    }

    .xl\:py-32 {
      padding-block: calc(var(--spacing) * 32);
    }
  }

  .rtl\:-scale-x-100:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    --tw-scale-x: calc(100% * -1);
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  @media (prefers-color-scheme: dark) {
    @media (hover: hover) {
      .dark\:hover\:border-transparent:hover {
        border-color: #0000;
      }
    }
  }

  .container {
    display: var(--container-display);
    flex-direction: var(--container-direction);
    grid-auto-flow: var(--container-direction);
    gap: var(--container-gap);
    position: var(--container-position);
    overflow: var(--container-overflow);
    background-color: var(--container-bg);
    background-image: var(--container-bg-image);
    background-size: var(--container-bg-size);
    background-position: var(--container-bg-position);
    background-repeat: var(--container-bg-repeat);
    border-radius: var(--container-radius);
    min-height: var(--container-min-height);
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-block-start: var(--container-padding-block-start, var(--container-padding-block, var(--container-padding, 2rem)));
    padding-block-end: var(--container-padding-block-end, var(--container-padding-block, var(--container-padding, 2rem)));
    padding-inline-start: var(--container-padding-inline-start, var(--container-padding-inline, var(--container-padding, 1.5rem)));
    padding-inline-end: var(--container-padding-inline-end, var(--container-padding-inline, var(--container-padding, 1.5rem)));
  }
}

:root {
  background-color: var(--color-background);
  font-family: var(--font-primary);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  color: var(--body-color);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
  :root, :host {
    --h1-font-size: 3rem;
    --h2-font-size: 2.25rem;
    --h3-font-size: 1.5rem;
    --h4-font-size: 1.25rem;
    --text-lead-font-size: 1.25rem;
    --text-price-font-size: 1.875rem;
  }
}

.banner {
  justify-content: var(--banner-justify-content);
  min-height: var(--banner-min-height);
  width: 100%;
  max-width: var(--banner-max-width);
  background: var(--banner-bg);
  border-radius: var(--banner-radius);
  margin-block-end: var(--banner-margin-block-end);
  margin-inline: auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

.banner__content {
  z-index: var(--banner-content-z-index);
  width: var(--banner-content-width);
  padding-top: var(--banner-content-padding-top);
  padding-right: var(--banner-content-padding-right);
  padding-bottom: var(--banner-content-padding-bottom);
  padding-left: var(--banner-content-padding-left);
  position: relative;
}

.banner__title {
  font-family: var(--banner-title-font-family);
  font-size: var(--banner-title-font-size);
  font-weight: var(--banner-title-font-weight);
  line-height: var(--banner-title-line-height);
  color: var(--banner-title-color);
  text-transform: var(--banner-title-text-transform);
  text-align: var(--banner-title-text-align);
  margin-block-end: var(--banner-title-margin-block-end);
}

.banner__description {
  font-size: var(--banner-description-font-size);
  line-height: var(--banner-description-line-height);
  color: var(--banner-description-color);
  text-align: var(--banner-description-text-align);
  margin-block-start: var(--banner-description-margin-block-start);
  margin-block-end: var(--banner-description-margin-block-end);
}

.banner__example {
  font-size: var(--banner-example-font-size);
  line-height: var(--banner-example-line-height);
  color: var(--banner-example-color);
  text-align: var(--banner-example-text-align);
  margin-block-start: var(--banner-example-margin-block-start);
  margin-block-end: var(--banner-example-margin-block-end);
}

.banner__media, .banner__media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.banner__media {
  background-color: var(--banner-media-bg);
}

.banner[class*="banner--"] {
  min-height: auto;
  padding-inline: var(--banner-padding-inline);
  padding-block: var(--banner-padding-block);
}

.banner__inner {
  z-index: var(--banner-content-z-index);
  width: min(100%, var(--banner-inner-max-width));
  margin-inline: var(--banner-inner-margin-inline);
  gap: var(--banner-gap);
  align-items: center;
  display: grid;
  position: relative;
}

.banner[class*="banner--"] .banner__content {
  width: 100%;
  max-width: var(--banner-content-max-width);
  padding: 0;
}

.banner__badge {
  border-radius: var(--banner-badge-radius);
  background: var(--banner-badge-bg);
  color: var(--banner-badge-color);
  padding-inline: var(--banner-badge-padding-inline);
  padding-block: var(--banner-badge-padding-block);
  font-size: var(--banner-badge-font-size);
  font-weight: var(--banner-badge-font-weight);
  line-height: 1.2;
  display: inline-block;
}

.banner__actions {
  flex-wrap: wrap;
  gap: .75rem;
  margin-block-start: 1.25rem;
  display: flex;
}

.banner__meta {
  color: var(--banner-muted-color);
  font-size: var(--text-small-font-size);
  line-height: var(--text-small-line-height);
  margin: .875rem 0 0;
}

.banner__panel {
  border-radius: var(--banner-panel-radius);
  border: var(--banner-panel-border-width) solid var(--banner-panel-border-color);
  background: var(--banner-panel-bg);
  box-shadow: var(--banner-panel-shadow);
  padding-inline: var(--banner-panel-padding-inline);
  padding-block: var(--banner-panel-padding-block);
}

.banner__panel-grid {
  grid-template-columns: 1fr;
  gap: .75rem;
  display: grid;
}

.banner__chips {
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-start: 1rem;
  display: flex;
}

.banner__chip {
  border-radius: var(--banner-chip-radius);
  border: 1px solid var(--banner-chip-border-color);
  background: var(--banner-chip-bg);
  color: var(--banner-chip-color);
  padding-inline: var(--banner-chip-padding-inline);
  padding-block: var(--banner-chip-padding-block);
  font-size: var(--banner-chip-font-size);
  line-height: 1.3;
  display: inline-block;
}

.banner__list {
  gap: .625rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.banner__list-item {
  color: var(--banner-muted-color);
  padding-inline-start: 1.125rem;
  position: relative;
}

.banner__list-item:before {
  content: "";
  border-radius: var(--radius-full);
  background: var(--banner-list-marker-bg);
  width: .5rem;
  height: .5rem;
  position: absolute;
  top: .55em;
  left: 0;
}

.banner__stats {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.banner__stat {
  border-radius: var(--banner-stat-radius);
  border: var(--banner-stat-border-width) solid var(--banner-stat-border-color);
  background: var(--banner-stat-bg);
  padding-inline: var(--banner-stat-padding-inline);
  padding-block: var(--banner-stat-padding-block);
}

.banner__stat-value {
  color: var(--banner-stat-value-color);
  font-family: var(--font-secondary);
  font-size: max(1.5rem, 12px);
  font-weight: 700;
  line-height: 1.05;
  display: block;
}

.banner__stat-label {
  color: var(--banner-stat-label-color);
  margin-top: .35rem;
  font-size: max(.8125rem, 12px);
  line-height: 1.3;
  display: block;
}

.banner__form {
  gap: .75rem;
  margin-top: 1rem;
  display: grid;
}

.banner__input {
  border-radius: var(--banner-input-radius);
  border: 1px solid var(--banner-input-border-color);
  background: var(--banner-input-bg);
  width: 100%;
  color: var(--banner-input-color);
  padding-inline: var(--banner-input-padding-inline);
  padding-block: var(--banner-input-padding-block);
}

.banner__input::placeholder {
  color: var(--banner-muted-color);
}

.banner__price {
  color: var(--banner-stat-value-color);
  font-family: var(--font-secondary);
  margin-top: .75rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.banner__price-note {
  color: var(--banner-muted-color);
  margin-top: .25rem;
  font-size: .8125rem;
  line-height: 1.3;
  display: block;
}

.banner__timer {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .625rem;
  margin-top: 1rem;
  display: grid;
}

.banner__timer-item {
  border-radius: var(--banner-timer-radius);
  border: var(--banner-timer-border-width) solid var(--banner-timer-border-color);
  background: var(--banner-timer-bg);
  text-align: center;
  padding: .625rem .5rem;
}

.banner__timer-item strong {
  color: var(--banner-timer-value-color);
  font-family: var(--font-secondary);
  font-size: 1.125rem;
  line-height: 1;
  display: block;
}

.banner__timer-item span {
  color: var(--banner-timer-label-color);
  margin-top: .3rem;
  font-size: .75rem;
  line-height: 1.2;
  display: block;
}

.banner[class*="banner--"] .banner__media {
  border-radius: max(0px, calc(var(--banner-radius)  - .5rem));
  min-height: 16rem;
  position: relative;
  top: auto;
  left: auto;
  overflow: hidden;
}

.banner[class*="banner--"] .banner__media img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.banner--split-offer .banner__inner, .banner--media-left .banner__inner {
  grid-template-columns: 1fr;
}

.banner--centered-cta .banner__inner, .banner--feature-grid .banner__inner, .banner--newsletter-compact .banner__inner, .banner--countdown-offer .banner__inner {
  text-align: center;
  justify-items: center;
}

.banner.banner--centered-cta {
  --banner-title-text-align: center;
  --banner-description-text-align: center;
}

.banner.banner--centered-cta .banner__content {
  text-align: center;
  margin-inline: auto;
}

.banner.banner--centered-cta .banner__actions, .banner.banner--centered-cta .banner__chips {
  justify-content: center;
}

.banner--media-left .banner__media {
  order: -1;
}

.banner--announcement-strip .banner__inner, .banner--minimal-inline .banner__inner {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.banner--announcement-strip .banner__actions, .banner--minimal-inline .banner__actions {
  margin-top: 0;
}

.banner.banner--floating-card .banner__inner {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.banner.banner--floating-card {
  --banner-panel-padding-inline: var(--card-padding-inline);
  --banner-panel-padding-block: var(--card-padding-block);
}

.banner.banner--floating-card .banner__panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  max-width: none;
  margin-inline: 0;
}

.banner.banner--floating-card .banner__panel.banner__content {
  padding-inline: var(--banner-panel-padding-inline);
  padding-block: var(--banner-panel-padding-block);
}

.banner.banner--floating-card .banner__media {
  min-height: 18rem;
}

@media not all and (min-width: 768px) {
  .banner--feature-grid .banner__actions, .banner--countdown-offer .banner__actions, .banner--offer-grid .banner__actions, .banner--announcement-strip .banner__actions, .banner--minimal-inline .banner__actions {
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .banner[class*="banner--"] {
    --banner-padding-inline: 1.5rem;
    --banner-padding-block: 1.5rem;
    --banner-gap: 1.5rem;
  }

  .banner--split-offer .banner__inner, .banner--media-left .banner__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  }

  .banner--offer-grid .banner__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }

  .banner--announcement-strip .banner__inner, .banner--minimal-inline .banner__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
  }

  .banner--newsletter-compact .banner__form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .banner.banner--floating-card .banner__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .banner.banner--floating-card .banner__media {
    min-height: 20rem;
  }
}

@media (min-width: 1024px) {
  .banner[class*="banner--"] {
    --banner-padding-inline: 2rem;
    --banner-padding-block: 2rem;
    --banner-gap: 2rem;
  }

  .banner--feature-grid .banner__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .banner--offer-grid .banner__panel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .banner.banner--floating-card .banner__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }

  .banner.banner--floating-card .banner__panel {
    max-width: none;
  }

  .banner.banner--floating-card .banner__media {
    min-height: 22rem;
  }
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}


:root {
	/* ======================== */
	/* === colors            === */
	/* ======================== */

	--color-primary-50: #f8f6fe;
	--color-primary-100: #f1edfd;
	--color-primary-200: #ddd2fa;
	--color-primary-300: #baa5f4;
	--color-primary-400: #9878ef;
	--color-primary-500: #754be9;
	--color-primary-600: #6340c6;
	--color-primary-700: #5235a3;
	--color-primary-800: #402980;
	--color-primary-900: #2f1e5d;
	--color-primary-950: #1d133a;

	--color-neutral: #090714;
	--color-neutral-100: #f0f1f6;
	--color-neutral-200: #e2e3e8;
	--color-neutral-300: #d0d1d7;
	--color-neutral-400: #acadb3;
	--color-neutral-500: #8e9099;
	--color-neutral-600: #6b6d77;
	--color-neutral-700: #4b4d55;
	--color-neutral-800: #33353d;
	--color-neutral-900: #1c1e26;

	--color-background: #ffffff;
	--color-surface: #f5f5f5;

	--divider-color: rgba(9, 7, 20, 0.08);

	--overlay-dark: #00000080;
	--overlay-gradient: linear-gradient(to top, #0009, transparent 70%);
	--overlay-light: rgba(255, 255, 255, 0.9);

	/* ======================== */
	/* === fonts             === */
	/* ======================== */

	--font-primary: "Suisse Intl", Inter, -apple-system, "Segoe UI", roboto, sans-serif;
	--font-secondary: "Grtsk Giga", "Suisse Intl", Inter, -apple-system, sans-serif;

	/* ======================== */
	/* === typography: body  === */
	/* ======================== */

	--body-color: var(--color-neutral-500);
	--body-font-weight: 400;
	--body-font-family: var(--font-primary);
	

	--body-line-height: 1.5;
	--body-letter-spacing: 0;
	--body-text-align: inherit;

	/* ======================== */
	/* === typography: h1    === */
	/* ======================== */

	--h1-color: var(--color-neutral-800);
	--h1-font-weight: 700;
	--h1-font-family: var(--font-primary);

	--h1-line-height: 1.15;
	--h1-letter-spacing: -0.01em;
	--h1-text-transform: none;
	--h1-text-align: inherit;

	/* ======================== */
	/* === typography: h2    === */
	/* ======================== */

	--h2-color: var(--color-neutral-800);
	--h2-font-weight: 700;
	--h2-font-family: var(--font-primary);

	--h2-line-height: 1.15;
	--h2-letter-spacing: -0.01em;
	--h2-text-transform: none;
	--h2-text-align: inherit;

	/* ======================== */
	/* === typography: h3    === */
	/* ======================== */

	--h3-color: var(--color-neutral-800);
	--h3-font-weight: 600;
	--h3-font-family: var(--font-primary);

	--h3-line-height: 1.2;
	--h3-letter-spacing: 0;
	--h3-text-transform: none;
	--h3-text-align: inherit;

	/* ======================== */
	/* === typography: h4    === */
	/* ======================== */

	--h4-color: var(--color-neutral-800);
	--h4-font-weight: 600;
	--h4-font-family: var(--font-primary);

	--h4-line-height: 1.25;
	--h4-letter-spacing: 0;
	--h4-text-transform: none;
	--h4-text-align: inherit;

	/* ======================== */
	/* === typography: h5    === */
	/* ======================== */

	--h5-color: var(--color-neutral-800);
	--h5-font-weight: 600;
	--h5-font-family: var(--font-primary);

	--h5-line-height: 1.3;
	--h5-letter-spacing: 0;
	--h5-text-transform: none;
	--h5-text-align: inherit;

	/* ======================== */
	/* === typography: h6    === */
	/* ======================== */

	--h6-color: var(--color-neutral-800);
	--h6-font-weight: 600;
	--h6-font-family: var(--font-primary);

	--h6-line-height: 1.3;
	--h6-letter-spacing: 0;
	--h6-text-transform: none;
	--h6-text-align: inherit;

	/* ======================== */
	/* === text: link        === */
	/* ======================== */

	--text-link-color: var(--color-neutral-800);
	--text-link-color-hover: var(--color-primary-500);
	--text-link-color-focus: var(--color-neutral-800);
	--text-link-color-visited: var(--color-neutral-800);
	--text-link-font-weight: inherit;
	--text-link-font-family: inherit;
	--text-link-font-size: inherit;
	--text-link-line-height: inherit;
	--text-link-letter-spacing: inherit;
	--text-link-text-decoration: inherit;

	/* ======================== */
	/* === text: title-accent === */
	/* ======================== */

	--text-title-accent-color: var(--color-primary-500);
	--text-title-accent-font-size: inherit;

	/* ======================== */
	/* === text: lead        === */
	/* ======================== */

	--text-lead-color: var(--color-neutral-500);
	--text-lead-font-weight: 400;
	--text-lead-font-family: var(--font-primary);

	--text-lead-line-height: 1.5;
	--text-lead-letter-spacing: 0;

	/* ======================== */
	/* === text: small       === */
	/* ======================== */

	--text-small-color: var(--color-neutral-400);
	--text-small-font-weight: 400;
	--text-small-font-family: var(--font-primary);

	--text-small-line-height: 1.5;
	--text-small-letter-spacing: 0;

	/* ======================== */
	/* === text: label       === */
	/* ======================== */

	--text-label-color: var(--color-primary-500);
	--text-label-font-weight: 500;
	--text-label-font-family: var(--font-primary);

	--text-label-line-height: 1.5;
	--text-label-letter-spacing: 0;
	--text-label-text-transform: none;

	/* ======================== */
	/* === text: caption     === */
	/* ======================== */

	--text-caption-color: var(--color-neutral-400);
	--text-caption-font-weight: 400;
	--text-caption-font-family: var(--font-primary);

	--text-caption-line-height: 1.4;
	--text-caption-letter-spacing: 0;

	/* ======================== */
	/* === text: display-xl  === */
	/* ======================== */

	--text-display-xl-color: var(--color-neutral-800);
	--text-display-xl-font-weight: 700;
	--text-display-xl-font-family: var(--font-primary);

	--text-display-xl-line-height: 1.1;
	--text-display-xl-letter-spacing: -0.02em;

	/* ======================== */
	/* === text: display-l   === */
	/* ======================== */

	--text-display-l-color: var(--color-neutral-800);
	--text-display-l-font-weight: 700;
	--text-display-l-font-family: var(--font-primary);

	--text-display-l-line-height: 1.1;
	--text-display-l-letter-spacing: -0.02em;

	/* ======================== */
	/* === text: overline    === */
	/* ======================== */

	--text-overline-color: var(--color-neutral-500);
	--text-overline-font-weight: 600;
	--text-overline-font-family: var(--font-primary);

	--text-overline-line-height: 1.3;
	--text-overline-letter-spacing: 0.06em;
	--text-overline-text-transform: uppercase;

	/* ======================== */
	/* === text: muted       === */
	/* ======================== */

	--text-muted-color: var(--color-neutral-400);
	--text-muted-font-weight: 400;
	--text-muted-font-family: var(--font-primary);
	--text-muted-font-size: inherit;
	--text-muted-line-height: inherit;
	--text-muted-letter-spacing: 0;

	/* ======================== */
	/* === text: nav         === */
	/* ======================== */

	--text-nav-color: var(--color-neutral-700);
	--text-nav-color-hover: var(--color-primary-500);
	--text-nav-color-active: var(--color-primary-500);
	--text-nav-font-weight: 400;
	--text-nav-font-family: var(--font-primary);

	--text-nav-line-height: 1.5;
	--text-nav-letter-spacing: 0;

	/* ======================== */
	/* === text: name        === */
	/* ======================== */

	--text-name-color: var(--color-neutral-800);
	--text-name-font-weight: 600;
	--text-name-font-family: var(--font-primary);

	--text-name-line-height: 1.5;
	--text-name-letter-spacing: 0;

	/* ======================== */
	/* === text: quote       === */
	/* ======================== */

	--text-quote-color: var(--color-neutral-500);
	--text-quote-font-weight: 400;
	--text-quote-font-family: var(--font-primary);

	--text-quote-line-height: 1.75;
	--text-quote-letter-spacing: 0;
	--text-quote-font-style: normal;

	/* ======================== */
	/* === text: price       === */
	/* ======================== */

	--text-price-color: var(--color-neutral-900);
	--text-price-font-weight: 600;
	--text-price-font-family: var(--font-primary);

	--text-price-line-height: 1.2;
	--text-price-letter-spacing: -0.02em;

	/* ======================== */
	/* === layout            === */
	/* ======================== */

	--layout-display: flex;
	--layout-direction: column;


	/* ======================== */
	/* === section           === */
	/* ======================== */




	--section-bg: transparent;
	--section-position: static;
	--section-border-color: transparent;
	--section-border-width: 0;

	/* ======================== */
	/* === container         === */
	/* ======================== */




	/* ======================== */
	/* === button: base      === */
	/* ======================== */

	--btn-font-family: var(--font-secondary);

	--btn-font-weight: 500;
	--btn-letter-spacing: 0;
	--btn-line-height: 18px;




	--btn-width: auto;

	--btn-shadow: none;
	--btn-border-width: 0;
	--btn-border-style: solid;
	--btn-border-color: transparent;
	--btn-bg-image: none;
	--btn-bg: var(--color-neutral-800);
	--btn-bg-hover: var(--color-neutral-900);
	--btn-bg-focus: var(--color-neutral-900);
	--btn-color: #ffffff;
	--btn-color-hover: var(--color-neutral-100);
	--btn-color-focus: var(--color-neutral-100);
	--btn-border-color-hover: transparent;
	--btn-border-color-focus: transparent;

	/* ======================== */
	/* === button: primary   === */
	/* ======================== */

	--btn-primary-bg: var(--color-primary-500);
	--btn-primary-bg-hover: var(--color-primary-600);
	--btn-primary-bg-focus: var(--color-primary-500);
	--btn-primary-color: var(--color-neutral);
	--btn-primary-color-hover: var(--color-neutral);
	--btn-primary-color-focus: var(--color-neutral);
	--btn-primary-border-color: transparent;
	--btn-primary-border-color-hover: transparent;
	--btn-primary-border-color-focus: transparent;
	--btn-primary-bg-image: none;
	--btn-primary-border-width: 0;
	--btn-primary-border-style: solid;
	--btn-primary-radius: var(--btn-radius);

	/* ======================== */
	/* === button: light     === */
	/* ======================== */

	--btn-light-bg: var(--color-primary-100);
	--btn-light-bg-hover: var(--color-primary-200);
	--btn-light-bg-focus: var(--color-primary-100);
	--btn-light-image: none;
	--btn-light-color: var(--color-primary-500);
	--btn-light-color-hover: var(--color-primary-600);
	--btn-light-color-focus: var(--color-primary-500);
	--btn-light-border-color: transparent;
	--btn-light-border-color-hover: transparent;
	--btn-light-border-color-focus: transparent;
	--btn-light-border-width: 0;
	--btn-light-border-style: solid;
	--btn-light-radius: var(--btn-radius);

	/* ======================== */
	/* === button: outline   === */
	/* ======================== */

	--btn-outline-bg: transparent;
	--btn-outline-bg-hover: var(--color-neutral-100);
	--btn-outline-bg-focus: transparent;
	--btn-outline-image: none;
	--btn-outline-color: var(--color-neutral-800);
	--btn-outline-color-hover: var(--color-neutral-900);
	--btn-outline-color-focus: var(--color-neutral-900);
	--btn-outline-border-color: var(--color-neutral-300);
	--btn-outline-border-color-hover: var(--color-neutral-300);
	--btn-outline-border-color-focus: var(--color-neutral-300);
	--btn-outline-border-width: 1.5px;
	--btn-outline-border-style: solid;
	--btn-outline-radius: var(--btn-radius);
	--btn-outline-focus-ring-color: var(--color-neutral-500);
	--btn-outline-focus-ring-opacity: 0.2;

	/* ======================== */
	/* === button: ghost     === */
	/* ======================== */

	--btn-ghost-bg: var(--color-neutral-300);
	--btn-ghost-bg-hover: var(--color-primary-500);
	--btn-ghost-bg-focus: var(--color-primary-500);
	--btn-ghost-color: var(--color-neutral-800);
	--btn-ghost-color-hover: var(--color-neutral-900);
	--btn-ghost-color-focus: var(--color-neutral-800);
	--btn-ghost-border-width: 0;

	/* ======================== */
	/* === card              === */
	/* ======================== */

	--card-radius: 20px;
	--card-bg: #fdfdfd;
	--card-border-color: #d0d1d7;
	--card-border-width: 0px;
	--card-border-style: solid;
	--card-color: #090714;
	--card-shadow: 0 1px 8px rgba(28,30,38,0.08);
	--card-position: static;


	--card-min-height: unset;
	--card-bg-image: none;
	--card-actions-margin-top: auto;


	--card-ribbon-bg: var(--color-primary-500);
	--card-ribbon-color: var(--color-neutral);



	--card-ribbon-font-weight: 600;
	--card-elevated-color: inherit;
	--card-elevated-shadow: var(--shadow-md);
	--card-elevated-border-width: 0;
	--card-filled-color: inherit;
	--card-filled-bg: var(--color-neutral-100);
	--card-filled-border-width: 0;

	/* ======================== */
	/* === chip              === */
	/* ======================== */

	--chip-font-family: var(--font-primary);

	--chip-font-weight: 500;
	--chip-line-height: 1.5;
	--chip-letter-spacing: 0;
	--chip-bg: var(--color-neutral-100);
	--chip-color: #090714;
	--chip-radius: 999px;

	--chip-padding-block: 8px;
	--chip-text-transform: none;
	--chip-border-width: 0px;
	--chip-border-style: solid;
	--chip-border-color: transparent;
	--chip-primary-bg: var(--color-primary-500);
	--chip-primary-color: var(--color-neutral);
	--chip-primary-radius: 99rem;
	--chip-primary-text-transform: uppercase;


	/* ======================== */
	/* === tabs              === */
	/* ======================== */

	--tab-font-family: var(--font-primary);
	--tab-font-weight: 500;

	--tab-height: 56px;


	--tab-bg: transparent;
	--tab-bg-hover: transparent;
	--tab-bg-active: transparent;
	--tab-color: #6b6d77;
	--tab-color-active: #090714;
	--tab-border-color: var(--color-neutral-200);
	--tab-border-color-hover: var(--color-neutral-400);
	--tab-border-color-active: var(--color-primary-500);
	--tab-border-width: 2px;
	--tab-radius: 0px;
	--tab-shadow: none;
	--tab-shadow-hover: none;
			
	/* ======================== */
	/* === accordion: base   === */
	/* ======================== */



	--accordion-radius: var(--radius-md);
	--accordion-border-width: 0;
	--accordion-border-style: solid;
	--accordion-border-color: transparent;
	--accordion-bg: transparent;
	--accordion-bg-open: transparent;
	--accordion-max-width: none;
	--accordion-width: 100%;
	--accordion-divider-color: var(--color-neutral-200);
	--accordion-divider-width: 1px;

	/* === accordion: icon === */


	--accordion-icon-box-size: unset;
	--accordion-icon-padding-inline: 0;
	--accordion-icon-padding-block: 0;
	--accordion-icon-radius: 0;
	--accordion-icon-bg: transparent;
	--accordion-icon-bg-open: transparent;
	--accordion-icon-color: inherit;
	--accordion-icon-color-open: var(--color-neutral-500);

	/* === accordion: trigger === */

	--accordion-trigger-justify: space-between;
	--accordion-trigger-direction: row;
	--accordion-trigger-color: var(--color-neutral-800);
	--accordion-trigger-font-weight: 400;
	--accordion-trigger-font-family: var(--font-primary);

	--accordion-trigger-line-height: 1.375;
	--accordion-trigger-letter-spacing: 0;
	--accordion-trigger-text-transform: none;
	--accordion-trigger-text-align: inherit;

	/* === accordion: content === */

	--accordion-content-color: var(--color-neutral-600);
	--accordion-content-font-weight: 400;
	--accordion-content-font-family: var(--font-primary);

	--accordion-content-line-height: 1.5;
	--accordion-content-letter-spacing: 0;
	--accordion-content-text-transform: none;
	--accordion-content-text-align: inherit;

	/* === accordion: body === */

	--accordion-body-padding-block-start: unset;
	--accordion-body-padding-block-end: unset;
	--accordion-body-padding-inline-start: unset;
	--accordion-body-padding-inline-end: unset;
	--accordion-body-margin-start: 0;
	--accordion-body-margin-end: 0;
	--accordion-body-border-top: 0;
	--accordion-body-border-color: transparent;
	--accordion-body-border-start: 0;
	--accordion-body-border-start-color: transparent;

	/* ======================== */
	/* === accordion: card   === */
	/* ======================== */

	--accordion-card-radius: var(--radius-lg);
	--accordion-card-bg: var(--color-neutral-100);
	--accordion-card-bg-open: var(--accordion-card-bg);


	--accordion-card-icon-padding-inline: 0.5rem;
	--accordion-card-icon-padding-block: 0.5rem;
	--accordion-card-icon-radius: 9999px;
	--accordion-card-icon-color: var(--color-neutral-700);
	--accordion-card-icon-color-open: var(--color-neutral-500);

	/* ======================== */
	/* === accordion: outline === */
	/* ======================== */

	--accordion-outline-radius: var(--radius-lg);
	--accordion-outline-border-width: 2px;
	--accordion-outline-border-color: var(--color-neutral-200);



	--accordion-outline-icon-padding-inline: 0.5rem;
	--accordion-outline-icon-padding-block: 0.5rem;
	--accordion-outline-icon-radius: 9999px;
	--accordion-outline-icon-bg: var(--color-primary-500);
	--accordion-outline-icon-color: var(--color-neutral);
	--accordion-outline-icon-bg-open: var(--color-neutral-200);
	--accordion-outline-icon-color-open: var(--color-neutral-700);
	--accordion-outline-bg: transparent;
	--accordion-outline-bg-open: transparent;

	/* ======================== */
	/* === accordion: collapse === */
	/* ======================== */

	--accordion-collapse-divider-color: var(--color-neutral-200);
	--accordion-collapse-divider-width: 1px;


	--accordion-collapse-icon-color: var(--color-primary-500);
	--accordion-collapse-accent-color: var(--color-primary-500);
	--accordion-collapse-accent-width: 2px;

	/* ======================== */
	/* === input             === */
	/* ======================== */

	--input-font-family: var(--font-primary);
	--input-font-size: 14px;
	--input-font-weight: var(--body-font-weight);
	--input-line-height: var(--body-line-height);
	--input-letter-spacing: var(--body-letter-spacing);
	--input-bg: var(--color-neutral);
	--input-color: #090714;
	--input-border-color: #d0d1d7;
	--input-placeholder-color: #8e9099;
	--input-bg-hover: var(--color-neutral);
	--input-border-color-hover: var(--color-neutral-300);
	--input-bg-focus: var(--color-neutral);
	--input-border-color-focus: var(--color-primary-400);
	--input-radius: 12px;
	--input-border-width: 1px;
	--input-border-style: solid;
	--input-height: auto;


	--input-autofill-bg: var(--color-neutral);
	--input-autofill-color: var(--color-neutral-800);

	/* ======================== */
	/* === textarea          === */
	/* ======================== */

	--textarea-font-family: var(--font-primary);
	--textarea-font-size: var(--body-font-size);
	--textarea-font-weight: var(--body-font-weight);
	--textarea-line-height: var(--body-line-height);
	--textarea-letter-spacing: var(--body-letter-spacing);
	--textarea-bg: var(--color-neutral);
	--textarea-color: var(--color-neutral-800);
	--textarea-border-color: var(--color-neutral-300);
	--textarea-placeholder-color: var(--color-neutral-500);
	--textarea-bg-hover: var(--color-neutral);
	--textarea-border-color-hover: var(--color-neutral-300);
	--textarea-bg-focus: var(--color-neutral);
	--textarea-border-color-focus: var(--color-primary-400);
	--textarea-autofill-bg: var(--color-neutral);
	--textarea-autofill-color: var(--color-neutral-800);
	--textarea-radius: var(--radius-md);
	--textarea-border-width: 1px;
	--textarea-border-style: solid;
	--textarea-min-height: 6rem;
	--textarea-height: auto;



	/* ======================== */
	/* === label             === */
	/* ======================== */

	--label-font-family: var(--font-primary);

	--label-font-weight: 500;
	--label-line-height: 1.5;
	--label-letter-spacing: 0;
	--label-color: var(--color-neutral-700);
	--label-required-color: var(--color-neutral-400);


	/* ======================== */
	/* === stepper           === */
	/* ======================== */


	--step-indicator-radius: 9999px;
	--step-indicator-bg: var(--color-neutral);
	--step-indicator-color: var(--color-neutral-900);
	--step-indicator-font-family: var(--font-primary);

	--step-indicator-font-weight: 800;
	--step-indicator-line-height: 1.08;
	--step-indicator-letter-spacing: 0;

	/* ======================== */
	/* === icon-box          === */
	/* ======================== */



	--icon-box-radius: 99rem;
	--icon-box-bg: transparent;
	--icon-box-color: inherit;
	--icon-box-border-width: 0;
	--icon-box-border-style: solid;
	--icon-box-border-color: transparent;
	--icon-box-primary-bg: var(--color-primary-500);
	--icon-box-primary-color: var(--color-neutral);
	--icon-box-outline-bg: transparent;
	--icon-box-outline-color: var(--color-neutral-800);
	--icon-box-outline-border-width: 1px;
	--icon-box-outline-border-color: var(--color-neutral-300);
	--icon-box-light-bg: var(--color-primary-100);
	--icon-box-light-color: var(--color-primary-500);
	--icon-box-ghost-bg: var(--color-neutral-100);
	--icon-box-ghost-color: var(--color-neutral-800);

	/* ======================== */
	/* === navbar            === */
	/* ======================== */


	--nav-link-display: inline;
	--nav-link-padding-inline: 0;
	--nav-link-padding-block: 0;
	--navbar-toggle-size: 1.5rem;
	--navbar-radius: var(--radius-md);

	/* ======================== */
	/* === banner            === */
	/* ======================== */

	--banner-radius: var(--radius-2xl);
	--banner-bg: transparent;
	--banner-min-height: 650px;
	--banner-max-width: 100%;



	--banner-inner-max-width: 100%;
	--banner-content-max-width: 48rem;


	--hero-title-font-weight: 500;
	--hero-title-line-height: 1.15;
	--hero-title-letter-spacing: -0.04em;
	--hero-title-color: var(--color-neutral);

	--hero-subtitle-line-height: 1.3;
	--hero-subtitle-letter-spacing: -0.02em;
	--hero-subtitle-color: rgba(255, 255, 255, 0.85);

	--banner-title-font-family: var(--font-secondary);

	--banner-title-font-weight: 800;
	--banner-title-line-height: 1.09;
	--banner-title-color: var(--color-neutral-900);
	--banner-title-text-transform: uppercase;
	--banner-title-text-align: center;


	--banner-description-line-height: 1.37;
	--banner-description-color: var(--color-neutral-900);
	--banner-description-text-align: center;

	--banner-media-bg: var(--color-neutral-200);
	--banner-media-color: var(--color-neutral-500);
	--banner-muted-color: var(--color-neutral-500);
	--banner-border-color: var(--color-neutral-200);
	--banner-list-marker-bg: var(--color-primary-500);

	--banner-badge-bg: var(--color-primary-100);
	--banner-badge-color: var(--color-neutral-900);
	--banner-badge-radius: var(--radius-full);



	--banner-badge-font-weight: 600;

	--banner-panel-bg: var(--color-neutral);
	--banner-panel-border-color: var(--banner-border-color);
	--banner-panel-border-width: 1px;
	--banner-panel-radius: var(--radius-xl);
	--banner-panel-shadow: none;



	--banner-input-bg: var(--color-neutral);
	--banner-input-border-color: var(--color-neutral-300);
	--banner-input-color: var(--color-neutral-900);
	--banner-input-radius: var(--radius-lg);

	--banner-chip-bg: var(--color-neutral);
	--banner-chip-color: var(--color-neutral-900);
	--banner-chip-border-color: var(--banner-border-color);
	--banner-chip-radius: var(--radius-full);


	--banner-stat-bg: var(--color-neutral);
	--banner-stat-border-color: var(--banner-border-color);

	--banner-stat-value-color: var(--color-neutral-900);
	--banner-stat-label-color: var(--color-neutral-500);

	--banner-timer-bg: var(--color-neutral);
	--banner-timer-border-color: var(--banner-border-color);
	--banner-timer-value-color: var(--color-neutral-900);
	--banner-timer-label-color: var(--color-neutral-500);

	/* ======================== */
	/* === hero              === */
	/* ======================== */














	/* ======================== */
	/* === calculator        === */
	/* ======================== */




	/* ======================== */
	/* === footer            === */
	/* ======================== */




	/* ======================== */
	/* === sections styling  === */
	/* ======================== */




















	--stories-card-muted-color: rgba(41, 37, 34, 0.6);













	/* ======================== */
	/* === slider            === */
	/* ======================== */

					
	/* ======================== */
	/* === section themes    === */
	/* ======================== */
		--st-bg: var(--color-background);
	--st-text: var(--color-neutral-900);
	--st-text-secondary: var(--color-neutral-600);
	--st-accent: var(--color-primary-500);
	--st-btn-bg: var(--color-primary-500);
	--st-btn-color: var(--color-neutral);
	--st-surface: var(--color-neutral-100);
	--st-border: var(--color-neutral-200);

	}

/* Rubber container padding — set on .container, since inheritance from :root may not work */
.container {
	


	}

/* Banner — reduced container padding */
.banner .container {
	--container-padding-block: calc(64 / 19.2 * 1vw);
	@media (max-width: 767px) {
		--container-padding-block: calc(40 / 3.75 * 1vw);
	}
}

/* Footer without padding-inline */
.footer .container {
	padding-inline: 0;
}

/* Avito career footer — custom padding-inline */
.avito-career-footer .container {
	padding-inline: var(--avito-career-footer-padding-inline);
}

/* Footer columns — custom padding-inline */
.footer[data-section="footer/columns"] .container {
	padding-inline: var(--footer-columns-padding-inline);
}

/* Company logo — constrain size globally for all sections */
img[data-cms-logo] {
	max-height: var(--logo-max-height, 2rem);
	width: auto;
}

/* Section themes: :where() gives 0 specificity — any utility class (.btn, .chip) overrides */
:where([data-section-theme]) {
	color: var(--st-text);
	background-color: var(--st-bg);
}

/* ================================ */
/* === Section Theme Mapping     === */
/* ================================ */
[data-section-theme] {
	/* Section / Container */
	--section-bg: var(--st-bg);
	--section-border-color: var(--st-border);
	--container-bg: var(--st-bg);
	--container-bg-image: none;
	--card-bg-image: none;

	/* Typography: display */
	--text-display-xl-color: var(--st-text);
	--text-display-l-color: var(--st-text);

	/* Typography: headings */
	--h1-color: var(--st-text);
	--h2-color: var(--st-text);
	--h3-color: var(--st-text);
	--h4-color: var(--st-text);
	--h5-color: var(--st-text);
	--h6-color: var(--st-text);

	/* Typography: body */
	--body-color: var(--st-text);

	/* Typography: secondary text */
	--text-lead-color: var(--st-text-secondary);
	--text-muted-color: var(--st-text-secondary);
	--text-small-color: var(--st-text-secondary);
	--text-caption-color: var(--st-text-secondary);
	--text-quote-color: var(--st-text-secondary);
	--text-overline-color: var(--st-text-secondary);

	/* Typography: primary text */
	--text-name-color: var(--st-text);
	--text-label-color: var(--st-text);
	--text-price-color: var(--st-text);

	/* Typography: accent & links */
	--text-title-accent-color: var(--st-accent);
	--text-link-color: var(--st-accent);
	--text-link-color-hover: var(--st-accent);

	/* Typography: nav */
	--text-nav-color: var(--st-text-secondary);
	--text-nav-color-hover: var(--st-text);
	--text-nav-color-active: var(--st-text);
	--nav-link-color: var(--st-text-secondary);
	--nav-link-color-hover: var(--st-text);
	--nav-link-color-active: var(--st-text);
	--navbar-toggle-color: var(--st-text);

	/* Buttons: base */
	--btn-bg: var(--st-btn-bg);
	--btn-color: var(--st-btn-color);
	--btn-border-color: var(--st-border);
	--btn-bg-image: none;

	/* Buttons: primary */
	--btn-primary-bg: var(--st-btn-bg);
	--btn-primary-bg-hover: var(--st-btn-bg);
	--btn-primary-color: var(--st-btn-color);
	--btn-primary-color-hover: var(--st-btn-color);
	--btn-primary-bg-image: none;

	/* Buttons: outline */
	--btn-outline-color: var(--st-text);
	--btn-outline-border-color: var(--st-border);
	--btn-outline-color-hover: var(--st-text);
	--btn-outline-bg-hover: var(--st-surface);

	/* Buttons: light */
	--btn-light-bg: var(--st-surface);
	--btn-light-bg-hover: var(--st-surface);
	--btn-light-color: var(--st-text);
	--btn-light-color-hover: var(--st-text);

	/* Buttons: ghost */
	--btn-ghost-color: var(--st-text);
	--btn-ghost-bg-hover: var(--st-surface);

	/* Cards */
	--card-bg: var(--st-surface);
	--card-color: var(--st-text);
	--card-filled-bg: var(--st-surface);
	--card-filled-color: var(--st-text);
	--card-elevated-color: var(--st-text);
	--card-border-color: var(--st-border);

	/* Chips */
	--chip-bg: var(--st-surface);
	--chip-color: var(--st-text);
	--chip-border-color: var(--st-border);
	--chip-primary-bg: var(--st-accent);
	--chip-primary-color: var(--st-btn-color);

	/* Tabs */
	--tab-color: var(--st-text-secondary);
	--tab-color-active: var(--st-text);
	--tab-border-color: var(--st-border);
	--tab-border-color-active: var(--st-accent);
	--tab-border-color-hover: var(--st-text-secondary);

	/* Icon Box */
	--icon-box-color: var(--st-text);
	--icon-box-light-bg: var(--st-surface);
	--icon-box-light-color: var(--st-accent);
	--icon-box-ghost-bg: var(--st-surface);
	--icon-box-ghost-color: var(--st-text);
	--icon-box-outline-color: var(--st-accent);
	--icon-box-outline-border-color: var(--st-border);
	--icon-box-primary-bg: var(--st-accent);
	--icon-box-primary-color: var(--st-btn-color);

	/* Accordion: base */
	--accordion-trigger-color: var(--st-text);
	--accordion-content-color: var(--st-text-secondary);
	--accordion-bg: var(--st-surface);
	--accordion-border-color: var(--st-border);
	--accordion-divider-color: var(--st-border);
	--accordion-icon-color: var(--st-text-secondary);
	--accordion-icon-color-open: var(--st-text);
	--accordion-icon-bg: transparent;
	--accordion-icon-bg-open: transparent;

	/* Accordion: card */
	--accordion-card-bg: var(--st-surface);
	--accordion-card-icon-color: var(--st-text-secondary);
	--accordion-card-icon-color-open: var(--st-text);

	/* Accordion: outline */
	--accordion-outline-border-color: var(--st-border);
	--accordion-outline-bg: transparent;
	--accordion-outline-icon-color: var(--st-text-secondary);
	--accordion-outline-icon-color-open: var(--st-text);

	/* Input */
	--input-border-color: var(--st-border);
	--input-color: var(--st-text);
	--input-bg: var(--st-surface);
	--input-bg-hover: var(--st-surface);
	--input-border-color-hover: var(--st-border);
	--input-bg-focus: var(--st-surface);
	--input-border-color-focus: var(--st-accent);
	--input-autofill-bg: var(--st-surface);
	--input-autofill-color: var(--st-text);

	/* Textarea */
	--textarea-border-color: var(--st-border);
	--textarea-color: var(--st-text);
	--textarea-bg: var(--st-surface);
	--textarea-bg-hover: var(--st-surface);
	--textarea-border-color-hover: var(--st-border);
	--textarea-bg-focus: var(--st-surface);
	--textarea-border-color-focus: var(--st-accent);
	--textarea-autofill-bg: var(--st-surface);
	--textarea-autofill-color: var(--st-text);

	/* Label */
	--label-color: var(--st-text);

	/* Stepper */
	--step-indicator-color: var(--st-text);
	--step-indicator-bg: var(--st-surface);

	/* Divider */
	--divider-color: var(--st-border);
}

/* === Named Section Themes === */

/* ================================ */
/* === SECTION: header           === */
/* ================================ */

.header,
header[data-cms-section^="header."] {
	--section-padding-block: 0;
	--section-position: relative;
	--section-margin-top: 0;
	--container-overflow: visible;
	--header-bg: rgba(255, 255, 255, 0.72);
	--header-backdrop-blur: 12px;
	--header-border-color: rgba(0, 0, 0, 0.06);
	z-index: 10;
	width: auto;

		--header-container-padding-block: calc(16 / 19.2 * 1vw);
	@media (max-width: 767px) {
		--header-container-padding-block: calc(12 / 3.75 * 1vw);
	}

			}

/* Header container — compact padding, glass backdrop */
.header-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	display: var(--container-display);
	width: 100%;
	max-width: none;
	margin-inline: 0;
	background: var(--header-bg);
	backdrop-filter: blur(var(--header-backdrop-blur)) saturate(180%);
	-webkit-backdrop-filter: blur(var(--header-backdrop-blur)) saturate(180%);
	border-block-end: 1px solid var(--header-border-color);
	padding-inline-start: var(--header-container-padding-inline-start, var(--header-container-padding-inline, var(--container-padding-inline)));
	padding-inline-end: var(--header-container-padding-inline-end, var(--header-container-padding-inline, var(--container-padding-inline)));
	padding-block-start: var(--header-container-padding-block-start, var(--header-container-padding-block, var(--container-padding-block, 1rem)));
	padding-block-end: var(--header-container-padding-block-end, var(--header-container-padding-block, var(--container-padding-block, 1rem)));
}

/* ================================ */
/* === SECTION: generic sections === */
/* ================================ */

section {
	--section-margin-top: 0;
}

/* ================================ */
/* === SECTION: hero              === */
/* ================================ */

.hero {
	--section-margin-top: 0;
	}

/* ================================ */
/* === SECTION: benefits          === */
/* ================================ */

.benefits {
	--section-margin-top: 0;
	--card-radius: var(--radius-lg);
	--card-bg: var(--color-neutral-100);
	--card-padding-inline: 1.25rem;
	--card-padding-block: 1.25rem;
}

/* ================================ */
/* === SECTION: features          === */
/* ================================ */

.features {
	--card-radius: var(--radius-lg);
}

/* ================================ */
/* === SECTION: testimonials      === */
/* ================================ */

.testimonials {
	--card-radius: var(--radius-lg);
	--card-padding-inline: 1.25rem;
	--card-padding-block: 1.25rem;
}

/* ================================ */
/* === SECTION: cta               === */
/* ================================ */

.cta {
	overflow: hidden;
	--container-radius: 0;
}

/* ================================ */
/* === SECTION: banner            === */
/* ================================ */


/* ================================ */
/* === SECTION: catalog           === */
/* ================================ */

.catalog {
	--section-margin-top: 0;
}

/* ================================ */
/* === SECTION: stats             === */
/* ================================ */

.stats {
	}

/* ================================ */
/* === SECTION: faq               === */
/* ================================ */

.faq {
	--accordion-card-padding-inline: 1.5rem;
	--accordion-card-padding-block: 1.25rem;

	@media (width >= 768px) {
		--accordion-card-padding-inline: 1.5rem;
		--accordion-card-padding-block: 1.25rem;
	}
}

/* ================================ */
/* === SECTION: footer            === */
/* ================================ */

.footer,
footer[data-cms-section^="footer."] {
	--container-bg: transparent;
		--container-padding-inline: calc(60 / 19.2 * 1vw);
	@media (max-width: 767px) {
		--container-padding-inline: calc(20 / 3.75 * 1vw);
	}

		--container-padding-block: calc(80 / 19.2 * 1vw);
	@media (max-width: 767px) {
		--container-padding-block: calc(40 / 3.75 * 1vw);
	}

		--footer-container-padding-block-end: calc(20 / 19.2 * 1vw);
	@media (max-width: 767px) {
		--footer-container-padding-block-end: calc(10 / 3.75 * 1vw);
	}


									}

/* Footer container — bottom padding 20px/10px, rest from the shared container */
.footer-container {
	display: var(--container-display);
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline-start: var(--container-padding-inline-start, var(--container-padding-inline));
	padding-inline-end: var(--container-padding-inline-end, var(--container-padding-inline));
	padding-block-start: var(--container-padding-block-start, var(--container-padding-block));
	padding-block-end: var(--footer-container-padding-block-end, var(--container-padding-block-end, var(--container-padding-block, 1.25rem)));
}

/* === footer BEM layout: structural classes for footer layout === */

/* Top section: brand + navigation columns */
.footer__top {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

/* Brand column: logo, email, description */
.footer__brand {
	flex: 0 0 100%;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Navigation group: heading + links — 2 columns on mobile */
.footer__nav-group {
	flex: 0 0 calc(50% - 1rem);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

@media (min-width: 768px) {
	.footer__nav-group {
		flex: 1;
		min-width: 0;
	}
}

@media (min-width: 1024px) {
	.footer__top {
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 3rem;
	}

	.footer__brand {
		flex: 0 0 var(--footer-brand-width, 22%);
	}
}

/* Logo in footer */
.footer__logo {
	display: inline-block;
	line-height: 0;
}

/* Email link in footer */
.footer__email {
	display: inline-block;
	font-size: var(--text-nav-font-size, 1rem);
	color: var(--text-nav-color, var(--color-neutral-700));
	text-decoration: none;
	transition: color 0.15s ease;
}

.footer__email:hover {
	color: var(--text-nav-color-hover, var(--color-primary-500));
}

/* Description / newsletter below the logo */
.footer__newsletter {
	font-size: var(--text-small-font-size, 0.875rem);
	color: var(--text-small-color, var(--color-neutral-400));
	line-height: 1.5;
}

/* Navigation column heading */
.footer__nav-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-neutral-900);
	margin-block-end: 0.25rem;
}

/* Link in navigation column */
.footer__nav-link {
	display: block;
	font-size: var(--text-nav-font-size, 1rem);
	font-weight: var(--text-nav-font-weight, 400);
	color: var(--text-nav-color, var(--color-neutral-700));
	text-decoration: none;
	transition: color 0.15s ease;
}

.footer__nav-link:hover {
	color: var(--text-nav-color-hover, var(--color-primary-500));
}

/* Bottom row: divider + copyright */
.footer__bottom {
	margin-block-start: 2rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--footer-bottom-border-color, var(--color-neutral-200));
	text-align: center;
}

/* ============================================================ */
/* === BACKEND-GENERATED BEM COMPONENTS (export compatibility) === */
/* ============================================================ */

/* --- section-tag: small label chip above section headers --- */
.section-tag {
	display: inline-block;
	padding-inline: var(--chip-padding-inline, 0.75rem);
	padding-block: var(--chip-padding-block, 0.375rem);
	background: var(--chip-bg, var(--color-primary-50));
	color: var(--chip-color, var(--color-primary-600));
	border-radius: var(--chip-radius, 999px);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
}

/* --- section-header: centered header block with tag + title + subtitle --- */
.section-header {
	text-align: center;
	margin-block-end: 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}
.section-header__title {
	margin-block: 0;
}
.section-header__subtitle {
	max-width: 42rem;
	color: var(--text-muted-color, var(--color-neutral-500));
	font-size: var(--text-lead-font-size, 1.125rem);
	line-height: var(--text-lead-line-height, 1.6);
}
@media (max-width: 47.99rem) {
	.section-header__subtitle {
		max-width: 100%;
	}
}

/* --- pricing BEM component --- */
.pricing__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 768px) {
	.pricing__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.pricing__grid { grid-template-columns: repeat(3, 1fr); }
}
.pricing__tag {
	/* handled by .section-tag */
}
.pricing__title {
	margin-block: 0;
}
.pricing__subtitle {
	color: var(--text-muted-color, var(--color-neutral-500));
}
.pricing-card {
	background: var(--card-bg, #fff);
	border-radius: var(--card-radius, 0.75rem);
	border: var(--card-border-width, 1px) solid var(--card-border-color, var(--color-neutral-200));
	padding-inline: var(--card-padding-inline, 1.5rem);
	padding-block: var(--card-padding-block, 2rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transition: box-shadow 0.2s ease;
}
.pricing-card--featured {
	background: var(--color-primary-500);
	border-color: var(--color-primary-500);
	color: #fff;
	box-shadow: var(--card-shadow, 0 8px 32px -4px rgba(0, 0, 0, 0.15));
}
.pricing-card__name {
	font-size: 1rem;
	font-weight: 600;
	color: inherit;
}
.pricing-card--featured .pricing-card__name {
	color: rgba(255, 255, 255, 0.9);
}
.pricing-card__description {
	font-size: var(--text-small-font-size, 0.875rem);
	color: var(--text-muted-color, var(--color-neutral-500));
	line-height: 1.5;
}
.pricing-card--featured .pricing-card__description {
	color: rgba(255, 255, 255, 0.75);
}
.pricing-card__price {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.pricing-card__period {
	font-size: var(--text-small-font-size, 0.875rem);
	color: var(--text-muted-color, var(--color-neutral-500));
	margin-inline-start: 0.25rem;
}
.pricing-card--featured .pricing-card__period {
	color: rgba(255, 255, 255, 0.75);
}
.pricing-card__features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	flex: 1;
}
.pricing-card__feature {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: var(--text-small-font-size, 0.875rem);
	line-height: 1.5;
}
.pricing-card__check {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin-block-start: 0.125rem;
	color: var(--color-primary-500);
}
.pricing-card--featured .pricing-card__check {
	color: #fff;
}
.pricing-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-inline: var(--btn-padding-inline, 1.5rem);
	padding-block: var(--btn-padding-block, 0.75rem);
	border-radius: var(--btn-radius, 0.5rem);
	font-size: var(--btn-font-size, 1rem);
	font-weight: var(--btn-font-weight, 600);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease, box-shadow 0.15s ease;
	background: var(--color-primary-500);
	color: #fff;
}
.pricing-card--featured .pricing-card__btn {
	background: #fff;
	color: var(--color-primary-600);
}
.pricing-card__btn:hover {
	opacity: 0.9;
}

/* --- testimonials BEM component --- */
.testimonials__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 768px) {
	.testimonials__grid { grid-template-columns: repeat(2, 1fr); }
}
.testimonials__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-block-start: 3rem;
}
@media (min-width: 768px) {
	.testimonials__stats { grid-template-columns: repeat(4, 1fr); }
}
.testimonials__tag,
.testimonials__title,
.testimonials__subtitle {
	/* handled by .section-tag / .section-header__* */
}
.testimonial-card {
	background: var(--card-bg, #fff);
	border-radius: var(--card-radius, 0.75rem);
	border: var(--card-border-width, 1px) solid var(--card-border-color, var(--color-neutral-200));
	padding-inline: var(--card-padding-inline, 1.5rem);
	padding-block: var(--card-padding-block, 1.5rem);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.testimonial-card--featured {
	background: var(--color-primary-500);
	border-color: var(--color-primary-500);
	color: #fff;
}
.testimonial-card__stars {
	display: flex;
	gap: 0.125rem;
	font-size: 1rem;
	line-height: 1;
}
.testimonial-card__star {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	color: #f59e0b;
}
.testimonial-card__quote {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	margin-block: 0;
}
.testimonial-card--featured .testimonial-card__quote {
	color: #fff;
}
.testimonial-card__text {
	font-size: var(--text-small-font-size, 0.875rem);
	color: var(--text-muted-color, var(--color-neutral-500));
	line-height: 1.6;
	margin-block: 0;
	flex: 1;
}
.testimonial-card--featured .testimonial-card__text {
	color: rgba(255, 255, 255, 0.8);
}
.testimonial-card__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-start: 0.5rem;
}
.testimonial-card__avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	object-fit: cover;
	flex-shrink: 0;
}
.testimonial-card__info {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}
.testimonial-card__name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-name-color, var(--color-neutral-900));
}
.testimonial-card--featured .testimonial-card__name {
	color: #fff;
}
.testimonial-card__role {
	font-size: 0.8125rem;
	color: var(--text-muted-color, var(--color-neutral-500));
}
.testimonial-card--featured .testimonial-card__role {
	color: rgba(255, 255, 255, 0.75);
}

/* --- stat-card: number + label metric block --- */
.stat-card {
	text-align: center;
	padding-inline: 1rem;
	padding-block: 1.25rem;
	background: var(--color-neutral-100, #f5f5f5);
	border-radius: var(--card-radius, 0.75rem);
}
.stat-card__number {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-primary-500);
	font-variant-numeric: tabular-nums;
}
.stat-card__label {
	font-size: var(--text-small-font-size, 0.875rem);
	color: var(--text-muted-color, var(--color-neutral-500));
	margin-block-start: 0.375rem;
	line-height: 1.4;
}

/* --- reveal: scroll-triggered fade-in animation --- */
.reveal {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-visible,
.reveal.reveal--visible {
	opacity: 1;
	transform: none;
}
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ================================ */
/* === SECTION: teams             === */
/* ================================ */

.teams {
	--accordion-card-radius: var(--accordion-radius);
}

/* ================================ */
/* === SECTION: vacancies         === */
/* ================================ */

.vacancies {
	--card-bg: var(--color-neutral-100);
	--card-border-width: 0;
}

/* ================================ */
/* === SECTION: offices           === */
/* ================================ */

.offices {
	--card-bg: var(--color-neutral-100);
	--card-border-width: 0;
}

.header-ondark {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 300;
    background: linear-gradient(180deg, rgba(9, 7, 20, 0.5), rgba(9, 7, 20, 0));
  }

  /* ---- header (dark colors, on white background) ---- */
  .header-ondark__header {
    position: relative;
    max-inline-size: 1440px;
    z-index: 300;
    width: 100%;
    margin-inline: auto;
    padding-inline: 60px;
    padding-block: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #ffffff;
  }

  .header-ondark__header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-block-size: 38px;
  }

  .header-ondark__logos {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 20px;
  }

  .header-ondark__logo-item {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  .header-ondark__logo-item img {
    block-size: 16px;
    inline-size: auto;
    max-width: none;
    display: block;
    flex: 0 0 auto;
    filter: brightness(0) invert(1);
  }

  .header-ondark__logo-sep {
    inline-size: 1px;
    block-size: 16px;
    background-color: rgba(255, 255, 255, 0.3);
    flex: 0 0 auto;
  }

  .header-ondark__header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .header-ondark__header-phone {
    font-family: var(--font-primary, "Suisse Intl", sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
  }

  .header-ondark__header-phone:hover {
    color: var(--color-accent, #754be9);
  }

  .header-ondark__header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    touch-action: manipulation;
  }

  .header-ondark__header-icon img {
    inline-size: 20px;
    block-size: 20px;
    flex: 0 0 auto;
    filter: brightness(0) invert(1);
  }

  .header-ondark__header-icon:focus-visible {
    outline: 2px solid var(--color-accent, #754be9);
    outline-offset: 2px;
    border-radius: 6px;
  }

  .header-ondark__header-phone-icon {
    display: none;
  }

  .header-ondark__header-divider {
    border: 0;
    border-block-start: 1px solid rgba(255, 255, 255, 0.2);
    margin-block-start: 8px;
  }

  .header-ondark__header-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 4px;
  }

  .header-ondark__header-nav a {
    font-family: var(--font-primary, "Suisse Intl", sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
  }

  .header-ondark__header-nav a:hover {
    color: var(--color-accent, #754be9);
  }

  /* Tablet (≤1023): compact header, smaller fonts */
  @media (max-width: 1024px) {
    .header-ondark__header {
      padding-inline: 40px;
      padding-block: 12px;
      gap: 0;
    }

    .header-ondark__header-top {
      min-block-size: 20px;
    }

    .header-ondark__logos {
      gap: 16px;
    }

    .header-ondark__logos > *:nth-child(n+4) {
      display: none;
    }

    .header-ondark__logo-item img {
      block-size: 16px;
    }

    .header-ondark__header-actions {
      gap: 12px;
    }

    .header-ondark__header-icon {
      inline-size: 20px;
      block-size: 20px;
    }

    .header-ondark__header-phone,
    .header-ondark__header-divider,
    .header-ondark__header-nav {
      display: none;
    }

    .header-ondark__header-phone-icon {
      display: inline-flex;
      inline-size: 20px;
      block-size: 20px;
    }

    .header-ondark__header-phone-icon img {
      width: 20px;
      height: 20px;
    }
  }

  /* Mobile (≤767) */
  @media (max-width: 767px) {
    .header-ondark__header {
      padding-inline: 20px;
    }

    .header-ondark__header-icon--search {
      display: none;
    }
  }

  /* ---- mega menu (opens from the "Меню" button) ---- */
  .header-ondark__menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: 200;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
  }

  .header-ondark__menu-backdrop {
    position: fixed;
    inset: 115px 0 0;
    background-color: rgba(9, 7, 20, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .header-ondark__menu-panel {
    position: relative;
    max-inline-size: 1440px;
    margin-inline: auto;
    background-color: var(--color-background, #ffffff);
    padding-block: 20px 40px;
    padding-inline: 60px;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-block-size: calc(100dvh - 115px);
    overflow-y: auto;
  }

  .header-ondark__menu-head {
    display: flex;
    justify-content: flex-end;
    margin-block-end: 20px;
  }

  .header-ondark__menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-neutral, #090714);
    cursor: pointer;
    touch-action: manipulation;
  }

  .header-ondark__menu-close:focus-visible {
    outline: 2px solid var(--color-accent, #754be9);
    outline-offset: 2px;
    border-radius: 6px;
  }

  /* stream-select — brand links ribbon (mobile) */
  .header-ondark__menu-stream {
    display: none;
    align-items: center;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-block-end: 24px;
  }

  .header-ondark__menu-stream::-webkit-scrollbar {
    display: none;
  }

  .header-ondark__menu-stream-tab {
    display: inline-flex;
    flex: 0 0 auto;
    text-decoration: none;
  }

  .header-ondark__menu-stream-tab img {
    block-size: 16px;
    inline-size: auto;
    max-inline-size: none;
    display: block;
    filter: brightness(0);
  }

  /* brand sections */
  .header-ondark__menu-section {
    margin-block-end: 32px;
  }

  .header-ondark__menu-section:last-of-type {
    margin-block-end: 24px;
  }

  .header-ondark__menu-heading {
    margin: 0 0 12px;
    font-family: var(--font-primary, "Suisse Intl", sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-neutral, #090714);
  }

  .header-ondark__menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 315px);
    grid-auto-flow: row;
    column-gap: 20px;
    row-gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .header-ondark__menu-grid::-webkit-scrollbar {
    display: none;
  }

  .header-ondark__menu-scroll {
    position: relative;
  }

  .header-ondark__menu-project {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-block: 8px;
    text-decoration: none;
    border-block-end: 1px solid var(--color-neutral-200, #e2e3e8);
  }

  .header-ondark__menu-project-img {
    inline-size: 48px;
    block-size: 48px;
    flex: 0 0 48px;
    border-radius: 8px;
    object-fit: cover;
  }

  .header-ondark__menu-project-info {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    flex: 1;
    min-inline-size: 0;
  }

  .header-ondark__menu-project-name {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    font-family: var(--font-secondary, "Grtsk Giga", Georgia, serif);
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    color: var(--color-neutral, #090714);
  }

  .header-ondark__menu-project-metro {
    grid-column: 1;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: center;
    font-family: var(--font-primary, "Suisse Intl", sans-serif);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #5b5d67;
    min-inline-size: 0;
  }

  .header-ondark__menu-project-metro-dot {
    inline-size: 6px;
    block-size: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background-color: #78177d;
  }

  .header-ondark__menu-project-price {
    grid-column: 2;
    grid-row: 1;
    text-align: end;
    font-family: var(--font-primary, "Suisse Intl", sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-neutral, #090714);
  }

  .header-ondark__menu-project-time {
    grid-column: 2;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    font-family: var(--font-primary, "Suisse Intl", sans-serif);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: var(--menu-time, var(--color-neutral-500, #8e9099));
  }

  .header-ondark__menu-project-time img {
    inline-size: 14px;
    block-size: 14px;
    flex: 0 0 14px;
  }

  .header-ondark__menu-project-time img.header-ondark__menu-project-walk {
    inline-size: 10px;
    block-size: 10px;
    flex: 0 0 10px;
  }

  .header-ondark__menu-cta-wrap {
    display: flex;
    justify-content: center;
    margin-block-start: 8px;
  }

  .header-ondark__menu-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-inline: 20px;
    padding-block: 16px;
    border-radius: 9999px;
    background-color: var(--color-primary-500, #754be9);
    color: #ffffff;
    font-family: var(--font-secondary, "Grtsk Giga", Georgia, serif);
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    text-decoration: none;
    touch-action: manipulation;
  }

  .header-ondark__menu-cta img {
    inline-size: 20px;
    block-size: 20px;
    flex: 0 0 20px;
  }

  .header-ondark__menu-cta:focus-visible {
    outline: 2px solid var(--color-accent, #754be9);
    outline-offset: 2px;
  }

  /* mobile nav categories — accordions in a column (≤1023) */
  .header-ondark__menu-cats {
    display: none;
    flex-direction: column;
    gap: 0;
    margin-block-start: 24px;
  }

  .header-ondark__menu-cat {
    border-block-end: 1px solid var(--color-neutral-200, #e2e3e8);
  }

  .header-ondark__menu-cat-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-block-size: 48px;
    padding-block: 6px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-primary, "Suisse Intl", sans-serif);
    font-size: 16px;
    line-height: 20px;
    color: var(--color-neutral, #090714);
  }

  .header-ondark__menu-cat-summary::-webkit-details-marker,
  .header-ondark__menu-cat-summary::marker {
    display: none;
    content: "";
  }

  .header-ondark__menu-cat-summary img {
    inline-size: 20px;
    block-size: 20px;
    flex: 0 0 20px;
    transition: transform 0.2s ease;
  }

  .header-ondark__menu-cat[open] .header-ondark__menu-cat-summary img {
    transform: rotate(180deg);
  }

  .header-ondark__menu-cat-content {
    display: flex;
    flex-direction: column;
    padding-block-end: 12px;
    overflow: hidden;
    transition: height 0.3s ease;
  }

  .header-ondark__menu-cat-content a {
    padding-block: 10px;
    font-family: var(--font-primary, "Suisse Intl", sans-serif);
    font-size: 14px;
    line-height: 20px;
    color: var(--color-neutral-700, #4b4d55);
    text-decoration: none;
  }

  .header-ondark__menu-cat-content a:hover {
    color: var(--color-accent, #754be9);
  }

  /* mobile bottom microbanners (≤1023) */
  .header-ondark__menu-banners {
    display: none;
    flex-direction: column;
    gap: 8px;
    margin-block-start: 24px;
  }

  .header-ondark__menu-banner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
    color: #ffffff;
    text-decoration: none;
    position: relative;
    overflow: hidden;
  }

  .header-ondark__menu-banner-zero {
    display: none;
    position: absolute;
    inset-block-end: 8px;
    inset-inline-end: 16px;
    font-family: var(--font-secondary, "Grtsk Giga", Georgia, serif);
    font-size: 80px;
    font-weight: 100;
    line-height: 80px;
    color: #ffffff;
    pointer-events: none;
    z-index: 0;
  }

  .header-ondark__menu-banner--purple {
    background-color: var(--color-primary-500, #754be9);
  }

  .header-ondark__menu-banner--grey {
    background-color: rgba(116, 118, 128, 0.5);
  }

  .header-ondark__menu-banner-top {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .header-ondark__menu-banner-top img {
    inline-size: 20px;
    block-size: 20px;
    flex: 0 0 20px;
  }

  .header-ondark__menu-banner-title {
    font-family: var(--font-secondary, "Grtsk Giga", Georgia, serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #ffffff;
  }

  .header-ondark__menu-banner--grey .header-ondark__menu-banner-title {
    font-size: 13px;
    line-height: 14px;
  }

  .header-ondark__menu-banner-text {
    font-family: var(--font-primary, "Suisse Intl", sans-serif);
    font-size: 14px;
    line-height: 18px;
    color: #d0d1d7;
  }

  .header-ondark__menu-banner-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-inline-size: 0;
  }

  .header-ondark__menu-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .header-ondark__menu-stores a {
    display: inline-flex;
  }

  .header-ondark__menu-stores img {
    inline-size: 24px;
    block-size: 24px;
    flex: 0 0 24px;
  }

  .header-ondark__menu-contacts {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border-radius: 16px;
    background-color: var(--color-neutral, #090714);
    color: #ffffff;
  }

  .header-ondark__menu-phone {
    font-family: var(--font-primary, "Suisse Intl", sans-serif);
    font-size: 14px;
    line-height: 18px;
    color: #ffffff;
    text-decoration: none;
  }

  .header-ondark__menu-socials {
    display: inline-flex;
    gap: 4px;
  }

  .header-ondark__menu-socials a {
    display: inline-flex;
    inline-size: 32px;
    block-size: 32px;
    align-items: center;
    justify-content: center;
  }

  .header-ondark__menu-socials img {
    inline-size: 20px;
    block-size: 20px;
  }

  /* open state */
  .header-ondark__menu--open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s;
  }

  .header-ondark__menu--open .header-ondark__menu-backdrop {
    opacity: 1;
  }

  .header-ondark__menu--open .header-ondark__menu-panel {
    opacity: 1;
    transform: translateY(0);
  }

  /* Tablet/Mobile (≤1023): full-screen overlay */
  @media (max-width: 1024px) {
    .header-ondark__menu {
      position: fixed;
      inset-block: 56px 0;
      inset-inline: 0;
    }

    .header-ondark__menu-backdrop {
      inset-block-start: 56px;
    }

    .header-ondark__menu-panel {
      max-inline-size: none;
      max-block-size: none;
      block-size: 100%;
      padding-inline: 20px;
      border-radius: 0;
    }

    .header-ondark__menu-grid {
      grid-template-columns: repeat(4, 138px);
    }

    .header-ondark__menu-stream {
      display: flex;
    }

    .header-ondark__menu-grid--wrap {
      grid-template-columns: repeat(auto-fill, 138px);
      justify-content: start;
      overflow-x: visible;
      row-gap: 8px;
    }

    .header-ondark__menu-scroll::after {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-end: 0;
      inline-size: 72px;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-background, #ffffff));
      pointer-events: none;
      z-index: 1;
    }

    .header-ondark__menu-cats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 12px;
      row-gap: 0;
    }

    .header-ondark__menu-project-price,
    .header-ondark__menu-project-time,
    .header-ondark__menu-project-metro {
      display: none;
    }

    .header-ondark__menu-project-info {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .header-ondark__menu-project-img {
      inline-size: 44px;
      block-size: 44px;
      flex: 0 0 44px;
    }

    .header-ondark__menu-banner-zero {
      display: block;
    }

    .header-ondark__menu-cta-wrap {
      display: none;
    }

    .header-ondark__menu-banners {
      display: flex;
      flex-direction: row;
      gap: 8px;
    }

    .header-ondark__menu-contacts {
      display: flex;
    }
  }

  @media (max-width: 767px) {
    .header-ondark__menu-cats {
      grid-template-columns: 1fr;
    }

    .header-ondark__menu-banners {
      flex-direction: column;
    }

    .header-ondark__menu-banner-zero {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .header-ondark *,
    .header-ondark *::before,
    .header-ondark *::after {
      transition-duration: 0.01ms !important;
    }
  }

/* ==== mr-group / hero / school ==== "Начальная школа в ЖК Метрополия"
     Full-bleed bg image + top gradient + headline (h1, info tags, CTA)
     + slider (prev/next round buttons — back disabled at slide 1; 3 mini-banner cards per slide). */

  .hero-school {
    position: relative;
    isolation: isolate;
    background-color: #F5F5F5;
    color: #ffffff;
    overflow: hidden;
    /* own horizontal swipes (hero content), let the page scroll vertically */
    touch-action: pan-y;
    /* fixed header height: 115 desktop / 56 tablet+mobile */
    --header-offset: 115px;
  }

  /* hero panel carousel — full-bleed slides (100% width & height),
     native horizontal scroll + scroll-snap. Infinite loop is wired in JS
     via lead/tail clones. Each slide is one whole panel (bg + overlay +
     headline), so the photo and the content never slide in opposite directions. */
  .hero-school__scroller {
    display: flex;
    inline-size: 100%;
    block-size: calc(700px + var(--header-offset));
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* NOTE: scroll-behavior is intentionally NOT set here. A CSS smooth value
       makes every `scroller.scrollLeft = x` animate (incl. scrollTo 'auto'),
       so the silent clone→real loop jump would animate backwards across the
       whole strip and get caught by scroll-snap. Smooth is requested
       explicitly via scrollTo({behavior:'smooth'}) in JS instead. */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hero-school__scroller::-webkit-scrollbar { display: none; }

  .hero-school__slide {
    position: relative;
    flex: 0 0 100%;
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
    isolation: isolate;
    scroll-snap-align: center;
  }

  .hero-school__bg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .hero-school__overlay {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(9, 7, 20, 0.55) 0%, rgba(9, 7, 20, 0.15) 30%, rgba(9, 7, 20, 0.10) 60%, rgba(9, 7, 20, 0.65) 100%);
  }

  .hero-school__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: 1440px;
    margin-inline: auto;
    padding-inline: 60px;
    padding-block: calc(40px + var(--header-offset)) 100px;
  }

  .hero-school__title {
    margin: 0;
    color: #ffffff;
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 46px;
    line-height: 1.22;
    text-wrap: balance;
  }

  .hero-school__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .hero-school__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-inline: 12px;
    padding-block: 6px;
    border-radius: 999px;
    background-color: rgba(9, 7, 20, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    font-family: var(--font-primary, "Suisse Intl", sans-serif);
    font-size: 13px;
    line-height: 20px;
  }

  .hero-school__tag-icon {
    flex: 0 0 auto;
    inline-size: 16px;
    block-size: 16px;
  }

  /* promo chips under the tags — grtsk, solid, nowrap */
  .hero-school__chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .hero-school__chip {
    display: inline-flex;
    align-items: center;
    padding-inline: 16px;
    padding-block: 5px;
    border-radius: 999px;
    background-color: #ffffff;
    color: #090714;
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
  }
  .hero-school__chip--accent {
    background-color: #d50c15;
    color: #ffffff;
  }

  /* ---- slider ---- */
  .hero-school__slider {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    /* match the content gutter (1440) so cards stop spreading past it on >1440 */
    max-inline-size: 1440px;
    margin-inline: auto;
    /* sit the cards on the bottom edge of the hero panel */
    margin-block-start: -85px;
    padding-inline: 60px;
  }

  .hero-school__nav {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    margin-inline-start: 0;
    padding: 8px;
    flex-shrink: 0;
    block-size: fit-content;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 9999px;
  }

  .hero-school__nav-btn {
    position: relative;
    inline-size: 70px;
    block-size: 70px;
    border: 0;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #090714;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .hero-school__nav-btn img {
    inline-size: 12px;
    block-size: 12px;
  }

  /* autoplay progress ring on the "next" button — SVG circle starts at 3 o'clock
     and runs clockwise, so a plain stroke-dashoffset animation fills from the
     right-center point back to itself over AUTO_MS (set in JS). */
  .hero-school__progress {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
    overflow: visible;
  }
  .hero-school__progress circle {
    stroke: #d50c15;
    stroke-linecap: round;
  }



  .hero-school__nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .hero-school__nav-btn:focus-visible {
    outline: 2px solid var(--color-accent, #754be9);
    outline-offset: 2px;
  }

  .hero-school__viewport {
    overflow: hidden;
    flex: 1;
  }

  .hero-school__track {
    display: flex;
    gap: 12px;
    transition: transform 0.32s var(--dds-ease-out-expo, cubic-bezier(.16, 1, .3, 1));
    will-change: transform;
  }

  .hero-school__card {
    user-select: none;
    -webkit-user-select: none;
  }
  .hero-school__card img {
    -webkit-user-drag: none;
  }

  @media (min-width: 1024px) {
    .hero-school__viewport { cursor: grab; }
    .hero-school__viewport.is-dragging { cursor: grabbing; }
  }

  /* split card: white content block (left) + masked photo (right) */
  .hero-school__card {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 16px;
    background-color: #ffffff;
    color: #090714;
    text-decoration: none;
    flex: 0 0 401px;
    inline-size: 401px;
    block-size: 150px;
  }

  .hero-school__card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    z-index: 2;
    flex: 1;
    min-inline-size: 0;
    padding-block: 16px;
    padding-inline-start: 16px;
  }

  .hero-school__card-title {
    margin: 0;
    color: #090714;
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
  }

  .hero-school__card-tags {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .hero-school__card-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-inline: 12px;
    padding-block: 6px;
    border: 0;
    border-radius: 999px;
    background-color: #ffffff;
    color: #8e9099;
    font-family: var(--font-primary, "Suisse Intl", sans-serif);
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
  }

  .hero-school__card-pill--price {
    color: #d50c15;
  }

  .hero-school__card-station {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-school__card-metro-dot {
    flex: 0 0 auto;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background-color: var(--metro-color, #943e90);
  }

  .hero-school__card-walk {
    flex: 0 0 auto;
    inline-size: 16px;
    block-size: 16px;
  }

  .hero-school__card-img {
    flex: 0 0 168px;
    inline-size: 168px;
    block-size: 100%;
    object-fit: cover;
    /* cut: left-bottom corner sliced diagonally, photo flush to the right edge */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 22.4% 100%, 0 0);
  }

  /* Tablet + Mobile (≤1023): no slider buttons — cards in a horizontal scroll row */
  @media (max-width: 1023px) {
    .hero-school { --header-offset: 56px; }
    .hero-school__scroller { block-size: calc(600px + var(--header-offset)); }
    .hero-school__slide { flex: 0 0 100%; }
    .hero-school__content { padding-inline: 40px; padding-block: calc(40px + var(--header-offset)) 133px; }
    .hero-school__title { font-size: 32px; }
    .hero-school__nav { display: none; }
    .hero-school__slider { margin-inline: -40px; min-width: 0; margin-block-start: -80px; padding-inline: 0; }
    .hero-school__viewport { overflow: hidden; min-width: 0; }
    .hero-school__track {
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      transform: none;
      inline-size: 100%;
      margin-inline-start: 40px;
      padding-inline-start: 0;
      padding-inline-end: 40px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
    }
    .hero-school__track::-webkit-scrollbar { display: none; }
    .hero-school__card { flex: 0 0 324px; inline-size: 324px; scroll-snap-align: start; }
  }

  @media (max-width: 767px) {
    .hero-school__scroller { block-size: calc(600px + var(--header-offset)); }
    .hero-school__slide { flex: 0 0 100%; }
    .hero-school__content { padding-inline: 20px; padding-block: calc(60px + var(--header-offset)) 133px; gap: 16px; }
    .hero-school__title { font-size: 23px; }
    .hero-school__tags { flex-direction: column; align-items: flex-start; }
    .hero-school__slider { margin-inline: -20px; padding-inline: 0; margin-block-start: -80px; }
    .hero-school__track {
      /* center one card, peek neighbours on both sides */
      margin-inline: 0;
      padding-inline: calc((100% - 324px) / 2);
    }
    .hero-school__card { flex: 0 0 324px; scroll-snap-align: center; }
    .hero-school__card-pill { font-size: 12px; }
    .hero-school__card-img { flex-basis: 150px; inline-size: 150px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-school__track { transition: none; }
  }

.about {
    background-color: var(--color-surface);
  }

  .about__container {
    max-inline-size: 1440px;
    margin-inline: auto;
    padding-inline: 60px;
    padding-block: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    align-items: start;
  }

  .about__headline-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .about__title {
    margin: 0;
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.3125;
    color: var(--color-neutral-900);
    text-wrap: balance;
  }

  .about__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 8px;
  }

  .about__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 32px;
    padding-inline: 10px;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--btn-radius);
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-neutral-900);
    white-space: nowrap;
  }

  .about__body-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .about__body {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 18px;
    line-height: 1.4444;
    color: var(--color-neutral-900);
  }

  .about__body p {
    margin: 0;
  }

  .about__body p + p {
    margin-block-start: 20px;
  }

  /* 1280px */
  @media (max-width: 1439px) {
    .about__container {
      column-gap: 24px;
    }

    .about__headline-block,
    .about__body-block {
      gap: 20px;
    }

    .about__title {
      font-size: 28px;
      line-height: 1.2857;
    }

    .about__body {
      font-size: 16px;
      line-height: 1.375;
    }
  }

  /* 1024px — still two columns, tighter padding */
  @media (max-width: 1279px) {
    .about__container {
      padding-inline: 40px;
      padding-block: 40px;
      column-gap: 32px;
    }

    .about__title {
      font-size: 18px;
      line-height: 1.4444;
    }

    .about__body {
      line-height: 1.25;
    }
  }

  /* 768px — stack vertically */
  @media (max-width: 1023px) {
    .about__container {
      grid-template-columns: 1fr;
      column-gap: 0;
      row-gap: 32px;
    }
  }

  /* 375px mobile */
  @media (max-width: 767px) {
    .about__container {
      padding-inline: 20px;
      row-gap: 32px;
    }

    .about__title {
      font-size: 20px;
      line-height: 1.3;
    }

    .about__tag {
      padding-inline: 8px;
      font-size: 13px;
    }
  }

.stats {
    display: block;
    background-color: var(--color-background);
    padding: 60px;
  }

  .stats__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    gap: 40px 12px;
    max-inline-size: 1320px;
    margin-inline: auto;
  }

  .stats__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .stats__item--1 {
    grid-row: 1;
    grid-column: 1;
  }

  .stats__item--2 {
    grid-row: 1;
    grid-column: 2;
  }

  .stats__item--3 {
    grid-row: 2;
    grid-column: 1;
  }

  .stats__item--4 {
    grid-row: 2;
    grid-column: 2;
  }

  .stats__number {
    margin: 0;
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 90px;
    line-height: 110%;
    color: var(--color-neutral-900);
  }

  .stats__description {
    margin: 0;
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: var(--color-neutral-600);
  }

  /* 1024px — tablet */
  @media (max-width: 1023px) {
    .stats {
      padding: 40px;
    }

    .stats__grid {
      gap: 32px 12px;
    }

    .stats__item {
      gap: 8px;
    }

    .stats__number {
      font-size: 50px;
    }

    .stats__description {
      font-size: 13px;
      line-height: 14px;
    }
  }

  /* 375px mobile */
  @media (max-width: 767px) {
    .stats {
      padding: 20px;
    }

    .stats__grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      gap: 32px;
    }

    .stats__item--1,
    .stats__item--2,
    .stats__item--3,
    .stats__item--4 {
      grid-row: auto;
      grid-column: auto;
    }

    .stats__item {
      gap: 8px;
    }

    .stats__number {
      font-size: 36px;
    }

    .stats__description {
      font-size: 13px;
      line-height: 14px;
    }
  }

.hero-first-screen {
    background-color: var(--color-background);
    /* fixed header height: 115 desktop / 56 tablet+mobile */
    --header-offset: 115px;
  }

  /* ---- content grid ---- */
  .hero-first-screen__container {
    max-inline-size: 1440px;
    margin-inline: auto;
    padding-inline: 60px;
    padding-block: calc(60px + var(--header-offset)) 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 24px;
    align-items: center;
  }

  .hero-first-screen__breadcrumbs {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    color: var(--color-neutral-400);
    font-size: 12px;
    line-height: 1.2;
  }

  .hero-first-screen__breadcrumbs a {
    color: inherit;
    text-decoration: none;
  }

  .hero-first-screen__breadcrumbs a:hover {
    color: var(--color-neutral-900);
  }

  .hero-first-screen__crumb-sep {
    color: var(--color-neutral-300);
  }

  .hero-first-screen__media {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    aspect-ratio: 654 / 350;
    clip-path: polygon(19.2% 4.34%, 100% 0%, 95.77% 94.01%, 0% 100%);
  }

  .hero-first-screen__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .hero-first-screen__text {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .hero-first-screen__textblock {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .hero-first-screen__title {
    margin: 0;
    color: var(--color-neutral-900);
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 46px;
    line-height: 1.22;
    text-wrap: balance;
  }

  .hero-first-screen__description {
    margin: 0;
    color: var(--color-neutral-600);
    font-size: 16px;
    line-height: 1.25;
  }

  .hero-first-screen__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    padding-block: 13px;
    padding-inline: 20px;
    min-block-size: 44px;
    text-decoration: none;
    background-color: var(--color-primary-500);
    color: #ffffff;
    border-radius: 9999px;
  }

  /* Tablet (≤1023) */
  @media (max-width: 1023px) {
    .hero-first-screen {
      --header-offset: 56px;
    }

    .hero-first-screen__container {
      padding-inline: 40px;
    }

    .hero-first-screen__breadcrumbs {
      font-size: 11px;
    }

    .hero-first-screen__title {
      font-size: 24px;
      line-height: 1.25;
    }

    .hero-first-screen__description {
      font-size: 14px;
      line-height: 1.3;
    }
  }

  /* Mobile (≤767): stacked layout */
  @media (max-width: 767px) {
    .hero-first-screen__container {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      padding-inline: 20px;
      padding-block: calc(20px + var(--header-offset)) 40px;
      column-gap: 0;
      row-gap: 20px;
    }

    .hero-first-screen__breadcrumbs {
      grid-column: 1;
      grid-row: 1;
    }

    .hero-first-screen__media {
      grid-column: 1;
      grid-row: 2;
      aspect-ratio: 338 / 290;
    }

    .hero-first-screen__text {
      grid-column: 1;
      grid-row: 3;
      gap: 20px;
    }

    .hero-first-screen__textblock {
      gap: 8px;
    }

    .hero-first-screen__cta {
      align-self: stretch;
      inline-size: 100%;
    }
  }

/* Form feedback — MR Group (desktop 1440 / tablet 768 / mobile 375).
     Reuses the dropdown + checkbox + field components from form/steps. */
  .mr-feedback {
    background-color: #ffffff;
    padding-inline: 60px;
    padding-block: 60px;
  }
  .mr-feedback *,
  .mr-feedback *::before,
  .mr-feedback *::after { box-sizing: border-box; }

  .mr-feedback__inner {
    max-width: 1320px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    align-items: start;
  }

  /* ---------- left: intro ---------- */
  .mr-feedback__intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }
  .mr-feedback__title {
    margin: 0;
    color: var(--color-neutral);
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.31;
  }
  .mr-feedback__desc {
    margin: 0;
    color: #8E9099;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.44;
  }

  /* ---------- right: form ---------- */
  .mr-feedback__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
  }

  .mr-feedback__inputs { display: flex; flex-direction: column; gap: 12px; }
  .mr-feedback__inputs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  /* field = pill wrapper; input is a transparent overlay and the
     placeholder is a real <span> so it renders like Figma and stays CMS-measurable */
  .mr-feedback__field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    block-size: 52px;
    padding-inline: 16px;
    border-radius: var(--radius-8);
    background: #f5f5f5;
    border: 1px solid var(--color-neutral-300);
  }
  .mr-feedback__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    outline: 0;
    padding-inline: 16px;
    border-radius: inherit;
    background: transparent;
    color: var(--color-neutral);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
  }
  .mr-feedback__ph {
    pointer-events: none;
    color: #5b5d67;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
  }
  .mr-feedback__input:focus + .mr-feedback__ph,
  .mr-feedback__input:not(:placeholder-shown) + .mr-feedback__ph { opacity: 0; }

  /* custom project dropdown — animated field-width list, rotating chevron */
  .mr-feedback__field--select {
    flex: 1 1 0;
    position: relative;
    padding: 0;
  }
  .mr-feedback__select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding-inline: 16px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: #5b5d67;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-align: start;
    cursor: pointer;
    touch-action: manipulation;
  }
  .mr-feedback__select-trigger:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
  }
  .mr-feedback__select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mr-feedback__chevron {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--color-neutral-400);
    transition: transform 0.18s ease;
  }
  .mr-feedback__field--select.is-open .mr-feedback__chevron { transform: rotate(180deg); }
  .mr-feedback__select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--color-background);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-12);
    box-shadow: var(--shadow-deep);
    z-index: 20;
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
    transform-origin: top center;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    max-height: 260px;
    overflow-y: auto;
  }
  .mr-feedback__field--select.is-open .mr-feedback__select-menu {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
  .mr-feedback__select-option {
    padding-block: 10px;
    padding-inline: 12px;
    border-radius: var(--radius-8);
    color: var(--color-neutral);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
  }
  .mr-feedback__select-option[aria-selected="true"] {
    background: var(--color-primary-50);
    color: var(--color-primary-600);
  }

  /* ---------- consent + button ---------- */
  .mr-feedback__actions { display: flex; flex-direction: column; gap: 24px; }

  .mr-feedback__consents { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .mr-feedback__consent {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
  }
  .mr-feedback__check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .mr-feedback__check-box {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-block-start: 1px;
    border-radius: var(--radius-6);
    background: rgba(116, 118, 128, 0.2);
    display: grid;
    place-items: center;
    color: var(--color-background);
    transition: background 0.15s ease;
  }
  .mr-feedback__check-box::after {
    content: "";
    width: 9px;
    height: 6px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) scale(0);
    transition: transform 0.15s ease;
  }
  .mr-feedback__check-input:checked + .mr-feedback__check-box { background: var(--color-neutral); }
  .mr-feedback__check-input:checked + .mr-feedback__check-box::after { transform: rotate(-45deg) scale(1); }
  .mr-feedback__check-input:focus-visible + .mr-feedback__check-box { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
  .mr-feedback__check-text {
    color: var(--color-neutral-500);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
  }
  .mr-feedback__check-text a { color: var(--color-neutral); text-decoration: none; }

  .mr-feedback__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    padding-inline: 20px;
    border: 0;
    border-radius: 9999px;
    background: #754be9;
    color: var(--color-background);
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 10px;
    line-height: 18px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.2s ease, transform 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  }

  .mr-feedback__btn:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
  .mr-feedback__btn:active { transform: scale(0.97); }

  .mr-feedback__error {
    margin: 0;
    color: var(--color-negative);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    display: none;
  }
  .mr-feedback.is-invalid .mr-feedback__error { display: block; }

  /* ---------- tablet (768) ---------- */
  @media (max-width: 1023px) {
    .mr-feedback { padding-inline: 40px; padding-block: 60px; }
    .mr-feedback__inner { grid-template-columns: 1fr; row-gap: 32px; }
    .mr-feedback__title { font-size: 28px; line-height: 1.3;}
  }

  /* ---------- mobile (375) ---------- */
  @media (max-width: 767px) {
    .mr-feedback { padding-inline: 20px; padding-block: 40px; }

    .mr-feedback__title { font-size: 22px; line-height: 1.3;}
    .mr-feedback__desc { font-size: 16px; line-height: 22px; }

    /* two-field row stacks on mobile */
    .mr-feedback__inputs-row { grid-template-columns: 1fr; gap: 12px; }
    .mr-feedback__field { flex: 0 0 auto; width: 100%; }
    .mr-feedback__check-text { font-size: 12px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mr-feedback *,
    .mr-feedback *::before,
    .mr-feedback *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

.about {
    background-color: var(--color-surface);
  }

  .about__container {
    max-inline-size: 1440px;
    margin-inline: auto;
    padding-inline: 60px;
    padding-block: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    align-items: start;
  }

  .about__headline-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .about__title {
    margin: 0;
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.3125;
    color: var(--color-neutral-900);
    text-wrap: balance;
  }

  .about__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 8px;
  }

  .about__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 32px;
    padding-inline: 10px;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--btn-radius);
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-neutral-900);
    white-space: nowrap;
  }

  .about__body-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .about__body {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 18px;
    line-height: 1.4444;
    color: var(--color-neutral-900);
  }

  .about__body p {
    margin: 0;
  }

  .about__body p + p {
    margin-block-start: 20px;
  }

  /* 1280px */
  @media (max-width: 1439px) {
    .about__container {
      column-gap: 24px;
    }

    .about__headline-block,
    .about__body-block {
      gap: 20px;
    }

    .about__title {
      font-size: 28px;
      line-height: 1.2857;
    }

    .about__body {
      font-size: 16px;
      line-height: 1.375;
    }
  }

  /* 1024px — still two columns, tighter padding */
  @media (max-width: 1279px) {
    .about__container {
      padding-inline: 40px;
      padding-block: 40px;
      column-gap: 32px;
    }

    .about__title {
      font-size: 18px;
      line-height: 1.4444;
    }

    .about__body {
      line-height: 1.25;
    }
  }

  /* 768px — stack vertically */
  @media (max-width: 1023px) {
    .about__container {
      grid-template-columns: 1fr;
      column-gap: 0;
      row-gap: 32px;
    }
  }

  /* 375px mobile */
  @media (max-width: 767px) {
    .about__container {
      padding-inline: 20px;
      row-gap: 32px;
    }

    .about__title {
      font-size: 20px;
      line-height: 1.3;
    }

    .about__tag {
      padding-inline: 8px;
      font-size: 13px;
    }
  }

/*
    Footer Bottom — нижняя тёмная секция футера MR Group (Figma MR Сайт UI kit:
    2497:254 desktop 1320×160 / 2497:359 tablet 1024×307 / mobile — стек на базе tablet).
    Фон var(--color-neutral) #090714, текст белый var(--color-background), серый var(--color-neutral-500).
    Адаптив: desktop — 4 колонки в ряд, tablet — 2 ряда по 2 колонки, mobile — вертикальный стек.
    Шрифт var(--font-primary) "Suisse Intl".
  */

  [data-cms-section="footer.bottom"] {
    background: transparent;
    color: var(--color-background);
    font-family: var(--font-primary);
  }

  .fb__inner {
    background: var(--color-neutral);
    margin-inline: 60px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding-block-start: 20px;
    padding-block-end: 20px;
    padding-inline: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .fb__cols {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 24px;
    row-gap: 20px;
  }

  .fb__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .fb__col--address { flex: 0 0 336px; justify-content: space-between; align-self: stretch; }
  .fb__col--policy { flex: 0 0 440px; }
  .fb__col--contacts { flex: 0 0 209px; }
  .fb__col--socials { flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; gap: 16px; align-items: center; }

  .fb__address {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--color-background);
  }
  .fb__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .fb__links a {
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--color-background);
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .fb__links a:hover { opacity: 0.7; }
  .fb__links a:focus-visible { outline: 2px solid var(--color-background); outline-offset: 2px; }
  .fb__disclaimer {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--color-neutral-500);
  }
  .fb__support {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--color-neutral-500);
  }
  .fb__contact {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--color-background);
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .fb__contact:hover { opacity: 0.7; }
  .fb__contact:focus-visible { outline: 2px solid var(--color-background); outline-offset: 2px; border-radius: 2px; }
  .fb__soc {
    display: inline-flex;
    line-height: 0;
    transition: opacity 0.2s ease;
  }
  .fb__soc:hover { opacity: 0.7; }
  .fb__soc:focus-visible { outline: 2px solid var(--color-background); outline-offset: 2px; border-radius: 2px; }
  .fb__soc img {
    width: 20px;
    height: 20px;
    display: block;
  }
  .fb__copy-in {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--color-neutral-500);
  }
  .fb__copy-bottom {
    display: none;
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--color-neutral-500);
  }

  /* === Tablet ≤1023 === */
  @media (max-width: 1023px) {
    .fb__inner { margin-inline: 0; padding-block-start: 32px; padding-block-end: 32px; padding-inline: 20px; gap: 24px; }
    .fb__cols { column-gap: 24px; row-gap: 24px; }
    .fb__col--address,
    .fb__col--policy { flex-basis: calc(50% - 12px); flex-grow: 0; }
    .fb__col--contacts,
    .fb__col--socials { flex-basis: calc(50% - 12px); flex-grow: 0; }
    .fb__col--socials { align-self: flex-start; }
    .fb__address,
    .fb__links a,
    .fb__support,
    .fb__contact { font-size: 12px; }
    .fb__disclaimer { font-size: 11px; }
    .fb__copy-in { display: none; }
    .fb__copy-bottom { display: block; }
    .fb__soc img { width: 18px; height: 18px; }
  }

  /* === Mobile ≤767 === */
  @media (max-width: 767px) {
    .fb__inner { margin-inline: 0; padding-block-start: 20px; padding-block-end: 20px; padding-inline: 16px; gap: 20px; }
    .fb__cols { row-gap: 20px; }
    .fb__col--address,
    .fb__col--policy,
    .fb__col--contacts,
    .fb__col--socials { flex-basis: 100%; }
    .fb__col--socials { align-self: flex-start; }
    .fb__soc img { width: 18px; height: 18px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .fb__links a, .fb__contact { transition: none; }
  }

/* ================================ */
/* === SECTION: job-board         === */
/* ================================ */

.job-board {
	--section-margin-top: 0;
}

/* === section-intro: section heading and description with consistent alignment === */
/* Gap removed — spacing is controlled via mt-* in templates */
.section-intro {
	display: flex;
	flex-direction: column;
}

/* Centered section: heading and description centered */
.section-intro--centered {
	text-align: center;
	align-items: center;
}
.section-intro--centered .section-intro__description {
	max-width: 42rem;
	margin-inline: auto;
}
@media (max-width: 47.99rem) {
	.section-intro--centered .section-intro__description {
		max-width: 100%;
	}
}

/* Left alignment: heading and description on the same level */
.section-intro--left {
	text-align: left;
}
.section-intro--left h2,
.section-intro--left h3,
.section-intro--left .section-intro__description {
	text-align: inherit;
}

/* Rubber architecture: on mobile, rem-based classes become too small */
@media (max-width: 767px) {
	.max-w-xs, .max-w-sm, .max-w-md, .max-w-lg, .max-w-xl,
	.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl,
	.max-w-prose {
		max-width: none;
	}

	.icon-box, .icon-box-primary, .icon-box-outline, .icon-box-light, .icon-box-ghost {
		min-width: 4.27rem; /* ~16px at 375px viewport (1rem = 3.75px in rubber_root) */
		min-height: 4.27rem;
	}

	/* All inline SVG icons: minimum visible size in rubber_root (1rem = 3.75px) */
	svg { min-width: 16px; min-height: 16px; }

	/* Tailwind rem-based sizes: avatars, icons — minimum physical sizes */
	.w-5 { min-width: 20px; } .h-5 { min-height: 20px; }
	.w-6 { min-width: 24px; } .h-6 { min-height: 24px; }
	.w-8 { min-width: 32px; } .h-8 { min-height: 32px; }
	.w-10 { min-width: 40px; } .h-10 { min-height: 40px; }
	.w-12 { min-width: 48px; } .h-12 { min-height: 48px; }
	.w-14 { min-width: 56px; } .h-14 { min-height: 56px; }
	.w-16 { min-width: 64px; } .h-16 { min-height: 64px; }
	.w-20 { min-width: 80px; } .h-20 { min-height: 80px; }

	/* Accordion icon SVG: --accordion-icon-size 0.875rem = 3.28px in rubber_root */
	.accordion-icon svg { min-width: 16px; min-height: 16px; }

	/* Icon buttons with rounded-full: padding-only buttons without explicit size */
	.rounded-full.btn,
	.rounded-full.btn-primary,
	.rounded-full.btn-outline,
	.rounded-full.btn-light,
	.rounded-full.btn-ghost { min-width: 40px; min-height: 40px; }
}



/* ============================================================
   mr-group dds layer — emits MR/dds tokens + component classes.
   Master twig above only emits minimal/Tailwind tokens; MR sections
   reference --color-accent, --spacing-*, --radius-*, --shadow-*,
   --dds-dur-*, --dds-ease-* and .dds-* component classes, all defined here.
   ============================================================ */
:root {
  --layout-gap: 0px;

  --font-display: "Grtsk Giga", "Satoshi Variable", sans-serif;
  --font-mono: ui-monospace, "SF Mono", monospace;

  --color-accent: #754be9;
  --color-accent-light: #efeafe;
  --color-positive: #27a444;
  --color-positive-light: #eaf6ed;
  --color-negative: #d91528;
  --color-negative-light: #fdecee;
  --color-warning: #ed9407;
  --color-warning-content: #9f6402;
  --color-warning-light: #fdf2dc;

  --spacing-0: 0px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-pill: 999px;

  --shadow-shallow: 0 1px 8px rgba(28,30,38,0.10), 0 0 2px rgba(28,30,38,0.10);
  --shadow-deep: 0 2px 12px rgba(28,30,38,0.12);
  --btn-glass: 0 1px 2px rgba(0, 0, 0, 0.04);

  --dds-dur-fast: .2s;
  --dds-dur-ui: .25s;
  --dds-dur-press: .12s;
  --dds-dur-card: .4s;
  --dds-ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --dds-ease-ui-snap: cubic-bezier(.4, 0, .2, 1);

  --dds-btn-primary-bg: #090714;
  --dds-btn-primary-fg: #ffffff;
  --dds-btn-primary-bg-hover: color-mix(in srgb, #090714 85%, #ffffff);
  --dds-btn-primary-bg-active: color-mix(in srgb, #090714 75%, #ffffff);
  --dds-btn-secondary-bg: #f0f1f6;
  --dds-btn-secondary-fg: #090714;
  --dds-btn-secondary-bg-hover: color-mix(in srgb, #f0f1f6 90%, #000000);
  --dds-btn-secondary-bg-active: color-mix(in srgb, #f0f1f6 80%, #000000);

  --btn-background: #090714;
  --btn-color: #ffffff;
  --card-background: #f0f1f6;
  --card-color: #090714;
  --chip-background: #f0f1f6;
  --chip-color: #090714;
  --badge-background: #754be9;
  --badge-color: #ffffff;
}

.dds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap, 8px);border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;padding-block:var(--btn-padding-block, 13px);padding-inline:var(--btn-padding-inline, 20px);min-block-size:44px;border-radius:var(--btn-radius, 999px);font-family:var(--btn-font-family, var(--font-secondary));font-weight:var(--btn-font-weight, 500);font-size:var(--btn-font-size, 14px);line-height:var(--btn-line-height, 18px);transition:background var(--dds-dur-fast, .2s) ease, border-color var(--dds-dur-fast, .2s) ease, opacity var(--dds-dur-fast, .2s) ease}
.dds-btn--primary{background:var(--dds-btn-primary-bg, #090714);color:var(--dds-btn-primary-fg, #ffffff);box-shadow:var(--btn-glass)}
.dds-btn--primary:hover{background:var(--dds-btn-primary-bg-hover)}
.dds-btn--primary:active{background:var(--dds-btn-primary-bg-active)}
.dds-btn--secondary{background:var(--dds-btn-secondary-bg, #f0f1f6);color:var(--dds-btn-secondary-fg, #090714);box-shadow:var(--btn-glass)}
.dds-btn--secondary:hover{background:var(--dds-btn-secondary-bg-hover)}
.dds-btn--secondary:active{background:var(--dds-btn-secondary-bg-active)}
.dds-btn:disabled,.dds-btn--disabled{opacity:.5;pointer-events:none}
.dds-btn--block{width:100%}